/* ==========================================================================
   TEATRO V3 · VARIATION B · LIVE CANVAS
   --------------------------------------------------------------------------
   The site is the agency's working canvas: dot-grid board, artboards with
   live labels, rulers, a tool dock, oxblood selection. Precise, digital,
   typographic (Poppins — the face of the Teatro profile deck).

   Authoring rule (same as Variation A): resting states live in CSS; JS only
   animates towards them. `.js:not(.reduced)` gates every pre-build state.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  --paper-0:#FBF7F4;  --paper-50:#F4EDEA; --paper-100:#EDE4E0; --paper-200:#E4D8D3; --paper-300:#D8C9C4;
  --ink-900:#14100F;  --ink-700:#3A3230;  --ink-500:#6B605D;   --ink-300:#A39692;
  --red-300:#C4424E;  --red-400:#9E2C35;  --red-500:#83242C;   --red-600:#5A161D; --red-700:#3E0F14;

  --sans:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --bar:52px;
  --rule:20px;
  --pad:clamp(16px, 3.6vw, 56px);
  --ab-pad:clamp(24px, 5vw, 80px);
  --ease:cubic-bezier(.2, .8, .2, 1);
  --snap:cubic-bezier(.3, 1.4, .5, 1);

  --shadow-ab:0 0 0 1px var(--paper-200), 0 1px 2px rgb(20 16 15 / .04), 0 24px 48px -32px rgb(20 16 15 / .28);
  --shadow-ui:0 0 0 1px var(--paper-200), 0 10px 26px -12px rgb(20 16 15 / .22);
  --dots:radial-gradient(circle at 1px 1px, rgb(163 150 146 / .5) 1px, transparent 1.3px);
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--bar) + var(--rule) + 40px); }
.reduced{ scroll-behavior:auto; }
body{
  font:400 1rem/1.72 var(--sans); color:var(--ink-500);
  background-color:var(--paper-50); background-image:var(--dots); background-size:22px 22px;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
  padding-top:calc(var(--bar) + var(--rule)); padding-left:var(--rule);
}
img, svg, video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button, input{ font:inherit; color:inherit; }
ul, ol{ list-style:none; }
h1, h2, h3{ color:var(--ink-900); font-weight:600; }
em{ font-style:normal; color:var(--red-500); }
:where(a, button, input, [tabindex]):focus-visible{ outline:2px solid var(--red-500); outline-offset:3px; border-radius:3px; }
::selection{ background:var(--red-500); color:var(--paper-0); }
.mono{ font-family:var(--mono); letter-spacing:0; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; left:16px; top:-60px; z-index:300; background:var(--ink-900); color:var(--paper-0); padding:.7rem 1rem; border-radius:6px; text-decoration:none; transition:top .2s; }
.skip:focus{ top:12px; }
.pill{ display:inline-block; padding:2px 7px; border-radius:4px; background:var(--red-500); color:var(--paper-0); font:500 .66rem/1.5 var(--mono); white-space:nowrap; }

.kicker{ display:flex; align-items:center; gap:8px; margin-bottom:22px; font-size:.76rem; color:var(--red-500); }
.kicker::before{ content:''; width:9px; height:9px; border:1.5px solid currentColor; border-radius:2px; }
.title{ font:600 clamp(2.2rem, 4.6vw, 4.3rem)/1.02 var(--sans); letter-spacing:-.045em; }
.head{ margin-bottom:clamp(28px, 4vw, 48px); }
.head--split{ display:grid; grid-template-columns:1.25fr .75fr; gap:32px; align-items:end; }
.head__aside{ max-width:38ch; justify-self:end; }
.note{ margin-top:26px; padding:4px 0 4px 18px; border-left:2px solid var(--red-500); font:500 1.08rem/1.5 var(--sans); color:var(--ink-900); }

/* ---------- 3. Buttons: components that show their handles on hover ------ */
.btn{
  --h:var(--red-500);
  position:relative; display:inline-flex; align-items:center; gap:.6em; padding:.9rem 1.35rem; border-radius:8px;
  font:500 .92rem/1 var(--sans); text-decoration:none; cursor:pointer; border:0;
  transition:background-color .25s, color .25s, box-shadow .25s, transform .2s var(--ease);
}
.btn::after{  /* selection rectangle */
  content:''; position:absolute; inset:-7px; border:1px solid var(--h); border-radius:2px; pointer-events:none;
  opacity:0; transform:scale(.94); transition:opacity .2s, transform .35s var(--snap);
}
.btn::before{  /* four corner handles, centred on the rectangle's corners */
  content:''; position:absolute; inset:-10px; pointer-events:none; opacity:0; transform:scale(.94); transition:opacity .2s, transform .35s var(--snap);
  background:
    linear-gradient(var(--h) 0 0) 0 0 / 7px 7px no-repeat,
    linear-gradient(var(--h) 0 0) 100% 0 / 7px 7px no-repeat,
    linear-gradient(var(--h) 0 0) 0 100% / 7px 7px no-repeat,
    linear-gradient(var(--h) 0 0) 100% 100% / 7px 7px no-repeat;
}
.btn:hover::after, .btn:focus-visible::after{ opacity:1; transform:none; }
.btn:hover::before, .btn:focus-visible::before{ opacity:1; transform:none; }
.btn:active{ transform:translateY(1px) scale(.985); }
.btn--solid{ background:var(--red-500); color:var(--paper-0); }
.btn--solid:hover{ background:var(--red-600); }
.btn--line{ color:var(--ink-900); box-shadow:inset 0 0 0 1.5px var(--ink-900); }
.btn--line:hover{ background:var(--ink-900); color:var(--paper-0); }
.btn--big{ padding:1.15rem 1.7rem; font-size:1.02rem; }

/* ---------- 4. Selection handles (shared by .select and .sel-local) ---- */
.select i, .sel-local i{ position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; background:var(--paper-0); border:1px solid var(--red-500); }
.select i:nth-child(1), .sel-local i:nth-child(1){ left:0; top:0; }
.select i:nth-child(2), .sel-local i:nth-child(2){ left:50%; top:0; }
.select i:nth-child(3), .sel-local i:nth-child(3){ left:100%; top:0; }
.select i:nth-child(4), .sel-local i:nth-child(4){ left:100%; top:50%; }
.select i:nth-child(5), .sel-local i:nth-child(5){ left:100%; top:100%; }
.select i:nth-child(6), .sel-local i:nth-child(6){ left:50%; top:100%; }
.select i:nth-child(7), .sel-local i:nth-child(7){ left:0; top:100%; }
.select i:nth-child(8), .sel-local i:nth-child(8){ left:0; top:50%; }

/* ---------- 5. App chrome ------------------------------------------------ */
.bar{
  position:fixed; inset:0 0 auto; height:var(--bar); z-index:60; display:flex; align-items:center; gap:20px; padding:0 14px 0 18px;
  background:rgb(251 247 244 / .94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--paper-200);
}
.bar__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink-900); flex:none; }
.bar__mark{ width:36px; aspect-ratio:176.6 / 140.4; fill:var(--red-500); }
.bar__name{ font:600 1.02rem/1 var(--sans); letter-spacing:-.02em; }
.bar__file{ font:400 .78rem/1 var(--mono); color:var(--ink-500); }
.bar__tabs{ margin-inline:auto; display:flex; gap:2px; }
.bar__tabs a{ padding:.5rem .85rem; border-radius:6px; font:500 .84rem/1 var(--sans); color:var(--ink-700); text-decoration:none; transition:background-color .2s, color .2s; }
.bar__tabs a:hover{ background:var(--paper-100); }
.bar__tabs a.is-on{ background:rgb(131 36 44 / .09); color:var(--red-500); }
.bar__right{ display:flex; align-items:center; gap:14px; flex:none; margin-left:auto; }
.bar__tabs + .bar__right{ margin-left:0; }
.bar__avatars{ display:flex; }
.bar__avatars span{ width:28px; height:28px; margin-left:-7px; border-radius:50%; display:grid; place-items:center; background:var(--c); color:var(--paper-0); border:2px solid var(--paper-0); font:600 .58rem/1 var(--sans); letter-spacing:.04em; }
.bar__cta{ padding:.62rem 1rem; font-size:.84rem; }
.bar__menu{ display:none; }

