/* VERSEATILE Studios: the Lab system. Off-white paper, black ink, ruled grid. Black is kept for the brain panel, the contact section and the footer.
   Colour tokens live in :root and .dark only. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geistmono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --paper: #F5F4EF; --ink: #111210; --soft: #565751; --rule: #111210; --tint: #E9E8E1; --m: clamp(10px, 1.4vw, 20px); --pad: clamp(16px, 1.7vw, 26px); --hdr: 58px; --ease: cubic-bezier(.16,1,.3,1);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; }
.dark { --paper: #0C0D0C; --ink: #F5F4EF; --soft: #A9AAA3; --rule: #3A3B38; --tint: #1B1C1A; background: var(--paper); color: var(--ink); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 12px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.42 var(--sans); letter-spacing: -.008em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } h1, h2, h3, h4 { margin: 0; font-weight: 500; } ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; } ::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 14px; } .skip:focus { top: 10px; }
.grain { display: none; }

/* type */
.lbl { font: 500 11px/1.35 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .lbl.dot::before { display: none; }
.muted { color: var(--soft); } .small { font-size: 14px; }
.h1 { font-size: clamp(38px, 5.6vw, 92px); line-height: .97; letter-spacing: -.045em; }
.h1.big, .big { font-size: clamp(46px, 7.6vw, 124px); line-height: .94; letter-spacing: -.05em; }
.h2 { font-size: clamp(25px, 2.7vw, 42px); line-height: 1.04; letter-spacing: -.035em; }
.h3 { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.15; letter-spacing: -.022em; }
.lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.32; letter-spacing: -.015em; max-width: 48ch; }
.n { font-size: clamp(38px, 4.4vw, 70px); line-height: 1; letter-spacing: -.05em; margin: 0 0 8px; } .n b { font-weight: 500; } .n small { font-size: .45em; letter-spacing: -.02em; }
.h1 .w, .h2 .w, .hero-h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js .h1:not(.in) .w > span, .js .h2:not(.in) .w > span { transform: translateY(105%); }
.h1 .w > span, .h2 .w > span { display: inline-block; transition: transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.scr-g { opacity: .4; display: inline-block; width: .55em; text-align: center; overflow: hidden; vertical-align: top; max-height: 1.1em; } .scr-on { white-space: pre-wrap; }

/* the sheet: one ruled page */
.sheet { margin: 0 var(--m); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
main { padding-top: var(--hdr); }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.c { grid-column: span 12; padding: var(--pad); min-width: 0; border-bottom: 1px solid var(--rule); position: relative; } .row > .c:last-child { border-bottom: 0; }
.tight { padding: 12px var(--pad); } .flush { padding: 0; }
@media (min-width: 900px) {
  .c { border-bottom: 0; border-right: 1px solid var(--rule); } .c:last-child, .c.end { border-right: 0; }
  .s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s9 { grid-column: span 9; }
  .r2 > .c:nth-child(2n), .r4 > .c:nth-child(4n), .r3 > .c:nth-child(3n) { border-right: 0; } .r2 > .c:nth-child(n+3), .r3 > .c:nth-child(n+4), .r4 > .c:nth-child(n+5) { border-top: 1px solid var(--rule); }
}
@media (max-width: 899px) { .m6 { grid-column: span 6; } .m6:nth-child(odd) { border-right: 1px solid var(--rule); } }
.head { display: grid; gap: 12px; padding: clamp(30px, 4vw, 64px) var(--pad) clamp(22px, 2.6vw, 36px); align-content: end; }
.stack { display: grid; gap: 14px; align-content: start; } .stack p { margin: 0; } .between { display: flex; flex-direction: column; justify-content: space-between; gap: 34px; height: 100%; }
.dark .row, .dark .c { border-color: var(--rule); }
.acts { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }

/* buttons */
.btn { display: inline-flex; align-items: stretch; height: 46px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); transition: background .2s, color .2s; cursor: pointer; }
.btn > span { display: inline-flex; align-items: center; padding: 0 16px; font-weight: 500; font-size: 15px; }
.btn > i { display: inline-grid; place-items: center; width: 42px; border-left: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); } .btn svg { width: 16px; height: 16px; transition: transform .3s var(--ease); } .btn:hover svg { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--ink); } .btn.ghost > i { border-left-color: var(--ink); } .btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.wide { width: 100%; } .btn.wide > span { flex: 1; justify-content: center; } .btn[disabled] { opacity: .5; }
.q { display: inline-block; padding: 3px 0; border-bottom: 1px solid var(--ink); font-size: 15px; } .q:hover { opacity: .6; }
.pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; } .pills li { font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border: 1px solid var(--rule); }

