/* Orbit — the portfolio as a turning network. One dark, cinematic world by design: a sphere of projects floats
   behind the home page, glides aside and lights up each use case as you scroll. Reading pages are told in scenes:
   text on the left, its picture holding still on the right. No bold anywhere; one title style everywhere. */
:root {
  color-scheme: dark;
  --bg: #080b12; --bg-2: #0e131d; --glass: rgba(14, 19, 29, .62);
  --ink: #eef1f7; --ink-2: #a9b1c3; --ink-3: #6c7589; --line: rgba(255,255,255,.09); --dim: #56617c;
  --uc-play: #5aa9ff; --uc-vision: #ff7a59; --uc-robots: #3ddc97; --uc-data: #ffc857;
  --uc-home: #ff6fb1; --uc-tools: #6fe3ff; --uc-teach: #b49cff;
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(120% 80% at 70% 30%, #111a2c 0%, var(--bg) 60%) fixed, var(--bg); color: var(--ink); font: 400 18px/1.6 var(--body); }
a { color: inherit; }
img { max-width: 100%; display: block; }
b, strong, th, h1, h2, h3, h4, h5, h6, button { font-weight: inherit; }
:focus-visible { outline: 2px solid var(--uc-tools); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 1320px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.kicker { font: 400 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kicker a { text-decoration: none; }
.meta { font: 400 13px/1.4 var(--mono); color: var(--ink-3); }
.lede { font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-2); max-width: 34em; }
em { font-style: normal; color: var(--uc-tools); }

/* the one title: every page heading on the site */
.title { font: 500 clamp(44px, 7vw, 104px)/.95 var(--display); letter-spacing: -.04em; max-width: 14em; }
.sub { font: 500 clamp(26px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -.02em; margin-bottom: 14px; }

/* things rise into place as they arrive (only when JavaScript runs) */
.js [data-reveal], .js .beat .prose > *, .js .beat figure.inline { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
.js [data-reveal].in, .js .beat .prose > .in, .js .beat figure.inline.in { opacity: 1; transform: none; }

/* header */
.top { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: calc(14px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 14px max(24px, env(safe-area-inset-left, 0px));
  background: linear-gradient(var(--bg) 30%, rgba(8,11,18,0)); }
.brand { font: 500 17px/1 var(--display); text-decoration: none; letter-spacing: .01em; }
.top nav { display: flex; gap: 2px; flex-wrap: wrap; }
.top nav a { text-decoration: none; font-size: 15px; color: var(--ink-2); padding: 7px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.top nav a:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.top nav a[aria-current="page"] { color: var(--bg); background: var(--ink); }
.foot { position: relative; z-index: 2; padding: 80px max(24px, env(safe-area-inset-right, 0px)) calc(60px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 60px; }
.big-sign { font: 500 clamp(32px, 6vw, 72px)/1 var(--display); letter-spacing: -.03em; color: var(--ink-3); }
.foot a { text-decoration: none; color: var(--ink-2); margin-left: 18px; }

/* the sky: the sphere floats behind everything */
.sky { position: fixed; inset: 0; z-index: 0; }
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky.faint { opacity: .45; pointer-events: none; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sph-label { position: absolute; left: 0; top: 0; white-space: nowrap; font: 400 12.5px/1 var(--body); color: var(--ink-2); text-decoration: none;
  padding: 3px 0 3px 12px; margin: -9px 0 0 6px; transition: opacity .25s, color .2s; text-shadow: 0 1px 6px var(--bg); }
.sph-uc { font: 500 13px/1 var(--display); color: var(--c); text-transform: uppercase; letter-spacing: .08em; margin: -7px 0 0 -40px; padding: 0; }
.sph-label.hot { color: var(--ink); }
.hovercard { position: fixed; z-index: 15; width: 260px; pointer-events: none; background: var(--glass); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; }
.hovercard .hc-t { font: 500 16px/1.2 var(--display); color: var(--ink); }
.hovercard span { color: var(--ink-2); font-size: 14px; line-height: 1.4; }

/* home: sections float over the sky; only their content catches the pointer, so the sphere stays draggable */
.home main > section { position: relative; z-index: 2; pointer-events: none; }
.home main > section .wrap > * { pointer-events: auto; }
.hero { min-height: 100svh; display: grid; align-content: center; padding-block: 110px 60px; }
.hero .wrap { display: grid; gap: 26px; width: 100%; }
.hero-title { font-size: clamp(64px, 11vw, 176px); line-height: .86; max-width: 7em; }
.cue { font: 400 13px/1.4 var(--mono); color: var(--ink-3); }
.chapter { min-height: 115vh; padding-block: 18vh 10vh; }
.chapter .wrap > * { max-width: 600px; }
.num { font: 400 13px/1 var(--mono); color: var(--c); letter-spacing: .1em; }
.chapter h2 { font: 500 clamp(48px, 7.5vw, 112px)/.9 var(--display); letter-spacing: -.04em; color: var(--c); margin: 12px 0 14px; text-shadow: 0 0 60px color-mix(in srgb, var(--c) 35%, transparent); }
.blurb { font-size: 21px; color: var(--ink-2); margin-bottom: 32px; }
.rows { display: grid; gap: 12px; }
.row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 18px; align-items: center; text-decoration: none; padding: 12px; border-radius: 18px;
  background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s, background .3s, opacity .9s var(--ease) var(--d, 0ms); }
.js .row[data-reveal] { transition: transform .9s var(--ease) var(--d, 0ms), opacity .9s var(--ease) var(--d, 0ms), border-color .3s, background .3s; }
.row:hover { transform: translateX(6px); border-color: var(--c); background: rgba(20,27,42,.8); }
.row .thumb { width: 110px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.row .thumb img, .row .thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.row:hover .thumb img { transform: scale(1.06); }
.row .txt { display: grid; gap: 4px; min-width: 0; }
.row .q { font: 500 clamp(17px, 1.6vw, 21px)/1.2 var(--display); letter-spacing: -.01em; }
.row .nm { color: var(--c); }
.row .arrow { font-size: 22px; color: var(--ink-3); transition: color .3s, transform .3s; padding-right: 6px; }
.row:hover .arrow { color: var(--c); transform: translateX(4px); }
.glow { width: 100%; height: 100%; display: block; }
.glow .g-bg { fill: #0e1522; }
.glow .g-n { fill: var(--c); }
.glow .g-e { stroke: var(--c); stroke-opacity: .4; stroke-width: 1; }
.outro { min-height: 100vh; display: grid; align-content: end; padding-block: 50vh 40px; }
.outro h2 { font: 500 clamp(40px, 6vw, 88px)/.95 var(--display); letter-spacing: -.035em; margin-bottom: 18px; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 36px; max-width: 1100px; }
.duo a { text-decoration: none; background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 6px; transition: border-color .3s; }
.duo a:hover { border-color: var(--uc-tools); }
.duo .pt { font: 500 22px/1.1 var(--display); }

/* inner pages */
main { position: relative; z-index: 1; }
.pagehead { padding-top: 140px; display: grid; gap: 16px; }
.all { margin-top: 48px; } .all .row, .posts > a, .pubs > a { max-width: 980px; }
.posts { display: grid; margin-top: 40px; }
.posts a { display: grid; gap: 4px; text-decoration: none; padding: 22px 0; border-bottom: 1px solid var(--line); }
.posts .pt { font: 500 clamp(22px, 2.4vw, 30px)/1.15 var(--display); letter-spacing: -.02em; transition: color .2s, transform .4s var(--ease); }
.posts a:hover .pt { color: var(--uc-tools); transform: translateX(6px); }
.posts .sum { color: var(--ink-2); max-width: 46em; }
.pubs { display: grid; gap: 14px; margin-top: 40px; }
.pub { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; text-decoration: none; background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 14px; transition: border-color .3s; }
.pub:hover { border-color: var(--uc-data); }
.pub img { width: 170px; height: 110px; object-fit: cover; border-radius: 10px; opacity: .85; }
.pub > span { display: grid; gap: 4px; }
.pub .pt { font: 500 20px/1.2 var(--display); }
.pub .sum { color: var(--ink-2); font-size: 15px; }

/* project page */
.story-hero { position: relative; min-height: 86vh; display: grid; align-content: end; padding: 140px 0 64px; overflow: hidden; }
.story-hero .bg { position: absolute; inset: 0 0 0 30%; }
.story-hero .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; animation: settle 2.4s var(--ease) both; }
.story-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 25%, rgba(8,11,18,.55) 55%, rgba(8,11,18,.25)), linear-gradient(180deg, rgba(8,11,18,0) 60%, var(--bg)); }
@keyframes settle { from { transform: scale(1.08); opacity: 0; } to { transform: none; opacity: .5; } }
.story-hero .wrap { position: relative; z-index: 1; display: grid; gap: 20px; width: 100%; }
.story-hero .nm { color: var(--c); }
.coda { display: grid; gap: 18px; margin-top: 40px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { text-decoration: none; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); transition: border-color .2s, transform .2s; }
.btn:hover { border-color: var(--c, var(--uc-tools)); transform: translateY(-2px); }
.btn.primary { background: var(--c, var(--uc-tools)); color: var(--bg); border-color: var(--c, var(--uc-tools)); }
.madewith { font: 400 13px/1.6 var(--mono); color: var(--ink-3); max-width: 60em; }
.block { margin-top: 90px; display: grid; gap: 10px; }
.stack { display: flex; flex-wrap: wrap; gap: 8px; }
.stack span { font: 400 13px/1 var(--mono); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: var(--ink-2); }

/* scenes: text on the left scrolls past a picture that holds still on the right */
.scrolly { position: relative; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); grid-template-areas: "beats stage"; gap: clamp(32px, 5vw, 80px);
  max-width: 1320px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)); }
.stage { grid-area: stage; position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; }
.beats { grid-area: beats; padding: 12vh 0 18vh; }
.beat { min-height: 62vh; display: grid; align-content: center; padding-block: 6vh; transition: opacity .6s var(--ease); }
.beat:last-child { min-height: 60vh; }
.js .scrolly:not(.no-frames) .beat:not(.on) { opacity: .32; }
.frame { grid-area: 1 / 1; margin: 0; width: 100%; display: grid; gap: 12px; justify-items: center; opacity: 0; pointer-events: none;
  transform: translateY(calc(40px + var(--drift, 0) * -30px)) scale(.97); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.frame.on { opacity: 1; transform: translateY(calc(var(--drift, 0) * -30px)); pointer-events: auto; }
.frame img, .frame iframe { max-height: 74vh; width: auto; min-width: min(100%, 560px); object-fit: contain; max-width: 100%; border-radius: 16px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px var(--line); }
.frame p { margin: 0; }
.frame figcaption, .inline figcaption { font: 400 13px/1.5 var(--mono); color: var(--ink-3); max-width: 40em; text-align: left; justify-self: start; }
.frame figure { margin: 0; display: grid; gap: 12px; }
.inline { display: none; margin: 0 0 22px; }
.inline img { border-radius: 14px; width: 100%; height: auto; }
.inline p { margin: 0; }
.netcanvas { width: 100%; height: 70vh; opacity: .7; }
.scrolly.no-frames .stage { opacity: .8; }

/* reading */
.prose { font-size: 19px; line-height: 1.75; color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose strong, .prose b { color: var(--ink); }
.prose h2, .prose h3 { font: 500 clamp(24px, 2.4vw, 32px)/1.15 var(--display); color: var(--ink); margin-top: 1.6em; letter-spacing: -.02em; }
.prose h3 { font-size: clamp(20px, 2vw, 24px); }
.prose a { color: var(--c, var(--uc-tools)); }
.prose img { border-radius: 14px; height: auto; }
.prose figure { margin: 0; }
.prose figcaption { font: 400 13px/1.5 var(--mono); color: var(--ink-3); margin-top: 8px; }
.prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--uc-tools); }
.prose blockquote.pull { font: 500 26px/1.2 var(--display); color: var(--ink); border-left-color: var(--uc-vision); }
.prose .note { font: 400 14px/1.5 var(--mono); color: var(--ink-3); }
.prose code { font: 400 .82em var(--mono); background: var(--bg-2); padding: .1em .4em; border-radius: 6px; color: var(--ink); }
.prose pre { overflow-x: auto; background: var(--bg-2); border-radius: 12px; padding: 14px 16px; }
.prose pre code { padding: 0; background: none; }
.prose mark { background: color-mix(in srgb, var(--uc-data) 30%, transparent); color: var(--ink); }
.prose table { display: block; overflow-x: auto; }
.prose ul, .prose ol { padding-left: 1.2em; }
.widebox { max-width: 1180px; margin-block: 8vh; }
.widebox iframe.embed { width: 100%; border: 1px solid var(--line); border-radius: 18px; background: #fff; display: block; }
.widebox .video { position: relative; aspect-ratio: 16 / 9; }
.widebox .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 16px; }

/* posts */
.posthead { padding-top: 150px; padding-bottom: 4vh; display: grid; gap: 18px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font: 400 12px/1 var(--mono); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--ink-3); }

/* about */
.aboutpage .sky { z-index: 0; }
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); margin-top: 48px; align-items: start; }
.me { display: grid; gap: 26px; position: sticky; top: 90px; }
.portrait { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 4.4; max-width: 440px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px var(--line); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 20%; filter: saturate(.9); transition: transform 1.2s var(--ease); }
.portrait:hover img { transform: scale(1.03); }
.me .prose > * + * { margin-top: .9em; }
.journey { display: grid; gap: 18px; padding-top: 6px; }
.xp { list-style: none; margin: 0; padding: 0; display: grid; }
.xp > li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding-bottom: 30px; }
.xp > li::before { content: ""; position: absolute; left: 16px; top: 26px; bottom: -4px; width: 2px; background: linear-gradient(var(--c), transparent); opacity: .45; }
.xp > li:last-child::before { display: none; }
.xp .dot { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: radial-gradient(circle, var(--c) 0 7px, transparent 8px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 24px color-mix(in srgb, var(--c) 50%, transparent); transition: transform .3s var(--ease), box-shadow .3s; margin-top: 18px; }
.xp .dot:hover, .xp li.open .dot { transform: scale(1.15); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent), 0 0 30px var(--c); }
.xp-body { display: grid; gap: 4px; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; transition: border-color .3s; }
.xp li.open .xp-body, .xp-body:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.xp-title { all: unset; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font: 500 clamp(19px, 1.8vw, 23px)/1.25 var(--display); color: var(--ink); }
.xp-title:hover { color: var(--c); }
.xp-title:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; border-radius: 6px; }
.chev { font: 400 22px/1 var(--mono); color: var(--c); transition: transform .35s var(--ease); flex: none; }
.xp li.open .chev { transform: rotate(45deg); }
.xp-what { color: var(--ink-2); font-size: 16px; }
.xp-more { overflow: hidden; }
.xp-more ul { margin: 10px 0 2px; padding: 0; list-style: none; display: grid; gap: 10px; }
.xp-more li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 16px; line-height: 1.55; animation: drop .5s var(--ease) both; }
.xp-more li:nth-child(2) { animation-delay: .05s; } .xp-more li:nth-child(3) { animation-delay: .1s; } .xp-more li:nth-child(4) { animation-delay: .15s; } .xp-more li:nth-child(5) { animation-delay: .2s; }
.xp-more li::before { content: ""; position: absolute; left: 2px; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .scrolly { grid-template-columns: minmax(0, 1fr); grid-template-areas: "beats"; }
  .stage { display: none; }
  .scrolly.no-frames .stage { display: none; }
  .inline { display: grid; gap: 8px; }
  .beat, .beat:last-child { min-height: 0; padding-block: 4vh; }
  .js .scrolly .beat:not(.on) { opacity: 1; }
  .beats { padding: 4vh 0 8vh; }
  .story-hero .bg { inset: 0; }
  .story-hero::after { background: linear-gradient(180deg, rgba(8,11,18,.35) 0%, rgba(8,11,18,.7) 55%, var(--bg) 100%); }
}
@media (max-width: 860px) {
  body { font-size: 17px; }
  .hero { align-content: end; padding-top: 58vh; }
  .hero-title { font-size: clamp(56px, 17vw, 100px); }
  .chapter { min-height: auto; padding-block: 44vh 8vh; }
  .chapter .wrap { background: linear-gradient(rgba(8,11,18,0), var(--bg) 120px); padding-top: 40px; }
  .row { grid-template-columns: 84px minmax(0, 1fr); } .row .thumb { width: 84px; } .row .arrow { display: none; }
  .duo, .about { grid-template-columns: minmax(0, 1fr); }
  .me { position: static; }
  .portrait { max-width: 320px; }
  .outro { padding-top: 40vh; }
  .outro .wrap { background: linear-gradient(rgba(8,11,18,0), var(--bg) 120px); padding-top: 40px; }
  .top nav a { padding: 6px 9px; font-size: 14px; }
  .pub { grid-template-columns: 100px minmax(0, 1fr); } .pub img { width: 100px; height: 70px; }
  .prose { font-size: 17.5px; }
  .sph-p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sg-session .pt, .sg-card, .sg-toggle, .row, .row .arrow, .frame, .beat, .story-hero .bg img, .xp-more li { transition: none; animation: none; }
}