.ruler{ position:fixed; z-index:55; background:var(--paper-0); pointer-events:none; }
.ruler--x{
  top:var(--bar); left:0; right:0; height:var(--rule); border-bottom:1px solid var(--paper-200);
  background-image:linear-gradient(90deg, var(--paper-0) 0 var(--rule), transparent var(--rule)), repeating-linear-gradient(90deg, var(--ink-300) 0 1px, transparent 1px 100px), repeating-linear-gradient(90deg, var(--paper-300) 0 1px, transparent 1px 10px);
  background-size:100% 100%, 100% 10px, 100% 5px; background-position:0 0, var(--rule) 100%, var(--rule) 100%; background-repeat:no-repeat, repeat-x, repeat-x;
}
.ruler--x .ruler__n{ position:absolute; top:2px; font:400 .56rem/1 var(--mono); color:var(--ink-300); translate:3px 0; }
.ruler--y{ top:calc(var(--bar) + var(--rule)); bottom:0; left:0; width:var(--rule); border-right:1px solid var(--paper-200); overflow:hidden; }
.ruler__ticks{
  position:absolute; left:0; right:0; top:0; height:calc(100% + 100px); will-change:transform;
  background-image:repeating-linear-gradient(180deg, var(--ink-300) 0 1px, transparent 1px 100px), repeating-linear-gradient(180deg, var(--paper-300) 0 1px, transparent 1px 10px);
  background-size:10px 100%, 5px 100%; background-position:100% 0, 100% 0; background-repeat:repeat-y;
}
.ruler__mark{ position:absolute; background:var(--red-500); opacity:0; transition:opacity .2s; }
.ruler--x .ruler__mark{ top:0; bottom:0; width:1px; left:0; }
.ruler--y .ruler__mark{ left:0; right:0; height:1px; top:0; }
.has-pointer .ruler__mark{ opacity:1; }

.dock{
  position:fixed; left:50%; bottom:18px; translate:-50% 0; z-index:60; display:flex; align-items:center; gap:3px; padding:5px;
  background:var(--paper-0); border-radius:12px; box-shadow:var(--shadow-ui);
}
.tool{ width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--ink-700); cursor:pointer; transition:background-color .2s, color .2s; }
.tool svg{ width:19px; height:19px; fill:currentColor; stroke:currentColor; }
.tool:hover{ background:var(--paper-100); }
.tool.is-on{ background:var(--red-500); color:var(--paper-0); }
.tool--text{ width:auto; padding:0 12px; font:500 .8rem/1 var(--sans); }
.dock__sep{ width:1px; height:22px; background:var(--paper-200); margin:0 4px; }
.dock__zoom{ padding:0 10px 0 6px; font:400 .72rem/1 var(--mono); color:var(--ink-500); }

.scenes{ position:fixed; left:50%; bottom:74px; translate:-50% 0; z-index:61; width:min(300px, calc(100vw - 32px)); padding:10px; background:var(--paper-0); border-radius:12px; box-shadow:var(--shadow-ui); }
.scenes[hidden]{ display:none; }
.scenes__head{ padding:4px 8px 8px; font-size:.7rem; color:var(--ink-500); }
.scenes__list a{ display:flex; gap:12px; padding:.5rem .6rem; border-radius:6px; text-decoration:none; font:500 .88rem/1.2 var(--sans); color:var(--ink-900); }
.scenes__list a:hover, .scenes__list a:focus-visible{ background:rgb(131 36 44 / .08); color:var(--red-500); }
.scenes__list i{ font:400 .72rem/1.6 var(--mono); font-style:normal; color:var(--ink-300); }

.doodle{ position:fixed; inset:0; z-index:58; pointer-events:none; width:100vw; height:100vh; }
.pen-on .doodle{ pointer-events:auto; cursor:crosshair; touch-action:none; }
.scan{ position:fixed; left:0; right:0; top:0; height:80px; z-index:57; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, rgb(131 36 44 / .07) 70%, var(--red-500) 70%, var(--red-500) calc(70% + 2px), transparent calc(70% + 2px)); }
.inspect{ position:fixed; left:0; top:0; z-index:56; pointer-events:none; border:1px solid var(--red-500); opacity:0; transition:opacity .12s; }
.inspect.is-on{ opacity:1; }
.inspect__tag{ position:absolute; left:-1px; bottom:calc(100% + 4px); padding:2px 7px; border-radius:3px; background:var(--red-500); color:var(--paper-0); font:500 .66rem/1.5 var(--mono); white-space:nowrap; }
.select{ position:fixed; left:0; top:0; z-index:57; pointer-events:none; border:1px solid var(--red-500); opacity:0; }
.select.is-on{ opacity:1; }
.select__dims{ position:absolute; left:50%; top:calc(100% + 10px); translate:-50% 0; }
.toast{ position:fixed; left:50%; bottom:80px; translate:-50% 20px; z-index:62; padding:.55rem .9rem; border-radius:8px; background:var(--ink-900); color:var(--paper-0); font:500 .78rem/1 var(--mono); opacity:0; pointer-events:none; transition:opacity .25s, translate .35s var(--snap); }
.toast.is-on{ opacity:1; translate:-50% 0; }