/* header */
.hdr { position: fixed; inset: 0 0 auto; height: var(--hdr); z-index: 50; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); padding: 0 calc(var(--m) + var(--pad)); background: var(--paper); border-bottom: 1px solid var(--rule); }
.wordmark { width: 116px; height: auto; filter: brightness(0); } .dark .wordmark { filter: none; }
.hud { margin-left: auto; white-space: nowrap; } .hud b { font-weight: 500; }
.nav { display: none; align-items: center; gap: 24px; } .nav a { font-size: 14px; white-space: nowrap; } .nav a span { display: inline-block; } .nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.nav .nav-cta { background: var(--ink); color: var(--paper); padding: 9px 13px; font-weight: 500; }
.menu-btn { min-height: 44px; } @media (min-width: 1000px) { .nav { display: flex; } .menu-btn { display: none; } }
.menu { position: fixed; inset: var(--hdr) 0 0; z-index: 49; background: var(--paper); } .menu-in { height: 100%; display: flex; flex-direction: column; gap: 24px; padding: 8px calc(var(--m) + var(--pad)) 28px; overflow-y: auto; }
.menu-links { display: grid; } .menu-links a { font-size: clamp(38px, 10vw, 76px); line-height: 1.1; letter-spacing: -.045em; border-bottom: 1px solid var(--rule); padding: 8px 0; }
.menu-foot { margin-top: auto; display: grid; gap: 14px; } .menu-contact, .menu-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; } body.menu-open { overflow: hidden; }

