/* ═══════════════════════════════════════════════════════════════
   TK — Design, Direction & Digital
   ───────────────────────────────────────────────────────────────
   01 Tokens · 02 Reset · 03 Type utilities · 04 Fixed layers
   05 Nav & menu · 06 Hero · 07 Work · 08 Websites · 09 Archive
   10 About · 11 Capabilities · 12 Principle · 13 Contact
   14 Footer · 15 Project template · 16 Responsive · 17 Reduced motion
   ═══════════════════════════════════════════════════════════════ */

/* ── 01 · TOKENS ─────────────────────────────────────────────── */
:root{
  --paper:     #F2F0EB;
  --ink:       #0D0D0D;
  --muted:     #6E6B65;
  --muted-inv: #8C8880;
  --rule:      rgba(13,13,13,.14);
  --rule-inv:  rgba(242,240,235,.16);
  --ph:        #E2DED4;

  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Times, serif;

  --fs-hero:    clamp(3rem,    12vw,   13rem);    /*  48 → 208 */
  --fs-display: clamp(2.5rem,   7vw,    6.5rem);  /*  40 → 104 */
  --fs-sec:     clamp(2rem,     5vw,    4.75rem); /*  32 →  76 */
  --fs-lead:    clamp(1.4rem,   2.9vw,  2.5rem);  /*  22 →  40 */
  --fs-body:    clamp(1rem,     .875rem + .4vw, 1.2rem);
  --fs-meta:    clamp(.6875rem, .64rem + .2vw, .8125rem);

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --gut: clamp(1rem, 1.8vw, 1.75rem);
  --sec: clamp(6rem, 13vw, 13rem);

  --e:    cubic-bezier(.22,1,.36,1);
  --e-in: cubic-bezier(.62,.05,.2,1);
}

/* ── 02 · RESET ──────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; background:var(--paper) }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); font-weight:400;
  line-height:1.45; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden }
h1,h2,h3,h4,p,figure,ul,figcaption{ margin:0 }
ul{ list-style:none; padding:0 }
a{ color:inherit; text-decoration:none }
img,video{ display:block; max-width:100% }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer }
::selection{ background:var(--ink); color:var(--paper) }
:focus-visible{ outline:1px solid currentColor; outline-offset:.35em }

.skip{
  position:fixed; top:0; left:0; z-index:999; padding:.9em 1.2em;
  background:var(--ink); color:var(--paper); font-size:var(--fs-meta);
  letter-spacing:.08em; text-transform:uppercase; transform:translateY(-110%);
}
.skip:focus{ transform:none }

/* ── 03 · TYPE UTILITIES ─────────────────────────────────────── */
.meta{
  font-size:var(--fs-meta); line-height:1.35; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); font-weight:500;
}
.meta .sep{ padding:0 .5em; opacity:.45 }
.arrow{
  display:inline-block; width:.82em; height:.82em; vertical-align:-.04em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .55s var(--e);
}
.arrow--external{ transform:rotate(-45deg) }
a:hover .arrow--external{ transform:translate(.18em,-.18em) rotate(-45deg) }
a:hover .arrow--right{ transform:translateX(.18em) }

.link{ position:relative; display:inline-block }
.link::after{
  content:""; position:absolute; left:0; right:0; bottom:-.16em; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s var(--e);
}
.link:hover::after,.link:focus-visible::after{ transform:scaleX(1) }

.rv-w{ display:inline-block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; vertical-align:top }
.rv-i{ display:inline-block; will-change:transform }
[data-reveal],[data-words]{ animation:rv-failsafe .01s linear 2.5s forwards }
[data-reveal]:not(.is-ready),[data-words]:not(.is-ready){ opacity:0 }
@keyframes rv-failsafe{ to{ opacity:1 } }

.sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  margin:0 var(--pad) clamp(2.5rem,6vw,5.5rem);
  padding-top:clamp(1rem,1.6vw,1.6rem); border-top:1px solid var(--rule);
}
.sec-head__title{ font-size:var(--fs-sec); font-weight:600; line-height:.92; letter-spacing:-.035em }
.sec-head__idx{ flex:none }

/* ── 04 · FIXED LAYERS ───────────────────────────────────────── */
.grain{
  position:fixed; inset:-50%; z-index:200; pointer-events:none;
  opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.curtain{
  position:fixed; inset:0; z-index:300; background:var(--ink);
  transform:scaleY(0); transform-origin:50% 100%; pointer-events:none;
}

.cursor{ display:none }
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:grid; place-items:center; position:fixed; top:0; left:0; z-index:400;
    pointer-events:none; width:8px; height:8px; border-radius:50%;
    background:var(--ink); mix-blend-mode:difference;
    transform:translate3d(-50%,-50%,0);
    transition:width .5s var(--e), height .5s var(--e), background .3s linear;
  }
  .cursor__label{
    position:absolute; white-space:nowrap; font-size:11px; font-weight:500;
    letter-spacing:.1em; text-transform:uppercase; color:var(--paper);
    opacity:0; transform:scale(.9);
    transition:opacity .35s var(--e), transform .5s var(--e);
  }
  body.cursor-view .cursor{ width:96px; height:96px; mix-blend-mode:normal; background:var(--ink) }
  body.cursor-view .cursor__label{ opacity:1; transform:none }
  body.cursor-hidden .cursor{ opacity:0 }
}

.preview{
  position:fixed; top:0; left:0; z-index:40; width:clamp(180px,17vw,300px);
  pointer-events:none; opacity:0; transform:translate3d(-50%,-50%,0) scale(.94);
  transition:opacity .5s var(--e), transform .7s var(--e);
}
.preview.is-on{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1) }
.preview__frame{ aspect-ratio:4/3; overflow:hidden; background:var(--ph) }
.preview__frame img{ width:100%; height:100%; object-fit:cover }

/* ── 05 · NAV & MENU ─────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(1.1rem,2.2vw,1.9rem) var(--pad);
  color:var(--ink); transition:color .55s var(--e);
}
body.nav-dark .nav,body.nav-scrim .nav{ color:var(--paper) }
/* soft scrim so the nav stays readable where it crosses full-bleed media */
.nav__scrim{
  position:absolute; left:0; right:0; top:0; height:calc(100% + 2.4rem); z-index:-1;
  background:linear-gradient(to bottom, rgba(13,13,13,.45), rgba(13,13,13,0));
  opacity:0; transition:opacity .45s var(--e); pointer-events:none;
}
body.nav-scrim .nav__scrim{ opacity:1 }
.nav__mark{ font-size:clamp(1.05rem,1.2vw,1.25rem); font-weight:700; letter-spacing:-.02em; line-height:1; margin-right:auto }
.nav__links{ display:flex; gap:clamp(1.1rem,2vw,2rem) }
.nav__links .link,.nav__cta{
  font-size:var(--fs-meta); font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; transition:transform .5s var(--e);
}
.nav__links .link:hover,.nav__cta:hover{ transform:translateY(-2px) }
.nav__cta{ margin-left:clamp(1.5rem,3vw,3rem) }
.nav__toggle{ display:none }

.menu{
  position:fixed; inset:0; z-index:150; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--pad) * 2) var(--pad) var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--e);
}
.menu[hidden]{ display:none }
body.menu-open .menu{ clip-path:inset(0 0 0 0) }
.menu__nav{ display:flex; flex-direction:column; gap:.05em }
.menu__nav a{ font-size:clamp(2.4rem,11vw,4.5rem); font-weight:600; line-height:1.05; letter-spacing:-.035em; overflow:hidden; display:block }
.menu__nav a span{ display:block; transform:translateY(105%); transition:transform .9s var(--e) }
body.menu-open .menu__nav a span{ transform:none }
body.menu-open .menu__nav a:nth-child(2) span{ transition-delay:.05s }
body.menu-open .menu__nav a:nth-child(3) span{ transition-delay:.1s }
body.menu-open .menu__nav a:nth-child(4) span{ transition-delay:.15s }
.menu__foot{
  margin-top:auto; padding-top:2.5rem; border-top:1px solid var(--rule-inv);
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap;
}
.menu__foot .meta{ color:var(--muted-inv) }
.menu__cta{ font-size:var(--fs-meta); font-weight:500; letter-spacing:.09em; text-transform:uppercase }

