/* ═══════════════════════════════════════════════════════════════════
   ArtLeb Collective — artleb.nl

   1. Home      the logo, COLLECTIVE. and the two studios. On arrival the logo
                settles from a little larger to its size, then COLLECTIVE.
                fades in while sliding a short way in from the left
   2. Panels    a little more about each studio, with a link to its site
   3. Colophon  who runs the site, small and quiet at the foot of the screen
   4. Leaves    the quiet pages: privacy and 404

   Every button and panel is liquid glass. The pointer is a light: wherever
   it goes, the glass catches it (js/main.js feeds --lx, --ly and --li).
   ═══════════════════════════════════════════════════════════════════ */

/* ── the face underneath ─────────────────────────────────────── */
/* Essonnes comes from Adobe Fonts (the <link> in index.html). Cormorant
   Garamond stands under it, for as long as Essonnes is on its way or out of
   reach, and it is hosted here rather than at Google: that way no visitor's
   address leaves this site to fetch a letter.
   Two files, both the latin subset, both variable from 300 to 700, so one
   covers every weight the page asks for (the same files as sketchleb.nl:
   fonts/, 37 and 39 KB). swap, so text is never invisible while they load. */
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("../fonts/cormorant-garamond-latin-var.woff2?v=5d618c46") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
                U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url("../fonts/cormorant-garamond-latin-italic-var.woff2?v=e6d6d1d7") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
                U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --navy:#1E2E3E;
  --gold:#E8C68C;               /* measured from the gold in the artwork */
  --gold-rgb:232,198,140;
  --gold-soft:rgba(232,198,140,.78);
  --light-rgb:255,243,222;      /* the colour of the pointer light: a warm white */

  /* Essonnes, by the names the Adobe kit gives it (index.html): display for
     everything set large or in capitals, text for reading. After it come the
     same letters as installed from Creative Cloud, then Cormorant Garamond
     from fonts/, then whatever the machine has. The kit has 400 and 700 only,
     so a weight of 500 below is set in its regular and 600 in its bold;
     Cormorant, being variable, takes them as written. */
  --display:"essonnes-display","Essonnes Display","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --text:"essonnes-text","Essonnes Text","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --caps:.2em;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-liquid:cubic-bezier(.34,1.56,.64,1);   /* overshoots a touch: the glass settles like liquid */
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* the logo: the same share of the screen as in the artwork (54 %),
     but never so tall that the buttons fall off */
  --lockup-w:min(54vw, calc((100svh - 230px) * 2.64));
}
@media (max-width:700px){ :root{ --lockup-w:min(88vw, calc((100svh - 260px) * 2.64)); } }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--navy);color:var(--gold);font-family:var(--text);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100svh}
img,picture,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── the background ─────────────────────────────────────────── */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none}
.backdrop img{width:100%;height:100%;object-fit:cover}

/* ═══ LIQUID GLASS ═════════════════════════════════════════════
   Four layers, back to front:
   - the element itself bends (Chromium), frosts and brightens what lies behind it
   - ::after  the surface: a soft glow where the light falls on it
   - ::before the rim: a hairline that catches the light, brightest on the side
              facing the pointer, with a fainter echo on the far side
   - the label on top
   ═════════════════════════════════════════════════════════════ */
