/* ============================================================================
   POUYA SADEGHPOUR - ARCHITECTING POSSIBILITIES
   Design system. Structure follows the oryzo.ai teardown in docs/oryzo-analysis.md:
   one scalar fluid type system, a 16 column ratio grid, tall sections with pinned
   inners driven by --active-ratio, and a single fixed WebGL canvas underneath
   everything. The palette, type and narrative are this project's own.
   ========================================================================= */

/* Variable woff2, latin subset. Geist carries the display and the text at whatever
   weight the role needs (the old DM Sans shipped one weight and every label was
   synthesised bold), Geist Mono carries the instrument read-outs, and Instrument
   Serif replaces Italiana, whose hairlines vanished below about 30px. */
@font-face{font-family:Geist;src:url('/fonts/geist.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/fonts/geist-mono.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/fonts/instrument-serif.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/fonts/instrument-serif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* ---------------------------------------------------------------- 1. tokens */

:root{
  /* ground and ink */
  --ink:#100904;
  --ink-soft:#1B1109;
  --umber:#382416;
  --bone:#FFEDD7;
  --bone-70:rgba(255,237,215,.7);
  --bone-45:rgba(255,237,215,.45);
  /* the floor for any text a reader is expected to read: 4.5:1 on --ink */
  --bone-62:rgba(255,237,215,.62);
  --bone-22:rgba(255,237,215,.22);
  --bone-00:rgba(255,237,215,0);
  --stone:#6C5F51;
  --paper:#F6E0C6;
  /* the working surface */
  --mat:#445231;
  --mat-light:#5D6C49;
  /* The seam and every accent that rides on it - and it has to be the same metal
     the object is repaired with, or the page and the sculpture read as two different
     brands. The kintsugi material is #F7C46E, hue 38. The accent used to be #DC5000,
     hue 22: a saturated vermilion against a pale gold. Same family now. */
  --gold:#E0A244;
  --gold-hot:#F7C46E;
  --gold-30:rgba(224,162,68,.34);
  --gold-00:rgba(224,162,68,0);

  /* Unified Kintsugi Custom Cursors */
  --cur-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='7.5' stroke='rgba(0,0,0,0.7)' stroke-width='2.6' fill='none'/%3E%3Ccircle cx='16' cy='16' r='7.5' stroke='%23dfad48' stroke-width='1.6' fill='none'/%3E%3Ccircle cx='16' cy='16' r='1.6' fill='%23ffedd7' stroke='%230b0704' stroke-width='0.6'/%3E%3C/svg%3E") 16 16, auto;
  --cur-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='9.5' stroke='rgba(0,0,0,0.7)' stroke-width='2.6' fill='none'/%3E%3Ccircle cx='18' cy='18' r='9.5' stroke='%23f6d289' stroke-width='1.6' fill='none'/%3E%3Cpath d='M10 7 H7 V10 M26 7 H29 V10 M7 26 V29 H10 M29 26 V29 H26' stroke='%23dfad48' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='18' cy='18' r='2' fill='%23ffedd7' stroke='%230b0704' stroke-width='0.6'/%3E%3C/svg%3E") 18 18, pointer;
  --cur-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 4 H17 M12 4 V20 M7 20 H17' stroke='%230b0704' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M7 4 H17 M12 4 V20 M7 20 H17' stroke='%23dfad48' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, text;
  --cur-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='7.5' stroke='rgba(0,0,0,0.7)' stroke-width='2.6' fill='none'/%3E%3Ccircle cx='16' cy='16' r='7.5' stroke='%237a4a10' stroke-width='1.6' fill='none'/%3E%3Cline x1='11' y1='11' x2='21' y2='21' stroke='%23e05040' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, not-allowed;

  --font-display:Geist,system-ui,sans-serif;
  --font-serif:'Instrument Serif',Georgia,serif;
  --font-text:Geist,system-ui,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,monospace;

  /* page metrics */
  --vh:1vh;
  --pad-x:3.125vw;
  --row:calc(9 * var(--unit));
  --pad-y:calc(var(--row) * 4);
  --inner-w:calc(100vw - var(--pad-x) * 2);

  /* one scalar for the entire type scale */
  --unit:min(var(--inner-w) / 1640, (var(--vh) * 100) / 1024 * 1.2);
  --h1:calc(148 * var(--unit));
  --h2:calc(72 * var(--unit));
  --h3:calc(42 * var(--unit));
  --h4:calc(28 * var(--unit));
  --h5:calc(20 * var(--unit));
  --body1:calc(32 * var(--unit));
  --body2:calc(21 * var(--unit));
  --body3:max(1rem,calc(16 * var(--unit)));
  --sub1:max(1rem,calc(22 * var(--unit)));
  --sub2:max(.9375rem,calc(15 * var(--unit)));
  --label:max(.75rem,calc(12 * var(--unit)));
  --micro:max(.6875rem,calc(10 * var(--unit)));
  --btn:max(.875rem,calc(14 * var(--unit)));

  /* 16 column grid, gap expressed as a ratio of the column */
  --cols:16;
  --gap-scale:calc(24 / 90);
  --gap:calc(var(--inner-w) / ((var(--cols) / var(--gap-scale)) + var(--cols) - 1));
  --col:calc(var(--gap) / var(--gap-scale));
  --span:calc(var(--gap) + var(--col));

  --grain-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-anticipate:cubic-bezier(.3,0,.66,-.3);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* ----------------------------------------------------------------- 2. reset */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-text);
  font-size:var(--body3);
  line-height:1.45;
  color:var(--bone);
  background:var(--ink);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Unified Bespoke Kintsugi Cursor across the ENTIRE platform */
html,
html body,
html *,
body *,
dialog,
dialog *,
dialog::backdrop,
::backdrop {
  cursor: var(--cur-default);
}

/* Interactive elements: expanded targeting reticle with corner notches */
a,
a *,
button,
button *,
[role="button"],
[role="button"] *,
.pill,
.pill *,
.ct-link,
.interactive,
.pointer,
[data-cursor],
.sheet,
.sheet *,
#menu,
#menu *,
#compass,
#compass *,
#masthead button,
#masthead a,
.masthead-link,
.masthead-brand,
.masthead-act-pill,
.masthead-cta,
.oracle-trigger,
.oracle-pill-btn,
.oracle-monolith button,
.oracle-monolith a,
.oracle-folio-btn,
.oracle-transmit-btn,
.oracle-close,
.sitemap-modal button,
.sitemap-modal a,
.sitemap-close,
.cv-dialog button,
.cv-dialog a,
.commission-dialog button,
.commission-dialog a,
summary {
  cursor: var(--cur-pointer) !important;
}

/* Text editing inputs: precision gold I-beam */
input,
textarea,
[contenteditable="true"],
.oracle-text-field {
  cursor: var(--cur-text) !important;
}

/* Disabled controls */
:disabled,
[aria-disabled="true"],
.oracle-transmit-btn:disabled {
  cursor: var(--cur-disabled) !important;
}
/* a visible focus ring everywhere; the drawn cursor is no help to a keyboard */
:focus-visible{outline:2px solid var(--gold-hot);outline-offset:3px}
h1,h2,h3,h4,h5,p,figure,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
img,canvas,svg,iframe{display:block;max-width:100%}
::selection{background:var(--gold);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.bp-keyboard:not(.is-active){display:none}
.bp-keyboard{position:absolute;left:var(--pad-x);bottom:calc(var(--pad-y) * .6);z-index:5;
  display:flex;flex-wrap:wrap;gap:.5em;max-width:calc(100% - var(--pad-x) * 2);
  clip-path:inset(50%);height:1px;overflow:hidden}
.bp-keyboard:focus-within{clip-path:none;height:auto;overflow:visible}
.no-select{-webkit-user-select:none;user-select:none}

/* the native scrollbar, reduced to a hairline so it never competes with the rail */
html{scrollbar-width:thin;scrollbar-color:var(--gold-30) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gold-30);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ------------------------------------------------------------------ 3. type */

.t-h1,.t-h2,.t-h3,.t-h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:.88;color:var(--bone)}
.t-h1{font-size:var(--h1)}
.t-h2{font-size:var(--h2);line-height:.92}
.t-h3{font-size:var(--h3);line-height:.98}
.t-h4{font-size:var(--h4);line-height:1.05;letter-spacing:-.015em}
.t-serif{font-family:var(--font-serif);font-weight:400;letter-spacing:-.005em;line-height:.94}
.t-body1{font-size:var(--body1);line-height:1.24;letter-spacing:-.01em}
.t-body2{font-size:var(--body2);line-height:1.34}
.t-body3{font-size:var(--body3);line-height:1.5}
.t-sub1{font-size:var(--sub1);line-height:1.2}
.t-sub2{font-size:var(--sub2);line-height:1.3}
.t-label{font-size:var(--label);letter-spacing:.13em;text-transform:uppercase;line-height:1.35}
.t-micro{font-size:var(--micro);letter-spacing:.16em;text-transform:uppercase;line-height:1.5}
.t-caps{text-transform:uppercase}
/* Instrument read-outs and labels are set in the mono, which already carries its own
   width - so they take half the tracking the proportional face needed. */
.t-label,.t-micro,.spec,.formula .f-label,.formula .f-note,.portal-bar,
#compass button span,#ct-links h5,#ct-made h5,#ct-bottom,.pre-edge{font-family:var(--font-mono);font-weight:500}
.t-label{letter-spacing:.08em}
.t-micro{letter-spacing:.08em}
.t-gold{color:var(--gold-hot)}
.t-dim{color:var(--bone-62)}
em{font-style:normal;color:var(--gold-hot)}
.t-serif em{font-family:var(--font-serif)}

/* -------------------------------------------------------------- 4. utilities */

.o-container{width:100%;padding:0 var(--pad-x)}
.o-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--gap)}
.o-grid > *{grid-column:auto / span var(--gc-span,var(--cols));grid-column-start:var(--gc-start,auto)}

/* dashed hairline: the workhorse divider */
.o-dash{--dash:var(--bone-22);height:1px;width:100%;
  background:repeating-linear-gradient(90deg,var(--dash) 0 2px,transparent 0 4px)}
.o-dash.is-v{width:1px;height:100%;
  background:repeating-linear-gradient(180deg,var(--dash) 0 2px,transparent 0 4px)}
.o-dash.is-gold{--dash:var(--gold-30)}

/* dotted crosshair frame that brackets an object in the scene */
.o-frame{position:absolute;border:1px dashed var(--bone-22);pointer-events:none}
.o-frame::before,.o-frame::after{content:'';position:absolute;width:5px;height:5px;
  border:1px solid var(--gold);border-radius:50%}
.o-frame::before{top:-3px;left:-3px}
.o-frame::after{bottom:-3px;right:-3px}

/* ------------------------------------------------------------- 5. pill button */

.pill{
  --pill-bg:var(--bone);--pill-fg:var(--ink);
  --pill-bg-on:transparent;--pill-fg-on:var(--bone);
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-text);font-size:var(--btn);line-height:1;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  padding:1.15em 2em;border-radius:3em;border:1px solid transparent;
  background:var(--pill-bg);color:var(--pill-fg);
  cursor:pointer;pointer-events:auto;overflow:hidden;
  transform:translate3d(var(--mx,0px),var(--my,0px),0);
  transition:background-color .2s var(--ease-io),color .2s var(--ease-io),
             border-color .25s var(--ease-io),transform .5s var(--ease-out);
}
.pill:hover:not(.is-on),.pill.is-on:not(:hover){
  background:var(--pill-bg-on);color:var(--pill-fg-on);border-color:var(--bone-22)}
.pill.is-ghost{--pill-bg:transparent;--pill-fg:var(--bone);
  --pill-bg-on:var(--bone);--pill-fg-on:var(--ink);border-color:var(--bone-22)}
.pill.is-dashed{--pill-bg:transparent;--pill-fg:var(--bone);
  --pill-bg-on:transparent;--pill-fg-on:var(--gold-hot);
  border:1px dashed var(--bone-22)}
.pill.is-dashed:hover{border-color:var(--gold)}
.pill.is-gold{
  --pill-bg:var(--umber);--pill-fg:var(--bone);
  --pill-bg-on:var(--umber);--pill-fg-on:var(--gold-hot);
  --glow:var(--gold-00);border:1px solid var(--glow);transition:border-color .3s,color .2s}