/* ── 06 · HERO ───────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--pad) + 4.5rem) var(--pad) calc(var(--pad) + 3.2rem);
}
/* the figure sits BETWEEN the type layers: lines 1-2 behind, line 3 in
   front, so he is standing inside the words rather than beside them */
.hero__stage{ position:relative; display:flex; align-items:center; min-height:min(50vh,27rem) }
.hero__h{
  position:relative; width:100%;
  font-size:var(--fs-hero); font-weight:700; line-height:.84;
  letter-spacing:-.045em; text-transform:uppercase;
}
.hero__l{ display:block; position:relative; width:max-content }
.hero__l--back{ z-index:1 }
.hero__l--front{ z-index:3; margin-left:12vw }   /* staggered so it crosses the figure in front */
.hero__fig{
  position:absolute; right:9vw; bottom:-1.4rem; z-index:2; margin:0; pointer-events:none;
}
.hero__fig img{
  height:min(56vh,34rem); width:auto;
  filter:drop-shadow(-14px 12px 26px rgba(13,13,13,.15));
}
.hero__fig::after{
  content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  width:124%; height:30px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(13,13,13,.18) 0%, rgba(13,13,13,.06) 48%, rgba(13,13,13,0) 74%);
}
.hero__sub{
  position:relative; z-index:3;
  margin-top:clamp(1.5rem,3vw,2.75rem);
  display:flex; align-items:center; gap:1.1em;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,2.5vw,2.25rem); line-height:1.1; letter-spacing:-.01em;
}
.hero__sub .rule{ display:block; width:clamp(2.5rem,6vw,6rem); height:1px; background:var(--ink); flex:none; opacity:.5 }
.hero__foot{
  position:relative; z-index:3; margin-top:auto;
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding-top:clamp(1rem,2vw,2rem); border-top:1px solid var(--rule);
}
.hero__loc{ text-align:right }
.scroll-cue{ display:inline-flex; align-items:center; gap:.75em; font-size:var(--fs-meta); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted) }
.scroll-cue__a{
  display:inline-block; width:.82em; height:.82em; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v11M3.5 8.5 8 13l4.5-4.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v11M3.5 8.5 8 13l4.5-4.5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:cue 2.6s var(--e) infinite;
}
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:.45 } 45%{ transform:translateY(.5em); opacity:1 } }

/* ── 06b · CLIENT MARQUEE ────────────────────────────────────── */
.marq{
  position:relative; overflow:hidden;
  padding:clamp(2.5rem,5vw,4.5rem) 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.marq__label{ padding:0 var(--pad); margin-bottom:clamp(1.75rem,3.5vw,3rem) }
.marq__wrap{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marq__row{
  display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.4rem);
  width:max-content; animation:marq 70s linear infinite;
}
.marq__row li{ flex:none; display:flex; align-items:center }
.marq__row img{
  height:clamp(3.4rem,5.2vw,5rem); width:auto; object-fit:contain;
  opacity:.72; transition:opacity .45s var(--e);
}
.marq__row li:hover img{ opacity:1 }
.marq:hover .marq__row{ animation-play-state:paused }
@keyframes marq{ to{ transform:translateX(calc(-50% - clamp(.5rem,1.1vw,1.2rem))) } }

/* ── 07 · WORK ───────────────────────────────────────────────── */
.work{ position:relative; padding-top:var(--sec) }

.media{ position:relative; will-change:transform }
.media__frame{ position:relative; overflow:hidden; background:var(--ph) }
.media--wide .media__frame{ aspect-ratio:16/9 }
.media--land .media__frame{ aspect-ratio:3/2 }
.media--portrait .media__frame{ aspect-ratio:4/5 }
.media--square .media__frame{ aspect-ratio:1/1 }
.media__frame img,.media__frame video{
  width:100%; height:100%; object-fit:cover;
  transform:translate3d(0,var(--iy,0%),0) scale(var(--iz,1.05));
  transition:transform 1.1s var(--e); will-change:transform;
}

.proj{ margin-bottom:clamp(4rem,10vw,11rem) }
.proj__link{ display:block }
.proj__link:hover .media__frame img{ --iz:1.09 }
.proj__title{ font-size:clamp(1.5rem,3.2vw,2.9rem); font-weight:600; line-height:1; letter-spacing:-.032em }
.proj__meta{
  display:flex; align-items:baseline; gap:clamp(1rem,3vw,2.5rem);
  margin:clamp(.9rem,1.4vw,1.4rem) var(--pad) 0;
  padding-top:clamp(.9rem,1.4vw,1.4rem); border-top:1px solid var(--rule);
}
.proj__tags{ margin-right:auto }
.proj__view{ opacity:0; transform:translateY(.35em); color:var(--ink);
  transition:opacity .6s var(--e), transform .6s var(--e) }
.proj__link:hover .proj__view,.proj__link:focus-visible .proj__view{ opacity:1; transform:none }

/* 3-up strip */
.strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gut);
  padding:0 var(--pad); margin-bottom:clamp(4rem,10vw,11rem);
}
.strip .media:nth-child(2){ margin-top:clamp(2rem,5vw,5rem) }

/* asymmetric split with sticky title */
.proj--split .proj__link{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut);
  padding:0 var(--pad); align-items:start;
}
.proj--split .proj__sticky{
  grid-column:1 / span 3; position:sticky; top:32vh;
  display:flex; flex-direction:column; gap:.6rem; align-items:flex-start;
}
.proj--split .proj__a{ grid-column:5 / span 4 }
.proj--split .proj__b{ grid-column:10 / span 3; margin-top:clamp(5rem,15vw,15rem) }
.proj--flip .proj__sticky{ grid-column:10 / span 3; order:3 }
.proj--flip .proj__a{ grid-column:1 / span 4 }
.proj--flip .proj__b{ grid-column:6 / span 3; margin-top:clamp(5rem,15vw,15rem) }

/* stacked / overlapping */
.proj--stack .proj__link{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut); padding:0 var(--pad) }
.proj--stack .proj__a{ grid-column:1 / span 9 }
.proj--stack .proj__b{ grid-column:8 / span 4; margin-top:clamp(-12rem,-13vw,-4rem); z-index:2 }
.proj__meta--stack{ grid-column:1 / span 12; margin-left:0; margin-right:0 }

/* three-poster grid */
.proj--grid .proj__link{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gut); padding:0 var(--pad) }
.proj__meta--top{ grid-column:1 / -1; margin:0 0 clamp(1rem,2vw,2rem); padding-top:clamp(.9rem,1.4vw,1.4rem) }
.proj--grid .media:nth-of-type(2){ margin-top:clamp(1.5rem,4vw,4rem) }

/* ── 08 · WEBSITES ───────────────────────────────────────────── */
.sites{ position:relative; padding-top:var(--sec) }
.sites__body{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut);
  padding:0 var(--pad); align-items:start;
}
.sites__shot{ grid-column:1 / span 5 }
.sites__scroll{
  height:clamp(26rem,58vh,40rem); overflow:hidden; background:var(--ph);
  box-shadow:0 30px 60px -30px rgba(13,13,13,.28);
}
.sites__scroll img{ width:100%; height:auto; transform:translateY(var(--sy,0%)) }
.sites__shot figcaption{ margin-top:.9rem }

