/* ============================================================
   Matthew Ballard: portfolio
   Each component is modelled on a specific Awwwards Site of the Day (credited next to it);
   the navigation borrows the structure of Bungie's Marathon menus, in this site's own colours and type.
   Colour → feeling: stone = mindfulness, olive = exploration, slate = professionalism,
   coral = creativity, blush = empathy. Each chapter has its own colour, used to mark "you are here".
   ============================================================ */
:root {
  --stone: #E9E6DF;
  --stone-2: #DEDAD0;
  --sage: #D5DBD0;
  --ink: #111110;
  --mute: #6F6B63;
  --rule: rgba(17,17,16,0.22);
  --olive: #4E5A45;
  --slate: #2C3A47;
  --coral: #E8653A;
  --blush: #D39A8B;
  --night: #0D0D0C;
  --deep: #1C2630;
  --sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  --g: clamp(14px, 1.6vw, 24px);
  --barH: 46px;
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { height: 100%; overflow: hidden; }
body { font-family: var(--sans); background: #1A1A18; color: var(--ink); line-height: 1.45; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; text-align: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--stone); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 400; }
.label { color: var(--mute); }

/* ── Preloader · Maria Vasilyeva ── */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--night); color: var(--stone); display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; overflow: hidden; }
.loader__block { border-block: 1px solid rgba(233,230,223,0.14); padding: 0.4rem 0; }
.loader__block p { font-size: clamp(14px, 1.4vw, 19px); font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.1; white-space: nowrap; }
.loader__pct { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); }

/* ═════════ NAV BAR · structure after Bungie's Marathon menus ═════════ */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: var(--barH); display: grid; grid-template-columns: var(--barH) 1fr auto; background: var(--deep); color: var(--stone); }
.bar__logo { display: grid; place-items: center; background: var(--stone); color: var(--ink); font-weight: 700; font-size: 14px; letter-spacing: -0.04em; }
.bar__list { display: flex; align-items: stretch; overflow: hidden; }
.bar__item { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 16px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; white-space: nowrap; color: rgba(233,230,223,0.7); border-right: 1px solid rgba(233,230,223,0.08); transition: background .25s, color .25s; }
.bar__item:hover { color: var(--ink); background: var(--c); }
.bar__item.is-on { background: var(--c); color: var(--ink); }
.bar__index { display: flex; align-items: center; gap: 12px; padding: 0 24px 0 18px; background: var(--stone); color: var(--ink); font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 0.02em; transition: background .25s; }
.bar__index:hover { background: #fff; }
/* the keyboard hint (I / Esc) only means something with a keyboard */
@media (max-width: 760px), (pointer: coarse) { .bar__index .bar__key { display: none; } .bar__index { padding: 0 20px; } }
.bar__key { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; font-size: 10px; }
@media (max-width: 860px) {
  .bar__item { display: none; }
  .bar__item.is-on { display: flex; flex: 1; }
}

/* ── Index menu · list beside the page cards ── */
.menu { position: fixed; top: var(--barH); left: 0; bottom: 0; z-index: 65; width: min(46vw, 640px); background: var(--deep); color: var(--stone); display: flex; flex-direction: column; border-right: 1px solid rgba(233,230,223,0.12); }
.menu__head { display: flex; justify-content: space-between; gap: 10px; padding: 12px var(--g); color: rgba(233,230,223,0.5); border-bottom: 1px solid rgba(233,230,223,0.12); }
.menu__list { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--g); }
.menu__row { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 12px 14px; border-top: 1px solid rgba(233,230,223,0.12); position: relative; transition: background .25s, color .25s, padding .35s var(--ease-out); }
.menu__row:last-child { border-bottom: 1px solid rgba(233,230,223,0.12); }
.menu__code { font-family: var(--mono); font-size: 11px; color: rgba(233,230,223,0.45); }
.menu__name { font-weight: 500; font-size: clamp(26px, 3vw, 46px); letter-spacing: -0.04em; line-height: 1; }
.menu__sub { font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: rgba(233,230,223,0.5); text-align: right; }
.menu__row.is-here .menu__sub::before { content: 'You are here · '; color: var(--stone); }
.menu__row:hover, .menu__row:focus-visible, .menu__row.is-focus { background: var(--c); color: var(--ink); outline: none; padding-left: 22px; }
.menu__row:hover .menu__code, .menu__row:hover .menu__sub, .menu__row.is-focus .menu__code, .menu__row.is-focus .menu__sub, .menu__row.is-focus.is-here .menu__sub::before { color: var(--ink); }
@media (max-width: 860px) { .menu { width: 100%; border-right: 0; } .menu__head span:last-child { display: none; } }

/* ── Corner labels · Neutomni ── */
.corner { position: fixed; z-index: 60; color: #fff; mix-blend-mode: difference; display: flex; gap: 10px; align-items: center; }
.corner--bl { left: var(--g); bottom: 12px; transition: opacity .35s; }
.corner--bl.is-covered { opacity: 0; } /* something to read is underneath it (js/main.js) */
.corner--br { right: var(--g); bottom: 12px; }
/* "Open to work" is the one call to action that follows you: filled in the Contact colour, so it reads as a button */
a.corner--br { bottom: 10px; mix-blend-mode: normal; color: var(--ink); background: var(--blush); padding: 9px 14px; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(30,25,15,0.14), 0 8px 18px -10px rgba(30,25,15,0.45); transition: background .3s, color .3s, transform .3s var(--ease-out); }
a.corner--br::after { content: '→'; transition: transform .3s var(--ease-out); }
a.corner--br:hover { background: var(--ink); color: var(--stone); }
a.corner--br:hover::after { transform: translateX(4px); }
body[data-page="contact"] a.corner--br { background: var(--ink); color: var(--stone); }
body.is-index .corner { opacity: 0; }
@media (max-width: 760px) {
  .corner--bl { display: none; }
  /* a thin, quiet banner along the bottom of the screen; the page keeps room for it */
  a.corner--br { left: 0; right: 0; bottom: 0; height: calc(34px + env(safe-area-inset-bottom)); padding: 0 16px env(safe-area-inset-bottom);
    justify-content: space-between; border-radius: 0; box-shadow: none; font-size: 10px;
    background: rgba(233,230,223,0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid rgba(17,17,16,0.14); }
  a.corner--br::after { content: "Let's talk →"; color: var(--mute); }
  body[data-page="canon"] a.corner--br { background: rgba(13,13,12,0.92); color: var(--stone); border-top-color: rgba(233,230,223,0.14); }
  body[data-page="canon"] a.corner--br::after { color: rgba(233,230,223,0.55); }
  body[data-page="contact"] a.corner--br { display: none; }
  .page__scroll { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
}

/* ═════════ DECK ═════════ */
.deck { position: fixed; inset: 0; }
.page { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; visibility: hidden; transform-origin: 0 0; overflow: hidden; }
.page.is-on, body.is-index .page, body.is-moving .page { visibility: visible; }
.page__scroll { height: 100%; padding-top: var(--barH); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.page__scroll::-webkit-scrollbar { display: none; }
body.is-index .page__scroll, body.is-moving .page__scroll { overflow: hidden; pointer-events: none; }
body.is-index .page { cursor: pointer; outline: 1px solid transparent; transition: outline-color .3s; }
body.is-index .page.is-focus { outline: 3px solid var(--stone); }
@media (max-width: 860px) { body.is-index:not(.is-moving) .page { visibility: hidden; } } /* behind the full-screen menu; shown while moving */
.wrap { padding: 0 var(--g); }

/* Shared type */
.huge { font-size: clamp(56px, 12.5vw, 220px); font-weight: 500; letter-spacing: -0.055em; line-height: 0.86; }
.section-title { font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -0.02em; padding-bottom: 10px; border-bottom: 1px solid currentColor; margin-top: clamp(80px, 11vw, 160px); }
.chead { padding-top: clamp(70px, 12vh, 140px); display: grid; gap: 18px; }
.intro { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--g); margin-top: clamp(60px, 8vw, 120px); }
.intro .label { grid-column: 1 / 2; padding-top: 6px; }
.intro__text { grid-column: 2 / 6; font-size: clamp(20px, 2.15vw, 34px); line-height: 1.16; letter-spacing: -0.02em; }
.intro__text b { font-weight: 500; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); margin-top: clamp(50px, 7vw, 100px); }
.cols3 > div { border-top: 1px solid var(--rule); padding-top: 10px; display: grid; gap: 14px; align-content: start; }
.cols3 p:last-child { font-size: 17px; line-height: 1.3; max-width: 26em; }
.section-lead { margin-top: 14px; max-width: 46em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; color: #34332F; }
.footnote { margin-top: 30px; color: var(--mute); line-height: 1.6; max-width: 70em; }
@media (max-width: 760px) { .intro { grid-template-columns: 1fr; } .intro .label, .intro__text { grid-column: 1; } .cols3 { grid-template-columns: 1fr; } }

/* "Next" footer · Realevate */
.next { display: grid; gap: 14px; width: 100%; padding: clamp(90px, 14vw, 200px) var(--g) clamp(60px, 9vh, 90px); border-top: 1px solid var(--rule); margin-top: clamp(80px, 12vw, 180px); }
/* The title sits faint and slightly hazy; on hover the haze lifts and dry-ice fog pours out (js/smoke.js). */
.next { position: relative; overflow: hidden; }
.next__fog { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.next__fog--front { z-index: 2; }
.next__t { --tc: var(--ink); position: relative; z-index: 1; font-size: clamp(56px, 11vw, 190px); font-weight: 500; letter-spacing: -0.055em; line-height: 0.86;
  color: color-mix(in srgb, var(--tc) 22%, transparent); filter: blur(2.5px);
  transition: color 2.2s cubic-bezier(0.45, 0, 0.2, 1), filter 2.2s cubic-bezier(0.45, 0, 0.2, 1); }
.next:hover .next__t, .next:focus-visible .next__t, .next.is-clear .next__t { color: var(--tc); filter: blur(0); transition-duration: 1.4s; }
.page--canon .next__t { --tc: var(--stone); }
/* the label says plainly where the button goes, with an arrow that nudges forward on hover */
.next > .mono { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 14px; justify-self: start;
  font-size: clamp(15px, 1.5vw, 22px); letter-spacing: .04em; color: var(--ink); }
.next > .mono::after { content: '→'; font-size: 1.3em; transition: transform .5s var(--ease-out); }
.next:hover > .mono::after, .next:focus-visible > .mono::after { transform: translateX(10px); }
.page--canon .next > .mono { color: var(--stone); }

/* ═════════ 00 · HELLO ═════════ */
.page--cover { background: var(--stone); }
.cover { padding-top: clamp(40px, 9vh, 110px); }
.name { font-size: 15vw; font-weight: 200; letter-spacing: -0.06em; line-height: 0.85; white-space: nowrap; margin-top: 18px; cursor: default; }
.name span { display: inline-block; font-weight: var(--w, 200); transition: font-weight .25s; }
.name.is-measuring span { transition: none; }
.cover__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--g); margin-top: clamp(24px, 4vh, 48px); align-items: start; }
.role { grid-column: 1 / 3; font-weight: 600; text-transform: uppercase; font-size: clamp(16px, 1.6vw, 24px); letter-spacing: 0.01em; }
.role span { background: var(--ink); color: var(--stone); padding: 2px 8px 3px; }
.pitch { grid-column: 3 / 6; font-size: clamp(22px, 2.4vw, 38px); line-height: 1.12; letter-spacing: -0.025em; }
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); margin-top: clamp(70px, 11vh, 130px); }
.why > div { border-top: 1px solid var(--ink); padding-top: 10px; display: grid; gap: 12px; align-content: start; }
.why p:last-child { font-size: 16px; line-height: 1.32; }
.folders__k { margin-top: clamp(90px, 14vh, 160px); margin-bottom: 18px; }
@media (max-width: 760px) {
  .cover__row { grid-template-columns: 1fr; } .role, .pitch { grid-column: 1; }
  .why { grid-template-columns: 1fr; row-gap: 22px; }
}

