:root {
    /* CREAM / OBSIDIAN / OXBLOOD / SAFFRON — creative director palette v2.0 */
    --bg: #F1EDE3;
    --bg-2: #E9E3D4;
    --card: #FBF7EE;
    --ink: #0A0B10;
    --ink-2: #2E3138;
    --muted: #78716A;
    --mark: #6E1F2E;
    --mark-2: #8A3244;
    --wash: color-mix(in oklab, #6E1F2E 5%, transparent);
    --signal: #C48F44;
    --signal-2: #D9A45A;
    --signal-wash: color-mix(in oklab, #C48F44 18%, transparent);
    --rule: #D2CBB8;
    --line: #C5BDA8;
    --hair: rgba(10,11,16,0.09);
    --lbdp-mark: var(--mark);
    --lbdp-signal: var(--signal);
    --lbdp-muted: var(--muted);
    --lbdp-rule: var(--rule);
    --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
    --display: "Instrument Serif", "Fraunces", "Iowan Old Style", Georgia, serif;
    --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --easing: cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0A0B10;
      --bg-2: #12131A;
      --card: #171923;
      --ink: #F1EDE3;
      --ink-2: #CFC9BC;
      --muted: #8F887C;
      --mark: #C9463C;
      --mark-2: #D95A4F;
      --wash: color-mix(in oklab, #C9463C 12%, transparent);
      --signal: #E5B966;
      --signal-2: #EEC880;
      --signal-wash: color-mix(in oklab, #E5B966 15%, transparent);
      --rule: #1E2028;
      --line: #262933;
      --hair: rgba(241,237,227,0.10);
    }
  }
  :root[data-theme="dark"] {
    --bg: #0A0B10;
    --bg-2: #12131A;
    --card: #171923;
    --ink: #F1EDE3;
    --ink-2: #CFC9BC;
    --muted: #8F887C;
    --mark: #C9463C;
    --mark-2: #D95A4F;
    --wash: color-mix(in oklab, #C9463C 12%, transparent);
    --signal: #E5B966;
    --signal-2: #EEC880;
    --signal-wash: color-mix(in oklab, #E5B966 15%, transparent);
    --rule: #1E2028;
    --line: #262933;
    --hair: rgba(241,237,227,0.10);
  }
  * { box-sizing: border-box; }
  html { color-scheme: light dark; scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    margin: 0;
    overflow-x: hidden;
    cursor: none;
  }
  @media (pointer: coarse) {
    body { cursor: auto; }
    .cursor, .cursor-ring { display: none !important; }
  }
  ::selection { background: var(--signal); color: #14100A; }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-width: 100%; }
  button { font-family: inherit; }

  /* ============ CUSTOM CURSOR ============ */
  .cursor, .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9998;
    transform: translate3d(-50%, -50%, 0);
    mix-blend-mode: difference;
  }
  .cursor {
    width: 6px; height: 6px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: transform 0.08s linear, width 0.2s var(--easing), height 0.2s var(--easing), opacity 0.2s;
    z-index: 9999;
  }
  .cursor-ring {
    width: 32px; height: 32px;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    transition: transform 0.35s var(--easing), width 0.25s var(--easing), height 0.25s var(--easing), opacity 0.25s, border-color 0.25s;
    opacity: 0.35;
  }
  body.hover-active .cursor { width: 0; height: 0; opacity: 0; }
  body.hover-active .cursor-ring { width: 56px; height: 56px; opacity: 0.6; border-color: var(--signal); mix-blend-mode: normal; background: var(--signal-wash); }

  /* ============ GRAIN OVERLAY ============ */
  .grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9990;
    opacity: 0.28;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0 0.4 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .grain { opacity: 0.14; }
  }
  :root[data-theme="dark"] .grain { opacity: 0.14; }

  /* ============ LOADER ============ */
  .loader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.7s var(--easing), visibility 0s 0.8s;
  }
  .loader.done {
    opacity: 0;
    visibility: hidden;
  }
  .loader .mark {
    width: 92px; height: 92px;
    position: relative;
    animation: markIn 0.9s var(--easing) both;
  }
  .loader .mark svg { width: 100%; height: 100%; }
  .loader .name {
    position: absolute;
    top: calc(50% + 68px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    opacity: 0;
    animation: fadeIn 0.6s 0.4s var(--easing) forwards;
  }
  @keyframes markIn {
    0%   { opacity: 0; transform: scale(0.9); }
    60%  { opacity: 1; transform: scale(1); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes fadeIn { to { opacity: 1; } }

  /* ============ STATUS BAR ============ */
  .status {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-100%);
    animation: slideDown 0.7s 1.1s var(--easing) forwards;
  }
  @keyframes slideDown { to { transform: translateY(0); } }
  .status-inner {
    max-width: 1520px;
    margin: 0 auto;
    padding: 12px 40px;
    display: flex;
    align-items: center;
    gap: 28px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .status .mark-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-weight: 500;
  }
  .status .mark-slot svg { width: 24px; height: 24px; }
  .status .mark-slot .name { font-family: var(--serif); font-style: italic; font-size: 16px; letter-spacing: -0.01em; text-transform: none; color: var(--ink); font-variation-settings: "opsz" 24; font-weight: 500; }
  .status .live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 500;
  }
  .live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 0 var(--signal);
    animation: pulse 2.4s ease-out infinite;
  }
  @keyframes pulse {
    0%, 60%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--signal) 55%, transparent); }
    30% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--signal) 0%, transparent); }
  }
  .status .sep { color: var(--rule); }
  .status nav {
    margin-left: auto;
    display: flex;
    gap: 24px;
    align-items: center;
  }
  .status nav a {
    color: var(--muted);
    transition: color 0.2s;
    position: relative;
  }
  .status nav a:hover, .status nav a:focus-visible { color: var(--ink); outline: none; }
  .status nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: -6px;
    height: 1px;
    background: var(--mark);
    transition: right 0.35s var(--easing);
  }
  .status nav a:hover::after { right: 0; }
  .status .theme-btn {
    background: none;
    border: 1px solid var(--rule);
    color: var(--muted);
    font: inherit;
    padding: 4px 10px;
    border-radius: 2px;
    cursor: none;
    transition: border-color 0.2s, color 0.2s;
  }
  .status .theme-btn:hover { color: var(--ink); border-color: var(--mark); }
  @media (max-width: 900px) {
    .status-inner { padding: 12px 20px; gap: 14px; font-size: 10px; letter-spacing: 0.06em; }
    .status .sep, .status .mid, .status .live { display: none; }
    .status nav { gap: 16px; }
  }
  @media (max-width: 640px) {
    .status nav a:not(.theme-btn) { display: none; }
  }

  /* ============ LAYOUT ============ */
  main { padding-top: 52px; }
  .container { max-width: 1520px; margin: 0 auto; padding: 0 40px; }
  @media (max-width: 900px) { .container { padding: 0 20px; } }

  /* ============ REVEAL ============ */
  /* Elements start VISIBLE. JS adds .pending only for elements below the fold, then removes on intersect. */
  .reveal { opacity: 1; transform: none; }
  html.js-ready .reveal.pending { opacity: 0; transform: translateY(24px); }
  html.js-ready .reveal.enter { opacity: 1; transform: translateY(0); transition: opacity 0.9s var(--easing), transform 0.9s var(--easing); }
  @media (prefers-reduced-motion: reduce) {
    html.js-ready .reveal.pending { opacity: 1; transform: none; }
    .cursor, .cursor-ring, .grain { display: none !important; }
    body { cursor: auto; }
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .loader { display: none; }
  }

  /* ============ HERO ============ */
  .hero {
    padding: 96px 0 40px;
    position: relative;
  }
  .hero .eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 48px;
  }
  .hero .eyebrow::before {
    content: "";
    width: 32px; height: 1px;
    background: var(--mark);
  }
  .hero h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(56px, 12vw, 200px);
    line-height: 0.92;
    letter-spacing: -0.035em;
    margin: 0;
    text-wrap: balance;
    font-variation-settings: "opsz" 144;
    color: var(--ink);
  }
  .hero h1 em {
    font-style: italic;
    color: var(--mark);
    font-weight: 400;
    display: inline-block;
    position: relative;
  }
  .hero h1 em::after {
    content: "";
    position: absolute;
    right: -0.2em;
    bottom: 0.28em;
    width: 0.12em;
    height: 0.12em;
    background: var(--signal);
    border-radius: 50%;
  }
  .hero .lede {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.35;
    color: var(--ink-2);
    max-width: 26ch;
    margin: 56px 0 0;
    text-wrap: pretty;
    font-variation-settings: "opsz" 30;
    font-style: italic;
    margin-left: auto;
  }
  @media (max-width: 900px) {
    .hero .lede { margin: 40px 0 0; max-width: none; }
  }

  /* ============ MARQUEE ============ */
  .marquee {
    padding: 40px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
    margin-top: 80px;
    background: var(--bg-2);
    position: relative;
  }
  .marquee-track {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: scrollLeft 42s linear infinite;
    align-items: center;
  }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .marquee-item {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(28px, 4.2vw, 62px);
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variation-settings: "opsz" 60;
  }
  .marquee-item.accent { color: var(--mark); }
  .marquee-item .dot {
    display: inline-block;
    width: 0.24em; height: 0.24em;
    background: var(--signal);
    border-radius: 50%;
    vertical-align: 0.28em;
    margin: 0 0.3em;
  }
  @keyframes scrollLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ============ META STRIP ============ */
  .meta {
    padding: 56px 0 96px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    border-bottom: 1px solid var(--rule);
  }
  .meta-item {
    padding-top: 16px;
    border-top: 1px solid var(--hair);
  }
  .meta-item dt {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 10px;
  }
  .meta-item dd {
    margin: 0;
    font-family: var(--serif);
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 24;
    font-weight: 500;
  }
  .meta-item.numeric dd { font-family: var(--mono); font-weight: 400; letter-spacing: 0.02em; font-size: 20px; }
  .meta-item .counter { font-variant-numeric: tabular-nums; }
  @media (max-width: 900px) { .meta { grid-template-columns: repeat(2, 1fr); gap: 28px; padding: 40px 0 64px; } }

  /* ============ SECTION SCAFFOLD ============ */
  section.block {
    padding: 128px 0;
    border-bottom: 1px solid var(--rule);
    position: relative;
  }
  .section-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
    margin-bottom: 96px;
  }
  .section-head h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(40px, 6.5vw, 100px);
    line-height: 0.94;
    letter-spacing: -0.025em;
    margin: 0;
    max-width: 15ch;
    text-wrap: balance;
    font-variation-settings: "opsz" 120;
  }
  .section-head h2 em {
    font-style: italic;
    color: var(--mark);
    font-weight: 400;
  }
  .section-head .side {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: right;
    padding-bottom: 8px;
  }
  .section-head .side b { color: var(--mark); font-weight: 500; }
  @media (max-width: 640px) {
    section.block { padding: 80px 0; }
    .section-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 56px; }
    .section-head .side { text-align: left; padding-bottom: 0; }
  }

  /* ============ OFFERS ============ */
  .offers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
  }
  .offer {
    padding: 48px 40px 44px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
    transition: background 0.35s var(--easing);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }
  .offer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--wash), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s var(--easing);
    pointer-events: none;
  }
  .offer:hover::before { opacity: 1; }
  .offer .num {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--mark);
    letter-spacing: 0.16em;
    margin: 0 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .offer .num .kind { color: var(--muted); }
  .offer h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    font-variation-settings: "opsz" 60;
    max-width: 12ch;
  }
  .offer h3 em { font-style: italic; color: var(--mark); }
  .offer .body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 28px;
    flex: 1;
  }
  .offer .meta-line {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 24px;
    padding-top: 20px;
    border-top: 1px dashed var(--hair);
  }
  .offer .cta {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--mark);
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14.5px;
    transition: gap 0.3s var(--easing);
    position: relative;
    padding-bottom: 4px;
  }
  .offer .cta::before {
    content: "";
    position: absolute;
    left: 0; right: 30%;
    bottom: 0;
    height: 1px;
    background: var(--mark);
    transform-origin: left;
    transition: right 0.35s var(--easing);
  }
  .offer:hover .cta { gap: 16px; }
  .offer:hover .cta::before { right: 0; }
  .offer .cta::after { content: "↗"; font-family: var(--mono); font-size: 13px; }
  @media (max-width: 900px) {
    .offers { grid-template-columns: 1fr; border-left: none; }
    .offer { border-right: none; padding: 36px 24px 32px; }
  }

  /* ============ THE WORK — specimens ============ */
  .work { display: flex; flex-direction: column; }
  .specimen {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 48px;
    padding: 72px 0;
    border-top: 1px solid var(--rule);
    position: relative;
    align-items: start;
    transition: background 0.4s var(--easing);
  }
  .specimen:last-child { border-bottom: 1px solid var(--rule); }
  .specimen:hover { background: var(--bg-2); }
  .specimen::before {
    content: "";
    position: absolute;
    left: -40px; top: 0;
    width: 3px; height: 100%;
    background: var(--mark);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s var(--easing);
  }
  .specimen:hover::before { transform: scaleY(1); }
  .specimen .num-block {
    padding-top: 8px;
    position: sticky;
    top: 100px;
  }
  .specimen .num-block .roman {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(72px, 8vw, 128px);
    line-height: 0.85;
    color: var(--mark);
    letter-spacing: -0.03em;
    font-variation-settings: "opsz" 144;
    font-weight: 300;
    display: block;
  }
  .specimen .num-block .kind {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 20px;
    display: block;
  }
  .specimen .body-block {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 56px;
    align-items: start;
  }
  .specimen .body-block h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(32px, 4vw, 56px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    margin: 0 0 28px;
    font-variation-settings: "opsz" 96;
  }
  .specimen .body-block h3 em { font-style: italic; color: var(--mark); }
  .specimen .body-block p.lede {
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 32px;
    max-width: 52ch;
  }
  .specimen .stats {
    display: grid;
    gap: 0;
    padding-top: 12px;
  }
  .specimen .stats .row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 20px;
    align-items: baseline;
    padding: 14px 0;
    border-top: 1px solid var(--hair);
    font-size: 14px;
  }
  .specimen .stats .row:last-child { border-bottom: 1px solid var(--hair); }
  .specimen .stats .k {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 3px;
  }
  .specimen .stats .v {
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 500;
  }
  .specimen .stats .v .pill {
    display: inline-block;
    padding: 2px 8px;
    background: var(--signal-wash);
    color: var(--signal);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    border-radius: 2px;
    font-weight: 500;
    margin-right: 8px;
    vertical-align: 1px;
  }
  .specimen .link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--mark);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: gap 0.3s var(--easing);
    border-bottom: 1px solid var(--mark);
    padding-bottom: 3px;
    align-self: start;
  }
  .specimen .link:hover { gap: 12px; }
  .specimen .link.internal { color: var(--muted); border-color: var(--muted); }
  .specimen .link:not(.internal)::after { content: "↗"; }
  .specimen .link.internal::after { content: "· Internal only"; margin-left: 4px; font-size: 10px; }
  @media (max-width: 1100px) {
    .specimen .body-block { grid-template-columns: 1fr; gap: 32px; }
  }
  @media (max-width: 900px) {
    .specimen { grid-template-columns: 1fr; gap: 20px; padding: 48px 0; }
    .specimen .num-block { position: static; padding-top: 0; }
    .specimen .num-block .roman { font-size: 56px; }
    .specimen .num-block .kind { margin-top: 12px; }
    .specimen::before { left: -20px; }
  }

  /* ============ LEDGER ============ */
  .ledger {
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 12px 0;
    max-width: 1080px;
    overflow: hidden;
  }
  .ledger-head {
    display: grid;
    grid-template-columns: 110px 1fr 100px;
    gap: 32px;
    padding: 12px 40px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--hair);
  }
  .ledger-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 32px;
    padding: 20px 40px;
    border-bottom: 1px solid var(--hair);
    align-items: baseline;
    font-family: var(--mono);
    font-size: 13px;
    transition: background 0.25s var(--easing);
  }
  .ledger-row:last-child { border-bottom: none; }
  .ledger-row:hover { background: var(--wash); }
  .ledger-row .date {
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 11.5px;
  }
  .ledger-row .what {
    font-family: var(--sans);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.4;
  }
  .ledger-row .what strong {
    color: var(--mark);
    font-weight: 500;
  }
  .ledger-row .tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--bg);
  }
  .ledger-foot {
    padding: 20px 40px 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  @media (max-width: 700px) {
    .ledger-head, .ledger-row, .ledger-foot { padding-left: 24px; padding-right: 24px; }
    .ledger-head { grid-template-columns: 80px 1fr; }
    .ledger-head .col-tag { display: none; }
    .ledger-row { grid-template-columns: 80px 1fr; gap: 16px; padding: 16px 24px; }
    .ledger-row .tag { grid-column: 2; margin-top: 8px; justify-self: start; }
  }

  /* ============ ABOUT ============ */
  .about {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 96px;
    align-items: start;
    max-width: 1300px;
  }
  .about .portrait-card {
    aspect-ratio: 1;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .about .portrait-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--mark) 30%, transparent) 0%, transparent 55%),
      radial-gradient(circle at 75% 80%, color-mix(in oklab, var(--signal) 20%, transparent) 0%, transparent 50%);
    pointer-events: none;
  }
  .about .portrait-card .top {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    position: relative;
    z-index: 1;
  }
  .about .portrait-card .top .badge {
    color: var(--mark);
    border: 1px solid var(--mark);
    padding: 3px 8px;
    border-radius: 2px;
  }
  .about .portrait-card .mark-big {
    align-self: flex-end;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .about .portrait-card .mark-big .glyph {
    font-family: var(--serif);
    font-style: italic;
    font-size: 172px;
    line-height: 0.85;
    color: var(--mark);
    letter-spacing: -0.04em;
    font-variation-settings: "opsz" 144;
    font-weight: 400;
  }
  .about .portrait-card .mark-big .dot {
    width: 14px; height: 14px;
    background: var(--signal);
    border-radius: 50%;
    margin-bottom: 16px;
  }
  .about .portrait-card .foot {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
  }
  .about .prose {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.45;
    color: var(--ink);
    max-width: 32ch;
    font-variation-settings: "opsz" 30;
  }
  .about .prose p { margin: 0 0 26px; text-wrap: pretty; }
  .about .prose p:last-child { margin-bottom: 0; }
  .about .prose em {
    font-style: italic;
    color: var(--mark);
    background: linear-gradient(180deg, transparent 82%, var(--signal-wash) 82%);
    padding: 0 2px;
  }
  @media (max-width: 900px) {
    .about { grid-template-columns: 1fr; gap: 48px; }
    .about .portrait-card { max-width: 320px; }
  }

  /* ============ TOGETHER — CTA CARDS ============ */
  .together {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .cta-card {
    padding: 40px 32px 36px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s var(--easing), border-color 0.35s var(--easing), background 0.35s var(--easing);
    position: relative;
    overflow: hidden;
  }
  .cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--wash) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.4s var(--easing);
    pointer-events: none;
  }
  .cta-card:hover {
    transform: translateY(-4px);
    border-color: var(--mark);
  }
  .cta-card:hover::before { opacity: 1; }
  .cta-card .kind {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mark);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cta-card .kind::before {
    content: "";
    width: 20px; height: 1px;
    background: var(--mark);
  }
  .cta-card h4 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
    font-variation-settings: "opsz" 60;
    color: var(--ink);
    max-width: 14ch;
  }
  .cta-card p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0 0 32px;
    flex: 1;
  }
  .cta-card .go {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--mark);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s var(--easing);
  }
  .cta-card .go::after { content: "→"; }
  .cta-card:hover .go { gap: 14px; }
  @media (max-width: 900px) { .together { grid-template-columns: 1fr; } }

  /* ============ GIANT FOOTER MONOGRAM ============ */
  .colossus {
    padding: 120px 0 40px;
    overflow: hidden;
    position: relative;
  }
  .colossus .huge {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(80px, 22vw, 340px);
    line-height: 0.82;
    letter-spacing: -0.045em;
    color: var(--mark);
    margin: 0;
    text-align: center;
    font-variation-settings: "opsz" 144;
    white-space: nowrap;
  }
  .colossus .huge em { font-style: normal; color: var(--ink); }
  .colossus .huge .dot {
    display: inline-block;
    width: 0.12em; height: 0.12em;
    background: var(--signal);
    border-radius: 50%;
    vertical-align: 0.28em;
    margin: 0 -0.05em 0 -0.15em;
  }
  .colossus .under {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin: 24px 0 0;
  }

  /* ============ FOOTER META ============ */
  footer.foot {
    border-top: 1px solid var(--rule);
    padding: 40px 0 48px;
  }
  .foot-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: end;
  }
  .foot-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .foot-mark svg { width: 26px; height: 26px; }
  .foot-mark .name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    color: var(--mark);
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 24;
    font-weight: 500;
  }
  .foot-line {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.6;
  }
  .foot-line span { color: var(--ink-2); }
  .foot-nav {
    display: flex;
    gap: 24px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    flex-wrap: wrap;
  }
  .foot-nav a { color: var(--muted); transition: color 0.2s; }
  .foot-nav a:hover, .foot-nav a:focus-visible { color: var(--mark); outline: none; }
  @media (max-width: 640px) {
    .foot-inner { grid-template-columns: 1fr; gap: 20px; }
  }

  /* ============ A11Y ============ */
  :focus-visible {
    outline: 2px solid var(--mark);
    outline-offset: 3px;
    border-radius: 2px;
  }
  a, button {
    cursor: none;
  }
  @media (pointer: coarse) {
    a, button { cursor: pointer; }
  }