/* footer */
.ftr { padding: 0; } .ftr .sheet { border-color: var(--rule); } .ftr-line { font-size: clamp(26px, 3.2vw, 50px); line-height: 1.02; letter-spacing: -.04em; max-width: 16ch; margin: 0; font-weight: 500; }
.ftr-col { display: grid; gap: 8px; align-content: start; } .ftr-col a:hover { opacity: .6; } .ftr-mark { width: 100%; height: auto; } .ftr-legal { display: flex; flex-wrap: wrap; gap: 16px; } .ftr-legal a:hover, .motion-toggle:hover { text-decoration: underline; }
.ftr .ends { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* hero and brain panel */
.lx-hero { min-height: min(68vh, 680px); }
.hero-h1 { font-size: clamp(44px, 6.5vw, 108px); line-height: .95; letter-spacing: -.052em; font-weight: 500; margin: 0; }
.panel { background: #0C0D0C; color: #F5F4EF; display: flex; flex-direction: column; min-height: 420px; overflow: hidden; }
.world { position: relative; flex: 1; min-height: 340px; background: #0C0D0C; overflow: hidden; } .world canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s; } .world canvas.on { opacity: 1; }
.world-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .8; } .world-labels { position: absolute; inset: 0; pointer-events: none; }
.panel-top { display: flex; justify-content: space-between; gap: 14px; padding: 12px var(--pad); border-bottom: 1px solid #3A3B38; }
.wl { position: absolute; left: 0; top: 0; padding-left: 42px; font: 500 10px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #fff; white-space: nowrap; text-shadow: 0 0 5px #000, 0 0 5px #000; }
.wl::before { content: ""; position: absolute; left: 0; top: 4px; width: 36px; height: 1px; background: #fff; } .wl::after { content: ""; position: absolute; left: -3px; top: 1px; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.wl.flip { padding: 0 42px 0 0; margin-left: -100%; transform-origin: right; } .casc { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #3A3B38; } .casc li { padding: 11px var(--pad); font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #A9AAA3; border-left: 1px solid #3A3B38; transition: background .4s, color .4s; } .casc li:first-child { border-left: 0; } .casc li.is-on { background: #F5F4EF; color: #0C0D0C; }
@media (max-width: 560px) { .casc li { padding: 10px 8px; font-size: 9.5px; letter-spacing: 0; text-align: center; } }

/* work tiles */
.tile { display: flex; flex-direction: column; } .tile .case-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--tint); }
.case-media img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .tile:hover img.cover { transform: scale(1.015); }
.card-logo { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(44%, 240px); height: auto; max-height: 34%; object-fit: contain; filter: drop-shadow(0 2px 14px rgba(0,0,0,.45)); }
.type-card { position: absolute; inset: 0; display: grid; place-items: center; background: #0C0D0C; color: #F5F4EF; font-size: clamp(44px, 8vw, 110px); letter-spacing: -.05em; }
.case-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 3px 14px; padding: 12px var(--pad); border-top: 1px solid var(--rule); } .case-name { font-size: 19px; font-weight: 500; letter-spacing: -.025em; } .case-card.hide { display: none; }
.dot-state { display: inline-block; width: 7px; height: 7px; border: 1px solid var(--ink); border-radius: 50%; margin-right: 7px; } .is-explored .dot-state { background: var(--ink); }
.your-tile .case-media { background: #0C0D0C; color: #F5F4EF; } .your-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--pad); } .your-in svg { width: 14px; height: 14px; vertical-align: -2px; } .your-t { font-size: clamp(40px, 5.6vw, 92px); line-height: .95; letter-spacing: -.05em; font-weight: 500; }
.work .c.flush { padding: 0; } .filters { display: flex; flex-wrap: wrap; gap: 4px; } .filter { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border: 1px solid var(--rule); } .filter:hover { background: var(--tint); } .filter.on { background: var(--ink); color: var(--paper); }

/* indexes: services, faq, steps */
.acc { border-top: 0; } .acc > details { border-bottom: 1px solid var(--rule); } .acc > details:last-child { border-bottom: 0; }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px 1fr auto 20px; gap: 10px; align-items: center; padding: 14px var(--pad); } .acc summary::-webkit-details-marker { display: none; } .acc summary:hover { background: var(--tint); }
.acc-t { font-size: clamp(21px, 2.3vw, 36px); line-height: 1.05; letter-spacing: -.035em; font-weight: 500; }
.acc i { position: relative; width: 16px; height: 16px; } .acc i::before, .acc i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .3s var(--ease); } .acc i::after { transform: rotate(90deg); } details[open] > summary i::after { transform: none; }
.state::before { content: "Unlit"; color: var(--soft); } .is-lit .state::before { content: "● Lit"; color: var(--ink); }
.acc-b { display: grid; gap: 22px; padding: 6px var(--pad) 24px calc(var(--pad) + 44px); } .acc-b p { margin: 0; } .acc-cta { margin-top: 18px; } @media (min-width: 900px) { .acc-b { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 620px) { .acc-b { padding-left: var(--pad); } .acc summary { grid-template-columns: 24px 1fr auto 18px; } }
.thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tint); } .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faq summary { grid-template-columns: 1fr 18px; padding: 16px var(--pad); font-size: 17px; font-weight: 500; letter-spacing: -.015em; } .faq p { margin: 0; padding: 0 44px 18px var(--pad); color: var(--soft); max-width: 70ch; }
.tbl > li { display: grid; gap: 4px; padding: 14px var(--pad); border-bottom: 1px solid var(--rule); } .tbl > li:last-child { border-bottom: 0; } .tbl p { margin: 0; }
.checks { display: grid; gap: 6px; font-size: 14px; } .checks li { display: flex; gap: 8px; } .checks li::before { content: "—"; }
.np { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; } .np-nums { font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -.04em; white-space: nowrap; } .np-nums i { font-style: normal; color: var(--soft); } .np-nums b { font-weight: 500; }
.cred-logo { display: flex; width: 150px; height: 76px; padding: 12px 16px; background: #fff; border: 1px solid var(--rule); } .cred-logo img { width: 100%; height: 100%; object-fit: contain; }
.quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; } .quote blockquote { margin: 0; font-size: clamp(22px, 2.3vw, 36px); line-height: 1.1; letter-spacing: -.033em; font-weight: 500; } .quote b { display: block; font-weight: 500; }
.door { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: clamp(240px, 26vw, 380px); padding: var(--pad); transition: background .25s, color .25s; } .door:hover { background: var(--ink); color: var(--paper); } .door-t { font-size: clamp(26px, 3vw, 48px); line-height: 1; letter-spacing: -.04em; font-weight: 500; } .door-go svg { width: 15px; height: 15px; vertical-align: -2px; } .door-go { font-weight: 500; }
.post-row { display: grid; gap: 6px; padding: 14px var(--pad); border-bottom: 1px solid var(--rule); align-items: center; } .post-row:last-child { border-bottom: 0; } .post-row:hover { background: var(--tint); } .post-t { font-size: clamp(20px, 2vw, 30px); line-height: 1.06; letter-spacing: -.03em; font-weight: 500; } @media (min-width: 900px) { .post-row { grid-template-columns: 130px 1fr 160px 120px; gap: 20px; } } .post-row .thumb { aspect-ratio: 3 / 2; } @media (max-width: 899px) { .post-row .thumb { display: none; } }

/* form */
.lead-form { display: grid; gap: 16px; } .fld { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; } .fld legend { padding: 0; margin-bottom: 6px; }
.fld input, .fld textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 9px 0; outline: none; resize: vertical; } .fld input:focus, .fld textarea:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); } .fld ::placeholder { color: var(--soft); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; } .chip { position: relative; } .chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .chip span { display: inline-block; font-size: 14px; padding: 7px 10px; border: 1px solid var(--rule); } .chip input:checked + span { background: var(--ink); color: var(--paper); } .chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { font-size: 12px; color: var(--soft); margin: 0; } .form-note a { text-decoration: underline; } .form-status { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; min-height: 1em; margin: 0; } .form-status a { text-decoration: underline; } .lead-form.sent > :not(.form-status) { opacity: .4; pointer-events: none; }
.lead-form.inline { grid-template-columns: 1fr; } @media (min-width: 700px) { .lead-form.inline { grid-template-columns: 1fr auto; align-items: end; } .lead-form.inline .form-note, .lead-form.inline .form-status { grid-column: 1 / -1; } }

