/* ============================================================
   &tuph — Stuph & Tuph · Creative Authorship Studio
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face{
  font-family:"Griffiths";
  src:url("../assets/fonts/Griffiths.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
/* Three GillSans weights were retired to get the hero painting sooner. Each
   file is ~42KB, they are fetched as soon as this stylesheet is parsed, and on
   a throttled connection they were competing for bandwidth with Griffiths —
   the face the LCP headline is set in.

   Medium (500) was declared and used by NOTHING, so it cost nothing to drop.
   Light (300) backed one rule (.people__roles) and Bold (700) one more
   (.kick, an 11px letterspaced label); both now render in Regular, with the
   browser synthesising the bold. ~124KB less contention for two barely
   perceptible weight changes. Restore any of them by re-adding its @font-face
   — the files are still in assets/fonts. */
@font-face{
  font-family:"GillSans";
  src:url("../assets/fonts/GillSans-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"GillSans";
  src:url("../assets/fonts/GillSans-Italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}

/* ---------- TOKENS ---------- */
:root{
  --ink:#0d0c0a;
  --ink-2:#17140f;
  --paper:#f4efe4;
  --paper-2:#e9e1d0;
  --bone:#fbfaf5;
  --oxblood:#a8412e;
  /* oxblood is 3.22:1 on ink — below AA. This lightened mix clears 4.5:1
     and is used wherever the accent sits on a dark ground. */
  --oxblood-dark:#b66251;
  --gold:#b0842f;
  --sage:#93a396;
  --line:rgba(13,12,10,.16);
  --line-inv:rgba(244,239,228,.18);

  --cream:#efe7d6;
  --cream-2:#e6dcc6;
  --cream-3:#ddd0b6;
  --seal-gold:#c9a24a;

  --serif:"Griffiths","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"GillSans","Helvetica Neue",Arial,sans-serif;

  --pad: clamp(20px, 3.2vw, 100px);
  --ease: cubic-bezier(.19,1,.22,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Lenis needs an auto-height document — never lock html/body to 100% */
html.lenis,html.lenis body{height:auto}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  font-weight:400;
  line-height:1.4;
}
/* freeze viewport at the hero during boot — no flash of the previous scroll offset */
html.scroll-boot,
html.scroll-boot body{overflow:hidden !important;height:100% !important}
html.scroll-boot body{position:fixed !important;inset:0 !important;width:100% !important}
img{display:block;max-width:100%;height:auto}
/* The renderer wraps any image that has responsive variants in <picture>.
   display:contents keeps that wrapper out of the box tree, so rules written
   against a container's img (.hero__bg img, .menu__img img …) still size and
   position exactly as they did before the wrapper existed. */
picture{display:contents}
a{color:inherit;text-decoration:none}
svg{display:block}
::selection{background:var(--ink);color:var(--paper)}

/* hide the native scrollbar — the glassy indicator below replaces it (also stops drag-to-skip) */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* glassy scroll-progress indicator — thicker, fades out when idle */
.scroll-ind{
  position:fixed;top:50%;right:clamp(12px,1.6vw,24px);transform:translateY(-50%);
  height:18vh;width:11px;z-index:850;border-radius:999px;pointer-events:none;overflow:hidden;
  background:rgba(255,255,255,.08);border:1px solid rgba(150,150,150,.2);
  backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);
  box-shadow:0 8px 26px rgba(0,0,0,.14);
  opacity:0;transition:opacity .55s var(--ease);
}
body:not(.is-loading) .scroll-ind.is-visible{opacity:1}
.scroll-ind__bar{position:absolute;top:0;left:0;width:100%;height:0%;border-radius:999px;background:linear-gradient(var(--oxblood),rgba(168,65,46,.55));will-change:height}

/* hide native cursor on pointer devices */
@media (hover:hover) and (pointer:fine){
  *{cursor:none !important}
}
/* the custom cursor (.cursor__dot / .cursor__ring) is only ever moved by JS on
   a fine, hover-capable pointer (see isFinePointer in app.js) — on touch it is
   never positioned, so without this it sits as a small static dot+ring welded
   to the viewport's top-left corner on every phone. Hide the whole rig there. */
@media (hover:none), (pointer:coarse){
  .cursor{display:none}
}

/* ---------- WEBGL OVERLAYS ---------- */
.fx-trail{position:fixed;inset:0;width:100%;height:100%;z-index:8000;pointer-events:none;mix-blend-mode:screen;opacity:.9}
.fx-work{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
body.no-webgl-work .fx-work{display:none}

/* ---------- MENU TOGGLE ---------- */
.nav__toggle{position:relative;display:inline-flex;align-items:center;gap:12px;background:none;border:0;color:inherit;padding:6px 0;font:inherit}
/* the visible bars+label are ~27px tall — well under the 44px touch minimum.
   An invisible hit-slop keeps the compact visual but gives the tap target the
   size it needs, on every screen (not just mobile). */
.nav__toggle::before{content:"";position:absolute;inset:-10px -8px}
.nav__toggle-label{position:relative;display:inline-block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;height:1.1em;overflow:hidden}
.nav__toggle-open,.nav__toggle-close{display:block;transition:transform .45s var(--ease)}
.nav__toggle-close{position:absolute;left:0;top:0;transform:translateY(110%)}
.nav.is-open .nav__toggle-open{transform:translateY(-110%)}
.nav.is-open .nav__toggle-close{transform:translateY(0)}
.nav__toggle-bars{position:relative;display:block;width:26px;height:12px}
.nav__toggle-bars i{position:absolute;left:0;width:26px;height:1.6px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.nav__toggle-bars i:nth-child(1){top:2px}
.nav__toggle-bars i:nth-child(2){top:8px}
.nav.is-open .nav__toggle-bars i:nth-child(1){top:5px;transform:rotate(45deg)}
.nav.is-open .nav__toggle-bars i:nth-child(2){top:5px;transform:rotate(-45deg)}

/* ---------- FULL-SCREEN MENU ---------- */
body.menu-open{overflow:hidden}
.menu{position:fixed;inset:0;z-index:850;background:var(--ink);color:var(--paper);clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path .85s var(--ease);overflow:hidden}
.menu.is-open{clip-path:inset(0 0 0% 0);pointer-events:auto}
/* minmax(0,1fr) pins the row to the padded box. Without it the row grows to the
   panel's natural height, runs off the bottom, and the media column then centres
   itself on THAT — which reads as the image sitting too low. */
.menu__inner{--mpt:clamp(84px,12vh,130px);--mpb:clamp(28px,5vh,54px);
  position:relative;height:100%;display:grid;grid-template-columns:1fr 1.05fr;grid-template-rows:minmax(0,1fr);gap:clamp(24px,5vw,90px);padding:var(--mpt) var(--pad) var(--mpb)}

/* left — art collage that swaps per hovered link */
/* the panel keeps the padded box (it has to clear the header), but the plate
   cancels it so it centres on the viewport rather than on the padded area —
   the top padding is 34px deeper than the bottom, which read as sitting low */
.menu__media{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:0;
  margin-top:calc(var(--mpt) * -1);margin-bottom:calc(var(--mpb) * -1)}
.menu__stack{position:relative;width:100%;height:min(72vh,640px);max-height:100%;max-width:520px;overflow:hidden;border-radius:2px}
.menu__img{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.1s var(--ease)}
.menu__img.is-active{opacity:1;transform:scale(1)}
.menu__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.28) contrast(1.04) brightness(.94)}
/* the media column is now full-height, so the seal anchors to the centred plate
   (half its height below centre, less its own 118px) instead of to the column */
.menu__seal{position:absolute;right:clamp(-10px,-1vw,-18px);top:50%;margin-top:calc(min(72vh,640px) / 2 - 104px);width:118px;height:118px;background:var(--paper);color:var(--ink);border-radius:50%;display:grid;place-items:center;animation:spin 20s linear infinite}
.menu__seal svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--ink);font-family:var(--sans);font-size:7px;letter-spacing:.15em}
.menu__seal-amp{font-family:var(--serif);font-size:30px}

/* right — navigation + contact */
.menu__panel{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.menu__panel::-webkit-scrollbar{display:none}
.menu__eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease) .1s,transform .6s var(--ease) .1s;margin-bottom:clamp(20px,3vh,34px)}
.menu.is-open .menu__eyebrow{opacity:.55;transform:none}
.menu__links{list-style:none;display:flex;flex-direction:column}
.menu__links li{overflow:hidden}
/* six links have to clear the eyebrow and the footer inside one viewport, so the
   size answers to height as well as width — on a short screen 5.4vw alone
   overflows and the menu loses its footer. */