.sites__list{ border-top:1px solid var(--rule) }
.sites__list a,.sites__list .sites__blk{
  display:grid; grid-template-columns:minmax(0,1fr); row-gap:.5rem;
  padding:clamp(1.2rem,2.4vw,2.1rem) 0; border-bottom:1px solid var(--rule);
  transition:opacity .5s var(--e);
}
.sites__list li:hover a{ opacity:1 }
.sites__list .sites__blk{ cursor:default }
.sites__list.is-hovering a{ opacity:.35 }
.sites__name{
  grid-row:1; font-size:clamp(1.35rem,2.7vw,2.3rem); font-weight:600;
  letter-spacing:-.03em; line-height:1; transition:transform .7s var(--e);
}
.sites__list a:hover .sites__name{ transform:translateX(.5rem) }
.sites__desc{ grid-row:2; grid-column:1; max-width:44ch }

/* ── 09 · ARCHIVE ────────────────────────────────────────────── */
.archive{ position:relative; padding-top:var(--sec) }
.arch{ padding:0 var(--pad) }
.arch__head{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 6rem; gap:var(--gut);
  padding-bottom:1rem; border-bottom:1px solid var(--rule);
}
.arch__row a{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 6rem; gap:var(--gut);
  align-items:baseline; padding:clamp(.9rem,1.7vw,1.5rem) 0;
  border-bottom:1px solid var(--rule); transition:opacity .5s var(--e);
}
.arch__name{ font-size:clamp(1.1rem,2.2vw,1.85rem); font-weight:600; letter-spacing:-.028em; line-height:1;
  transition:transform .7s var(--e) }
.arch__yr{ text-align:right }
.arch.is-hovering .arch__row a{ opacity:.32 }
.arch.is-hovering .arch__row a:hover{ opacity:1 }
.arch__row a:hover .arch__name{ transform:translateX(.6rem) }

/* ── 10 · ABOUT ──────────────────────────────────────────────── */
.about{
  position:relative; padding:var(--sec) var(--pad) 0;
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut); align-items:start;
}
.about .sec-head__idx{ grid-column:1 / span 2 }
.about__body{ grid-column:4 / span 8; display:flex; flex-direction:column; gap:1.1em }
.about__lead{ font-size:var(--fs-lead); font-weight:500; line-height:1.16; letter-spacing:-.028em }
.about__lead + .about__lead{ color:var(--muted); font-weight:400 }
.about__loc{ margin-top:clamp(1.5rem,3vw,3rem) }

/* ── 11 · CAPABILITIES ───────────────────────────────────────── */
.caps{ position:relative; padding-top:var(--sec) }
.caps__list{ padding:0 var(--pad); border-top:1px solid var(--rule) }
.caps__item{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--gut) clamp(1.5rem,3vw,3.5rem); align-items:baseline;
  padding:clamp(1.3rem,2.4vw,2.2rem) 0; border-bottom:1px solid var(--rule);
}
.caps__n{ color:var(--muted) }
.caps__title{ font-size:clamp(1.6rem,4vw,3.6rem); font-weight:600; line-height:.95; letter-spacing:-.035em;
  transition:transform .8s var(--e) }
.caps__desc{ color:var(--muted); max-width:34ch; opacity:0; transform:translateY(.5em);
  transition:opacity .7s var(--e), transform .8s var(--e) }
.caps__item:hover .caps__title{ transform:translateX(.5rem) }
.caps__item:hover .caps__desc,.caps__item:focus-within .caps__desc{ opacity:1; transform:none }
@media (hover:none){ .caps__desc{ opacity:1; transform:none } }

/* ── 12 · PRINCIPLE ──────────────────────────────────────────── */
.principle{ position:relative; min-height:88svh; display:grid; align-items:center; padding:var(--sec) var(--pad) }
.principle__text{ font-size:clamp(2.2rem,6.6vw,6rem); font-weight:600; line-height:1.04; letter-spacing:-.04em; max-width:16ch }
.principle__text em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em }

/* ── 13 · CONTACT ────────────────────────────────────────────── */
.contact{ position:relative; background:var(--ink); color:var(--paper); padding:var(--sec) var(--pad) clamp(5rem,10vw,9rem) }
.contact__head{ font-size:var(--fs-display); font-weight:600; line-height:.98; letter-spacing:-.04em; max-width:13ch }
.contact__actions{ margin-top:clamp(3rem,7vw,6rem); display:flex; align-items:baseline; gap:clamp(2rem,6vw,6rem); flex-wrap:wrap }
.contact__cta{
  font-size:clamp(1.2rem,2.2vw,1.9rem); font-weight:500; letter-spacing:-.02em; display:inline-block;
  padding-bottom:.2em; border-bottom:1px solid var(--rule-inv); transition:border-color .5s var(--e);
}
.contact__cta .arrow{ margin-left:.35em }
.contact__cta:hover{ border-color:var(--paper) }
.contact__mail{ font-size:var(--fs-body); color:var(--muted-inv) }
.contact__note{ margin-top:clamp(2.5rem,5vw,4rem); color:var(--muted-inv) }

.form{ margin-top:clamp(3rem,6vw,5rem); max-width:44rem; display:flex; flex-direction:column }
.form__row{ display:grid; grid-template-columns:8rem 1fr; gap:var(--gut); align-items:center;
  padding:1rem 0; border-bottom:1px solid var(--rule-inv) }
.form__row .meta{ color:var(--muted-inv) }
.form input,.form textarea{ font:inherit; color:var(--paper); background:none; border:0; padding:0; width:100%; resize:none }
.form input:focus,.form textarea:focus{ outline:none }
.form__send{ margin-top:2rem; align-self:flex-start; font-size:var(--fs-meta); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; border-bottom:1px solid var(--rule-inv); padding-bottom:.35em }

/* ── 14 · FOOTER ─────────────────────────────────────────────── */
.foot{
  background:var(--ink); color:var(--muted-inv);
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding:clamp(1.5rem,2.5vw,2rem) var(--pad); border-top:1px solid var(--rule-inv);
}
.foot__mid{ margin-inline:auto }
.foot__social{ display:flex; gap:clamp(1rem,2vw,2rem) }
.foot__social .link:hover{ color:var(--paper) }

/* ── 15 · PROJECT TEMPLATE ───────────────────────────────────── */
.pj{ position:relative }
.pj__head{ min-height:58svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--pad) * 3) var(--pad) clamp(2rem,4vw,3.5rem) }
.pj__title{ font-size:var(--fs-display); font-weight:700; line-height:.94; letter-spacing:-.04em; text-transform:uppercase }
.pj__meta{ margin-top:clamp(1.5rem,3vw,2.5rem); padding-top:clamp(1rem,1.6vw,1.4rem);
  border-top:1px solid var(--rule); display:flex; gap:clamp(1.5rem,4vw,4rem); flex-wrap:wrap }
.pj__intro{ padding:clamp(4rem,9vw,9rem) var(--pad); display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut) }
.pj__intro .meta{ grid-column:1 / span 2 }
.pj__intro p:not(.meta){ grid-column:4 / span 7; font-size:var(--fs-lead); font-weight:400; line-height:1.2; letter-spacing:-.025em }
.pj__block{ padding:0 var(--pad); margin-bottom:clamp(3rem,7vw,8rem) }
.pj__block--bleed{ padding:0 }
.pj__two{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut); padding:0 var(--pad);
  margin-bottom:clamp(3rem,7vw,8rem) }