/* method */
.ix-q { border: 0; margin: 0; padding: 14px var(--pad); min-width: 0; display: grid; gap: 10px; border-bottom: 1px solid var(--rule); } .ix-q legend { display: contents; } .ix-s { display: block; font-size: 17px; line-height: 1.22; letter-spacing: -.015em; font-weight: 500; } .ix { display: grid; } @media (min-width: 900px) { .ix { grid-template-columns: 1fr 1fr; } .ix-q:nth-child(odd) { border-right: 1px solid var(--rule); } }
.ix-opts { display: flex; gap: 4px; } .ix-opt { position: relative; flex: 1; max-width: 68px; } .ix-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .ix-opt span { display: grid; place-items: center; height: 42px; border: 1px solid var(--rule); font-size: 15px; } .ix-opt:hover span { background: var(--tint); } .ix-opt input:checked + span { background: var(--ink); color: var(--paper); } .ix-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.ix-total { font-size: clamp(90px, 12vw, 190px); line-height: .85; letter-spacing: -.07em; margin: 10px 0; font-weight: 500; } .ix-bars { display: grid; gap: 12px; } .ix-bar { display: grid; grid-template-columns: 62px 1fr 34px; gap: 10px; align-items: center; } .ix-bar b { font-weight: 500; text-align: right; } .ix-track { height: 10px; background: var(--tint); display: block; } .ix-track i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease); }