/* ============================================================
 * v1.1 — MOTION STACK
 * ============================================================ */

/* --- BODY LOADED STATE --- */
body:not(.loaded) { overflow: hidden; }
body.loaded { overflow-x: hidden; }

/* --- CANVAS ATMOSPHERE (behind everything) --- */
.bg-canvas {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.9;
}
main { position: relative; z-index: 1; }
.status { z-index: 100; }
.grain, .cursor, .cursor-ring, .loader { z-index: auto; }
.grain { z-index: 90; }
.cursor { z-index: 9999; }
.cursor-ring { z-index: 9998; }
.loader { z-index: 10000; }

/* --- LOADER PROGRESS --- */
.loader .mark { animation-duration: 1.4s; }
.loader .progress-strip {
	position: absolute;
	bottom: 15%;
	left: 50%;
	transform: translateX(-50%);
	width: min(320px, 60vw);
	opacity: 0;
	animation: progressFadeIn 0.5s 0.3s var(--easing) forwards;
}
@keyframes progressFadeIn { to { opacity: 1; } }
.loader .progress-meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}
.loader .progress-val { color: var(--mark); font-weight: 500; }
.loader .progress-bar {
	position: relative;
	height: 1px;
	background: var(--rule);
	overflow: hidden;
}
.loader .progress-fill {
	position: absolute;
	inset: 0;
	background: var(--mark);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s ease-out;
}

/* --- SPLIT TEXT REVEALS --- */
.split-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: baseline;
	padding: 0.14em 0 0.05em;
	margin: -0.14em -0.02em -0.05em;
	line-height: inherit;
}
.split-inner {
	display: inline-block;
	transform: translateY(105%);
	opacity: 0;
	transition:
		transform 1.05s var(--easing),
		opacity 0.7s var(--easing);
	transition-delay: calc(var(--i, 0) * 48ms);
	will-change: transform, opacity;
}
[data-split].enter .split-inner {
	transform: translateY(0);
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.split-inner { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* --- REVEAL (block-level, non-split) --- */
[data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s var(--easing), transform 0.9s var(--easing);
	transition-delay: var(--delay, 0s);
	will-change: transform, opacity;
}
[data-reveal].enter {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --- MAGNETIC ELEMENTS --- */
[data-magnetic] {
	transition: transform 0.4s var(--easing);
	will-change: transform;
	display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
	[data-magnetic] { transform: none !important; transition: none !important; }
}

/* --- 3D CARD TILT --- */
[data-tilt] {
	transform: perspective(1400px)
	           rotateX(var(--rx, 0deg))
	           rotateY(var(--ry, 0deg))
	           translate3d(var(--tx, 0), var(--ty, 0), 0);
	transition: transform 0.55s var(--easing);
	transform-style: preserve-3d;
	will-change: transform;
}
[data-tilt] > * {
	transform: translateZ(20px);
	transform-style: preserve-3d;
}
[data-tilt].cta-card > *,
[data-tilt].offer > * {
	transform: translateZ(0);
}
@media (prefers-reduced-motion: reduce) {
	[data-tilt] { transform: none !important; transition: none !important; }
	[data-tilt] > * { transform: none !important; }
}

/* --- HORIZONTAL WORK SCROLL --- */
.hs-wrap {
	position: relative;
	background: var(--bg);
	overflow: visible;
	padding: 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.hs-viewport {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 640px;
	overflow: hidden;
	display: flex;
	align-items: center;
	background: var(--bg);
}
.hs-track {
	display: flex;
	gap: 40px;
	padding: 0 40px;
	will-change: transform;
	align-items: center;
	height: 100%;
}
.hs-panel {
	flex: 0 0 auto;
	width: 780px;
	max-width: calc(100vw - 80px);
	height: calc(100vh - 100px);
	max-height: 720px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 8px;
	padding: 56px 56px 48px;
	position: relative;
	overflow: hidden;
}
.hs-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(140deg, var(--wash) 0%, transparent 55%);
	opacity: 0.7;
	pointer-events: none;
}
.hs-panel > * { position: relative; z-index: 1; }
.hs-intro {
	background: transparent;
	border: none;
	padding: 0 40px;
	width: 640px;
}
.hs-intro::before { display: none; }
.hs-intro .eyebrow-lg {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 32px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.hs-intro .eyebrow-lg::before {
	content: "";
	width: 40px;
	height: 1px;
	background: var(--mark);
}
.hs-intro h2 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(56px, 8vw, 128px);
	line-height: 0.94;
	letter-spacing: -0.03em;
	margin: 0 0 24px;
	font-variation-settings: "opsz" 144;
	color: var(--ink);
}
.hs-intro h2 em { font-style: italic; color: var(--mark); }
.hs-intro .hint {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mark);
	margin: 40px 0 0;
	display: flex;
	align-items: center;
	gap: 12px;
}
.hs-intro .hint .arrow-h {
	display: inline-block;
	animation: hintNudge 1.8s ease-in-out infinite;
}
@keyframes hintNudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(6px); }
}