/* Folder tabs · Mosby's Files, packed upright in a wooden card-catalog drawer.
   The drawer (oak walls, dark well, front panel) fully encloses the folders: only the tabs rise above
   the rim, and everything below the front panel is clipped. Folders always overlap, so there is
   never a gap; the one under the pointer rises a few pixels. */
.folders { --step: 74px; --tab: 36px; --show: 64px; --front: 164px; --wall: 18px;
  --oak: #A9733F; --oak-dark: #7C4E26; --grain-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.16' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.22  0 0 0 0 0.11  0 0 0 0 0.04  1.6 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"); --grain-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16 0.004' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.22  0 0 0 0 0.11  0 0 0 0 0.04  1.6 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
  position: relative; height: calc(var(--tab) + (var(--n) - 1) * var(--step) + var(--tab) + var(--show) + var(--front));
  margin-bottom: 90px; }
.folders__well {
  position: absolute; left: 0; right: 0; top: var(--tab); bottom: 0;
  background: var(--grain-v), linear-gradient(#3A2414, #2A190D); background-size: 600px 600px, auto;
  border: solid transparent; border-width: 0 var(--wall); border-radius: 3px 3px 6px 6px;
  box-shadow: inset 0 18px 22px -12px rgba(0,0,0,0.8), inset 12px 0 16px -12px rgba(0,0,0,0.7), inset -12px 0 16px -12px rgba(0,0,0,0.7),
    0 1px 1px rgba(60,35,12,0.12), 0 8px 14px -6px rgba(60,35,12,0.2), 0 28px 44px -22px rgba(60,35,12,0.38);
  clip-path: inset(-400px calc(-1 * var(--wall)) 0 calc(-1 * var(--wall)) round 0 0 6px 6px);
}
/* oak side walls, with a lighter end-grain cap on top */
.folders__well::before, .folders__well::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: var(--wall); z-index: 40;
  background: var(--grain-v), linear-gradient(90deg, var(--oak-dark), var(--oak) 45%, var(--oak-dark));
  background-size: 600px 600px, auto;
  box-shadow: inset 0 3px 0 #C99260, inset 0 4px 0 rgba(0,0,0,0.25);
}
.folders__well::before { left: calc(-1 * var(--wall)); border-radius: 3px 0 0 0; }
.folders__well::after { right: calc(-1 * var(--wall)); border-radius: 0 3px 0 0; }
.folders__stack { position: absolute; left: 6px; right: 6px; top: calc(-1 * var(--tab)); bottom: 0; }
.folder { position: absolute; left: 0; right: 0; top: calc(var(--i) * var(--step)); height: calc(var(--n) * var(--step) + var(--show) + var(--front)); color: var(--fg); text-align: left; z-index: var(--z); transition: transform .45s var(--ease-out); }
.folder:hover, .folder:focus-visible, .folder.is-lift { transform: translateY(-10px); }
.folder__tab { display: inline-flex; gap: 14px; align-items: baseline; position: relative; height: var(--tab); padding: 7px 40px 0 16px; background: var(--bg); font-size: clamp(16px, 1.4vw, 21px); letter-spacing: -0.01em; clip-path: polygon(0 100%, 10px 0, calc(100% - 22px) 0, 100% 100%); }
.folder__tab .mono { opacity: .7; }
.folder__body { display: grid; grid-template-columns: 14rem 1fr auto; gap: var(--g); align-items: baseline; height: calc(100% - var(--tab)); background: var(--bg); padding: 10px 16px; margin-top: -1px; box-shadow: 0 -1px 0 rgba(0,0,0,0.06), 0 -6px 12px -8px rgba(0,0,0,0.35); transition: box-shadow .45s var(--ease-out); }
.folder:hover .folder__body, .folder.is-lift .folder__body { box-shadow: 0 -1px 0 rgba(0,0,0,0.06), 0 -12px 20px -10px rgba(0,0,0,0.45); }
.folder__who { opacity: .7; }
.folder__what { font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder__go { opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--ease-out); }
.folder:hover .folder__go, .folder:focus-visible .folder__go, .folder.is-lift .folder__go { opacity: 1; transform: none; }
/* the oak drawer front: aged and lived in, with a brass card holder and cup pull (drawn as SVG in js/main.js).
   The finish is a little worn along the top edge and polished where hands reach for the pull. */