[hidden] { display: none !important; }

/* comments (giscus) */
.comments { max-width: 820px; margin-top: 90px; display: grid; gap: 6px; }
.comments .meta { margin-bottom: 14px; }
.comments .giscus, .comments iframe { width: 100%; }

/* study group */
.sg-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sg-nav a { text-decoration: none; font: 400 13px/1 var(--mono); letter-spacing: .04em; color: var(--ink-2); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); transition: border-color .2s, color .2s; }
.sg-nav a:hover { color: var(--ink); border-color: var(--uc-tools); }
.sg-nav a[aria-current="page"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.sg-block { margin-top: 72px; display: grid; gap: 14px; }
.sg-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sg-join { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.sg-card { background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 10px; align-content: start; transition: border-color .3s; }
.sg-card:hover { border-color: color-mix(in srgb, var(--uc-teach) 55%, transparent); }
.sg-card .sub { margin-bottom: 0; }
.sg-card .sub a { text-decoration: none; }
.sg-card .sub a:hover { color: var(--uc-tools); }
.sg-card a { color: var(--uc-tools); }
.sg-card p:not(.kicker):not(.meta) { color: var(--ink-2); font-size: 17px; }
.sg-note { color: var(--ink-2); }
.sg-contact { color: var(--ink-2); max-width: 46em; margin-top: 6px; }
.sg-counters, .sg-format { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; }
.sg-format { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; }
.sg-counters > div, .sg-format > div { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 2px; align-content: start; }
.sg-counters dt, .sg-format dt { font: 400 13px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sg-counters dd { margin: 0; font: 500 clamp(44px, 6vw, 80px)/1 var(--display); letter-spacing: -.04em; color: var(--uc-teach); }
.sg-format dd { margin: 0; font: 500 clamp(22px, 2.2vw, 30px)/1.15 var(--display); letter-spacing: -.02em; }
.sg-format dd .meta { display: block; margin-top: 4px; }
.sg-topics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sg-topics a, .sg-toggle { display: inline-block; text-decoration: none; font: 400 14px/1 var(--body); color: var(--ink-2); border: 1px solid color-mix(in srgb, var(--c, var(--uc-tools)) 45%, transparent); background: color-mix(in srgb, var(--c, var(--uc-tools)) 9%, transparent); border-radius: 999px; padding: 10px 14px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.sg-topics a:hover, .sg-toggle:hover { color: var(--ink); background: color-mix(in srgb, var(--c, var(--uc-tools)) 22%, transparent); }
.sg-toggle[aria-pressed="true"] { color: var(--bg); background: var(--c, var(--ink)); border-color: var(--c, var(--ink)); }
.sg-prose { max-width: 760px; }
.sg-prose table { display: table; width: 100%; border-collapse: collapse; font-size: 16px; }
.sg-prose th, .sg-prose td { text-align: left; border-bottom: 1px solid var(--line); padding: 10px 12px 10px 0; vertical-align: top; }
.sg-prose th { font: 400 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.sg-list { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--ink-2); font-size: 17px; }
.sg-chip { display: inline-block; font: 400 12px/1 var(--mono); letter-spacing: .04em; text-transform: lowercase; border-radius: 999px; padding: 5px 9px; border: 1px solid var(--line); color: var(--ink-2); vertical-align: 1px; }
.sg-presented, .sg-held { color: var(--uc-robots); border-color: color-mix(in srgb, var(--uc-robots) 50%, transparent); }
.sg-scheduled, .sg-planned { color: var(--uc-data); border-color: color-mix(in srgb, var(--uc-data) 50%, transparent); }
.sg-shortlisted { color: var(--uc-tools); border-color: color-mix(in srgb, var(--uc-tools) 50%, transparent); }
.sg-dropped, .sg-cancelled { color: var(--ink-3); }
.sg-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags.sg-tags span { color: var(--ink-2); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.sg-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sg-papertitle { font-size: clamp(34px, 5vw, 72px); line-height: 1; }

.posts .sg-session { grid-template-columns: 170px minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; }
.sg-session .sum { grid-column: 2; grid-row: 2; }
.sg-session .sg-chip { grid-column: 3; grid-row: 1; justify-self: end; }
.sg-session .meta { grid-row: 1; }
.sg-session .pt { grid-column: 2; grid-row: 1; }
.sg-session.sg-cancelled .pt { text-decoration: line-through; color: var(--ink-3); }

.sg-tablewrap { overflow-x: auto; }
.sg-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.sg-table th { text-align: left; font: 400 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 0 16px 10px 0; border-bottom: 1px solid var(--line); }
.sg-table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.sg-table a { color: var(--ink); text-underline-offset: 3px; }
.sg-table a:hover { color: var(--uc-tools); }
.sg-prevnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 72px; }
.sg-prevnext a { text-decoration: none; display: grid; gap: 4px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); transition: border-color .3s; }
.sg-prevnext a:hover { border-color: var(--uc-tools); }
.sg-prevnext a[rel="next"] { text-align: right; grid-column: 2; }
.sg-prevnext .pt { font: 500 20px/1.2 var(--display); }

.sg-filters { display: grid; gap: 16px; background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.sg-fgroup { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sg-search { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.sg-search input { flex: 1 1 260px; max-width: 480px; font: 400 16px/1 var(--body); color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 12px 16px; }
.sg-search input:focus-visible { outline-offset: 2px; }
.sg-count { margin-top: 6px; }
.sg-papers { list-style: none; margin: 0; padding: 0; display: grid; }
.sg-paper { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px 28px; padding: 24px 0; border-bottom: 1px solid var(--line); max-width: 1100px; }
.sg-paper[hidden] { display: none; }
.sg-paper .pt { font: 500 clamp(21px, 2.2vw, 28px)/1.15 var(--display); letter-spacing: -.02em; margin: 6px 0 4px; }
.sg-paper .pt a { text-decoration: none; transition: color .2s; }
.sg-paper .pt a:hover { color: var(--uc-tools); }
.sg-paper .sum { color: var(--ink-3); font-size: 15px; }
.sg-main { display: grid; gap: 6px; align-content: start; min-width: 0; }
.sg-why { color: var(--ink-2); font-size: 16px; max-width: 46em; }
.sg-side { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ink-2); align-content: start; }
.sg-side a { color: var(--uc-tools); text-underline-offset: 3px; }
.sg-score { font: 500 36px/1 var(--display); letter-spacing: -.03em; color: var(--uc-teach); }
.sg-snip { margin-top: 6px; }
.sg-snip summary { cursor: pointer; font: 400 13px/1.4 var(--mono); color: var(--uc-tools); }
.sg-snip pre { overflow-x: auto; background: var(--bg-2); border-radius: 12px; padding: 12px 14px; font: 400 12.5px/1.5 var(--mono); color: var(--ink-2); margin: 10px 0; }
.sg-copy { cursor: pointer; font: 400 13px/1 var(--mono); color: var(--ink); }
.sg-facets { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sg-chip.sg-kind { color: var(--ink-2); }
.sg-rel-core { color: var(--uc-robots); border-color: color-mix(in srgb, var(--uc-robots) 50%, transparent); }
.sg-rel-adjacent { color: var(--uc-data); border-color: color-mix(in srgb, var(--uc-data) 50%, transparent); }
.sg-level { color: var(--ink-3); }
.sg-disclosure > summary { cursor: pointer; font: 400 13px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); list-style: none; padding: 4px 0; }
.sg-disclosure > summary::-webkit-details-marker { display: none; }
.sg-disclosure > summary::before { content: "+ "; color: var(--uc-tools); }
.sg-disclosure[open] > summary::before { content: "− "; }
.sg-panel { display: grid; gap: 14px; margin-top: 14px; }
.sg-toprow { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.sg-select { font: 400 15px/1 var(--body); color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 11px 14px; }
.sg-n { font: 400 12px/1 var(--mono); color: var(--ink-3); margin-left: 4px; }
.sg-toggle[aria-pressed="true"] .sg-n { color: var(--bg); }
.sg-toggle.empty { opacity: .4; }
.sg-mode, .sg-clear { font: 400 13px/1 var(--mono); color: var(--uc-tools); background: none; border: 1px dashed var(--line); border-radius: 999px; padding: 9px 12px; cursor: pointer; }
.sg-clear { margin-left: 4px; border-style: solid; }
.sg-active { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sg-active:empty { display: none; }
.sg-x { cursor: pointer; background: none; font-family: var(--mono); }
.sg-x:hover { border-color: var(--uc-tools); color: var(--ink); }
.sg-fgroup > .meta { min-width: 72px; }
@media (max-width: 860px) {
  .sg-grid, .sg-join { grid-template-columns: minmax(0, 1fr); }
  .sg-counters, .sg-format { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-paper { grid-template-columns: minmax(0, 1fr); }
  .sg-side { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .sg-session { grid-template-columns: minmax(0, 1fr); }
  .sg-prevnext { grid-template-columns: minmax(0, 1fr); }
  .posts .sg-session { grid-template-columns: minmax(0, 1fr) auto; }
  .sg-session .pt, .sg-session .sum { grid-column: 1; }
  .sg-session .meta { grid-row: 3; }
  .sg-session .sg-chip { grid-column: 2; }
  .sg-prevnext a[rel="next"] { grid-column: 1; text-align: left; }
  .sg-filters { padding: 14px; }
}

/* the map of papers */
.sg-map { display: grid; gap: 12px; }
.sg-mapbar { gap: 12px; }
.sg-mapstage { position: relative; height: clamp(440px, 72vh, 760px); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: radial-gradient(90% 90% at 50% 40%, rgba(90,169,255,.05), transparent 70%), var(--bg-2); }
.sg-mapstage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.sg-mapstage canvas:active { cursor: grabbing; }
.sg-mapctl { position: absolute; right: 12px; bottom: 12px; display: grid; gap: 6px; }
.sg-mapctl button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); color: var(--ink); font: 400 20px/1 var(--mono); cursor: pointer; }
.sg-mapctl button:hover { border-color: var(--uc-tools); }
.sg-mapcard { position: absolute; z-index: 2; width: min(300px, calc(100% - 16px)); display: grid; gap: 6px; background: rgba(8,11,18,.92); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 14px; padding: 14px; pointer-events: none; }
.sg-mapcard.pinned { pointer-events: auto; border-color: color-mix(in srgb, var(--uc-tools) 55%, transparent); }
.sg-mapcard[hidden] { display: none; }
.sg-mapcard .sg-cardt { font: 500 17px/1.25 var(--display); margin: 0; }
.sg-mapcard p { margin: 0; }
.sg-mapcard .btn { justify-self: start; }
.sg-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; color: var(--ink-2); font-size: 14px; }
.sg-lgrow { display: flex; flex-wrap: wrap; gap: 6px 16px; flex-basis: 100%; }
.sg-lgi { display: inline-flex; gap: 7px; align-items: center; }
.sg-lgd { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--ink-2)); }
.sg-lgd.presented { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.sg-lgd.scheduled { background: color-mix(in srgb, var(--ink-2) 25%, transparent); border: 2px solid var(--ink-2); }
.sg-lgd.shortlisted { opacity: .7; }
.sg-lgd.radar { background: none; border: 1.5px solid var(--ink-2); width: 9px; height: 9px; }
.sg-maplist h3 { margin: 22px 0 8px; }
.sg-maplist li[hidden] { display: none; }
.sg-live.is-list .sg-mapstage, .sg-live.is-list .sg-legend { display: none; }
.sg-maplist.is-list { display: block; }
html.js .sg-maplist:not(.is-list) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sg-related { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sg-related li { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.sg-related a { color: var(--ink); text-underline-offset: 3px; font: 500 19px/1.25 var(--display); }
.sg-related a:hover { color: var(--uc-tools); }
.sg-abstract { color: var(--ink-2); max-width: 46em; font-size: 17px; margin-top: 10px; }
@media (max-width: 860px) { .sg-mapstage { height: clamp(400px, 68vh, 640px); } .sg-mapctl button { width: 48px; height: 48px; } }
.sg-fdet { display: grid; gap: 12px; }
.sg-fdet > summary { margin-bottom: 8px; }
.sg-fdet:not([open]) > .sg-fgroup { display: none; }
.sg-mapstage { scroll-margin-top: 120px; }

/* contribute forms */
.sg-form { display: grid; gap: 18px; max-width: 760px; margin-top: 8px; }
.sg-form[hidden] { display: none; }
.sg-field { display: grid; gap: 6px; }
.sg-field[hidden] { display: none; }
.sg-field label, .sg-lab { font: 400 15px/1.4 var(--body); color: var(--ink); }
.sg-field .meta { margin: 0; }
.sg-field input[type="text"], .sg-field input[type="url"], .sg-field textarea, .sg-field select { width: 100%; font: 400 16px/1.4 var(--body); color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.sg-field textarea { resize: vertical; }
.sg-field [aria-invalid="true"] { border-color: var(--uc-vision); }
.sg-err { margin: 0; color: var(--uc-vision); font-size: 14px; }
.sg-err[hidden] { display: none; }
.sg-req { font: 400 11px/1 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-left: 6px; }
.sg-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sg-check { display: inline-flex; gap: 10px; align-items: flex-start; font: 400 15px/1.5 var(--body); color: var(--ink-2); cursor: pointer; margin-right: 18px; }
.sg-check input { margin-top: 5px; width: 18px; height: 18px; }
.sg-notice { max-width: 760px; border-color: color-mix(in srgb, var(--uc-data) 45%, transparent); }
.sg-em { color: var(--uc-data); }
.sg-previewbox { display: grid; gap: 8px; }
.sg-preview { margin: 0; max-height: 280px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--bg-2); border: 1px dashed var(--line); border-radius: 12px; padding: 14px; font: 400 13px/1.55 var(--mono); color: var(--ink-2); }
.sg-status { min-height: 1.4em; color: var(--uc-data); }
button.btn { cursor: pointer; font-family: var(--body); }
.sg-curator { max-width: 760px; margin-top: 24px; }
@media (max-width: 860px) { .sg-row { grid-template-columns: minmax(0, 1fr); } }
#sgc { scroll-margin-top: 110px; }

/* === work cards (projects page) === */
.work { margin-top: 40px; }
.work .showing { margin: 0 0 20px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cell { min-width: 0; }
.card { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; border-radius: 20px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line); outline-offset: 4px;
  transition: transform .45s var(--ease), filter .45s var(--ease), opacity .45s var(--ease), border-color .3s, box-shadow .45s var(--ease); }
.card .cimg { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0e1522; }
.card .cimg img, .card .cimg svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.card .cbody { display: grid; gap: 8px; padding: 16px 18px 20px; align-content: start; min-width: 0; }
.card .cmeta { display: flex; align-items: center; gap: 10px; font: 400 12.5px/1 var(--mono); color: var(--ink-3); min-width: 0; }
.card .nm { line-height: 1.4; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card .yr { margin-left: auto; }
.card .dots { display: inline-flex; gap: 5px; }
.card .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: block; }
.card .ctitle { font: 500 clamp(18px, 1.5vw, 21px)/1.2 var(--display); letter-spacing: -.01em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.card .cdesc { color: var(--ink-2); font-size: 15px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the card you point at (or tab to) comes forward; the rest of the grid recedes */
.card:hover, .card:focus-visible { z-index: 2; transform: translateY(-8px) scale(1.035); border-color: var(--c);
  box-shadow: 0 0 0 1px var(--c), 0 0 38px -6px color-mix(in srgb, var(--c) 55%, transparent), 0 30px 60px -28px rgba(0,0,0,.9); }
.card:hover .cimg img, .card:hover .cimg svg, .card:focus-visible .cimg img, .card:focus-visible .cimg svg { transform: scale(1.08); }
.cards:has(.card:focus-visible) .card:not(:focus-visible) { filter: blur(1.5px); opacity: .7; transform: scale(.985); }
@media (hover: hover) {
  .cards:has(.card:hover) .card:not(:hover) { filter: blur(1.5px); opacity: .7; transform: scale(.985); }
  .cards:has(.card:hover) .card, .cards:has(.card:focus-visible) .card { will-change: transform, filter, opacity; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .card .cimg img, .card .cimg svg { transition: border-color .2s, box-shadow .2s; }
  .card:hover, .card:focus-visible { transform: none; box-shadow: 0 0 0 1px var(--c); }
  .card:hover .cimg img, .card:hover .cimg svg, .card:focus-visible .cimg img, .card:focus-visible .cimg svg { transform: none; }
  .cards:has(.card:hover) .card:not(:hover), .cards:has(.card:focus-visible) .card:not(:focus-visible) { filter: none; opacity: 1; transform: none; }
}
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; gap: 18px; }
  /* on phones every work picture stays a landscape frame, never a tall one */
  .card .cimg { aspect-ratio: 16 / 10; height: auto; max-height: none; }
  .card .cimg img, .card .cimg svg { aspect-ratio: 16 / 10; object-fit: cover; } }
/* === end === */

/* === radar item right column + score tooltip === */
.sg-signals .sg-score { align-self: flex-start; background: none; border: 0; padding: 0; margin: 0; cursor: help; font: 500 36px/1 var(--display); letter-spacing: -.03em; color: var(--uc-teach); text-decoration: underline dotted color-mix(in srgb, var(--uc-teach) 55%, transparent); text-underline-offset: 8px; text-decoration-thickness: 1.5px; }
.sg-signals .sg-score:focus-visible { outline: 2px solid var(--uc-teach); outline-offset: 6px; border-radius: 6px; }
.sg-side a.sg-propose { align-self: flex-start; margin-top: 6px; text-decoration: none; font: 400 13px/1 var(--mono); color: var(--uc-teach); padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--uc-teach) 55%, transparent); border-radius: 999px; transition: background .2s, border-color .2s; }
.sg-side a.sg-propose:hover, .sg-side a.sg-propose:focus-visible { background: color-mix(in srgb, var(--uc-teach) 16%, transparent); border-color: var(--uc-teach); }
.sg-paper .sg-snip { margin-top: 10px; }
.sg-paper .sg-snip summary { font-size: 12.5px; color: var(--ink-3); }
.sg-paper .sg-snip summary:hover { color: var(--uc-tools); }
.sg-scoretip { position: fixed; z-index: 20; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.sg-scoretip[hidden] { display: none; }
.sg-scoretip p { margin: 0; }
.sg-scoretip .hc-t { font: 500 17px/1.2 var(--display); color: var(--ink); }
.sg-scoretip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sg-scoretip .w { color: var(--ink); }
.sg-scoretip .w em { font: 400 12.5px/1 var(--mono); font-style: normal; color: var(--uc-teach); margin: 0 2px; }
.sg-scoretip .fn { color: var(--ink-3); font-size: 13px; }
/* === end === */

/* === all work: progressive reveal === */
.work-more { display: grid; justify-items: center; gap: 10px; margin: 48px 0 8px; text-align: center; }
.work-more .btn { font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.work-more .btn[hidden] { display: none; }
.work-sentinel { height: 1px; }
.cell[hidden] { display: none; }
/* === end === */

/* === home zig-zag (desktop): network on one half, the chapter text on the other, alternating === */
@media (min-width: 861px) {
  .chapter { min-height: 112vh; padding-block: 9vh; display: grid; align-content: center; overflow-x: clip; }
  .chapter .wrap { will-change: opacity, transform; width: 100%; }
  .chapter .wrap > * { max-width: 540px; }
  .chapter.tr .wrap > * { margin-left: auto; margin-right: 0; }
  .chapter.tl .wrap > * { margin-left: 0; margin-right: auto; }
  .chapter.tr .wrap { padding-right: max(56px, 4vw); }
  .chapter.tl .wrap { padding-left: max(56px, 4vw); }
  .chapter h2 { font-size: clamp(44px, 5.4vw, 84px); text-shadow: 0 0 40px var(--bg), 0 0 60px color-mix(in srgb, var(--c) 30%, transparent); }
  .chapter .blurb { font-size: 19px; margin-bottom: 22px; text-shadow: 0 0 14px var(--bg), 0 0 28px var(--bg); }
  .chapter .rows { gap: 9px; }
  .chapter .row { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; padding: 9px; background: rgba(14, 19, 29, .78); }
  .chapter .row .thumb { width: 84px; }
  .chapter.off .wrap > * { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .chapter .wrap { will-change: auto; } }
/* === end home zig-zag === */

/* === bookshelf cardwall === */
/* default: a tidy static grid of book cards grouped by shelf (no JavaScript, phones, reduced motion) */
.cw, .cw-panel { --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; }
.cw { position: relative; }
.cw-title-big, .cw-name, .cw-p-title { font-family: var(--serif); font-weight: 400; }
.cw-cue { display: none; }
.cw-intro { color: var(--ink-2); max-width: 34em; }
.cw-intro3 { display: none; }
.cw-shelf { max-width: 1320px; margin: 0 auto 54px; padding: 0 max(24px, env(safe-area-inset-left, 0px)); }
.cw-label { margin: 0 0 18px; font-weight: 400; }
.cw-count { color: var(--ink-2); }
.cw-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); }
@media (max-width: 1100px) { .cw-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cw-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 540px) { .cw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; } .cw-shelf { margin-bottom: 40px; } }
.cw-item { container-type: inline-size; aspect-ratio: 2 / 3; position: relative; }
.cw-card { appearance: none; display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: var(--fg); text-align: left;
  cursor: pointer; border-radius: 7cqw; position: relative; transition: transform .4s var(--ease); -webkit-tap-highlight-color: transparent; }
.cw-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 15cqw 10cqw 10cqw 16cqw; overflow: hidden; border-radius: 3cqw 7cqw 7cqw 3cqw;
  background: linear-gradient(100deg, rgba(255,255,255,.13), rgba(255,255,255,0) 34%, rgba(0,0,0,.18)), var(--bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 0 rgba(0,0,0,.14),
    1.2cqw .6cqw 0 #efe8d6, 2.4cqw 1.2cqw 0 #cdc4ad, 3.4cqw 2cqw 0 #a39a85, 0 5cqw 6cqw -2cqw rgba(0,0,0,.7), 0 14cqw 18cqw -8cqw rgba(0,0,0,.65);
  transition: box-shadow .35s var(--ease); }
.cw-face::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9cqw; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.22) 22%, rgba(0,0,0,.14) 46%, rgba(0,0,0,0) 100%); }
.cw-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(120% 70% at 30% 0%, rgba(255,255,255,.16), transparent 55%); }
.cw-no { position: absolute; right: 8cqw; top: 8cqw; font: 400 6.4cqw/1 var(--mono); letter-spacing: .06em; opacity: .75; }
.cw-name { margin-top: 3cqw; font-size: var(--ts, 14cqw); line-height: .98; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.cw-by { margin-top: auto; font: 400 6.2cqw/1.35 var(--mono); letter-spacing: .07em; text-transform: uppercase; opacity: .9; overflow-wrap: anywhere; }
.cw-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-pill { position: absolute; left: 16cqw; top: 7.5cqw; font: 400 5.4cqw/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 1.8cqw 3.2cqw 1.8cqw 6cqw;
  border-radius: 99px; background: color-mix(in srgb, var(--fg) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 40%, transparent); }
.cw-pill::before { content: ""; position: absolute; left: 2.4cqw; top: 50%; width: 1.8cqw; height: 1.8cqw; margin-top: -.9cqw; border-radius: 50%; background: var(--fg); }
.cw-card.is-reading .cw-face { box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 0 rgba(0,0,0,.14), 0 0 0 .8cqw color-mix(in srgb, var(--bg) 55%, #ffd98a 45%),
    0 0 10cqw 1cqw color-mix(in srgb, var(--bg) 40%, #ffd98a 25%), 1.2cqw .6cqw 0 #efe8d6, 2.4cqw 1.2cqw 0 #cdc4ad, 3.4cqw 2cqw 0 #a39a85, 0 14cqw 18cqw -8cqw rgba(0,0,0,.65); }
.cw-card:focus-visible { outline: 2px solid var(--uc-tools); outline-offset: 5px; }
@media (hover: hover) {
  .cw:not(.cw-3d) .cw-card:hover, .cw:not(.cw-3d) .cw-card:focus-visible { transform: translateY(-8px) rotate(-.6deg); }
  .cw:not(.cw-3d) .cw-card:hover .cw-face { box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 1.2cqw .6cqw 0 #efe8d6, 2.4cqw 1.2cqw 0 #cdc4ad, 3.4cqw 2cqw 0 #a39a85, 0 0 12cqw 2cqw color-mix(in srgb, var(--bg) 75%, #fff 10%), 0 14cqw 18cqw -8cqw rgba(0,0,0,.65); }
  .cw:not(.cw-3d) .cw-list:has(.cw-card:hover) .cw-item:not(:hover) { opacity: .62; filter: blur(.8px); transition: opacity .3s, filter .3s; }
}

/* the detail panel: glass, anchored beside the card (desktop) or a bottom sheet (phones) */
.cw-panel { position: fixed; z-index: 40; width: min(470px, calc(100vw - 32px)); display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; padding: 22px 22px 24px;
  background: rgba(14, 19, 29, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); animation: cw-pop .28s var(--ease) both; }
@keyframes cw-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.cw-p-cover { container-type: inline-size; aspect-ratio: 2 / 3; position: relative; color: var(--fg); align-self: start; }
.cw-p-cover .cw-face { position: absolute; }
.cw-p-txt { display: grid; gap: 8px; align-content: start; min-width: 0; }
.cw-p-title { font-size: clamp(30px, 3vw, 40px); line-height: .98; letter-spacing: -.01em; outline: none; text-wrap: balance; }
.cw-p-author { color: var(--ink-2); font-size: 16px; }
.cw-p-chip { margin: 2px 0; }
.cw-p-chip span { display: inline-block; font: 400 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.cw-p-chip span[data-s="reading"] { color: #ffd98a; border-color: rgba(255, 217, 138, .45); }
.cw-p-note { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.cw-p-note:empty, .cw-p-shelf:empty { display: none; }
.cw-p-link { justify-self: start; font-size: 15px; margin-top: 6px; }
.cw-x { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink-2); font: 400 22px/1 var(--body); cursor: pointer; display: grid; place-items: center; }
.cw-x:hover { color: var(--ink); border-color: rgba(255,255,255,.3); }
.cw-end { padding-top: 60px; display: grid; gap: 14px; }
.cw-end .meta a { text-decoration: none; }
.cw-end .meta a:hover { color: var(--ink); }
@media (max-width: 699px) {
  .cw-panel { left: 0; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 82vh; overflow: auto; border-radius: 20px 20px 0 0; border-bottom: 0; grid-template-columns: 104px minmax(0, 1fr); gap: 16px;
    padding: 20px 18px calc(22px + env(safe-area-inset-bottom, 0px)); animation-name: cw-sheet; }
  .cw-p-title { font-size: 30px; }
}
@keyframes cw-sheet { from { transform: translateY(40px); opacity: 0; } }

/* the 3D hang (JavaScript adds .cw-3d on wide screens without reduced motion): one receding line of books in a dark room */
.cw-edge, .cw-wl { display: none; }
.cw-3d { height: 640vh; }
.cw-3d .cw-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; perspective: 1500px; perspective-origin: 50% 50%; user-select: none; -webkit-user-select: none;
  background: radial-gradient(70% 60% at 62% 34%, rgba(30, 36, 52, .38), rgba(8, 11, 18, 0) 70%), radial-gradient(60% 50% at 18% 96%, rgba(40, 34, 28, .3), transparent 70%), #080b12; }
.cw-3d .cw-floor { position: absolute; left: -10%; right: -10%; bottom: 0; height: 52%; pointer-events: none; opacity: .55;
  background: radial-gradient(50% 90% at 30% 100%, color-mix(in srgb, var(--floor, #c9a05a) 20%, transparent), transparent 72%); transition: background .6s; }
.cw-3d .cw-hero { position: absolute; inset: 0; z-index: 4; margin: 0; max-width: none; padding: 0 24px 6vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; pointer-events: none; will-change: transform, opacity; }
.cw-3d .cw-hero a { pointer-events: auto; }
.cw-3d .cw-hero.gone { visibility: hidden; }
.cw-3d .cw-title-big { font-size: clamp(110px, 15vw, 270px); line-height: .88; letter-spacing: -.03em; max-width: none; margin: 4px 0; white-space: nowrap; color: #f3eee2; text-shadow: 0 6px 60px rgba(3, 5, 9, .7); }
.cw-3d .cw-w { display: inline-block; }
.cw-3d .cw-l { display: inline-block; animation: cw-letter 1.1s var(--ease) calc(var(--k) * 80ms + 250ms) both; }
@keyframes cw-letter { from { opacity: 0; filter: blur(18px); transform: translateY(.22em) scale(1.08); } }
.cw-3d .cw-hero .lede { font-size: clamp(16px, 1.4vw, 20px); font-style: italic; font-family: var(--serif); color: var(--ink-2); }
.cw-3d .cw-intro, .cw-3d .cw-hero .tags { display: none; }
.cw-3d + .cw-panel + .cw-end .cw-intro3 { display: block; }
.cw-3d .cw-cue { display: block; position: absolute; left: 0; right: 0; bottom: 4vh; text-transform: uppercase; letter-spacing: .2em; animation: cw-cue 2.4s ease-in-out infinite; }
.cw-3d .cw-cue::after { content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--ink-3), transparent); }
@keyframes cw-cue { 50% { opacity: .35; } }
.cw-3d .cw-world { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; pointer-events: none; }
.cw-3d .cw-shelf, .cw-3d .cw-list { position: absolute; inset: 0; margin: 0; padding: 0; max-width: none; display: block; transform-style: preserve-3d; pointer-events: none; }
.cw-3d .cw-label { display: none; }
.cw-3d .cw-item { position: absolute; left: 50%; top: 50%; width: var(--cw); height: calc(var(--cw) * 1.5); margin: calc(var(--cw) * -.75) 0 0 calc(var(--cw) * -.5); aspect-ratio: auto;
  transform-style: preserve-3d; pointer-events: auto; will-change: transform; }
.cw-3d .cw-card { transition: none; transform-style: preserve-3d; border-radius: 1cqw; }
.cw-3d .cw-card:focus-visible { outline-offset: 3px; }
/* each book is a box: the cover in front, a bone page block along the top and the fore-edge; --dk sinks it into the dark */
.cw-3d .cw-face { border-radius: .6cqw 1.4cqw 1.4cqw .6cqw; opacity: var(--o, 1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset -1px 0 0 rgba(255,255,255,.18), 0 0 0 .3cqw rgba(0,0,0,.25); }
.cw-3d .cw-face::after { background: linear-gradient(rgba(6, 8, 13, var(--dk, 0)), rgba(6, 8, 13, var(--dk, 0))), radial-gradient(120% 70% at 30% 0%, rgba(255,255,255,.16), transparent 55%); }
.cw-3d .cw-edge { display: block; position: absolute; pointer-events: none; opacity: var(--o, 1); }
.cw-3d .cw-edge-t { left: 1.2cqw; right: 1.6cqw; top: 0; height: 15cqw; transform-origin: 50% 0; transform: rotateX(-90deg);
  background: linear-gradient(rgba(6, 8, 13, var(--dk, 0)), rgba(6, 8, 13, var(--dk, 0))), linear-gradient(var(--bg) 0 1.1cqw, transparent 1.1cqw calc(100% - 1.1cqw), var(--bg) 0),
    repeating-linear-gradient(180deg, rgba(120, 104, 80, .22) 0 .35cqw, transparent .35cqw 1.1cqw), linear-gradient(180deg, #d9cfb6, #bfb398); }
.cw-3d .cw-edge-r { right: 0; top: 1.2cqw; bottom: 1.2cqw; width: 15cqw; transform-origin: 100% 50%; transform: rotateY(-90deg);
  background: linear-gradient(rgba(6, 8, 13, var(--dk, 0)), rgba(6, 8, 13, var(--dk, 0))), linear-gradient(90deg, var(--bg) 0 1.1cqw, transparent 1.1cqw calc(100% - 1.1cqw), var(--bg) 0),
    repeating-linear-gradient(90deg, rgba(120, 104, 80, .2) 0 .35cqw, transparent .35cqw 1.1cqw), linear-gradient(90deg, #cfc5ab, #efe7d3); }
.cw-3d .cw-card.is-reading .cw-face { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset -1px 0 0 rgba(255,255,255,.18), 0 0 0 .3cqw rgba(0,0,0,.25); }
.cw-3d .cw-item.is-hover .cw-face { box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 0 9cqw 2cqw color-mix(in srgb, var(--bg) 60%, #fff 10%), 0 0 40cqw 6cqw color-mix(in srgb, var(--bg) 40%, transparent); }
/* room: vignette and a slow film grain over the hang */
.cw-3d .cw-stage::before, .cw-3d .cw-stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cw-3d .cw-stage::before { background: radial-gradient(130% 100% at 45% 55%, transparent 55%, rgba(3, 5, 9, .7) 100%); }
.cw-3d .cw-stage::after { inset: -50%; opacity: .06; mix-blend-mode: overlay; animation: cw-grain 1.2s steps(6) infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes cw-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } }
/* the wall label: left column, the hovered book; the full index line once a book is taken down */
.cw-3d .cw-wl { display: grid; gap: 8px; align-content: start; position: absolute; left: max(28px, 4vw); top: 17vh; z-index: 5; width: min(30vw, 400px); margin: 0;
  opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; }
.cw-3d .cw-wl.is-on { opacity: 1; transform: none; }
.cw-3d .cw-wl > * { margin: 0; }
.cw-3d .cw-wl-title { font: 400 clamp(30px, 2.8vw, 42px)/1 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; outline: none; }
.cw-3d .cw-wl-by { color: var(--ink-2); font-size: 16px; }
.cw-3d .cw-wl-note { color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: 26em; }
.cw-3d .cw-wl-acts { display: none; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.cw-3d .cw-wl-link { font-size: 15px; }
.cw-3d .cw-wl-x { appearance: none; font: 400 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); background: rgba(255,255,255,.04);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.cw-3d .cw-wl-x:hover, .cw-3d .cw-wl-x:focus-visible { color: var(--ink); border-color: rgba(255,255,255,.3); }
.cw-3d .cw-wl-hint { display: none; letter-spacing: .06em; }
.cw-3d .cw-wl.is-empty .cw-wl-hint { display: block; }
.cw-3d .cw-wl.is-empty .cw-wl-chip { display: none; }
.cw-3d .cw-wl-note:empty, .cw-3d .cw-wl-shelf:empty, .cw-3d .cw-wl-by:empty, .cw-3d .cw-wl-title:empty { display: none; }
.cw-3d .cw-wl.is-open { pointer-events: auto; top: 22vh; }
.cw-3d .cw-wl.is-open .cw-wl-title { font-size: clamp(40px, 4vw, 64px); }
.cw-3d .cw-wl.is-open .cw-wl-acts { display: flex; }
@media (prefers-reduced-motion: reduce) { .cw-card, .cw-face { transition: none; } .cw-panel { animation: none; } }
/* === end === */

/* === all work: the vortex and the chain (works.js). Hidden without JavaScript or with reduced motion: the list stays. === */
.wx, .wx-iris { display: none; }
.js .wx { display: block; position: relative; z-index: 1; height: 100vh; height: 100svh; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.js .wx-iris:not([hidden]) { display: block; }
.wx-glow { position: absolute; inset: 0; pointer-events: none; transition: background 1.2s var(--ease);
  background: radial-gradient(46% 52% at 50% 50%, color-mix(in srgb, var(--wc, #5aa9ff) 13%, transparent) 0%, transparent 70%), radial-gradient(90% 70% at 50% 50%, #121826 0%, transparent 80%); }
.wx-threads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wx-ring, .wx-chain { position: absolute; inset: 0; }
.wx-ring { pointer-events: none; }
.wx-head { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 12px; text-align: center; white-space: nowrap; }
.wx-head .wx-title { font-size: clamp(40px, 6vw, 92px); max-width: none; }
.wx-chip { position: absolute; left: 0; top: 0; border-radius: 8px; overflow: hidden; background: var(--bg-2); pointer-events: auto; cursor: pointer; will-change: transform, opacity;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.9); outline: 1px solid rgba(255,255,255,.08); outline-offset: -1px; }
.wx-chip img, .wx-chip svg, .wx-card img, .wx-card svg, .wx-iris-ph img, .wx-iris-ph svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-chain { pointer-events: none; }
.wx-card { position: absolute; left: 0; top: 0; display: block; opacity: 0; border-radius: 22px; overflow: hidden; background: var(--bg-2); pointer-events: auto; will-change: transform, opacity;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.05); transition: box-shadow .5s var(--ease); }
.wx-card.focus { cursor: zoom-in; }
.wx-card.lift { box-shadow: 0 60px 90px -40px rgba(0,0,0,1), 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 0 60px -14px color-mix(in srgb, var(--c) 45%, transparent); }
.wx-card .kb { position: absolute; inset: 0; will-change: transform; }
.wx-cap { position: absolute; pointer-events: none; opacity: 0; transition: opacity .4s; }
.wx.chain .wx-cap { opacity: 1; }
.wx-cap-l { left: max(24px, 6vw); width: min(30vw, 420px); }
.wx-cap-r { right: max(24px, 6vw); text-align: right; width: min(26vw, 380px); }
.wx-cap .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.wx-cap .ln > span { display: inline-block; transform-origin: 0 100%; }
.wx-cap-r .ln > span { transform-origin: 100% 100%; }
.wx-cap .liquid > span { animation: wx-liquid 1.05s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes wx-liquid { 0% { opacity: 0; transform: translateY(70%) skewX(-18deg) skewY(5deg) scaleX(1.12); filter: blur(6px); }
  55% { opacity: 1; transform: translateY(-4%) skewX(5deg) skewY(-1deg) scaleX(.98); filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
.wx-no { font: 400 13px/1 var(--mono); color: var(--ink-3); letter-spacing: .06em; margin-right: 14px; vertical-align: .9em; }
.wx-nm { font: 500 clamp(30px, 3vw, 46px)/1.05 var(--display); letter-spacing: -.03em; color: var(--ink); }
.wx-tl { font-size: 17px; line-height: 1.45; color: var(--ink-2); margin-top: 12px; padding-left: 38px; }
.wx-uc { font: 500 clamp(28px, 3vw, 46px)/1.05 var(--display); letter-spacing: -.03em; color: var(--ink); }
.wx-uc i { font-style: normal; color: var(--c); }
.wx-yr { font: 400 14px/1 var(--mono); color: var(--ink-3); letter-spacing: .06em; margin-left: 14px; }
.wx.stack .wx-cap-r { right: auto; left: max(24px, 6vw); text-align: left; }
.wx.stack .wx-cap-r .ln > span { transform-origin: 0 100%; }
.wx.stack .wx-uc { font-size: clamp(20px, 1.8vw, 26px); padding-left: 38px; }
.wx-index { position: absolute; top: 92px; right: max(24px, 2.4vw); margin: 0; padding: 0; list-style: none; text-align: right; opacity: 0; transition: opacity .6s; }
.wx.chain .wx-index { opacity: 1; }
.wx-index button { all: unset; cursor: pointer; display: block; font: 400 var(--ifs, 13px)/var(--ilh, 19px) var(--body); color: var(--ink-3); transition: color .3s, transform .4s var(--ease); }
.wx-index button:hover { color: var(--ink-2); }
.wx-index button:focus-visible { outline: 1px solid var(--uc-tools); outline-offset: 2px; }
.wx-index .on button { color: var(--ink); transform: translateX(-12px); }
.wx-index .on button::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c); margin-left: 8px; vertical-align: .15em; }
.wx-cue { position: absolute; right: max(24px, 2.4vw); bottom: 28px; display: flex; align-items: center; gap: 12px; letter-spacing: .14em; text-transform: uppercase; transition: opacity .5s; }
.wx-cue i { width: 1px; height: 34px; background: linear-gradient(var(--ink-2), transparent); transform-origin: top; animation: wx-cue 1.8s var(--ease) infinite; }
@keyframes wx-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.wx.chain .wx-cue { opacity: 0; }
.wx-list { position: absolute; left: max(24px, 2.4vw); bottom: 28px; text-decoration: none; color: var(--ink-2); padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8,11,18,.5); transition: color .2s, border-color .2s; }
.wx-list:hover { color: var(--ink); border-color: var(--ink-3); }
.wx-count { display: none; }
.wx:not(.chain) .wx-count { display: none !important; }
/* the iris: the photograph opens through a circle grown from where you clicked */
.wx-iris { position: fixed; inset: 0; z-index: 40; background: #05070b; clip-path: circle(0 at 50% 50%); }
.wx-iris-ph { position: absolute; inset: 0; will-change: transform; }
.wx-iris::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,7,11,.88) 0%, rgba(5,7,11,.55) 38%, rgba(5,7,11,0) 70%), linear-gradient(0deg, rgba(5,7,11,.7), transparent 45%); }
.wx-credit { position: absolute; z-index: 1; left: max(24px, 6vw); bottom: max(40px, 9vh); width: min(560px, calc(100vw - 48px)); display: grid; gap: 10px; }
.wx-credit .ln { display: block; overflow: hidden; }
.wx-credit .ln > * { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 250ms); }
.wx-iris.on .wx-credit .ln > * { transform: none; }
.wx-credit .cn { font: 400 13px/1.4 var(--mono); color: var(--ink-3); letter-spacing: .08em; }
.wx-credit .t { font: 500 clamp(44px, 6vw, 88px)/.95 var(--display); letter-spacing: -.04em; color: var(--ink); padding-bottom: .06em; }
.wx-credit .h { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; color: var(--ink); }
.wx-credit .u { font: 400 14px/1.4 var(--mono); color: var(--c); letter-spacing: .04em; }
.wx-credit .d { color: var(--ink-2); font-size: 17px; line-height: 1.5; }
.wx-credit .btn { margin-top: 8px; font-size: 16px; }
.wx-close { all: unset; position: absolute; z-index: 1; top: calc(18px + env(safe-area-inset-top, 0px)); right: max(24px, 2.4vw); cursor: pointer; color: var(--ink); padding: 10px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(5,7,11,.4); font: 400 13px/1 var(--mono); }
.wx-close:hover { border-color: var(--ink-2); }
.wx-close:focus-visible { outline: 2px solid var(--uc-tools); outline-offset: 3px; }
/* phone: landscape cards, caption under the card, the next one peeking off the bottom */
@media (max-width: 760px) {
  .wx-index { display: none; }
  .wx-cap-l, .wx-cap-r { left: 20px; right: 20px; width: auto; text-align: center; }
  .wx-cap .ln > span, .wx-cap-r .ln > span { transform-origin: 50% 100%; }
  .wx-no { display: none; }
  .wx-nm { font-size: 30px; }
  .wx-tl, .wx-cap-l .ln + .ln { display: none; }
  .wx-uc { font: 400 13px/1.4 var(--mono); letter-spacing: .04em; color: var(--ink-2); }
  .wx-yr { font-size: 13px; margin-left: 8px; }
  .wx-count { display: block; position: absolute; right: 20px; bottom: 76px; }
  .wx-list { left: 20px; bottom: 18px; }
  .wx.chain .wx-list { bottom: 66px; }
  .wx-cue { right: 20px; }
  .wx.chain .wx-cue { display: none; }
  .wx-card { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .js .wx, .js .wx-iris:not([hidden]) { display: none; } }
/* === end === */