.pill.is-gold::after{content:'';position:absolute;inset:0;border-radius:3em;
  box-shadow:inset 0 0 1em var(--glow),0 0 2.2em -.6em var(--glow);transition:box-shadow .3s}
.pill.is-gold:hover,.pill.is-gold.is-on{--glow:var(--gold)}
.pill.is-large{padding:1.4em 2.8em;font-size:calc(var(--btn) * 1.1)}
.pill > .pill-dot{width:.45em;height:.45em;border-radius:50%;background:currentColor;flex:none}
.pill > .pill-arrow{font-size:1.1em;line-height:0;transition:transform .45s var(--ease-out)}
.pill:hover > .pill-arrow{transform:translate(.22em,-.22em)}

/* ------------------------------------------------- 6. letter flipper (links) */

.flip{display:inline-flex;overflow:hidden;line-height:1.1;vertical-align:bottom}
.flip > i{display:block;position:relative;font-style:normal;overflow:clip;
  transition:transform .55s var(--ease-out);transition-delay:calc(var(--i) * 16ms)}
.flip > i > span{display:block}
.flip > i > span + span{position:absolute;top:100%;left:0;color:var(--gold-hot)}
.flip-host:hover .flip > i,.flip-host.is-on .flip > i,
a.flip-host:focus-visible .flip > i{transform:translateY(-100%)}

/* -------------------------------------------------- 7. masked word reveal */

.reveal{display:inline}
/* The mask has to be taller than the line box it sits in.

   `overflow:clip` on a word whose parent runs a line-height below 1 - which every
   display size here does, down to .88 - crops the ascenders off the top of the word.
   It is invisible on lowercase and obvious the moment a capital or a tall letter
   appears, which is why the act headings were arriving with their tops shaved off.
   Pad the clip box and pull the padding straight back out of the layout, so the mask
   grows and nothing moves. */
.reveal > .w{display:inline-block;overflow:clip;vertical-align:bottom;
  padding-top:.22em;margin-top:-.22em;padding-bottom:.06em;margin-bottom:-.06em}
.reveal > .w > span{display:inline-block;
  transform:translate3d(0,1.05em,0);opacity:0;
  transition:transform .95s var(--ease-out),opacity .7s ease;
  transition-delay:calc(var(--i) * 42ms + var(--delay,0ms))}
.is-lit .reveal > .w > span{transform:none;opacity:1}

/* a block is only present while its window of the section runway is open, so
   nothing off-stage can steal focus */
.blk{opacity:0;visibility:hidden;
  transition:opacity .92s var(--ease-io),visibility 0s .92s,transform 1s var(--ease-out)}
.blk.is-lit{opacity:1;visibility:visible;
  transition:opacity .92s var(--ease-io),visibility 0s,transform 1s var(--ease-out)}

/* fade-and-rise for whole blocks */
.rise{opacity:0;transform:translate3d(0,calc(var(--row) * 1.4),0);
  transition:opacity .8s ease,transform 1s var(--ease-out);
  transition-delay:var(--delay,0ms)}
.is-lit .rise,.rise.is-lit{opacity:1;transform:none}

/* ---------------------------------------------------- 8. spec / annotation */

.annot{font-family:var(--font-mono);font-size:var(--micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--bone-62);line-height:1.6}
.annot b{font-weight:400;color:var(--bone)}
.annot .tick{display:inline-block;width:1.6em;height:1px;margin:0 .5em .3em 0;
  background:repeating-linear-gradient(90deg,var(--bone-22) 0 2px,transparent 0 4px)}

.spec{display:inline-flex;align-items:stretch;border:1px dashed var(--bone-22);
  background:rgba(10,9,8,.78);border-radius:2px}
.spec > .spec-k{padding:.65em .9em;font-size:var(--micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-62)}
.spec > .spec-v{padding:.65em .9em;font-size:var(--micro);letter-spacing:.1em;
  color:var(--gold-hot);border-left:1px dashed var(--bone-22);
  font-variant-numeric:tabular-nums;min-width:5.6em}

/* ---------------------------------------------------------- 8b. formulas */

/* Every act shows the geometry it was actually built from. */
.formula {
  --f-line: rgba(255, 237, 215, 0.08);
  display: inline-flex;
  flex-direction: column;
  gap: 0.35em;
  min-width: max-content;
  padding: 0.85em 1.25em 0.8em;
  border: 1px solid rgba(255, 237, 215, 0.08);
  border-radius: 4px;
  color: var(--bone);
  background: rgba(16, 9, 4, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: all 0.25s var(--ease-out);
}
.formula:hover {
  background: rgba(22, 14, 8, 0.65);
  border-color: rgba(224, 162, 68, 0.3);
}
.formula .f-label {
  font-family: var(--font-mono);
  font-size: var(--micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-hot);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.formula .f-label::before {
  content: '✦';
  font-size: 7px;
  color: var(--gold-hot);
}
.formula .f-expr {
  font-family: var(--font-serif);
  font-size: calc(24 * var(--unit));
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--bone);
}
.formula .f-expr sup {
  font-size: 0.55em;
  vertical-align: super;
}
.formula .f-note {
  font-family: var(--font-mono);
  font-size: var(--micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-62);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- 9. page skeleton */

#gl-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}
#gl-canvas canvas{width:100%;height:100%;display:block}
.gl-fallback{position:fixed;inset:0;display:grid;place-content:center;text-align:center;
  padding:var(--pad-x);color:var(--bone-62);font-size:var(--sub2);z-index:1;
  background:radial-gradient(60% 60% at 50% 45%,#191410,var(--ink))}

/* No z-index, and that is deliberate.

   A positioned element with a z-index opens a stacking context, and a child inside a
   stacking context blends against that context's own contents rather than against
   what is painted underneath it. With z-index:2 here, every mix-blend-mode below
   would have been differencing against nothing and returning its own colour - the
   rule would appear to do absolutely nothing, which is the usual way this is got
   wrong. With z-index:auto the interface still paints over the canvas, because it
   comes after it in the document, and the blending reaches the render behind it. */
#ui{position:relative;pointer-events:none;isolation:auto}
#ui a,#ui button,#ui input,#ui iframe,#ui .pointer{pointer-events:auto}

#site-content{position:relative;width:100%;overflow-x:clip}
#pages-container{position:relative;width:100%}

.section{position:relative;width:100%;height:calc(var(--h,100) * var(--vh))}
.section__inner{position:sticky;top:0;height:calc(var(--vh) * 100);width:100%;
  overflow:hidden}
.section__stage{position:absolute;inset:0;
  padding:var(--pad-y) var(--pad-x);display:block}


/* ------------------------------------------------- 10. the sound toggle

   The only permanent control on the page. There is no header, no chapter nav, no
   progress rail and no percentage: a reader is never told how far they have come or
   how much is left. It is the one piece of chrome whose absence is doing work. */

/* The sound control: a seam, not a button.

   Silence is a straight line. Sound is the same line, alive. There is no pill, no
   border and no word - a control that has to be labelled in a piece like this is a
   control that has not been designed. The accessible name carries what it does. */

/* ------------------------------------------------- 10. the sound control */

#sound-toggle.masthead-sound {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 237, 215, 0.04);
  border: 1px solid rgba(255, 237, 215, 0.14);
  border-radius: 2px;
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--bone-70);
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: static;
  margin: 0;
}

#sound-toggle.masthead-sound:hover {
  background: rgba(224, 162, 68, 0.1);
  border-color: var(--gold-hot);
  color: var(--bone);
  transform: translateY(-1px);
}

#sound-toggle.masthead-sound.is-on {
  background: rgba(224, 162, 68, 0.14);
  border-color: var(--gold-hot);
  color: var(--gold-hot);
  box-shadow: 0 0 12px rgba(224, 162, 68, 0.22);
}

.sound-visualizer {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 12px;
  width: 14px;
}

.sound-visualizer i {
  flex: 1;
  width: 2px;
  height: 2px;
  background: var(--bone-45);
  border-radius: 1px;
  transition: height 0.3s ease, background 0.3s ease;
}

#sound-toggle.masthead-sound:hover .sound-visualizer i {
  background: var(--bone);
}

#sound-toggle.masthead-sound.is-on .sound-visualizer i {
  background: var(--gold-hot);
  animation: sound-wave 0.9s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 0.16s);
}

@keyframes sound-wave {
  0% { height: 2px; }
  50% { height: 11px; }
  100% { height: 3px; }
}

.sound-label {
  white-space: nowrap;
}

@media (prefers-reduced-motion:reduce){
  #sound-toggle.masthead-sound.is-on .sound-visualizer i { animation: none; height: 9px; }
}


/* ---------------------------------------------------- 10b. the two words

   The whole vocabulary of the system. Deliberately not styled as an alert: no
   panel, no icon, no colour that means "wrong". Same face and weight as the
   headings, because it is not an error - it is the only thing the site ever says
   to the person reading it. There is no third state, and nothing at all appears
   for getting it right. */

#verdict{position:fixed;left:0;right:0;top:50%;z-index:58;
  display:flex;justify-content:center;align-items:center;pointer-events:none;
  opacity:0;transform:translate3d(0,calc(-50% + 1.2rem),0);
  transition:opacity .45s var(--ease-out),transform .6s var(--ease-out),visibility 0s .6s;
  visibility:hidden}
#verdict.is-on{opacity:1;transform:translate3d(0,-50%,0);visibility:visible;
  transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}

.verdict-box{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;
  padding:1.1rem 2.2rem;border-radius:1.2rem;
  background:rgba(16,9,4,.84);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--gold-30);box-shadow:0 12px 36px rgba(0,0,0,.65),0 0 24px rgba(224,162,68,.12);
  pointer-events:none;
}
.verdict-discipline{
  font-family:var(--font-mono);font-size:var(--micro);font-weight:600;
  letter-spacing:.22em;color:var(--gold-hot);text-transform:uppercase;
}
.verdict-word{
  font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;
  letter-spacing:.04em;color:var(--bone);line-height:1.1;
}
.verdict-sub{
  font-family:var(--font-mono);font-size:var(--micro);color:var(--bone-62);
  letter-spacing:.04em;max-width:34ch;
}

/* --------------------------------------------------------- 13. cursor label */

#cursor-label{position:fixed;top:0;left:0;z-index:99999;pointer-events:none;
  font-size:var(--micro);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  background:var(--gold-hot);padding:.5em .85em;border-radius:2em;white-space:nowrap;
  transform:translate3d(-50%,-50%,0) scale(var(--cs,0));opacity:var(--co,0);
  transition:transform .4s var(--ease-out),opacity .25s ease;transform-origin:50% 50%}

/* ------------------------------------------------------------ 14. preloader */

/* ============================================================================
   PRELOADER - ORBITS

   Bone paper instead of another black curtain: the opening reads like the drawing
   that precedes the object. Eight lines carry the vocabulary of the portfolio while
   their measured lengths breathe around one fixed centre.
   ========================================================================= */

html.is-loading,html.is-loading body{overflow:hidden}

#preloader{position:fixed;inset:0;z-index:80;overflow:hidden;pointer-events:auto;
  display:grid;place-items:center;color:var(--ink);background:var(--paper);
  touch-action:none;isolation:isolate;will-change:opacity}
#preloader::before{content:'';position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(247,196,110,.2),transparent 28%),
    radial-gradient(circle at 18% 20%,rgba(108,95,81,.13),transparent 25%),
    radial-gradient(circle at 82% 78%,rgba(224,162,68,.12),transparent 24%);
  filter:blur(24px)}
#preloader::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:var(--grain-src);background-size:180px 180px;
  opacity:.035;mix-blend-mode:multiply}
#preloader.is-done{display:none}

.pre-orbits{width:min(88vmin,980px);height:min(88vmin,980px);overflow:visible;
  transform-origin:50% 50%;will-change:transform,opacity}
.pre-orbits path{fill:none}
.pre-orbits text{fill:var(--ink);font-family:var(--font-display);font-size:14px;
  font-weight:600;letter-spacing:2px;text-transform:uppercase}
.pre-orbits text:nth-of-type(2n){fill:var(--umber)}
.pre-orbits text:nth-of-type(4n+1){fill:var(--gold)}

.pre-center{position:absolute;left:50%;top:50%;z-index:2;display:flex;
  flex-direction:column;align-items:center;gap:.7rem;transform:translate(-50%,-50%);
  min-width:9rem;will-change:transform,opacity}