/* ---------- 6. Artboards ------------------------------------------------- */
main{ padding:72px var(--pad) 24px; }
.ab{ position:relative; max-width:1320px; margin:0 auto clamp(90px, 10vw, 140px); padding:var(--ab-pad); background:var(--paper-0); box-shadow:var(--shadow-ab); }
.ab--last{ margin-bottom:60px; }
.ab__label, .ab__dims{ position:absolute; bottom:calc(100% + 9px); font:400 .74rem/1 var(--mono); white-space:nowrap; }
.ab__label{ left:0; color:var(--ink-700); display:flex; align-items:center; gap:7px; }
.ab__label::before{ content:'#'; color:var(--ink-300); }
.ab__dims{ right:0; color:var(--ink-300); font-variant-numeric:tabular-nums; }
.ab.is-live .ab__label{ color:var(--red-500); }
.no-js .ab::before{ content:attr(data-scene); position:absolute; left:0; bottom:calc(100% + 9px); font:400 .74rem/1 var(--mono); color:var(--ink-700); }
.ab__frame{ position:absolute; inset:0; pointer-events:none; z-index:4; }
.ab__frame i{ position:absolute; background:var(--red-500); }
.ab__frame i:nth-child(1){ left:0; top:0; width:100%; height:1px; transform-origin:0 50%; }
.ab__frame i:nth-child(2){ right:0; top:0; width:1px; height:100%; transform-origin:50% 0; }
.ab__frame i:nth-child(3){ right:0; bottom:0; width:100%; height:1px; transform-origin:100% 50%; }
.ab__frame i:nth-child(4){ left:0; bottom:0; width:1px; height:100%; transform-origin:50% 100%; }
.ab__wires{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.wire{ position:absolute; border:1px dashed rgb(131 36 44 / .55); border-radius:3px; }
.wire--img{ background:
  linear-gradient(to top right, transparent calc(50% - .6px), rgb(131 36 44 / .35) 50%, transparent calc(50% + .6px)),
  linear-gradient(to bottom right, transparent calc(50% - .6px), rgb(131 36 44 / .35) 50%, transparent calc(50% + .6px)),
  rgb(131 36 44 / .03); }
.wire__bar{ position:absolute; left:0; height:38%; max-height:14px; border-radius:3px; background:var(--paper-200); transform-origin:0 50%; }
.wire__tag{ position:absolute; left:-1px; top:-19px; padding:1px 6px; border-radius:3px 3px 0 0; background:rgb(131 36 44 / .85); color:var(--paper-0); font:500 .6rem/1.5 var(--mono); }
.wire__render{ position:absolute; top:-4px; bottom:-4px; width:2px; left:0; background:var(--red-500); box-shadow:0 0 0 3px rgb(131 36 44 / .12); }

/* Collaborator cursors & local selections (inside an artboard). */
.collab{ position:absolute; left:0; top:0; z-index:12; pointer-events:none; will-change:transform; }
.collab svg{ width:17px; height:21px; fill:var(--c); stroke:var(--paper-0); stroke-width:1.3; filter:drop-shadow(0 2px 3px rgb(20 16 15 / .3)); }
.collab__name{ position:absolute; left:13px; top:19px; padding:3px 8px; border-radius:2px 8px 8px 8px; background:var(--c); color:var(--paper-0); font:500 .66rem/1.4 var(--sans); white-space:nowrap; }
.sel-local{ position:absolute; z-index:11; pointer-events:none; border:1px solid var(--c, var(--red-500)); }
.sel-local i{ border-color:var(--c, var(--red-500)); }
.marq{ position:absolute; z-index:11; pointer-events:none; border:1px solid var(--red-500); background:rgb(131 36 44 / .06); }
.guide{ position:absolute; z-index:11; pointer-events:none; background:var(--red-500); }
.guide--h{ height:1px; }
.guide--v{ width:1px; }
.gap-tag{ position:absolute; z-index:11; pointer-events:none; }

/* ---------- 7. 01 · Hero ------------------------------------------------- */
.ab--hero{ padding-block:clamp(40px, 6vw, 90px); }
.hero{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(28px, 5vw, 80px); align-items:center; min-height:min(720px, calc(100svh - 230px)); }
.hero__title{ font:600 clamp(3rem, 6.9vw, 7.2rem)/.95 var(--sans); letter-spacing:-.055em; }
.hero__title .w{ display:inline-block; }
.hero__title .w--accent{ color:var(--red-500); }
.hero__title .w--accent{ transition:color .35s; text-decoration:underline 0.06em transparent; text-underline-offset:.1em; }
.hero__title .w--accent.is-swapped{ color:var(--ink-900); text-decoration-color:var(--red-500); transition:color .35s, text-decoration-color .35s; }
.caret{ display:inline-block; width:.06em; min-width:3px; height:.82em; margin-left:.04em; vertical-align:-.04em; background:var(--red-500); opacity:0; }
.caret.is-on{ opacity:1; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.hero__lead{ margin-top:28px; max-width:30ch; font-size:clamp(1.05rem, 1.4vw, 1.3rem); line-height:1.55; color:var(--ink-700); }
.hero__actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; }
.swatches{ margin-top:48px; display:flex; gap:22px; flex-wrap:wrap; }
.swatches li{ display:flex; align-items:center; gap:9px; font-size:.74rem; color:var(--ink-500); }
.swatches li::before{ content:''; width:20px; height:20px; border-radius:50%; background:var(--sw); box-shadow:0 0 0 1px var(--paper-300); }
.hero__frame{ position:relative; aspect-ratio:4 / 5; width:100%; max-width:520px; justify-self:end; background:var(--paper-50); }
.hero__frame picture{ display:contents; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:36% 50%; }
.frame-ph{ position:absolute; inset:0; display:grid; place-items:center; border:1px dashed var(--ink-300);
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), var(--paper-300) 50%, transparent calc(50% + .6px)),
    linear-gradient(to bottom right, transparent calc(50% - .6px), var(--paper-300) 50%, transparent calc(50% + .6px)); }
.frame-ph span{ padding:3px 8px; background:var(--paper-0); border-radius:4px; font-size:.72rem; color:var(--ink-500); }
.ghosts{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:12; }

/* ---------- 8. 02 · About ------------------------------------------------ */
.about{ display:grid; grid-template-columns:1fr 280px; gap:clamp(28px, 5vw, 80px); align-items:start; }
.about__main{ position:relative; }
.about__title{ font:600 clamp(2.2rem, 4.9vw, 4.7rem)/1.03 var(--sans); letter-spacing:-.045em; max-width:17ch; }
.about__title .sw{ display:inline-block; will-change:transform; }
.about__body{ margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:780px; }
.props{ position:sticky; top:calc(var(--bar) + var(--rule) + 30px); border-radius:10px; background:var(--paper-0); box-shadow:var(--shadow-ui); font-size:.84rem; overflow:hidden; }
.props__head{ padding:12px 14px; font-size:.72rem; color:var(--ink-900); border-bottom:1px solid var(--paper-100); }
.props dl div{ display:flex; justify-content:space-between; align-items:center; padding:9px 14px; border-bottom:1px solid var(--paper-100); }
.props dt{ color:var(--ink-500); }
.props dd{ display:flex; align-items:center; gap:7px; font:400 .8rem/1 var(--mono); color:var(--ink-900); }
.chip-sw{ width:14px; height:14px; border-radius:3px; background:var(--sw); }
.props__foot{ padding:10px 14px; font-size:.68rem; color:var(--red-500); }

/* ---------- 9. 03 · Behind the scenes (outline lens) --------------------- */
.behind{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(28px, 5vw, 80px); align-items:center; }
.behind__lead{ margin:22px 0 16px; font-size:1.12rem; line-height:1.6; color:var(--ink-900); }
.lens-stage{ --x:-999px; --y:-999px; --r:0px; position:relative; aspect-ratio:1600 / 873; overflow:hidden; border-radius:4px; background:var(--ink-900); cursor:crosshair; }
.lens-stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lens-stage__sketch{ clip-path:circle(var(--r) at var(--x) var(--y)); }
.lens{ position:absolute; left:0; top:0; width:calc(var(--r) * 2); height:calc(var(--r) * 2); border-radius:50%; translate:calc(var(--x) - var(--r)) calc(var(--y) - var(--r)); box-shadow:0 0 0 1.5px var(--red-500), 0 0 0 6px rgb(251 247 244 / .35); pointer-events:none; }
.lens__tag{ position:absolute; left:50%; top:calc(100% + 8px); translate:-50% 0; padding:2px 7px; border-radius:4px; background:var(--red-500); color:var(--paper-0); font-size:.62rem; white-space:nowrap; }
.lens-stage figcaption{ position:absolute; left:12px; bottom:12px; padding:4px 9px; border-radius:4px; background:rgb(251 247 244 / .92); font-size:.68rem; color:var(--ink-700); }
.no-js .lens, .reduced .lens{ display:none; }

/* ---------- 10. 04 · Identity (inspector) -------------------------------- */
.identity{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px, 5vw, 80px); align-items:center; }
.identity__sub{ margin:20px 0 14px; font:500 1.2rem/1.45 var(--sans); color:var(--ink-900); }
.inspector{ border-radius:12px; background:var(--paper-0); box-shadow:var(--shadow-ui); overflow:hidden; }
.inspector__tools{ display:flex; gap:4px; padding:8px; border-bottom:1px solid var(--paper-100); }
.seg{ padding:.5rem .95rem; border:0; border-radius:6px; background:transparent; font:500 .84rem/1 var(--sans); color:var(--ink-700); cursor:pointer; transition:background-color .2s, color .2s; }
.seg:hover{ background:var(--paper-100); }
.seg[aria-pressed="true"]{ background:var(--ink-900); color:var(--paper-0); }
.inspector__stage{ --ev-b:1; --ev-c:1; position:relative; aspect-ratio:1600 / 873; overflow:hidden; background:var(--ink-900); }
.inspector__stage[data-mode="color"]{ cursor:crosshair; }
.inspector__stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.inspector__photo{ filter:brightness(var(--ev-b)) contrast(var(--ev-c)); }
.inspector__sketch{ clip-path:inset(0 0 100% 0); transition:clip-path .9s var(--ease); }
.inspector__stage[data-mode="line"] .inspector__sketch{ clip-path:inset(0 0 0 0); }
.inspector__scan{ position:absolute; left:0; right:0; top:0; height:2px; background:var(--red-500); box-shadow:0 0 0 4px rgb(131 36 44 / .15); opacity:0; }
.loupe{ position:absolute; left:0; top:0; width:108px; height:108px; margin:-54px 0 0 -54px; border-radius:50%; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .15s;
  box-shadow:0 0 0 3px var(--paper-0), 0 0 0 4px var(--red-500), 0 12px 26px -8px rgb(20 16 15 / .6); }