.pj__two .media:first-child{ grid-column:1 / span 6 }
.pj__two .media:last-child{ grid-column:8 / span 5; margin-top:clamp(3rem,8vw,8rem) }
.pj__three{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gut); padding:0 var(--pad);
  margin-bottom:clamp(3rem,7vw,8rem) }
.pj__next{
  border-top:1px solid var(--rule); margin:0 var(--pad);
  padding:clamp(3rem,7vw,7rem) 0 clamp(4rem,9vw,9rem);
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.pj__next-t{ font-size:clamp(1.8rem,5vw,4rem); font-weight:600; line-height:1; letter-spacing:-.035em;
  transition:transform .8s var(--e) }
.pj__next a:hover .pj__next-t{ transform:translateX(.6rem) }

/* ── 16 · RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1100px){
  .hero__fig img{ height:clamp(20rem,50vh,32rem) }
}

@media (max-width:900px){
  .nav__links,.nav__cta{ display:none }
  .nav__toggle{ display:block; margin-left:auto; font-size:var(--fs-meta); font-weight:500;
    letter-spacing:.09em; text-transform:uppercase }
  .nav__mark{ margin-right:0 }
  body.menu-open .nav{ color:var(--paper) }

  .hero{ grid-template-columns:1fr; align-items:start; padding-top:calc(var(--pad) + 4rem) }
  .hero__type{ align-self:start; padding-bottom:0 }
  .hero__fig{ justify-self:end; margin-right:0; margin-top:auto }
  .hero__fig img{ height:min(52vh,26rem) }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:.75rem }
  .hero__loc{ text-align:left }

  .sec-head{ flex-direction:column; align-items:flex-start; gap:.5rem }

  .strip{ grid-template-columns:1fr 1fr }
  .strip .media:nth-child(3){ display:none }

  .proj--split .proj__link,.proj--stack .proj__link{ grid-template-columns:repeat(6,1fr) }
  .proj--split .proj__sticky,.proj--flip .proj__sticky{ grid-column:1/-1; position:static; order:0; margin-bottom:1.25rem }
  .proj--split .proj__a,.proj--flip .proj__a{ grid-column:1 / span 5 }
  .proj--split .proj__b,.proj--flip .proj__b{ grid-column:3 / span 4; margin-top:2.5rem }
  .proj--stack .proj__a{ grid-column:1/-1 }
  .proj--stack .proj__b{ grid-column:3 / span 4; margin-top:-3rem }
  .proj--grid .proj__link{ grid-template-columns:1fr 1fr }
  .proj--grid .media:nth-of-type(3){ display:none }
  .proj__view{ opacity:1; transform:none }

  .sites__body{ grid-template-columns:1fr }
  .sites__shot,.sites__col{ grid-column:1/-1 }
  .sites__col{ margin-top:2.5rem }

  .arch__head,.arch__row a{ grid-template-columns:minmax(0,1fr) 4.5rem }
  .arch__head span:nth-child(2),.arch__disc{ display:none }

  .about{ grid-template-columns:1fr }
  .about .sec-head__idx,.about__body{ grid-column:1/-1 }

  .caps__item{ grid-template-columns:1fr; row-gap:.5rem }
  .caps__desc{ grid-column:1; opacity:1; transform:none }

  .pj__intro{ grid-template-columns:1fr }
  .pj__intro .meta,.pj__intro p{ grid-column:1/-1 }
  .pj__two{ grid-template-columns:repeat(6,1fr) }
  .pj__two .media:first-child{ grid-column:1/-1 }
  .pj__two .media:last-child{ grid-column:2 / span 5; margin-top:2.5rem }
  .pj__three{ grid-template-columns:1fr 1fr }

  .foot{ justify-content:flex-start }
  .foot__mid{ margin-inline:0; width:100%; order:3 }
  .foot__social{ margin-left:auto; flex-wrap:wrap }
}

@media (max-width:560px){
  .foot__social{ width:100%; margin-left:0; order:2 }
  .foot__mid{ order:3 }
  .pj__three{ grid-template-columns:1fr }
}

/* ── 17 · REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  [data-reveal],[data-words]{ opacity:1!important }
  .rv-i{ transform:none!important }
  .proj__view,.caps__desc{ opacity:1; transform:none }
  .scroll-cue__a{ animation:none }
  .media__frame img{ transform:none }
}

/* placeholder frames — used by the blank project template only */
.media__ph{ position:absolute; inset:0; background:var(--ph); box-shadow:inset 0 0 0 1px var(--rule) }
.media__ph::after{ content:attr(data-ratio); position:absolute; left:1.1rem; bottom:.95rem;
  font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); opacity:.5 }
.media__ph[data-kind="motion"]::before{ content:"Motion"; position:absolute; left:1.1rem; top:.95rem;
  font-size:var(--fs-meta); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); opacity:.5 }

/* ── STATS ───────────────────────────────────────────────────── */
.stats{ padding:var(--sec) var(--pad) 0 }
.stats__list{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gut) 0; border-top:1px solid var(--rule) }
.stats__list li{ padding:clamp(1.2rem,2vw,2rem) var(--gut) 0 0; display:flex; flex-direction:column; gap:.55rem }
.stats__n{ font-size:clamp(2.6rem,7vw,6.5rem); font-weight:700; line-height:.88; letter-spacing:-.05em;
  font-variant-numeric:tabular-nums }

/* ── FILTERS ─────────────────────────────────────────────────── */
.filters{ display:flex; flex-wrap:wrap; gap:clamp(1rem,2vw,2.25rem);
  padding:0 var(--pad); margin-bottom:clamp(1.75rem,3vw,2.75rem) }
.filters__b{
  font-size:var(--fs-meta); font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); padding-bottom:.35em; border-bottom:1px solid transparent;
  transition:color .4s var(--e), border-color .4s var(--e);
}
.filters__b:hover{ color:var(--ink) }
.filters__b.is-on{ color:var(--ink); border-bottom-color:var(--ink) }
.arch__row[hidden]{ display:none }

.about__lead--sub{ font-size:clamp(1.1rem,1.7vw,1.5rem); font-weight:400; line-height:1.35;
  letter-spacing:-.012em; color:var(--muted); max-width:56ch }

@media (max-width:900px){
  .hero{ justify-content:flex-start }
  .hero__stage{ min-height:0; display:block }
  .hero__l{ width:auto }
  .hero__l--front{ margin-left:0 }
  .hero__fig{ position:static; margin:2.5rem 0 0 auto; width:max-content }
  .hero__fig img{ height:min(46vh,22rem) }
  .hero__sub{ margin-top:1.25rem }
  .stats__list{ grid-template-columns:1fr 1fr }
  .stats__list li{ padding-bottom:1.25rem }
}

/* tighter rhythm where two padded sections meet */
.marq + .work{ padding-top:clamp(3.5rem,7vw,7rem) }
.stats + .archive{ padding-top:clamp(3rem,6vw,6rem) }
.stats{ padding-bottom:clamp(1rem,2vw,2rem) }
.hero__foot{ margin-top:clamp(2rem,6vh,5rem) }

/* ═══════════════════════════════════════════════════════════════
   18 · ARTWORK MEDIA — never cropped
   The frame takes the asset's own ratio (--ar, set inline), so the
   image fills it exactly: no cover-crop, no letterbox.
   ═══════════════════════════════════════════════════════════════ */
.media--art .media__frame{
  aspect-ratio:var(--ar,3/2); background:transparent; overflow:visible;
}
.media--art .media__frame img{
  width:100%; height:100%; object-fit:contain; transform:none;
}

.media--art figcaption{ margin-top:.85rem }

/* a soft lift on artwork so flat print work reads as an object */
.media--art .media__frame{ filter:drop-shadow(0 24px 40px rgba(13,13,13,.10)) }
.pj .media--art .media__frame img{ transition:transform 1s var(--e) }
.pj a:hover .media--art .media__frame img{ transform:translateY(-.4rem) }