.hs-panel .num-block {
	position: absolute;
	top: 40px;
	right: 48px;
	text-align: right;
	z-index: 2;
}
.hs-panel .num-block .roman {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(80px, 8vw, 128px);
	line-height: 0.85;
	color: var(--mark);
	letter-spacing: -0.03em;
	font-variation-settings: "opsz" 144;
	font-weight: 300;
	display: block;
}
.hs-panel .num-block .kind {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 12px;
	display: block;
}
.hs-panel .body-block {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 48px;
	align-items: start;
	margin-top: auto;
	padding-top: 120px;
}
.hs-panel .body-block h3 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1;
	letter-spacing: -0.025em;
	margin: 0 0 24px;
	font-variation-settings: "opsz" 84;
	max-width: 12ch;
}
.hs-panel .body-block h3 em { font-style: italic; color: var(--mark); }
.hs-panel .body-block .lede {
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0 0 24px;
	max-width: 48ch;
}
.hs-panel .link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mark);
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--mark);
	padding-bottom: 3px;
	align-self: start;
	transition: gap 0.3s var(--easing);
}
.hs-panel .link:hover { gap: 14px; }
.hs-panel .link.internal { color: var(--muted); border-color: var(--muted); }
.hs-panel .link:not(.internal)::after { content: "↗"; }
.hs-panel .link.internal::after { content: "· Internal only"; margin-left: 4px; font-size: 10px; }
.hs-panel .stats {
	display: grid;
	gap: 0;
}
.hs-panel .stats .row {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 16px;
	align-items: baseline;
	padding: 12px 0;
	border-top: 1px solid var(--hair);
	font-size: 13.5px;
}
.hs-panel .stats .row:last-child { border-bottom: 1px solid var(--hair); }
.hs-panel .stats .k {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.hs-panel .stats .v {
	color: var(--ink);
	font-family: var(--sans);
	font-size: 13.5px;
	font-weight: 500;
}
.hs-panel .stats .v .pill {
	display: inline-block;
	padding: 2px 8px;
	background: var(--signal-wash);
	color: var(--signal);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	border-radius: 2px;
	font-weight: 500;
	margin-right: 6px;
}
.hs-outro {
	background: transparent;
	border: none;
	padding: 0 40px;
	width: 460px;
	text-align: center;
}
.hs-outro::before { display: none; }
.hs-outro .outro-mark {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(120px, 14vw, 220px);
	line-height: 0.9;
	color: var(--mark);
	letter-spacing: -0.04em;
	font-variation-settings: "opsz" 144;
	margin: 0;
	position: relative;
	display: inline-block;
}
.hs-outro .outro-mark::after {
	content: "";
	position: absolute;
	right: -0.15em;
	bottom: 0.2em;
	width: 0.13em;
	height: 0.13em;
	background: var(--signal);
	border-radius: 50%;
}
.hs-outro .outro-caption {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 24px 0 0;
}

@media (max-width: 900px) {
	.hs-wrap { height: auto !important; padding: 80px 0; }
	.hs-viewport { position: static; height: auto; min-height: 0; display: block; background: transparent; }
	.hs-track { flex-direction: column; gap: 20px; padding: 0 22px; transform: none !important; height: auto; }
	.hs-panel { width: 100%; max-width: none; height: auto; max-height: none; padding: 36px 28px 32px; }
	.hs-intro, .hs-outro { padding: 20px 0; width: 100%; }
	.hs-panel .num-block { position: static; text-align: left; margin-bottom: 20px; }
	.hs-panel .num-block .roman { font-size: 56px; }
	.hs-panel .body-block { grid-template-columns: 1fr; gap: 28px; padding-top: 0; }
	.hs-panel .body-block h3 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
	.hs-wrap { height: auto !important; padding: 80px 0; }
	.hs-viewport { position: static; height: auto; display: block; }
	.hs-track { flex-direction: column; gap: 24px; padding: 0 22px; transform: none !important; height: auto; }
	.hs-panel { width: 100%; max-width: none; height: auto; max-height: none; }
	.hs-panel .num-block { position: static; text-align: left; }
	.hs-panel .body-block { padding-top: 20px; }
}

/* --- COLOSSUS PARALLAX --- */
.colossus .huge {
	transition: transform 0.5s var(--easing);
	will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
	.colossus .huge { transform: none !important; transition: none !important; }
}

/* --- MICRO REFINEMENTS --- */
/* Kill horizontal work section's default vertical block styles */
.work-was-horizontal + .container.block { margin-top: 0; }

/* ============================================================
 * v2.0 — CREATIVE DIRECTOR EDITION
 * Adds: manifesto, practice matrix, currents, colophon.
 * Refines hero + section-head typography with the display face.
 * ============================================================ */

/* --- HERO — even bigger, editorial-thesis scale --- */
.hero { padding: 128px 0 48px; }
.hero .eyebrow {
	margin-bottom: 56px;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.22em;
}
.hero h1 {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(56px, 12vw, 200px);
	line-height: 0.9;
	letter-spacing: -0.028em;
	color: var(--ink);
	max-width: 16ch;
}
.hero h1 em {
	font-style: italic;
	color: var(--mark);
	font-family: var(--display);
	font-weight: 400;
}
.hero h1 em::after {
	background: var(--signal);
}
.hero .lede {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(20px, 2.2vw, 30px);
	line-height: 1.4;
	color: var(--ink-2);
	max-width: 34ch;
	margin: 64px 0 0;
	margin-left: auto;
	font-variation-settings: "opsz" 32;
	text-wrap: pretty;
}
@media (max-width: 900px) {
	.hero { padding: 80px 0 32px; }
	.hero .lede { margin-left: 0; }
}

/* --- SECTION HEADS — sculptural display type --- */
.section-head h2 {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(48px, 8vw, 128px);
	line-height: 0.92;
	letter-spacing: -0.03em;
	color: var(--ink);
	max-width: 14ch;
	text-wrap: balance;
}
.section-head h2 em {
	font-family: var(--display);
	font-style: italic;
	color: var(--mark);
	font-weight: 400;
}

/* Section head lede (v2 addition) */
.section-lede {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.45;
	color: var(--ink-2);
	max-width: 42ch;
	margin: 8px 0 64px;
	font-variation-settings: "opsz" 24;
}

/* --- MANIFESTO — nine numbered principles --- */
.manifesto-wrap {
	max-width: 1520px;
	margin: 0 auto;
	padding: 0 40px;
}
.manifesto-block {
	padding: 128px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	background:
		radial-gradient(1200px 600px at 15% 20%, var(--wash), transparent 55%),
		var(--bg);
}
.manifesto-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid var(--hair);
	border-left: 1px solid var(--hair);
}
.manifesto-item {
	padding: 44px 40px 40px;
	border-right: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
	background: transparent;
	position: relative;
	transition: background 0.5s var(--easing);
}
.manifesto-item:hover { background: color-mix(in oklab, var(--mark) 4%, transparent); }
.manifesto-item .roman {
	font-family: var(--display);
	font-style: italic;
	font-size: 32px;
	line-height: 1;
	color: var(--mark);
	letter-spacing: -0.03em;
	margin: 0 0 16px;
	display: block;
	font-weight: 400;
}
.manifesto-item h3 {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: var(--ink);
	max-width: 18ch;
	text-wrap: balance;
}
.manifesto-item p {
	font-family: var(--sans);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0;
	max-width: 32ch;
}
@media (max-width: 1000px) {
	.manifesto-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.manifesto-grid { grid-template-columns: 1fr; border-left: none; }
	.manifesto-item { border-right: none; padding: 32px 22px 28px; }
	.manifesto-block { padding: 80px 0; }
}

/* --- THE PRACTICE — nine disciplines matrix --- */
.practice-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 48px;
	margin-top: 24px;
}
.practice-item {
	position: relative;
	padding-top: 24px;
	border-top: 1px solid var(--ink);
}
.practice-item .k {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.practice-item .k .num {
	color: var(--mark);
	font-weight: 500;
	font-family: var(--display);
	font-style: italic;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
}
.practice-item .name {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0 0 14px;
	color: var(--ink);
	max-width: 12ch;
	text-wrap: balance;
}
.practice-item .body {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0;
	max-width: 34ch;
}
@media (max-width: 900px) {
	.practice-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 32px; }
}
@media (max-width: 560px) {
	.practice-grid { grid-template-columns: 1fr; }
}

/* --- CURRENTS — four-column reading list --- */
.currents-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	border-top: 1px solid var(--ink);
	padding-top: 32px;
}
.currents-col .label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mark);
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hair);
}
.currents-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.currents-col li {
	font-family: var(--serif);
	font-size: 16.5px;
	line-height: 1.35;
	color: var(--ink);
	padding: 12px 0;
	border-bottom: 1px dashed var(--hair);
	text-wrap: pretty;
	font-variation-settings: "opsz" 20;
}
.currents-col li:last-child { border-bottom: none; }
@media (max-width: 900px) {
	.currents-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 560px) {
	.currents-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* --- Selected Work: enrich lede with editorial prose --- */
.hs-panel .body-block .lede {
	font-family: var(--serif);
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--ink-2);
	font-variation-settings: "opsz" 20;
	max-width: 48ch;
}
.hs-panel .body-block .lede + .lede,
.hs-panel .body-block p + p {
	margin-top: 14px;
}
/* Support paragraphs in lede via preserved newlines */
.hs-panel .body-block .lede { white-space: pre-line; }

/* --- Update specimen title to use display face --- */
.hs-panel .body-block h3,
.hs-intro h2,
.hs-outro .outro-mark {
	font-family: var(--display);
}
.hs-panel .num-block .roman,
.hs-outro .outro-mark {
	font-family: var(--display);
}

/* --- OFFERS: rebrand as PRACTICE cards on cream --- */
.offer { background: var(--card); }
.offer:hover { background: color-mix(in oklab, var(--card) 90%, var(--wash)); }
.offer h3 { font-family: var(--display); }
.offer h3 em { font-family: var(--display); }

/* --- STUDIO (about) — richer prose --- */
.about .portrait-card {
	background: var(--card);
}
.about .portrait-card .mark-big .glyph {
	font-family: var(--display);
	font-size: 200px;
}
.about .prose {
	font-family: var(--serif);
	font-size: clamp(20px, 1.9vw, 26px);
	line-height: 1.5;
	color: var(--ink);
	font-variation-settings: "opsz" 24;
	max-width: 34ch;
}
.about .prose em {
	font-style: italic;
	color: var(--mark);
	background: linear-gradient(180deg, transparent 82%, var(--signal-wash) 82%);
	padding: 0 3px;
}

/* --- ENQUIRE cards — more understated --- */
.cta-card { background: var(--card); }
.cta-card h4 { font-family: var(--display); }

/* --- COLOSSUS refresh — use display face for even more editorial feel --- */
.colossus .huge {
	font-family: var(--display);
	font-weight: 400;
	color: var(--mark);
	font-size: clamp(80px, 22vw, 340px);
}
.colossus .huge em { color: var(--ink); font-family: var(--display); }
.colossus .huge .dot { background: var(--signal); }

/* --- COLOPHON in the footer --- */
.colophon {
	padding: 32px 0 48px;
	border-top: 1px solid var(--rule);
	max-width: 1520px;
	margin: 0 auto;
	padding-left: 40px;
	padding-right: 40px;
}
.colophon .col-head {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mark);
	margin: 0 0 20px;
}
.colophon dl {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 40px;
	margin: 0;
}
.colophon .row {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 20px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--hair);
	font-size: 13.5px;
}
.colophon .k {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	padding-top: 3px;
}
.colophon .v {
	color: var(--ink);
	font-family: var(--sans);
}
@media (max-width: 700px) {
	.colophon dl { grid-template-columns: 1fr; }
	.colophon { padding-left: 22px; padding-right: 22px; }
}

/* --- STATUS BAR + FOOTER — use display face for the wordmark --- */
.status .mark-slot .name,
.foot-mark .name {
	font-family: var(--display);
	font-weight: 400;
}
.foot-mark .name { color: var(--mark); }

/* --- Marquee — use display face for statement --- */
.marquee-item {
	font-family: var(--display);
	font-weight: 400;
}
.marquee-item .dot { background: var(--signal); }
.marquee-item.accent { color: var(--mark); }