.loupe.is-on{ opacity:1; }
.loupe__zoom{ position:absolute; inset:0; background-repeat:no-repeat; image-rendering:pixelated; }
.loupe__zoom::after{ content:''; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border:1px solid var(--paper-0); box-shadow:0 0 0 1px rgb(20 16 15 / .6); }
.loupe__hex{ position:absolute; left:50%; bottom:9px; translate:-50% 0; padding:1px 6px; border-radius:3px; background:var(--paper-0); color:var(--ink-900); font-size:.64rem; }
.inspector__foot{ display:flex; align-items:center; min-height:70px; padding:12px 16px; border-top:1px solid var(--paper-100); }
.inspector__foot [hidden]{ display:none!important; }
.palette{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; }
.palette p{ font-size:.74rem; color:var(--ink-900); }
.palette__hint{ color:var(--ink-300); }
.palette__list{ display:flex; gap:7px; }
.palette__list li{ width:30px; height:30px; border-radius:7px; background:var(--sw); box-shadow:inset 0 0 0 1px rgb(20 16 15 / .12); }
.linepanel p{ font-size:.74rem; color:var(--ink-900); }
.exposure{ display:flex; align-items:center; gap:14px; width:100%; }
.exposure span{ font-size:.74rem; color:var(--ink-900); }
.exposure input{ flex:1; accent-color:var(--red-500); }
.exposure output{ min-width:74px; text-align:center; }
.fly{ position:fixed; z-index:70; width:30px; height:30px; border-radius:7px; pointer-events:none; box-shadow:0 6px 14px -4px rgb(20 16 15 / .4); }

/* ---------- 11. 05 · Creative directing (version history) ---------------- */
.ab--pin{ padding:clamp(20px, 3vw, 40px) clamp(20px, 3.5vw, 52px); height:calc(100svh - var(--bar) - var(--rule) - 64px); min-height:600px; }
.versions{ display:grid; grid-template-columns:minmax(280px, 390px) 1fr; gap:clamp(24px, 4vw, 64px); height:100%; }
.versions__side{ display:flex; flex-direction:column; min-height:0; }
.versions__side .title{ font-size:clamp(1.8rem, 3vw, 2.8rem); }
.versions__intro{ margin:14px 0 18px; font-size:.9rem; line-height:1.6; }
.history{ display:flex; flex-direction:column; gap:4px; }
.history__item{ display:grid; grid-template-columns:40px 1fr; gap:10px; padding:9px 12px; border-radius:8px; border-left:2px solid transparent; opacity:.42; transition:opacity .3s, background-color .3s, border-color .3s; }
.history__item .mono{ font-size:.72rem; padding-top:3px; color:var(--ink-500); }
.history__item h3{ font:600 1rem/1.3 var(--sans); letter-spacing:-.01em; }
.history__item p{ font-size:.84rem; line-height:1.55; max-height:0; overflow:hidden; opacity:0; transition:max-height .5s var(--ease), opacity .4s; }
.history__item.is-on{ opacity:1; background:rgb(131 36 44 / .06); border-left-color:var(--red-500); }
.history__item.is-on .mono{ color:var(--red-500); }
.history__item.is-on p{ max-height:6em; opacity:1; margin-top:4px; }
.versions__outro{ display:none; }
.versions__stage{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; min-height:0; }
.vstage{ position:relative; width:min(100%, 540px, calc(100svh - 330px)); min-width:280px; aspect-ratio:1; border-radius:6px; background-color:var(--paper-50); background-image:var(--dots); background-size:18px 18px; box-shadow:0 0 0 1px var(--paper-200); }
.vstage__label{ position:absolute; left:0; bottom:calc(100% + 7px); font-size:.7rem; color:var(--ink-500); }
.mb{ position:absolute; width:40%; aspect-ratio:16 / 10; object-fit:cover; border:4px solid var(--paper-0); box-shadow:0 10px 20px -10px rgb(20 16 15 / .45); }
.mb--1{ left:7%; top:10%; rotate:-6deg; }
.mb--2{ left:50%; top:7%; rotate:4deg; }
.mb--3{ left:27%; top:40%; rotate:-2deg; }
.sticky{ position:absolute; padding:10px 12px 12px; width:34%; font:500 .78rem/1.35 var(--sans); color:var(--ink-900); background:var(--paper-100); box-shadow:0 8px 16px -10px rgb(20 16 15 / .4); }
.sticky::before{ content:''; position:absolute; left:50%; top:-6px; width:40%; height:12px; translate:-50% 0; background:rgb(131 36 44 / .35); }
.sticky--1{ left:58%; top:60%; rotate:3deg; }
.sticky--2{ left:9%; top:74%; rotate:-4deg; }
.vmark{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.vmark__guides{ fill:none; stroke:var(--red-300); stroke-width:.7; stroke-dasharray:3 3; opacity:0; }
.vmark__lines line{ stroke:var(--red-500); stroke-width:.8; opacity:0; }
.vmark__body path{ fill:var(--paper-300); stroke:var(--ink-900); stroke-width:.4; opacity:0; }
.vmark__sketch path{ fill:none; stroke:var(--ink-700); stroke-width:1; stroke-linejoin:round; opacity:0; }
.role{ position:absolute; left:var(--x); top:var(--y); padding:3px 9px; border-radius:999px; background:var(--paper-0); box-shadow:inset 0 0 0 1px var(--red-500); color:var(--red-500); font:500 .72rem/1.4 var(--mono); opacity:0; }
.trials{ position:absolute; left:50%; bottom:5%; translate:-50% 0; display:flex; gap:10px; opacity:0; }
.trial{ position:relative; width:64px; height:48px; display:grid; place-items:center; border-radius:6px; background:var(--bg); box-shadow:0 0 0 1px var(--paper-300); }
.trial svg{ width:36px; aspect-ratio:176.6 / 140.4; fill:var(--fg); }
.trial.is-picked{ box-shadow:0 0 0 2px var(--red-500); }
.trial.is-picked::after{ content:'✓'; position:absolute; right:-7px; top:-7px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:var(--red-500); color:var(--paper-0); font-size:.66rem; }
.stamp{ position:absolute; right:7%; bottom:9%; padding:.45rem .8rem; border:2px solid var(--red-500); border-radius:4px; color:var(--red-500); font:600 .78rem/1 var(--mono); text-transform:uppercase; letter-spacing:.1em; rotate:-10deg; opacity:0; background:rgb(251 247 244 / .7); }
.timeline{ position:relative; width:min(100%, 540px); height:34px; }
.timeline__track{ position:absolute; left:0; right:0; top:8px; height:2px; background:var(--paper-200); border-radius:2px; }
.timeline__fill{ display:block; height:100%; background:var(--red-500); transform-origin:0 50%; transform:scaleX(0); }
.timeline__head{ position:absolute; top:3px; left:0; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--paper-0); box-shadow:0 0 0 2px var(--red-500); }
.timeline__dot{ position:absolute; left:var(--p); top:6px; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--paper-300); }
.timeline__dot b{ position:absolute; top:12px; left:50%; translate:-50% 0; font-size:.64rem; font-weight:400; color:var(--ink-500); white-space:nowrap; }
.timeline__dot.is-on{ background:var(--red-500); }
.timeline__dot.is-on b{ color:var(--red-500); }

/* Static version history (no JS / reduced motion): all steps open, final mark. */
.no-js .ab--pin, .reduced .ab--pin{ height:auto; min-height:0; }
.no-js .history__item, .reduced .history__item{ opacity:1; }
.no-js .history__item p, .reduced .history__item p{ max-height:none; opacity:1; margin-top:4px; }
.no-js .mb, .no-js .sticky, .no-js .role, .no-js .trials, .reduced .mb, .reduced .sticky, .reduced .role, .reduced .trials{ display:none; }
.no-js .vmark, .reduced .vmark{ display:none; }
.vstage__final{ display:none; }
.no-js .vstage__final, .reduced .vstage__final{ display:block; position:absolute; left:21%; top:28%; width:58%; aspect-ratio:176.6 / 140.4; fill:var(--red-500); }
.no-js .vstage, .reduced .vstage{ background-color:var(--paper-0); }
.no-js .stamp, .reduced .stamp{ opacity:1; }
.no-js .timeline, .reduced .timeline{ display:none; }
.no-js .versions__outro, .reduced .versions__outro{ display:block; margin-top:28px; max-width:70ch; }