/* the game */
.rf { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--paper); overflow-y: auto; } body.rf-open { overflow: hidden; } .rf-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--hdr); padding: 0 var(--pad); flex: none; border-bottom: 1px solid var(--rule); } .rf-close { padding: 12px 0 12px 12px; } .rf-close:hover { text-decoration: underline; }
.rf-stage { flex: 1 1 280px; min-height: 240px; display: flex; background: #0C0D0C; } .rf-stage .world { flex: 1; min-height: 0; }
.rf-play, .rf-result { padding: var(--pad); display: grid; gap: 14px; flex: none; } .rf-meta { display: flex; align-items: center; gap: 14px; } .rf-bar { flex: 1; height: 2px; background: var(--tint); } .rf-bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; }
.rf-q { font-size: clamp(30px, 4.4vw, 68px); line-height: 1; letter-spacing: -.045em; margin: 0; font-weight: 500; } .rf-a { display: grid; gap: 6px; } @media (min-width: 760px) { .rf-a { grid-template-columns: 1fr 1fr; } } .rf-opt { display: flex; gap: 14px; align-items: baseline; padding: 16px 18px; text-align: left; border: 1px solid var(--rule); font-size: clamp(18px, 1.8vw, 26px); letter-spacing: -.025em; font-weight: 500; } .rf-opt:hover, .rf-opt:focus-visible { background: var(--ink); color: var(--paper); } .rf-opt[disabled] { opacity: .4; } .rf-hint { margin: 0; } @media (hover: none) { .rf-hint { display: none; } }
.rf-name { font-size: clamp(46px, 7vw, 110px); line-height: .92; letter-spacing: -.055em; margin: 0; outline: 0; font-weight: 500; } .rf-text { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -.02em; margin: 0; } .rf-risk { margin: 0; } .rf-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 34px; margin: 4px 0; } .rf-stats dd { margin: 3px 0 0; } .rf-note { margin: 0; font-size: 12px; max-width: 80ch; } html.calm .rf-bar { display: none; } @media (max-width: 620px) { .rf-stats { grid-template-columns: 1fr 1fr; } }

/* inner pages */
.gallery figure { margin: 0; } .gallery img { width: 100%; } .wide-media { position: relative; overflow: hidden; background: var(--tint); aspect-ratio: 16 / 9; } .wide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wide-media.portrait { aspect-ratio: 4 / 5; } @media (max-width: 720px) { .wide-media { aspect-ratio: 4 / 5; } }
.crumbs a:hover { text-decoration: underline; } dl { margin: 0; } dd { margin: 4px 0 0; } .kv { display: grid; gap: 4px; } .draft-flag { display: inline-block; padding: 4px 8px; border: 1px dashed var(--ink); justify-self: start; }
.post-body { font-size: 18px; line-height: 1.6; max-width: 68ch; } .post-body h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -.03em; margin: 1.8em 0 .6em; } .post-body h3 { font-size: 21px; margin: 1.4em 0 .5em; } .post-body p { margin: 0 0 1.1em; } .post-body ul { list-style: disc; padding-left: 1.2em; margin: 0 0 1.1em; } .post-body a { text-decoration: underline; } .post-inline { margin: 2em 0; } .pull { margin: 0 0 1.6em; padding-left: 16px; border-left: 2px solid var(--ink); font-size: clamp(22px, 2vw, 28px); line-height: 1.22; letter-spacing: -.025em; font-weight: 500; }
.author { display: flex; gap: 10px; align-items: center; } .author > span { display: grid; gap: 2px; } .author-face { width: 44px; height: 44px; object-fit: cover; filter: grayscale(1); } .author-face.mark { object-fit: contain; filter: brightness(0); padding: 8px 2px; border: 1px solid var(--rule); } .author b { font-weight: 500; }
/* legal keeps its own markup */
.page-hero { padding: clamp(30px, 5vw, 70px) var(--pad); border-bottom: 1px solid var(--rule); display: block; } .page-hero .wrap { display: grid; gap: 14px; } .page-hero .lead { margin: 0; } .sec.tight { padding: 0; } .legal-grid { display: grid; } .legal-toc { padding: var(--pad); border-bottom: 1px solid var(--rule); } .legal-toc ol { display: grid; gap: 8px; } .legal-toc a:hover { text-decoration: underline; } .legal-body { padding: var(--pad); max-width: 820px; } .legal-body section { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); } .legal-body section:last-child { border-bottom: 0; } .legal-body h2 { margin-bottom: 12px; } .legal-body h3 { font-size: 17px; margin: 16px 0 6px; } .legal-body ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; } .legal-body a { text-decoration: underline; } @media (min-width: 900px) { .legal-grid { grid-template-columns: 300px 1fr; } .legal-toc { border-bottom: 0; border-right: 1px solid var(--rule); } .legal-toc ol { position: sticky; top: calc(var(--hdr) + 20px); } }

