/* ══════════════════════════════════════════════════════════════════════
   MANZAR STUDIO — shared base
   ══════════════════════════════════════════════════════════════════════
   Lifted verbatim out of the homepage's inline <style> so that a Studio
   sub-page — /work.html today, whatever comes next — carries the same
   tokens, the same nav and the same footer as index.html rather than a
   near-copy that drifts. Section rules are deliberately not here: this
   is the chrome only. Two things the homepage still carries were left
   behind because nothing uses them any more: its [PH-*] placeholder
   boxes, and the five-link mobile overlay the shared .mzx menu replaced.

   Type: General Sans everywhere · Tanker only for the giant shout lines.
   If a token moves on index.html, move it here in the same commit.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- reset · tokens · primitives ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --frame:#131110;--frame-line:rgba(233,230,221,.14);
  --ink:#0B0A08;
  --panel:#161411;
  --bone:#E9E6DD;
  --bone-dim:#CBC7BA;
  --mut:#8A867B;
  --acc:#FF4B1F;
  --bg:var(--ink);
  --fg:var(--bone);
  --line:rgba(233,230,221,.14);
  --soft:rgba(233,230,221,.55);
  --pad:clamp(20px,4.2vw,72px);
  --disp:"General Sans","Inter","Helvetica Neue",Arial,sans-serif;
  --tank:"Tanker",Impact,sans-serif;
  --body:"General Sans","Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"General Sans","Inter","Helvetica Neue",Arial,sans-serif;
}
body[data-theme="bone"]{
  --frame:#E2DED1;--frame-line:rgba(11,10,8,.14);
  --bg:var(--bone);
  --fg:var(--ink);
  --line:rgba(11,10,8,.16);
  --soft:rgba(11,10,8,.6);
  --mut:#6E6A5E;
  --panel:#DEDACD;
}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .7s cubic-bezier(.6,0,.3,1),color .7s cubic-bezier(.6,0,.3,1);
  overflow-x:hidden;
}
::selection{background:var(--acc);color:var(--ink)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#3a372f;border-radius:6px;border:2px solid var(--ink)}
a{color:inherit;text-decoration:none}
img,svg,canvas,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.skip{position:fixed;left:-999px;top:8px;z-index:200;background:var(--acc);color:var(--ink);padding:8px 14px;font-family:var(--mono);font-size:12px}
.skip:focus{left:8px}
:focus-visible{outline:1.5px dashed var(--acc);outline-offset:3px}

/* ---------- primitives ---------- */
.shell{width:min(1720px,100% - var(--pad)*2);margin-inline:auto}
.eb{
  font-family:var(--mono);font-weight:600;font-size:clamp(13px,1vw,15.5px);letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg);opacity:.92;display:flex;align-items:center;
}
.mono{font-family:var(--mono);font-weight:600;font-size:clamp(12.5px,.95vw,15px);letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}
.hl{width:100%;height:1px;background:var(--line)}
.disp{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.82;letter-spacing:-.015em}
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:0;
  background:var(--fg);color:var(--bg);padding:16px 26px;border-radius:2px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .7s,color .7s;
  will-change:transform;white-space:nowrap;
}
.btn .arr{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.btn:hover .arr{transform:translate(3px,-3px)}
.oh{overflow:hidden;display:block}
.oh>.ohi{display:block;will-change:transform}
/* ---------- grain ---------- */
#cv-grain{position:fixed;inset:0;z-index:96;pointer-events:none;opacity:.07;mix-blend-mode:soft-light}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:90;mix-blend-mode:difference;color:#fff;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:16px var(--pad);
}
.nav-left{justify-self:start;display:flex;align-items:center;gap:clamp(14px,1.6vw,26px)}
/* The wordmark must never be the thing the flex algorithm sacrifices.
   Its only child is an <img> under the reset's max-width:100%, which
   gives .brand a min-content width of zero — so on a narrow screen the
   switch beside it won the space and the logo vanished entirely. */
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:clamp(26px,2.1vw,33px);width:auto;display:block}
.nav-links{justify-self:center;display:flex;gap:clamp(22px,1.562vw,40px);font-family:var(--body);font-weight:500;font-size:clamp(18px,1.42vw,22px);letter-spacing:-.022em}
.nav-links a{position:relative;padding:5px 0;opacity:.88;transition:opacity .35s}
.nav-links a:hover{opacity:1}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.6,0,.3,1)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{
  font-family:var(--body);font-weight:500;font-size:clamp(16px,1.2vw,18px);letter-spacing:-.015em;
  background:#fff;color:#000;padding:10px 10px 10px 24px;border-radius:9px;
  display:inline-flex;gap:14px;align-items:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.nav-cta:hover{transform:translateY(-2px)}
.nav-cta .arr{
  width:36px;height:36px;border-radius:7px;background:#0B0A08;color:#fff;
  display:grid;place-items:center;font-size:13px;transition:transform .3s;
}
.nav-cta:hover .arr{transform:translate(1px,-1px)}
/* world switch: our type and palette, not his. Sits inside the difference-blended
   nav so it stays legible over both the dark hero and the bone sections. */
.nav-right{justify-self:end;display:flex;align-items:center;gap:clamp(10px,1.1vw,18px)}
.mz-switch{display:inline-flex;align-items:center;gap:3px;padding:3px;border-radius:100px;border:1px solid rgba(255,255,255,.4)}
.mz-sw-opt{
  font-family:var(--body);font-weight:500;font-size:clamp(14.5px,1.1vw,16.5px);letter-spacing:-.01em;
  padding:9px 22px;border-radius:100px;color:#fff;opacity:.7;
  transition:opacity .3s,background-color .35s cubic-bezier(.16,1,.3,1),color .35s;
}
.mz-sw-opt:hover{opacity:1}
.mz-sw-opt.is-on{background:#fff;color:#000;opacity:1}

/* menu trigger, always available */
/* ── the menu trigger ─────────────────────────────────────────
   It was two bare rules and a word, laid out by an inline-flex with
   gap:9px — so the two lines sat side by side and the control read as
   "— — Menu", a pair of stray dashes rather than a menu.

   Now it is the sibling of the two other controls in this system: the
   "Start a project" pill and the menu's own Close button. Label first,
   then a square chip holding the stacked rules. The chip inverts on
   hover and the short rule runs out to full width. */
/* ── the menu trigger ──────────────────────────────────────────
   It sits directly beside "Tell us your story" and was built to none
   of its measurements: 46px tall against 56, a full 100px pill against
   a 9px squircle, a round icon chip against a square one, 16px type
   against 18. Two buttons an inch apart, agreeing on nothing. On top of
   that the two rules inside were 15px and 9px, flush right, then nudged
   left by a margin — which is why the chip read as a pair of stray
   dashes rather than a menu.

   It is now the same control, outlined instead of filled: same height,
   same corner radius, same chip geometry, same type. The rules are
   equal, centred, and on hover the chip fills and they invert. */
/* ---------- the menu trigger ----------
   Back to the pill. The rounded-rectangle version with the solid white
   chip read as a second CTA sitting next to the real one, and the two
   rules parting vertically read as the control coming to pieces.

   This is the button as it was, at the CTA's height so the pair finally
   lines up: an outlined pill, a soft translucent disc, two rules hung
   off the right edge. On hover the short rule runs out to meet the long
   one — arriving a beat later, which is the whole character of it — and
   the disc lifts a shade. Nothing moves that does not mean something.

   Whole pixels throughout: a 42px disc holding 2 + 6 + 2 puts the stack
   at y=16, and the rules end at x=30 and start at 12 and 19. Nothing
   straddles a pixel, so neither rule renders lighter than the other —
   which is what the "bottom line's weight" was. */
/* ---------- the menu trigger — v6, "the plate" ----------
   Rectangular, because the silhouette was never what was wrong with it.
   What was wrong is that the outline was one flat hairline and the chip
   was one flat white box, so the control read as DRAWN rather than made.
   Three changes carry it:

   1  The edge is layered, not stroked. A 1px inset ring plus a brighter
      catch along the top — the same move the work cards use for their
      bezel. It reads as a plate with a lit edge instead of a rectangle
      somebody put a border on.

   2  The corners are concentric. The chip is inset 8px and rounded 8px,
      so the shell is rounded 16px, and the two curves stay parallel the
      whole way round. When they are not — a 7px chip in a 9px shell —
      the inner corner visibly pinches against the outer one, which is
      what makes a nested rectangle look cheap without anyone being able
      to name why.

   3  The rules trade places. At rest the long one is on top; on hover
      they swap, the lower arriving a beat after the upper. Both ends of
      that are a legible menu mark, so it reads as a mechanism turning
      over rather than an icon coming apart — which was the complaint
      about the version that pulled them vertically.

   Whole pixels throughout: 2 + 6 + 2 in a 40px chip puts the stack at
   y=15, and the rules run to x=29 from 11 and 18. Nothing straddles a
   pixel, so neither rule can render lighter than its partner. */
.menu-btn{
  display:inline-flex;align-items:center;gap:16px;
  height:56px;padding:0 8px 0 24px;
  border:0;border-radius:16px;
  background:rgba(255,255,255,.04);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.2),
    inset 0 1px 0 rgba(255,255,255,.13);
  cursor:pointer;color:#fff;
  font-family:var(--body);font-weight:500;
  font-size:clamp(16px,1.2vw,18px);letter-spacing:-.015em;
  transition:background-color .45s cubic-bezier(.22,1,.36,1),
             box-shadow .45s cubic-bezier(.22,1,.36,1),
             transform .3s cubic-bezier(.34,1.56,.64,1);
}
.menu-btn:hover{
  background:rgba(255,255,255,.085);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42),
    inset 0 1px 0 rgba(255,255,255,.26);
}
.menu-btn:active{transform:translateY(1px)}
.menu-btn:focus-visible{outline:1.5px dashed #fff;outline-offset:3px}
.menu-btn-label{line-height:1}
/* Bone, not #fff. The chip is a piece of the site's own paper sitting
   in the nav; pure white beside the CTA's pure white body welds the two
   controls into one bright object at a glance. */
.menu-btn-icon{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;
  width:40px;height:40px;padding-right:11px;border-radius:8px;
  background:#E9E6DD;
  transition:background-color .45s cubic-bezier(.22,1,.36,1);
}
.menu-btn:hover .menu-btn-icon{background:#fff}
.menu-btn-icon i{
  display:block;height:2px;border-radius:1px;background:#0B0A08;
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.menu-btn-icon i:nth-child(1){width:18px}
.menu-btn-icon i:nth-child(2){width:11px}
/* the delay sits on the hover rule only, so the pair goes out staggered
   and comes home together — a lag on the way back just reads as lag */
.menu-btn:hover .menu-btn-icon i:nth-child(1){width:11px}
.menu-btn:hover .menu-btn-icon i:nth-child(2){width:18px;transition-delay:.07s}
@media (max-width:1100px){.nav-links{display:none}.nav .nav-cta{display:none}}
/* On a phone the three-column grid has nothing to give: wordmark,
   world switch and menu button together are wider than the screen, and
   something has to lose. It is the switch — the menu sheet carries the
   same Studio/Labs control one tap away, and the nav's job here is to
   say where you are and how to get out. */
@media (max-width:560px){
  .nav{
    display:flex;justify-content:space-between;align-items:center;
    gap:12px;padding:12px var(--pad);
  }
  .nav .mz-switch{display:none}
  .menu-btn{height:48px;padding:0 7px 0 19px;gap:12px;font-size:15.5px;border-radius:14px}
  .menu-btn-icon{width:34px;height:34px;padding-right:9px;border-radius:7px}
  .menu-btn-icon i:nth-child(1){width:16px}
  .menu-btn-icon i:nth-child(2){width:10px}
  .menu-btn:hover .menu-btn-icon i:nth-child(1){width:10px}
  .menu-btn:hover .menu-btn-icon i:nth-child(2){width:16px}
}


/* ---------- footer ---------- */
.foot{position:relative;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,4vw,90px);padding:clamp(60px,9vh,110px) 0 clamp(40px,7vh,80px)}
.fnav{display:flex;flex-direction:column}
.fnav a{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--body);font-weight:500;text-transform:none;
  font-size:clamp(28px,2.266vw,58px);line-height:1;letter-spacing:-.024em;
  padding:clamp(15px,2.7vh,28px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .4s cubic-bezier(.2,.8,.2,1);
}
.fnav a .fa{font-size:.55em;opacity:0;transform:translateX(-14px);transition:opacity .35s,transform .35s;color:var(--acc)}
.fnav a:hover{padding-left:18px}
.fnav a:hover .fa{opacity:1;transform:none}
.fcol{display:flex;flex-direction:column;gap:clamp(26px,4vh,44px);padding-top:8px}
.fblock{display:flex;flex-direction:column;gap:11px}
.fblock .fb-lab{font-family:var(--mono);font-weight:600;font-size:clamp(12px,.9vw,14px);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.fblock a.femail{font-family:var(--body);font-weight:600;font-size:clamp(19px,1.094vw,28px);text-transform:none;letter-spacing:-.015em;position:relative;width:max-content}
.fblock a.femail::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--acc);transform:scaleX(1);transform-origin:left;transition:transform .4s}
.fblock a.femail:hover::after{transform:scaleX(.35)}
.fblock p{color:var(--mut);font-size:15px;line-height:1.6}
.fsoc{display:flex;flex-direction:column;gap:10px}
.fsoc a{font-family:var(--body);font-weight:500;font-size:15px;color:var(--soft);width:max-content;transition:color .3s}
.fsoc a:hover{color:var(--fg)}
.foot-meta{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 0 26px;border-top:1px solid var(--line);font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;color:var(--mut)}
.foot-meta .fm-clock{font-variant-numeric:tabular-nums}
.totop{display:inline-flex;gap:8px;align-items:center;color:var(--soft);transition:color .3s}
.totop:hover{color:var(--fg)}
.foot-band{position:relative;height:clamp(260px,38vh,480px);overflow:hidden;background:var(--ink)}
#cv-band{position:absolute;inset:0;width:100%;height:100%}
.band-in{position:absolute;inset:0;padding:0 var(--pad)}
.band-logo{position:absolute;left:var(--pad);top:clamp(22px,4.5vh,46px);height:clamp(44px,7vw,96px)}
.band-logo img{height:100%;width:auto;display:block}
.band-tag{
  position:absolute;right:var(--pad);bottom:clamp(18px,4.5vh,42px);
  font-family:var(--mono);font-weight:500;font-size:clamp(10.5px,.9vw,13px);letter-spacing:.18em;text-transform:uppercase;text-align:right;
  color:var(--ink);line-height:2.1;
}


/* ---------- sound toggle ----------
   Lifted from index.html's own inline block. It was only ever defined
   there, so on a sub-page the toggle rendered completely unstyled: an
   in-flow inline-block at the end of <body>, which put a 24px line box
   under the footer and left a black band across the bottom of the page
   with nothing in it. Fixed here means fixed on every page that loads
   this file. */
/* Manzar sound toggle — four hairline bars, fixed bottom-centre,
   difference-blended. Engine: assets/js/mz-sound.js */
.mz-sndtgl{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:1200;display:flex;align-items:flex-end;justify-content:center;gap:3px;width:48px;height:36px;padding:10px 14px;background:none;border:0;cursor:pointer;mix-blend-mode:difference;opacity:.55;transition:opacity .3s ease}
.mz-sndtgl:hover,.mz-sndtgl:focus-visible{opacity:1}
.mz-sndtgl:focus-visible{outline:1px solid #fff;outline-offset:4px;border-radius:6px}
.mz-sndtgl i{width:2px;height:3px;background:#fff;border-radius:1px;transition:height .35s ease}
.mz-sndtgl.is-on i{animation:mzBar .9s ease-in-out infinite alternate}
.mz-sndtgl.is-on i:nth-child(2){animation-delay:.2s}
.mz-sndtgl.is-on i:nth-child(3){animation-delay:.4s}
.mz-sndtgl.is-on i:nth-child(4){animation-delay:.6s}
@keyframes mzBar{from{height:3px}to{height:13px}}
@media (prefers-reduced-motion: reduce){.mz-sndtgl.is-on i{animation:none;height:9px}}
.mz-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:60px;z-index:1200;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;opacity:0;pointer-events:none;transition:opacity .35s ease}
.mz-toast.is-in{opacity:.85}

/* A page rendered inside the other world's preview plate is scenery.
   mz-sound.js marks it and plays nothing (see the guard at the top of
   that file); this takes the fixed sound chrome out of the picture too,
   so a stray toggle does not float in the middle of the plate. */
html.is-framed .mz-sndtgl,
html.is-framed .mz-toast{display:none!important}


/* ---------- responsive (the chrome's share of it) ---------- */
@media (max-width:1024px){
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .nav-links{display:none}
  .nav .nav-cta{display:none}
  .menu-btn{display:inline-flex}
  .band-logo{height:clamp(34px,10vw,54px)}
  .band-tag{font-size:9.5px;letter-spacing:.12em}
}
/* reduced motion: kill the theatrics, keep the content */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}