.folders__front {
  position: absolute; left: calc(-1 * var(--wall)); right: calc(-1 * var(--wall)); bottom: 0; height: var(--front); z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    radial-gradient(ellipse 170px 60px at 50% 74%, rgba(255,226,182,0.16), rgba(255,226,182,0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M40 62 L118 58' stroke='rgba%28255%2C236%2C205%2C0.16%29' stroke-width='1'/%3E%3Cpath d='M210 230 L262 236' stroke='rgba%28255%2C236%2C205%2C0.12%29' stroke-width='1'/%3E%3Cpath d='M430 40 L470 46 L520 44' stroke='rgba%2860%2C30%2C8%2C0.12%29' stroke-width='1'/%3E%3Cpath d='M500 250 L560 240' stroke='rgba%28255%2C236%2C205%2C0.10%29' stroke-width='1.2'/%3E%3Cpath d='M120 180 L150 176' stroke='rgba%2860%2C30%2C8%2C0.10%29' stroke-width='1'/%3E%3Cpath d='M330 110 L372 108' stroke='rgba%28255%2C236%2C205%2C0.09%29' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,230,192,0.2), rgba(255,230,192,0) 16%),
    var(--grain-h),
    linear-gradient(#A46D3C, #93602F 55%, #82522A);
  background-size: auto, 600px 300px, auto, 600px 600px, auto;
  border-radius: 3px 3px 7px 7px;
  box-shadow: inset 0 1px 0 rgba(255,226,180,0.4), inset 0 -2px 0 rgba(40,20,5,0.28), inset 0 0 0 1px rgba(60,32,10,0.22),
    0 1px 1px rgba(50,28,10,0.18), 0 12px 20px -12px rgba(50,28,10,0.42);
}
.folders__front::before { content: ''; position: absolute; inset: 12px; border-radius: 3px; pointer-events: none;
  box-shadow: inset 1px 1px 0 rgba(40,20,5,0.16), inset -1px -1px 0 rgba(255,222,176,0.18), 1px 1px 0 rgba(255,222,176,0.14), -1px -1px 0 rgba(40,20,5,0.1); }
.folders__holder { position: relative; width: 236px; height: auto; filter: drop-shadow(0 1px 0.5px rgba(40,22,6,0.45)) drop-shadow(0 3px 4px rgba(40,22,6,0.2)); }
.folders__pull { position: relative; width: 172px; height: auto; filter: drop-shadow(0 1.5px 0.5px rgba(40,22,6,0.42)) drop-shadow(0 6px 6px rgba(40,22,6,0.22)); }
@media (max-width: 760px) {
  .folders { --step: 84px; --show: 58px; --front: 132px; --wall: 12px; }
  .folder__body { grid-template-columns: 1fr; gap: 2px; }
  .folder__what { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; }
  .folder__who, .folder__go { display: none; }
  .folders__holder { width: 184px; } .folders__pull { width: 132px; }
}

/* ═════════ 01 · WEB ═════════ */
.page--web { background: var(--stone); }
.page--web .page__scroll { padding-top: 0; }
/* the reel stops just short of the fold, so a strip of the page below shows there is more */
.reel { position: relative; height: calc(100vh - 56px); height: calc(100dvh - 56px); color: var(--stone); cursor: grab; touch-action: pan-y;
  background: radial-gradient(ellipse 75% 55% at 50% 40%, #26292B 0%, #161717 55%, #0D0D0C 100%); }
.reel::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(rgba(13,13,12,0), #0D0D0C 90%); pointer-events: none; z-index: 1; }
.reel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel__c { position: absolute; z-index: 2; pointer-events: none; }
.reel__c--tl { left: var(--g); top: calc(var(--barH) + 14px); } .reel__c--tr { right: var(--g); top: calc(var(--barH) + 14px); }
.reel__c--bl { left: var(--g); bottom: 46px; font-size: 13px; } .reel__c--br { right: var(--g); bottom: 46px; }
/* scroll cue: a quiet label with a line that slowly draws down toward the page below */
.reel__cue { position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 12px;
  padding: 0 14px; color: var(--stone); opacity: .75; transition: opacity .3s; cursor: pointer; }
.reel__cue::after { content: ''; width: 1px; height: 30px; background: currentColor; transform-origin: top; animation: cueLine 2.6s var(--ease-out) infinite; }
.reel__cue:hover { opacity: 1; }
@keyframes cueLine { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reel__cue::after { animation: none; } }
@media (max-width: 760px) { .reel { height: 70vh; } .reel__c--br, .reel__c--tr { display: none; } .reel__cue { display: none; } }

/* What's on this page: a row of the chapter's parts that stays under the bar while you read them.
   The part you're in fills with the chapter colour, like the bar does for chapters (after Bungie's Marathon menus) */
.pbody { --pnavH: 44px; position: relative; }
.pnav { position: sticky; top: var(--barH); z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: var(--pnavH);
  margin-top: clamp(50px, 7vw, 90px); background: var(--stone); border-block: 1px solid var(--ink); }
.pnav button { display: flex; align-items: center; gap: 10px; padding: 0 var(--g); border-right: 1px solid var(--rule); color: var(--mute); transition: background .3s, color .3s; }
.pnav button:last-child { border-right: 0; }
.pnav b { font-weight: 400; opacity: .7; }
.pnav i { font-style: normal; }
@media (max-width: 760px) { .pnav button { justify-content: center; padding: 0 8px; gap: 6px; } .pnav i { display: none; } }
.pnav button:hover { color: var(--ink); }
.pnav button.is-on { background: var(--pc, #7D8F66); color: var(--ink); }
/* Memory Bot's page already starts below the bar (its scroll area is padded by the bar's height), so its row sticks at 0 */
.page--memory .pnav { --pc: #A9BBA2; top: 0; }
.pbody .wrap > .section-title:first-child { margin-top: clamp(36px, 4vw, 56px); }
.pbody .work { margin-top: 0; border-top: 0; }

/* What I did, one row per employer · minimal grid after Signal-A Studio */
.work { margin-top: clamp(60px, 8vw, 110px); border-top: 1px solid var(--ink); }
.work__item { display: grid; grid-template-columns: 1fr 2fr; gap: var(--g); padding: 18px 0 clamp(60px, 8vw, 100px); border-bottom: 1px solid var(--rule); }
.work__head { position: sticky; top: calc(var(--barH) + var(--pnavH, 0px) + 18px); align-self: start; display: grid; gap: 10px; }
.work__name { font-size: clamp(34px, 4vw, 64px); font-weight: 500; letter-spacing: -0.045em; line-height: 0.95; }
.work__role { font-size: clamp(17px, 1.4vw, 20px); letter-spacing: -0.01em; margin-top: 4px; }
.work__when { color: #34332F; }
.work__where { color: var(--mute); line-height: 1.7; max-width: 24em; }
/* big numbers · after Revelatio (SOTD) */
.work__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); margin-bottom: clamp(30px, 4vw, 52px); }
.work__stats > div { border-top: 1px solid var(--ink); padding-top: 12px; }
.work__stats dt { font-size: clamp(44px, 5.4vw, 88px); font-weight: 500; letter-spacing: -0.055em; line-height: 0.92; }
.work__stats dt span { display: block; font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.work__stats dd { font-size: 16px; line-height: 1.3; color: #34332F; margin-top: 10px; max-width: 14em; }
.work__tools { color: var(--mute); line-height: 1.7; margin-top: 22px; }
.work__tools span { color: var(--ink); margin-right: 12px; }
.work__list li { display: grid; grid-template-columns: 12rem 1fr auto; gap: var(--g); align-items: baseline; padding: 14px 0 18px; border-bottom: 1px solid var(--rule); }
.work__list li:first-child { padding-top: 4px; }
.work__list h4 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: -0.02em; }
.work__list p { font-size: 17px; line-height: 1.38; color: #34332F; max-width: 36em; }
.work__view { white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.work__view:hover { color: var(--coral); }
.work__screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 24px; }
.work__shot { display: grid; gap: 8px; text-align: left; }
.work__shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(30,25,15,0.1), 0 10px 20px -12px rgba(30,25,15,0.35); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.work__shot:hover img { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(30,25,15,0.1), 0 16px 26px -14px rgba(30,25,15,0.4); }
.work__shot .mono { color: var(--mute); }
@media (max-width: 860px) {
  .work__item { grid-template-columns: 1fr; }
  .work__head { position: static; }
  .work__list li { grid-template-columns: 1fr; gap: 6px; }
  .work__view { justify-self: start; margin-top: 4px; }
  .work__stats { gap: 12px; }
  .work__stats dt { font-size: 38px; }
  .work__stats dd { font-size: 14px; }
  .work__screens { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .work__item { padding-bottom: 46px; gap: 18px; }
  .work__head { gap: 6px; }
  .work__name { font-size: 40px; }
  .work__list li { padding: 0; gap: 0; cursor: pointer; }
  .work__list li:first-child { padding-top: 0; }
  .work__list h4 { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; font-size: 18px; }
  .work__list h4::after { content: '+'; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--ink); border-radius: 50%;
    font-size: 16px; font-weight: 400; transition: transform .35s var(--ease-out), background .3s, color .3s; }
  .work__list li.is-open h4::after { transform: rotate(45deg); background: var(--ink); color: var(--stone); }
  .work__list li > p, .work__list li > .work__view { display: none; }
  .work__list li.is-open > p { display: block; padding-bottom: 14px; font-size: 16px; animation: rowIn .4s var(--ease-out) both; }
  .work__list li.is-open > .work__view { display: inline-block; margin: -4px 0 16px; }
  .work__tools { font-size: 10px; }
  .work__screens { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 22px calc(-1 * var(--g)) 0; padding: 0 var(--g) 4px; }
  .work__screens::-webkit-scrollbar { display: none; }
  .work__shot { flex: 0 0 74%; scroll-snap-align: start; }
}

/* ═════════ 02 · MEMORY ═════════ */
.page--memory { background: var(--stone); }
.inline-sentence { font-size: clamp(32px, 5vw, 86px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; max-width: 16ch; }
.chip-img { display: inline-flex; align-items: center; height: 0.8em; padding: 0 0.22em; vertical-align: -0.04em; font-family: var(--mono); font-size: 0.32em; letter-spacing: 0; text-transform: uppercase; font-weight: 500; }
.chip-img--chat { background: var(--slate); color: var(--stone); }
.chip-img--book { background: var(--coral); color: var(--ink); }
/* Scrapbook spread · printed memes, instant-photo prints (after Polaroid Originals, SOTD) and label-maker tags,
   moved around by hand (after Gionatan Nese "Creative Space", SOTD). Nothing inside scrolls: it all fits. */
.book { margin-top: 28px; display: grid; grid-template-columns: 1fr 360px; grid-template-rows: auto 620px; border-top: 1px solid var(--ink); }
.book__tabs { grid-column: 1 / -1; display: flex; gap: 0; border-bottom: 1px solid var(--rule); }
.book__tabs button { padding: 12px 18px 10px; border-right: 1px solid var(--rule); color: var(--mute); transition: background .25s, color .25s; }
.book__tabs button:hover { color: var(--ink); }
.book__tabs button.is-on { background: var(--ink); color: var(--stone); }
/* an open album: two warm pages with a soft fold down the middle */
.book__board { position: relative; overflow: hidden; touch-action: none; background-color: #F1ECE1;
  background-image: linear-gradient(90deg, rgba(70,55,30,0) 47%, rgba(70,55,30,0.07) 49.6%, rgba(70,55,30,0.13) 50%, rgba(70,55,30,0.07) 50.4%, rgba(70,55,30,0) 53%);
  box-shadow: inset 0 0 0 1px rgba(70,55,30,0.08), inset 0 -30px 50px -40px rgba(70,55,30,0.25); }
.board__hint { position: absolute; left: 16px; bottom: 12px; color: #8A8273; }
/* phones: the album becomes a row you swipe, one piece in the middle at a time */
.book__board.is-row { display: flex; align-items: center; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 34px 11% 30px; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.book__board.is-row::-webkit-scrollbar { display: none; }
.book__board.is-row .slot { position: relative; flex: 0 0 78%; scroll-snap-align: center; touch-action: pan-x pan-y; }
/* the piece in the middle is full size and straight; its neighbours wait a little smaller and softer */
.book__board.is-row .slot .p { transform: rotate(calc(var(--r) * 0.6)) scale(0.88); opacity: 0.55; transition: transform .5s var(--ease-out), opacity .5s, box-shadow .5s; }
.book__board.is-row .slot.is-on .p { transform: rotate(0deg) scale(1); opacity: 1; }
.book__swipe { display: none; }
.book.is-row .book__swipe { display: flex; justify-content: space-between; grid-column: 1 / -1; padding: 10px 2px 0; color: var(--mute); }
.book__tabs { position: relative; }
.book__count { display: none; margin-left: auto; align-self: center; padding-right: 2px; color: var(--mute); }
.book.is-row .book__count { display: block; }
@media (max-width: 360px) { .book__tabs button { padding: 11px 11px 9px; } }
.board__label { position: absolute; right: 22px; bottom: 18px; pointer-events: none; }
.slot { position: absolute; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.slot:active { cursor: grabbing; }
.p { position: relative; display: block; transform: rotate(var(--r)); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  box-shadow: 0 1px 1px rgba(40,30,15,0.12), 0 10px 22px -12px rgba(40,30,15,0.45); }
.p img { display: block; width: 100%; pointer-events: none; }
.slot:hover .p { transform: rotate(var(--r)) translateY(-3px); box-shadow: 0 2px 2px rgba(40,30,15,0.12), 0 18px 30px -14px rgba(40,30,15,0.5); }
.slot.is-on .p { transform: rotate(0deg) translateY(-4px); box-shadow: 0 2px 3px rgba(40,30,15,0.14), 0 24px 40px -16px rgba(40,30,15,0.55); }
/* washi tape with torn ends */
.p--tape::before { content: ''; position: absolute; z-index: 2; top: -11px; left: 50%; width: 76px; height: 22px; transform: translateX(-50%) rotate(var(--tr, -3deg));
  background: color-mix(in srgb, var(--tape, #E8C25A) 72%, transparent);
  clip-path: polygon(0 12%, 4% 0, 96% 0, 100% 14%, 97% 32%, 100% 52%, 96% 70%, 100% 88%, 95% 100%, 4% 100%, 0 86%, 3% 68%, 0 50%, 3% 30%); }
/* black album corners */
.p--corners::before, .p--corners::after { content: ''; position: absolute; z-index: 2; width: 24px; height: 24px; background: #26231F; }
.p--corners::before { left: -5px; top: -5px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.p--corners::after { right: -5px; bottom: -5px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
/* a printed meme: thin white print border */
.p-meme { background: #fff; padding: 6px; }
/* label-maker tape */
.dymo { display: inline-block; padding: 5px 9px 4px; border-radius: 2px; background: #1E2124; color: #F4F1EA; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 -1px 0 rgba(255,255,255,0.14); box-shadow: 0 1px 2px rgba(0,0,0,0.25); transform: rotate(var(--lr, 1deg)); white-space: nowrap; }
.dymo--coral { background: #C9532D; }
.p-meme .dymo { position: absolute; left: 10px; bottom: -12px; }
/* instant-photo print */
.p-photo { background: #FBFAF6; padding: 9px 9px 0; }
.p-photo img { aspect-ratio: 1; object-fit: cover; }
.p-photo figcaption { display: grid; gap: 1px; padding: 9px 2px 11px; }
.p-photo b { font-weight: 500; font-size: 15px; letter-spacing: -0.02em; line-height: 1.15; }
.p-photo .mono { color: #7C7568; font-size: 10px; }
/* tear-off calendar page */
.p-cal { background: #fff; text-align: center; padding-bottom: 16px; }
.p-cal header.mono { padding: 9px 8px 7px; background: var(--coral); color: var(--ink);
  -webkit-mask: radial-gradient(circle 3px at 50% 0, transparent 98%, #000) 0 0 / 14px 100%; mask: radial-gradient(circle 3px at 50% 0, transparent 98%, #000) 0 0 / 14px 100%; }
.p-cal strong { display: block; font-size: clamp(72px, 8vw, 116px); font-weight: 500; letter-spacing: -0.06em; line-height: 0.9; margin-top: 12px; }
.p-cal .mono { display: block; color: #5E5850; }
/* a note on lined paper */
.p-note { background-color: #FFFDF7; padding: 16px 18px 14px 34px;
  --lh: 28px; background-image: linear-gradient(90deg, transparent 22px, rgba(200,80,60,0.35) 22px 23px, transparent 23px), repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), rgba(70,110,160,0.18) calc(var(--lh) - 1px) var(--lh)); background-position: 0 6px; }
.p-note q { display: block; font-size: clamp(19px, 1.8vw, 25px); line-height: var(--lh); letter-spacing: -0.02em; quotes: '“' '”'; }
.p-note .mono { display: block; margin-top: 10px; color: #6F6A60; line-height: 1.5; }
.p-note--small q { font-size: 16px; }

/* the drawer: what the piece is, where it came from, and what it's linked to. Sized to fit, never scrolls */
.book__drawer { border-left: 1px solid var(--rule); padding: 18px var(--g) 18px; display: flex; flex-direction: column; gap: 12px; background: var(--stone); overflow: hidden; min-height: 0; }
.drawer__k { color: var(--mute); }
.drawer__title { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; }
.drawer__meta { font-size: 14px; color: #3D3A35; line-height: 1.35; }
.drawer__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.drawer__photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
/* roots: the messages it grew out of, on one line running down to the piece */
.roots { position: relative; display: grid; gap: 9px; padding-left: 18px; }
.roots::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: rgba(17,17,16,0.3); }
.roots li { position: relative; display: grid; gap: 1px; animation: rowIn .45s var(--ease-out) both; }
.roots li::before { content: ''; position: absolute; left: -14px; top: 9px; width: 9px; height: 1px; background: rgba(17,17,16,0.3); }
.roots .who { font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: var(--mute); }
.roots .who b { font-weight: 400; color: var(--ink); }
.roots p { font-size: 15px; line-height: 1.3; }
.roots mark { background: var(--c, #E8C25A); color: var(--ink); padding: 0 .12em; border-radius: 2px; }
.roots .first { color: #B6492A; }
.links { display: flex; flex-wrap: wrap; gap: 6px; }
.links button { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 9px; border: 1px solid var(--rule); border-radius: 3px; font-size: 14px; transition: background .2s, border-color .2s; }
.links button .mono { color: var(--mute); font-size: 9px; }
.links button:hover { background: var(--c); border-color: var(--c); }
.links button:hover .mono { color: var(--ink); }
.drawer__who { color: var(--mute); line-height: 1.5; }
.drawer__note { margin-top: auto; color: var(--mute); line-height: 1.5; }
@media (max-width: 960px) {
  .book { grid-template-columns: 1fr; grid-template-rows: auto 620px auto; }
  .book__drawer { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (pointer: coarse) { .book__board, .slot { touch-action: pan-y; } .slot { cursor: pointer; } }
@media (max-width: 760px) {
  .book { grid-template-rows: auto auto auto; }
  .board__label { display: none; }
  .p-photo b { font-size: 13px; }
  .p-cal strong { font-size: 64px; }
  .p-note q { font-size: 17px; }
  .p-note--small { --lh: 22px; padding: 12px 12px 10px 30px; } .p-note--small q { font-size: 14px; } .p-note--small .mono { margin-top: 6px; font-size: 9px; }
  .dymo { font-size: 9px; letter-spacing: .1em; }
}
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } }

/* ═════════ 03 · LEAD GEN ═════════ */
.page--lead { background: var(--sage); }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(60px, 8vw, 110px); border-top: 1px solid var(--ink); }
.flow li { display: grid; gap: 10px; align-content: start; padding: 14px var(--g) 22px 0; border-right: 1px solid var(--rule); opacity: .25; transform: translateY(8px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.flow li + li { padding-left: var(--g); }
.flow li:last-child { border-right: 0; }
.flow li.is-on { opacity: 1; transform: none; }
.flow__n { font-size: clamp(56px, 6vw, 100px); font-weight: 500; letter-spacing: -0.06em; line-height: 0.85; color: var(--slate); }
.flow b { font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -0.02em; }
.flow p { font-size: 15px; line-height: 1.35; color: #3B3A36; }
.case { margin-top: clamp(60px, 8vw, 110px); border-top: 1px solid var(--ink); }
.case > div { display: grid; grid-template-columns: 1fr 3fr; gap: var(--g); padding: 14px 0 22px; border-bottom: 1px solid var(--rule); }
.case dt { color: var(--mute); padding-top: 6px; }
.case dd { font-size: clamp(19px, 1.9vw, 28px); line-height: 1.2; letter-spacing: -0.02em; max-width: 34em; }
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li { padding: 14px 12px 20px 0; border-bottom: 1px solid var(--rule); }
  .flow li + li { padding-left: 12px; }
  .flow li:nth-child(2) { border-right: 0; } .flow li:nth-child(3) { padding-left: 0; }
  .case > div { grid-template-columns: 1fr; gap: 6px; }
}

/* ═════════ 04 · SHADOW CANON · Revelatio ═════════ */
/* This chapter wears Shadow Canon's own brand (shadowcanon.com): void black, bone text, coral and teal accents,
   a Syne Mono wordmark and Outfit for reading. The headline stays in Geist like every chapter. */
.page--canon { --void: #0a0a0b; --bone: #c8c8c0; --ghost: #8a8a82; --teal: #2A9D8F;
  background: var(--void); color: var(--bone); --rule: rgba(200,200,192,0.14); --mute: var(--ghost); }
.page--canon .huge { font-size: clamp(44px, 8.4vw, 150px); max-width: 12ch; color: #E6E4DD; }
.page--canon .intro__text, .page--canon .canon__desc, .sc-uses__k { font-family: 'Outfit', var(--sans); font-weight: 300; letter-spacing: 0.01em; }
.page--canon .intro__text b { font-weight: 400; color: #E6E4DD; }
.sc-mark { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; color: var(--ghost); }
.sc-word { font-family: 'Syne Mono', var(--mono); font-size: clamp(15px, 1.4vw, 20px); letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone); }
.sc-word > span { position: relative; }
.sc-word sup { position: absolute; left: 100%; top: -0.35em; font-family: 'Outfit', var(--sans); font-size: 0.45em; letter-spacing: 0; opacity: .6; }
.intro__text p + p { margin-top: 0.7em; }
.sc-lead { font-size: 0.72em; line-height: 1.4; color: rgba(200,200,192,0.8); }
/* the rotating plate: Shadow Canon's own way of listing what it's for, one at a time with a brief strobe */
.sc-uses { display: grid; justify-items: center; gap: 14px; margin-top: clamp(60px, 8vw, 110px); text-align: center; }
.sc-uses__k { font-size: 15px; color: rgba(200,200,192,0.6); }
.sc-plate { position: relative; display: grid; place-items: center; min-width: min(360px, 100%); padding: 14px 26px; background: var(--bone); color: var(--void);
  box-shadow: 0 0 22px rgba(230,228,221,0.14); }
.sc-plate__t { position: relative; font-family: 'Syne Mono', var(--mono); font-size: clamp(12px, 1.2vw, 15px); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.sc-plate__t::before, .sc-plate__t::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.sc-plate.is-flash { animation: scStrobe .35s steps(2, jump-none) forwards; }
.sc-plate.is-flash .sc-plate__t::before { opacity: 1; text-shadow: -4px 0 #E8653A; animation: scSplit1 .35s steps(3, jump-none) forwards; }
.sc-plate.is-flash .sc-plate__t::after { opacity: 1; text-shadow: 4px 0 var(--teal); animation: scSplit2 .35s steps(3, jump-none) forwards; }
@keyframes scStrobe {
  0% { filter: invert(0); transform: translate(0, 0) skew(0deg); clip-path: inset(0); }
  20% { filter: invert(1) contrast(150%); transform: translate(-4px, 4px) skew(-2deg); clip-path: inset(10% 0 10% 0); }
  50% { filter: invert(0) contrast(200%); transform: translate(4px, -3px) skew(2deg); clip-path: inset(0); }
  80% { filter: invert(1) contrast(200%); transform: translate(-3px, -3px) skew(3deg); clip-path: inset(8% 0 8% 0); }
  100% { filter: invert(0); transform: translate(0, 0) skew(0deg); clip-path: inset(0); }
}
@keyframes scSplit1 { 0% { transform: translate(-5px, -3px); clip-path: inset(0 0 55% 0); } 50% { transform: translate(-3px, 4px); clip-path: inset(40% 0 10% 0); } 100% { transform: none; clip-path: inset(0); opacity: 0; } }
@keyframes scSplit2 { 0% { transform: translate(5px, 3px); clip-path: inset(45% 0 0 0); } 50% { transform: translate(3px, -4px); clip-path: inset(10% 0 70% 0); } 100% { transform: none; clip-path: inset(0); opacity: 0; } }
.sc-k { margin-top: clamp(70px, 10vw, 140px); font-family: 'Outfit', var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ghost); }
.sc-k span { font-weight: 300; text-transform: none; letter-spacing: 0.02em; }
/* channel tuner, like the set controls on an old television that has been used for years (not broken, just lived
   in): a knurled knob with chipped paint and a thumb-polished spot, a channel readout behind dark glass, and a dial
   with faded print, a smudged window and a warm lamp behind the needle. Panel: scratches, grime, rubbed edges,
   two mismatched screws. (Custom, for Shadow Canon's CRT) */
.tuner { --a: #E8653A; position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 20px; margin-top: 16px; padding: 16px 22px 16px;
  background-color: #141413;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='90'%3E%3Cg stroke='white' stroke-linecap='round' fill='none'%3E%3Cpath d='M12 70 L120 61' stroke-opacity='.07' stroke-width='.6'/%3E%3Cpath d='M210 18 L262 22' stroke-opacity='.06' stroke-width='.5'/%3E%3Cpath d='M300 75 Q330 70 395 72' stroke-opacity='.05' stroke-width='.6'/%3E%3Cpath d='M60 20 L78 34' stroke-opacity='.06' stroke-width='.4'/%3E%3Cpath d='M150 84 L170 79' stroke-opacity='.08' stroke-width='.5'/%3E%3Cpath d='M340 12 L352 30' stroke-opacity='.05' stroke-width='.4'/%3E%3Cpath d='M240 52 L250 47' stroke-opacity='.07' stroke-width='.4'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 22% 70% at 0% 55%, rgba(255,255,255,0.045), transparent 70%),
    radial-gradient(ellipse 30% 80% at 100% 100%, rgba(255,255,255,0.03), transparent 70%),
    linear-gradient(#1a1a18, #0f0f0e);
  background-size: 420px 90px, 200px 200px, auto, auto, auto;
  border: 1px solid rgba(255,255,255,0.05); border-bottom: 0; border-radius: 3px 3px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(0,0,0,0.25), 0 -14px 30px -24px rgba(0,0,0,0.9); }
/* two screws, not quite lined up */
.tuner::before, .tuner::after { content: ''; position: absolute; top: 7px; width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(0,0,0,0.4); }
.tuner::before { left: 7px; background: linear-gradient(28deg, transparent 43%, rgba(0,0,0,0.75) 43% 59%, transparent 59%), radial-gradient(circle at 35% 30%, #77746c, #2c2b28 72%); }
.tuner::after { right: 7px; background: linear-gradient(-62deg, transparent 43%, rgba(0,0,0,0.75) 43% 59%, transparent 59%), radial-gradient(circle at 35% 30%, #6c6962, #262523 72%); }
.tuner__knob { position: relative; width: 56px; height: 56px; border-radius: 50%; transform: rotate(var(--rot, -40deg));
  background:
    radial-gradient(circle at 68% 78%, rgba(255,255,255,0.09), transparent 38%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2.2 -1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"),
    repeating-conic-gradient(rgba(255,255,255,0.05) 0 3deg, rgba(0,0,0,0.14) 3deg 6deg),
    radial-gradient(circle at 36% 30%, #45443f, #20201e 58%, #0d0d0c);
  box-shadow: 0 6px 12px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.05), inset 0 1px 1px rgba(255,255,255,0.14), inset 0 -2px 3px rgba(0,0,0,0.6);
  transition: transform .7s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; }
/* the painted pointer line, chipped in a couple of places */
.tuner__knob span { position: absolute; z-index: 1; left: 50%; top: 6px; width: 3px; height: 15px; margin-left: -1.5px; border-radius: 1px;
  background: linear-gradient(rgba(214,209,196,0.85) 0 28%, rgba(214,209,196,0.35) 28% 40%, rgba(214,209,196,0.8) 40% 78%, rgba(214,209,196,0.5) 78%); }
.tuner__knob::after { content: ''; position: absolute; inset: 15px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #302f2b, #131312);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.6); }
.tuner__ch { display: grid; gap: 3px; min-width: 3.2em; }
.tuner__ch .mono { font-size: 10px; color: rgba(190,182,165,0.55); }
.tuner__ch b { justify-self: start; padding: 3px 7px 2px; border-radius: 2px; background: rgba(0,0,0,0.45); box-shadow: inset 0 1px 3px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.04);
  font-family: 'Syne Mono', var(--mono); font-weight: 400; font-size: 30px; line-height: 1; color: var(--a); opacity: 0.88;
  text-shadow: 0 0 4px color-mix(in srgb, var(--a) 40%, transparent); transition: color .4s; }
.tuner__dial { position: relative; height: 54px; border: 1px solid rgba(255,255,255,0.07); border-radius: 2px; background-color: #0b0a09;
  background-image:
    radial-gradient(ellipse 40% 75% at 72% 28%, rgba(255,255,255,0.035), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cg fill='none' stroke='white' stroke-opacity='.035' stroke-width='.6'%3E%3Cellipse cx='30' cy='20' rx='4' ry='3'/%3E%3Cellipse cx='30' cy='20' rx='8' ry='6'/%3E%3Cellipse cx='30' cy='20' rx='12' ry='9'/%3E%3Cellipse cx='30' cy='20' rx='16' ry='12'/%3E%3Cellipse cx='30' cy='20' rx='20' ry='15'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(11,10,9,0) 0%, rgba(11,10,9,0.4) 16%, rgba(11,10,9,0) 30%, rgba(11,10,9,0.28) 63%, rgba(11,10,9,0) 82%),
    repeating-linear-gradient(90deg, rgba(205,196,175,0.3) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(205,196,175,0.5) 0 1px, transparent 1px 50px);
  background-size: auto, 60px 40px, 100% 14px, 100% 7px, 100% 12px;
  background-position: 0 0, 26% 60%, 0 100%, 0 100%, 0 100%;
  background-repeat: no-repeat;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.85), inset 0 -1px 0 rgba(255,255,255,0.03); overflow: hidden; }
/* the old dial lamp: a warm glow sits behind the needle */
.tuner__dial::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 22% 130% at var(--needle, 10%) 50%, rgba(255,170,90,0.09), transparent 70%); transition: background-position .9s; }
.tuner__needle { position: absolute; top: 2px; bottom: 2px; left: var(--needle, 10%); width: 2px; margin-left: -1px; background: var(--a); opacity: 0.9;
  box-shadow: 1px 0 1px rgba(0,0,0,0.5); transition: left .9s cubic-bezier(0.34, 1.3, 0.64, 1), background .4s; }
.tab { position: absolute; z-index: 1; top: 9px; padding-left: 10px; white-space: nowrap; font-family: 'Syne Mono', var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(200,190,170,0.45); transition: color .4s, text-shadow .4s; }
/* each station's name starts just right of its mark on the dial, so the needle never cuts through it */
.tab[data-sim="ingen"] { left: 10%; } .tab[data-sim="artemis"] { left: 56%; }
.tab b { font-weight: 400; margin-right: 8px; opacity: .6; }
.tab:hover { color: rgba(225,216,196,0.8); }
.tab.is-on { color: #EDE5D3; text-shadow: 0 0 6px rgba(255,185,120,0.25); }
/* the use cases burn through the way the title of The Thing (1982) was shot: light behind a dark sheet, each letter
   opening from a hot point, flaring orange at its edge, cooling to a pale blue glow and settling, with a single
   flicker, a wisp of smoke, and the faint flicker and gate weave of projected film */
.sc-burn { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1em 2.4em; max-width: 840px; margin-top: 36px;
  font-family: 'Outfit', var(--sans); font-weight: 400; font-size: clamp(12px, 1.1vw, 14px); letter-spacing: 0.32em; text-transform: uppercase; line-height: 1.3; }
.sc-w { position: relative; white-space: nowrap; color: rgba(200,200,192,0.88); }
.sc-w i { display: inline-block; font-style: normal; opacity: 0; }
.sc-w.is-burnt i { animation: scBurn 2.6s var(--d) cubic-bezier(0.25, 0.6, 0.2, 1) forwards; }
@keyframes scBurn {
  0% { opacity: 0; color: #fff; clip-path: circle(0% at var(--ox) var(--oy)); filter: blur(1.2px); text-shadow: 0 0 2px #fff, 0 0 7px #ffb36b, 0 0 14px #ff6a1f; }
  6% { opacity: 1; }
  10% { opacity: 0.3; }
  14% { opacity: 1; }
  38% { color: #fff1dc; clip-path: circle(75% at var(--ox) var(--oy)); filter: blur(0.5px); text-shadow: 0 0 2px #fff, 0 0 9px #ffa25a, 0 0 18px rgba(255,110,40,0.55); }
  62% { color: #e4ecff; clip-path: circle(150% at var(--ox) var(--oy)); filter: none; text-shadow: 0 0 2px rgba(255,255,255,0.7), 0 0 10px rgba(110,150,255,0.5); }
  100% { opacity: 1; color: rgba(200,200,192,0.88); clip-path: circle(150% at var(--ox) var(--oy)); text-shadow: 0 0 6px rgba(110,150,255,0.16); }
}
/* a wisp of smoke lifts off each word as it burns through */
.sc-w::after { content: attr(data-text); position: absolute; left: 0; top: 0; color: rgba(175,168,155,0.5); filter: blur(4px); opacity: 0; pointer-events: none; }
.sc-w.is-burnt::after { animation: scSmoke 3.4s 0.4s ease-out forwards; }
@keyframes scSmoke { 0% { opacity: 0; transform: translateY(0); } 22% { opacity: 0.45; } 100% { opacity: 0; transform: translateY(-18px) scaleX(1.06); filter: blur(11px); } }
.sc-burn.is-lit { animation: scGate 4.2s steps(1) infinite; }
@keyframes scGate { 0%, 100% { transform: translate(0, 0); opacity: 1; } 23% { transform: translate(0.4px, -0.3px); opacity: 0.97; } 47% { transform: translate(-0.3px, 0.2px); opacity: 1; } 71% { transform: translate(0.2px, 0.4px); opacity: 0.985; } }
@media (max-width: 760px) { .sc-burn { gap: 0.9em 1.6em; font-size: 11px; letter-spacing: 0.24em; } }
@media (prefers-reduced-motion: reduce) { .sc-w i { opacity: 1; } .sc-w.is-burnt i, .sc-w.is-burnt::after, .sc-burn.is-lit { animation: none; } }
.matrix { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.matrix canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.matrix img { display: none; }
.matrix.no-gl img { display: block; position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.matrix.no-gl canvas { display: none; }
#canonHead .tw { display: inline-block; will-change: opacity, filter; }
.matrix__c { position: absolute; z-index: 3; color: var(--bone); pointer-events: none; font-family: 'Syne Mono', var(--mono); letter-spacing: 0.12em; }
.matrix__c--tl { left: 14px; top: 12px; } .matrix__c--tr { right: 14px; top: 12px; }
.canon__row { padding-top: 12px; }
.canon__desc { font-size: 17px; line-height: 1.3; max-width: 34em; color: #BDB8AE; }
/* "Request access" sits under the "Desktop only" label; once clicked it fades and drifts up out of focus */
.access { position: absolute; z-index: 4; right: 14px; top: 40px; font-size: 13px; padding: 13px 18px;
  background: var(--stone); color: var(--night); box-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 12px 28px -12px rgba(0,0,0,0.7);
  transition: opacity 1.2s cubic-bezier(.4,0,.2,1), filter 1.2s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.4,0,.2,1), visibility 0s, background .3s; }
.access:hover { background: var(--coral); }
.access.is-gone { opacity: 0; filter: blur(6px); transform: translateY(-8px); visibility: hidden; pointer-events: none;
  transition: opacity 1.2s cubic-bezier(.4,0,.2,1), filter 1.2s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.4,0,.2,1), visibility 0s linear 1.2s; }
@media (max-width: 760px) { .tuner { grid-template-columns: auto 1fr; gap: 12px 16px; padding: 12px 14px 14px; } .tuner__ch { display: none; }
  .tuner__knob { width: 46px; height: 46px; } .tuner__knob::after { inset: 12px; } .tab span { display: none; } .tab { font-size: 10px; } .sc-lead { font-size: 0.82em; } .sc-plate { min-width: 0; width: 100%; } .access { font-size: 10px; padding: 8px 10px; right: 12px; top: 34px; } .matrix { aspect-ratio: 16 / 10; } }
.term { position: absolute; inset: 0; z-index: 2; display: none; flex-direction: column; justify-content: center; padding: 6% 8%; background: rgba(0,0,0,0.86); color: var(--stone); font-family: var(--mono); font-size: clamp(12px, 1.25vw, 17px); text-transform: uppercase; line-height: 1.6; }
.term.is-on { display: flex; }
/* phones: the simulation turns you away in its own voice, on its own screen */
.term--deny { --t: #7CF0A0; justify-content: center; gap: 4px; padding: 0 9%; color: var(--t); background: rgba(2,6,3,0.9); text-shadow: 0 0 6px rgba(124,240,160,0.35); }
.term--artemis { --t: #E9E6DF; background: rgba(8,10,14,0.92); text-shadow: none; }
.term--deny .deny__k { font-size: 10px; opacity: .7; letter-spacing: .08em; }
.term--deny .deny__big { font-size: clamp(22px, 6.4vw, 34px); letter-spacing: .14em; line-height: 1.1; margin: 2px 0 4px; animation: denyBlink 1.1s steps(1) infinite; }
.term--artemis .deny__big { color: #FC3D21; animation: none; }
.term--deny .deny__t { font-size: 11px; line-height: 1.45; }
.term.term--deny .tbtn { margin-top: 8px; padding: 6px 8px; font-size: 10px; background: transparent; color: var(--t); border: 1px solid currentColor; }
.term.term--deny .tbtn:hover { background: var(--t); color: #000; }
.term.term--deny .t-dim { color: var(--t); opacity: .6; }
@keyframes denyBlink { 50% { opacity: .35; } }
.matrix:has(.term.is-on) .matrix__c { opacity: 0; } /* the screen's corner labels step aside while it shows a message */
.term .t-dim { color: #8C877E; }
.term .t-red { color: var(--coral); }
.term input { font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid currentColor; outline: none; width: 16ch; text-transform: uppercase; }
.term .row-in { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; }
.term .tbtn { font: inherit; margin-top: 14px; margin-right: 10px; padding: 6px 12px; background: var(--stone); color: #000; }
.term .tbtn--ghost { background: transparent; color: var(--stone); border: 1px solid var(--stone); }
.term .tbtn:hover { background: var(--coral); color: #000; }
.code { display: flex; gap: 6px; margin-top: 10px; }
.code input { width: 2.2em; text-align: center; font-size: 1.4em; border: 1px solid var(--stone); padding: 4px 0; }
.creds { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 18px; margin-top: 10px; padding: 10px 0; border-block: 1px solid rgba(233,230,223,0.3); max-width: 30em; align-items: center; }
.creds b { font-weight: 500; text-transform: none; font-size: 1.15em; }
.creds button { border-bottom: 1px solid currentColor; }
.gonogo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; max-width: 34em; }
.gonogo button { border: 1px solid rgba(233,230,223,0.4); padding: 10px 8px; display: grid; gap: 4px; }
.gonogo button small { font-size: .8em; color: #8C877E; }
.gonogo button.is-go { background: var(--stone); color: #000; }
.gonogo button.is-go small { color: #000; }
.scan { position: relative; width: 84px; height: 84px; margin-top: 14px; border-radius: 50%; border: 1px solid var(--stone); display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.scan svg { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); }
.scan circle { fill: none; stroke: var(--coral); stroke-width: 3; stroke-dasharray: 289; stroke-dashoffset: 289; }
.notif { position: fixed; top: calc(var(--barH) + 10px); right: var(--g); z-index: 85; width: min(330px, calc(100vw - 2 * var(--g))); padding: 12px 14px 14px; background: var(--stone); color: var(--ink); box-shadow: 0 20px 40px rgba(0,0,0,0.35); animation: notifIn .6s var(--ease-out) both; }
@keyframes notifIn { from { transform: translateY(-20px); opacity: 0; } }
.notif__app { display: flex; justify-content: space-between; color: var(--mute); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.notif__text { margin-top: 10px; font-size: 15px; line-height: 1.35; }
.notif__text b { display: block; font-family: var(--mono); font-size: 28px; letter-spacing: 0.2em; font-weight: 500; margin-top: 4px; }
.notif__fill { margin-top: 10px; border-bottom: 1px solid currentColor; }
.station { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; flex-direction: column; }
.station__bar { display: flex; gap: 20px; align-items: center; padding: 10px var(--g); background: var(--stone); color: #000; }
.station__creds { flex: 1; text-transform: none; }
.station__bar button { border-bottom: 1px solid currentColor; }
.station iframe { flex: 1; width: 100%; border: 0; }

/* ═════════ 05 · CRAFT ═════════ */
/* Majoba Solutions on the Web page: its own cream band, holding the 1:1 cards from majobasolutions.com */
.studio { background: #F5F0EB; padding-top: clamp(30px, 4vw, 50px); }
.work__item--studio { border-bottom: 0; padding-bottom: 10px; }
.studio__text { font-size: 17px; line-height: 1.4; color: #34332F; max-width: 36em; }

/* ═════════ 06 · CONTACT ═════════ */
.page--contact { background: var(--blush); }
.contact { padding-top: clamp(70px, 12vh, 140px); }
.contact__lede { font-size: clamp(24px, 3vw, 46px); letter-spacing: -0.03em; line-height: 1.08; max-width: 22ch; margin-top: 18px; }
.contact__rows { margin-top: clamp(50px, 8vw, 110px); border-top: 1px solid var(--ink); }
.contact__rows li { display: grid; grid-template-columns: 1fr 4fr 1fr; gap: var(--g); align-items: baseline; padding: 14px 0 22px; border-bottom: 1px solid var(--rule); }
.contact__rows a { font-size: clamp(22px, 3.2vw, 52px); letter-spacing: -0.035em; font-weight: 500; line-height: 1; word-break: break-all; }
.contact__rows button { justify-self: end; border-bottom: 1px solid currentColor; }
.foot { position: relative; margin-top: clamp(80px, 12vw, 180px); }
.foot canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wordmark { position: relative; display: block; text-align: center; font-size: 10vw; font-weight: 700; letter-spacing: -0.065em; line-height: 0.8; padding: 0.15em 0.04em 0.08em 0; white-space: nowrap; }
.foot__bar { position: relative; display: flex; justify-content: space-between; padding: 14px var(--g) 46px; border-top: 1px solid var(--ink); }
@media (max-width: 760px) { .contact__rows li { grid-template-columns: 1fr; gap: 6px; } .contact__rows button { justify-self: start; } }

/* ═════════ SCREENSHOT VIEWER · a modal over the page, after Signal-A's archive slider ═════════ */
.archive { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 3vh 3vw;
  background: rgba(13,13,12,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: arcFade .35s ease both; }
@keyframes arcFade { from { opacity: 0; } }
.archive__panel { width: min(1320px, 100%); height: 100%; max-height: 900px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: var(--stone); color: var(--ink); border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 12px 24px -12px rgba(0,0,0,0.3), 0 40px 90px -30px rgba(0,0,0,0.55);
  animation: arcIn .5s var(--ease-out) both; }
@keyframes arcIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.archive__top { display: grid; grid-template-columns: 1fr auto auto; gap: var(--g); align-items: center; padding: 12px 12px 12px var(--g); border-bottom: 1px solid var(--rule); }
.archive__kicker { color: var(--mute); }
.archive__count { color: var(--mute); }
.archive__close { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 6px; background: var(--ink); color: var(--stone);
  font-size: 14px; font-weight: 500; letter-spacing: 0.01em; transition: background .25s; }
.archive__close span { font-size: 13px; opacity: .8; }
.archive__close:hover { background: var(--coral); color: var(--ink); }
.archive__stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; padding: 18px var(--g) 0; container-type: size; }
/* each screenshot sits in a plain browser frame with the page's address, so it reads as the live site */
.shot { width: min(100cqw, (100cqh - 32px) * 1.6); display: grid; grid-template-rows: 32px auto; border-radius: 6px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(30,25,15,0.12), 0 22px 44px -24px rgba(30,25,15,0.45); }
.shot__bar { display: flex; align-items: center; padding: 0 10px; background: #DDD9D0; border-bottom: 1px solid rgba(17,17,16,0.08); }
.shot__url { width: min(100%, 560px); margin: 0 auto; padding: 4px 12px; border-radius: 4px; background: rgba(255,255,255,0.6); color: #4A4740;
  font-size: 11px; letter-spacing: 0; text-transform: none; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive__stage .shot img { display: block; width: 100%; height: auto; max-width: none; max-height: none; aspect-ratio: 16 / 10; border-radius: 0; box-shadow: none; }
.archive__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 18px 40px -20px rgba(0,0,0,0.4); }
.archive__stage .is-phone { height: 100%; width: auto; border: 6px solid var(--ink); border-radius: 22px; }
.cmp { position: relative; display: grid; }
.cmp img { grid-area: 1 / 1; }
.cmp img + img { opacity: 0; transition: opacity .7s ease; }
.cmp.is-open img + img { opacity: 1; }
.cmp__toggle { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: var(--ink); color: var(--stone); padding: 8px 12px; border-radius: 4px; }
.archive__cap { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--g); padding: 16px var(--g) 0; align-items: baseline; }
.archive__cap h3 { font-size: clamp(20px, 2vw, 30px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.archive__cap p:not(.mono) { font-size: 16px; line-height: 1.35; max-width: 36em; }
.archive__tags { color: var(--mute); justify-self: end; }
.archive__nav { display: grid; grid-template-columns: auto 1fr auto; gap: var(--g); align-items: center; padding: 14px var(--g) 16px; }
.archive__nav > button { padding: 8px 12px; border: 1px solid var(--rule); border-radius: 4px; transition: background .2s; }
.archive__nav > button:hover { background: rgba(17,17,16,0.06); }
.archive__thumbs { display: flex; gap: 6px; justify-content: center; overflow-x: auto; }
.archive__thumbs button { width: 64px; flex: none; padding: 2px; border-radius: 4px; outline: 1px solid transparent; transition: outline-color .3s; }
.archive__thumbs button:hover { outline-color: var(--rule); }
.archive__thumbs button.is-on { outline: 2px solid var(--ink); }
.archive__thumbs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 2px; }
@media (max-width: 760px) {
  .archive { padding: 2vh 3vw; }
  .archive__top { grid-template-columns: 1fr auto; } .archive__count { display: none; }
  .archive__kicker { font-size: 10px; }
  .archive__cap { grid-template-columns: 1fr; gap: 6px; } .archive__tags { justify-self: start; }
  .archive__stage .is-phone { height: 42dvh; }
  .archive__thumbs { display: none; } .archive__nav { grid-template-columns: 1fr 1fr; } #arcPrev { justify-self: start; } #arcNext { justify-self: end; }
}

/* ═════════ MEMORY BOT · how it works ═════════
   Feature tabs, each with a small live demo, after Cerebrium (SOTD). Entity colours: person blush,
   topic sage, event coral, meme amber; things are marked by filling them with their colour, never with dots. */
.explain { display: grid; grid-template-columns: minmax(250px, 32%) 1fr; height: 600px; margin-top: 28px;
  background: var(--deep); color: var(--stone); border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,25,30,0.18), 0 24px 50px -30px rgba(20,25,30,0.6); }
.explain__steps { display: flex; flex-direction: column; border-right: 1px solid rgba(233,230,223,0.1); }
.explain__steps button { position: relative; display: grid; grid-template-columns: 2.4rem 1fr; grid-template-rows: auto 0fr; column-gap: 6px; width: 100%;
  padding: 20px 22px 18px; border-bottom: 1px solid rgba(233,230,223,0.1); color: rgba(233,230,223,0.5); transition: grid-template-rows .6s var(--ease-out), color .4s, background .4s; }
.explain__steps button:hover { color: var(--stone); }
.explain__steps button.is-on { grid-template-rows: auto 1fr; color: var(--stone); background: rgba(233,230,223,0.04); }
.explain__steps .mono { padding-top: 6px; color: inherit; opacity: .7; }
.explain__steps b { font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.03em; line-height: 1.1; }
.explain__steps p { grid-column: 2; overflow: hidden; min-height: 0; font-size: 15px; line-height: 1.38; color: rgba(233,230,223,0.78); }
.explain__steps button.is-on p { padding-top: 8px; }
.explain__steps i { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--stone); transform: scaleX(0); transform-origin: left; }
.explain__steps i.is-run { animation: exBar var(--dur) linear forwards; }
@keyframes exBar { to { transform: scaleX(1); } }
.explain__now, .ex-note { display: none; }
.explain__key { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 22px 20px; }
.explain__steps .explain__key span { padding: 4px 7px 3px; border-radius: 3px; background: var(--c); color: var(--ink); opacity: 1; }

.explain__stage { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(ellipse 80% 70% at 70% 45%, #243240, var(--deep) 75%); }
.ex-status { position: absolute; left: 24px; right: 24px; top: 18px; display: flex; gap: 12px; color: rgba(233,230,223,0.6); }
.ex-status b { font-weight: 400; color: var(--stone); }
.ex-status b::after { content: ' messages'; color: rgba(233,230,223,0.6); }
.ex-feed { position: absolute; left: 24px; top: 52px; width: calc(48% - 30px); display: flex; flex-direction: column; gap: 10px; }
.ex-msg { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 12px; border-radius: 6px; background: rgba(233,230,223,0.06);
  opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.s0 .ex-msg { opacity: 1; transform: none; transition-delay: calc(var(--i) * .32s + .15s); }
.is-answering .ex-msg:not(.is-lit) { opacity: .3; transition-delay: 0s; }
.ex-msg__av { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: rgba(233,230,223,0.14); color: var(--stone); font-size: 12px; }
.ex-msg__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ex-msg__h b { font-weight: 500; font-size: 14px; }
.ex-msg__h .mono { color: rgba(233,230,223,0.5); font-size: 10px; }
.ex-msg__t { font-size: 15px; line-height: 1.35; margin-top: 2px; }
.ex-msg__img { width: 92px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; margin-top: 8px; }
.ent { padding: 0 .16em; margin: 0 -.16em; border-radius: 3px; background: transparent; color: inherit; transition: background .5s, color .5s; }
.s1 .ent { background: var(--c); color: var(--ink); transition-delay: calc(var(--d) + .2s); }
.ex-graph { position: absolute; left: 50%; right: 20px; top: 76px; bottom: 34px; }
.ex-node { position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-50%, -50%) scale(.7); opacity: 0; display: grid; justify-items: center; gap: 1px;
  padding: 7px 11px 6px; border-radius: 4px; background: var(--c); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.1; white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,0.6); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), outline-color .4s; outline: 2px solid transparent; outline-offset: 3px; }
.ex-node small { font-size: 9px; opacity: .65; }
.s1 .ex-node { opacity: 1; transform: translate(-50%, -50%); transition-delay: calc(var(--i) * .12s + .5s); }
.ex-node.is-lit { outline-color: var(--stone); }
.is-answering .ex-node:not(.is-lit) { opacity: .25; transition-delay: 0s; }
.ex-empty { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(233,230,223,0.35); transition: opacity .4s; }
.s1 .ex-empty { opacity: 0; }
.ex-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.ex-edge path { fill: none; stroke: rgba(233,230,223,0.5); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-out), stroke .4s, opacity .4s; }
.ex-edge text { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .02em; fill: rgba(233,230,223,0.75); text-anchor: middle;
  paint-order: stroke; stroke: #1F2A35; stroke-width: 5px; stroke-linejoin: round; opacity: 0; transition: opacity .5s; }
.s2 .ex-edge path { stroke-dashoffset: 0; transition-delay: calc(var(--i) * .22s + .1s); }
.s2 .ex-edge text { opacity: 1; transition-delay: calc(var(--i) * .22s + .7s); }
.ex-edge.is-lit path { stroke: var(--stone); stroke-width: 2.2; }
.ex-root { fill: none; stroke: var(--c); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; transition: opacity .6s, stroke-width .4s; }
.s2 .ex-root { opacity: .45; transition-delay: calc(var(--i) * .1s + .9s); }
.ex-root.is-lit { opacity: 1; stroke-width: 1.6; }
.is-answering .ex-edge:not(.is-lit), .is-answering .ex-root:not(.is-lit) { opacity: .12; transition-delay: 0s; }
.ex-ask { position: absolute; z-index: 3; left: 50%; right: 20px; top: 14px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 6px;
  background: rgba(233,230,223,0.1); border: 1px solid rgba(233,230,223,0.22); opacity: 0; transform: translateY(-8px); transition: opacity .5s, transform .5s var(--ease-out); }
.ex-ask .mono { color: rgba(233,230,223,0.6); }
.ex-ask p { font-size: 15px; min-height: 1.3em; }
.ex-ask p::after { content: ''; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--stone); animation: exCaret 1s steps(1) infinite; }
@keyframes exCaret { 50% { opacity: 0; } }
.s3 .ex-ask { opacity: 1; transform: none; }
.ex-card { position: absolute; z-index: 3; left: 24px; bottom: 22px; width: calc(48% - 30px); display: grid; grid-template-columns: 118px 1fr; gap: 14px; padding: 12px;
  border-radius: 6px; background: var(--stone); color: var(--ink); box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 24px 40px -18px rgba(0,0,0,0.6);
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.is-answering .ex-card { opacity: 1; transform: none; transition-delay: .5s; }
.ex-card img { width: 118px; height: 100%; min-height: 110px; object-fit: cover; border-radius: 4px; }
.ex-card .mono { color: var(--mute); font-size: 10px; }
.ex-card h4 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin: 4px 0; }
.ex-card blockquote { font-size: 14px; line-height: 1.3; margin-top: 8px; }
.ex-card cite { display: block; font-style: normal; margin-top: 3px; }
@media (max-width: 960px) {
  .explain { grid-template-columns: 1fr; height: auto; }
  .explain__steps { border-right: 0; }
  .explain__steps button { padding: 14px 16px; }
  .explain__key { display: none; }
  .explain__stage { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
  .ex-status, .ex-feed, .ex-ask, .ex-graph { position: relative; inset: auto; width: auto; }
  .ex-feed { gap: 7px; }
  .ex-msg { padding: 8px 10px; } .ex-msg__t { font-size: 14px; } .ex-msg__img { display: none; }
  .ex-ask { order: 3; } .ex-graph { order: 4; height: 300px; margin-top: 4px; }
  .ex-node { font-size: 12px; padding: 5px 8px 4px; }
  .ex-root:not(.is-lit) { display: none; }
  .ex-ask { padding: 8px 12px; } .ex-ask p { font-size: 13px; }
  .ex-card { left: 14px; right: 14px; width: auto; top: 44px; bottom: auto; grid-template-columns: 96px 1fr; }
  .ex-card img { width: 96px; min-height: 96px; }
}
@media (max-width: 760px) {
  .explain__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .explain__steps button { grid-template-columns: 1fr; grid-template-rows: auto auto; row-gap: 3px; padding: 16px 10px 13px; border-bottom: 0;
    border-right: 1px solid rgba(233,230,223,0.08); background: none; }
  .explain__steps li:nth-child(4) button { border-right: 0; }
  .explain__steps button.is-on { background: rgba(233,230,223,0.05); }
  .explain__steps .mono { padding-top: 0; font-size: 10px; }
  .explain__steps b { font-size: 15px; letter-spacing: -0.02em; }
  .explain__steps p { display: none; }
  .explain__steps i { top: 0; bottom: auto; }
  .explain__now { display: block; min-height: 5.6em; padding: 4px 16px 16px; font-size: 15px; line-height: 1.4; color: rgba(233,230,223,0.82);
    border-bottom: 1px solid rgba(233,230,223,0.1); }
  .explain__stage { display: block; height: 560px; padding: 0; }
  .ex-status { position: absolute; left: 16px; right: 16px; top: 14px; transition: opacity .4s; }
  .s1 .ex-status { opacity: 0; } /* the step's words already sit above the stage */
  .explain__steps b { font-size: clamp(12px, 3.7vw, 15px); }
  .explain__steps button { padding-left: 8px; padding-right: 8px; }
  .ex-feed { position: absolute; left: 12px; right: 12px; top: 42px; transition: opacity .5s, transform .5s var(--ease-out); }
  .s2 .ex-feed { opacity: 0; transform: translateY(-12px); pointer-events: none; }
  .ex-graph { position: absolute; left: 14px; right: 14px; top: 104px; bottom: 154px; height: auto; margin: 0; opacity: 0; transition: opacity .6s .15s; }
  .ex-node { left: var(--mx); top: var(--my); }
  @media (max-width: 360px) { .ex-ask .mono { display: none; } .ex-ask p { font-size: 12.5px; } }
  .ex-edge text { font-size: 9px; }
  .s2 .ex-graph { opacity: 1; }
  .ex-lines { opacity: 0; transition: opacity .6s .15s; } .s2 .ex-lines { opacity: 1; }
  .ex-root { display: none; }
  .ex-ask { position: absolute; left: 12px; right: 12px; top: 42px; }
  .ex-card { left: 12px; right: 12px; top: auto; bottom: 12px; }
  .ex-note { display: block; position: absolute; left: 16px; right: 16px; bottom: 22px; color: rgba(233,230,223,0.6); line-height: 1.6; opacity: 0; transition: opacity .5s; }
  .s2:not(.s3) .ex-note { opacity: 1; transition-delay: 1.2s; }
}

/* Cursor label · Signal-A */
.cursor { position: fixed; left: 0; top: 0; z-index: 99; pointer-events: none; padding: 6px 9px; background: var(--ink); color: var(--stone); transform: translate(-50%, -50%) scale(0); transition: transform .3s var(--ease-out); white-space: nowrap; }
.cursor.is-on { transform: translate(-50%, -50%) scale(1); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
.toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 99; padding: 8px 12px; background: var(--ink); color: var(--stone); }

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