/* Seeker surface: threshold, home, rooms. */

/* ---- Threshold ---- */
.threshold .hero { min-height: 100vh; display: grid; align-items: center; position: relative; isolation: isolate; overflow: hidden; }
.threshold .hero .bg { position: absolute; inset: 0; z-index: -2; background: url(../img/photos/observatory.jpg) center 40% / cover; opacity: .85; }
.threshold .hero .veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 65% at 50% 50%, oklch(0.13 0.012 80 / .38), oklch(0.13 0.012 80 / .68) 85%), linear-gradient(to bottom, oklch(0.13 0.012 80 / .1) 55%, var(--bg)); }
.threshold .hero .in { width: 100%; text-align: center; padding-block: 104px calc(var(--pocbar-h) + 24px); }
.threshold .hero h1 { font-style: italic; font-size: clamp(2.2rem, 4.6vw, 3.8rem); max-width: 22ch; margin: var(--s-3) auto var(--s-1); min-height: 1.1em; }
.threshold .hero h1 em { color: var(--accent); }
.threshold .facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-6); margin-top: var(--s-4); font-size: var(--t-14); color: var(--muted); }
.threshold .facts b { color: var(--ink); font-weight: 500; }
.threshold .hero .sub { margin: 0 auto var(--s-5); min-height: 1.6em; }
.threshold .hero p { margin-inline: auto; }
.threshold .doors { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-4); min-height: var(--h-ctl); }
.threshold .doors[hidden] { display: none; }
.threshold .member-door { margin-top: var(--s-4); text-align: center; font-size: var(--t-14); color: var(--muted); }
.threshold .member-door a { color: var(--gold-text); text-decoration: none; }
.threshold .gate { max-width: 460px; margin: var(--s-6) auto 0; padding: var(--s-7) var(--s-6); border: var(--rule-strong); border-radius: var(--r-lg); background: oklch(0.13 0.012 80 / .72); }
.threshold .gate h2 { font-style: italic; margin: var(--s-2) 0 var(--s-2); }
.threshold .gate p { margin-inline: auto; }
.threshold .gate .row { justify-content: center; margin-top: var(--s-5); }
.threshold .gate[hidden], .threshold .ring-wrap[hidden] { display: none; }
.threshold .greet { font-family: var(--font-kicker); font-size: var(--t-11); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }

/* below the fold: one long argument */
.threshold .argument { border-top: var(--rule); }
.threshold .band { padding-block: var(--section); }
.threshold .band + .band { border-top: var(--rule); }
.threshold .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--rule); border-left: var(--rule); }
.threshold .pillars > div { padding: var(--s-6); border-right: var(--rule); border-bottom: var(--rule); }
.threshold .pillars h3 { font-style: italic; margin-bottom: var(--s-2); }
.threshold .pillars p { font-size: var(--t-15); color: var(--muted); }
@media (max-width: 860px) { .threshold .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .threshold .pillars { grid-template-columns: 1fr; } }
.threshold .unfolds { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-8); }
@media (max-width: 860px) { .threshold .unfolds { grid-template-columns: 1fr; gap: var(--s-6); } }
.threshold .unfolds h3 { display: flex; align-items: baseline; gap: var(--s-3); }
.threshold .unfolds h3 i { font-style: normal; font-family: var(--font-kicker); font-size: var(--t-11); letter-spacing: .2em; color: var(--accent); }
.threshold .numbers { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.threshold .numbers b { display: block; font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1; font-variant-numeric: tabular-nums; }
.threshold .numbers span { font-size: var(--t-14); color: var(--on-drench-muted); }

/* ---- Home: the unfolding ---- */
.home .hero { padding: 132px 0 var(--section-tight); position: relative; }
.home .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-9); align-items: center; }
@media (max-width: 900px) { .home .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); } }
.home .tonight-panel { display: grid; justify-items: center; text-align: center; gap: var(--s-4); padding: var(--s-6) var(--s-5); }
.home .tonight-panel .dial { width: 200px; height: 200px; }
.home .tonight-panel .dial .val { font-size: 2.6rem; }
.home .tonight-panel .wave { height: 56px; }
.home .tonight-panel p { margin: 0; max-width: 34ch; }
.home .hero h1 { font-style: italic; max-width: 16ch; margin: var(--s-3) 0 var(--s-4); }
.home .hero .lead { margin-bottom: var(--s-6); }
.home .hero .greet { display: flex; gap: var(--s-3); align-items: center; }
.home .choose-inline { margin-top: var(--s-6); }
.rooms { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.rooms li { border-bottom: var(--rule); }
.room { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr auto; gap: var(--s-6); align-items: center; padding: var(--s-5) 0; color: inherit; text-decoration: none; min-height: var(--h-row); transition: padding-left var(--dur-3) var(--ease-out); }
.room:hover { padding-left: var(--s-3); }
.room .n { font-family: var(--font-display); font-style: italic; font-size: var(--t-28); color: var(--ink); }
.room .b { color: var(--muted); font-size: var(--t-15); max-width: 56ch; }
.room .go { color: var(--accent); }
.rooms li:first-child .room { padding-block: var(--s-7); }
.rooms li:first-child .room .n { font-size: var(--fs-h2); }
.rooms li:first-child .room .n::after { content: "Start here"; display: block; font: 500 var(--t-11) var(--font-kicker); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-top: var(--s-2); font-style: normal; }
@media (max-width: 720px) { .room { grid-template-columns: 1fr auto; } .room .b { grid-column: 1 / -1; } }
.home .tonight { display: grid; grid-template-columns: 260px 1fr; gap: var(--s-8); align-items: center; }
@media (max-width: 760px) { .home .tonight { grid-template-columns: 1fr; } }
.home .when { display: grid; text-align: center; min-width: 64px; }
.home .when b { font-family: var(--font-display); font-size: var(--t-22); line-height: 1; }
.home .when small { font-size: var(--t-12); color: var(--muted); }
.refl { margin: 0; padding: var(--s-5) 0; border-top: var(--rule); }
.refl p { font-family: var(--font-display); font-style: italic; font-size: var(--t-22); line-height: 1.35; max-width: 40ch; }
.refl footer { font-size: var(--t-14); color: var(--muted); margin-top: var(--s-3); }
.refl footer b { color: var(--ink); font-weight: 500; }
.home .constellation-teaser { display: grid; grid-template-columns: 1fr auto; gap: var(--s-6); align-items: center; }
@media (max-width: 720px) { .home .constellation-teaser { grid-template-columns: 1fr; } }

/* ---- Room header shared by the rooms ---- */
.roomhead { padding: 140px 0 var(--s-8); }
.roomhead h1 { font-style: italic; max-width: 18ch; margin: var(--s-3) 0 var(--s-4); }
.roomhead .photo.wide { aspect-ratio: 5 / 4; max-height: 520px; }

/* ---- Frequency Room ---- */
.freq-room .stage { display: grid; grid-template-columns: 360px 1fr; gap: var(--s-9); align-items: start; }
@media (max-width: 900px) { .freq-room .stage { grid-template-columns: 1fr; } }
.freq-room .console { position: sticky; top: 24px; display: grid; gap: var(--s-5); justify-items: center; text-align: center; padding: var(--s-6) 0; }
.freq-room .dial { width: 260px; height: 260px; }
.freq-room .dial .val { font-size: 3.6rem; }
.freq-room .clock { font-family: var(--font-kicker); font-size: var(--t-11); letter-spacing: .22em; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1em; }
.freq-room .knobs { width: 100%; display: grid; gap: var(--s-3); text-align: left; }
.freq-room .knobs .field { grid-template-columns: 1fr auto; align-items: center; }
.freq-room .knobs .field label { grid-column: 1; }
.freq-room .knobs .field output { font-variant-numeric: tabular-nums; font-size: var(--t-13); color: var(--accent); }
.freq-room .knobs .field .range { grid-column: 1 / -1; }
.freq-room .breath { width: 160px; height: 160px; }
.freq-room .freq { grid-template-columns: auto 1fr auto; cursor: pointer; }
.freq-room .freq:hover { background: var(--surface); margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); }
.freq-room .freq .acts { display: flex; gap: var(--s-2); }
.freq-room .freq .yours { font-family: var(--font-kicker); font-size: 10px; letter-spacing: .2em; color: var(--accent); text-transform: uppercase; margin-left: 8px; }
.freq-room .made { font-size: var(--t-14); color: var(--muted); border-top: var(--rule); padding-top: var(--s-5); margin-top: var(--s-6); }