.menu__links a{position:relative;display:flex;align-items:baseline;gap:.5em;padding:.06em 0;font-family:var(--serif);font-size:clamp(28px,min(5.4vw,7.4vh),78px);line-height:1.12;font-weight:400;color:var(--paper);opacity:0;transform:translateY(105%);transition:transform .7s var(--ease),opacity .7s var(--ease),color .4s}
.menu.is-open .menu__links a{opacity:1;transform:none}
.menu.is-open .menu__links li:nth-child(1) a{transition-delay:.16s}
.menu.is-open .menu__links li:nth-child(2) a{transition-delay:.22s}
.menu.is-open .menu__links li:nth-child(3) a{transition-delay:.28s}
.menu.is-open .menu__links li:nth-child(4) a{transition-delay:.34s}
.menu.is-open .menu__links li:nth-child(5) a{transition-delay:.40s}
.menu__idx{font-family:var(--sans);font-size:.2em;letter-spacing:.14em;opacity:.4;transform:translateY(-.4em)}
.menu__word{position:relative;transition:transform .5s var(--ease)}
.menu__word::after{content:"";position:absolute;left:0;bottom:.12em;width:100%;height:2px;background:var(--oxblood);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
@media(hover:hover){
  .menu__links a:hover{color:#fff}
  .menu__links a:hover .menu__word{transform:translateX(clamp(10px,1.6vw,26px))}
  .menu__links a:hover .menu__word::after{transform:scaleX(1)}
  .menu__links a:hover .menu__idx{opacity:.9;color:var(--oxblood)}
}

.menu__foot{margin-top:auto;padding-top:clamp(26px,5vh,54px);display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease) .34s,transform .6s var(--ease) .34s}
.menu.is-open .menu__foot{opacity:1;transform:none}
.menu__foot-label{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-bottom:.8em}
.menu__foot-link{font-family:var(--serif);font-size:clamp(18px,2vw,26px);border-bottom:1px solid var(--line-inv);padding-bottom:.08em;transition:color .4s,border-color .4s}
.menu__foot-link:hover{color:var(--oxblood);border-color:var(--oxblood)}
.menu__foot-sub{display:block;max-width:34ch;margin-top:.9em;font-size:12.5px;line-height:1.5;opacity:.55}
.menu__foot-block--right{text-align:right}
.menu__social{display:flex;flex-direction:column;gap:.5em;align-items:flex-end}
.menu__social a{font-size:13px;letter-spacing:.14em;text-transform:uppercase;position:relative;transition:color .35s}
.menu__social a:hover{color:var(--oxblood)}

@media(max-width:900px){
  .menu__inner{grid-template-columns:1fr;align-content:center;gap:28px;padding-top:clamp(96px,14vh,140px)}
  .menu__media{display:none}
  .menu__foot{flex-direction:column;gap:24px}
  .menu__foot-block--right{text-align:left}
  .menu__social{align-items:flex-start}
}

/* ---------- GRAIN ---------- */
.grain{
  position:fixed;inset:-50%;z-index:9990;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite;mix-blend-mode:multiply;
}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}
  30%{transform:translate(3%,-2%)}50%{transform:translate(-2%,4%)}
  70%{transform:translate(4%,2%)}90%{transform:translate(-3%,-3%)}100%{transform:translate(0,0)}
}

/* ---------- CURSOR ---------- */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:difference}
.cursor__dot{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--paper);opacity:.8;transform:translate(-50%,-50%)}
.cursor__ring{position:absolute;width:32px;height:32px;border:1px solid rgba(244,239,228,.5);border-radius:50%;transform:translate(-50%,-50%);transition:width .4s var(--ease),height .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease),opacity .3s}
.cursor__label{position:absolute;transform:translate(-50%,-50%);color:var(--ink);font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:0;white-space:nowrap;font-weight:400}
.cursor.is-hover .cursor__ring{width:48px;height:48px;border-color:rgba(244,239,228,.75)}
.cursor.is-view .cursor__ring,.cursor.is-drag .cursor__ring{width:78px;height:78px;background:var(--paper);border-color:var(--paper)}
.cursor.is-view .cursor__label,.cursor.is-drag .cursor__label{opacity:1}
.cursor.is-down .cursor__ring{width:22px;height:22px}
/* Persona flip tiles: the negative-image reveal is the effect — the cursor must
   not paint its solid, colour-inverting disc on top (that read as a second,
   offset circle). Keep just a hollow outline + label, no difference blend.
   --flip-r is the single source of truth for the lens radius: the ring below and
   the reveal mask (--reveal-r) both derive from it, so they are the SAME circle. */
:root{--flip-r:60px}
.cursor.is-flip{mix-blend-mode:normal}
.cursor.is-flip .cursor__ring{
  background:transparent;
  width:calc(var(--flip-r)*2);height:calc(var(--flip-r)*2);
}
/* the centre dot sits in the middle of the lens and blocks the reveal — hide it
   in the persona flip state, leaving just the hollow outline + label */
.cursor.is-flip .cursor__dot{opacity:0}

/* ---------- PRELOADER ---------- */
.preloader{position:fixed;inset:0;z-index:9995;background:var(--ink);color:var(--paper);overflow:hidden}
.preloader__sky{position:absolute;inset:0;z-index:1}
.preloader__sky img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.preloader__tint{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(13,12,10,.5),rgba(13,12,10,.1) 46%,transparent 66%)}
.preloader__veil{position:absolute;inset:0;z-index:3;background:var(--ink);will-change:-webkit-mask-image,mask-image}
.preloader__inner{z-index:5}
.preloader__foot{z-index:5}
/* hidden from the very first paint (matches the GSAP from-state) so they never flash before JS hides them
   — scoped under .preloader so it outranks .hero__foot's own opacity; GSAP's inline reveal still wins later */
.preloader .preloader__hide{opacity:0;transform:translateY(16px)}
.preloader__count{position:absolute;right:var(--pad);bottom:clamp(20px,4vh,44px);z-index:6;font-family:var(--serif);font-size:clamp(40px,7vw,108px);line-height:1;color:var(--paper);display:flex;align-items:flex-start}
.preloader__count i{font-size:.3em;font-style:normal;font-family:var(--sans);margin-top:.6em;opacity:.6;margin-left:.08em}
body.is-loading{overflow:hidden;height:100vh;height:100dvh;background:var(--ink)}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:900;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--pad);color:var(--paper);opacity:0;transition:color .5s var(--ease)}
/* soft top scrim keeps the nav legible over busy imagery (hero/portal) */
.nav::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(10,12,20,.34),rgba(10,12,20,0));opacity:1;transition:opacity .5s var(--ease)}
.nav__logo{width:118px}
.nav__logo svg{width:100%;fill:currentColor;transition:fill .5s var(--ease);overflow:visible}
.nav__right{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
/* CTA — solid white pill by default, flips to ink on hover */
.nav__cta{position:relative;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;background:var(--paper);color:var(--ink);border:1px solid var(--paper);padding:9px 18px;border-radius:40px;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
/* pill is ~33px tall at default text metrics — pad the tap target to 44px without touching the pill's own size */
.nav__cta::before{content:"";position:absolute;inset:-8px -4px}
.nav__cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* over paper sections: switch to dark ink text + drop the scrim */
.nav--ink{color:var(--ink)}
.nav--ink::before{opacity:0}
/* while the full-screen menu is open, force light text (over the ink overlay) */
.nav.is-open{color:var(--paper)}
.nav.is-open::before{opacity:0}
@media(max-width:560px){.nav__cta{display:none}}

/* ---------- SHARED SECTION BITS ---------- */
.sec-index{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.sec-label{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.reveal-line{overflow:hidden}
.reveal-line>span{display:inline-block;will-change:transform}

/* ---------- HERO ---------- */
.hero{position:relative;height:100svh;min-height:640px;width:100%;overflow:hidden;background:#6ea8d8}
.hero__bg{position:absolute;inset:0;z-index:1;transform-origin:50% 50%;will-change:transform}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
/* readability — left dim for type; leave the bottom open for the sky handoff */
.hero__veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to right, rgba(10,18,32,.38) 0%, rgba(10,18,32,.1) 36%, transparent 58%),
    linear-gradient(to bottom, rgba(10,18,32,.16) 0%, transparent 32%, transparent 100%),
    radial-gradient(ellipse 55% 45% at 50% 42%, transparent 0%, rgba(10,18,32,.12) 100%);
}
/* dissolve into the SAME bright sky as sequence s-1 — no dark navy band */
.hero__fade{position:absolute;left:0;right:0;bottom:0;z-index:2;height:min(28vh,240px);pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(140,190,230,0) 0%,
    rgba(155,200,235,.18) 40%,
    rgba(170,210,240,.42) 72%,
    #a8d0ef 100%
  );
}
.hero__inner{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);color:var(--paper);pointer-events:none;
  text-shadow:0 2px 24px rgba(8,16,36,.45), 0 1px 2px rgba(8,16,36,.35);
}
.hero__eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.26em;text-transform:uppercase;margin-bottom:min(4vh,34px);opacity:.85}
.hero__title{font-family:var(--serif);font-weight:400;line-height:.86;letter-spacing:-.01em;text-transform:none}
.hero__title .line{display:block;clip-path:inset(-0.35em -0.45em -0.2em)}
.hero__title .w{display:inline-block;will-change:transform}
.hero__title .line:first-child{font-size:clamp(44px,9vw,150px);font-style:italic}
.hero__title .line--big{font-size:clamp(74px,20vw,340px);letter-spacing:-.02em}
.hero__sub{max-width:38ch;margin-top:min(4vh,32px);font-size:clamp(15px,1.5vw,20px);line-height:1.5;font-style:italic;opacity:.9}
.hero__scroll{margin-top:min(5vh,44px);display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;pointer-events:auto}
.hero__scroll i{width:44px;height:1px;background:var(--paper);position:relative;overflow:hidden;display:inline-block}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--oxblood);transform:translateX(-100%);animation:scrollline 2.4s var(--ease) infinite}
@keyframes scrollline{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}
.hero__foot{position:absolute;left:0;bottom:0;z-index:3;width:100%;padding:20px var(--pad);display:flex;justify-content:space-between;align-items:center;color:var(--paper);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.8;pointer-events:none;text-shadow:0 1px 12px rgba(8,16,36,.5)}
/* the & is the scroll cue — its outline self-draws with scroll (see js) */
.hero__amp{display:inline-flex;flex-direction:column;align-items:center;gap:7px;opacity:.95}
.hero__amp-svg{width:clamp(40px,4vw,54px);height:auto;overflow:visible}
.hero__amp-ghost{fill:none;stroke:rgba(244,239,228,.30);stroke-width:7}
.hero__amp-draw{fill:none;stroke:var(--paper);stroke-width:9;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:2537;stroke-dashoffset:2537}
.hero__amp-label{font-family:var(--sans);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.62}