/* rows of artwork, aligned on their centres, never stretched */
.pj__row{
  display:grid; gap:var(--gut) clamp(1.5rem,3vw,3.5rem);
  padding:0 var(--pad); margin-bottom:clamp(3rem,7vw,8rem);
  align-items:center;
}
.pj__row--1{ grid-template-columns:minmax(0,1fr) }
.pj__row--2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.pj__row--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.pj__row--1.pj__row--tall{ max-width:min(62rem,100%); margin-inline:auto; padding-inline:var(--pad) }
.pj__row--wide{ padding:0 clamp(.75rem,2vw,2.5rem) }
.pj__cap{ grid-column:1/-1; margin-top:-.6rem }

/* ═══════════════════════════════════════════════════════════════
   19 · DECK — multi-page PDF spread, pages fanned and overlapping
   ═══════════════════════════════════════════════════════════════ */
.deck{ padding:clamp(2rem,5vw,5rem) var(--pad) 0; margin-bottom:clamp(3rem,7vw,8rem) }
.deck__label{ margin-bottom:clamp(1.5rem,3vw,2.5rem) }
.deck__fan{ display:flex; justify-content:center; align-items:center }
.deck__pg{
  flex:0 0 auto; position:relative; margin:0;
  /* sized from the page's own ratio so a fan of A4 landscape and a fan of
     tall menus both come out at a comparable visual height */
  --cw:min(var(--w,26vw), calc(var(--maxh,28rem) * var(--par,1.41)));
  width:var(--cw);
  transform:rotate(var(--r,0deg)) translateY(var(--y,0)) scale(var(--s,1));
  z-index:var(--z,1);
  transition:transform .8s var(--e), opacity .5s var(--e), filter .6s var(--e);
}
.deck__pg + .deck__pg{ margin-left:calc(var(--cw) * -0.55) }
.deck__pg img{
  width:100%; height:auto; background:#fff;
  box-shadow:0 2px 3px rgba(13,13,13,.06), 0 26px 46px -22px rgba(13,13,13,.42);
}
.deck__fan:hover .deck__pg{ opacity:.5; filter:saturate(.7) }
.deck__pg:hover{
  opacity:1!important; filter:none!important; z-index:20;
  transform:rotate(0deg) translateY(calc(var(--y,0px) - 1.1rem)) scale(calc(var(--s,1) * 1.06));
}
/* second, tighter row for long decks */
.deck__fan + .deck__fan{ margin-top:clamp(1.5rem,4vw,3.5rem) }

@media (max-width:900px){
  .deck__fan{
    display:flex; overflow-x:auto; justify-content:flex-start;
    gap:.75rem; padding-bottom:1rem; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .deck__pg{ width:min(62vw,17rem); transform:none; scroll-snap-align:center }
  .deck__pg + .deck__pg{ margin-left:0 }
  .deck{ padding-inline:0 }
  .deck__label{ padding-inline:var(--pad) }
  .deck__fan{ padding-inline:var(--pad) }
  .deck__fan:hover .deck__pg{ opacity:1; filter:none }
}

/* ═══════════════════════════════════════════════════════════════
   20 · SPOTLIGHT — Velora carousel
   ═══════════════════════════════════════════════════════════════ */
.spot{ position:relative; padding:var(--sec) 0 0; overflow:hidden }
.spot__head{ padding:0 var(--pad); margin-bottom:clamp(2.5rem,5vw,4.5rem) }
.spot__kicker{ display:flex; align-items:center; gap:.9em; margin-bottom:clamp(1rem,2vw,1.6rem) }
.spot__kicker .dot{
  width:7px; height:7px; border-radius:50%; background:var(--ink); flex:none;
  animation:pulse 2.8s var(--e) infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.55); opacity:.35 } }