/* ---------- 12. 06 · Approach (auto layout) ------------------------------ */
.autolayout{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; padding:26px; margin-top:44px; border:1px dashed rgb(131 36 44 / .5); border-radius:4px; }
.autolayout__tag{ position:absolute; left:-1px; bottom:100%; padding:2px 8px; border-radius:4px 4px 0 0; background:var(--red-500); color:var(--paper-0); font-size:.66rem; }
.comp{ position:relative; min-height:300px; padding:22px 22px 24px; border-radius:10px; background:var(--paper-0); box-shadow:var(--shadow-ui); transition:box-shadow .25s, translate .35s var(--snap); }
.comp:hover{ box-shadow:0 0 0 1.5px var(--red-500), 0 16px 30px -16px rgb(62 15 20 / .35); translate:0 -4px; }
.comp__name{ display:flex; align-items:center; gap:9px; font-size:.72rem; color:var(--red-500); }
.diamond{ width:9px; height:9px; rotate:45deg; border:1.5px solid var(--red-500); }
.comp h3{ margin:16px 0 18px; font:600 1.32rem/1.15 var(--sans); letter-spacing:-.025em; }
.comp dt{ font:600 .9rem/1.3 var(--sans); color:var(--ink-900); }
.comp dd{ margin:5px 0 16px; font-size:.9rem; line-height:1.6; }
.comp dd:last-child{ margin-bottom:0; }
.gap-pill{ position:absolute; z-index:2; top:50%; translate:-50% -50%; padding:1px 5px; border-radius:3px; background:var(--red-500); color:var(--paper-0); font-size:.6rem; opacity:0; pointer-events:none; }

/* ---------- 13. 07 · Services (layers → canvas) -------------------------- */
.beliefs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-bottom:44px; }
.beliefs p{ padding:20px 22px; border-radius:10px; box-shadow:0 0 0 1px var(--paper-200); }
.beliefs b{ display:block; margin-bottom:8px; font:600 1.35rem/1.1 var(--sans); letter-spacing:-.03em; color:var(--red-500); }
.layers-app{ display:grid; grid-template-columns:290px 1fr; min-height:340px; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-ui); }
.layers{ padding:10px 8px; background:var(--paper-50); border-right:1px solid var(--paper-200); }
.layers__head{ display:flex; justify-content:space-between; padding:6px 10px 12px; font-size:.72rem; color:var(--ink-900); }
.layers__head span{ color:var(--ink-300); }
.layer{ display:flex; align-items:center; gap:9px; width:100%; padding:.62rem .7rem; border:0; border-radius:6px; background:none; text-align:left; cursor:pointer; font:500 .88rem/1.2 var(--sans); color:var(--ink-700); transition:background-color .2s, color .2s; }
.layer:hover{ background:var(--paper-100); }
.layer__caret{ width:0; height:0; border:4px solid transparent; border-left:5px solid var(--ink-300); border-right:0; transition:rotate .25s var(--ease); }
.layer__icon{ width:12px; height:12px; flex:none; border:1.5px solid currentColor; border-radius:2px; opacity:.7; }
.layer__n{ margin-left:auto; font-size:.72rem; color:var(--ink-300); }
.layer[aria-selected="true"]{ background:rgb(131 36 44 / .09); color:var(--red-500); }
.layer[aria-selected="true"] .layer__caret{ rotate:90deg; border-left-color:var(--red-500); }
.board{ position:relative; padding:28px 30px; background-color:var(--paper-0); background-image:var(--dots); background-size:18px 18px; }
.board__panel h3{ margin-bottom:22px; font:600 clamp(1.6rem, 2.4vw, 2.1rem)/1.1 var(--sans); letter-spacing:-.035em; }
.board__panel[hidden]{ display:none; }
.no-js .board__panel{ margin-bottom:34px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chips li{ display:flex; align-items:center; gap:9px; padding:.72rem 1rem; border-radius:8px; background:var(--paper-0); box-shadow:0 0 0 1px var(--paper-200), 0 2px 5px -2px rgb(20 16 15 / .12); font:500 .92rem/1.2 var(--sans); color:var(--ink-900); transition:box-shadow .2s, translate .3s var(--snap); }
.chips li::before{ content:''; width:8px; height:8px; rotate:45deg; border:1.5px solid var(--red-500); }
.chips li:hover{ box-shadow:0 0 0 1.5px var(--red-500), 0 8px 16px -8px rgb(62 15 20 / .3); translate:0 -2px; }
.cta-strip{ margin-top:44px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px 32px; padding:26px 30px; border-radius:12px; background:var(--red-500); color:var(--paper-0); }
.cta-strip__t{ font:600 clamp(1.7rem, 3vw, 2.4rem)/1 var(--sans); letter-spacing:-.04em; }
.cta-strip__s{ color:rgb(251 247 244 / .8); }
.cta-strip .btn--solid{ --h:var(--paper-0); background:var(--paper-0); color:var(--red-500); }
.cta-strip .btn--solid:hover{ background:var(--paper-100); }

/* ---------- 14. 08 · Work (the frame rack) ------------------------------- */
/* The projects stand in a rack like frames on a board: tip the front one
   away to bring the next to the stage. The programme card is its inspector. */
.work__grid{ display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); gap:clamp(28px, 5vw, 80px); align-items:start; }
.rack{ position:sticky; top:calc(var(--bar) + var(--rule) + 30px); }
.rack__stage{ position:relative; height:clamp(540px, 46vw, 660px); perspective:1500px; perspective-origin:50% -10%; touch-action:pan-y; }
.js .flat{ position:absolute; left:50%; bottom:34px; width:min(70%, 320px); margin-left:calc(min(70%, 320px) / -2); transform-origin:50% 100%; will-change:transform, opacity; }
/* In the 3D rack the parent's own z=0 plane would sit in front of frames pushed back
   in z and swallow their clicks, so the rack ignores the pointer and the frames don't. */