.pre-counter{display:flex;align-items:flex-start;justify-content:center;line-height:.78}
.pre-count{min-width:2.2ch;text-align:center;font-family:var(--font-display);font-weight:600;
  font-size:clamp(3.6rem,8vw,7.8rem);letter-spacing:-.075em;
  font-variant-numeric:tabular-nums;text-shadow:0 0 32px rgba(223,173,72,0.22)}
.pre-unit{margin:.25em 0 0 .45em;font-size:.72rem;letter-spacing:.2em;color:var(--umber)}
.pre-center-rule{display:block;width:4.8rem;height:2px;background:rgba(223,173,72,0.18);
  border-radius:999px;position:relative;overflow:hidden;margin:4px auto}
.pre-center-rule::after{content:'';position:absolute;top:0;left:0;bottom:0;
  width:var(--progress,0%);background:linear-gradient(90deg,var(--gold),var(--gold-hot));
  box-shadow:0 0 8px var(--gold-hot);border-radius:inherit;transition:width .1s linear}
.pre-status{font-family:var(--font-mono);font-size:.64rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-hot);white-space:nowrap;text-align:center;
  transition:all .2s ease;opacity:.9}

.pre-edge{position:absolute;left:var(--pad-x);right:var(--pad-x);z-index:4;
  display:flex;justify-content:space-between;gap:2rem;font-family:var(--font-display);
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(16,9,4,.58);will-change:opacity}
.pre-edge--top{top:var(--pad-y)}
.pre-edge--bottom{bottom:var(--pad-y)}

@media (max-width:767px), (max-width:1024px) and (orientation:portrait){
  .pre-orbits{width:112vmin;height:112vmin}
  .pre-orbits text{font-size:16px;letter-spacing:2.5px}
  .pre-edge{font-size:.625rem;letter-spacing:.14em}
  .pre-edge--bottom span:first-child,.pre-edge--top span:last-child{display:none}
  .pre-edge--bottom{justify-content:flex-end}
}

@media (max-height:520px) and (orientation:landscape){
  .pre-orbits{width:112vmax;height:112vmax}
  .pre-count{font-size:3.4rem}
  .pre-edge--top{top:1rem}.pre-edge--bottom{bottom:1rem}
}

#grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;
  background-image:var(--grain-src);background-size:180px 180px}
/* The grain used to crawl six times a second in overlay blend, which re-composited a
   full-screen layer over the canvas on every step. The WebGL finish pass already
   carries a moving grain, so this one only has to texture the type, and still. */

/* ============================================================================
   ACT I - HERO
   ========================================================================= */

#hero .section__stage{display:block}
#hero-left{position:absolute;left:var(--pad-x);top:calc(var(--pad-y) + var(--row) * 3);
  width:calc(var(--span) * 7.5);z-index:2;pointer-events:none}
#hero-tag{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:calc(10.5 * var(--unit));letter-spacing:.22em;
  line-height:1.2;text-transform:uppercase;color:var(--gold-hot);font-weight:500}
#hero-tag::before{content:'✦';font-size:9px;color:var(--gold-hot);
  animation:pulse-dot 3s infinite ease-in-out}
#hero-word{margin:calc(var(--row) * 1.2) 0 0 -.055em;color:var(--bone);line-height:.88}
#hero-word .t-h1{font-family:var(--font-display);font-size:calc(168 * var(--unit));
  font-weight:500;letter-spacing:-.04em;text-shadow:0 0 60px rgba(255,237,215,0.06)}
#hero-sub{margin-top:calc(var(--row) * 1.618);font-family:var(--font-mono);
  font-size:calc(11 * var(--unit));letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-62)}

#hero-copy{position:absolute;right:var(--pad-x);top:50%;transform:translateY(-50%);
  width:calc(var(--span) * 4.8);z-index:3}
#hero-copy .t-body2{font-size:calc(18.5 * var(--unit));line-height:1.45;color:var(--bone);font-weight:400}
#hero-copy .hero-seam{font-size:calc(14 * var(--unit));line-height:1.55;color:var(--bone-62);margin-top:12px}

.hero-jump{display:flex;align-items:center;gap:12px;margin-top:calc(var(--row) * 1.618)}
.hero-jump .pill{height:38px;padding:0 20px;font-family:var(--font-mono);
  font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;transition:all .25s var(--ease-out);cursor:pointer !important}
.hero-jump .pill.is-gold{background:rgba(224,162,68,0.12);border:1px solid rgba(224,162,68,0.45);
  color:var(--bone)}
.hero-jump .pill.is-gold:hover{background:rgba(224,162,68,0.25);border-color:var(--gold-hot);
  color:#fff;transform:translateY(-1px);box-shadow:0 6px 20px rgba(224,162,68,0.22)}
.hero-jump .pill.is-ghost{background:rgba(255,237,215,0.04);border:1px solid rgba(255,237,215,0.14);
  color:var(--bone-70)}
.hero-jump .pill.is-ghost:hover{background:rgba(255,237,215,0.1);border-color:rgba(255,237,215,0.35);
  color:var(--bone);transform:translateY(-1px)}

.hero-divider{width:100%;height:1px;
  background:linear-gradient(90deg,rgba(224,162,68,0.3),rgba(255,237,215,0.06) 60%,transparent);
  margin:calc(var(--row) * 1.4) 0}

.hero-blueprint-card{display:flex;flex-direction:column;gap:8px;padding:12px 16px;
  background:rgba(16,9,4,0.4);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,237,215,0.08);border-radius:4px;transition:all .25s var(--ease-out)}
.hero-blueprint-card:hover{background:rgba(22,14,8,0.65);border-color:rgba(224,162,68,0.3)}
.blueprint-formula-head{display:flex;align-items:center;gap:6px}
.blueprint-formula-pip{width:4px;height:4px;border-radius:50%;background:var(--gold-hot);
  box-shadow:0 0 6px var(--gold-hot)}
.blueprint-formula-tag{font-family:var(--font-mono);font-size:8px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hot)}
.blueprint-formula-math{font-family:var(--font-serif);font-size:calc(22 * var(--unit));
  line-height:1.15;color:var(--bone);letter-spacing:.02em}
.blueprint-formula-meta{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-62)}
.blueprint-formula-meta .formula-bullet{color:var(--gold-30)}

#hero-card.specimen-tag{position:absolute;left:var(--pad-x);bottom:calc(var(--pad-y) + 8px);
  z-index:4;display:flex;flex-direction:column;gap:4px;padding:10px 16px;
  background:rgba(16,9,4,0.4);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,237,215,0.08);border-radius:4px;max-width:calc(var(--span) * 4);
  pointer-events:auto;transition:all .25s var(--ease-out)}
#hero-card.specimen-tag:hover{background:rgba(22,14,8,0.65);border-color:rgba(224,162,68,0.3)}
.specimen-header{display:flex;align-items:center;gap:6px}
.specimen-pip{width:4px;height:4px;border-radius:50%;background:var(--gold-hot);
  box-shadow:0 0 6px var(--gold-hot)}
.specimen-code{font-family:var(--font-mono);font-size:8px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hot)}
.specimen-title{font-family:var(--font-serif);font-size:16px;line-height:1.15;
  color:var(--bone);letter-spacing:.02em}
.specimen-meta{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-62)}

#hero-annot.hero-scroll-cue{position:absolute;right:var(--pad-x);bottom:calc(var(--pad-y) + 8px);
  z-index:4;display:inline-flex;align-items:center;gap:10px;padding:8px 16px;
  background:rgba(16,9,4,0.4);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,237,215,0.08);border-radius:999px;pointer-events:auto;
  transition:all .25s var(--ease-out)}
#hero-annot.hero-scroll-cue:hover{background:rgba(22,14,8,0.65);border-color:rgba(224,162,68,0.3)}
.scroll-cue-pulse{width:5px;height:5px;border-radius:50%;background:var(--gold-hot);
  box-shadow:0 0 8px var(--gold-hot);animation:pulse-dot 2.2s infinite ease-in-out}
.scroll-cue-text{font-family:var(--font-mono);font-size:8.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}
.scroll-cue-arrow{font-family:var(--font-mono);font-size:10px;color:var(--gold-hot);
  animation:scrollBounce 2s ease-in-out infinite}

/* ============================================================================
   ACT II - THE FRACTURE / ZERO GRAVITY
   ========================================================================= */

#fracture .section__stage{display:block}
#frac-head{position:absolute;left:var(--pad-x);top:50%;transform:translateY(-50%);
  width:calc(var(--span) * 5 + var(--col))}
#frac-head p{margin-top:calc(var(--row) * 2.4);color:var(--bone-70);
  width:calc(var(--span) * 4)}
#frac-head .formula{margin-top:calc(var(--row) * 2.4)}
#frac-huge{position:absolute;left:0;right:0;top:50%;text-align:center;
  transform:translateY(-50%);mix-blend-mode:screen;color:var(--paper)}
#frac-huge .t-h1{font-size:calc(150 * var(--unit));letter-spacing:-.045em}
#frac-hint{position:absolute;left:calc(var(--pad-x) + var(--span) * 1);bottom:24%;
  display:flex;align-items:center;gap:.9em;color:var(--bone-62)}
#frac-hint .hand{width:calc(26 * var(--unit));height:calc(32 * var(--unit));
  animation:handwave 2.6s var(--ease-io) infinite}
@keyframes handwave{0%,100%{transform:translate(-12%,0) rotate(-8deg)}50%{transform:translate(12%,-6%) rotate(6deg)}}
#frac-spec{position:absolute;right:var(--pad-x);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:calc(var(--row) * .8);align-items:flex-end}

/* ============================================================================
   ACT III - THE DROP AND THE REPAIR
   ========================================================================= */

#drop .section__stage{display:block}
.drop-head{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(var(--pad-y) + var(--row) * 7);width:calc(var(--span) * 7);text-align:center}
.drop-head .t-h2{margin-top:.45em}
.drop-head p{margin:calc(var(--row) * 2.2) auto 0;width:calc(var(--span) * 4);
  color:var(--bone-70)}
#drop-readout{position:absolute;left:50%;transform:translateX(-50%);bottom:26%;
  display:flex;gap:calc(var(--row) * .8)}
#drop-formula{position:absolute;right:var(--pad-x);bottom:calc(var(--pad-y) + var(--row) * 6);
  display:flex;align-items:baseline;gap:1.2em;color:var(--bone-62)}
#drop-formula .f{font-family:var(--font-serif);font-size:var(--h4);color:var(--bone)}

/* ============================================================================
   ACT IV / V - THE BLUEPRINT TABLE
   ========================================================================= */

#blueprint .section__stage{display:block}
#bp-head{position:absolute;left:var(--pad-x);top:calc(var(--pad-y) + var(--row) * 6);
  width:calc(var(--span) * 6);color:var(--ink)}
/* Smaller than the other act heads: five cards share the frame with it, and at h2
   it ran three lines deep straight across the first one. */
#bp-head .t-h2{margin-top:.45em;text-transform:uppercase;font-size:var(--h3)}
#bp-head .t-label,#ui.is-light #bp-head .t-label{color:rgba(16,9,4,.78)}
#blueprint #bp-head,#blueprint #bp-stamp{
  transform:translate3d(0,calc(var(--row) * 1.4),0) scale(.985)}
#blueprint #bp-head.is-lit,#blueprint #bp-stamp.is-lit{transform:none}
#bp-stamp{position:absolute;right:var(--pad-x);top:calc(var(--pad-y) + var(--row) * 6)}
#bp-grid{position:absolute;left:var(--pad-x);right:var(--pad-x);
  bottom:calc(var(--pad-y) + var(--row) * 8);
  display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--gap)}

.sheet{position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  border:1px dashed var(--gold-30);border-radius:calc(var(--row) * .6);
  background:rgba(14,8,3,.9);box-shadow:0 calc(var(--row) * 2) calc(var(--row) * 5) rgba(0,0,0,.55);
  overflow:hidden;padding:calc(var(--row) * 1.4);aspect-ratio:16/9;
  transform:translate3d(0,0,0) scale(var(--s,1));
  transition:border-color .4s ease,background .4s ease,transform .7s var(--ease-out),
             box-shadow .5s ease}
.sheet::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--gold-30) 1px,transparent 0) 0 0/calc(var(--row) * 2) 100%,
    linear-gradient(180deg,var(--gold-30) 1px,transparent 0) 0 0/100% calc(var(--row) * 2);
  opacity:.28;transition:opacity .5s ease}