/* ---------- PORTAL (infinite zoom into the cosmos) ---------- */
.portal{position:relative;background:#a8d0ef;height:980vh;margin-top:-1px}
/* full-bleed pin — no letterbox gaps on laptop or ultrawide */
.portal__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;background:#a8d0ef}
.portal__frame{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;background:#a8d0ef}
.portal__stage{position:absolute;inset:0;width:100%;height:100%;opacity:0;will-change:transform,opacity;transform-origin:50% 50%}
.portal__stage img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:contrast(1.04) saturate(1.08)}
.portal__s1{opacity:1}
/* soft sky mist from hero — lifts into the fresco (no dark strip) */
.portal__warm{position:absolute;inset:0;z-index:4;pointer-events:none;will-change:opacity;
  background:
    linear-gradient(to bottom, #a8d0ef 0%, rgba(168,208,239,.55) 8%, rgba(200,225,245,.2) 22%, transparent 40%),
    radial-gradient(ellipse 120% 55% at 50% -5%, rgba(255,252,245,.55) 0%, rgba(255,252,245,.15) 40%, transparent 70%);
}
/* bottom fade — blends the final s5 frame into the black section below */
.portal__fade{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;will-change:opacity;
  background:linear-gradient(to bottom, transparent 52%, rgba(13,12,10,.5) 80%, var(--ink) 100%)}
/* legibility halo — a soft dark cloud only behind the centre copy; the rest of the plate stays bright */
.portal__scrim{position:absolute;inset:0;z-index:4;pointer-events:none;background:
  radial-gradient(ellipse 44% 27% at 50% 50%, rgba(13,12,10,.5) 0%, rgba(13,12,10,.24) 45%, transparent 70%)}
.portal__copy{position:relative;z-index:5;text-align:center;color:var(--paper);padding:0 var(--pad)}
/* centering comes from GSAP (xPercent/yPercent -50) — do not add CSS translate here */
.portal__line{font-family:var(--serif);font-size:clamp(22px,min(4vw,6.5vh),60px);line-height:1.1;opacity:0;position:absolute;left:50%;top:50%;width:max-content;max-width:min(90vw,36ch);z-index:1;
  -webkit-text-stroke:0.7px rgba(6,5,4,.35);
  paint-order:stroke fill;
  text-shadow:0 1px 2px rgba(6,5,4,.5), 0 2px 26px rgba(6,5,4,.6);
}
.portal__line--big{font-style:italic;font-size:clamp(26px,min(6vw,8vh),96px)}

/* ---------- THE TOUCH (Creation of Adam zoom) ---------- */
.touch{position:relative;background:var(--ink)}
.touch__pin{position:relative;height:100svh;overflow:hidden;display:grid;place-items:center}
/* full-bleed frame — image covers viewport on every aspect ratio */
.touch__frame{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.touch__img{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.touch__img img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform-origin:50% 50%;will-change:transform}
/* thin edge melts only — not a big empty band */
.touch__grad{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom, transparent 90%, rgba(244,239,228,.55) 96%, var(--paper) 100%),
  linear-gradient(to top, transparent 82%, rgba(13,12,10,.35) 92%, var(--ink) 100%)}
.touch__copy{position:relative;z-index:4;text-align:center;color:var(--paper);padding:0 var(--pad);align-self:end;margin-bottom:clamp(72px,12vh,180px)}
/* focused scrim so the heading always reads over the bright fresco */
.touch__copy::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150%;height:190%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(6,5,4,.62) 0%,rgba(6,5,4,.3) 46%,transparent 72%)}
.touch__k{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:.7;margin-bottom:18px;text-shadow:0 1px 12px rgba(6,5,4,.5)}
.touch__h{font-family:var(--serif);font-weight:400;font-size:clamp(40px,8vw,130px);line-height:.92;letter-spacing:-.01em;text-shadow:0 1px 30px rgba(6,5,4,.55),0 2px 4px rgba(6,5,4,.32)}
/* clip the slide-up reveal WITHOUT slicing glyph overhang: negative insets extend the mask past the box on every side */
.touch__h .line{display:block;clip-path:inset(-0.22em -0.5em -0.18em)}
.touch__h .w{display:inline-block;will-change:transform}
.touch__h .line:nth-child(2) .w{font-style:italic}