.spot__title{
  font-size:clamp(2.2rem,7vw,6rem); font-weight:700; line-height:.9;
  letter-spacing:-.045em; text-transform:uppercase; max-width:14ch;
}
.spot__title em{ font-family:var(--serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:-.015em }
.spot__sub{ margin-top:clamp(1rem,2vw,1.5rem); max-width:52ch; color:var(--muted) }

.spot__stage{
  position:relative; height:clamp(20rem,52vh,34rem);
  perspective:1600px; perspective-origin:50% 50%;
  touch-action:pan-y; cursor:grab; user-select:none;
}
.spot__stage:active{ cursor:grabbing }
.spot__track{ position:absolute; inset:0; transform-style:preserve-3d }
.spot__card{
  position:absolute; left:50%; top:50%; width:clamp(15rem,42vw,34rem);
  will-change:transform,opacity; transform-style:preserve-3d;
}
.spot__card figure{ position:relative; overflow:hidden; background:var(--ph);
  box-shadow:0 40px 70px -40px rgba(13,13,13,.55) }
.spot__card img{ width:100%; height:auto; display:block; pointer-events:none }
.spot__card[aria-hidden="true"]{ pointer-events:none }

.spot__arrows{ position:absolute; inset:0; pointer-events:none; z-index:30 }
.spot__b{
  pointer-events:auto; position:absolute; top:50%; margin-top:-1.75rem;
  width:3.5rem; height:3.5rem; border:1px solid var(--rule); border-radius:50%;
  display:grid; place-items:center; background:rgba(242,240,235,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .45s var(--e), border-color .45s var(--e), transform .55s var(--e);
}
.spot__b:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.spot__b--prev{ left:clamp(.75rem,3vw,3rem) } .spot__b--prev:hover{ transform:translateX(-3px) }
.spot__b--next{ right:clamp(.75rem,3vw,3rem) } .spot__b--next:hover{ transform:translateX(3px) }

.spot__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding:clamp(1.75rem,3.5vw,3rem) var(--pad) 0;
}
.spot__dots{ display:flex; gap:.55rem; align-items:center }
.spot__dot{
  width:6px; height:6px; border-radius:50%; background:var(--ink); opacity:.22;
  transition:opacity .45s var(--e), transform .5s var(--e);
}
.spot__dot.is-on{ opacity:1; transform:scale(1.55) }
.spot__cap{ color:var(--muted); flex:1 1 14rem }
.spot__cta{ font-size:var(--fs-meta); font-weight:500; letter-spacing:.09em; text-transform:uppercase }

@media (max-width:900px){
  .spot__stage{ height:clamp(16rem,44vh,24rem) }
  .spot__card{ width:min(74vw,22rem) }
  .spot__foot{ flex-direction:column; align-items:flex-start }
}

/* ═══════════════════════════════════════════════════════════════
   21 · SKETCHES — pencil marks, drawn in on scroll
   ═══════════════════════════════════════════════════════════════ */
.sk{
  display:block; color:var(--ink); opacity:.34; pointer-events:none;
  overflow:visible;
  /* wiped in with a mask, not a clip — a clip-path would zero the box
     and the IntersectionObserver would never see the element. */
  -webkit-mask-image:linear-gradient(90deg,#000 0 45%,rgba(0,0,0,0) 63%);
          mask-image:linear-gradient(90deg,#000 0 45%,rgba(0,0,0,0) 63%);
  -webkit-mask-size:260% 100%;  mask-size:260% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;  mask-position:100% 0;
  transition:-webkit-mask-position 1.35s cubic-bezier(.5,0,.2,1),
                     mask-position 1.35s cubic-bezier(.5,0,.2,1);
}
.sk.is-in{ -webkit-mask-position:0 0; mask-position:0 0 }
.sk--soft{ opacity:.22 }
.sk--float{ position:absolute; z-index:1 }
@media (prefers-reduced-motion:reduce){ .sk{ -webkit-mask-image:none; mask-image:none; transition:none } }

/* placements */
.sk-a{ top:-2.5rem; right:8vw; width:clamp(4rem,7vw,7.5rem) }
.sk-b{ bottom:-1rem; left:4vw; width:clamp(5rem,9vw,10rem) }
.sk-c{ top:12%; left:-2.5rem; width:clamp(3.5rem,6vw,6rem) }

.principle{ position:relative; overflow:hidden }
.principle__wrap{ position:relative; display:inline-block }
.principle .sk-ring{
  position:absolute; left:-4%; top:-14%; width:112%; height:128%;
  opacity:.3; z-index:-1;
}
.principle .sk-arrow{
  position:absolute; width:clamp(5rem,10vw,11rem);
  right:clamp(1rem,8vw,12rem); bottom:clamp(-2rem,-4vw,-1rem);
  transform:rotate(-8deg);
}
.principle .sk-spark{ position:absolute; width:clamp(2rem,3.4vw,3.4rem); top:-2.5rem; left:-.5rem }
.principle .sk-eye{ position:absolute; width:clamp(3.5rem,6vw,6.5rem);
  right:6vw; top:14%; opacity:.2 }

/* ═══════════════════════════════════════════════════════════════
   22 · STATEMENT — SELECTED WORK. BUILT TO BE REMEMBERED.
   ═══════════════════════════════════════════════════════════════ */
.statement{ position:relative; padding:var(--sec) var(--pad) clamp(2.5rem,5vw,4.5rem) }
.statement__t{
  font-size:clamp(1.9rem,6.4vw,5.6rem); font-weight:700; line-height:.94;
  letter-spacing:-.045em; text-transform:uppercase; max-width:17ch;
}
.statement__t .sec{ display:block; color:var(--muted) }
.statement__note{ margin-top:clamp(1.25rem,2.5vw,2rem); max-width:46ch; color:var(--muted) }
.statement__rule{ width:clamp(9rem,22vw,24rem); margin-top:clamp(1rem,2vw,1.6rem) }

/* ═══════════════════════════════════════════════════════════════
   23 · ABOUT — wider, with a figure
   ═══════════════════════════════════════════════════════════════ */
.about{ overflow:hidden }
.about__body{ position:relative }
.about__lead--sub + .about__lead--sub{ margin-top:-.2em }
.about__cols{
  grid-column:4 / span 8; display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--gut) clamp(2rem,4vw,4.5rem); margin-top:clamp(2rem,4vw,3.5rem);
  padding-top:clamp(1.25rem,2.5vw,2rem); border-top:1px solid var(--rule);
}
.about__col h3{ font-size:var(--fs-meta); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:.6rem }
.about__col p{ color:var(--muted); font-size:clamp(.95rem,1.1vw,1.05rem); line-height:1.5 }
@media (max-width:900px){ .about__cols{ grid-column:1/-1; grid-template-columns:1fr } }

/* ═══════════════════════════════════════════════════════════════
   24 · WEBSITES — figure alongside
   ═══════════════════════════════════════════════════════════════ */
.sites{ overflow:hidden }
.sites__body{ position:relative }
.sites__col{ grid-column:7 / span 6; display:flex; flex-direction:column; min-height:100% }
.sites__fig{
  margin:clamp(2.5rem,5vw,4rem) 0 0; align-self:flex-end;
  width:min(100%,30rem); pointer-events:none;
}
.sites__fig img{ width:100%; height:auto; filter:drop-shadow(-18px 16px 34px rgba(13,13,13,.14)) }
@media (max-width:900px){ .sites__fig{ align-self:center; max-width:26rem } }

/* ═══════════════════════════════════════════════════════════════
   25 · MARQUEE — brands, a touch calmer
   ═══════════════════════════════════════════════════════════════ */
.marq{ border-top:0 }
.marq__label{ display:flex; align-items:center; gap:1em }
.marq__label .rule{ flex:1; height:1px; background:var(--rule); display:block }

/* ── tightened section rhythm for the new order ─────────────── */
.marq + .about{ padding-top:clamp(4rem,9vw,9rem) }
.about + .spot{ padding-top:clamp(4.5rem,10vw,10rem) }
.spot + .statement{ padding-top:clamp(4.5rem,10vw,10rem) }
.statement + .archive{ padding-top:0 }
.archive + .sites{ padding-top:var(--sec) }

/* fallback: no GSAP or reduced motion → an honest scroll row */
.spot--flat{ height:auto; perspective:none; cursor:auto; overflow-x:auto;
  scroll-snap-type:x mandatory; padding:0 var(--pad) 1rem }
.spot--flat .spot__track{ position:static; display:flex; gap:var(--gut) }
.spot--flat .spot__card{ position:static; flex:0 0 auto; width:min(78vw,30rem);
  transform:none!important; opacity:1!important; scroll-snap-align:center }
.spot--flat .spot__arrows{ display:none }

.arch__foot{ margin-top:clamp(1.25rem,2.5vw,2rem) }
.js .sk{ }

/* ═══════════════════════════════════════════════════════════════
   26 · PROJECT PAGE — bleeds, notes, marks
   ═══════════════════════════════════════════════════════════════ */
.media--bleed{ width:100%; margin:0 }
.media--bleed img{ width:100%; height:auto; display:block }

.pj__note{
  padding:clamp(3rem,7vw,7rem) var(--pad) clamp(2rem,4vw,4rem);
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut);
}
.pj__note-h{
  grid-column:1 / span 3; font-size:clamp(1.05rem,1.5vw,1.35rem);
  font-weight:600; letter-spacing:-.02em; line-height:1.2;
}
.pj__note p{ grid-column:5 / span 6; color:var(--muted); max-width:56ch;
  font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.55 }
@media (max-width:900px){
  .pj__note{ grid-template-columns:1fr; gap:.75rem }
  .pj__note-h,.pj__note p{ grid-column:1/-1 }
}

.pj__mark{ width:clamp(6rem,14vw,14rem); margin-top:clamp(1.25rem,2.5vw,2rem) }
.pj__head{ position:relative }

/* the intro rule sits closer now that the head carries a sketch */
.pj__intro{ padding-top:clamp(3rem,7vw,7rem) }

/* ── post-review corrections ─────────────────────────────────── */
.about__loc{ grid-column:1/-1; padding-top:clamp(1.5rem,3vw,2.5rem) }
.spot__head{ margin-bottom:clamp(1.75rem,3.5vw,3rem) }
.spot__sub{ font-size:clamp(.98rem,1.15vw,1.1rem) }
.spot{ padding-bottom:clamp(1rem,2vw,2rem) }

/* ── round two ───────────────────────────────────────────────── */
.spot__stage{ height:clamp(15rem,31vw,25rem) }
.spot__card figure{ box-shadow:0 34px 60px -34px rgba(13,13,13,.45) }

/* the ring circles one word, so it has to live inside it */
.principle__text .mark{ position:relative; display:inline-block; font-family:var(--serif);
  font-style:italic; font-weight:400; letter-spacing:-.01em }
.principle .sk-ring{
  position:absolute; left:-8%; top:-20%; width:116%; height:156%;
  opacity:.34; z-index:2;
}
.principle .sk-arrow{
  position:absolute; width:clamp(5rem,9vw,10rem);
  left:min(58%,42rem); top:auto; bottom:auto; margin-top:2.5rem;
  transform:rotate(196deg) scaleY(-1);
}
.principle .sk-spark{ position:absolute; width:clamp(1.8rem,2.8vw,2.8rem);
  top:-2.2rem; left:-.4rem }
.principle .sk-eye{ position:absolute; width:clamp(3.5rem,6vw,6.5rem);
  right:8vw; bottom:12%; top:auto; opacity:.2 }
.principle__wrap{ position:relative; display:inline-block; max-width:100% }

/* a few more marks, spread thin across the page */
.caps{ position:relative }
.caps .sk-mark{ position:absolute; right:var(--pad); top:calc(var(--sec) * .42);
  width:clamp(2.2rem,3.2vw,3.4rem); opacity:.2 }
.statement{ overflow:hidden }
.statement .sk-mark{ position:absolute; right:8vw; top:38%;
  width:clamp(4rem,7vw,7.5rem); opacity:.18; transform:rotate(12deg) }
.marq{ position:relative }
.contact .sk-mark{ position:absolute; right:var(--pad); top:clamp(4rem,9vw,9rem);
  width:clamp(4.5rem,8vw,8.5rem); color:var(--paper); opacity:.28 }
.contact{ overflow:hidden }

/* ── round three ─────────────────────────────────────────────── */
.stats{ position:relative }
.hero__sub .sk{ width:clamp(1.5rem,2.2vw,2.2rem); flex:none; opacity:.3 }

/* logos and other transparent marks: no card, no shadow */
.media--plain .media__frame{ filter:none }
.pj__row--logo{ max-width:min(30rem,100%); margin-inline:auto }
/* a white mark needs a dark ground to exist at all */
.media--ink .media__frame{ background:var(--ink); filter:none;
  padding:clamp(2rem,5vw,4.5rem); aspect-ratio:auto }
.media--ink .media__frame img{ height:auto }
.pj__row--ink{ max-width:min(46rem,100%); margin-inline:auto }

/* ── mobile corrections (last word) ──────────────────────────── */
@media (max-width:900px){
  .sites__col{ grid-column:1/-1; margin-top:2.5rem }
  .sites__fig{ align-self:center; max-width:24rem }
  .spot__cap{ flex:none }
  .spot__foot{ gap:1rem }
  .pj__row--2,.pj__row--3{ grid-template-columns:1fr }
  .pj__row--tall,.pj__row--logo,.pj__row--ink{ max-width:100% }
  .statement .sk-mark{ display:none }
}
@media (max-width:560px){
  .marq__row img{ height:3.6rem }
}

/* ═══════════════════════════════════════════════════════════════
   27 · SET — one campaign, one block
   A justified row: every item is sized from its own ratio against a
   shared height, so an IG post, a 9:16 story and a wide FB cover sit
   together and read as one piece of work. Nothing is cropped.
   ═══════════════════════════════════════════════════════════════ */
.set{ padding:0 var(--pad); margin-bottom:clamp(3rem,7vw,7.5rem) }
.set__label{
  display:flex; align-items:baseline; gap:1.5em;
  padding-bottom:clamp(.7rem,1.2vw,1rem); margin-bottom:clamp(1rem,2vw,1.7rem);
  border-bottom:1px solid var(--rule);
}
.set__name{ color:var(--ink); font-weight:600; letter-spacing:.08em }
.set__kind{ margin-left:auto; opacity:.62; text-align:right; flex:none }
/* the row justifies to the container, but never grows past --h tall:
   width = min(container, sum-of-ratios x --h)  =>  height <= --h */
.set__row{
  display:flex; gap:var(--gut); align-items:flex-start;
  max-width:calc(var(--sum,3) * var(--h,20rem));
}
.set__row + .set__row{ margin-top:var(--gut) }
.set__it{ flex:var(--ar,1) 1 0; min-width:0; margin:0; transition:transform .7s var(--e) }
.set__it img{
  width:100%; height:auto; display:block; background:var(--ph);
  box-shadow:0 18px 34px -24px rgba(13,13,13,.34);
}
.set:hover .set__it{ opacity:.82 }
.set__it:hover{ opacity:1; transform:translateY(-.4rem) }
@media (max-width:900px){
  .set__row{ max-width:calc(var(--sum,3) * var(--hm,11rem)) }
}

/* ═══════════════════════════════════════════════════════════════
   28 · SLIDER — a long series of one kind, swiped through
   Native scroll-snap, so it works with no JS at all; the buttons and
   dots are progressive enhancement.
   ═══════════════════════════════════════════════════════════════ */
.slider{ margin-bottom:clamp(3rem,7vw,7.5rem) }
.slider__label{
  display:flex; align-items:baseline; gap:1.5em; margin:0 var(--pad);
  padding-bottom:clamp(.7rem,1.2vw,1rem); margin-bottom:clamp(1rem,2vw,1.7rem);
  border-bottom:1px solid var(--rule);
}
.slider__vp{
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none;
  padding:.4rem var(--pad) 1rem;
  /* without this, mandatory snapping parks the first item over the padding */
  scroll-padding-inline:var(--pad);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 96%,transparent);
          mask-image:linear-gradient(90deg,#000 0,#000 96%,transparent);
}
.slider__vp::-webkit-scrollbar{ display:none }
.slider__track{ display:flex; gap:var(--gut); width:max-content }
.slider__it{
  flex:0 0 auto; width:calc(var(--ar,1) * var(--h,20rem));
  scroll-snap-align:start; margin:0;
}
.slider__it img{
  width:100%; height:auto; display:block; background:var(--ph);
  box-shadow:0 18px 34px -24px rgba(13,13,13,.34);
}
.slider__foot{
  display:flex; align-items:center; gap:1.5rem;
  margin:0 var(--pad); padding-top:clamp(.8rem,1.5vw,1.2rem);
}
.slider__dots{ display:flex; gap:.45rem; align-items:center; flex-wrap:wrap }
.slider__dot{ width:5px; height:5px; border-radius:50%; background:var(--ink); opacity:.2;
  transition:opacity .4s var(--e), transform .45s var(--e) }
.slider__dot.is-on{ opacity:1; transform:scale(1.6) }
.slider__nav{ margin-left:auto; display:flex; gap:.6rem }
.slider__b{
  width:2.9rem; height:2.9rem; border:1px solid var(--rule); border-radius:50%;
  display:grid; place-items:center; color:var(--ink);
  transition:background .45s var(--e), color .45s var(--e), border-color .45s var(--e), opacity .3s;
}
.slider__b:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.slider__b[disabled]{ opacity:.25; pointer-events:none }
@media (max-width:900px){
  .slider__it{ width:calc(var(--ar,1) * var(--hm,13rem)) }
  .slider__nav{ display:none }
}

/* ═══════════════════════════════════════════════════════════════
   29 · TIMELINE — design → build → launch
   ═══════════════════════════════════════════════════════════════ */
.tl{ margin:clamp(2rem,4vw,4rem) 0 clamp(3rem,7vw,7rem) }
.phase{ position:relative; padding-left:clamp(1.6rem,4vw,5rem); margin-left:var(--pad) }
.phase::before{
  content:""; position:absolute; left:0; top:.85em; bottom:-1px; width:1px; background:var(--rule);
}
.phase:last-child::before{ bottom:auto; height:2.5rem }
.phase::after{
  content:""; position:absolute; left:-3px; top:.7em; width:7px; height:7px;
  border-radius:50%; background:var(--ink);
}
.phase__head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:var(--gut) clamp(1.5rem,3vw,3.5rem); align-items:baseline;
  padding-right:var(--pad); padding-bottom:clamp(1.5rem,3vw,2.5rem);
}
.phase__t{
  font-size:clamp(1.5rem,3.4vw,2.8rem); font-weight:600; line-height:1;
  letter-spacing:-.035em; text-transform:uppercase;
}
.phase__d{ color:var(--muted); max-width:52ch; line-height:1.55 }
.phase__body{ margin-left:calc(-1 * (var(--pad) + clamp(1.6rem,4vw,5rem))) }
.phase__body .set,.phase__body .slider,.phase__body .pj__row{ margin-bottom:clamp(2rem,4vw,4rem) }
.phase:last-child .phase__body > *:last-child{ margin-bottom:0 }
@media (max-width:900px){
  .phase__head{ grid-template-columns:1fr; gap:.6rem }
}