.sheet:hover,.sheet:focus-visible{border-color:var(--gold);background:rgba(20,11,4,.94);--s:1.014;
  box-shadow:0 calc(var(--row) * 3) calc(var(--row) * 7) rgba(0,0,0,.7)}
.sheet:hover::before{opacity:0}
.sheet-top{position:relative;z-index:3;display:flex;justify-content:space-between;
  font-size:var(--micro);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-62)}
.sheet-top b{font-weight:400;color:var(--gold-hot)}
.sheet-wire{position:absolute;inset:calc(var(--row) * 4) calc(var(--row) * 2);z-index:1;
  display:flex;flex-direction:column;gap:calc(var(--row) * .9);opacity:.85;
  transition:opacity .5s ease}
.sheet-wire i{display:block;height:1px;background:var(--gold-30)}
.sheet-wire i:nth-child(1){width:38%;height:calc(var(--row) * 1.8);
  border:1px solid var(--gold-30);background:none}
.sheet-wire i:nth-child(2){width:78%}
.sheet-wire i:nth-child(3){width:62%}
.sheet-wire i:nth-child(4){width:44%}
.sheet-wire i:nth-child(5){width:22%;height:calc(var(--row) * 1.4);
  border:1px dashed var(--gold-30);border-radius:2em;background:none}
.sheet-shot{position:absolute;inset:0;z-index:2;border:0;width:100%;height:100%;
  opacity:0;transform:scale(1.02);pointer-events:none;
  transition:opacity .55s var(--ease-io),transform .8s var(--ease-out);
  filter:saturate(.85) contrast(1.05)}
.sheet:hover .sheet-shot,.sheet:focus-visible .sheet-shot{opacity:1;transform:none}
.sheet:hover .sheet-wire,.sheet:focus-visible .sheet-wire{opacity:0}
.sheet-bottom{position:absolute;left:calc(var(--row) * 1.4);right:calc(var(--row) * 1.4);
  bottom:calc(var(--row) * 1.4);z-index:3;display:flex;align-items:flex-end;
  justify-content:space-between;gap:1em}
.sheet-name{display:block;font-family:var(--font-display);font-weight:600;
  font-size:var(--h4);letter-spacing:-.02em;line-height:1}
.sheet-domain{display:block;margin-top:.4em;font-size:var(--micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-62)}
.sheet-enter{display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.1em;
  border:1px solid var(--gold-30);border-radius:3em;font-size:var(--micro);
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hot);
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.sheet:hover .sheet-enter{background:var(--gold-hot);color:var(--ink);border-color:var(--gold-hot)}
#bp-note{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--pad-y) + var(--row) * 2);padding:.8em 1.4em;border-radius:3em;
  background:rgba(16,9,4,.92);color:var(--bone)}
#blueprint #bp-note{transform:translateX(-50%) translateY(calc(var(--row) * 1.4)) scale(.985)}
#blueprint #bp-note.is-lit{transform:translateX(-50%)}

/* ---------------------------------------------- the daylight passages

   Two of them: the studio in act one and the bench in act four. The chrome is bone
   on near black everywhere else, which on a cyclorama is invisible, so the whole
   instrument inverts - ink on paper, with the gold left alone because it is the one
   colour that holds on either ground. */
#ui.is-light{color:var(--bone)}
#ui.is-light #hero-tag,#ui.is-light #hero-sub,#ui.is-light #hero-copy .t-body2,
#ui.is-light #hero-word,#ui.is-light #hero-card .t-label{color:var(--bone)}
#ui.is-light #hero-sub,#ui.is-light #hero-card .t-micro{color:var(--bone-70)}
#ui.is-light .annot,#ui.is-light .t-dim{color:var(--bone-62)}
#ui.is-light #hero-card{background:rgba(20,11,4,.78);border-color:rgba(255,237,215,.18)}
#ui.is-light #hero-copy .o-dash{--dash:rgba(255,237,215,.24)}
#ui.is-light #sound-toggle .seam i{background:rgba(255,237,215,.5)}
#ui.is-light #sound-toggle:hover .seam i{background:var(--bone)}
#ui.is-light #sound-toggle.is-on .seam i{background:var(--gold)}
#ui.is-light #grain{opacity:.028}

#ui.is-light #bp-stamp{color:var(--gold-hot)}
#lit-head .t-h2{color:var(--bone) !important}
#lit-head p{color:var(--bone-70) !important}
#ui.is-light .formula{--f-line:rgba(16,9,4,.25);color:var(--umber);
  border-color:rgba(16,9,4,.22);border-left-color:var(--gold);
  background:rgba(16,9,4,.94);box-shadow:0 14px 36px rgba(16,9,4,.2)}
#ui.is-light .formula .f-expr{color:var(--bone)}
#ui.is-light .formula .f-note{color:rgba(255,237,215,.72)}
/* Fixed navigation is composited in difference mode, so it stays readable across
   both the dark theatre and the daylight workbench without palette switching. */
#sound-toggle.is-hidden{opacity:0;pointer-events:none}
#blueprint.is-entering .sheet{opacity:0;transform:scale(1.35);transition:all .85s var(--ease-anticipate)}

/* the case study: copy on the left, the live site on the right */
.case{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;z-index:70;background:var(--ink);color:var(--bone);
  display:flex;flex-direction:column;overflow:hidden;pointer-events:auto}
.case::backdrop{background:var(--ink)}
.case[open]{animation:case-in .6s var(--ease-out) both}
@keyframes case-in{from{opacity:0}to{opacity:1}}
.case-bar{display:flex;align-items:center;justify-content:space-between;gap:1em;flex:none;
  padding:calc(var(--row) * 1.1) var(--pad-x);border-bottom:1px solid var(--bone-22)}
.case-count{font-family:var(--font-mono);font-size:var(--micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--bone-62)}
.case-steps{display:flex;gap:.4em}
.case-steps .pill{padding:.9em 1.2em}
.case-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.case-copy{overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--row) * 4) var(--pad-x) calc(var(--row) * 6);
  border-right:1px solid var(--bone-22);scrollbar-width:thin}
.case-title{font-size:clamp(3rem,calc(120 * var(--unit)),8rem);margin:.18em 0 .12em;line-height:.9}
.case-tagline{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.35rem,calc(36 * var(--unit)),2.4rem);
  line-height:1.15;color:var(--gold-hot);max-width:22em}
.case-meta{display:grid;grid-template-columns:1fr 1fr;gap:1.1em 1.6em;margin:calc(var(--row) * 3) 0;
  padding:calc(var(--row) * 1.6) 0;border-block:1px dashed var(--bone-22)}
.case-meta dt{font-family:var(--font-mono);font-size:var(--micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--bone-62);margin-bottom:.35em}
.case-meta dd{margin:0;font-size:var(--body3);line-height:1.4}
.case-meta a{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em}
.case-part{margin-top:calc(var(--row) * 2.6);max-width:38em}
.case-part h3{font-family:var(--font-mono);font-size:var(--label);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-hot);margin-bottom:.8em}
.case-part p,.case-part li{font-size:max(1.0625rem,calc(18 * var(--unit)));line-height:1.6;color:var(--bone)}
.case-part ol{margin:0;padding:0;list-style:none;counter-reset:step}
.case-part li{counter-increment:step;position:relative;padding:.7em 0 .7em 2.6em;border-top:1px solid var(--bone-22)}
.case-part li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:.95em;
  font-family:var(--font-mono);font-size:.75em;color:var(--gold)}
.case-actions{display:flex;flex-wrap:wrap;gap:.6em;margin-top:calc(var(--row) * 4)}
.case-rise{animation:case-rise .9s var(--ease-out) both;animation-delay:calc(var(--d,0) * 60ms + 120ms)}
@keyframes case-rise{from{opacity:0;transform:translate3d(0,1.4rem,0)}to{opacity:1;transform:none}}
.case-preview{position:relative;min-height:0;display:flex;flex-direction:column;background:#0b0603}
.case-frame-container{display:flex;flex-direction:column;width:100%;height:100%;position:relative}
.case-frame-header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.65rem 1.2rem;background:#140c06;border-bottom:1px solid rgba(255,237,215,.1);
  font-family:var(--font-mono);font-size:var(--micro);color:var(--bone-62);letter-spacing:.08em;
}
.case-frame-dot{width:6px;height:6px;border-radius:50%;background:#48bb78;box-shadow:0 0 8px #48bb78}
.case-frame-origin{font-weight:600;color:var(--bone);text-transform:lowercase}
.case-frame-status{color:var(--gold-hot);letter-spacing:.12em}
.case-frame{flex:1;width:100%;height:100%;border:0;background:#0b0603;transition:opacity .4s ease}
.case-frame.is-loading{opacity:0}
.case-frame.is-ready{opacity:1}
.case-loading{position:absolute;inset:2rem 0 0 0;display:grid;place-content:center;text-align:center;gap:.6em;
  font-family:var(--font-mono);color:var(--bone-62);font-size:var(--label);letter-spacing:.1em;text-transform:uppercase}
.case-loading-spin{width:24px;height:24px;margin:0 auto;border:2px solid var(--bone-22);border-top-color:var(--gold-hot);border-radius:50%;animation:case-spin .8s linear infinite}
@keyframes case-spin{to{transform:rotate(360deg)}}
.case-loading-domain{font-weight:600;color:var(--bone)}
.case-loading-sub{font-size:var(--micro);color:var(--bone-62)}

/* Architectural Blueprint Card Fallback */
.case-blueprint-card{
  flex:1;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--pad-x) * 1.2);background:linear-gradient(180deg,#120b05,#0a0502);
  border-left:1px solid var(--bone-22);
}
.blueprint-top{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:var(--micro);letter-spacing:.12em}
.blueprint-status{display:flex;align-items:center;gap:.5rem;color:var(--gold-hot)}
.blueprint-pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold-hot);box-shadow:0 0 8px var(--gold-hot)}
.blueprint-edition{color:var(--bone-62)}
.blueprint-center{margin:auto 0;display:flex;flex-direction:column;gap:.6rem}
.blueprint-label{font-family:var(--font-mono);font-size:var(--micro);color:var(--bone-62);letter-spacing:.18em}
.blueprint-domain{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,3rem);font-weight:700;color:var(--bone);letter-spacing:-.01em;line-height:1}
.blueprint-desc{font-size:var(--sub2);color:var(--bone-70);line-height:1.45;max-width:44ch}
.blueprint-telemetry{
  display:grid;grid-template-columns:1fr;gap:.6rem;padding:1rem 1.2rem;
  background:rgba(255,237,215,.03);border:1px solid var(--bone-22);border-radius:.4rem;margin:1.4rem 0;
}
.blueprint-telemetry-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.blueprint-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.case-empty{flex:1;display:grid;place-content:center;justify-items:center;gap:1em;padding:var(--pad-x);text-align:center}
@media (max-width:1023px){
  .case-body{grid-template-columns:1fr;grid-template-rows:auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .case-copy{overflow:visible;border-right:0;padding:calc(var(--row) * 2.5) var(--pad-x) calc(var(--row) * 6)}
  .case-preview{min-height:48vh;border-top:1px solid var(--bone-22)}
  .case-meta{grid-template-columns:1fr}
  .case-count{display:none}
}
@media (max-width:600px){
  .case-bar{padding:12px 16px;padding-top:max(12px, env(safe-area-inset-top))}
  .case-title{font-size:clamp(2.2rem, 9vw, 3.6rem);line-height:.95;word-break:break-word}
  .case-tagline{font-size:clamp(1.1rem, 4.2vw, 1.6rem);line-height:1.2}
  .case-copy{padding:20px 16px 48px}
  .case-actions{flex-direction:column;align-items:stretch}
  .case-actions .pill{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.case[open],.case-rise{animation:none}}

/* contact */
#ct-links .ct-h{font-family:var(--font-mono);font-size:var(--micro);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-62);margin-bottom:.9em}
#ct-made .ct-h{font-family:var(--font-mono);font-size:var(--micro);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-62);margin:0 0 .8em}
#ct-links .ct-link{display:flex;align-items:baseline;justify-content:space-between;gap:1em;width:100%;
  text-align:left;cursor:pointer;font-size:var(--sub2);letter-spacing:.02em;
  padding:.45em 0;border-bottom:1px solid var(--bone-22);margin:0}
#ct-links .ct-sub{font-family:var(--font-mono);font-size:var(--micro);letter-spacing:.06em;color:var(--bone-62);
  text-transform:none;white-space:nowrap}