/* ---------- MANIFESTO (pinned, progressive glow) ---------- */
.mani{position:relative;background:var(--ink);color:var(--paper);padding:clamp(32px,4.5vh,80px) var(--pad);overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.mani__amp{position:absolute;right:clamp(24px,4vw,96px);top:50%;transform:translateY(-50%);width:min(44vw,560px);opacity:1;pointer-events:none}
.mani__amp svg{width:100%;display:block}
.mani__intro{font-family:var(--serif);font-size:min(clamp(22px,3.4vw,44px),5.2vh);font-style:italic;margin-bottom:.4em}
.mani__lines{position:relative;z-index:2}
.mani__line{font-family:var(--serif);font-size:min(clamp(24px,4.4vw,64px),8.4vh);line-height:1.1;letter-spacing:-.01em;padding:.02em 0;opacity:.6;transition:opacity .45s var(--ease),color .45s,transform .5s var(--ease);will-change:opacity,transform}
.mani__line em{font-style:italic;opacity:1;font-size:.44em;vertical-align:middle;margin-right:.35em;letter-spacing:.02em}
.mani__line.is-on{opacity:1;transform:translateX(clamp(6px,1.4vw,22px))}
.mani__line.is-on em{color:var(--oxblood);opacity:1}
.mani__coda{margin-top:min(clamp(20px,3.5vh,48px),4vh);max-width:26ch;font-family:var(--serif);font-size:min(clamp(16px,1.9vw,26px),3.2vh);line-height:1.3}
.mani__coda p{margin-bottom:.4em}
.mani__yours{color:var(--oxblood);font-style:italic;margin-top:.6em}

/* ---------- WHO WE ARE ---------- */
.who{position:relative;background:var(--paper);padding:clamp(90px,14vh,180px) var(--pad);overflow:clip}
.who__pin{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(112px,14vh,150px) 0 clamp(28px,5vh,64px);overflow:hidden}
.who__head{position:relative;z-index:3;display:flex;justify-content:space-between;padding-top:18px;margin-bottom:clamp(36px,6vh,72px);background:var(--paper)}
.who__head-line{position:absolute;top:0;left:0;width:100%;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left center}
@media(prefers-reduced-motion:reduce){.who__head-line{transform:scaleX(1)}}
.who__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(30px,6vw,90px);align-items:start}
.who__lead{min-width:0}
.who__lead h2,.who__type{font-family:var(--serif);font-size:clamp(28px,4.2vw,64px);line-height:1.08;letter-spacing:-.01em;font-weight:400;min-height:6.5em;color:var(--ink)}
.who__type .who__ch{opacity:0}
.who__type .who__ch.is-on{opacity:1}
.who__type .who__caret{
  display:inline-block;
  width:1px;
  height:.62em;
  margin-left:.08em;
  background:rgba(13,12,10,.28);
  vertical-align:-.02em;
  opacity:.4;
  animation:whoCaret 1.5s ease-in-out infinite;
}
.who__type.is-done .who__caret{opacity:0;animation:none}
@keyframes whoCaret{0%,100%{opacity:.12}50%{opacity:.4}}
.who__fig{position:relative;z-index:1;overflow:hidden;align-self:start;max-height:min(72vh,820px)}
.who__fig img{width:100%;height:100%;max-height:min(72vh,820px);aspect-ratio:3/3.6;object-fit:cover;filter:grayscale(.15) contrast(1.02)}
.who__badge{position:absolute;left:-38px;bottom:-38px;width:132px;height:132px;background:var(--ink);border-radius:50%;display:grid;place-items:center;animation:spin 18s linear infinite;z-index:2}
.who__badge svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--paper);font-family:var(--sans);font-size:7.1px;letter-spacing:.16em}
.who__badge-amp{font-family:var(--serif);color:var(--paper);font-size:34px}
@keyframes spin{to{transform:rotate(360deg)}}
.who__mv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);margin-top:clamp(60px,10vh,130px);border-top:1px solid var(--line);padding-top:clamp(30px,5vh,60px)}
.mv h3{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,38px);margin-bottom:.5em;font-weight:400}
.mv p{max-width:46ch;font-size:clamp(15px,1.35vw,18px);line-height:1.55;opacity:.85}
@media(max-width:860px){.who__grid,.who__mv{grid-template-columns:1fr;gap:40px}.who__fig{max-width:420px;max-height:none}.who__fig img{max-height:none}}

/* ---------- WHO kicker ---------- */
.who__kicker{
  position:relative;
  display:inline-block;
  max-width:100%;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:22px;
  padding-bottom:10px;
  overflow:hidden;
}
.who__kicker-text{
  display:block;
  color:rgba(13,12,10,.68);
  opacity:0;
}
.who__kicker.is-in .who__kicker-text{transform:translateY(0);opacity:1}
.who__kicker-rule{
  position:absolute;
  left:0;bottom:0;
  height:1px;
  width:100%;
  background:linear-gradient(90deg, rgba(168,65,46,.7), rgba(13,12,10,.18), transparent);
  transform-origin:left center;
}
.who__kicker.is-in .who__kicker-rule{transform:scaleX(1)}