/* --- Meta grid — dd uses display face for authority --- */
.meta-item dd {
	font-family: var(--display);
	font-weight: 400;
	font-size: 24px;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.meta-item.numeric dd {
	font-family: var(--mono);
	letter-spacing: 0.02em;
	font-size: 20px;
	font-weight: 400;
}

/* --- Portrait card mark-big uses display --- */
.about .portrait-card .mark-big .glyph {
	font-family: var(--display);
	font-style: italic;
	color: var(--mark);
	font-size: 200px;
	font-weight: 400;
}

/* --- Loader mark uses display --- */
.loader .mark svg text { font-family: "Instrument Serif", "Fraunces", Georgia, serif !important; }

/* ============================================================
 * v3.0 — MULTI-PAGE: home, resume, work, books, enquire
 * ============================================================ */

/* Shortened hero for interior pages */
.hero-short { padding: 128px 0 48px; }
.hero-short h1 { font-size: clamp(56px, 9vw, 148px); max-width: 20ch; }

/* Active nav item */
.status nav a.is-on { color: var(--mark); font-weight: 500; }
.status nav a.is-on::after { right: 0 !important; background: var(--mark); }

/* ============ HOME: "now" 4-item grid ============ */
.now-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 24px;
}
.now-item {
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 6px;
	padding: 32px 32px 28px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	transition: border-color 0.35s var(--easing);
}
.now-item:hover { border-color: var(--mark); }
.now-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 14px;
}
.now-item .num { color: var(--mark); font-weight: 500; }
.now-item .kind {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mark);
	display: block;
	margin-bottom: 8px;
}
.now-item h3 {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
	color: var(--ink);
}
.now-item p {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0 0 20px;
	flex: 1;
}
.now-item .link {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mark);
	border-bottom: 1px solid var(--mark);
	padding-bottom: 3px;
	align-self: start;
	transition: gap 0.3s var(--easing);
	display: inline-flex;
	gap: 6px;
}
.now-item .link.internal { color: var(--muted); border-color: var(--muted); }
.now-item .link:not(.internal):hover { gap: 10px; }
.now-item .link:not(.internal)::after { content: "↗"; }
@media (max-width: 720px) { .now-grid { grid-template-columns: 1fr; } }

/* ============ HOME: cross-link "explore" grid ============ */
.explore-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 24px;
}
.explore-card {
	padding: 32px 24px 28px;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 6px;
	transition: border-color 0.35s, background 0.35s;
	display: flex;
	flex-direction: column;
}
.explore-card:hover { border-color: var(--mark); background: color-mix(in oklab, var(--card) 90%, var(--wash)); }
.explore-card .k {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mark);
	margin-bottom: 14px;
}
.explore-card h3 {
	font-family: var(--display);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 12px;
	color: var(--ink);
}
.explore-card p {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-2);
	margin: 0 0 20px;
	flex: 1;
}
.explore-card .go {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mark);
}
@media (max-width: 900px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .explore-grid { grid-template-columns: 1fr; } }

/* ============ RESUME PAGE ============ */
.resume-block { padding-top: 32px; }
.resume-layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 80px;
	align-items: start;
}
.resume-side {
	position: sticky;
	top: 96px;
}
.portrait-slot {
	aspect-ratio: 3 / 4;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 32px;
}
.portrait-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-placeholder {
	aspect-ratio: 3 / 4;
	background:
		radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--mark) 30%, transparent) 0%, transparent 55%),
		radial-gradient(circle at 75% 80%, color-mix(in oklab, var(--signal) 20%, transparent) 0%, transparent 50%),
		var(--bg-2);
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.portrait-placeholder .top {
	display: flex;
	justify-content: space-between;
}
.portrait-placeholder .badge {
	color: var(--mark);
	border: 1px solid var(--mark);
	padding: 3px 8px;
	border-radius: 2px;
}
.portrait-placeholder .glyph-big {
	font-family: var(--display);
	font-style: italic;
	font-size: 156px;
	line-height: 0.85;
	color: var(--mark);
	letter-spacing: -0.04em;
	align-self: flex-end;
	margin-left: auto;
	position: relative;
	display: inline-block;
}
.portrait-placeholder .glyph-big .dot {
	position: absolute;
	right: -0.2em;
	bottom: 0.2em;
	width: 0.15em;
	height: 0.15em;
	background: var(--signal);
	border-radius: 50%;
}
.portrait-placeholder .foot {
	display: flex;
	justify-content: space-between;
}
.side-h {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mark);
	margin: 24px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--hair);
}
.side-dl { margin: 0; }
.side-dl .row {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 12px;
	padding: 8px 0;
	font-size: 13px;
	border-bottom: 1px dashed var(--hair);
}
.side-dl dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; margin: 0; }
.side-dl dd { margin: 0; color: var(--ink); font-family: var(--sans); }
.side-p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }

.resume-main { padding-top: 8px; }
.resume-section {
	padding: 40px 0;
	border-bottom: 1px solid var(--rule);
}
.resume-section:first-child { padding-top: 0; }
.resume-section:last-child { border-bottom: none; }
.rsec-h {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0 0 24px;
	color: var(--ink);
	display: flex;
	align-items: baseline;
	gap: 16px;
}
.rsec-num {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--mark);
	font-weight: 500;
}
.rsec-p {
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1.5;
	color: var(--ink);
	max-width: 56ch;
	margin: 0 0 8px;
	font-variation-settings: "opsz" 20;
}
.rsec-hint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); margin-top: 16px; }
.rsec-hint a { color: var(--mark); border-bottom: 1px solid var(--mark); padding-bottom: 2px; }

.cv-list { display: flex; flex-direction: column; }
.cv-entry {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 32px;
	padding: 20px 0;
	border-top: 1px dashed var(--hair);
}
.cv-entry:first-child { border-top: none; padding-top: 8px; }
.cv-when {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	padding-top: 4px;
}
.cv-role {
	font-family: var(--display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin-bottom: 4px;
}
.cv-org {
	font-family: var(--sans);
	font-size: 13.5px;
	color: var(--mark);
	font-weight: 500;
	letter-spacing: 0.02em;
	margin-bottom: 10px;
}
.cv-body {
	font-family: var(--sans);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0;
	max-width: 56ch;
}
.cv-link {
	display: inline-block;
	margin-top: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mark);
	border-bottom: 1px solid var(--mark);
	padding-bottom: 2px;
}
@media (max-width: 720px) {
	.cv-entry { grid-template-columns: 1fr; gap: 8px; }
}

.skills-list { display: flex; flex-direction: column; }
.skill-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 32px;
	padding: 18px 0;
	border-top: 1px solid var(--hair);
	align-items: baseline;
}
.skill-row:first-child { border-top: none; padding-top: 8px; }
.sk-group {
	font-family: var(--display);
	font-weight: 400;
	font-size: 18px;
	color: var(--mark);
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.sk-items {
	font-family: var(--sans);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink-2);
}
@media (max-width: 720px) {
	.skill-row { grid-template-columns: 1fr; gap: 4px; }
}
.work-mini { list-style: none; padding: 0; margin: 12px 0 0; }
.work-mini li { padding: 8px 0; border-top: 1px dashed var(--hair); font-family: var(--sans); font-size: 14px; color: var(--ink-2); }
.work-mini li:first-child { border-top: none; }
.work-mini strong { color: var(--ink); font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: -0.01em; margin-right: 4px; }
@media (max-width: 900px) {
	.resume-layout { grid-template-columns: 1fr; gap: 48px; }
	.resume-side { position: static; }
}

/* ============ WORK PAGE: case studies ============ */
.case-studies { display: flex; flex-direction: column; }
.case {
	padding: 96px 40px;
	border-bottom: 1px solid var(--rule);
}
.case:nth-child(even) { background: color-mix(in oklab, var(--bg-2) 40%, var(--bg)); }
.case-head { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: end; margin-bottom: 48px; }
.case-num {
	font-family: var(--display);
	font-style: italic;
	font-size: clamp(80px, 10vw, 172px);
	line-height: 0.82;
	color: var(--mark);
	letter-spacing: -0.03em;
	font-weight: 400;
}
.case-meta .k {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.case-title {
	grid-column: 2;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(40px, 6vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 8px 0 0;
	color: var(--ink);
}
.case-title em { font-style: italic; color: var(--mark); }
.case-body { display: grid; grid-template-columns: 1fr 1.2fr 280px; gap: 48px; align-items: start; }
.case-photo {
	aspect-ratio: 3 / 4;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 6px;
	overflow: hidden;
	position: sticky;
	top: 96px;
}
.case-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-placeholder {
	aspect-ratio: 3 / 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background:
		radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--mark) 22%, transparent) 0%, transparent 55%),
		var(--bg-2);
}
.photo-placeholder .ph-roman {
	font-family: var(--display);
	font-style: italic;
	font-size: 148px;
	line-height: 1;
	color: var(--mark);
	letter-spacing: -0.04em;
}
.photo-placeholder .ph-note {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.case-prose .prose p {
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink);
	margin: 0 0 16px;
	max-width: 52ch;
	font-variation-settings: "opsz" 20;
}
.case-prose .link {
	display: inline-block;
	margin-top: 12px;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mark);
	border-bottom: 1px solid var(--mark);
	padding-bottom: 3px;
}
.case-prose .link.internal { color: var(--muted); border-color: var(--muted); }
.case-prose .link:not(.internal)::after { content: "↗"; margin-left: 4px; }
.case-stats { padding-top: 8px; }
.case-stats .stat-head {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mark);
	margin-bottom: 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--hair);
}
.case-stats .stats { display: flex; flex-direction: column; }
.case-stats .row {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px dashed var(--hair);
	font-size: 13.5px;
	align-items: baseline;
}
.case-stats .row:first-child { border-top: none; }
.case-stats .k {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.case-stats .v { font-family: var(--sans); font-size: 13.5px; color: var(--ink); font-weight: 500; }
.case-stats .v .pill {
	display: inline-block;
	padding: 2px 8px;
	background: var(--signal-wash);
	color: var(--signal);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	border-radius: 2px;
	margin-right: 6px;
}
@media (max-width: 1100px) {
	.case-body { grid-template-columns: 1fr 1fr; }
	.case-stats { grid-column: 1 / -1; padding-top: 32px; border-top: 1px solid var(--hair); }
}
@media (max-width: 720px) {
	.case { padding: 64px 22px; }
	.case-head { grid-template-columns: 1fr; gap: 8px; }
	.case-title { grid-column: 1; }
	.case-body { grid-template-columns: 1fr; gap: 32px; }
	.case-photo { position: static; }
}

/* ============ ARCHIVE ============ */
.archive-list {
	border-top: 1px solid var(--ink);
}
.archive-row {
	display: grid;
	grid-template-columns: 1.2fr 1.4fr 2fr auto;
	gap: 32px;
	padding: 20px 0;
	border-bottom: 1px solid var(--hair);
	align-items: baseline;
	font-size: 14px;
}
.archive-row .a-title {
	font-family: var(--display);
	font-weight: 400;
	font-size: 22px;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.archive-row .a-kind { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.archive-row .a-note { color: var(--ink-2); }
.archive-row .a-link {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--mark);
	text-transform: uppercase;
}
.archive-row .a-link a { border-bottom: 1px solid var(--mark); padding-bottom: 2px; }
.archive-row .a-link .internal { color: var(--muted); }
@media (max-width: 900px) {
	.archive-row { grid-template-columns: 1fr; gap: 6px; padding: 24px 0; }
}

/* ============ BOOKS PAGE ============ */
.books-list { display: flex; flex-direction: column; }
.book {
	padding: 96px 40px;
	border-bottom: 1px solid var(--rule);
}
.book-head { display: flex; gap: 24px; margin-bottom: 40px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.book-head .book-num { color: var(--mark); font-weight: 500; }
.book-body { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: start; }
.book-cover {
	aspect-ratio: 5 / 8;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 20px 60px -20px rgba(10,11,16,0.35), 0 2px 8px rgba(10,11,16,0.12);
	position: sticky;
	top: 96px;
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, var(--mark) 0%, color-mix(in oklab, var(--mark) 75%, black) 100%);
	color: var(--card);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
}
.cover-placeholder::before {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid color-mix(in oklab, var(--card) 40%, transparent);
	pointer-events: none;
}
.cover-placeholder .cover-top {
	display: flex;
	justify-content: space-between;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: color-mix(in oklab, var(--card) 70%, transparent);
	position: relative;
	z-index: 1;
	line-height: 1.4;
}
.cover-placeholder .cover-title {
	font-family: var(--display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--card);
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 20px 8px;
	border-top: 1px solid color-mix(in oklab, var(--card) 30%, transparent);
	border-bottom: 1px solid color-mix(in oklab, var(--card) 30%, transparent);
}
.cover-placeholder .cover-author {
	font-family: var(--display);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in oklab, var(--card) 85%, transparent);
	position: relative;
	z-index: 1;
	text-align: center;
	line-height: 1.5;
}
.book-detail { padding-top: 8px; }
.book-title {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(40px, 5.5vw, 82px);
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 0 0 16px;
	color: var(--ink);
	text-wrap: balance;
}
.book-sub {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 1.4;
	color: var(--mark);
	margin: 0 0 32px;
	max-width: 44ch;
	font-variation-settings: "opsz" 22;
}
.book-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; margin: 0 0 32px; padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); }
.book-meta .row { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.book-meta dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; margin: 0; padding-top: 2px; }
.book-meta dd { margin: 0; color: var(--ink); font-family: var(--sans); font-weight: 500; }
.book-prose p {
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink);
	margin: 0 0 16px;
	max-width: 56ch;
	font-variation-settings: "opsz" 20;
}
.buy-block { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hair); }
.buy-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mark); margin-bottom: 16px; }
.buy-list { display: flex; flex-wrap: wrap; gap: 10px; }
.buy {
	display: inline-block;
	padding: 10px 16px;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 2px;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	color: var(--ink);
	transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.buy:hover { border-color: var(--mark); color: var(--mark); background: var(--wash); }
@media (max-width: 900px) {
	.book { padding: 64px 22px; }
	.book-body { grid-template-columns: 1fr; gap: 40px; }
	.book-cover { position: static; max-width: 320px; }
	.book-meta { grid-template-columns: 1fr; }
}

/* ============ AUTHOR BLOCK on books page ============ */
.author-block {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 48px;
	align-items: start;
	padding-top: 24px;
}
.author-photo {
	aspect-ratio: 3 / 4;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 6px;
	overflow: hidden;
}
.author-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-text .author-eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mark);
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--hair);
}
.author-text p {
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.55;
	color: var(--ink);
	max-width: 48ch;
	font-variation-settings: "opsz" 22;
	margin: 0;
}
@media (max-width: 720px) {
	.author-block { grid-template-columns: 1fr; gap: 32px; }
	.author-photo { max-width: 240px; }
}