#ct-links .ct-link:hover .ct-sub,#ct-links .ct-link:focus-visible .ct-sub{color:var(--gold-hot)}

/* ============================================================================
   ACT VIII - TWO WINGS

   The two rules are printed as a spec list, not as a moral. The act does not say
   which instinct was right and the copy must not either - it states what each one
   does and lets the render finish the sentence.
   ========================================================================= */

#butterfly .section__stage{display:block}
#fly-head{position:absolute;left:var(--pad-x);top:calc(var(--pad-y) + var(--row) * 5);
  width:calc(var(--span) * 6)}
#fly-head .t-h2{line-height:1.04}

#fly-rules{position:absolute;left:var(--pad-x);bottom:calc(var(--pad-y) + var(--row) * 6);
  display:flex;flex-direction:column;gap:calc(var(--row) * 1.1);
  font-size:var(--micro);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-70)}
#fly-rules span{display:flex;align-items:center;gap:.9em}
#fly-rules i{display:block;width:calc(22 * var(--unit));height:1px;background:var(--gold-30);flex:none}

#fly-tail{position:absolute;right:var(--pad-x);bottom:calc(var(--pad-y) + var(--row) * 5);
  width:calc(var(--span) * 5);text-align:right}

/* ============================================================================
   ACT VI - THE MANIFESTO LAB
   ========================================================================= */

#manifesto .section__stage{display:block}
#man-head{position:absolute;left:var(--pad-x);top:calc(var(--pad-y) + var(--row) * 6)}
#man-readout{position:absolute;right:var(--pad-x);top:calc(var(--pad-y) + var(--row) * 6);
  display:flex;flex-direction:column;gap:calc(var(--row) * .7);align-items:flex-end}
/* It takes the place act five's heading has already vacated - same corner, same
   baseline - so the count reads as the answer to the sentence that was there. */
#man-thirty{position:absolute;left:var(--pad-x);top:calc(var(--pad-y) + var(--row) * 6);
  display:flex;flex-direction:column;gap:calc(var(--row) * .8);align-items:flex-start}
#man-thirty .t-h1{font-size:calc(196 * var(--unit));letter-spacing:-.05em;
  line-height:.86;margin-left:-.055em}
#man-thirty .annot{letter-spacing:.24em}

#man-lines{position:absolute;left:var(--pad-x);bottom:calc(var(--pad-y) + var(--row) * 6);
  width:calc(var(--span) * 6);color:var(--bone-62)}

/* ============================================================================
   ACT VII - THE GOLDEN METAMORPHOSIS
   ========================================================================= */

#finale .section__stage{display:block}
#fin-axis{position:absolute;left:50%;top:var(--pad-y);bottom:var(--pad-y);width:1px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,var(--bone-22) 0 2px,transparent 0 6px)}
#fin-top{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(var(--pad-y) + var(--row) * 9);width:calc(var(--span) * 8);text-align:center}
#fin-top .t-serif{margin-top:.3em;font-size:calc(70 * var(--unit));line-height:1}
#fin-bottom{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--pad-y) + var(--row) * 5);width:calc(var(--span) * 8);
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--row) * 2)}
#fin-bottom .t-serif{font-size:calc(70 * var(--unit));line-height:1;text-align:center}

/* ============================================================================
   CONTACT
   ========================================================================= */

#contact .section__inner{overflow:visible}
/* The board dissolves into the colophon seamlessly across the entire viewport.
   No boxed container or hard cutoff: full bleed gradient spanning the screen. */
#contact .section__stage::before{
  content:'';position:absolute;
  inset:-60vh -12vw -12vh;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 75% 65% at 50% 30%,transparent 0%,
      rgba(16,9,4,.25) 35%,rgba(16,9,4,.7) 65%,rgba(16,9,4,.95) 85%,var(--ink) 100%),
    linear-gradient(180deg,transparent 0%,rgba(16,9,4,.12) 15%,
      rgba(16,9,4,.5) 45%,rgba(16,9,4,.92) 75%,var(--ink) 100%);
  opacity:calc(.85 + var(--active-ratio,0) * .15);
  transform:translate3d(0,calc((1 - var(--active-ratio,0)) * 6vh),0);
  will-change:transform,opacity}
/* Restrained amber bloom connecting the colophon with the kintsugi seam */
#contact .section__stage::after{
  content:'';position:absolute;
  left:0;right:0;top:-20vh;height:100vh;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 48% 28% at 50% 55%,
    rgba(224,162,68,.1),rgba(224,162,68,.03) 44%,transparent 72%);
  opacity:calc(.14 + var(--active-ratio,0) * .45);
  transform:scale(calc(.92 + var(--active-ratio,0) * .08));
  transform-origin:50% 55%;will-change:transform,opacity}

#contact{position:relative;width:100%}
#contact .section__inner{overflow:visible;max-width:100%}
#contact .section__stage{
  position:absolute;inset:0;width:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  isolation:isolate;z-index:0;
  padding:clamp(20px,3.8vh,48px) var(--pad-x);
  box-sizing:border-box}

.ct-wrap{
  width:100%;max-width:1240px;margin-inline:auto;
  display:flex;flex-direction:column;
  gap:clamp(14px,2.2vh,28px);position:relative;z-index:1;
  box-sizing:border-box}

#ct-top{display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:20px;width:100%}
.ct-intro{display:flex;flex-direction:column;gap:8px;max-width:min(680px,100%)}
#ct-statement{width:100%;text-transform:uppercase;font-size:clamp(1.15rem,2.1vw,1.8rem);line-height:1.24}
.ct-direct-note{margin:0;letter-spacing:.03em;font-size:var(--sub2);line-height:1.45;color:var(--bone-62)}
.ct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:480px}

#ct-mid{margin:0;width:100%}
.ct-body-grid{display:grid;grid-template-columns:2.2fr 1fr;
  gap:clamp(24px,3.5vw,48px);align-items:start;width:100%}
#ct-links{display:grid;grid-template-columns:0.95fr 1.05fr 1.9fr;gap:clamp(16px,2vw,32px);
  margin-top:0}
#ct-links h5{font-size:var(--micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone-62);font-weight:400;margin-bottom:.9em}
#ct-links a{display:block;font-size:var(--sub2);letter-spacing:.02em;margin-bottom:.35em}
/* The wreckage, printed as flatly as a parts list. A leader rule does the work a
   table would otherwise need, and there is not one adjective in the column. */
#ct-killed {
  min-width: 300px !important;
}
#ct-killed ul{list-style:none;margin:.2em 0 0;padding:0}
#ct-killed li{display:flex;align-items:baseline;justify-content:space-between;gap:.8em;padding:.36em 0;
  font-size:var(--sub2);color:var(--bone-70);line-height:1.4}
#ct-killed li span:first-child{flex-shrink:1}
#ct-killed li i{flex:1;min-width:14px;height:1px;
  background:repeating-linear-gradient(90deg,var(--bone-22) 0 2px,transparent 0 5px)}
#ct-killed li span:last-child{font-size:var(--micro);letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;flex-shrink:0}

#ct-made{margin-top:0;max-width:100%}
/* running prose is set as prose, not as a caps label */
#ct-made p.annot{font-family:var(--font-text);text-transform:none;letter-spacing:0;
  font-size:max(.875rem,calc(14 * var(--unit)));line-height:1.55;margin-bottom:.55em}
#ct-made p.annot a{text-decoration:underline;text-decoration-color:var(--gold-30);text-underline-offset:.2em}
#ct-made h5{font-size:var(--micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone-62);margin:0 0 .8em}
#ct-replay{margin-top:clamp(12px,1.8vh,22px)}

/* The only line about the maker, and it is the one that says the maker was not
   what was on offer. It gets the weight the name would have had. */
#ct-line{font-size:var(--label);letter-spacing:.28em;color:var(--bone)}
#ct-bottom{display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:var(--gap);
  color:var(--bone-62);padding-bottom:clamp(8px,1.5vh,16px);width:100%}

/* ============================================================================
   RESPONSIVE
   ========================================================================= */


@media (max-width:1024px){
  :root{--unit:min(var(--inner-w) / 900, (var(--vh) * 100) / 900);--pad-x:5vw}
  #hero-copy{left:var(--pad-x);top:auto;bottom:calc(var(--pad-y) + var(--row) * 16);
    transform:none;width:calc(var(--span) * 8)}
  #hero-card,#hero-frame,#frac-hint,#drop-formula{display:none}
  #bp-grid{grid-template-columns:1fr;row-gap:var(--gap)}
  #bp-grid .sheet:last-child{display:none}
  #ct-statement{width:100%}
  #ct-links{grid-template-columns:1fr 1fr}
  .ct-body-grid{grid-template-columns:1fr}
}

/* Keyed on shape, not just on width. A 768px tablet held upright has exactly the
   problem a phone has - a frame narrower than the compositions were drawn for - and
   nothing to do with the 1024px rules above, which still assume a wide window. */
@media (max-width:767px), (max-width:1024px) and (orientation:portrait){
  :root{--pad-x:6vw;--unit:min(var(--inner-w) / 460, (var(--vh) * 100) / 900)}
  #frac-spec,#man-readout,#hero-annot{display:none}
  #bp-stamp{display:none}

  /* Every block below is sized in grid columns tuned for the 16 column desktop
     layout, so at 375px they collapse to 140-190px and the display type spills out
     of them a word at a time. On one column they are all simply the page width. */
  #hero-tag,#hero-sub,#hero-copy,#frac-head,#frac-copy,#man-lines,#fin-copy,
  .drop-head,.drop-head p,#bp-head,#fin-top,#fin-bottom,#ct-statement{
    width:var(--inner-w)}
  .drop-head,#fin-top,#fin-bottom{left:var(--pad-x);transform:none}
  #blueprint #bp-head{width:var(--inner-w)}

  /* Display sizes are capped so the longest single word in each headline still fits
     the column. A word cannot wrap, so anything wider is simply clipped away:
     "suspended" at the desktop ramp measures 426px against 330px of page. */
  /* #hero-word carries .t-h1 itself, so a descendant selector here matches nothing -
     which is why the same override at the desktop ramp has never taken effect. */
  #hero-word,#hero-word .t-h1{font-size:calc(112 * var(--unit))}
  #frac-huge .t-h1{font-size:calc(90 * var(--unit))}
  .drop-head .t-h2,#bp-head .t-h2,#frac-head .t-h2{font-size:calc(58 * var(--unit))}
  #fin-top .t-serif,#fin-bottom .t-serif{font-size:calc(54 * var(--unit))}
  #ct-statement{font-size:calc(34 * var(--unit))}

  /* The live read-out sat at 26% and landed on top of the body copy once that copy
     went full width. Drop it to the floor, above the footer. */
  #drop-readout{bottom:calc(var(--pad-y) + var(--row) * 5);gap:calc(var(--row) * .5);
    font-size:.86em}
  #frac-copy{left:var(--pad-x);top:auto;bottom:22%}

  /* The finale copy sits over the lit half of the board, which on a phone fills the
     whole frame instead of occupying a corner of it, so bone type on bright maple
     stops resolving. A soft radial plate carries the words without reading as a
     panel laid over the artwork; it has no edge to notice. */
  #fin-top,#fin-bottom{isolation:isolate}
  #fin-top::before,#fin-bottom::before{content:'';position:absolute;
    inset:-8% -12%;z-index:-1;pointer-events:none;
    background:radial-gradient(ellipse 60% 56% at 50% 48%,
      rgba(16,9,4,.86) 0 34%,rgba(16,9,4,.6) 62%,transparent 80%)}
  #fin-bottom .t-serif,#fin-top .t-serif{
    text-shadow:0 calc(2 * var(--unit)) calc(18 * var(--unit)) rgba(16,9,4,.7)}
  #contact{height:auto !important;min-height:100vh}
  #contact .section__inner{position:relative !important;height:auto !important;min-height:100vh;overflow:visible}
  #contact .section__stage{position:relative !important;inset:auto !important;height:auto !important;
    padding:clamp(40px,8vh,72px) var(--pad-x) clamp(32px,5vh,48px)}
  #contact .section__stage::before{inset:-20vh -12vw -10vh}
  #ct-links{grid-template-columns:1fr;gap:24px}
  #verdict{font-size:calc(22 * var(--unit))}
  .portal-bar{align-items:flex-start;flex-wrap:wrap;font-size:.75rem}
  .portal-bar>span{order:3;width:100%}
  #cursor-label{display:none}
}