.glass{
  --radius:999px;
  --frost:1.6px;                /* light frost: the pattern stays visible and bends at the rim */
  --tint:rgba(30,46,62,.10);
  --spot:150px;                 /* how far the light spreads over this surface */
  --rim:1.5px;
  --lx:-9999px; --ly:-9999px; --li:0;

  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  border-radius:var(--radius);
  color:var(--gold);text-decoration:none;cursor:pointer;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 48%,rgba(255,255,255,0) 60%,rgba(255,255,255,.05)),
    var(--tint);
  -webkit-backdrop-filter:blur(var(--frost)) saturate(1.6) brightness(1.2);
  backdrop-filter:var(--lens,) blur(var(--frost)) saturate(1.6) brightness(1.2);
  box-shadow:
    inset 1.5px 1.5px 1px -1px rgba(255,255,255,.45),
    inset -1.5px -1.5px 1px -1px rgba(255,255,255,.22),
    inset 0 0 0 .5px rgba(255,255,255,.10),
    inset 0 10px 18px -12px rgba(255,255,255,.18),
    inset 0 -14px 22px -14px rgba(255,255,255,.14),
    0 1px 2px rgba(4,9,16,.3),
    0 24px 48px -20px rgba(4,9,16,.8);
  text-shadow:0 1px 2px rgba(8,14,22,.55),0 0 18px rgba(8,14,22,.55);
  -webkit-tap-highlight-color:transparent;
  transition:scale .6s var(--ease-liquid),translate .7s var(--ease-liquid),box-shadow .4s var(--ease-out);
}
.glass::before,.glass::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none}
/* the rim */
.glass::before{
  padding:var(--rim);
  background:
    radial-gradient(circle var(--spot) at var(--lx) var(--ly),rgba(var(--light-rgb),var(--li)),rgba(var(--light-rgb),0) 72%),
    radial-gradient(circle calc(var(--spot) * .9) at calc(100% - var(--lx)) calc(100% - var(--ly)),
                    rgba(var(--light-rgb),calc(var(--li) * .55)),rgba(var(--light-rgb),0) 72%),
    linear-gradient(140deg,rgba(255,255,255,.55),rgba(255,255,255,.10) 28%,rgba(255,255,255,.04) 58%,rgba(255,255,255,.30));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
/* the surface: a pool of light under the pointer, and the light that gathers
   along the far edge after passing through the glass */
.glass::after{
  background:
    radial-gradient(circle calc(var(--spot) * .7) at var(--lx) var(--ly),rgba(var(--light-rgb),calc(var(--li) * .17)),rgba(var(--light-rgb),0) 65%),
    radial-gradient(circle calc(var(--spot) * .55) at calc(100% - var(--lx)) calc(100% - var(--ly)),rgba(var(--light-rgb),calc(var(--li) * .07)),rgba(var(--light-rgb),0) 60%);
  mix-blend-mode:screen;
}
.glass > *{position:relative;z-index:1}

.glass:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
@media (hover:hover) and (pointer:fine){
  a.glass:hover,button.glass:hover{scale:1.04}
}
a.glass:active,button.glass:active{scale:.965;transition-duration:.16s}

.glass--small{--spot:110px;min-height:44px;padding:0 20px;font-size:15px;letter-spacing:.06em}
.glass--round{--radius:50%;--spot:70px;width:44px;height:44px;padding:0}
.glass--gold{--tint:rgba(232,198,140,.15)}

/* ── 1 · Home ───────────────────────────────────────────────── */
/* Three rows of the screen: the logo and the studios in the middle one, the
   colophon at the foot of the last. The outer rows share what is left, so
   the logo stays in the middle of the screen; only when the colophon needs
   more than its share (a phone on its side) does the middle move up, and
   never under it. The height is fixed for that: with a free height the two
   outer rows would stay equal and the page would grow instead. */
.front{display:grid;grid-template-rows:1fr auto 1fr;height:100svh;
  padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
.home{grid-row:2;position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,5vh,56px)}
.lockup{position:relative;width:var(--lockup-w);font-size:0;font-weight:400}   /* 400: a heading asks for bold, and the kit would fetch it for nothing */
.lockup img{width:100%;height:auto}
.lockup-collective{position:absolute;inset:0}
/* the logo shrinks around the middle of its letters, not the middle of the whole image */
.lockup-logo{transform-origin:49.8% 34.9%}

/* Arriving: the logo and COLLECTIVE. wait for js/main.js to bring them in.
   Should the script never run, they appear by themselves after 4 seconds. */
.js .lockup-logo,.js .lockup-collective{opacity:0;animation:show-anyway 0s 4s forwards}
.js.arrived .lockup-logo,.js.arrived .lockup-collective{opacity:1;animation:none}
@keyframes show-anyway{to{opacity:1}}

.brands{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.6vw,24px)}
.brand-button{--spot:150px;
  min-width:clamp(150px,6vw + 110px,220px);min-height:clamp(54px,.8vw + 46px,64px);padding:0 28px;
  font-family:var(--display);font-weight:500;font-size:clamp(20px,.4vw + 17px,24px);letter-spacing:.01em}

/* ── 2 · Panels ─────────────────────────────────────────────── */
.panel{
  --radius:32px;--frost:14px;--tint:rgba(16,27,40,.46);--spot:380px;--rim:1.5px;
  position:fixed;inset:0;margin:auto;
  width:min(calc(100vw - 32px),540px);height:fit-content;max-height:calc(100svh - 32px);max-width:none;
  padding:0;border:0;overflow:visible;cursor:auto;
  display:flex;flex-direction:column;text-align:center;
}
.panel:not([open]){display:none}
.panel::backdrop{background:rgba(8,14,22,.42);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.panel[open]::backdrop{animation:fade-in .5s var(--ease-out) both}
.panel.is-closing::backdrop{animation:fade-out .3s var(--ease-soft) both}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}

.panel-body{overflow:auto;min-height:0;display:flex;flex-direction:column;align-items:center;
  padding:clamp(52px,7vh,68px) clamp(24px,5vw,48px) clamp(32px,5vh,44px)}
.panel-close{position:absolute;top:14px;right:14px;z-index:2}
.panel-eyebrow{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:var(--caps);
  text-transform:uppercase;color:var(--gold-soft);margin-left:var(--caps)}
.panel-title{font-family:var(--display);font-weight:500;font-size:clamp(40px,2vw + 28px,56px);line-height:1.05;margin-top:10px}
.panel-tagline{font-style:italic;font-size:20px;color:var(--gold-soft);margin-top:4px}
.panel-text{max-width:34ch;margin-top:22px;font-size:18px;line-height:1.6;color:rgba(var(--gold-rgb),.92)}
.panel-services{margin-top:18px;font-family:var(--display);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-soft)}
.panel-services span{margin:0 .35em}
.panel-cta{margin-top:32px;min-height:56px;padding:0 28px 0 32px;
  font-family:var(--display);font-weight:500;font-size:20px}