/* always-there ways to reach us */
.actionbar { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 60; display: none; gap: 4px; padding: 4px; background: var(--paper); border: 1px solid var(--rule); transform: translateY(140%); transition: transform .6s var(--ease); } .actionbar.on { transform: none; } .actionbar a { min-height: 46px; display: grid; place-items: center; font-size: 15px; font-weight: 500; } .ab-main { flex: 1; background: var(--ink); color: var(--paper); } .ab-wa { padding: 0 16px; border: 1px solid var(--rule); } @media (max-width: 900px) { .actionbar { display: flex; } .ftr { padding-bottom: 72px; } }
.dock { position: fixed; right: 14px; bottom: 14px; z-index: 55; display: none; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; background: var(--ink); color: var(--paper); transform: translateY(170%); transition: transform .6s var(--ease); } .dock.on { transform: none; } .dock img { width: 44px; height: 44px; object-fit: cover; object-position: top; filter: grayscale(1); } .dock b { display: block; font-weight: 500; font-size: 15px; } .dock small { font-size: 9.5px; opacity: .7; } @media (min-width: 901px) { .dock { display: flex; } } body.rf-open .dock, body.rf-open .actionbar { visibility: hidden; }
.play-toast { position: fixed; left: 50%; top: calc(var(--hdr) + 10px); transform: translateX(-50%); z-index: 45; background: var(--ink); color: var(--paper); padding: 9px 13px; margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.motion-toggle { text-decoration: underline; text-underline-offset: 3px; }

/* readback: the page reads the visitor back */
body.has-world { --trace: 20px; scroll-padding-top: calc(var(--hdr) + 32px); } body.has-world main { padding-top: calc(var(--hdr) + var(--trace)); }
.trace { position: absolute; left: 0; right: 0; top: 100%; margin-top: 1px; height: var(--trace); background: var(--paper); border-bottom: 1px solid var(--rule); overflow: hidden; } .trace canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .trace i { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--ink); will-change: transform; } body.menu-open .trace, body.rb-off .trace { display: none; }
.heat { background-color: rgba(17,18,16,var(--h,0)); transition: background-color 1.4s linear; }
.rb-note { display: flex; justify-content: space-between; gap: 16px; align-items: center; } .rb-note a { text-decoration: underline; } .rb-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin-right: 8px; } .rb-stop { text-decoration: underline; text-underline-offset: 3px; flex: none; } .rb-stop:hover { opacity: .6; }
.scope { position: fixed; left: 14px; bottom: 14px; z-index: 40; width: 250px; background: #0C0D0C; color: #F5F4EF; border: 1px solid #0C0D0C; transition: transform .6s var(--ease), opacity .4s; display: none; flex-direction: column; } .scope.on { display: flex; } .scope.away { transform: translateY(120%); opacity: 0; } .scope-top, .scope-read { padding: 7px 10px; font-size: 10px; } .scope-top { border-bottom: 1px solid #3A3B38; } .scope-read { border-top: 1px solid #3A3B38; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .scope-slot { height: 150px; display: flex; } .scope-slot .world { flex: 1; min-height: 0; } @media (max-width: 1099px) { .scope { display: none !important; } }
#readback .rb-mapcell { background: #0C0D0C; position: relative; padding: 18px 0 30px; } .rb-map { display: block; width: 100%; height: clamp(150px, 19vw, 260px); } .rb-ticks { position: absolute; left: 0; right: 0; bottom: 8px; height: 14px; } .rb-ticks span { position: absolute; font: 500 9.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #A9AAA3; white-space: nowrap; padding-left: 5px; border-left: 1px solid #5a5b57; } .rb-open { max-width: 64ch; margin: 0; } button.q { background: none; border-width: 0 0 1px; cursor: pointer; } 
/* reveal */
.js .rv { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .js .rv { opacity: 1; transform: none; } .js .h1:not(.in) .w > span, .js .h2:not(.in) .w > span { transform: none; } }
html.calm .js .rv, html.calm.js .rv { transition-duration: .01ms; }
/* the Synapse showcase keeps its own block: give it the tokens it expects */
.cx { --w100: #fff; --w90: rgba(255,255,255,.9); --w70: rgba(255,255,255,.7); --w60: rgba(255,255,255,.6); --w28: rgba(255,255,255,.28); --w10: rgba(255,255,255,.14); --r: 0px; color: #fff; }
.ix-out[hidden] { display: none; }
@media (min-width: 900px) { .fives { grid-template-columns: repeat(5, 1fr); } .fives > .c { grid-column: auto !important; } .fives > .c:last-child { border-right: 0; } }
.lx-hero .between > p.lbl { margin: 0; } .lx-hero .between { min-height: 100%; }
.work > .c:nth-child(n) { border-bottom: 0; } @media (max-width: 899px) { .work > .c { border-bottom: 1px solid var(--rule); } }
.dark .btn { background: var(--ink); color: var(--paper); }
.dark .fld input, .dark .fld textarea { color: var(--ink); }
.stack > .h1, .stack > .h1.big { margin-bottom: 10px; }

/* cortex showcase (2026-11-06): self-contained under .cx. Takes no input; see assets/cortex.js */
.cx { background: #000; border: 1px solid var(--w10); border-radius: var(--r); overflow: hidden; margin-bottom: clamp(40px, 5vw, 70px); }
.cx-stage { position: relative; aspect-ratio: 16 / 8.4; overflow: hidden; contain: layout paint; pointer-events: none; user-select: none; -webkit-user-select: none; background: radial-gradient(ellipse at 50% 46%, #0d0d0d 0, #000 62%); }
.cx-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cx-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.js .cx-fallback { display: none; }
html.js .cx-failed .cx-fallback { display: block; }
.cx-ring { position: absolute; left: 50%; top: 50%; height: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.04); border-radius: 50%; }
.cx-corners i { position: absolute; width: 16px; height: 16px; border: 1px solid rgba(255,255,255,.3); }
.cx-corners i:nth-child(1) { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.cx-corners i:nth-child(2) { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.cx-corners i:nth-child(3) { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.cx-corners i:nth-child(4) { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.cx-hud { position: absolute; top: 26px; margin: 0; font: 400 10px/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--w60); }
.cx-hud b { font-weight: 500; color: var(--w100); }
.cx-tl { left: 30px; } .cx-tr { right: 30px; text-align: right; }
.cx-steps { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--w10); }
.cx-steps li { position: relative; display: grid; gap: 8px; align-content: start; padding: clamp(16px, 2vw, 24px); border-left: 1px solid var(--w10); border-top: 1px solid var(--w10); }
.cx-steps li:nth-child(odd) { border-left: 0; }
.cx-steps li:nth-child(-n+2) { border-top: 0; }
.cx-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--w100); transform: scaleX(0); transform-origin: 0 50%; }
.cx-on .cx-steps li > * { opacity: .45; transition: opacity .6s ease; }
.cx-on .cx-steps li.is-on > * { opacity: 1; }
.cx-on .cx-steps li.is-on::before { transform: scaleX(1); transition: transform 4.2s linear; }
.cx-still .cx-steps li > * { opacity: 1; transition: none; }
.cx-still .cx-steps li.is-on::before { transform: scaleX(0); transition: none; }
@media (min-width: 900px) {
  .cx-steps { grid-template-columns: repeat(4, 1fr); }
  .cx-steps li { border-top: 0; }
  .cx-steps li:nth-child(odd) { border-left: 1px solid var(--w10); }
  .cx-steps li:first-child { border-left: 0; }
}
@media (max-width: 720px) {
  .cx-stage { aspect-ratio: 1 / 1; }
  .cx-hud { top: 22px; font-size: 9px; letter-spacing: .04em; }
  .cx-tl { left: 24px; } .cx-tr { right: 24px; }
}
@media (max-width: 350px) { .cx-tr { display: none; } }
.rb-ticks, #readback .rb-mapcell { overflow: hidden; } .rb-note { flex-wrap: wrap; }