/* A phone turned sideways is the one shape neither block above describes: wide
   enough that the 1024px rules do not apply their narrow-screen stacking sensibly,
   but only ~375px tall, so anything the 1024px block moved to the bottom edge lands
   back on top of the hero. Width is not the scarce axis here - height is. */
@media (max-height:520px) and (orientation:landscape){
  #hero-copy{right:calc(var(--pad-x) + var(--span) * .45);left:auto;
    top:50%;bottom:auto;transform:translateY(-50%);width:calc(var(--span) * 5)}
  #hero-card,#hero-annot,#frac-hint{display:none}
  #hero-left{top:calc(var(--pad-y) + var(--row) * 3)}
  /* --row is derived from the viewport height, so sideways it is about 4px and the
     column widths built on it collapse to four words a line. Height is the axis
     under pressure, not width: spend the width that is going spare. */
  .drop-head{width:calc(var(--span) * 11)}
  .drop-head p{width:calc(var(--span) * 8)}
  #drop-readout{bottom:calc(var(--pad-y) + var(--row) * 2)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .reveal > .w > span{transform:none;opacity:1}
  .rise{opacity:1;transform:none}

}

/* ============================================================================
   ACT V - WHAT THE LIGHT MAKES

   Ink on nothing. This act has no set, no fog and no fill: whatever the reader's
   light is not touching is not drawn, so the page's own type is the only thing on
   screen with a guaranteed value. It sits hard left and stays out of the middle,
   which is where the light is going to be.
   ========================================================================= */

#light .section__stage{display:block}
#lit-head{position:absolute;left:var(--pad-x);top:50%;transform:translateY(-50%);
  width:calc(var(--span) * 5)}
#lit-head p{margin-top:calc(var(--row) * 2);color:var(--bone-70)}
#lit-hint{position:absolute;left:var(--pad-x);bottom:calc(var(--pad-y) + var(--row) * 4)}
#lit-tail{position:absolute;left:var(--pad-x);right:var(--pad-x);
  top:50%;transform:translateY(-50%);text-align:center}
#lit-tail .t-h2{line-height:1.06}

/* ============================================================================
   ACT VII - THE GOLD SEA

   The one act built to be played with. Everything the page puts on top of it is
   pushed to the edges: the middle belongs to the water and to whatever the reader
   is doing to it.
   ========================================================================= */

#sea .section__stage{display:block}
#sea-head{position:absolute;left:var(--pad-x);top:calc(var(--pad-y) + var(--row) * 4);
  width:calc(var(--span) * 6)}
#sea-head .t-h2{line-height:1.02}
#sea-hint{position:absolute;left:var(--pad-x);bottom:calc(var(--pad-y) + var(--row) * 4)}
#sea-tail{position:absolute;right:var(--pad-x);bottom:calc(var(--pad-y) + var(--row) * 4);
  width:calc(var(--span) * 5);text-align:right}

/* ============================================================================
   THE INTERFACE IN DIFFERENCE

   Everything written on this page except the gold is composited against the render
   behind it rather than laid on top of it. Two reasons, and the second is the one
   that matters:

   1. Contrast that cannot fail. This piece runs from near black to a blown-out white
      bench and back, and a fixed bone type colour is illegible at one end or the
      other. Difference inverts itself against whatever it lands on: bone on the dark
      theatre stays bone, the same bone over the lit workbench comes back as ink. No
      per-act colour overrides, no light/dark class to maintain, and it cannot be
      caught out by a frame nobody previewed.

   2. It reads as film. Titles that interact with the image instead of sitting on a
      plate are the difference between a caption and a title card.

   The gold is the exception, and it is the only one. It is the accent, it carries the
   seams and the accent has to be the same metal the object is repaired with - put it
   through difference and it turns cyan against the dark, which is the one colour this
   piece must never contain.
   ========================================================================= */

/* WHERE DIFFERENCE WORKS, AND WHERE IT DOES NOT

   Difference returns |backdrop - source|. With a near-white source that is the exact
   negative of whatever is behind it, and the contrast it ends up with is |2b - 1|:
   maximum against black, maximum against paper, and *zero* against a mid tone. Half
   the frames in this piece are mid tones - a lit sweep, a gold sea, a statue lit by
   one lamp - and on all of them the type came back the same value as the thing behind
   it. It is a striking device on two thirds of the range and blind on the other third,
   and no amount of picking a better source colour changes that; it is the arithmetic.

   So it is kept where it was demonstrably right - the workbench, whose backdrop is a
   large, evenly lit sheet - and everywhere else the type goes back to ordinary
   compositing with the light/dark system the site already had, plus a scrim.

   The scrim is the part worth getting right. It is not a panel: it is a soft, very
   wide radial shadow bled out well past the text, with no edge anywhere near a
   letterform. At these opacities it is invisible as an object and still buys the two
   stops of separation that make bone type hold over a bright sea. */

/* The workbench used to set its whole layer in difference blend. Over the cream sheet
   that printed the heading in a cold blue, and a blended full-screen layer is
   composited against the canvas on every frame. The sheet is a known, even value,
   so the type is simply set in ink on it. */
#blueprint .section__inner .t-gold{color:#7a4a10}

/* The scrim is gone.

   It was a soft radial shadow behind the type, and at these sizes a radial gradient
   still has to live inside a box - so where the gradient had not quite reached zero by
   the edge of that box, the box edge printed. Across a dark render that is a straight
   horizontal seam running the width of the frame, and once seen it cannot be unseen.
   It was solving a contrast problem by adding a worse one.

   Contrast is handled where it belongs instead: the light/dark passages set the type
   colour, and the render behind the type is composed so there is somewhere to put it.
   If a frame ever fights the words, the fix is the frame. */

#cursor-label{mix-blend-mode:difference}

#ui.is-light #work-head,#ui.is-light .work-row .w-name,
#ui.is-light .work-row .w-num,#ui.is-light .work-row .w-domain,
#ui.is-light .work-row .w-year{color:var(--bone)}

/* ============================================================================
   ACT VII - ONE STATION ONLY
   ========================================================================= */

#bewilder .section__stage{display:block}
#bew-head{position:absolute;left:var(--pad-x);top:50%;transform:translateY(-50%);
  width:calc(var(--span) * 5)}
#bew-head p{margin-top:calc(var(--row) * 2);color:var(--bone-70)}

/* The instrument. It reports proximity and never direction, which is the one design
   decision in the act that matters: an arrow would turn a valley into an errand. */
#bew-meter{position:absolute;right:var(--pad-x);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--row) * .7)}
.bew-value{font-family:var(--font-display);font-weight:600;
  font-size:calc(64 * var(--unit));letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--bone)}
.bew-bar{display:block;width:calc(var(--span) * 2);height:1px;background:var(--bone-22);
  position:relative}
.bew-bar::after{content:'';position:absolute;inset:0 auto 0 0;
  width:calc(var(--a,0) * 100%);background:var(--gold-hot);
  box-shadow:0 0 calc(10 * var(--unit)) var(--gold-30)}

/* Along the floor, not across the middle. The figure resolves dead centre, and a
   centred line of display type lands straight through its face - so the one frame the
   whole act exists to deliver arrives with a caption written over it. */
#bew-tail{position:absolute;left:var(--pad-x);right:var(--pad-x);
  bottom:calc(var(--pad-y) + var(--row) * 3);text-align:left}
#bew-tail .t-h2{font-size:calc(52 * var(--unit))}

/* ============================================================================
   THE COMPASS (REMOVED - INTEGRATED INTO HEADER INDEX & ARCHITECTURAL SITEMAP)
   ========================================================================= */

#compass,
#compass-toggle {
  display: none !important;
}

/* ?perf */
#perf{position:fixed;left:8px;bottom:8px;z-index:90;margin:0;padding:.6em .8em;pointer-events:none;
  font:500 11px/1.5 var(--font-mono);color:#9f9;background:rgba(0,0,0,.78);border-radius:4px;white-space:pre}

/* ============================================================================
   AI ASSISTANT (POUYA AI / ORACLE)
   ========================================================================= */

.ai-trigger {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(14, 8, 4, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 215, 170, 0.22);
  border-radius: 999px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6), 0 0 1px 1px rgba(255, 171, 82, 0.12) inset;
  cursor: pointer;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================================
   KINTSUGI ORACLE — ARCHITECTURAL INTELLIGENCE MONOLITH
   ========================================================================= */



/* Gilded Obsidian Capsule Trigger with 3D Molten Liquid Orb */
.oracle-pill-btn {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 7px 6px 18px;
  background: radial-gradient(130% 130% at 50% 0%, #20170f 0%, #0d0905 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(223, 173, 72, 0.4);
  border-radius: 9999px;
  color: var(--bone);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.85),
    0 0 20px rgba(223, 173, 72, 0.16),
    inset 0 1px 1px rgba(255, 237, 215, 0.22);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  cursor: pointer !important;
  user-select: none;
}

.oracle-pill-btn:hover,
.oracle-pill-btn.is-active {
  background: radial-gradient(130% 130% at 50% 0%, #2c1f13 0%, #120c07 100%);
  border-color: var(--gold-hot);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.95),
    0 0 28px rgba(223, 173, 72, 0.45),
    inset 0 1px 1px rgba(255, 237, 215, 0.35);
  transform: translateY(-2px);
}

.oracle-pill-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.oracle-pill-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--bone);
  text-transform: uppercase;
}

.oracle-pill-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--gold-hot);
  opacity: 0.88;
}

.oracle-pill-pulsar {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-hot);
  box-shadow: 0 0 6px var(--gold-hot);
  animation: pulsar-glow 2s infinite ease-in-out;
}

@keyframes pulsar-glow {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

.oracle-orb-housing {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a2a1a 0%, #100b06 70%);
  padding: 1px;
  box-shadow:
    inset 0 1px 1px rgba(255, 237, 215, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.oracle-orb-canvas {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: block;
}

.oracle-orb-specular-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(223, 173, 72, 0.3);
  pointer-events: none;
}

/* Precision Obsidian & Gilded Trigger Button (English Monospace Architecture) */
.oracle-trigger {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 14px;
  background: rgba(16, 9, 4, 0.9);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(223, 173, 72, 0.45);
  border-radius: 999px;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 600;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.8), 0 0 18px rgba(223, 173, 72, 0.15), inset 0 1px 0 rgba(255, 237, 215, 0.18);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  cursor: pointer !important;
  user-select: none;
}

.oracle-trigger::before {
  content: '[';
  color: var(--gold-hot);
  opacity: 0.85;
  font-weight: 700;
}

.oracle-trigger-glyph {
  font-size: 11px;
  color: var(--gold-hot);
  animation: oracle-sparkle 3s infinite ease-in-out;
}

.oracle-trigger-core {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.oracle-trigger-title {
  color: var(--bone);
  font-weight: 700;
  letter-spacing: 0.18em;
}

.oracle-trigger-status {
  font-size: 7.5px;
  color: var(--gold-hot);
  letter-spacing: 0.22em;
  opacity: 0.85;
}

.oracle-trigger-bracket {
  color: var(--gold-hot);
  opacity: 0.85;
  font-weight: 700;
}

.oracle-trigger:hover,
.oracle-trigger.is-active {
  background: rgba(26, 14, 6, 0.98);
  border-color: var(--gold-hot);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.92), 0 0 24px rgba(223, 173, 72, 0.45), inset 0 1px 0 rgba(255, 237, 215, 0.3);
  transform: translateY(-2px);
}

@keyframes oracle-sparkle {
  0%, 100% { opacity: 0.6; transform: scale(0.92) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.18) rotate(45deg); filter: drop-shadow(0 0 6px var(--gold-hot)); }
}

.oracle-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 3, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 64;
  border: none;
  cursor: pointer !important;
  animation: oracle-fade-in 0.3s ease;
}

@keyframes oracle-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The Monolith Container */
.oracle-monolith {
  position: fixed;
  left: max(24px, env(safe-area-inset-left));
  bottom: max(24px, env(safe-area-inset-bottom));
  width: min(460px, calc(100vw - 48px));
  height: min(620px, calc(100vh - 100px));
  z-index: 65;
  display: flex;
  flex-direction: column;
  background: rgba(12, 8, 5, 0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 237, 215, 0.16);
  border-left: 2px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85), 0 0 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  overscroll-behavior: contain;
  animation: oracle-manifest 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes oracle-manifest {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header Rail */
.oracle-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px dashed var(--bone-22);
  background: rgba(16, 10, 6, 0.6);
  position: relative;
}