/* ── 3 · Colophon ───────────────────────────────────────────── */
/* One line on a laptop; on a phone two or three, broken only after a dot or
   after the street. js/main.js hides a dot that would end up at the end of a
   line. */
.colophon{grid-row:3;align-self:end;position:relative;z-index:1;
  margin-top:24px;text-align:center;
  font-family:var(--text);font-size:13px;line-height:1.75;letter-spacing:.03em;
  color:rgba(var(--gold-rgb),.66);text-shadow:0 1px 2px rgba(8,14,22,.6)}
.colophon span:not(.sep),.colophon a{white-space:nowrap}
.colophon .sep{padding:0 .7em;color:rgba(var(--gold-rgb),.45)}
.colophon .sep--break{display:block;height:0;overflow:hidden}   /* a dot that would start a line (js/main.js) */
.colophon a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:rgba(var(--gold-rgb),.32);padding:6px 0;
  transition:color .3s var(--ease-out),text-decoration-color .3s var(--ease-out)}
.colophon a:hover,.colophon a:focus-visible{color:var(--gold);text-decoration-color:var(--gold-soft)}
.colophon a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.colophon a[aria-current]{text-decoration:none;cursor:default}
@media (max-width:700px){
  .colophon{font-size:12px;line-height:1.7}
  .colophon .sep{padding:0 .55em}
}
/* Narrower than this the colophon cannot be one line. It then splits where
   the company details begin: who and where above, the numbers and Privacy
   below, so Privacy never ends up on a line of its own. */
@media (max-width:1080px){
  .colophon .sep--mid{display:block;height:0;overflow:hidden}
}
/* a phone held upright: three lines, the last one being
   "Chamber of Commerce … · VAT … · Privacy", which has to fit in 328 px */
@media (max-width:420px){
  .colophon{font-size:11px;letter-spacing:.01em;margin-inline:-4px}
  .colophon .sep{padding:0 .42em}
}

/* ── 4 · Leaves: privacy and 404 ────────────────────────────── */
/* Quiet pages: the same background, glass and letters, nothing that arrives.
   The page scrolls if it has to; the background stays where it is. */
.leaf{display:flex;flex-direction:column;align-items:center;
  padding:max(40px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
.leaf-main{position:relative;z-index:1;flex:1 0 auto;width:min(100%,660px);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.leaf--centre .leaf-main{justify-content:center;padding-bottom:5vh}

/* the logo, small and still, back to the start */
.mark{position:relative;display:block;width:clamp(180px,16vw + 100px,250px);font-size:0;border-radius:8px}
.mark img{width:100%;height:auto}
.mark picture + picture{position:absolute;inset:0}
.mark:focus-visible{outline:2px solid var(--gold);outline-offset:6px}

.leaf-eyebrow{margin-top:clamp(28px,5vh,48px);margin-left:var(--caps);
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:var(--caps);
  text-transform:uppercase;color:var(--gold-soft)}
.leaf-title{font-family:var(--display);font-weight:500;font-size:clamp(40px,2vw + 28px,56px);line-height:1.05;margin-top:10px}
.mark + .leaf-title{margin-top:clamp(28px,5vh,48px)}
.leaf-when{font-style:italic;font-size:18px;color:var(--gold-soft);margin-top:6px}
.leaf-lede{max-width:34ch;margin-top:20px;font-size:18px;line-height:1.6;color:rgba(var(--gold-rgb),.92)}

/* the text of a leaf, on one large pane of glass */
.glass--card{--radius:28px;--frost:14px;--tint:rgba(16,27,40,.46);--spot:380px;
  display:block;width:100%;cursor:auto;text-align:left;margin-top:clamp(28px,4vh,40px);
  padding:clamp(28px,5vw,48px) clamp(22px,5vw,52px)}
.glass--card section + section{margin-top:26px}
.glass--card h2{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.25}
.glass--card p{margin-top:6px;font-size:17px;line-height:1.65;color:rgba(var(--gold-rgb),.92)}
.glass--card a{text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(var(--gold-rgb),.45)}
.glass--card a:hover{text-decoration-color:var(--gold)}

.leaf-back{margin-top:clamp(28px,4vh,40px);min-height:52px;padding:0 26px 0 22px;
  font-family:var(--display);font-weight:500;font-size:18px}
.leaf .colophon{align-self:stretch;margin-top:clamp(40px,8vh,72px)}

/* ── preferences ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .js .lockup-logo,.js .lockup-collective{opacity:1;animation:none}
  .glass,.colophon a{transition:none}
  a.glass:hover,button.glass:hover,a.glass:active,button.glass:active{scale:none}
  .panel[open]::backdrop,.panel.is-closing::backdrop{animation:none}
}
@media (prefers-reduced-transparency:reduce){
  .glass{--tint:rgba(18,30,44,.9)}
  .panel,.glass--card{--tint:rgba(16,27,40,.96)}
}