.js .rack__stage{ pointer-events:none; }
.js .rack__stage .flat{ pointer-events:auto; }
.flat__cover{ width:100%; aspect-ratio:900 / 1205; object-fit:cover; border:8px solid var(--paper-0); border-radius:6px; background:var(--paper-100); box-shadow:0 0 0 1px var(--paper-200), 0 1px 2px rgb(20 16 15 / .06), 0 24px 40px -22px rgb(20 16 15 / .4); }
.js .flat::after{ content:''; position:absolute; inset:0; border-radius:6px; background:var(--ink-900); opacity:var(--dim, 0); pointer-events:none; }
.js .flat__info{ display:none; }
/* Frame tabs: the layer tag each frame carries on its top edge. */
.flat__tab{
  position:absolute; top:-25px; height:26px; padding:0 9px; border:0; cursor:pointer;
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  border-radius:5px 5px 0 0; background:var(--paper-0); box-shadow:0 0 0 1px var(--paper-200);
  font:500 .68rem/1 var(--sans); color:var(--ink-700);
  transition:translate .35s var(--snap), background-color .2s, color .2s;
}
.flat__tab b{ font:500 .64rem/1 var(--mono); color:var(--red-500); }
.flat.is-front .flat__tab{ background:var(--red-500); color:var(--paper-0); box-shadow:none; }
.flat.is-front .flat__tab b{ color:var(--paper-0); opacity:.75; }
.flat:not(.is-front) .flat__tab:hover{ translate:0 -6px; background:var(--paper-100); }
/* The front frame is the selected layer: handles + its real size. */
.flat__sel{ position:absolute; inset:-5px; border:1px solid var(--red-500); pointer-events:none; opacity:0; transition:opacity .25s; }
.flat.is-front .flat__sel{ opacity:1; }
.flat__sel i{ position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; background:var(--paper-0); border:1px solid var(--red-500); }
.flat__sel i:nth-child(1){ left:0; top:0; }    .flat__sel i:nth-child(2){ left:50%; top:0; }   .flat__sel i:nth-child(3){ left:100%; top:0; }
.flat__sel i:nth-child(4){ left:100%; top:50%; } .flat__sel i:nth-child(5){ left:100%; top:100%; } .flat__sel i:nth-child(6){ left:50%; top:100%; }
.flat__sel i:nth-child(7){ left:0; top:100%; }  .flat__sel i:nth-child(8){ left:0; top:50%; }
.flat__sel .pill{ position:absolute; left:50%; top:calc(100% + 9px); translate:-50% 0; }
.rack__ctl{ display:flex; align-items:center; justify-content:center; gap:4px; width:fit-content; margin:18px auto 0; padding:5px; border-radius:12px; background:var(--paper-0); box-shadow:var(--shadow-ui); }
.rack__btn{ width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--ink-700); font:500 1rem/1 var(--sans); cursor:pointer; transition:background-color .2s, color .2s; }
.rack__btn:hover{ background:var(--paper-100); }
.rack__btn--on{ background:var(--red-500); color:var(--paper-0); }
.rack__btn--on:hover{ background:var(--red-600); }
.rack__count{ min-width:7ch; padding:0 8px; text-align:center; font-size:.76rem; color:var(--ink-300); font-variant-numeric:tabular-nums; }
.rack__now{ color:var(--ink-900); }
.no-js .rack{ position:static; }
.no-js .rack__stage{ height:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:28px; perspective:none; }
.no-js .flat__info{ margin-top:16px; }
.no-js .rack__ctl, .no-js .programme{ display:none; }
.no-js .work__grid{ grid-template-columns:1fr; }
.flat__sector{ font-size:.72rem; color:var(--red-500); }
.flat__name{ font:600 1.7rem/1.1 var(--sans); letter-spacing:-.035em; margin:6px 0 10px; }
.flat__desc{ font-size:.9rem; }
.flat__tags, .prog__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.flat__tags li, .prog__tags li{ display:flex; align-items:center; gap:8px; padding:.5rem .8rem; border-radius:7px; background:var(--paper-0); box-shadow:0 0 0 1px var(--paper-200), 0 2px 5px -2px rgb(20 16 15 / .12); font:500 .8rem/1.2 var(--sans); color:var(--ink-900); }
.flat__tags li::before, .prog__tags li::before{ content:''; width:7px; height:7px; rotate:45deg; border:1.5px solid var(--red-500); }

/* The programme card: the front frame's properties panel. */
.programme{ display:grid; }
.prog{ position:relative; grid-area:1 / 1; align-self:start; border-radius:12px; background:var(--paper-0); box-shadow:var(--shadow-ui); overflow:hidden; will-change:transform, opacity; }
.prog__head{ display:flex; justify-content:space-between; gap:16px; padding:12px 16px; font-size:.72rem; color:var(--ink-900); border-bottom:1px solid var(--paper-100); }
.prog__count{ color:var(--red-500); font-variant-numeric:tabular-nums; }
.prog__body{ padding:clamp(18px, 2.4vw, 30px); }
.prog__body .kicker{ margin-bottom:12px; }
.prog__name{ font:600 clamp(2.2rem, 4vw, 3.6rem)/1 var(--sans); letter-spacing:-.05em; margin-bottom:22px; }
.prog__window{ position:relative; aspect-ratio:1290 / 616; overflow:hidden; border-radius:6px; background:var(--ink-900); }
.prog__slide{ position:absolute; inset:0; }
.prog__slide img, .prog__slide video{ width:100%; height:100%; object-fit:cover; }
.prog__timer{ position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2; background:var(--red-500); transform-origin:0 50%; transform:scaleX(0); }
.prog__strip{ display:flex; gap:8px; margin-top:10px; }
.prog__thumb{
  position:relative; flex:1; min-width:0; aspect-ratio:1290 / 616; padding:0; border:0; cursor:pointer; overflow:hidden; border-radius:5px;
  background:var(--paper-100); box-shadow:0 0 0 1px var(--paper-200); opacity:.55;
  transition:opacity .25s, translate .35s var(--snap), box-shadow .2s;
}
.prog__thumb img{ width:100%; height:100%; object-fit:cover; }
.prog__thumb:hover{ opacity:1; translate:0 -3px; }
.prog__thumb[aria-pressed="true"]{ opacity:1; box-shadow:0 0 0 2px var(--paper-0), 0 0 0 3.5px var(--red-500); }
.prog__thumb--motion{ display:flex; align-items:center; justify-content:center; gap:6px; font:500 .62rem/1 var(--mono); color:var(--red-500); }
.prog__thumb--motion::before{ content:''; border:5px solid transparent; border-left:8px solid var(--red-500); border-right:0; }
.prog__desc{ margin-top:22px; font-size:.94rem; line-height:1.65; }
.prog__render{ position:absolute; top:0; bottom:0; width:2px; left:0; z-index:5; background:var(--red-500); box-shadow:0 0 0 3px rgb(131 36 44 / .12); pointer-events:none; }

.work__close{ margin-top:clamp(56px, 7vw, 100px); display:grid; grid-template-columns:auto 1fr auto; gap:12px 32px; align-items:center; padding-top:30px; border-top:1px dashed rgb(131 36 44 / .45); }
.work__close-t{ font:600 clamp(1.8rem, 3.4vw, 2.8rem)/1 var(--sans); letter-spacing:-.045em; color:var(--ink-900); }
.work__close-s{ color:var(--ink-500); }