/* ---------- THE GUIDELINES — sealed letters ---------- */
.guide{position:relative;height:100svh;overflow:hidden;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center}
.guide .guide__head{position:absolute;top:clamp(88px,10vh,124px);left:0;width:100%;padding:0 var(--pad);display:flex;justify-content:space-between;font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.6;z-index:4}
.guide__deck{position:relative;width:100%;height:100%}
.guide .slot{position:absolute;top:50%;left:50%;width:clamp(200px,22vmin,320px);aspect-ratio:1.55/1;margin-top:calc(clamp(200px,22vmin,320px)/-3.1);margin-left:calc(clamp(200px,22vmin,320px)/-2);perspective:1400px;will-change:transform}
.guide .env{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.guide .back{position:absolute;inset:0;transform:translateZ(0);background:linear-gradient(180deg,var(--cream-3),var(--cream-2) 24%,var(--cream) 60%);border-radius:8px;box-shadow:inset 0 15px 24px -11px rgba(13,12,10,.32),0 26px 50px rgba(0,0,0,.42)}
.guide .letter{position:absolute;left:7%;right:7%;top:38%;height:62%;transform:translateZ(2px);background:linear-gradient(160deg,var(--bone),#f2ebda);border-radius:5px 5px 2px 2px;box-shadow:0 12px 26px rgba(0,0,0,.22);padding:6% 7%;color:var(--ink);text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;will-change:transform}
.guide .letter .kick{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin-bottom:.9em}
.guide .letter .rule{font-family:var(--serif);font-size:clamp(14px,1.55vw,21px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.guide .env[data-k="no"] .kick{color:var(--oxblood-dark)}
.guide .env[data-k="no"] .rule{color:var(--ink)}
.guide .env[data-k="yes"] .kick{color:var(--ink)}
.guide .env[data-k="yes"] .rule{color:var(--ink)}
.guide .pocket{position:absolute;left:0;right:0;bottom:0;height:58%;transform:translateZ(8px);background:linear-gradient(158deg,var(--cream-2),var(--cream-3));border-radius:0 0 8px 8px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -7px 11px -6px rgba(13,12,10,.34),0 10px 24px rgba(0,0,0,.18)}
.guide .pocket::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;background:linear-gradient(to top right,transparent 49.2%,rgba(13,12,10,.2) 49.7%,transparent 50.2%),linear-gradient(to top left,transparent 49.2%,rgba(13,12,10,.2) 49.7%,transparent 50.2%)}
.guide .flap{position:absolute;top:0;left:0;right:0;height:64%;transform-origin:top center;transform:translateZ(9px) rotateX(0deg)}
.guide .flap__tri{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(163deg,var(--cream),var(--cream-2) 72%,var(--cream-3));backface-visibility:hidden;filter:drop-shadow(0 6px 4px rgba(13,12,10,.26))}
.guide .addr{position:absolute;top:11%;left:13%;z-index:2;font-family:var(--serif);font-style:italic;font-size:clamp(11px,1.2vw,15px);color:rgba(13,12,10,.5);transform:rotate(-5deg);line-height:1.25;backface-visibility:hidden}
.guide .seal{position:absolute;left:50%;top:99%;z-index:3;transform:translate(-50%,-50%);width:clamp(44px,4.6vw,62px);height:clamp(44px,4.6vw,62px);border-radius:50%;background:radial-gradient(circle at 38% 34%,#20201d,#0d0c0a 70%);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 12px rgba(0,0,0,.4),inset 0 0 0 1px rgba(201,162,74,.35);backface-visibility:hidden}
.guide .seal span{font-family:var(--serif);font-style:italic;font-size:clamp(13px,1.4vw,18px);color:var(--seal-gold)}
.guide__foot{position:absolute;bottom:6vh;left:0;width:100%;text-align:center;padding:0 var(--pad);font-family:var(--serif);font-style:italic;font-size:clamp(16px,2vw,26px);line-height:1.35;opacity:.6;z-index:4}

/* static fallback — reduced motion & small screens */
.guide.guide--static{height:auto;min-height:0;display:block;padding:clamp(90px,15vh,190px) var(--pad)}
.guide.guide--static .guide__head{position:static;padding:0;border-top:1px solid var(--line-inv);padding-top:18px;margin-bottom:clamp(40px,7vh,90px)}
.guide.guide--static .guide__deck{position:static;height:auto;display:flex;flex-direction:column}
.guide.guide--static .slot{position:static;width:100%;aspect-ratio:auto;margin:0;perspective:none;border-bottom:1px solid var(--line-inv)}
.guide.guide--static .env{position:static;transform:none!important}
.guide.guide--static .back,.guide.guide--static .pocket,.guide.guide--static .flap{display:none}
.guide.guide--static .letter{position:static;transform:none!important;height:auto;background:none;box-shadow:none;padding:.5em 0;display:flex;flex-direction:row;justify-content:flex-start;align-items:baseline;text-align:left;gap:.7em;flex-wrap:wrap}
.guide.guide--static .letter .kick{margin:0;opacity:1}
.guide.guide--static .letter .rule{font-size:clamp(24px,4.4vw,56px);color:var(--paper);-webkit-text-stroke:0}
.guide.guide--static .env[data-k="no"] .kick{color:var(--oxblood-dark)}
.guide.guide--static .env[data-k="no"] .rule{color:var(--paper)}
.guide.guide--static .env[data-k="yes"] .kick{color:var(--paper)}
.guide.guide--static .env[data-k="yes"] .rule{color:var(--paper)}
.guide.guide--static .guide__foot{position:static;text-align:left;max-width:30ch;margin-top:clamp(40px,7vh,80px)}

/* ---------- SERVICES HORIZONTAL ---------- */
.svc{position:relative;background:var(--ink);color:var(--paper)}
.svc__pin{height:100svh;overflow:hidden;display:flex;align-items:center}
/* The track translates until its right edge meets the viewport's, so the last panel
   already lands flush — only a normal gutter is needed here. The old
   max(--pad, 100vw - panelWidth) formula reserved a whole viewport minus one panel
   (840px at 1280, 1480px at 1920), which is what left the huge empty tail. */
.svc__track{display:flex;align-items:stretch;gap:0;padding-inline:var(--pad);will-change:transform}
/* widths scale with the viewport instead of capping at a fixed px, so wide screens
   get proportionally larger panels rather than a row of small ones */
.svc__intro{flex:0 0 auto;width:clamp(300px,40vw,620px);display:flex;flex-direction:column;justify-content:center;padding-right:6vw}
.svc__intro h2{font-family:var(--serif);font-size:clamp(56px,10vw,150px);line-height:.9;letter-spacing:-.02em;margin:.3em 0}
.svc__drag{font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-top:1em}
.svc__panel{flex:0 0 auto;width:clamp(300px,32vw,520px);border-left:1px solid var(--line-inv);padding:6vh 3vw;display:flex;flex-direction:column;justify-content:space-between;transition:background .5s;opacity:1}
.svc__panel:hover{background:var(--ink-2)}
.svc__num{font-family:var(--serif);font-size:clamp(20px,1.6vw,24px);opacity:.5}
.svc__panel h3{font-family:var(--serif);font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.01em;margin-top:auto;font-weight:400;transition:transform .5s var(--ease)}
.svc__panel:hover h3{transform:translateY(-8px)}
.svc__panel p{margin-top:.8em;font-size:clamp(14px,1.2vw,17px);line-height:1.5;opacity:.7;font-style:italic;max-width:30ch}
.svc__panel--img{padding:0;border-left:1px solid var(--line-inv);width:clamp(240px,26vw,400px)}
/* translateZ promotes each image to its own layer so the pinned horizontal
   transform composites instead of repainting the filtered bitmap every frame */
.svc__panel--img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) brightness(.9);transform:translateZ(0)}
/* the two new candlelit-Baroque images are much darker at source — lift them so they read with the same clarity as the others */
.svc__panel--img img[src*="svc-authorship"],.svc__panel--img img[src*="svc-structure"]{filter:grayscale(.1) brightness(1.28) contrast(.96)}
/* Only phones get near-full-width panels. Tablets keep the fluid clamp above —
   at 82vw a 768px tablet needed ~7100px of horizontal travel; the clamp cuts that
   to ~2950px while still showing a panel and a half. */
@media(max-width:560px){
  .svc__intro{width:84vw}
  .svc__panel{width:84vw}
  .svc__panel--img{width:72vw}
}

/* ---------- WORK ---------- */
.work{background:var(--paper);padding:clamp(90px,14vh,180px) var(--pad)}
.work__head{border-top:1px solid var(--line);padding-top:18px;margin-bottom:clamp(48px,7vh,90px);display:flex;flex-direction:column;gap:26px}
.work__head h2{font-family:var(--serif);font-size:clamp(30px,4.6vw,74px);line-height:1.02;max-width:28ch;font-weight:400;letter-spacing:-.01em}
.work__grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:clamp(16px,2vw,34px)}
.work__grid--persona{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;align-items:start}
.work__item{grid-column:span 2;display:block;position:relative}
.work__item--tall{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.work__grid--persona .work__item--tall{grid-column:span 1;grid-row:auto}
.work__item--wide{grid-column:span 6}
.work__media{overflow:hidden;position:relative}
.work__media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.25) contrast(1.03);transition:transform 1s var(--ease),filter .6s;will-change:transform}
.work__item--tall .work__media{flex:1 1 0;min-height:0}
.work__item--tall .work__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.work__item--wide .work__media img{aspect-ratio:16/7}
.work__item:hover .work__media img{transform:scale(1.06);filter:grayscale(0) contrast(1.05)}
body.work-gl-on .work__media img{opacity:0}
body.work-gl-on .work__item:hover .work__media img{transform:none}
.work__cap{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;gap:20px}
.work__l{display:flex;flex-direction:column;gap:5px;max-width:80%}
.work__t{font-family:var(--serif);font-size:clamp(18px,1.7vw,26px);font-weight:400}
.work__i{font-size:13px;line-height:1.4;font-style:italic;opacity:.62;margin-top:3px;transition:opacity .4s var(--ease)}
.work__item:hover .work__i{opacity:.85}
.work__m{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;text-align:right;white-space:nowrap}
body.work-gl-on .work__item--noGL .work__media img{opacity:1}

/* Persona hover twin — negative only inside a cursor radius (layers share one crop box) */
@property --reveal-r{
  syntax:"<length>";
  inherits:true;
  initial-value:0px;
}
.work__item--flip .work__img-src{
  position:absolute;inset:0;width:100%;height:100%;opacity:0!important;pointer-events:none;
}
.work__item--flip .work__layer{
  position:absolute;inset:0;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 20%;
  transform:none!important;
  pointer-events:none;
}
.work__item--flip .work__layer--a{z-index:0}
.work__item--flip .work__layer--b{
  z-index:1;
  --mx:50%;--my:50%;--reveal-r:0px;
  /* Clean-cut window: the mask edge sits exactly on --reveal-r (stops run to
     100%), and the 96%→100% ramp is only ~3px — just enough to antialias, so the
     boundary reads as a crisp cut rather than a soft blur. A feathered edge blended
     the two images together and made the twin underneath look misaligned. */
  -webkit-mask-image:radial-gradient(circle var(--reveal-r) at var(--mx) var(--my),#000 0%,#000 96%,transparent 100%);
  mask-image:radial-gradient(circle var(--reveal-r) at var(--mx) var(--my),#000 0%,#000 96%,transparent 100%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:0 0;mask-position:0 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:--reveal-r .35s var(--ease);
}
.work__item--flip.is-reveal .work__layer--b{--reveal-r:var(--flip-r)}
.work__item--flip:hover .work__media img,
.work__item--flip:hover .work__layer{transform:none!important}
body.work-gl-on .work__item--flip .work__layer--a,
body.work-gl-on .work__item--flip .work__layer--b{opacity:1}
@media(max-width:760px){
  :root{--flip-r:45px}
}

/* Persona — always portrait (3:4), edge-to-edge on every screen; scales up with viewport */
.work--persona .work__grid--persona{
  width:100%;
  max-width:none;
  margin-inline:0;
  justify-content:space-between;
}
.work--persona .work__item--tall{display:flex;flex-direction:column;width:100%}
.work--persona .work__item--tall .work__media{
  flex:0 0 auto;
  width:100%;
  aspect-ratio:3/4;
  min-height:0;
  box-shadow:inset 0 0 0 1px rgba(13,12,10,.22);
  outline:1px solid rgba(13,12,10,.28);
  outline-offset:10px;
  margin:10px;
}
.work--persona .work__item--tall .work__media img{
  position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;object-fit:cover;object-position:center 20%;
}
.work--persona .work__m{letter-spacing:.2em}

@media(max-width:760px){
  .work__grid,.work__grid--persona{grid-template-columns:1fr;grid-auto-flow:row;grid-auto-rows:auto}
  .work__item,.work__item--tall,.work__item--wide,.work__grid--persona .work__item--tall{grid-column:1/-1;grid-row:auto}
  .work__item--tall{display:block}
  .work--persona .work__item--tall .work__media{aspect-ratio:3/4}
  .work__item--tall .work__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .work__item--wide .work__media img{aspect-ratio:16/9}
}

/* ---------- MARQUEE ---------- */
.marq{background:var(--ink);color:var(--paper);padding:clamp(28px,5vh,60px) 0;overflow:hidden;border-top:1px solid var(--line-inv);border-bottom:1px solid var(--line-inv)}
.marq__row{display:flex;gap:.5em;white-space:nowrap;font-family:var(--serif);font-size:clamp(40px,8vw,120px);font-style:italic;line-height:1;will-change:transform}
.marq__row span{padding:0 .1em}
.marq__dot{font-style:normal;color:var(--oxblood)}

/* ---------- JOURNAL / PEOPLE ---------- */
.jrnl{background:var(--paper);padding:clamp(90px,14vh,180px) var(--pad)}
.jrnl__head{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-bottom:clamp(48px,8vh,110px)}
.jrnl__top{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,4vw,60px);flex-wrap:wrap;margin-bottom:clamp(44px,7vh,96px)}
.jrnl__top h2{font-family:var(--serif);font-size:clamp(34px,5vw,86px);line-height:1;letter-spacing:-.01em;font-weight:400;max-width:14ch}
.jrnl__pinned{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;padding-bottom:.6em}

/* pinned notes */
.jrnl__cards{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,50px);align-items:start}
.jrnl__cards li:nth-child(2){margin-top:clamp(14px,2.4vw,34px)}
.jrnl__cards li:nth-child(3){margin-top:clamp(4px,.8vw,12px)}
.jrnl__card{position:relative;display:block;background:var(--bone);border:1px solid var(--line);padding:clamp(26px,2.6vw,42px) clamp(22px,2.2vw,36px) clamp(28px,3vw,44px);box-shadow:0 18px 44px -30px rgba(13,12,10,.55);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.jrnl__cards li:nth-child(1) .jrnl__card{transform:rotate(-1.4deg)}
.jrnl__cards li:nth-child(2) .jrnl__card{transform:rotate(.9deg)}
.jrnl__cards li:nth-child(3) .jrnl__card{transform:rotate(-.6deg)}
.jrnl__card:hover{transform:rotate(0) translateY(-8px);box-shadow:0 34px 70px -34px rgba(13,12,10,.6)}
.jrnl__tape{position:absolute;top:-11px;left:50%;width:96px;height:22px;transform:translateX(-50%) rotate(-2deg);background:rgba(176,132,47,.22);border:1px solid rgba(176,132,47,.3)}
.jrnl__k{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--oxblood);opacity:.8;margin-bottom:1.4em}
.jrnl__card h3{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.7vw,25px);line-height:1.32}
.jrnl__rule{display:block;margin:1.6em 0 1.1em;height:1px;background:var(--line)}
.jrnl__meta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.38}