/* ============ ENQUIRY FORM ============ */
.enquiry-form {
	max-width: 900px;
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 6px;
	padding: 40px 40px 32px;
}
.enquiry-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.enquiry-form .row.bar { grid-template-columns: 1fr auto; align-items: center; margin-top: 8px; }
.enquiry-form label { display: block; }
.enquiry-form label.full { display: block; margin-bottom: 20px; }
.enquiry-form .lb {
	display: block;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 8px;
}
.enquiry-form input[type=text],
.enquiry-form input[type=email],
.enquiry-form select,
.enquiry-form textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--bg);
	border: 1px solid var(--rule);
	border-radius: 3px;
	font-family: var(--sans);
	font-size: 14.5px;
	color: var(--ink);
	transition: border-color 0.25s, background 0.25s;
}
.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
	outline: none;
	border-color: var(--mark);
	background: var(--card);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--mark) 15%, transparent);
}
.enquiry-form textarea { font-family: var(--serif); font-size: 16px; line-height: 1.5; resize: vertical; }
.enquiry-form .hint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.btn-primary {
	background: var(--mark);
	color: var(--card);
	border: none;
	padding: 14px 28px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 3px;
	cursor: none;
	transition: background 0.25s, transform 0.25s;
}
.btn-primary:hover { background: var(--mark-2); }
@media (max-width: 640px) {
	.enquiry-form { padding: 28px 22px 24px; }
	.enquiry-form .row { grid-template-columns: 1fr; gap: 16px; }
	.enquiry-form .row.bar { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
 * v3.1 — MOTION ADDITIONS
 * ============================================================ */

/* --- PAGE TRANSITION MASK --- */
.page-mask {
	position: fixed;
	inset: 0;
	z-index: 9995;
	background: var(--bg);
	transform: translateY(0);
	transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: all;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: transform;
}
.page-mask::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(600px 400px at 30% 30%, var(--wash), transparent 60%),
		radial-gradient(500px 350px at 70% 70%, var(--signal-wash), transparent 60%);
	pointer-events: none;
}
.page-mask.is-active {
	transform: translateY(0);
	transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}
.page-mask.is-done {
	transform: translateY(-101%);
	pointer-events: none;
}
.page-mask-inner {
	text-align: center;
	position: relative;
	z-index: 1;
	transform: translateY(0);
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.page-mask.is-done .page-mask-inner {
	transform: translateY(-30px);
}
.mask-mark {
	width: 128px;
	height: 128px;
	margin: 0 auto 20px;
	opacity: 0;
	animation: maskMark 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}
.mask-mark svg { width: 100%; height: 100%; }
.mask-name {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted);
	opacity: 0;
	animation: maskName 0.6s ease 0.25s forwards;
}
@keyframes maskMark {
	from { opacity: 0; transform: scale(0.85); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes maskName { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.page-mask { display: none !important; }
}

/* --- CURSOR TRAIL --- */
.cursor-trail-dot {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	background: var(--mark);
	border-radius: 50%;
	z-index: 9997;
	mix-blend-mode: multiply;
	transform: translate3d(-50%, -50%, 0);
	will-change: transform;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cursor-trail-dot { mix-blend-mode: screen; }
}
:root[data-theme="dark"] .cursor-trail-dot { mix-blend-mode: screen; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
	.cursor-trail-dot { display: none !important; }
}

/* --- BOOK COVER 3D FLIP --- */
.book-cover {
	perspective: 1600px;
	transform-style: preserve-3d;
	transition: transform 0.6s var(--easing);
	position: sticky;
	top: 96px;
}
.book-cover .cover-placeholder,
.book-cover img {
	transform-origin: left center;
	transition:
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform, box-shadow;
	backface-visibility: hidden;
	box-shadow:
		0 20px 60px -20px rgba(10,11,16,0.35),
		0 2px 8px rgba(10,11,16,0.12);
}
.book-cover:hover .cover-placeholder,
.book-cover:hover img {
	transform: rotateY(-25deg);
	box-shadow:
		30px 40px 100px -30px rgba(10,11,16,0.55),
		4px 12px 20px rgba(10,11,16,0.20);
}
.book-cover::after {
	content: "";
	position: absolute;
	right: 0; top: 0;
	width: 6px;
	height: 100%;
	background: linear-gradient(90deg, rgba(10,11,16,0.35), rgba(10,11,16,0));
	transform: translateX(100%) rotateY(-25deg);
	transform-origin: left center;
	opacity: 0;
	transition: opacity 0.5s var(--easing);
	pointer-events: none;
}
.book-cover:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.book-cover:hover .cover-placeholder,
	.book-cover:hover img { transform: none; }
	.book-cover::after { display: none; }
}

/* --- PHOTO REVEAL WIPES --- */
.case-photo,
.book-cover,
.portrait-slot,
.author-photo {
	position: relative;
}
.case-photo::before,
.book-cover > *:first-child::before,
.portrait-slot::before,
.author-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bg);
	transform: translateX(0) skewX(-6deg);
	transform-origin: left center;
	transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1);
	z-index: 3;
	pointer-events: none;
}
.case-photo.revealed::before,
.book-cover.revealed > *:first-child::before,
.portrait-slot.revealed::before,
.author-photo.revealed::before {
	transform: translateX(-110%) skewX(-6deg);
}
/* Book cover placeholders don't have inner children matching the ::before selector well - use a simpler approach */
.book-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bg);
	transform: translateX(0) skewX(-6deg);
	transform-origin: left center;
	transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1);
	z-index: 3;
	pointer-events: none;
	border-radius: 4px;
}
.book-cover.revealed::before {
	transform: translateX(-110%) skewX(-6deg);
}
@media (prefers-reduced-motion: reduce) {
	.case-photo::before,
	.book-cover::before,
	.portrait-slot::before,
	.author-photo::before { display: none; }
}

/* --- SECTION RAIL (right-side vertical) --- */
.section-rail {
	position: fixed;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 60;
	pointer-events: auto;
}
.rail-track {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.rail-dot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 6px 0;
	text-decoration: none;
	cursor: none;
}
.rail-dot .rail-line {
	display: block;
	width: 22px;
	height: 1px;
	background: var(--muted);
	transform-origin: right center;
	transition: transform 0.35s var(--easing), background 0.25s;
}
.rail-dot .rail-label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	opacity: 0;
	transform: translateX(6px);
	transition: opacity 0.35s var(--easing), transform 0.35s var(--easing), color 0.25s;
	white-space: nowrap;
	pointer-events: none;
}
.rail-dot:hover .rail-line,
.rail-dot.is-on .rail-line {
	transform: scaleX(1.6);
	background: var(--mark);
}
.rail-dot:hover .rail-label {
	opacity: 1;
	transform: translateX(0);
	color: var(--ink);
}
.rail-dot.is-on .rail-label {
	color: var(--mark);
	opacity: 1;
	transform: translateX(0);
}
@media (max-width: 1200px), (prefers-reduced-motion: reduce) {
	.section-rail { display: none !important; }
}

/* --- MANIFESTO GRID STAGGER (enter) --- */
.manifesto-item {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--i, 0) * 65ms);
}
.manifesto-grid.enter .manifesto-item {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.manifesto-item { opacity: 1 !important; transform: none !important; transition: none; }
}

/* --- LEDGER ROW CASCADE (enter) --- */
.ledger-row {
	opacity: 0;
	transform: translateX(-14px);
	transition:
		opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--row-i, 0) * 70ms + 100ms);
}
.ledger.enter .ledger-row {
	opacity: 1;
	transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
	.ledger-row { opacity: 1 !important; transform: none !important; transition: none; }
}

/* --- SECTION TINT (subtle body background shift) --- */
body {
	transition: background 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-tint="manifesto"] { background: color-mix(in oklab, var(--bg) 94%, var(--mark)); }
body[data-tint="practice"] { background: color-mix(in oklab, var(--bg) 96%, var(--signal)); }
body[data-tint="currents"] { background: color-mix(in oklab, var(--bg) 96%, var(--mark)); }
@media (prefers-reduced-motion: reduce) {
	body { transition: none !important; }
}

/* --- ENHANCED MARQUEE (variable animation duration; animation-duration set inline by JS) --- */
.marquee-track {
	transition: animation-duration 0.5s ease-out;
	will-change: transform;
}
.marquee-item {
	transition: transform 0.35s var(--easing);
}
.marquee:hover .marquee-item {
	transform: translateY(-2px);
}

/* --- ENHANCED WORK PANEL HOVER --- */
.now-item {
	position: relative;
	overflow: hidden;
}
.now-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--wash), transparent 55%);
	opacity: 0;
	transition: opacity 0.4s var(--easing);
	pointer-events: none;
}
.now-item:hover::before { opacity: 1; }

/* --- CTA CARD LIFT --- */
.cta-card {
	transition:
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s,
		background 0.35s,
		box-shadow 0.5s var(--easing);
}
.cta-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 60px -20px rgba(10,11,16,0.20), 0 4px 12px rgba(10,11,16,0.06);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cta-card:hover {
		box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
	}
}

/* --- EXPLORE CARD SUBTLE MOTION --- */
.explore-card {
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s,
		background 0.35s;
}
.explore-card:hover {
	transform: translateY(-4px);
}