/* ---- The Journey ---- */
.journey .progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: var(--z-sticky); background: transparent; pointer-events: none; }
.journey .progress i { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); box-shadow: var(--glow); transition: width .15s linear; }
.journey .voice { position: sticky; top: 92px; z-index: 2; display: flex; justify-content: center; margin-bottom: var(--s-6); }
.journey .voice .segmented { background: oklch(0.13 0.012 80 / .85); backdrop-filter: blur(6px); }
.journey .chapter-band { min-height: 0; display: grid; align-items: center; padding: var(--s-10) 0; border-top: var(--rule); }
.journey .chapter-band.prologue { min-height: 0; border-top: 0; padding: 140px 0 var(--s-8); }
.journey section.chapter-band.prologue .in > figure { order: 2; }
.journey .chapter-band .in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; }
@media (max-width: 900px) { .journey .chapter-band .in { grid-template-columns: 1fr; } }
.journey .chapter-band:nth-of-type(odd) .in > figure { order: -1; }
.journey figure { margin: 0; }
.journey figure svg { width: 100%; max-width: 460px; height: auto; margin-inline: auto; stroke: var(--accent); fill: none; stroke-width: 1.2; stroke-linecap: round; }
.journey figure svg .d { stroke-dasharray: 900; stroke-dashoffset: 900; }
.journey figure.drawn svg .d { animation: draw 3s var(--ease-out) forwards; }
.journey figure svg .d:nth-child(2) { animation-delay: .4s; } .journey figure svg .d:nth-child(3) { animation-delay: .8s; } .journey figure svg .d:nth-child(4) { animation-delay: 1.2s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.journey figure figcaption { font-family: var(--font-kicker); font-size: var(--t-11); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-align: center; margin-top: var(--s-4); }
.journey .voices { display: grid; gap: var(--s-6); }
.journey .voices > div { position: relative; padding-top: var(--s-4); border-top: var(--rule); }
.journey .voices .who { font-family: var(--font-kicker); font-size: var(--t-11); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); }
.journey .voices .sacred p { font-family: var(--font-display); font-style: italic; font-size: var(--t-22); line-height: 1.4; }
.journey .voices .science p { font-size: var(--t-16); color: var(--ink-2); }
.journey[data-voice="sacred"] .voices .science, .journey[data-voice="science"] .voices .sacred { display: none; }
.journey h2.big { font-size: var(--fs-h1); font-style: italic; margin: var(--s-3) 0 var(--s-5); }
.journey .epilogue { padding: var(--section) 0; border-top: var(--rule); }
.journey .next { display: grid; grid-template-columns: 1fr auto; gap: var(--s-6); align-items: center; padding: var(--s-6) 0; border-top: var(--rule); border-bottom: var(--rule); }
@media (max-width: 720px) { .journey .next { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .journey figure svg .d { stroke-dashoffset: 0; } }

/* ---- Inner Compass ---- */
.compass .compass-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-9); align-items: start; }
.compass .compass-grid.is-result { grid-template-columns: 1fr; }
.compass .compass-grid.is-result .aside { display: none; }
.compass .compass-grid.is-result .card { max-width: none; }
.compass .aside .rows > li { min-height: 44px; padding: var(--s-2) 0; }
.compass .aside .rows .lead-ico { width: 28px; height: 28px; }
@media (max-width: 900px) { .compass .compass-grid { grid-template-columns: 1fr; } }
.compass .card { max-width: 760px; }
.compass .q { min-height: 360px; display: grid; align-content: start; gap: var(--s-6); }
.compass .q h2 { font-style: italic; font-size: var(--fs-h2); }
.compass .answers { display: grid; gap: var(--s-2); }
.compass .answers button { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; text-align: left; min-height: 64px; padding: var(--s-3) var(--s-5); border: var(--rule); border-radius: var(--r-card); background: transparent; color: var(--ink); font-size: var(--t-16); transition: border-color var(--dur-2), background var(--dur-2); }
.compass .answers button:hover { border-color: var(--primary); background: var(--surface); }
.compass .answers button[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); }
.compass .answers kbd { font-family: var(--font-kicker); font-size: 10px; letter-spacing: .1em; width: 28px; height: 28px; border: var(--rule); border-radius: 50%; display: grid; place-content: center; color: var(--muted); }
.compass .steps { display: flex; gap: 6px; }
.compass .steps i { width: 24px; height: 2px; background: var(--line-strong); }
.compass .steps i.on { background: var(--accent); }
.compass .steps i.done { background: var(--muted-2); }
.compass .result { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: start; }
@media (max-width: 860px) { .compass .result { grid-template-columns: 1fr; } }
.compass .sigil { width: 100%; max-width: 480px; aspect-ratio: 1; margin-inline: auto; position: sticky; top: 100px; }
.compass .sigil canvas { width: 100%; height: 100%; }
.compass .pillars { display: grid; gap: var(--s-2); }
.compass .pillars div { display: grid; grid-template-columns: 130px 1fr auto; gap: var(--s-3); align-items: center; font-size: var(--t-14); }
.compass .pillars i { display: block; height: 2px; background: var(--line-strong); position: relative; }
.compass .pillars i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--accent); transition: width 1.2s var(--ease-out); }
.compass .pillars b { font-weight: 500; }
.compass .pillars span { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- Play ---- */
.play .games { display: flex; justify-content: center; margin-bottom: var(--s-7); }
.play .game { display: grid; grid-template-columns: 1fr 300px; gap: var(--s-8); align-items: start; }
@media (max-width: 900px) { .play .game { grid-template-columns: 1fr; } }
.play .game[hidden] { display: none; }
.play .field { position: relative; aspect-ratio: 16 / 10; background: var(--surface); border: var(--rule); border-radius: var(--r-lg); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.play .field canvas { width: 100%; height: 100%; display: block; }
.play .field .cue { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-style: italic; font-size: var(--t-28); color: var(--accent); pointer-events: none; text-shadow: 0 0 20px oklch(0.80 0.12 85 / .5); transition: opacity var(--dur-3); }
.play .field .over { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: var(--s-6); background: oklch(0.13 0.012 80 / .8); }
.play .field .over[hidden] { display: none; }
.play .side { display: grid; gap: var(--s-5); }
.play .meter { display: grid; gap: 6px; }
.play .meter i { display: block; height: 4px; background: var(--line-strong); position: relative; border-radius: 2px; }
.play .meter i::after { content: ""; position: absolute; inset: 0; width: var(--w, 0%); background: var(--accent); border-radius: 2px; box-shadow: var(--glow); transition: width .4s var(--ease-out); }
.play .meter b { font-family: var(--font-display); font-size: var(--t-28); line-height: 1; font-variant-numeric: tabular-nums; }
.play .meter small { color: var(--muted); font-size: var(--t-13); }
.play .how { font-size: var(--t-14); color: var(--muted); }
.play .how kbd { font-family: var(--font-kicker); font-size: 10px; letter-spacing: .1em; border: var(--rule); border-radius: var(--r-ctl); padding: 2px 6px; color: var(--ink); }

/* ---- Hidden chapter ---- */
.hidden-ch .lockstate { max-width: 640px; }
.hidden-ch .hgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-9); align-items: start; }
.hidden-ch .hside { position: sticky; top: 100px; }
.hidden-ch .hside .stars { margin-top: var(--s-3); }
@media (max-width: 900px) { .hidden-ch .hgrid { grid-template-columns: 1fr; } .hidden-ch .hside { position: static; } }
.hidden-ch .lines { display: grid; gap: var(--s-6); max-width: 60ch; }
.hidden-ch .lines p { font-family: var(--font-display); font-size: var(--t-28); line-height: 1.35; margin: 0; }
.hidden-ch .lines p em { color: var(--accent); }
.hidden-ch .lines .sci { font-family: var(--font-body); font-size: var(--t-16); color: var(--muted); }