.jrnl__ppl{margin-top:clamp(60px,9vh,124px);border-top:1px solid var(--line);padding-top:clamp(28px,4vh,52px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px)}
.people__lead{font-family:var(--serif);font-size:clamp(22px,2.6vw,38px);font-style:italic;line-height:1.2}
.people__roles{font-size:clamp(18px,2vw,26px);line-height:1.5;font-weight:300}
.people__roles .wd{display:inline-block;opacity:.6;transition:opacity .4s;will-change:opacity}
.people__roles .wd.is-on{opacity:1}
.people__collective{margin-top:1.8em;font-size:14px;line-height:1.6;opacity:.7;max-width:40ch}
.people__collective em{font-style:normal;color:var(--oxblood)}
/* tablet — the third note drops to its own row; nudge it so it reads as a wall, not a leftover */
@media(max-width:1000px){
  .jrnl__cards{grid-template-columns:1fr 1fr}
  .jrnl__cards li:nth-child(3){margin-top:clamp(18px,3vw,40px);margin-left:clamp(0px,5vw,70px)}
}
@media(max-width:800px){
  .jrnl__ppl{grid-template-columns:1fr;gap:50px}
  .jrnl__cards{grid-template-columns:1fr;gap:34px}
  .jrnl__cards li,.jrnl__cards li:nth-child(n){margin-top:0}
  .jrnl__cards li .jrnl__card,.jrnl__cards li:nth-child(n) .jrnl__card{transform:none}
}

/* ---------- CONTACT ---------- */
.contact{position:relative;background:var(--ink);color:var(--paper);padding:clamp(100px,16vh,220px) var(--pad) 0;overflow:hidden}
/* ambient warmth first — the corner reads as lit, so the sun has something to sit in */
.contact::before{content:"";position:absolute;top:50%;right:-8%;transform:translateY(-50%);width:min(72vw,920px);aspect-ratio:1;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(176,132,47,.15) 0%,rgba(168,65,46,.06) 40%,transparent 68%)}
/* the plate is masked to a glow — no rectangle, no seam against the ink.
   inset top/bottom + flex centres it on the section; transform is left free for the parallax tween */
.contact__sun{position:absolute;top:0;bottom:0;right:-3vw;width:min(36vw,470px);display:flex;align-items:center;
  opacity:.5;mix-blend-mode:screen;pointer-events:none;z-index:1;
  -webkit-mask-image:radial-gradient(circle closest-side at 49% 50%,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%);
  mask-image:radial-gradient(circle closest-side at 49% 50%,#000 42%,rgba(0,0,0,.5) 70%,transparent 100%)}
.contact__sun img{display:block;width:100%;filter:contrast(1.08) saturate(1.15)}
.contact__inner{position:relative;z-index:2}
.contact__pre{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,34px);margin:26px 0 .3em}
.contact__big{font-family:var(--serif);font-weight:400;font-size:clamp(52px,12vw,190px);line-height:.9;letter-spacing:-.02em;margin:.1em 0 .3em}
/* line-height .9 cuts the descenders of "guidelines." — clip-margin gives them room
   without loosening the leading, and the reveal (yPercent 118) still starts hidden */
.contact__big .line{display:block;overflow:hidden;overflow:clip;overflow-clip-margin:.16em}
.contact__big .w{display:inline-block;will-change:transform}
.contact__big .line:nth-child(2) .w{font-style:italic;color:var(--oxblood)}
.contact__mail{display:inline-block;font-family:var(--serif);font-size:clamp(22px,3vw,44px);border-bottom:1px solid var(--line-inv);padding-bottom:.1em;transition:color .4s}
.contact__mail:hover{color:var(--oxblood)}
.contact__meta{display:flex;flex-wrap:wrap;gap:14px 46px;margin-top:clamp(40px,7vh,80px);font-size:13px;letter-spacing:.06em;opacity:.75}
.contact__meta span,.contact__meta a{max-width:34ch}
.footer{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:clamp(70px,12vh,150px);padding:24px 0;border-top:1px solid var(--line-inv);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
/* narrow — the type takes the full width, so the sun rises out of the top-right corner instead of sitting beside it */
@media(max-width:800px){
  .contact__sun{right:-26vw;width:min(70vw,340px);opacity:.28}
  .contact::before{right:-28%;width:min(110vw,700px)}
}

/* ============================================================
   WORK — THE GUIDELINE INDEX  (05)
   A contents page, not a grid. The rule carries the project;
   the plate only exists under the cursor.
   ============================================================ */
.wk{background:var(--paper);padding:clamp(90px,14vh,180px) var(--pad) clamp(70px,11vh,140px)}
.wk__head{border-top:1px solid var(--line);padding-top:18px;margin-bottom:clamp(44px,7vh,88px);display:flex;flex-direction:column;gap:26px}
.wk__head-top{display:flex;justify-content:space-between;gap:20px}
.wk__head h2{font-family:var(--serif);font-size:clamp(30px,4.6vw,74px);line-height:1.02;max-width:24ch;font-weight:400;letter-spacing:-.01em}
.wk__index{position:relative}

/* the plate — follows the pointer, never sits in the layout */
.wk__peek{position:fixed;top:0;left:0;z-index:60;margin:0;pointer-events:none;will-change:transform}
.wk__peek-in{position:absolute;top:0;left:0;display:block;width:clamp(210px,19vw,300px);height:clamp(270px,25vw,392px);overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.88);transition:opacity .5s var(--ease),transform .9s var(--ease)}
.wk__index.is-peek .wk__peek-in{opacity:1;transform:translate(-50%,-50%) scale(1)}
.wk__peek-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity .55s var(--ease),transform 1.1s var(--ease);filter:grayscale(.22) contrast(1.05)}
.wk__peek-img.is-on{opacity:1;transform:scale(1)}