.oracle-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.oracle-spec-tag {
  display: inline-block;
  padding: 2px 6px;
  background: rgba(224, 162, 68, 0.1);
  border: 1px solid var(--gold-30);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-hot);
}

.oracle-header-titles {
  display: flex;
  flex-direction: column;
}

.oracle-brand {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--bone);
  margin: 0;
  line-height: 1.2;
}

.oracle-coords {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--bone-62);
  margin-top: 2px;
}

.oracle-live-pip {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-hot);
  box-shadow: 0 0 6px var(--gold-hot);
  animation: pip-pulse 2s infinite ease-in-out;
}

@keyframes pip-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

.oracle-close {
  background: transparent;
  border: 1px dashed var(--bone-22);
  color: var(--bone-62);
  font-size: 16px;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 2px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oracle-close:hover {
  color: var(--bone);
  border-color: var(--gold-hot);
  background: rgba(224, 162, 68, 0.1);
}

/* Curated Topic Folios */
.oracle-folios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 10px 16px;
  background: rgba(10, 6, 3, 0.5);
  border-bottom: 1px dashed var(--bone-22);
}

.oracle-folio-btn {
  background: rgba(255, 237, 215, 0.03);
  border: 1px dashed var(--bone-22);
  border-radius: 2px;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--bone-70);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oracle-folio-btn:hover {
  background: rgba(224, 162, 68, 0.08);
  border-color: var(--gold-hot);
  color: var(--gold-hot);
  transform: translateY(-1px);
}

/* Transcript Stream */
.oracle-ledger {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-hot) rgba(12, 8, 5, 0.8);
}

.oracle-ledger::-webkit-scrollbar {
  width: 5px;
}

.oracle-ledger::-webkit-scrollbar-track {
  background: rgba(12, 8, 5, 0.8);
}

.oracle-ledger::-webkit-scrollbar-thumb {
  background: var(--gold-hot);
  border-radius: 3px;
}

.oracle-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: entry-fade 0.25s ease-out;
}

@keyframes entry-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.oracle-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.oracle-entry.assistant .oracle-entry-author {
  color: var(--gold-hot);
  font-weight: 600;
}

.oracle-entry.user .oracle-entry-author {
  color: var(--bone-62);
  font-weight: 500;
}

.oracle-entry-time {
  color: var(--bone-22);
}

.oracle-entry-content {
  border-radius: 2px;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.6;
}

.oracle-entry.assistant .oracle-entry-content {
  background: rgba(20, 13, 8, 0.6);
  border: 1px solid rgba(255, 237, 215, 0.12);
  border-left: 2px solid var(--gold);
  color: var(--bone);
  font-family: var(--font-text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.oracle-entry.user .oracle-entry-content {
  background: rgba(56, 36, 22, 0.4);
  border: 1px dashed var(--gold-30);
  color: var(--bone);
  align-self: flex-end;
  max-width: 88%;
}

.oracle-entry-text {
  margin: 0;
  white-space: pre-line;
}

/* Typing state */
.oracle-computing-dots {
  display: flex;
  gap: 5px;
  padding: 8px 12px;
  background: rgba(20, 13, 8, 0.6);
  border: 1px solid rgba(255, 237, 215, 0.12);
  border-left: 2px solid var(--gold);
  border-radius: 2px;
  width: fit-content;
}

.oracle-computing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-hot);
  animation: dot-glow 1.4s infinite ease-in-out;
}

.oracle-computing-dots span:nth-child(2) { animation-delay: 0.2s; }
.oracle-computing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-glow {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Terminal Input Chamber */
.oracle-terminal-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(14, 9, 5, 0.98);
  border-top: 1px dashed var(--bone-22);
  position: relative;
}

.oracle-prompt-symbol {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-hot);
}

.oracle-text-field {
  flex: 1;
  background: rgba(255, 237, 215, 0.04);
  border: 1px solid rgba(255, 237, 215, 0.12);
  border-radius: 2px;
  padding: 8px 10px;
  font-family: var(--font-text);
  font-size: 11px;
  color: var(--bone);
  outline: none;
  transition: all 0.2s ease;
}

.oracle-text-field:focus {
  border-color: var(--gold-hot);
  background: rgba(255, 237, 215, 0.07);
}

.oracle-text-field::placeholder {
  color: var(--bone-62);
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.oracle-transmit-btn {
  background: var(--umber);
  border: 1px solid var(--gold-30);
  color: var(--gold-hot);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 8px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.oracle-transmit-btn:hover:not(:disabled) {
  border-color: var(--gold-hot);
  background: rgba(56, 36, 22, 0.9);
  color: #fff;
  box-shadow: 0 0 10px rgba(224, 162, 68, 0.2);
}

.oracle-transmit-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================================
   ARCHITECTURAL FLOATING MASTHEAD / QUICK NAVIGATION
   ========================================================================= */

#masthead {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  right: max(20px, env(safe-area-inset-right));
  z-index: 52;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

#masthead.is-hidden {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.masthead-left {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.masthead-brand {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(16, 9, 4, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 237, 215, 0.08);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  color: var(--bone);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer !important;
}

.masthead-brand:hover {
  border-color: rgba(224, 162, 68, 0.35);
  background: rgba(22, 14, 8, 0.7);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 12px rgba(224, 162, 68, 0.12);
  transform: translateY(-1px);
}

.masthead-mark {
  color: var(--gold-hot);
  font-size: 11px;
  line-height: 1;
}

.masthead-title {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}

.masthead-name {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--bone);
}

.masthead-sub {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.14em;
  color: var(--bone-62);
  text-transform: uppercase;
}

/* Live Act Telemetry Pill */
.masthead-act-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(16, 9, 4, 0.42);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 237, 215, 0.08);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.masthead-act-pill:hover {
  border-color: var(--gold-hot);
  background: rgba(22, 14, 8, 0.7);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 12px rgba(224, 162, 68, 0.12);
  transform: translateY(-1px);
}

.masthead-pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-hot);
  box-shadow: 0 0 8px var(--gold-hot);
  animation: pulse-dot 2.4s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

.masthead-act-code {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-hot);
}

.masthead-act-sep {
  font-size: 8px;
  color: var(--bone-22);
}

.masthead-act-name {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--bone-70);
  text-transform: uppercase;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.masthead-map-kbd {
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-hot);
  background: rgba(224, 162, 68, 0.12);
  border: 1px solid rgba(224, 162, 68, 0.28);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 2px;
}

.masthead-nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(16, 9, 4, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 237, 215, 0.08);
  border-radius: 999px;
  padding: 4px 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.masthead-link {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--bone-70);
  padding: 6px 10px;
  border-radius: 999px;
  transition: all 0.2s ease;
  cursor: pointer !important;
  text-decoration: none;
  background: none;
  border: none;
}

.masthead-link:hover {
  color: var(--bone);
  background: rgba(255, 237, 215, 0.08);
}

.masthead-link.is-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--bone);
  background: rgba(255, 237, 215, 0.04);
  border: 1px solid rgba(255, 237, 215, 0.12);
}

.masthead-link.is-map-btn:hover {
  border-color: var(--gold-hot);
  color: var(--gold-hot);
  background: rgba(224, 162, 68, 0.1);
}

.masthead-icon {
  color: var(--gold-hot);
  font-size: 9px;
}

.masthead-link.is-accent {
  color: var(--gold-hot);
  border: 1px dashed var(--gold-30);
  background: rgba(224, 162, 68, 0.06);
}

.masthead-link.is-accent:hover {
  background: rgba(224, 162, 68, 0.15);
  border-color: var(--gold-hot);
  color: #fff;
}

.masthead-link.is-oracle {
  color: var(--gold-hot);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.masthead-link.is-oracle .oracle-dot {
  font-size: 8px;
  color: var(--gold-hot);
  animation: pulse-dot 2.5s infinite ease-in-out;
}

.masthead-link.is-oracle:hover {
  color: #fff;
  background: rgba(224, 162, 68, 0.16);
  border-color: rgba(224, 162, 68, 0.4);
}

.masthead-cta {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  background: rgba(224, 162, 68, 0.12);
  border: 1px solid rgba(224, 162, 68, 0.35);
  color: var(--bone);
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  cursor: pointer !important;
}

.masthead-cta:hover {
  transform: translateY(-1px);
  border-color: var(--gold-hot);
  background: rgba(56, 36, 22, 0.9);
  color: #fff;
  box-shadow: 0 0 14px rgba(224, 162, 68, 0.25);
}

.brand-name-short {
  display: none;
}

.brand-name-full {
  display: inline;
}

.resume-suffix {
  display: inline;
}

.cta-short {
  display: none;
}

.cta-full {
  display: inline;
}

@media (max-width: 960px) {
  .masthead-act-pill,
  .masthead-sub,
  .masthead-link:not(.is-accent):not(.is-map-btn) {
    display: none;
  }
}

@media (max-width: 768px) {
  #masthead {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    gap: 8px;
  }

  .masthead-brand {
    height: 30px;
    padding: 0 10px;
    gap: 8px;
  }

  .masthead-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    height: 34px;
    box-sizing: border-box;
  }

  .masthead-link,
  #sound-toggle.masthead-sound,
  .masthead-cta {
    height: 28px;
    line-height: 28px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    border-radius: 2px;
    margin: 0;
    white-space: nowrap;
    vertical-align: middle;
  }

  .masthead-link {
    padding: 0 8px;
  }

  .masthead-link.is-accent {
    padding: 0 9px;
    font-weight: 600;
  }

  .resume-suffix {
    display: none;
  }

  #sound-toggle.masthead-sound {
    width: 28px;
    padding: 0;
    flex-shrink: 0;
    justify-content: center;
  }

  .sound-label {
    display: none;
  }

  .sound-visualizer {
    justify-content: center;
  }

  .masthead-cta {
    padding: 0 10px;
    font-size: 8.5px;
    font-weight: 600;
  }

  .cta-full {
    display: none;
  }

  .cta-short {
    display: inline;
  }
}

@media (max-width: 480px) {
  #masthead {
    top: max(8px, env(safe-area-inset-top));
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    gap: 4px;
  }

  .brand-name-full {
    display: none;
  }

  .brand-name-short {
    display: inline;
  }

  .masthead-brand {
    height: 28px;
    padding: 0 8px;
    gap: 6px;
  }

  .masthead-brand .masthead-name {
    font-size: 8px;
    letter-spacing: 0.12em;
  }

  .masthead-nav {
    height: 32px;
    padding: 2px;
    gap: 3px;
  }

  .masthead-link,
  #sound-toggle.masthead-sound,
  .masthead-cta {
    height: 26px;
    line-height: 26px;
    font-size: 8px;
  }

  .masthead-link {
    padding: 0 6px;
  }

  .masthead-link.is-accent {
    padding: 0 7px;
  }

  #sound-toggle.masthead-sound {
    width: 26px;
  }

  .masthead-cta {
    padding: 0 7px;
  }
}

/* ============================================================================
   ARCHITECTURAL SITEMAP MODAL (DIRECTORY)
   ========================================================================= */

.sitemap-modal {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vh, 32px);
  animation: sitemapFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sitemapFadeIn {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}

.sitemap-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 3, 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.sitemap-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  max-height: min(88vh, 850px);
  display: flex;
  flex-direction: column;
  background: #0d0704;
  border: 1px solid rgba(224, 162, 68, 0.3);
  border-left: 3px solid var(--gold-hot);
  border-radius: 3px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(224, 162, 68, 0.12);
  overflow: hidden;
}

.sitemap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #160d07;
  border-bottom: 1px solid rgba(224, 162, 68, 0.2);
  flex-shrink: 0;
}

.sitemap-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sitemap-glyph {
  color: var(--gold-hot);
  font-size: 16px;
  line-height: 1;
}

.sitemap-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--bone);
  font-weight: 700;
  margin: 0;
}

.sitemap-subtitle {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--gold-hot);
  margin: 3px 0 0;
}

.sitemap-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--bone-70);
  background: rgba(255, 237, 215, 0.05);
  border: 1px solid rgba(255, 237, 215, 0.18);
  border-radius: 2px;
  padding: 6px 12px;
  cursor: pointer !important;
  transition: all 0.2s ease;
}

.sitemap-close:hover {
  background: rgba(224, 162, 68, 0.15);
  border-color: var(--gold-hot);
  color: #fff;
}