/* --- LOADED STATE POLISH --- */
body.loaded main { animation: mainIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes mainIn {
	from { opacity: 0.6; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	body.loaded main { animation: none; }
}

/* --- ARCHIVE ROW HOVER --- */
.archive-row {
	transition: background 0.3s var(--easing), padding 0.3s var(--easing);
}
.archive-row:hover {
	background: color-mix(in oklab, var(--wash) 60%, transparent);
	padding-left: 8px;
}

/* --- SPECIMEN LINK PULL --- */
.link {
	position: relative;
	overflow: hidden;
}
.link::before {
	content: "";
	position: absolute;
	left: 0; right: 100%;
	bottom: -1px;
	height: 1px;
	background: currentColor;
	transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.link:hover::before {
	right: 0;
}

/* ============================================================
 * v3.2 — AWARD-TIER MOTION
 * ============================================================ */

:root {
	--spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55.5%, 1.017 63.6%, 1.001);
	--curtain: cubic-bezier(0.76, 0, 0.24, 1);
}

/* --- CURSOR: CSS-var positioned so size changes stay centered --- */
.cursor, .cursor-ring {
	transform: translate3d(calc(var(--cx, -100px) - 50%), calc(var(--cy, -100px) - 50%), 0) !important;
	top: 0; left: 0;
}
.cursor { transition: width 0.25s var(--spring), height 0.25s var(--spring), opacity 0.2s; }
.cursor-ring {
	display: flex; align-items: center; justify-content: center;
	transition: width 0.35s var(--spring), height 0.35s var(--spring), opacity 0.25s, border-color 0.25s, background 0.25s;
}
.cursor-label {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.2s, transform 0.3s var(--spring);
	pointer-events: none;
	white-space: nowrap;
}
body.has-label .cursor { width: 0; height: 0; opacity: 0; }
body.has-label .cursor-ring {
	width: 88px; height: 88px;
	background: var(--card);
	border-color: transparent;
	mix-blend-mode: normal;
	opacity: 0.97;
	box-shadow: 0 10px 30px -10px rgba(10,11,16,0.25);
}
body.has-label .cursor-label { opacity: 1; transform: scale(1); }

/* --- ANIMATED GRAIN --- */
.grain {
	inset: auto;
	top: -50%; left: -50%;
	width: 200%; height: 200%;
	animation: grainShift 0.9s steps(8) infinite;
}
@keyframes grainShift {
	0%   { transform: translate(0, 0); }
	12%  { transform: translate(-3%, -5%); }
	25%  { transform: translate(4%, -2%); }
	37%  { transform: translate(-2%, 4%); }
	50%  { transform: translate(5%, 3%); }
	62%  { transform: translate(-4%, 1%); }
	75%  { transform: translate(2%, -4%); }
	87%  { transform: translate(-5%, 2%); }
	100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* --- SCROLL PROGRESS LINE --- */
.scroll-progress {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--mark), var(--signal));
	transform-origin: left center;
	transform: scaleX(0);
	z-index: 101;
	pointer-events: none;
}

/* --- LOADER: SPLIT CURTAIN --- */
.loader {
	background: transparent;
	opacity: 1;
	transition: visibility 0s linear 1.1s;
}
.loader.done {
	opacity: 1;
	visibility: hidden;
	pointer-events: none;
}
.loader-half {
	position: absolute;
	left: 0; width: 100%; height: 50.5%;
	background: var(--bg);
	transition: transform 1s var(--curtain) 0.05s;
	will-change: transform;
}
.loader-half.top { top: 0; }
.loader-half.bottom { bottom: 0; }
.loader-half.top::after, .loader-half.bottom::after {
	content: "";
	position: absolute;
	left: 0; width: 100%; height: 1px;
	background: var(--rule);
	opacity: 0;
	transition: opacity 0.3s;
}
.loader-half.top::after { bottom: 0; }
.loader-half.bottom::after { top: 0; }
.loader.done .loader-half.top { transform: translateY(-100%); }
.loader.done .loader-half.bottom { transform: translateY(100%); }
.loader.done .loader-half::after { opacity: 1; }
.loader-center {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
	transition: opacity 0.35s ease, transform 0.6s var(--curtain);
}
.loader.done .loader-center { opacity: 0; transform: scale(0.94); }
.loader .progress-strip { position: static; transform: none; bottom: auto; left: auto; }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* --- PAGE MASK: SPLIT --- */
.page-mask {
	background: transparent;
	transform: none !important;
	transition: none;
	pointer-events: none;
}
.page-mask::before { display: none; }
.pm-half {
	position: absolute;
	left: 0; width: 100%; height: 50.5%;
	background: var(--bg);
	transition: transform 0.85s var(--curtain);
	will-change: transform;
}
.pm-half.top { top: 0; transform: translateY(0); }
.pm-half.bottom { bottom: 0; transform: translateY(0); }
.pm-half::after {
	content: "";
	position: absolute; left: 0; width: 100%; height: 1px;
	background: var(--rule);
}
.pm-half.top::after { bottom: 0; }
.pm-half.bottom::after { top: 0; }
.page-mask.is-done .pm-half.top { transform: translateY(-100%); }
.page-mask.is-done .pm-half.bottom { transform: translateY(100%); }
.page-mask.is-active { pointer-events: all; }
.page-mask.is-active .pm-half.top { transform: translateY(0); transition-duration: 0.7s; }
.page-mask.is-active .pm-half.bottom { transform: translateY(0); transition-duration: 0.7s; }
.page-mask-inner {
	position: relative; z-index: 1;
	opacity: 1;
	transform: translateY(0) scale(1);
	transition: opacity 0.4s ease, transform 0.6s var(--curtain);
}
.page-mask.is-done .page-mask-inner { opacity: 0; transform: translateY(-40px) scale(0.96); }
.page-mask.is-active .page-mask-inner { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.2s; }
.mask-dest {
	margin-top: 10px;
	font-family: var(--display);
	font-style: italic;
	font-size: 22px;
	color: var(--mark);
	letter-spacing: -0.01em;
	min-height: 1.2em;
}

/* --- SPLIT CHARS: 3D reveal + outline-to-fill --- */
[data-split].is-chars .split-word { overflow: visible; padding: 0.02em 0; margin: 0; }
.split-char {
	display: inline-block;
	perspective: 800px;
	transform-style: preserve-3d;
	transform: translateY(0.35em) rotateX(-70deg);
	opacity: 0;
	filter: blur(6px);
	transform-origin: 50% 100%;
	transition:
		transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.7s ease,
		filter 0.8s ease;
	transition-delay: calc(var(--c, 0) * 26ms + 120ms);
	will-change: transform, opacity, filter;
}
.split-char .ch {
	display: inline-block;
	-webkit-text-stroke: 1.5px currentColor;
	-webkit-text-fill-color: transparent;
	transition:
		-webkit-text-fill-color 0.7s ease,
		transform 0.45s var(--spring);
	transition-delay: calc(var(--c, 0) * 26ms + 480ms), 0s;
	will-change: transform;
}
[data-split].is-chars.enter .split-char { transform: none; opacity: 1; filter: blur(0); }
[data-split].is-chars.enter .split-char .ch { -webkit-text-fill-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
	.split-char { transform: none !important; opacity: 1 !important; filter: none !important; transition: none !important; }
	.split-char .ch { -webkit-text-fill-color: currentColor !important; -webkit-text-stroke: 0; transition: none !important; }
}

/* --- SECTION HEADS: outline-to-fill on the word reveal --- */
.section-head h2[data-split] .split-inner,
.hs-intro h2[data-split] .split-inner {
	-webkit-text-stroke: 1px currentColor;
	-webkit-text-fill-color: transparent;
	transition:
		transform 1.05s var(--easing),
		opacity 0.7s var(--easing),
		-webkit-text-fill-color 0.6s ease;
	transition-delay: calc(var(--i, 0) * 48ms), calc(var(--i, 0) * 48ms), calc(var(--i, 0) * 48ms + 420ms);
}
.section-head h2[data-split].enter .split-inner,
.hs-intro h2[data-split].enter .split-inner {
	-webkit-text-fill-color: currentColor;
}
@media (prefers-reduced-motion: reduce) {
	.section-head h2[data-split] .split-inner, .hs-intro h2[data-split] .split-inner {
		-webkit-text-fill-color: currentColor !important; -webkit-text-stroke: 0;
	}
}

/* --- HERO: scroll scale/fade + velocity skew + badge --- */
.hero { position: relative; }
.hero h1 {
	transform-origin: 0% 0%;
	transform: translate3d(0, var(--hy, 0px), 0) scale(var(--hs, 1)) skewY(var(--hsk, 0deg));
	opacity: var(--ho, 1);
	letter-spacing: calc(-0.028em + var(--hls, 0em));
	will-change: transform, opacity;
}
.hero-badge {
	position: absolute;
	left: 40px;
	bottom: 8px;
	width: 148px; height: 148px;
	pointer-events: none;
	opacity: 0;
	animation: badgeIn 1.2s var(--easing) 1.6s forwards;
}
.hero-badge svg { width: 100%; height: 100%; overflow: visible; animation: spin 22s linear infinite; }
.hero-badge text {
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	fill: var(--muted);
}
.hero-badge .badge-l {
	font-family: var(--display);
	font-style: italic;
	font-size: 44px;
	letter-spacing: 0;
	text-transform: none;
	fill: var(--mark);
	animation: spinBack 22s linear infinite;
	transform-origin: 100px 100px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinBack { to { transform: rotate(-360deg); } }
@keyframes badgeIn { to { opacity: 1; } }
@media (max-width: 1100px) { .hero-badge { display: none; } }
@media (prefers-reduced-motion: reduce) {
	.hero h1 { transform: none !important; opacity: 1 !important; }
	.hero-badge svg, .hero-badge .badge-l { animation: none; }
	.hero-badge { opacity: 1; animation: none; }
}

/* --- VELOCITY SKEW targets --- */
.marquee { transform: skewY(var(--sk, 0deg)); transform-origin: center; will-change: transform; }
.marquee.is-dragging { cursor: grabbing; }
.marquee.is-dragging .marquee-item { color: var(--mark); }
.marquee-track { animation: none !important; will-change: transform; user-select: none; touch-action: pan-y; }
.hs-panel { transform: skewY(var(--sk, 0deg)); transform-origin: center; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .marquee, .hs-panel { transform: none !important; } }

/* --- STACKING CASE CARDS (Work page) --- */
body.has-stack .case-studies { position: relative; }
body.has-stack .case {
	position: sticky;
	top: 0;
	min-height: 100vh;
	background: var(--bg);
	transform: scale(calc(1 - var(--stack-p, 0) * 0.06)) translateY(calc(var(--stack-p, 0) * -20px));
	transform-origin: center top;
	filter: brightness(calc(1 - var(--stack-p, 0) * 0.18));
	border-radius: calc(var(--stack-p, 0) * 24px);
	box-shadow: 0 -30px 80px -40px rgba(10,11,16, calc(var(--stack-p, 0) * 0.5));
	will-change: transform, filter;
	overflow: hidden;
}
body.has-stack .case:nth-child(even) { background: color-mix(in oklab, var(--bg-2) 45%, var(--bg)); }
body.has-stack .case::after {
	content: "";
	position: absolute; inset: 0;
	background: var(--ink);
	opacity: calc(var(--stack-p, 0) * 0.25);
	pointer-events: none;
	transition: opacity 0.1s;
}

/* --- IMAGE PARALLAX --- */
.case-photo > *, .portrait-slot > *, .author-photo > * {
	transform: translate3d(0, var(--py, 0%), 0) scale(1.09);
	will-change: transform;
}
.book-cover { transform: translate3d(0, var(--py, 0px), 0); }
@media (prefers-reduced-motion: reduce) {
	.case-photo > *, .portrait-slot > *, .author-photo > * { transform: none !important; }
	.book-cover { transform: none !important; }
}

/* --- LIQUID DISTORTION --- */
.lb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[data-liquid].is-liquid { filter: url(#lb-liquid); }
[data-liquid] { transition: filter 0.2s; }

/* --- NAV: text roll + ink --- */
.status nav { position: relative; }
.status nav a::after { display: none !important; }
.status nav a, .foot-nav a { overflow: hidden; }
.roll { display: inline-block; position: relative; overflow: hidden; height: 1.25em; line-height: 1.25em; vertical-align: top; }
.roll span { display: block; transition: transform 0.55s var(--spring); }
.roll-b { position: absolute; top: 100%; left: 0; color: var(--mark); }
a:hover .roll span, a:focus-visible .roll span { transform: translateY(-100%); }
.nav-ink {
	position: absolute;
	left: 0; bottom: -8px;
	height: 1px;
	width: 0;
	background: var(--mark);
	transform: translateX(0);
	transition: transform 0.55s var(--spring), width 0.55s var(--spring), opacity 0.2s;
	opacity: 0;
	pointer-events: none;
}
.status nav a.is-on::after { display: none !important; }

/* --- CLOCK --- */
.status .clock {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
@media (max-width: 1280px) { .status .clock, .status .clock + .sep { display: none; } }

/* --- SPOTLIGHT ON GRIDS --- */
.has-spot { position: relative; }
.has-spot::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), var(--wash) 0%, transparent 65%);
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
	z-index: 0;
}
.has-spot:hover::before { opacity: 1; }
.has-spot > * { position: relative; z-index: 1; }
.manifesto-item::after, .practice-item::after {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), var(--signal-wash), transparent 70%);
	opacity: 0;
	transition: opacity 0.35s;
	pointer-events: none;
}
.manifesto-item:hover::after, .practice-item:hover::after { opacity: 1; }
.manifesto-item, .practice-item { position: relative; }

/* --- STAGGERS (spring) --- */
.practice-item, .now-item, .explore-card, .currents-col, .cta-card, .skill-row, .archive-row, .buy {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.9s var(--spring),
		border-color 0.35s, background 0.35s, box-shadow 0.5s var(--easing), padding 0.3s;
	transition-delay: calc(var(--i, 0) * 70ms);
}
.enter > .practice-item, .enter > .now-item, .enter > .explore-card, .enter > .currents-col,
.enter > .cta-card, .enter > .skill-row, .enter > .archive-row, .enter > .buy {
	opacity: 1;
	transform: translateY(0);
}
/* cards with tilt keep their tilt transform once entered */
.now-grid.enter .now-item[data-tilt],
.together.enter .cta-card[data-tilt],
.explore-grid.enter .explore-card[data-tilt] {
	transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(var(--tx, 0), var(--ty, 0), 0);
	transition-delay: 0s;
}
.together.enter .cta-card[data-tilt]:hover { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(var(--tx, 0), calc(var(--ty, 0) - 6px), 0); }
@media (prefers-reduced-motion: reduce) {
	.practice-item, .now-item, .explore-card, .currents-col, .cta-card, .skill-row, .archive-row, .buy {
		opacity: 1 !important; transform: none !important; transition: none !important;
	}
}