/* ═══════════════════════════════════════════════════════════════
   30 · ROUND FOUR — web section, contact details, Velora list
   ═══════════════════════════════════════════════════════════════ */
.sites__shot--fig{ align-self:end }
.sites__shot--fig img{
  width:100%; height:auto;
  filter:drop-shadow(-20px 18px 38px rgba(13,13,13,.16));
}
.sites__body{ align-items:end }
.sites__col{ align-self:start }

/* the Velora page lists all four channels the same way */
.sites__body--plain{ display:block; padding:0 var(--pad) }
.sites__list--flat{ max-width:64rem }

.contact__lines{
  margin-top:clamp(2.5rem,5vw,4rem); display:grid; gap:0;
  max-width:44rem; border-top:1px solid var(--rule-inv);
}
.contact__lines li{
  display:grid; grid-template-columns:7rem minmax(0,1fr); gap:var(--gut);
  align-items:baseline; padding:clamp(.9rem,1.6vw,1.3rem) 0;
  border-bottom:1px solid var(--rule-inv);
  font-size:clamp(1.05rem,1.6vw,1.35rem); letter-spacing:-.015em;
}
.contact__lines .meta{ color:var(--muted-inv) }
.contact__actions{ margin-bottom:0 }
@media (max-width:560px){
  .contact__lines li{ grid-template-columns:1fr; gap:.2rem }
}
.sites__list--flat .sites__desc{ max-width:70ch }