.sitemap-esc {
  font-size: 7.5px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 237, 215, 0.2);
  border-radius: 2px;
  color: var(--gold-hot);
}

.sitemap-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-hot) rgba(13, 7, 4, 0.8);
}

.sitemap-body::-webkit-scrollbar {
  width: 5px;
}

.sitemap-body::-webkit-scrollbar-track {
  background: rgba(13, 7, 4, 0.8);
}

.sitemap-body::-webkit-scrollbar-thumb {
  background: var(--gold-hot);
  border-radius: 3px;
}

.sitemap-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(224, 162, 68, 0.25);
  margin-bottom: 14px;
}

.sitemap-sec-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold-hot);
  text-transform: uppercase;
}

.sitemap-sec-meta {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--bone-62);
}

.sitemap-acts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 10px;
}

.sitemap-act-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 14px;
  min-height: 96px;
  background: rgba(255, 237, 215, 0.025);
  border: 1px solid rgba(255, 237, 215, 0.12);
  border-radius: 2px;
  text-align: left;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: inherit;
}

.sitemap-act-card:hover {
  border-color: var(--gold-hot);
  background: rgba(224, 162, 68, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(224, 162, 68, 0.15);
}

.sitemap-act-card.is-active {
  border-color: var(--gold-hot);
  border-left: 3px solid var(--gold-hot);
  background: rgba(224, 162, 68, 0.12);
}

.sitemap-act-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sitemap-act-roman {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--gold-hot);
  letter-spacing: 0.12em;
}

.sitemap-act-edge {
  font-family: var(--font-mono);
  font-size: 7.5px;
  color: var(--bone-62);
  letter-spacing: 0.08em;
}

.sitemap-act-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--bone);
  margin: 6px 0;
  line-height: 1.3;
}

.sitemap-act-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.sitemap-act-pct {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--bone-62);
  letter-spacing: 0.1em;
}

.sitemap-act-badge {
  font-family: var(--font-mono);
  font-size: 7.5px;
  color: var(--gold-hot);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.sitemap-act-jump {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--bone-70);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
}

.sitemap-act-card:hover .sitemap-act-jump {
  opacity: 1;
  transform: translateX(0);
  color: var(--gold-hot);
}

.sitemap-proj-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sitemap-proj-item {
  display: flex;
  flex-direction: column;
  padding: 9px 12px;
  background: rgba(255, 237, 215, 0.02);
  border: 1px solid rgba(255, 237, 215, 0.1);
  border-radius: 2px;
  text-align: left;
  cursor: pointer !important;
  transition: all 0.2s ease;
  color: inherit;
}

.sitemap-proj-item:hover {
  background: rgba(224, 162, 68, 0.08);
  border-color: var(--gold-hot);
  transform: translateX(3px);
}

.sitemap-proj-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sitemap-proj-idx {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--gold-hot);
}

.sitemap-proj-name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--bone);
}

.sitemap-proj-kind {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--bone-62);
  margin-top: 2px;
}

.sitemap-quick-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sitemap-quick-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--bone-70);
  background: rgba(255, 237, 215, 0.03);
  border: 1px dashed rgba(224, 162, 68, 0.25);
  border-radius: 2px;
  cursor: pointer !important;
  transition: all 0.2s ease;
}

.sitemap-quick-btn:hover {
  background: rgba(224, 162, 68, 0.12);
  border-color: var(--gold-hot);
  color: #fff;
  transform: translateX(3px);
}

.sitemap-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 24px;
  background: #120a05;
  border-top: 1px solid rgba(224, 162, 68, 0.15);
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--bone-62);
  flex-shrink: 0;
}

.sitemap-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 237, 215, 0.25);
  border-radius: 2px;
  color: var(--gold-hot);
  font-weight: 600;
  margin-right: 4px;
}

@media (max-width: 850px) {
  .sitemap-body {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 18px 20px;
  }
  .sitemap-acts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .sitemap-acts-grid {
    grid-template-columns: 1fr;
  }
  .sitemap-header {
    padding: 12px 16px;
  }
  .sitemap-footer {
    display: none;
  }
}

/* ============================================================================
   CASE STUDY MEASURABLE IMPACT BADGE
   ========================================================================= */

.case-metric-box {
  margin: 18px 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(223, 173, 72, 0.12) 0%, rgba(16, 9, 4, 0.5) 100%);
  border: 1px solid rgba(223, 173, 72, 0.35);
  border-left: 3px solid var(--gold-hot);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 237, 215, 0.15);
}

.case-metric-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

.case-metric-spark {
  color: var(--gold-hot);
  font-size: 10px;
}

.case-metric-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold-hot);
  text-transform: uppercase;
}

.case-metric-val {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bone);
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin: 0;
}

/* ============================================================================
   EXECUTIVE CV MODAL & HIGH-CONTRAST PRINT ENGINE
   ========================================================================= */

.cv-dialog {
  border: none;
  background: transparent;
  padding: 0;
  max-width: min(920px, calc(100vw - 32px));
  width: 100%;
  height: min(880px, calc(100vh - 48px));
  max-height: calc(100vh - 40px);
  border-radius: 14px;
  color: var(--bone);
  outline: none;
  z-index: 70;
  overflow: hidden;
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(223, 173, 72, 0.35);
  position: fixed;
  inset: 0;
  margin: auto;
  overscroll-behavior: contain;
}

.cv-dialog::backdrop {
  background: rgba(6, 3, 1, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.cv-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  background: #0d0704;
  border-radius: inherit;
  overflow: hidden;
  overscroll-behavior: contain;
}

.cv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: #170f07;
  border-bottom: 1px solid rgba(223, 173, 72, 0.25);
  flex-shrink: 0;
}

.cv-bar-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cv-tag {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(223, 173, 72, 0.15);
  border: 1px solid rgba(223, 173, 72, 0.35);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-hot);
}

.cv-version {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--bone-62);
  letter-spacing: 0.1em;
}

.cv-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cv-document {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 36px 44px;
  background: #0f0905;
  color: #ded1c4;
  font-family: var(--font-text);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-hot) rgba(20, 13, 8, 0.6);
}

.cv-document::-webkit-scrollbar {
  width: 6px;
}

.cv-document::-webkit-scrollbar-track {
  background: rgba(13, 7, 4, 0.8);
}

.cv-document::-webkit-scrollbar-thumb {
  background: var(--gold-hot);
  border-radius: 3px;
}

.cv-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.cv-name {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.08em;
  color: #ffeed7;
  margin: 0 0 6px 0;
  font-weight: 700;
}

.cv-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold-hot);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}

.cv-header-contact {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--bone-70);
}

.cv-header-contact a {
  color: var(--gold-hot);
  text-decoration: underline;
}

.cv-rule {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-hot), rgba(223, 173, 72, 0.2), transparent);
  margin: 20px 0 28px 0;
}

.cv-section {
  margin-bottom: 28px;
}

.cv-sec-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-hot);
  font-weight: 700;
  margin: 0 0 12px 0;
  border-bottom: 1px solid rgba(223, 173, 72, 0.2);
  padding-bottom: 5px;
}

.cv-summary-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--bone);
  margin: 0;
}

.cv-skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.cv-skill-col h3 {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.1em;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.cv-skill-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--bone-70);
}

.cv-skill-col li::before {
  content: '▹ ';
  color: var(--gold-hot);
}

.cv-projects-list,
.cv-exp-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cv-project-item,
.cv-exp-item {
  padding: 12px 16px;
  background: rgba(255, 237, 215, 0.025);
  border: 1px solid rgba(223, 173, 72, 0.15);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
}

.cv-proj-header,
.cv-exp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  flex-wrap: wrap;
  gap: 8px;
}

.cv-proj-header strong,
.cv-exp-head strong {
  color: #ffeed7;
  font-size: 12px;
}

.cv-proj-meta,
.cv-exp-date {
  color: var(--gold-hot);
  font-size: 10px;
}

.cv-proj-impact {
  margin-top: 6px;
  font-size: 11px;
  color: var(--gold-hot);
}

/* Print Engine */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  #gl-canvas,
  #site-content,
  #compass,
  #compass-toggle,
  #sound-toggle,
  #masthead,
  .no-print,
  .oracle-trigger,
  .oracle-pill-btn,
  .oracle-monolith {
    display: none !important;
  }
  .cv-dialog {
    position: static !important;
    max-width: 100% !important;
    max-height: none !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #111 !important;
    overflow: visible !important;
  }
  .cv-container,
  .cv-document {
    background: #fff !important;
    color: #111 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .cv-name,
  .cv-proj-header strong,
  .cv-exp-head strong {
    color: #000 !important;
  }
  .cv-role,
  .cv-sec-title,
  .cv-proj-meta,
  .cv-proj-impact,
  .cv-skill-col h3 {
    color: #8c6114 !important;
  }
  .cv-header-contact,
  .cv-summary-text,
  .cv-skill-col ul,
  .cv-project-item,
  .cv-exp-item {
    color: #222 !important;
  }
  .cv-project-item,
  .cv-exp-item {
    background: #fdfaf6 !important;
    border-color: #ddd !important;
  }
}

/* ============================================================================
   COMMISSION MODAL
   ========================================================================= */

.commission-dialog {
  border: none;
  background: transparent;
  padding: 0;
  max-width: min(640px, calc(100vw - 32px));
  width: 100%;
  max-height: calc(100vh - 40px);
  border-radius: 12px;
  color: var(--bone);
  outline: none;
  z-index: 75;
  overflow: hidden;
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(223, 173, 72, 0.35);
  position: fixed;
  inset: 0;
  margin: auto;
}

.commission-dialog::backdrop {
  background: rgba(6, 3, 1, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.commission-container {
  display: flex;
  flex-direction: column;
  background: #0d0704;
  border-radius: inherit;
  overflow: hidden;
}

.commission-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #170f07;
  border-bottom: 1px solid rgba(223, 173, 72, 0.25);
  flex-shrink: 0;
}

.commission-bar-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.commission-glyph {
  color: var(--gold-hot);
  font-size: 1.1rem;
}

.commission-badge {
  display: block;
  font-family: var(--font-mono);
  font-size: calc(10 * var(--unit));
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-hot);
  margin-bottom: 2px;
}

.commission-title {
  margin: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 500;
  color: var(--bone);
  letter-spacing: .02em;
}

.commission-close {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--bone);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  transition: all .2s ease;
}

.commission-close:hover {
  background: rgba(223, 173, 72, 0.15);
  border-color: var(--gold-hot);
  color: #fff;
}

.commission-body {
  padding: clamp(20px, 3vw, 32px);
  overflow-y: auto;
  max-height: calc(85vh - 70px);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-hot) rgba(13, 7, 4, 0.8);
}

.commission-body::-webkit-scrollbar {
  width: 5px;
}

.commission-body::-webkit-scrollbar-track {
  background: rgba(13, 7, 4, 0.8);
}

.commission-body::-webkit-scrollbar-thumb {
  background: var(--gold-hot);
  border-radius: 3px;
}

.commission-intro {
  margin: 0 0 20px;
  font-size: var(--sub2);
  line-height: 1.55;
  color: var(--bone-70);
  font-family: var(--font-text);
}

.commission-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.commission-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 600px) {
  .commission-inputs { grid-template-columns: 1fr; }
}

.commission-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.commission-lbl {
  font-family: var(--font-mono);
  font-size: calc(10 * var(--unit));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-62);
}

.commission-input, .commission-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: calc(13 * var(--unit));
  color: var(--bone);
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}

.commission-input:focus, .commission-textarea:focus {
  border-color: var(--gold-hot);
  background: rgba(223, 173, 72, 0.05);
}

.commission-textarea {
  resize: vertical;
  min-height: 85px;
  line-height: 1.5;
}

.commission-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.commission-submit {
  cursor: pointer;
  font-size: calc(12 * var(--unit));
  letter-spacing: .1em;
}

.commission-err {
  font-family: var(--font-mono);
  font-size: calc(11 * var(--unit));
  color: #ff6b6b;
}

.commission-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 12px;
  gap: 14px;
}

.commission-success-glyph {
  font-size: 2.2rem;
  color: var(--gold-hot);
}

.commission-success-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: calc(13 * var(--unit));
  letter-spacing: .14em;
  color: var(--gold-hot);
}

.commission-success-desc {
  margin: 0;
  font-size: var(--sub2);
  line-height: 1.6;
  color: var(--bone-70);
  max-width: 440px;
}

.commission-success-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: center;
}