/* Crop Decoder — "over the downs" (aerial, dark field green) + "the register" (light archival pages) */
:root {
  --night: #16211a;
  --night-2: #1e2c23;
  --night-3: #2a3a2f;
  --chalk: #ecebe4;
  --mist: #a9ab98;
  --wheat: #d9b65e;
  --wheat-2: #e6c97c;
  --sky: #9cc3dd;
  --paper: #f6f6f1;
  --paper-2: #ecece4;
  --ink: #1c1f1a;
  --green: #3e5a3a;
  --ochre: #8f6a1c;
  --rule: #d9d9cf;
  --soft: #5f6258;
  --display: "Archivo", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --pad: clamp(16px, 4vw, 48px);
  --maxw: 1320px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--display); font-stretch: 100%; font-size: 16.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.dark { background: var(--night); color: var(--chalk); }
body.paper { background: var(--paper); color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dark a { color: var(--chalk); }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.02; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
.paper :focus-visible { outline-color: var(--green); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ── header ───────────────────────────────── */
.top { position: sticky; top: 0; z-index: 40; }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.dark .top { background: rgba(22, 33, 26, .94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(236, 235, 228, .08); }
.paper .top { background: rgba(246, 246, 241, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.top.over { position: absolute; left: 0; right: 0; background: linear-gradient(rgba(22, 33, 26, .55), transparent); border: 0; backdrop-filter: none; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-stretch: 125%; font-weight: 800; font-size: 15px; letter-spacing: .01em; white-space: nowrap; }
.mark svg { width: 22px; height: 22px; flex: none; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { text-decoration: none; padding: 7px 11px; border-radius: 999px; font-size: 15px; opacity: .82; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { opacity: 1; background: rgba(127, 127, 110, .16); }
.nav a.nav-cta { opacity: 1; background: var(--wheat); color: var(--night); font-weight: 650; }
.nav a.nav-cta:hover { background: var(--wheat-2); }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid currentColor; color: inherit; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; }
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; padding: 10px var(--pad) 18px; gap: 2px; }
  .dark .nav, .top.over .nav { background: var(--night); }
  .paper .nav { background: var(--paper); border-bottom: 1px solid var(--rule); }
  .nav.open { display: flex; }
  .nav a { font-size: 17px; padding: 10px 12px; }
}

/* ── footer ───────────────────────────────── */
.foot { background: var(--night); color: var(--mist); padding: 56px 0 64px; font-size: 14.5px; }
.foot .wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.foot a { color: var(--chalk); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot .mark { color: var(--chalk); margin-bottom: 12px; }
.foot p { max-width: 46ch; }
@media (max-width: 760px) { .foot .wrap { grid-template-columns: 1fr; gap: 28px; } }

/* ── shared pieces ─────────────────────────── */
.search { display: flex; align-items: center; background: var(--chalk); border-radius: 999px; padding: 5px; max-width: 640px; }
.paper .search { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 16px; font: inherit; font-size: 17px; color: var(--ink); }
.search input:focus { outline: none; }
.search:focus-within { box-shadow: 0 0 0 3px var(--sky); }
.paper .search:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 3px rgba(62, 90, 58, .35); }
.search button { border: 0; border-radius: 999px; background: var(--night); color: var(--chalk); padding: 11px 22px; font: inherit; font-weight: 650; cursor: pointer; }
.tries { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 14px; align-items: center; }
.tries a { text-decoration: none; padding: 4px 11px; border-radius: 999px; border: 1px solid currentColor; opacity: .8; }
.tries a:hover { opacity: 1; }
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 10px 18px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1.5px solid currentColor; background: none; color: inherit; }
.btn.solid { background: var(--wheat); color: var(--night); border-color: var(--wheat); }
.btn.solid:hover { background: var(--wheat-2); }
.paper .btn.solid { background: var(--green); border-color: var(--green); color: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.on { background: var(--wheat); color: var(--night); border-color: var(--wheat); }
.muted { color: var(--mist); }
.paper .muted { color: var(--soft); }
.crumbs { font-size: 14px; padding-top: 22px; color: var(--soft); }
.dark .crumbs { color: var(--mist); }
.crumbs a { color: inherit; }
.win { display: block; border-radius: 50%; overflow: hidden; background: var(--paper-2); aspect-ratio: 1; flex: none; }
.dark .win { background: var(--night-3); }
.win img { width: 100%; height: 100%; object-fit: cover; }

/* ── home: aerial hero ─────────────────────── */
.hero { position: relative; height: 100svh; min-height: 620px; max-height: 1000px; overflow: hidden; background: #0e1510; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.04); transition: opacity .6s; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 33, 26, .5) 0, rgba(22, 33, 26, 0) 22%, rgba(22, 33, 26, 0) 50%, rgba(22, 33, 26, .94) 100%); pointer-events: none; }
.reticle { position: absolute; left: 50%; top: 44%; width: min(30vw, 300px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(156, 195, 221, .75); border-radius: 50%; z-index: 2; pointer-events: none; }
.reticle::before, .reticle::after { content: ""; position: absolute; background: var(--sky); opacity: .75; }
.reticle::before { left: 50%; top: -14%; bottom: -14%; width: 1px; }
.reticle::after { top: 50%; left: -14%; right: -14%; height: 1px; }
.readout { position: absolute; left: calc(50% + min(15vw, 150px) + 18px); top: calc(44% - min(15vw, 150px)); z-index: 3; color: var(--sky); font-size: 13px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.readout a { color: var(--sky); }
.hero-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding-bottom: clamp(28px, 6vh, 56px); }
.hero-copy .wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: end; }
.hero h1 { font-stretch: 125%; font-weight: 850; font-size: clamp(40px, 6.4vw, 96px); line-height: .92; letter-spacing: -.012em; }
.hero h1 a { text-decoration: none; }
.hero h1 a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.hero .intro { font-size: 18px; color: #dcdbd2; max-width: 46ch; }
.next-hero { position: absolute; right: var(--pad); top: 84px; z-index: 4; font-size: 14px; background: rgba(22, 33, 26, .6); border: 1px solid rgba(236, 235, 228, .4); color: var(--chalk); border-radius: 999px; padding: 7px 14px; cursor: pointer; font-family: inherit; }
@media (max-width: 860px) {
  .hero-copy .wrap { grid-template-columns: 1fr; gap: 18px; }
  .readout { left: var(--pad); top: 86px; }
  .reticle { width: 48vw; top: 40%; }
  .next-hero { top: auto; bottom: auto; display: none; }
}

.band { padding: 64px 0; }
.band h2 { font-stretch: 112%; font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 22px; }
.band-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px; }
.band-head h2 { margin: 0; }
.band-head a { margin-left: auto; font-size: 15px; }
.strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.frame { position: relative; aspect-ratio: 1; overflow: hidden; text-decoration: none; background: var(--night-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.frame:hover img { transform: scale(1.04); }
.frame span { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 12px 10px; background: linear-gradient(transparent, rgba(22, 33, 26, .92)); font-size: 13px; line-height: 1.35; }
.frame b { display: block; font-size: 14.5px; }
@media (max-width: 960px) { .strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .strip { grid-template-columns: repeat(2, 1fr); } }

.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.door { display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: center; text-decoration: none; }
.door b { display: block; font-stretch: 112%; font-size: 19px; margin-bottom: 2px; }
.door span { font-size: 15px; color: var(--soft); }
.dark .door span { color: var(--mist); }
.door:hover b { text-decoration: underline; }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } }

/* ── the register (light archival pages) ───── */
.page-head { padding: 34px 0 26px; }
.page-head h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.012em; max-width: 20ch; }
.page-head .lede { font-size: 18px; color: var(--soft); max-width: 60ch; margin-top: 14px; }
.dark .page-head .lede { color: var(--mist); }
.dark .page-head h1 { font-family: var(--display); font-stretch: 118%; font-weight: 850; }
.register { display: grid; grid-template-columns: 250px 1fr; gap: 48px; align-items: start; padding-bottom: 40px; }
.register aside { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 6px; }
.register aside h2 { font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 0 0 8px; }
@media (max-width: 900px) { .register { grid-template-columns: 1fr; gap: 20px; } .register aside { position: static; max-height: none; } }
.ladder { display: grid; gap: 1px; }
.ladder a, .ladder button { display: grid; grid-template-columns: 42px 1fr 30px; gap: 10px; align-items: center; padding: 3px 6px; margin: 0 -6px; border-radius: 6px; font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
.ladder .bar { height: 6px; background: var(--green); border-radius: 3px; min-width: 2px; }
.ladder .n { color: var(--soft); text-align: right; }
.ladder a:hover, .ladder button:hover { background: var(--paper-2); }
.ladder a:hover .bar, .ladder [aria-pressed="true"] .bar, .ladder [aria-current] .bar { background: var(--ochre); }
.ladder [aria-pressed="true"], .ladder [aria-current] { background: var(--paper-2); font-weight: 650; }
.dark .ladder a { color: var(--chalk); }
.dark .ladder .bar { background: var(--wheat); }
.dark .ladder .n { color: var(--mist); }
.dark .ladder a:hover { background: var(--night-2); }
@media (max-width: 900px) { .ladder.collapse { max-height: 210px; overflow-y: auto; } }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.filters select { appearance: none; border: 1px solid var(--rule); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231c1f1a' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; border-radius: 999px; padding: 8px 32px 8px 14px; font: inherit; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.filters select.set { border-color: var(--green); background-color: #e7eee3; }
.filters .clear { border: 0; background: none; font: inherit; font-size: 14.5px; text-decoration: underline; cursor: pointer; color: var(--soft); }
.view { margin-left: auto; display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.view button { border: 0; background: #fff; font: inherit; font-size: 14px; padding: 7px 14px; cursor: pointer; color: var(--soft); }
.view button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.count { font-size: 14.5px; color: var(--soft); margin: 10px 0 8px; }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rows li { border-bottom: 1px solid var(--rule); }
.rows a.row { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 10px 4px; text-decoration: none; }
.rows a.row:hover { background: #fff; }
.rows .win { width: 64px; }
.rows .t { font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.rows .m { font-size: 14px; color: var(--soft); margin-top: 2px; }
.rows .d { font-size: 14px; color: var(--soft); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rows .d b { display: block; color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .rows a.row { grid-template-columns: 52px 1fr; } .rows .win { width: 52px; } .rows .d { grid-column: 2; text-align: left; } .rows .d b { display: inline; margin-right: 6px; } }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px 14px; }
.tile { text-decoration: none; }
.tile .ph { aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--paper-2); }
.tile .ph img { width: 100%; height: 100%; object-fit: cover; }
.tile .t { font-family: var(--serif); font-size: 17px; line-height: 1.2; margin-top: 8px; }
.tile .m { font-size: 13.5px; color: var(--soft); }
.dark .tile .ph { background: var(--night-2); }
.dark .tile .m { color: var(--mist); }
.more { display: block; margin: 22px auto 0; }
.empty { padding: 40px 0; font-size: 17px; }

.month { margin: 34px 0 10px; display: flex; align-items: baseline; gap: 12px; }
.month h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; }
.month span { color: var(--soft); font-size: 14px; }

/* ── formation record ──────────────────────── */
.rec-hero { position: relative; background: #0e1510; color: var(--chalk); }
.rec-hero .shot { position: relative; height: min(72vh, 680px); min-height: 380px; overflow: hidden; }
.rec-hero .shot img { width: 100%; height: 100%; object-fit: cover; }
.rec-hero .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 33, 26, .4) 0, transparent 30%, transparent 45%, rgba(22, 33, 26, .95) 100%); }
.rec-hero .shot button { position: absolute; inset: 0; z-index: 1; background: none; border: 0; cursor: zoom-in; }
.rec-hero .over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-bottom: 30px; pointer-events: none; }
.rec-hero .over a, .rec-hero .over button { pointer-events: auto; }
.rec-hero h1 { font-stretch: 122%; font-weight: 850; font-size: clamp(34px, 5vw, 72px); line-height: .95; letter-spacing: -.01em; }
.rec-hero .when { font-size: 18px; margin-top: 10px; color: #dcdbd2; }
.rec-hero .credit { position: absolute; right: var(--pad); top: 84px; z-index: 2; font-size: 13px; color: #d4d3ca; text-shadow: 0 1px 2px #000; }
.rec-hero.noshot { padding: 40px 0 34px; background: var(--night); }
.rec-hero.noshot .over { position: static; padding: 0; }
.rec-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.rec-actions .btn { color: var(--chalk); }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--rule); }
.facts div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: 13px; color: var(--soft); }
.facts dd { margin: 2px 0 0; font-family: var(--serif); font-size: 19px; line-height: 1.25; }
.sect { padding: 44px 0 0; }
.sect > h2, .two h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; margin-bottom: 16px; }
.sect > h2 small { font-family: var(--display); font-size: 15px; color: var(--soft); font-weight: 400; margin-left: 6px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.gallery figure { margin: 0; }
.gallery figure.broken { display: none; }
.gallery button { display: block; width: 100%; padding: 0; border: 0; background: var(--paper-2); aspect-ratio: 4/3; overflow: hidden; border-radius: 4px; cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { font-size: 13px; color: var(--soft); padding: 6px 2px 0; line-height: 1.4; }
.gallery figcaption a { color: var(--soft); }
.fine { font-size: 13.5px; color: var(--soft); margin-top: 14px; max-width: 80ch; }
.two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; padding-top: 44px; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; gap: 28px; } }
.report { padding: 16px 0; border-top: 1px solid var(--rule); }
.report h3 { font-size: 17px; font-weight: 650; }
.report blockquote { margin: 10px 0 8px; font-family: var(--serif); font-size: 18.5px; line-height: 1.55; color: #33372f; }
.report .by { font-size: 14px; color: var(--soft); }
.map { height: 320px; border-radius: 6px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--rule); }
.map.big { height: calc(100svh - 64px); border-radius: 0; border: 0; }
.mini { list-style: none; margin: 0; padding: 0; }
.mini li a { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 7px 0; text-decoration: none; border-bottom: 1px solid var(--rule); }
.mini .win { width: 44px; }
.mini b { font-weight: 600; font-size: 15px; display: block; line-height: 1.25; }
.mini span { font-size: 13.5px; color: var(--soft); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10, 14, 11, .96); display: none; grid-template-rows: 1fr auto; color: var(--chalk); }
.lightbox.on { display: grid; }
.lightbox .stage { display: grid; place-items: center; padding: 56px 64px 10px; min-height: 0; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox .bar { display: flex; gap: 16px; align-items: center; padding: 12px 20px 18px; font-size: 14px; color: var(--mist); }
.lightbox .bar a { color: var(--chalk); }
.lightbox .count { margin: 0 0 0 auto; color: var(--mist); }
.lightbox button { position: absolute; background: rgba(236, 235, 228, .1); color: var(--chalk); border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.lightbox button:hover { background: rgba(236, 235, 228, .2); }
.lightbox .x { top: 12px; right: 14px; }
.lightbox .prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 10px; top: 50%; transform: translateY(-50%); }

/* ── patterns charts ───────────────────────── */
.chart { padding: 8px 0 18px; }
.chart svg { width: 100%; height: auto; display: block; }
.bars rect { fill: var(--green); }
.bars a:hover rect { fill: var(--ochre); }
.bars text { fill: var(--soft); font-family: var(--display); font-size: 11px; }
.hbar { display: grid; grid-template-columns: 200px 1fr 90px; gap: 14px; align-items: center; font-size: 15px; padding: 4px 0; }
.hbar .track { height: 8px; background: var(--paper-2); border-radius: 4px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--green); border-radius: 4px; }
.hbar .n { text-align: right; color: var(--soft); font-variant-numeric: tabular-nums; font-size: 14px; }
.note { font-size: 14.5px; color: var(--soft); max-width: 70ch; margin-top: 8px; }
@media (max-width: 600px) { .hbar { grid-template-columns: 120px 1fr 64px; font-size: 14px; } }
.prose { max-width: 68ch; }
.prose p, .prose li { font-size: 17.5px; line-height: 1.65; }
.prose li { margin: 6px 0; }
.archive { padding: 22px 0; border-top: 1px solid var(--rule); }
.archive h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; }
.archive h3 a { text-decoration: none; }
.archive h3 a:hover { text-decoration: underline; }
.archive p { margin: 6px 0; max-width: 70ch; }
.archive .nums { font-size: 15px; }
.archive details { margin-top: 8px; font-size: 15px; }
.archive summary { cursor: pointer; color: var(--green); }
.libs details { border-top: 1px solid var(--rule); padding: 10px 0; }
.libs summary { cursor: pointer; font-size: 16px; }
.libs ul { columns: 2; font-size: 14.5px; padding-left: 18px; }
@media (max-width: 700px) { .libs ul { columns: 1; } }

/* ── pattern finder ───────────────────────── */
.finder { display: grid; grid-template-columns: 1fr 360px; gap: 36px; align-items: start; padding-bottom: 30px; }
@media (max-width: 960px) { .finder { grid-template-columns: 1fr; } }
.finder .controls { display: flex; flex-wrap: wrap; gap: 10px; }
.finder select, .finder input[type=search] { flex: 1 1 260px; background: var(--night-2); color: var(--chalk); border: 1px solid var(--night-3); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 15.5px; }
.finder select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ecebe4' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 12px; margin-top: 20px; }
.pick { background: none; border: 0; padding: 0; color: var(--chalk); font: inherit; text-align: center; cursor: pointer; }
.pick .ph { aspect-ratio: 1; border-radius: 50%; background: var(--night-2) center/cover no-repeat; box-shadow: 0 0 0 2px transparent; transition: box-shadow .15s, transform .15s; }
.pick:hover .ph { transform: scale(1.03); }
.pick.on .ph { box-shadow: 0 0 0 3px var(--wheat), 0 0 0 7px rgba(217, 182, 94, .25); }
.pick .t { font-size: 13px; line-height: 1.25; margin-top: 8px; }
.pick .t small { display: block; color: var(--mist); }
.tray-box { position: sticky; top: 84px; background: var(--night-2); border-radius: 14px; padding: 20px; }
.tray-box h2 { font-stretch: 112%; font-size: 20px; }
.tray { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 14px 0 16px; }
.tray .slot { aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(236, 235, 228, .25); background: center/cover no-repeat; position: relative; }
.tray .slot button { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--chalk); color: var(--night); cursor: pointer; font-size: 12px; line-height: 20px; padding: 0; }
.disclaimer { font-size: 13px; color: var(--mist); margin-top: 14px; }
.result { padding-bottom: 40px; }
.reading-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 960px) { .reading-wrap { grid-template-columns: 1fr; } }
.reading h2 { font-stretch: 118%; font-size: clamp(28px, 3.2vw, 42px); color: var(--wheat); margin: 6px 0 16px; }
.reading .sub { color: var(--mist); font-size: 15px; }
.reading p { font-family: var(--serif); font-size: 19px; line-height: 1.65; }
.reading h3 { font-stretch: 112%; font-size: 17px; margin: 26px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(217, 182, 94, .12); color: var(--wheat-2); }
.reading .mini a { border-color: var(--night-3); }
.reading .mini span { color: var(--mist); }
.share-card { width: 100%; border-radius: 10px; }
.spinner { width: 96px; height: 96px; margin: 40px auto 10px; animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.share-row input { flex: 1 1 220px; background: var(--night-2); color: var(--chalk); border: 1px solid var(--night-3); border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 14px; }
.share-row .hint { width: 100%; font-size: 13.5px; color: var(--mist); }
.signal-lost { background: var(--night-2); border-radius: 14px; padding: 22px; }

/* paper band inside a dark page (home) */
.on-paper { background: var(--paper); color: var(--ink); }
.dark .on-paper a { color: var(--ink); }
.dark .on-paper .ladder a { color: var(--ink); }
.dark .on-paper .ladder .bar { background: var(--green); }
.dark .on-paper .ladder .n { color: var(--soft); }
.dark .on-paper .ladder a:hover { background: var(--paper-2); }
.top.over, .top.over a { color: var(--chalk); }
.top.over .nav a.nav-cta { color: var(--night); }
.dark .nav a.nav-cta { color: var(--night); }

.rows .t, .rows .m { display: block; }
.readout { background: rgba(22, 33, 26, .62); padding: 8px 11px; border-radius: 8px; color: #cfe2ee; }
.hero h1 { font-size: clamp(42px, 6.8vw, 104px); }
.hero-date { font-size: clamp(17px, 1.6vw, 22px); margin: 12px 0 0; color: #dcdbd2; font-stretch: 110%; }
.rec-hero .crumbs { color: #d4d3ca; padding-top: 0; margin-bottom: 10px; }
.rec-hero .crumbs a { color: #d4d3ca; }