/* ==========================================================================
   Aurae Creatives — styles
   Based on the Swiss Reduce layout. One type size, one weight (Relief AE Bold).
   ========================================================================== */

/* ---------- Fonts: Relief AE (Aurae Creatives) ---------- */
@font-face{font-family:"Relief AE";src:url("../fonts/ReliefAE-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Relief AE";src:url("../fonts/ReliefAE-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Relief AE";src:url("../fonts/ReliefAE-SemiBold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Relief AE";src:url("../fonts/ReliefAE-SemiBoldItalic.woff") format("woff");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Relief AE";src:url("../fonts/ReliefAE-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Relief AE";src:url("../fonts/ReliefAE-BoldItalic.woff") format("woff");font-weight:700;font-style:italic;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* "Viewed in White" (default): white page, black type */
  --ink:#000;
  --paper:#fff;
  --ph-1:#d9d9d7;              /* empty photo slot: light, mid, dark greys */
  --ph-2:#a9a9a6;
  --ph-3:#6f6f6c;
  --fs:clamp(22px,4.3vw,76px); /* the one type size of the site */
  --pad:clamp(16px,3.125vw,48px);
  --top:25px;                  /* space above the header line (as on Swiss Reduce) */
  --gap:40px;                  /* space after each image before the next name (as on Swiss Reduce) */
  --hdr:calc(var(--fs) + var(--top) * 2);
  --ease:cubic-bezier(.65,0,.2,1);
  color-scheme:light;
}
/* "Viewed in Black": black page, white type (the menu inverts to white) */
:root[data-mode="night"]{
  --ink:#fff;--paper:#000;
  --ph-1:#4a4a48;--ph-2:#2e2e2d;--ph-3:#181817;
  color-scheme:dark;
}

/* "Viewed in Red": oxblood page, white type (the menu inverts to white) */
:root[data-mode="red"]{
  --ink:#fff;--paper:#330000;
  --ph-1:#6e3a3a;--ph-2:#4d1f1f;--ph-3:#240000;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Relief AE","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:700;font-size:var(--fs);line-height:1;letter-spacing:-.04em;
  -webkit-font-smoothing:antialiased;
}
body,.studio-content{transition:background-color .6s ease,color .6s ease}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0;padding:0;font:inherit;list-style:none}
a:focus-visible,button:focus-visible{outline:3px solid currentColor;outline-offset:4px}
img{max-width:100%}

/* Text that animates inside a mask. Extra room below and on the sides so
   descenders and the hooked J of Relief AE are never clipped. */
.clip{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .12em .3em;margin:-.08em -.12em -.3em}
.clip > span{display:inline-block;transition:transform .7s var(--ease),opacity .5s ease}

/* A ">" that slides in before a link on hover (menu projects, footer links) */
.arr{display:inline-block;max-width:0;opacity:0;overflow:hidden;vertical-align:top;white-space:pre;
  transition:max-width .6s var(--ease),opacity .4s ease}
a:hover .arr,a:focus-visible .arr,.hov:hover .arr{max-width:1.4em;opacity:1}

/* Hover on links (menu projects, footer "Atelier", Atelier contacts): the text slides slightly to the right
   and fades — the same movement as the old ">" but without the arrow */
.arr{display:none!important}
a:has(> .arr),.hov{display:inline-block;transition:transform .6s var(--ease),opacity .4s ease}
a:has(> .arr):hover,a:has(> .arr):focus-visible,.hov:hover{transform:translateX(.35em);opacity:.45}

/* ---------- Header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:40;
  padding:calc(var(--top) + env(safe-area-inset-top,0px)) var(--pad) 0;
  height:calc(var(--hdr) + env(safe-area-inset-top,0px));
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  pointer-events:none;
}
.hdr > *{pointer-events:auto}
.logo{justify-self:start;display:inline-flex;overflow:hidden}
.hdr-title{justify-self:center;text-align:center;white-space:nowrap;will-change:transform}

/* Header logo: the AURAE wordmark at the cap height of the type. Once you scroll only the A stays:
   the other letters drift right and fade (same movement as before). Drawn as masks, so it follows
   the text colour in every mode. */
.logo-mark{position:relative;display:block;height:.645em;width:calc(.645em * 4.175);margin-top:.179em}
.logo-mark > span{position:absolute;inset:0;background:currentColor;
  -webkit-mask:var(--m) left top/100% 100% no-repeat;mask:var(--m) left top/100% 100% no-repeat}
.logo-mark .lm-a{--m:url("../img/aurae-logo-a.png")}
.logo-mark .lm-u{--m:url("../img/aurae-logo-u.png")}
.logo-mark .lm-r{--m:url("../img/aurae-logo-r.png")}
.logo-mark .lm-v{--m:url("../img/aurae-logo-v.png")}
.logo-mark .lm-e{--m:url("../img/aurae-logo-e.png")}
/* Once you scroll only the A stays: U-R-A-E drift slightly right together and fade, with a small
   springy settle (the same movement as the original Swiss Reduce "R"). Hovering the A brings them back. */
.logo-mark .ll{transition:transform .8s cubic-bezier(.34,1.56,.64,1),opacity .35s ease}
html.scrolled .logo-mark .ll{transform:translateX(.3em);opacity:0}
html.scrolled .logo:hover .logo-mark .ll{transform:none;opacity:1}
/* "Auræ" → "A" once you scroll: the rest drifts right and fades, with a small springy settle */
.logo .le{transition:transform .8s cubic-bezier(.34,1.56,.64,1),opacity .35s ease}
html.scrolled .logo .le{transform:translateX(.3em);opacity:0}
html.scrolled .logo:hover .le{transform:none;opacity:1}

/* Home: the "Atelier" label hands over to the project names once you scroll */
html.scrolled .hdr-studio > span{transform:translateY(-110%);opacity:0}
html.scrolled .hdr-studio{pointer-events:none}
.work:first-child .t .clip > span{transform:translateY(110%);opacity:0}
html.scrolled .work:first-child .t .clip > span{transform:none;opacity:1}

/* "M" at rest; on hover the whole word "Menu" slides in from the right */
.menu-btn{
  justify-self:end;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;
  display:inline-flex;align-items:flex-start;overflow:hidden;padding:.08em 0;margin-block:-.08em;
}
.menu-btn .m,.menu-btn .e{display:inline-block;transition:transform .7s var(--ease)}
.menu-btn .m{transform:translateX(var(--ew,1.6em))}
.menu-btn .e{transform:translateX(calc(var(--ew,1.6em) * 2))}
.menu-btn:hover .m,.menu-btn:hover .e,.menu-btn:focus-visible .m,.menu-btn:focus-visible .e{transform:none}

/* ---------- Menu overlay ---------- */
.nav{
  position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--paper);
  padding:calc(25px + env(safe-area-inset-top,0px)) var(--pad) calc(25px + env(safe-area-inset-bottom,0px));
  display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;
  --slide:1.2s cubic-bezier(.76,0,.24,1);
  transform:translate3d(0,-100%,0);visibility:hidden;will-change:transform;
  transition:transform var(--slide),visibility 0s linear 1.2s;   /* closing: slide up, then hide */
}
.nav.open{
  transform:translate3d(0,0,0);visibility:visible;
  transition:transform var(--slide),visibility 0s linear 0s;     /* opening: slide down from the top */
}
html.menu-open,html.menu-open body{overflow:hidden}
.nav ul{grid-column:1;grid-row:1;align-self:start}
.nav li a{display:inline-block}
.nav .atelier-link{grid-column:1;grid-row:2;justify-self:start}

/* "Close" and "Atelier": on hover only the first letter stays, the rest drifts right and fades */
.drop .le{transition:transform .8s cubic-bezier(.34,1.56,.64,1),opacity .35s ease}
.drop:hover .le{transform:translateX(.3em);opacity:0}
/* "Close" sits against the right edge: "lose" clears out first, then the C glides over */
.nav .close{grid-column:2;grid-row:1;align-self:start;justify-self:end;background:none;border:0;padding:0;
  color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;
  transform:translateY(-250%);transition:transform .5s var(--ease)}
.nav.open .close{transform:none;transition:transform .7s var(--ease) .95s}   /* drops in once the panel has landed */
.close .le{transition:transform .5s var(--ease) .35s,opacity .3s ease .45s}
.close:hover .le{transition:transform .5s var(--ease),opacity .18s ease}
.close .c{display:inline-block;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.close:hover .c{transform:translateX(var(--lw,2.8em));transition-delay:.12s}

/* ---------- Pages ---------- */
main{padding-inline:var(--pad)}
.page{animation:pagein .9s var(--ease) both}
@keyframes pagein{from{opacity:.001;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Photo / video slot. Shows a grey placeholder until a file is added in the Panel. */
.ph{
  position:relative;width:100%;max-width:100%;overflow:hidden;display:block;margin:0;
  background:
    radial-gradient(120% 90% at var(--gx,30%) var(--gy,70%),var(--ph-1),transparent 60%),
    radial-gradient(80% 70% at var(--hx,80%) var(--hy,20%),var(--ph-3),transparent 70%),
    var(--ph-2);
}
.ph::after{
  content:"";position:absolute;inset:0;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph img,.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph:has(img)::after,.ph:has(video)::after{display:none}
/* Home covers and the first image of a project: shown at the file's own proportions, never cropped or resized */
.ph.ph--natural,.work .ph.ph--natural,.proj-hero .ph.ph--natural{aspect-ratio:auto;height:auto;background:none}
.ph--natural img,.ph--natural video{position:static;display:block;width:100%;height:auto;object-fit:initial}
.ph figcaption{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font:500 11px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.02em;color:#fff;
  background:rgba(0,0,0,.45);padding:4px 7px;max-width:calc(100% - 28px);
}

/* Video controls: Play / Pause and Sound on / off, set in the site type */
.vctl{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;
  padding:clamp(10px,1.6vw,22px) clamp(12px,1.8vw,24px);font-size:clamp(16px,1.9vw,28px);color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.35),transparent)}
.vctl button{background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}
.vctl button:hover{opacity:.7}

/* ---------- Home ---------- */
.work{position:relative;padding-bottom:var(--gap)}
.work > a{display:block}
.work .t,.person .t{       /* the name sits above its image and sticks at the top while it scrolls past */
  position:sticky;top:0;z-index:2;display:block;text-align:center;
  padding-top:calc(var(--top) + env(safe-area-inset-top,0px));height:var(--hdr);
}
.work .ph{aspect-ratio:1200/575;height:auto;transition:transform .9s var(--ease)}
.work a:hover .ph{transform:scale(.985)}
.manifesto{padding-block:calc(var(--fs) * 1) calc(var(--fs) * 3);text-wrap:balance}

/* ---------- Project ---------- */
.proj-hero{padding-top:var(--hdr)}
.proj-hero .ph{aspect-ratio:1200/575;height:auto}
.meta{display:flex;justify-content:space-between;gap:1em;padding-block:30px}
.desc{padding-block:calc(var(--fs) * 2.6) calc(var(--fs) * 0.9)}
.gallery{display:grid;gap:15px}
.gallery .ph{aspect-ratio:1200/680;height:auto}

/* ---------- Atelier ---------- */
.studio-content{
  position:relative;z-index:3;background:var(--paper);
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
}
.studio-intro{padding-top:calc(var(--hdr) + var(--fs) * 3.9);padding-bottom:30px;text-wrap:pretty}
.studio-video{aspect-ratio:4/3;height:auto}   /* the Atelier film is 4:3 (1440×1080): nothing is cropped */
.cols{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--pad);row-gap:calc(var(--fs) * 2);padding-block:30px calc(var(--fs) * 4)}
.cols h2{margin-bottom:var(--fs)}
.team{display:grid;grid-template-columns:1fr;gap:0;padding-bottom:var(--pad)}
.person{position:relative;padding-bottom:var(--gap)}
.team .ph{aspect-ratio:3/4;height:auto;width:100%}

/* Atelier footer: pinned to the bottom of the screen, revealed from under the last portrait */
.studio-foot{
  position:sticky;bottom:0;z-index:1;min-height:100vh;padding-top:calc(var(--hdr) + 20px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:calc(35px + env(safe-area-inset-bottom,0px));
}
.studio-foot .cols{padding-block:0}
.studio-foot .cols h2{margin-bottom:.5em}
.studio-foot .hov{display:inline-block;cursor:pointer}

/* ---------- Footer (home & projects) ---------- */
.foot{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--pad);row-gap:calc(var(--fs) * .75);
  padding-block:calc(var(--fs) * 2) calc(25px + env(safe-area-inset-bottom,0px))}
.mode-btn{background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;justify-self:start;text-align:left}

/* Big AURAE wordmark closing every page; drawn as a mask so it takes the text colour */
.big-logo{display:block;grid-column:1/-1;width:100%;aspect-ratio:4.1743;background:currentColor;
  -webkit-mask:url("../img/aurae-logo.png") center/100% 100% no-repeat;
          mask:url("../img/aurae-logo.png") center/100% 100% no-repeat}
.studio-foot .big-logo{margin-top:calc(var(--fs) * .75)}

/* ---------- Small screens ---------- */
/* very small phones: keep "Viewed in White / Red / Black" and "Atelier" on one line without touching */
@media (max-width:360px){ .foot > a,.foot > .mode-btn{font-size:.85em} }
/* phones: sizes and spacing measured on Swiss Reduce at 375px wide */
@media (max-width:560px){
  :root{--fs:30px;--pad:15px;--top:25px;--gap:15px}
  .desc{padding-block:143px 50px}
  .manifesto{padding-block:20px 187px}
  .foot{padding-top:150px;grid-template-columns:auto auto;justify-content:space-between}
  .foot > a,.foot > .mode-btn{white-space:nowrap}
  .studio-intro{padding-top:203px}
  .cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}