/* ═══════════════════════════════════════════════════════════════
   31 · BUTTON — the one thing on the page that is a block
   Hard edges, no radius. Solid by default, hollow on hover.
   ═══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-block; position:relative;
  background:var(--ink); color:var(--paper);
  padding:.95em 1.45em; font-size:var(--fs-meta); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; line-height:1;
  box-shadow:inset 0 0 0 1px var(--ink);
  transition:background .45s var(--e), color .45s var(--e), box-shadow .45s var(--e);
}
.btn::after{ display:none }              /* no .link underline under a block */
.btn:hover,.btn:focus-visible{ background:transparent; color:var(--ink) }
.btn--inv{ background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 1px var(--paper) }
.btn--inv:hover,.btn--inv:focus-visible{ background:transparent; color:var(--paper) }
.btn--lg{
  font-size:clamp(.9rem,1.25vw,1.05rem); padding:1.15em 1.7em; letter-spacing:.06em;
}
.btn .arrow{ margin-left:.6em }

.nav__cta.btn{ margin-left:clamp(1.25rem,2.5vw,2.5rem) }
.nav__cta.btn:hover{ transform:none }
body.nav-dark .nav__cta.btn,body.nav-scrim .nav__cta.btn{
  background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 1px var(--paper);
}
body.nav-dark .nav__cta.btn:hover,body.nav-scrim .nav__cta.btn:hover{
  background:transparent; color:var(--paper);
}
.menu__cta.btn{ padding:1em 1.5em }
.contact__cta.btn{ border-bottom:0; padding-bottom:1.15em }
.contact__cta.btn:hover{ border-color:transparent }

/* ═══════════════════════════════════════════════════════════════
   32 · ABOUT — now on ink
   ═══════════════════════════════════════════════════════════════ */
.about{
  background:var(--ink); color:var(--paper);
  padding:var(--sec) var(--pad) clamp(4rem,8vw,8rem);
}
.about .meta,.about .sec-head__idx{ color:var(--muted-inv) }
.about__lead--sub{ color:var(--muted-inv) }
.about__cols{ border-top-color:var(--rule-inv) }
.about__col h3{ color:var(--paper) }
.about__col p{ color:var(--muted-inv) }
.about .sk{ color:var(--paper); opacity:.3 }
.about__punch{
  margin-top:clamp(1.6rem,3vw,2.6rem);
  font-size:var(--fs-lead); font-weight:600; line-height:1.1; letter-spacing:-.03em;
}
.about__punch em{ font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-.01em; color:var(--muted-inv) }
.about__loc{ border-top:1px solid var(--rule-inv); margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:clamp(1rem,2vw,1.6rem) }

/* ═══════════════════════════════════════════════════════════════
   33 · LOADER — the TK mark drawn on its own guides
   Shown once per session; the inline head script decides.
   ═══════════════════════════════════════════════════════════════ */
.loader{
  position:fixed; inset:0; z-index:500; display:none; place-items:center;
  background:var(--ink); color:var(--paper); will-change:clip-path;
}
html.is-loading .loader{ display:grid }
html.is-loading body{ overflow:hidden }
.loader__in{
  display:grid; justify-items:center; gap:clamp(1.4rem,3vw,2.4rem);
  width:min(78vw,30rem);
}
.loader__mark{ width:min(56vw,21rem); height:auto; overflow:visible }
.loader__guides{ opacity:0 }
.loader__cap{ color:var(--muted-inv); opacity:0; letter-spacing:.22em }
.loader__bar{ width:100%; height:1px; background:rgba(242,240,235,.16); overflow:hidden }
.loader__bar span{ display:block; height:100%; background:var(--paper);
  transform:scaleX(0); transform-origin:0 50% }
@media (prefers-reduced-motion:reduce){
  .loader__guides{ opacity:.35 }
  .loader__cap{ opacity:1 }
}

/* ═══════════════════════════════════════════════════════════════
   34 · ARCHIVE PREVIEW — the frame takes the artwork's own ratio
   ═══════════════════════════════════════════════════════════════ */
.preview{ width:auto }
.preview__frame{
  width:min(calc(var(--par,1.33) * clamp(8rem,21vh,17rem)), 34vw);
  aspect-ratio:var(--par,1.33);
  background:var(--ph); overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(13,13,13,.5);
}
.preview__frame img{ width:100%; height:100%; object-fit:contain }

/* ═══════════════════════════════════════════════════════════════
   35 · 404
   ═══════════════════════════════════════════════════════════════ */
.nf{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--pad) + 5rem) var(--pad) var(--pad); position:relative; overflow:hidden;
}
.nf__code{
  font-size:clamp(6rem,26vw,22rem); font-weight:700; line-height:.8;
  letter-spacing:-.06em; margin-bottom:clamp(1.5rem,3vw,3rem);
}
.nf__code em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em }
.nf__t{ font-size:var(--fs-sec); font-weight:600; line-height:1; letter-spacing:-.04em; max-width:16ch }
.nf__d{ margin-top:clamp(1.2rem,2.4vw,2rem); color:var(--muted); max-width:52ch;
  font-size:clamp(1rem,1.3vw,1.2rem); line-height:1.55 }
.nf__acts{ margin-top:clamp(2.5rem,5vw,4rem); display:flex; align-items:center;
  gap:clamp(1.25rem,3vw,2.5rem); flex-wrap:wrap }
.nf__sk{ position:absolute; right:6vw; top:22%; width:clamp(6rem,14vw,15rem); opacity:.22 }
.nf__foot{ margin-top:auto; padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap }

/* the preview is the point — shrink the cursor so it stops covering it */
@media (hover:hover) and (pointer:fine){
  body.preview-on.cursor-view .cursor{
    width:8px; height:8px; mix-blend-mode:difference; background:var(--ink);
  }
  body.preview-on .cursor__label{ opacity:0; transform:scale(.9) }
}
.nf__acts{ margin-bottom:clamp(2rem,5vw,5rem) }