/* --- MANIFESTO / LEDGER (spring upgrade) --- */
.manifesto-item { transition-timing-function: var(--spring); }
.ledger-row { transition-timing-function: var(--spring); }

/* --- COLOSSUS: sharper motion --- */
.colossus .huge { transition: transform 0.25s ease-out; }

/* --- MOTION POLISH: hover lifts use spring --- */
.cta-card, .explore-card, .now-item { transition-timing-function: var(--spring); }
.offer { transition: background 0.35s var(--easing), transform 0.5s var(--spring); }
.offer:hover { transform: translateY(-4px); }

/* --- STATUS BAR: slide-in refinements --- */
.status { animation-delay: 1.35s; }

/* --- v3.2.1 status bar fit --- */
.status .mark-slot .name, .status .live, .status .mid, .status .clock { white-space: nowrap; }
@media (max-width: 1640px) { .status .clock, .status .sep:has(+ .clock) { display: none; } }
@media (max-width: 1240px) { .status .mid, .status .sep:has(+ .mid) { display: none; } .status-inner { gap: 20px; } }

/* ============================================================
 * v3.3 — GENIUS PASS
 * ============================================================ */

/* --- WebGL fluid layer under the particles --- */
.bg-gl {
	position: fixed; inset: 0;
	width: 100%; height: 100%;
	z-index: 0;
	pointer-events: none;
	opacity: 1;
	filter: blur(18px) saturate(1.15);
	transform: scale(1.06);
}
.bg-canvas { z-index: 0; }
main { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .bg-gl { display: none; } }

/* --- Hidden native scrollbar on desktop (rail + progress line take over) --- */
@media (hover: hover) and (pointer: fine) {
	html { scrollbar-width: none; }
	html::-webkit-scrollbar { width: 0; height: 0; }
}

/* --- Hero: decode state, rotator, depth parallax --- */
.split-char .ch.is-scr { color: var(--mark); -webkit-text-fill-color: var(--mark); }
.hero .eyebrow, .hero .lede, .hero-badge, .hero-rotator {
	translate: calc(var(--mpx, 0px) * var(--depth, 1)) calc(var(--mpy, 0px) * var(--depth, 1));
	transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero .eyebrow { --depth: 0.35; }
.hero .lede { --depth: 0.9; }
.hero-badge { --depth: -0.7; }
.hero-rotator { --depth: 0.55; }
.hero-rotator {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin: 36px 0 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
}
.hero-rotator .rot-label::after { content: " ·"; }
.hero-rotator .rot-slot {
	position: relative;
	display: inline-block;
	height: 1.3em;
	line-height: 1.3em;
	min-width: 20ch;
	overflow: hidden;
	vertical-align: bottom;
}
.hero-rotator .rot-word {
	position: absolute; left: 0; top: 0;
	display: block;
	font-family: var(--display);
	font-style: italic;
	font-size: 26px;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--mark);
	white-space: nowrap;
	transform: translateY(110%);
	transition: transform 0.75s var(--curtain);
}
.hero-rotator .rot-word.a { transform: translateY(0); }
.hero-rotator .rot-word.in { transform: translateY(0); }
.hero-rotator .rot-word.out { transform: translateY(-110%); }
@media (max-width: 640px) { .hero-rotator .rot-word { font-size: 20px; } .hero-rotator .rot-slot { min-width: 14ch; } }
.hero-badge svg { animation: none; }
.hero-badge .badge-l { animation: none; }
.badge-ring { transform-origin: 100px 100px; }

/* --- Colossus: infinite track --- */
.colossus { overflow: hidden; }
.colossus-track {
	display: flex;
	gap: 0.35em;
	white-space: nowrap;
	will-change: transform;
	font-size: clamp(80px, 22vw, 340px);
}
.colossus .huge { flex: 0 0 auto; margin: 0; text-align: left; transition: none; transform: none !important; }

/* --- Kinetic outlined type bands --- */
.kinetic {
	padding: 48px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	overflow: hidden;
	transform: skewY(var(--sk, 0deg));
	will-change: transform;
	background: var(--bg-2);
}
.k-row { overflow: hidden; white-space: nowrap; line-height: 1.02; }
.k-track { display: inline-flex; will-change: transform; }
.k-track span {
	font-family: var(--display);
	font-size: clamp(56px, 9vw, 150px);
	letter-spacing: -0.02em;
	padding-right: 0.3em;
}
.k-a .k-track span { -webkit-text-stroke: 1px var(--ink); -webkit-text-fill-color: transparent; color: transparent; }
.k-b .k-track span { color: var(--mark); font-style: italic; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .kinetic { transform: none; } .k-track { transform: none !important; } }

/* --- Scroll-driven word fill --- */
.has-fill .fw {
	--on: clamp(0, calc(var(--fp, 0) * var(--n, 1) - var(--w, 0)), 1);
	color: color-mix(in oklab, var(--fill-ink, var(--ink)) calc(var(--on) * 100%), color-mix(in oklab, var(--muted) 55%, transparent));
	transition: color 0.2s linear;
}
.hero .lede { --fill-ink: var(--ink-2); }
.section-lede { --fill-ink: var(--ink-2); }
.about .prose em .fw, .manifesto-item p .fw { --fill-ink: var(--ink-2); }
.about .prose em .fw { --fill-ink: var(--mark); }
.rsec-p .fw, .book-prose .fw, .case-prose .fw, .author-text .fw { --fill-ink: var(--ink); }
@media (prefers-reduced-motion: reduce) { .has-fill .fw { color: inherit; } }

/* --- "Now" clip unfold --- */
#now {
	clip-path: inset(calc(var(--clip, 0) * 28%) calc(var(--clip, 0) * 9%) 0 calc(var(--clip, 0) * 9%) round calc(var(--clip, 0) * 40px));
	transform: scale(calc(1 - var(--clip, 0) * 0.05)) translateY(calc(var(--clip, 0) * 40px));
	transform-origin: center top;
	will-change: clip-path, transform;
}
@media (prefers-reduced-motion: reduce) { #now { clip-path: none; transform: none; } }

/* --- Line-draw entrances --- */
.practice-item { border-top: none; }
.practice-item::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0; height: 1px;
	background: var(--ink);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 70ms);
}
.practice-grid.enter .practice-item::before { transform: scaleX(1); }
.skill-row { border-top: none; position: relative; }
.skill-row::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hair);
	transform: scaleX(0); transform-origin: left center;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 70ms);
}
.skills-list.enter .skill-row::before { transform: scaleX(1); }
.archive-row { border-bottom: none; position: relative; }
.archive-row::after {
	content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--hair);
	transform: scaleX(0); transform-origin: left center;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 70ms + 200ms);
}
.archive-list.enter .archive-row::after { transform: scaleX(1); }
.cv-entry {
	border-top: none; position: relative;
	opacity: 0; transform: translateY(18px);
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s var(--spring);
	transition-delay: calc(var(--i, 0) * 80ms);
}
.cv-entry::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hair);
	transform: scaleX(0); transform-origin: left center;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 80ms + 150ms);
}
.cv-entry:first-child::before { display: none; }
.cv-list.enter .cv-entry { opacity: 1; transform: none; }
.cv-list.enter .cv-entry::before { transform: scaleX(1); }
.side-dl .row {
	opacity: 0; transform: translateX(-8px);
	transition: opacity 0.6s ease, transform 0.7s var(--spring);
	transition-delay: calc(var(--i, 0) * 80ms + 300ms);
}
.side-dl.enter .row { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.practice-item::before, .skill-row::before, .archive-row::after, .cv-entry::before { transform: scaleX(1) !important; transition: none; }
	.cv-entry, .side-dl .row { opacity: 1 !important; transform: none !important; }
}

/* --- Giant numerals behind now cards --- */
.now-item::after {
	content: attr(data-n);
	position: absolute;
	right: -0.08em; bottom: -0.28em;
	font-family: var(--display);
	font-style: italic;
	font-size: 220px;
	line-height: 1;
	-webkit-text-stroke: 1px var(--mark);
	-webkit-text-fill-color: transparent;
	color: transparent;
	opacity: 0;
	transform: translateY(24px) scale(0.92) rotate(-4deg);
	transition: opacity 0.5s ease, transform 0.8s var(--spring);
	pointer-events: none;
}
.now-item:hover::after { opacity: 0.28; transform: none; }

/* --- Full-screen menu --- */
.menu-btn {
	display: inline-flex; align-items: center; gap: 10px;
	background: none; border: 0; padding: 4px 0;
	color: var(--muted);
	font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	cursor: none;
	transition: color 0.25s;
}
.menu-btn:hover { color: var(--ink); }
.menu-btn .mb { width: 22px; height: 10px; position: relative; display: inline-block; }
.menu-btn .mb::before, .menu-btn .mb::after {
	content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
	transition: transform 0.55s var(--spring), top 0.55s var(--spring), width 0.4s var(--spring);
}
.menu-btn .mb::before { top: 0; }
.menu-btn .mb::after { top: 9px; width: 70%; }
.menu-btn:hover .mb::after { width: 100%; }
body.menu-open .menu-btn .mb::before { top: 4.5px; transform: rotate(45deg); width: 100%; }
body.menu-open .menu-btn .mb::after  { top: 4.5px; transform: rotate(-45deg); width: 100%; }
@media (max-width: 640px) { .status nav .menu-btn { display: inline-flex; } .menu-btn .mb-label { display: none; } }