/* ---------- 15. 09 · Clients (asset import) ------------------------------ */
.assets{ display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.asset{ position:relative; aspect-ratio:16 / 10; display:grid; place-items:center; border-radius:8px; background-color:var(--paper-50); background-image:var(--dots); background-size:14px 14px; box-shadow:0 0 0 1px var(--paper-200); }
.asset__logo{ width:calc(var(--w) * 1.3rem); height:calc(var(--h) * 1.3rem); max-width:82%; background:var(--ink-900); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.asset__file{ position:absolute; left:10px; top:8px; font:400 .6rem/1 var(--mono); color:var(--ink-300); }
.asset__bar{ position:absolute; left:10px; right:10px; bottom:10px; height:2px; border-radius:2px; background:var(--paper-200); overflow:hidden; }
.asset__bar span{ display:block; height:100%; background:var(--red-500); transform-origin:0 50%; transform:scaleX(0); }
.asset::after{
  content:''; position:absolute; inset:-1px; border:1px solid var(--red-500); border-radius:8px; opacity:0; pointer-events:none; transition:opacity .15s;
}
.asset::before{
  content:attr(data-name); content:attr(data-name) / ""; position:absolute; left:-1px; bottom:calc(100% + 3px); z-index:2; padding:1px 6px; border-radius:3px; background:var(--red-500); color:var(--paper-0); font:500 .62rem/1.5 var(--mono); white-space:nowrap; opacity:0; transition:opacity .15s; pointer-events:none;
}
.asset:hover::after, .asset:hover::before, .asset.is-picked::after, .asset.is-picked::before{ opacity:1; }
.asset.is-picked{ --c:var(--red-400); }

/* ---------- 16. 10 · Presence (scrubbable fields) ------------------------ */
.fields{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.field{ position:relative; padding:22px 24px 24px; border-radius:10px; background:var(--paper-0); box-shadow:var(--shadow-ui); }
.field__label{ font-size:.72rem; color:var(--ink-500); }
.field__num{ position:relative; display:flex; align-items:baseline; margin:16px 0 14px; font:600 clamp(3rem, 5.8vw, 5.4rem)/1 var(--sans); letter-spacing:-.055em; color:var(--ink-900); font-variant-numeric:tabular-nums; }
.num{ position:relative; border-radius:6px; padding:0 .08em; margin-left:-.08em; transition:box-shadow .2s, background-color .2s; }
@media (pointer:fine){ .num{ cursor:ew-resize; } }
.num:hover, .num.is-scrub{ box-shadow:inset 0 0 0 1.5px var(--red-500); background:rgb(131 36 44 / .04); }
.field__plus{ color:var(--red-500); }
.num.is-selected{ background:rgb(131 36 44 / .16); box-shadow:none; }
.field__caret{ display:inline-block; width:3px; height:.78em; margin-left:.03em; background:var(--red-500); animation:blink .9s steps(1) infinite; align-self:center; }
.field__cap{ font-size:.94rem; }
.scrubber{ position:absolute; z-index:5; left:0; top:50%; width:30px; height:22px; margin:-11px 0 0 -15px; display:grid; place-items:center; border-radius:6px; background:var(--ink-900); color:var(--paper-0); font:500 .8rem/1 var(--mono); pointer-events:none; opacity:0; }
.delta{ position:absolute; right:0; top:-6px; opacity:0; }
.fields__hint{ margin-top:18px; font-size:.72rem; color:var(--ink-300); }
@media (pointer:coarse){ .fields__hint{ display:none; } }

/* ---------- 17. 11 · Contact (admit one) -------------------------------- */
.contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px, 5vw, 80px); align-items:center; }
.contact__title{ font:600 clamp(3.2rem, 7.4vw, 7.4rem)/.94 var(--sans); letter-spacing:-.06em; }
.contact__sub{ margin-top:22px; font:500 1.2rem/1.45 var(--sans); color:var(--ink-700); max-width:26ch; }
.contact__hint{ margin-top:26px; display:flex; align-items:center; gap:8px; font-size:.72rem; color:var(--ink-300); }
.copy{ padding:4px 9px; border:0; border-radius:5px; background:var(--paper-100); font:500 .66rem/1.4 var(--mono); color:var(--ink-700); cursor:pointer; transition:background-color .2s, color .2s; }
.copy:hover{ background:var(--red-500); color:var(--paper-0); }
.copy.is-done{ background:var(--ink-900); color:var(--paper-0); }
.contact__hint::before{ content:'\2702'; font-size:.95rem; color:var(--red-500); }

/* The ticket is a component on the board: oxblood stock, the canvas dot grid
   printed in bone, a perforation with die-cut notches, and a stub to tear. */
.ticket-rig{ position:relative; perspective:1300px; padding-block:30px; }
.ticket-rig__tag{ position:absolute; left:0; top:4px; padding:2px 8px; border-radius:4px 4px 0 0; background:var(--red-500); color:var(--paper-0); font-size:.64rem; }
.ticket-rig__pool{ position:absolute; left:6%; right:6%; bottom:-4%; height:22%; border-radius:50%; background:radial-gradient(closest-side, rgb(131 36 44 / .1), transparent); z-index:0; pointer-events:none; }
.ticket{
  --stub:150px; --notch:15px; --stock:radial-gradient(circle at 1px 1px, rgb(251 247 244 / .13) 1px, transparent 1.3px) 0 0 / 14px 14px, var(--red-500);
  position:relative; z-index:1; display:flex; transform-style:preserve-3d; will-change:transform;
  filter:drop-shadow(0 26px 30px rgb(62 15 20 / .28)) drop-shadow(0 3px 4px rgb(20 16 15 / .12));
}
.ticket__body{
  position:relative; flex:1; min-width:0; padding:clamp(24px, 3vw, 36px) clamp(22px, 3vw, 38px);
  color:var(--paper-0); border-radius:12px 0 0 12px; background:var(--stock);
  -webkit-mask:radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000 100%);
  -webkit-mask-composite:source-in;
          mask:radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000 100%);
          mask-composite:intersect;
}
.ticket__body::before{ content:''; position:absolute; inset:10px 12px 10px 10px; border:1px solid rgb(251 247 244 / .26); border-radius:7px 0 0 7px; border-right:0; pointer-events:none; }
.ticket__admit{ display:flex; align-items:center; gap:12px; font-size:.74rem; color:rgb(251 247 244 / .88); }
.ticket__admit svg{ width:40px; flex:none; aspect-ratio:176.6 / 140.4; fill:var(--paper-0); }
.ticket__scene{ margin-left:auto; font-size:.64rem; color:rgb(251 247 244 / .55); white-space:nowrap; }
.ticket__refrain{ margin:20px 0 22px; font:500 clamp(1.08rem, 1.5vw, 1.3rem)/1.45 var(--sans); letter-spacing:-.01em; color:var(--paper-0); max-width:36ch; }
.ticket__channels{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px 26px; }
.ticket__channels li{ position:relative; display:flex; flex-direction:column; gap:1px; padding-top:8px; border-top:1px dashed rgb(251 247 244 / .3); }
.ticket__channels .mono{ font-size:.64rem; color:rgb(251 247 244 / .62); }
.ticket__channels a{ position:relative; width:fit-content; font-size:.94rem; font-weight:500; color:var(--paper-0); text-decoration:none; overflow-wrap:anywhere; transition:translate .35s var(--snap); }
/* Punch-hole: the ticket gets clipped where you point. */
.ticket__channels a::before{ content:''; position:absolute; left:-13px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--paper-0); box-shadow:inset 0 1px 2px rgb(20 16 15 / .45); scale:0; transition:scale .3s var(--snap); }
.ticket__channels a:hover{ translate:13px 0; }
.ticket__channels a:hover::before{ scale:1; }
.ticket__channels a:focus-visible{ outline-color:var(--paper-0); }
.ticket .copy{ position:absolute; right:0; top:6px; padding:2px 7px; background:rgb(251 247 244 / .12); color:var(--paper-0); }
.ticket .copy:hover{ background:var(--paper-0); color:var(--red-500); }
.ticket .copy.is-done{ background:var(--ink-900); color:var(--paper-0); }
.ticket .copy:focus-visible{ outline-color:var(--paper-0); }
@media (pointer:fine){
  .ticket .copy{ opacity:0; transition:opacity .2s, background-color .2s, color .2s; }
  .ticket__channels li:hover .copy, .ticket .copy:focus-visible, .ticket .copy.is-done{ opacity:1; }
}
.ticket__foot{ margin-top:22px; font-size:.64rem; color:rgb(251 247 244 / .58); }
.ticket__perf{ position:absolute; top:var(--notch); bottom:var(--notch); right:var(--stub); width:0; border-left:2px dotted rgb(251 247 244 / .55); z-index:2; transform:translateZ(1px); }
.ticket__stub{
  position:relative; width:var(--stub); flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-decoration:none; color:var(--paper-0); border-radius:0 12px 12px 0; background:var(--stock);
  -webkit-mask:radial-gradient(circle var(--notch) at 0 0, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 0 100%, transparent 97%, #000 100%);
  -webkit-mask-composite:source-in;
          mask:radial-gradient(circle var(--notch) at 0 0, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 0 100%, transparent 97%, #000 100%);
          mask-composite:intersect;
  transform-origin:0 0; transition:rotate .45s var(--snap), translate .45s var(--snap), background-color .25s;
  will-change:transform;
}
.ticket__stub-t{ writing-mode:vertical-rl; rotate:180deg; font:600 1.75rem/1 var(--sans); letter-spacing:-.04em; }
.ticket__stub-hint{ font-size:.6rem; color:rgb(251 247 244 / .72); }
.ticket__stub-hint::before{ content:'\2702'; display:block; text-align:center; font-size:1rem; margin-bottom:6px; }
.ticket__stub:hover{ rotate:3deg; translate:6px 0; --stock:radial-gradient(circle at 1px 1px, rgb(251 247 244 / .13) 1px, transparent 1.3px) 0 0 / 14px 14px, var(--red-400); }
.ticket__stub:focus-visible{ outline:2px solid var(--ink-900); outline-offset:4px; }
.ticket__stub.is-torn{ transition:none; }

/* ---------- 18. Footer · canvas overview --------------------------------- */
.foot{ max-width:calc(1320px + 2 * var(--pad)); margin:0 auto; padding:10px var(--pad) 110px; }
.foot__head{ margin-bottom:12px; font-size:.72rem; color:var(--ink-500); }
.minimap{ display:grid; grid-template-columns:repeat(11, 1fr); gap:8px; }
.minimap a{ position:relative; display:block; aspect-ratio:16 / 11; border-radius:3px; background:var(--paper-0); box-shadow:0 0 0 1px var(--paper-300); text-decoration:none; transition:box-shadow .2s, translate .3s var(--snap); }
.minimap a::after{ content:''; position:absolute; left:18%; right:30%; top:48%; height:3px; border-radius:2px; background:var(--paper-200); box-shadow:0 7px 0 var(--paper-200); }
.minimap span{ position:absolute; left:6px; top:4px; font:400 .6rem/1 var(--mono); color:var(--ink-500); }
.minimap a:hover{ box-shadow:0 0 0 1.5px var(--red-500); translate:0 -3px; }
.minimap a.is-on{ box-shadow:0 0 0 2px var(--red-500); }
.minimap a.is-on span{ color:var(--red-500); }
.foot__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:34px; padding-top:20px; border-top:1px solid var(--paper-300); font-size:.74rem; }

/* ---------- 19. Outline view (⌘Y): the canvas behind the scenes ---------- */
.is-outline .ab{ background:transparent; box-shadow:0 0 0 1px var(--red-300); }
.is-outline :is(h1, h2, h3, .hero__title .w, .cta-strip__t, .field__num, .work__close-t, .ticket__stub-t){ color:transparent!important; -webkit-text-stroke:1px var(--ink-900); }
.is-outline em, .is-outline .w--accent, .is-outline .field__plus{ -webkit-text-stroke-color:var(--red-500)!important; }
.is-outline :is(p, li, dd, dt, blockquote){ color:var(--ink-300); }
.is-outline img:not([data-sketch]):not(.lens-stage__sketch):not(.inspector__sketch){ filter:grayscale(1) contrast(.55) brightness(1.45); opacity:.5; }
.is-outline :is([data-layer], .comp, .prog, .asset, .field, .panel, .props, .inspector, .beliefs p, .layers-app){ outline:1px dashed rgb(131 36 44 / .55); outline-offset:3px; box-shadow:none; background-color:transparent; }
.is-outline :is(.btn--solid, .cta-strip){ background:transparent; color:var(--red-500); box-shadow:inset 0 0 0 1px var(--red-500); }
.is-outline .asset__logo{ opacity:.35; }
.is-outline .prog__window{ background:transparent; }
.is-outline .flat__cover{ border-color:transparent; box-shadow:0 0 0 1px var(--red-300); }
.is-outline .ticket{ filter:none; }
.is-outline :is(.ticket__body, .ticket__stub){ --stock:transparent; outline:none; box-shadow:inset 0 0 0 1px var(--red-300); }
.is-outline .ticket :is(a, span, .ticket__refrain){ color:var(--ink-700); }
.is-outline .ticket__admit svg{ fill:none; stroke:var(--ink-900); stroke-width:1.2; }
.is-outline .ticket__body::before, .is-outline .ticket__perf{ border-color:var(--red-300); }
.is-outline .ticket__channels li{ border-color:var(--paper-300); }

/* ---------- 20. Pre-build states (JS + motion only) ---------------------- */
.js:not(.reduced) [data-build]{ opacity:0; }
.js:not(.reduced) .hero__title .w{ opacity:0; }
.js:not(.reduced) .hero__img{ clip-path:inset(50% 50% 50% 50%); }
.js:not(.reduced) .about__title{ opacity:0; }
.reduced .frame-ph, .no-js .frame-ph{ display:none; }

/* ---------- 21. Responsive ----------------------------------------------- */
@media (max-width:1180px){
  .bar__file, .bar__avatars{ display:none; }
  .autolayout{ grid-template-columns:repeat(2, 1fr); }
  .gap-pill{ display:none; }
  .assets{ grid-template-columns:repeat(4, 1fr); }
  .about{ grid-template-columns:1fr; }
  .props{ position:relative; top:auto; max-width:420px; }
}
@media (max-width:900px){
  :root{ --rule:0px; --bar:56px; }
  .ruler, .bar__tabs, .bar__cta{ display:none; }
  .bar__menu{ display:inline-flex; align-items:center; padding:.6rem .9rem; border:0; border-radius:8px; background:var(--ink-900); color:var(--paper-0); font:500 .8rem/1 var(--sans); cursor:pointer; }
  main{ padding-top:56px; }
  .ab{ margin-bottom:84px; }
  .hero, .behind, .identity, .contact, .versions, .head--split, .work__grid{ grid-template-columns:1fr; }
  .hero__frame{ justify-self:stretch; max-width:none; aspect-ratio:4 / 3.4; order:-1; }
  .hero{ min-height:0; }
  .head__aside{ justify-self:start; }
  .about__body{ grid-template-columns:1fr; }
  .beliefs{ grid-template-columns:1fr; }
  .layers-app{ grid-template-columns:1fr; }
  .layers{ display:flex; gap:6px; overflow-x:auto; border-right:0; border-bottom:1px solid var(--paper-200); padding:8px; scrollbar-width:none; }
  .layers__head{ display:none; }
  .layer{ flex:none; width:auto; white-space:nowrap; }
  .layer__caret{ display:none; }
  .cta-strip{ grid-template-columns:1fr; }
  .rack{ position:relative; top:auto; }
  .work__close{ grid-template-columns:1fr; }
  .ticket-rig{ max-width:560px; }
  .assets{ grid-template-columns:repeat(3, 1fr); }
  .fields{ grid-template-columns:1fr; }
  .minimap{ grid-template-columns:repeat(6, 1fr); }
  .ab--pin{ height:calc(100svh - var(--bar) - 40px); min-height:560px; padding:18px 18px 14px; }
  .versions{ display:flex; flex-direction:column; gap:14px; }
  .versions__side .kicker{ margin-bottom:8px; }
  .versions__side .title{ font-size:1.7rem; }
  .versions__intro{ display:none; }
  .history__item:not(.is-on){ display:none; }
  .history__item{ padding:6px 10px; }
  .versions__stage{ flex:1; justify-content:flex-start; gap:14px; }
  .vstage{ width:min(100%, calc(100svh - 400px)); min-width:220px; }
  .no-js .history__item:not(.is-on), .reduced .history__item:not(.is-on){ display:grid; }
  .no-js .versions__intro, .reduced .versions__intro{ display:block; }
  .dock__zoom, .dock__sep{ display:none; }
  .vstage__label{ display:none; }
}
@media (max-width:560px){
  .autolayout{ grid-template-columns:1fr; padding:16px; }
  .comp{ min-height:0; }
  .assets{ grid-template-columns:repeat(2, 1fr); }
  .panel__rows li{ grid-template-columns:1fr auto; }
  .panel__rows li .mono{ grid-column:1 / -1; }
  .flat__tab span{ display:none; }
  .flat__tab{ padding:0 8px; }
  .prog__head span:first-child{ display:none; }
  .ab__dims{ display:none; }
}
@media (max-width:640px){
  .ticket{ --stub:0px; flex-direction:column; }
  .ticket__body{ border-radius:12px 12px 0 0;
    -webkit-mask:radial-gradient(circle var(--notch) at 0 100%, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000 100%);
            mask:radial-gradient(circle var(--notch) at 0 100%, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 100% 100%, transparent 97%, #000 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect; }
  .ticket__body::before{ border-right:1px solid rgb(251 247 244 / .26); border-bottom:0; border-radius:7px 7px 0 0; inset:10px 10px 12px; }
  .ticket__scene{ display:none; }
  .ticket__perf{ display:none; }
  .ticket__stub::before{ content:''; position:absolute; top:0; left:var(--notch); right:var(--notch); border-top:2px dotted rgb(251 247 244 / .55); }
  .ticket__stub{ width:100%; flex-direction:row; padding:22px; border-radius:0 0 12px 12px;
    -webkit-mask:radial-gradient(circle var(--notch) at 0 0, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000 100%);
            mask:radial-gradient(circle var(--notch) at 0 0, transparent 97%, #000 100%), radial-gradient(circle var(--notch) at 100% 0, transparent 97%, #000 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect; }
  .ticket__stub-t{ writing-mode:horizontal-tb; rotate:none; }
  .ticket__stub-hint::before{ display:inline; margin:0 6px 0 0; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
}