.wk__row{position:relative;z-index:2;display:grid;grid-template-columns:74px minmax(0,1fr) 176px;align-items:center;gap:0 24px;padding:clamp(20px,2.8vh,36px) 0;border-top:1px solid var(--line);color:var(--ink)}
.wk__row:last-of-type{border-bottom:1px solid var(--line)}
.wk__n{font-size:12px;letter-spacing:.16em;opacity:.42;font-variant-numeric:tabular-nums;transition:opacity .5s var(--ease),color .5s var(--ease)}
.wk__main{min-width:0}
.wk__name{display:block;font-family:var(--serif);font-size:clamp(30px,5vw,72px);line-height:.98;font-weight:400;letter-spacing:-.015em;transition:transform .8s var(--ease)}
.wk__rule{display:block;margin-top:9px;font-size:13.5px;font-style:italic;letter-spacing:.01em;color:var(--oxblood);opacity:0;transform:translateY(4px);transition:opacity .55s var(--ease),transform .75s var(--ease)}
.wk__meta{display:flex;flex-direction:column;gap:5px;text-align:right;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.wk__meta i{font-style:normal;opacity:.6}
.wk__meta b{font-weight:400;opacity:.38;font-variant-numeric:tabular-nums;letter-spacing:.12em}
.wk__thumb{display:none}
.wk__thumb img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.25)}
.wk__row:hover .wk__name,.wk__row:focus-visible .wk__name{transform:translateX(clamp(10px,1.5vw,28px))}
.wk__row:hover .wk__rule,.wk__row:focus-visible .wk__rule{opacity:1;transform:translateX(clamp(10px,1.5vw,28px))}
.wk__row:hover .wk__n,.wk__row:focus-visible .wk__n{opacity:1;color:var(--oxblood)}
.wk__foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px 30px;margin-top:clamp(26px,4vh,54px);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.5}
/* the guideline under each project name is content, not a hover flourish —
   a touch device above the 860px mobile cut (iPad landscape, touch laptops,
   Surface) has no hover to reveal it with, so it must ship visible. The
   ≤860px block below already sets this; this covers the touch-but-wide gap
   that block doesn't reach. */
@media (hover:none){
  .wk__rule{opacity:1;transform:none}
}

@media (max-width:860px){
  .wk__row{grid-template-columns:38px minmax(0,1fr) 66px;gap:6px 14px;align-items:start}
  .wk__n{padding-top:6px}
  .wk__main{grid-column:2;grid-row:1}
  .wk__meta{grid-column:2;grid-row:2;flex-direction:row;gap:14px;text-align:left}
  .wk__thumb{display:block;grid-column:3;grid-row:1/3;width:66px;height:84px;overflow:hidden;align-self:center}
  .wk__rule{opacity:1;transform:none;margin-top:7px}
  .wk__row:hover .wk__name,.wk__row:hover .wk__rule{transform:none}
  .wk__peek{display:none}
}

/* ============================================================
   PROJECT PAGE  (work/*.html)
   ============================================================ */
.proj{background:var(--paper);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--paper);padding:12px 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

/* sticky chrome — back to work is always one click away */
.pnav{position:fixed;top:0;left:0;right:0;z-index:900;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:13px var(--pad);background:rgba(244,239,228,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.pnav__bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--oxblood);transform:scaleX(0);transform-origin:0 50%}
.pnav__back,.pnav__next{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.pnav__back span,.pnav__next span{transition:transform .5s var(--ease)}
.pnav__back:hover span{transform:translateX(-4px)}
.pnav__next{justify-self:end;text-align:right;opacity:.62;transition:opacity .4s}
.pnav__next:hover{opacity:1}
.pnav__next:hover span{transform:translateX(4px)}
.pnav__title{font-family:var(--serif);font-size:15px;letter-spacing:.01em;white-space:nowrap}

/* hero */
.phero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);color:var(--paper);padding:0 var(--pad) clamp(44px,8vh,96px)}
.phero__bg{position:absolute;inset:0;z-index:0;will-change:transform}
.phero__bg img{width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(.32) contrast(1.06)}
.phero__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(13,12,10,.78) 0%,rgba(13,12,10,.2) 42%,rgba(13,12,10,.9) 100%)}
.phero__inner{position:relative;z-index:2;width:100%}
.phero__crumb{display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-bottom:clamp(16px,3vh,30px)}
.phero__crumb a{color:inherit;border-bottom:1px solid rgba(244,239,228,.3)}
.phero h1{font-family:var(--serif);font-size:clamp(46px,10.5vw,152px);line-height:.9;font-weight:400;letter-spacing:-.025em}
.phero__rule{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.7vw,40px);line-height:1.14;margin-top:.42em;color:var(--seal-gold);max-width:22ch}
.phero__tags{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:clamp(22px,4vh,44px)}
.phero__tags span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line-inv);border-radius:40px;padding:7px 15px;opacity:.75}

/* summary + facts */
.psum{padding:clamp(60px,11vh,140px) var(--pad);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,96px);border-bottom:1px solid var(--line)}
.psum__lead{font-family:var(--serif);font-size:clamp(21px,2.5vw,36px);line-height:1.22;font-weight:400;letter-spacing:-.01em;max-width:22ch}
.psum__body{margin-top:clamp(18px,3vh,32px);font-size:15px;line-height:1.7;opacity:.78;max-width:58ch}
.pfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;align-content:start;margin:0}
.pfacts>div{border-top:1px solid var(--line);padding-top:11px}
.pfacts dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.48;margin-bottom:7px}
.pfacts dd{margin:0;font-size:14px;line-height:1.5}

/* chapters */
.pchap{padding:clamp(60px,11vh,140px) var(--pad);border-bottom:1px solid var(--line)}
.pchap__head{display:flex;gap:18px;align-items:baseline;margin-bottom:clamp(26px,4.5vh,58px)}
.pchap__n{font-size:11.5px;letter-spacing:.2em;opacity:.42;font-variant-numeric:tabular-nums}
.pchap__t{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.pcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4.5vw,76px)}
.pcols h3{font-family:var(--serif);font-size:clamp(22px,2.6vw,38px);font-weight:400;line-height:1.08;letter-spacing:-.01em;margin-bottom:15px}
.pcols p{font-size:15px;line-height:1.7;opacity:.78;max-width:52ch}
.pcols p+p{margin-top:1em}

/* the guideline — the one line the project runs on */
.prule{background:var(--ink);color:var(--paper);padding:clamp(80px,17vh,210px) var(--pad);text-align:center}
.prule__k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.48}
.prule blockquote{font-family:var(--serif);font-size:clamp(32px,6.4vw,100px);line-height:.98;font-weight:400;letter-spacing:-.025em;margin:.34em auto 0;max-width:17ch}
.prule figcaption{margin-top:clamp(20px,3.5vh,40px);font-size:13px;line-height:1.6;opacity:.55;max-width:46ch;margin-inline:auto}

/* gallery */
.pgal{padding:clamp(56px,10vh,130px) var(--pad);display:grid;gap:clamp(28px,6vh,90px);border-bottom:1px solid var(--line)}
.pfig{margin:0}
.pfig img{display:block;width:100%;object-fit:cover;filter:grayscale(.18) contrast(1.03)}
.pfig--full img{aspect-ratio:16/9}
.pfig--tall img{aspect-ratio:3/4}
.pfig__cap{display:flex;gap:14px;align-items:baseline;padding-top:13px;font-size:12.5px;line-height:1.5;opacity:.62}
.pfig__cap b{flex:0 0 auto;font-weight:400;opacity:.6;font-variant-numeric:tabular-nums;letter-spacing:.1em}
.pduo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,36px)}

/* outcome */
.pout{padding:clamp(60px,11vh,140px) var(--pad);border-bottom:1px solid var(--line)}
.pstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.4vw,56px);margin-bottom:clamp(40px,7vh,90px)}
.pstat{border-top:1px solid var(--line);padding-top:16px}
.pstat b{display:block;font-family:var(--serif);font-size:clamp(38px,6.4vw,88px);line-height:.92;font-weight:400;letter-spacing:-.02em}
.pstat span{display:block;margin-top:10px;font-size:12.5px;line-height:1.5;opacity:.62;max-width:26ch}
.pout__coda{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.4vw,56px)}
.pquote{grid-column:2/4;margin:0;max-width:46ch}
.pquote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.7vw,38px);line-height:1.2;font-weight:400}
.pquote figcaption{margin-top:16px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.5}

/* credits */
.pcred{padding:clamp(50px,9vh,110px) var(--pad)}
.pcred__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px 30px}
.pcred__grid>div{border-top:1px solid var(--line);padding-top:11px}
.pcred dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.48;margin-bottom:6px}
.pcred dd{margin:0;font-size:13.5px;line-height:1.6}