.menu-overlay { position: fixed; inset: 0; z-index: 99; pointer-events: none; }
.mo-half {
	position: absolute; left: 0; width: 100%; height: 50.5%;
	background: var(--ink);
	transition: transform 0.9s var(--curtain);
	will-change: transform;
}
.mo-half.top { top: 0; transform: translateY(-100%); }
.mo-half.bottom { bottom: 0; transform: translateY(100%); }
body.menu-open .menu-overlay { pointer-events: all; }
body.menu-open .mo-half { transform: translateY(0); }
body.menu-open { overflow: hidden; }
.mo-inner {
	position: absolute; inset: 0;
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 40px;
	padding: 120px 40px 56px;
	color: var(--bg);
	opacity: 0;
	transition: opacity 0.25s ease;
}
body.menu-open .mo-inner { opacity: 1; transition-delay: 0.3s; }
.mo-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.02em; }
.mo-links li { overflow: hidden; padding: 0.04em 0; }
.mo-links a {
	display: flex; align-items: baseline; gap: 0.3em;
	font-family: var(--display);
	font-size: clamp(48px, 9.2vw, 140px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--bg);
	transform: translateY(115%);
	transition: transform 1s var(--curtain) calc(var(--i, 0) * 70ms + 0.2s), color 0.3s;
	will-change: transform;
}
body.menu-open .mo-links a { transform: translateY(0); }
.mo-links a .idx { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--signal); transform: translateY(-1.2em); }
.mo-links a .mo-word { display: inline-block; transition: transform 0.6s var(--spring), color 0.3s; }
.mo-links a:hover .mo-word { color: var(--signal); font-style: italic; transform: translateX(0.12em); }
.mo-links a.is-on .mo-word { color: var(--signal); }
.mo-links a.is-on .mo-word::after { content: " ·"; }
.mo-meta {
	font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: color-mix(in oklab, var(--bg) 72%, transparent);
	display: flex; flex-direction: column; justify-content: flex-end; gap: 16px;
	opacity: 0; transform: translateY(20px);
	transition: opacity 0.6s ease 0.7s, transform 0.7s var(--spring) 0.7s;
	line-height: 1.7;
}
body.menu-open .mo-meta { opacity: 1; transform: none; }
.mo-meta .mo-k { color: var(--signal); }
.mo-big {
	font-family: var(--display); font-style: italic; font-size: 160px; line-height: 0.85;
	color: var(--bg); letter-spacing: -0.04em; text-transform: none; position: relative; align-self: flex-start;
	margin-bottom: 24px;
}
.mo-big .dot { position: absolute; right: -0.18em; bottom: 0.18em; width: 0.16em; height: 0.16em; background: var(--signal); border-radius: 50%; }
body.menu-open .status { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.menu-open .status :is(a, span, button, .name, .clock) { color: var(--bg) !important; }
body.menu-open .status .mark-slot svg text { fill: var(--bg); }
body.menu-open .status .live, body.menu-open .status .mid, body.menu-open .status .sep, body.menu-open .status .clock, body.menu-open .nav-ink { opacity: 0; }
body.menu-open .theme-btn { border-color: color-mix(in oklab, var(--bg) 40%, transparent); }
body.menu-open .section-rail, body.menu-open .scroll-progress { opacity: 0; }
@media (max-width: 900px) {
	.mo-inner { grid-template-columns: 1fr; padding: 100px 22px 40px; gap: 24px; }
	.mo-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mo-half, .mo-links a, .mo-inner, .mo-meta { transition: none !important; }
}

/* --- Cursor label variants --- */
body.menu-open .cursor-ring { border-color: var(--bg); }
body.menu-open.has-label .cursor-ring { background: var(--bg); }
body.menu-open.has-label .cursor-label { color: var(--ink); }

/* --- Hover lift polish for staggered cards (spring) --- */
.now-item:hover { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(var(--tx, 0), calc(var(--ty, 0) - 4px), 0); }

/* --- v3.3.0 rotator slot fix --- */
.hero-rotator .rot-slot { font-family: var(--display); font-size: 26px; height: 1.25em; line-height: 1.25em; min-width: 12.5em; letter-spacing: 0; text-transform: none; }
.hero-rotator .rot-word { font-size: 1em; line-height: inherit; }
@media (max-width: 640px) { .hero-rotator .rot-slot { font-size: 20px; min-width: 12.5em; } }

/* ============================================================
 * v3.4 — ONE PERSON WHO LIKES TO MAKE THINGS · third motion tier
 * Cinematic intro · theme wipe · odometers · section index · scroll cue ·
 * footer inversion · nav peek · letter gravity · idle breathing · exit zoom ·
 * hand-drawn underline · variable-font breathing · marquee wave · keys.
 * ============================================================ */

/* --- Intro: the hero starts slightly enlarged and settles as the curtains part --- */
.hero { transform-origin: 50% 35%; transition: transform 1.8s var(--curtain); }
body.is-intro .hero { transform: scale(1.07); }
body.is-settled .hero { transition: none; }
@media (prefers-reduced-motion: reduce) { .hero { transform: none !important; transition: none !important; } }

/* --- Loader: the mark draws itself, the dot pops, a giant counter sits bottom-right --- */
.loader .mark svg text {
	fill: transparent;
	stroke: var(--mark);
	stroke-width: 1.4px;
	stroke-linejoin: round;
	stroke-dasharray: 480;
	stroke-dashoffset: 480;
	animation: markDraw 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards, markFill 0.7s ease 1.25s forwards;
}
.loader .mark svg circle { transform-origin: 86px 88px; transform: scale(0); animation: dotPop 0.6s var(--spring) 1.45s forwards; }
@keyframes markDraw { to { stroke-dashoffset: 0; } }
@keyframes markFill { to { fill: var(--mark); } }
@keyframes dotPop { to { transform: scale(1); } }
.loader-big {
	position: absolute;
	right: 40px; bottom: 18px;
	z-index: 1;
	display: flex; align-items: baseline; gap: 0.04em;
	font-family: var(--display);
	font-size: clamp(96px, 22vw, 320px);
	line-height: 0.8;
	letter-spacing: -0.045em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	opacity: 0;
	animation: fadeIn 0.6s 0.25s var(--easing) forwards;
	transition: transform 0.75s var(--curtain), opacity 0.35s ease;
	pointer-events: none;
}
.loader-big .lb-pct { font-size: 0.2em; font-style: italic; color: var(--mark); letter-spacing: 0; }
.loader.done .loader-big { transform: translateY(40%); opacity: 0 !important; }
@media (max-width: 640px) { .loader-big { right: 18px; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) {
	.loader .mark svg text { animation: none; fill: var(--mark); stroke: none; }
	.loader .mark svg circle { animation: none; transform: none; }
	.loader-big { display: none; }
}

/* --- Theme switch as a circular wipe (View Transitions) --- */
:root.theme-wipe::view-transition-old(root),
:root.theme-wipe::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
:root.theme-wipe::view-transition-old(root) { z-index: 1; }
:root.theme-wipe::view-transition-new(root) { z-index: 2; }
/* Cross-document navigations dissolve between the closed curtains instead of flashing */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.28s; }
::view-transition-new(root) { animation-duration: 0.28s; }

/* --- Odometer counters --- */
.odo { display: inline; white-space: nowrap; }
.odo-slot { display: inline-block; height: 1em; overflow: hidden; line-height: 1; vertical-align: text-bottom; }
.odo-col {
	display: block;
	transform: translateY(0);
	transition: transform 1.7s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--k, 0) * 85ms);
	will-change: transform;
}
.odo-d { display: block; height: 1em; line-height: 1; }
.odo.is-rolled .odo-col { transform: translateY(calc(var(--d, 0) * -1em)); }
@media (prefers-reduced-motion: reduce) { .odo-col { transition: none; } }

/* --- Section index (fixed, bottom-left) --- */
.sec-idx {
	position: fixed;
	left: 28px; bottom: 22px;
	z-index: 90;
	display: flex; align-items: baseline; gap: 12px;
	padding: 10px 16px 10px 14px;
	border-radius: 999px;
	background: color-mix(in oklab, var(--bg) 78%, transparent);
	backdrop-filter: blur(10px) saturate(1.2);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	border: 1px solid var(--hair);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.7s var(--spring), color 0.9s ease, background 0.9s ease;
	pointer-events: none;
}
.sec-idx.is-visible { opacity: 1; transform: none; }
.si-num, .si-name { position: relative; display: inline-block; overflow: hidden; }
.si-num {
	font-family: var(--display);
	font-size: 26px;
	line-height: 1;
	height: 1em;
	min-width: 1.3em;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--ink);
	transition: color 0.9s ease;
}
.si-name { height: 1.3em; line-height: 1.3em; min-width: 8.5em; }
.si-roll {
	display: block;
	position: absolute; left: 0; top: 0;
	white-space: nowrap;
	transform: translateY(0);
	transition: transform 0.75s var(--curtain), opacity 0.4s ease;
}
.si-roll.b { transform: translateY(110%); opacity: 0; }
.si-roll.in { transform: translateY(0); opacity: 1; }
.si-roll.out { transform: translateY(-110%); opacity: 0; }
.si-sep { color: var(--rule); }
body.menu-open .sec-idx { opacity: 0; }
@media (max-width: 1199px) { .sec-idx { display: none; } }

/* --- Hero scroll cue (sits beside the rotating badge) --- */
.scroll-cue {
	position: absolute;
	left: 214px; bottom: 30px;
	display: flex; align-items: center; gap: 14px;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted);
	opacity: 0;
	animation: fadeIn 0.9s var(--easing) 2.3s forwards;
	transition: opacity 0.4s ease, transform 0.5s ease;
	pointer-events: none;
	translate: calc(var(--mpx, 0px) * -0.5) calc(var(--mpy, 0px) * -0.5);
}
.scroll-cue.is-gone { opacity: 0 !important; transform: translateY(8px); }
.sc-line { position: relative; width: 64px; height: 1px; background: var(--rule); overflow: hidden; }
.sc-dot { position: absolute; left: 0; top: 0; width: 22px; height: 1px; background: var(--mark); animation: cueTravel 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes cueTravel { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(300%); } }
@media (max-width: 1100px) { .scroll-cue { display: none; } }

/* --- Footer inversion: at the colossus the whole page flips to the other theme --- */
:root.foot-in:not([data-theme="dark"]) {
	--bg: #0A0B10; --bg-2: #12131A; --card: #171923;
	--ink: #F1EDE3; --ink-2: #CFC9BC; --muted: #8F887C;
	--mark: #C9463C; --mark-2: #D95A4F; --wash: color-mix(in oklab, #C9463C 12%, transparent);
	--signal: #E5B966; --signal-2: #EEC880; --signal-wash: color-mix(in oklab, #E5B966 15%, transparent);
	--rule: #1E2028; --line: #262933; --hair: rgba(241,237,227,0.10);
}
@media (prefers-color-scheme: dark) {
	:root.foot-in:not([data-theme="light"]) {
		--bg: #F1EDE3; --bg-2: #E9E3D4; --card: #FBF7EE;
		--ink: #0A0B10; --ink-2: #2E3138; --muted: #78716A;
		--mark: #6E1F2E; --mark-2: #8A3244; --wash: color-mix(in oklab, #6E1F2E 5%, transparent);
		--signal: #C48F44; --signal-2: #D9A45A; --signal-wash: color-mix(in oklab, #C48F44 18%, transparent);
		--rule: #D2CBB8; --line: #C5BDA8; --hair: rgba(10,11,16,0.09);
	}
}
:root[data-theme="dark"].foot-in {
	--bg: #F1EDE3; --bg-2: #E9E3D4; --card: #FBF7EE;
	--ink: #0A0B10; --ink-2: #2E3138; --muted: #78716A;
	--mark: #6E1F2E; --mark-2: #8A3244; --wash: color-mix(in oklab, #6E1F2E 5%, transparent);
	--signal: #C48F44; --signal-2: #D9A45A; --signal-wash: color-mix(in oklab, #C48F44 18%, transparent);
	--rule: #D2CBB8; --line: #C5BDA8; --hair: rgba(10,11,16,0.09);
}
body { transition: background 1.2s cubic-bezier(0.22, 1, 0.36, 1), color 1s ease; }
.status { transition: background 1s ease, border-color 1s ease; }
.colossus .huge, .colossus .under, .colophon, .foot, .foot-mark svg text, .section-rail, .cursor-ring { transition-property: color, fill, border-color, background; transition-duration: 1s; }
.colossus .huge { transition: color 1s ease; }
@media (prefers-reduced-motion: reduce) { body { transition: none !important; } }

/* --- Nav peek: a typographic preview that trails the cursor over the nav --- */
.nav-peek {
	position: fixed; left: 0; top: 0;
	z-index: 120;
	display: flex; align-items: baseline; gap: 14px;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	will-change: transform;
}
.nav-peek.is-on { opacity: 1; }
.np-idx { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--signal); }
.np-word {
	font-family: var(--display);
	font-style: italic;
	font-size: clamp(40px, 5vw, 76px);
	line-height: 1;
	letter-spacing: -0.03em;
	white-space: nowrap;
	color: var(--mark);
	-webkit-text-stroke: 1px var(--mark);
	-webkit-text-fill-color: transparent;
	transition: -webkit-text-fill-color 0.55s ease 0.12s;
}
.nav-peek.is-on .np-word { -webkit-text-fill-color: var(--mark); }
body.menu-open .nav-peek { opacity: 0; }

/* --- Hero letter gravity + idle breathing --- */
.hero h1.is-falling .split-char { transition: none !important; animation: none !important; will-change: transform; }
.hero h1.is-returning .split-char { transition: transform 1.3s var(--spring) !important; }
body.is-idle .hero h1.enter:not(.is-falling):not(.is-returning) .split-char {
	animation: idleFloat 4.4s ease-in-out infinite;
	animation-delay: calc(var(--c, 0) * -0.13s);
}
@keyframes idleFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-0.045em) rotate(0.7deg); }
}
body.is-idle .hero-badge svg { animation-duration: 9s; }
body.is-idle .live-dot { animation-duration: 1.2s; }
@media (prefers-reduced-motion: reduce) { body.is-idle .hero h1 .split-char { animation: none !important; } }

/* --- Exit zoom: the outgoing page sinks under the transition curtains --- */
body.is-leaving main.lb-page {
	animation: none;
	transform: scale(0.94);
	opacity: 0.3;
	transition: transform 0.9s var(--curtain), opacity 0.8s ease;
	will-change: transform, opacity;
}

/* --- Hand-drawn underline under the hero emphasis word --- */
.hero h1 em { position: relative; display: inline-block; }
.hero h1 em .em-stroke {
	position: absolute;
	left: -0.02em; bottom: -0.03em;
	width: 104%; height: 0.2em;
	overflow: visible;
	pointer-events: none;
}
.hero h1 em .em-stroke path {
	fill: none;
	stroke: var(--signal);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	opacity: 0.95;
}
.hero h1 em .em-stroke .em-stroke-2 { opacity: 0.5; stroke-width: 2.2; }
.hero h1 em.is-struck .em-stroke path { animation: emDraw 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.hero h1 em.is-struck .em-stroke .em-stroke-2 { animation-delay: 0.28s; }
@keyframes emDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero h1 em .em-stroke path { stroke-dashoffset: 0; animation: none; } }

/* --- Variable-font breathing on the lede (Fraunces SOFT + WONK axes) --- */
.hero .lede { animation: softBreath 10s ease-in-out infinite; }
@keyframes softBreath {
	0%, 100% { font-variation-settings: "opsz" 32, "SOFT" 0, "WONK" 0; }
	50%      { font-variation-settings: "opsz" 32, "SOFT" 90, "WONK" 1; }
}
@media (prefers-reduced-motion: reduce) { .hero .lede { animation: none; } }

/* --- Marquee letter wave on hover --- */
.marquee-item .mc { display: inline-block; }
.marquee-item.is-wave .mc { animation: mcWave 0.75s var(--spring); animation-delay: calc(var(--i, 0) * 20ms); }
@keyframes mcWave {
	0%   { transform: translateY(0); }
	35%  { transform: translateY(-0.16em) rotate(-3deg); color: var(--mark); }
	100% { transform: translateY(0); }
}

/* --- Menu keys line --- */
.mo-keys { opacity: 0.7; }
@media (hover: none) { .mo-keys { display: none; } }

/* --- Badge ring: text sized to wrap the circle exactly once --- */
.hero-badge text { font-size: 11.5px; letter-spacing: 0.2em; }