/* ---- Pathways ---- */
.pathways .toolbar { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: end; margin: var(--s-6) 0 var(--s-5); }
@media (max-width: 760px) { .pathways .toolbar { grid-template-columns: 1fr; } }
.pathways .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pathways .chips button { min-height: 36px; padding: 0 var(--s-3); border: var(--rule); border-radius: var(--r-full); background: transparent; color: var(--muted); font-size: var(--t-13); font-weight: 500; }
.pathways .chips button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
.pathways .count { font-size: var(--t-13); color: var(--muted); font-variant-numeric: tabular-nums; }
.pathways .course { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); padding: var(--s-5) 0; border-top: var(--rule); align-items: center; }
.pathways .course:last-child { border-bottom: var(--rule); }
.pathways .course h3 { font-style: italic; }
.pathways .course .price { font-family: var(--font-display); font-size: var(--t-28); font-variant-numeric: tabular-nums; text-align: right; }
.pathways .course .price small { display: block; font-family: var(--font-body); font-size: var(--t-12); color: var(--muted); }

/* ---- Practice ---- */
.practice .head { display: grid; grid-template-columns: 1fr 320px; gap: var(--s-8); align-items: start; }
@media (max-width: 860px) { .practice .head { grid-template-columns: 1fr; } }
.practice .steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.practice .steps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-top: var(--rule); }
.practice .steps li::before { counter-increment: st; content: counter(st); font-family: var(--font-display); font-size: var(--t-28); color: var(--accent); line-height: 1; }
.practice .timer { text-align: center; display: grid; gap: var(--s-4); justify-items: center; }
.practice .timer .t { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.practice .timer .breath { width: 150px; height: 150px; }
.practice .timer .breath[hidden] { display: none; }

/* ---- Community ---- */
.community .circles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: var(--rule); }
@media (max-width: 900px) { .community .circles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .community .circles { grid-template-columns: 1fr; } }
.community .circle { background: var(--bg); padding: var(--s-6) var(--s-5); display: grid; gap: var(--s-2); align-content: start; grid-template-rows: auto auto 1fr auto auto; }
.community .circle h3 { font-style: italic; }
.community .circle .m { font-size: var(--t-13); color: var(--muted); }
.community .circle.mine { background: var(--surface); }
.community .feed { display: grid; gap: 0; }
.community .post { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-top: var(--rule); }
.community .post .av { width: 40px; height: 40px; border-radius: 50%; border: var(--rule); display: grid; place-content: center; font-family: var(--font-kicker); font-size: 11px; color: var(--accent); }
.community .post .meta { font-size: var(--t-13); color: var(--muted); margin-bottom: 4px; }
.community .post .meta b { color: var(--ink); font-weight: 500; }
.community .when { display: grid; text-align: center; min-width: 64px; }
.community .when b { font-family: var(--font-display); font-size: var(--t-22); line-height: 1; }
.community .when small { font-size: var(--t-12); color: var(--muted); }