/* next project — never a dead end */
.pnext{position:relative;display:block;overflow:hidden;background:var(--ink);color:var(--paper);padding:clamp(70px,15vh,180px) var(--pad)}
.pnext__bg{position:absolute;inset:0;z-index:0;opacity:0;transform:scale(1.09);transition:opacity .9s var(--ease),transform 1.3s var(--ease)}
.pnext__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4)}
.pnext:hover .pnext__bg,.pnext:focus-visible .pnext__bg,.pnext:active .pnext__bg{opacity:.3;transform:scale(1)}
.pnext__inner{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.pnext__k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.pnext__n{display:block;font-family:var(--serif);font-size:clamp(40px,9vw,132px);line-height:.94;font-weight:400;letter-spacing:-.025em;margin-top:.14em;transition:transform .8s var(--ease)}
.pnext:hover .pnext__n{transform:translateX(clamp(8px,1.4vw,26px))}
.pnext__rule{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.7vw,23px);opacity:.6;max-width:26ch;text-align:right}
.pfoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;padding:24px var(--pad) 34px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}

@media (max-width:860px){
  .pnav{grid-template-columns:1fr auto;padding:11px var(--pad)}
  .pnav__title{display:none}
  .psum,.pcols,.pstats,.pduo,.pout__coda{grid-template-columns:minmax(0,1fr)}
  .pquote{grid-column:1}
  .pstats{gap:20px}
  .pnext__rule{text-align:left}
}

/* ---------- REVEAL DEFAULTS (pre-JS) ---------- */
[data-reveal]{opacity:0}
.reveal-lines{opacity:1}
/* if the interaction layer never boots, nothing may stay invisible */
.no-js [data-reveal]{opacity:1}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ============================================================
   MOBILE — a simpler cut of the same page (≤860px)

   Nothing here touches desktop. The rule is: anything that pins,
   scroll-jacks or depends on hover becomes ordinary vertical flow.
   Phones get the same content and the same type, in a shape a thumb
   can actually read.
   ============================================================ */
@media (max-width:860px){

  /* No scroll furniture on mobile — neither the native scrollbar nor the
     site's own progress rail. Scrolling itself is untouched; this only hides
     the indicators. */
  html{scrollbar-width:none;-ms-overflow-style:none}
  html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
  .scroll-ind{display:none}

  /* SERVICES — the horizontal rail becomes a plain stacked list.
     At 502px the 421px panels were clipping their own copy. */
  .svc__pin{height:auto;min-height:0;display:block;overflow:visible}
  .svc__track{flex-direction:column;padding-inline:0;transform:none!important;will-change:auto}
  .svc__intro{width:100%;padding:clamp(60px,10vh,90px) var(--pad) clamp(24px,4vh,40px)}
  /* "What / we / guide" is three lines of huge display type on a phone.
     Dropping the first break gives "What we / guide" without touching markup. */
  .svc__intro h2{font-size:clamp(44px,13vw,72px)}
  .svc__intro h2 br:first-of-type{display:none}
  .svc__drag{display:none}            /* nothing to drag any more */
  .svc__panel{width:100%;border-left:0;border-top:1px solid var(--line-inv);
    padding:clamp(30px,6vh,44px) var(--pad);min-height:0}
  .svc__panel h3{font-size:clamp(30px,8vw,44px);margin-top:.35em}
  .svc__panel p{font-size:15px;max-width:36ch}
  /* the plates are pacing for a horizontal rail; stacked they are just
     scroll between the things people came to read */
  .svc__panel--img{display:none}

  /* THE TOUCH — the whole fresco is visible at the start, then the zoom drives
     into the hands. `contain` is what makes the opening frame uncropped; the
     pan maths in app.js branches on the same condition (`isContain`), so the
     two must change together. The pin stays a full viewport tall — a shorter
     one leaves the section background showing as a black band. */
  .touch__img img{object-fit:contain;object-position:center}
  .touch__copy{align-self:center;margin-bottom:0}
  .touch__h{font-size:clamp(34px,10vw,56px)}

  /* PERSONA — width:100% plus margin:10px overflowed the padding box by 10px,
     which read as the plates being pushed right. */
  .work--persona .work__item--tall .work__media{
    width:calc(100% - 20px);
    margin:10px auto;
    outline-offset:6px;
  }

  /* JOURNAL — one card kept a tablet indent, and the three ran to different
     heights. On a phone they should read as one set. */
  .jrnl__cards li,
  .jrnl__cards li:nth-child(n){margin:0 0 clamp(18px,4vw,28px)}
  .jrnl__card,
  .jrnl__cards li:nth-child(n) .jrnl__card{transform:none;width:100%;min-height:240px;
    display:flex;flex-direction:column}
  .jrnl__card h3{flex:1 1 auto}
  .jrnl__rule{margin-top:auto}

  /* WHO WE ARE — no pin, no typewriter hold, no 5000px of empty scroll */
  .who__pin{min-height:0;padding:clamp(70px,11vh,100px) 0 clamp(24px,4vh,40px)}
  .who__type{font-size:clamp(21px,5.4vw,28px);line-height:1.35}
  .who__caret{display:none}

  /* PORTAL — keep the zoom, halve the scroll distance it costs */
  .portal{height:480vh}
  .portal__line{font-size:clamp(20px,6.4vw,34px);max-width:88vw}
  .portal__line--big{font-size:clamp(26px,9vw,46px)}

  /* MANIFESTO — the & sits mid-column on desktop where there is room beside
     the lines. Stacked, it landed on top of them; lift it clear of the list.
     (app.js drifts yPercent -44 -> -58 on scrub, so this only sets the anchor.) */
  .mani__amp{top:30%;width:min(58vw,300px);right:clamp(10px,3vw,28px);opacity:.55}

  /* The vertical rhythm is tuned for a tall desktop column — the caps
     (8.4vh, 5.2vh, 4vh) collapse on a phone and the six lines end up stacked
     almost solid. Give each one air and let the section grow past 100svh
     rather than squeezing the list to fit it. */
  .mani{min-height:auto;padding:clamp(84px,13vh,120px) var(--pad) clamp(70px,11vh,100px)}
  .mani__intro{font-size:clamp(20px,5.6vw,26px);margin-bottom:1.15em}
  .mani__line{font-size:clamp(25px,7vw,34px);line-height:1.18;padding:.3em 0}
  .mani__line em{font-size:.42em;margin-right:.45em}
  .mani__coda{margin-top:clamp(34px,6vh,54px);font-size:clamp(15px,4.2vw,18px);
    line-height:1.5;max-width:30ch}
  .mani__coda p{margin-bottom:.75em}
  .mani__yours{margin-top:1em}

  /* section headers were colliding with the fixed logo */
  .guide__head,.wk__head-top,.jrnl__head,.work__head{padding-top:clamp(56px,9vh,78px)}
  .guide__foot{margin-top:clamp(20px,4vh,32px)}

  /* "Back to top" is a desktop affordance — a thumb-flick already does it,
     and it crowds a three-item footer into an awkward wrap on a phone. */
  .footer a[href="#top"]{display:none}
  .footer{gap:10px;text-align:left}

  /* Contact details read as one column on a phone: Instagram, phone, location.
     Left as a wrapping row they sat two-abreast and the phone looked like a
     caption to the handle rather than its own line. */
  .contact__meta{flex-direction:column;align-items:flex-start;gap:12px}
  .contact__meta span,.contact__meta a{max-width:100%}
}

/* Phones proper — tighten the type that is still sized for a tablet */
@media (max-width:560px){
  .svc__intro h2{font-size:clamp(44px,16vw,64px)}
  .touch__h,.contact__big{font-size:clamp(40px,13vw,64px)}
  .mani__line{font-size:clamp(24px,7.4vw,38px)}
}

/* ------------------------------------------------------------------ */
/* skip the intro where it does not belong                             */
/* ------------------------------------------------------------------ */
/* The preloader is a desktop set piece; phones and reduced-motion skip it.
   This has to be decided in CSS. When app.js made the call, the overlay stayed
   over the hero and the scroll lock held until GSAP and Lenis had arrived from
   their CDNs — so on a slow connection Largest Contentful Paint was measuring
   the third-party scripts, not the page. A media query applies at first paint,
   before a single byte of JS, and nothing can strip it.

   Last in the file on purpose: these override .nav{opacity:0},
   body.is-loading{} and the inline scroll-boot lock, all of which exist only
   to be animated away by a script that may be seconds from running. */
@media (max-width:860px),(prefers-reduced-motion:reduce){
  .preloader{display:none}
  .nav{opacity:1}
  html.scroll-boot,html.scroll-boot body{overflow:visible!important;height:auto!important}
  html.scroll-boot body{position:static!important;inset:auto!important;width:auto!important}
  body.is-loading{overflow:visible;height:auto}
}