/* The Dome — shared design system. Under the same sky. */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ---------- Seasons: one switch, four domes ---------- */
:root, [data-season="summer"] {
  --ground: #F5F0E8; --ground-2: #ECE4D6; --ink: #1A2218; --muted: #5E6659;
  --accent: #B8913F; --accent-soft: #E6D3A6; --deep: #0B1F12; --deep-2: #12301C;
  --leaf: #3E6B3A; --sky: #7FA7C9; --on-deep: #F5F0E8; --line: rgba(26,34,24,.14);
  --season-name: "Summer";
  --img-filter: none;
}
[data-season="fall"] {
  --ground: #F4EADB; --ground-2: #EADBC4; --ink: #241A12; --muted: #6B5A48;
  --accent: #B5622B; --accent-soft: #EBC9A4; --deep: #2A170C; --deep-2: #3B2212;
  --leaf: #8A4B1F; --sky: #C99A6B; --on-deep: #F7EADB; --line: rgba(36,26,18,.15);
  --img-filter: sepia(.32) saturate(1.45) hue-rotate(-22deg) contrast(1.04);
}
[data-season="winter"] {
  --ground: #EEF1F4; --ground-2: #DFE5EB; --ink: #18202A; --muted: #56616D;
  --accent: #C0703F; --accent-soft: #E9C7AE; --deep: #121A24; --deep-2: #1C2734;
  --leaf: #5B6B7A; --sky: #A8BBCD; --on-deep: #EEF1F4; --line: rgba(24,32,42,.14);
  --img-filter: saturate(.35) brightness(1.12) contrast(.95) hue-rotate(185deg) saturate(.6);
}
[data-season="spring"] {
  --ground: #F3F4EA; --ground-2: #E5E9D6; --ink: #1B2619; --muted: #5C6B57;
  --accent: #B5708A; --accent-soft: #EBC9D4; --deep: #15281B; --deep-2: #1E3825;
  --leaf: #6E9F5A; --sky: #9FC3D8; --on-deep: #F3F4EA; --line: rgba(27,38,25,.14);
  --img-filter: saturate(1.15) brightness(1.06) hue-rotate(12deg);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 17px/1.65 "DM Sans", system-ui, sans-serif;
  transition: background-color .8s ease, color .8s ease;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3, .serif { font-family: Lora, Georgia, serif; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); margin: 0 0 .4em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 .5em; }
h3 { font-size: 1.25rem; margin: 0 0 .4em; }
p { margin: 0 0 1em; }
.italic, em { font-family: Lora, Georgia, serif; font-style: italic; }
.eyebrow { font: 500 .74rem/1.2 "DM Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; display: block; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 60ch; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.reading { width: min(680px, 100% - 32px); margin-inline: auto; }
.band { padding: clamp(56px, 9vw, 112px) 0; position: relative; }
.band.deep { background: var(--deep); color: var(--on-deep); }
.band.deep .eyebrow, .band.deep .lede { color: color-mix(in srgb, var(--on-deep) 70%, transparent); }
.band.soft { background: var(--ground-2); }
.rule { width: 64px; height: 1px; background: var(--accent); border: 0; margin: 1.4rem 0; }
.center { text-align: center; } .center .rule { margin-inline: auto; } .center .lede { margin-inline: auto; }

/* ---------- Header and nav ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; color: var(--on-deep);
  background: linear-gradient(to bottom, rgba(6,10,6,.55), rgba(6,10,6,0));
  transition: background .4s ease, color .4s ease;
}
.top.solid { background: color-mix(in srgb, var(--ground) 94%, transparent); color: var(--ink); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(8px); }
.brand { display: flex; align-items: center; gap: 4px; font: 500 .95rem/1 Lora, serif; white-space: nowrap; }
.brand a { text-decoration: none; padding: 8px 4px; }
.brand .pt { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-left: -10px; }
.brand .pt::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.brand .pt::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; animation: ptCall 6.2s ease-in-out 2.4s infinite; }
.brand .pt:hover::before, .brand .pt:focus-visible::before { transform: scale(1.35); box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 22%, transparent), 0 0 18px 2px color-mix(in srgb, currentColor 40%, transparent); }
.brand .pt:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
@keyframes ptCall { 0%, 70%, 100% { opacity: 0; transform: scale(.6); } 80% { opacity: .55; transform: scale(1); } 95% { opacity: 0; transform: scale(1.5); } }

/* ---------- Behind the point: the portal ---------- */
.portal { position: fixed; inset: 0; z-index: 200; background: #070B09; color: #F5F0E8; clip-path: circle(0 at var(--px, 24px) var(--py, 24px)); transition: clip-path 1.25s cubic-bezier(.7,0,.2,1); overflow-y: auto; overscroll-behavior: contain; }
.portal.open { clip-path: circle(150vmax at var(--px, 24px) var(--py, 24px)); }
.portal.closing { transition: clip-path .7s cubic-bezier(.5,0,.75,0); }
.portal .p-in { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: max(18px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom)); box-sizing: border-box; }
.portal .p-bar { display: flex; justify-content: space-between; align-items: center; font: 500 .72rem/1 "DM Sans"; letter-spacing: .18em; text-transform: uppercase; color: rgba(245,240,232,.62); }
.portal .p-close { all: unset; cursor: pointer; padding: 10px 6px; font: inherit; letter-spacing: inherit; color: rgba(245,240,232,.75); }
.portal .p-close:focus-visible { outline: 1px solid #E2C48A; }
.portal .p-main { display: grid; align-content: center; justify-items: center; text-align: center; gap: 0; padding: 32px 0; }
.portal .p-point { width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 28px 8px rgba(255,255,255,.35); animation: breathe 5.2s ease-in-out infinite; margin-bottom: 30px; }
.portal .p-line { font: italic 400 clamp(1.4rem, 4.6vw, 2.1rem)/1.35 Lora, serif; max-width: 560px; margin: 0 0 .5rem; opacity: 0; transform: translateY(8px); transition: opacity 1.4s ease, transform 1.4s ease; }
.portal .p-sub { font: 400 1rem/1.5 "DM Sans"; color: rgba(245,240,232,.72); max-width: 440px; margin: 0 0 2.2rem; opacity: 0; transition: opacity 1.4s ease .5s; }
.portal.ready .p-line, .portal.ready .p-sub { opacity: 1; transform: none; }
.portal .doors { display: grid; gap: 6px; width: min(100%, 520px); text-align: left; }
.portal .door { display: grid; grid-template-columns: 1px 1fr auto; gap: 18px; align-items: center; padding: 14px 6px 14px 0; text-decoration: none; color: inherit; opacity: 0; transform: translateY(10px); transition: opacity 1.1s ease, transform 1.1s ease, background .3s; border-radius: 6px; }
.portal.ready .door { opacity: 1; transform: none; }
.portal .door .slit { width: 1px; height: 46px; background: linear-gradient(to bottom, transparent, #E2C48A, transparent); transition: height .5s, box-shadow .5s; }
.portal .door:hover .slit, .portal .door:focus-visible .slit { height: 60px; box-shadow: 0 0 12px 1px rgba(226,196,138,.7); }
.portal .door:focus-visible { outline: 1px solid rgba(226,196,138,.6); outline-offset: 4px; }
.portal .door b { display: block; font: 500 clamp(1.15rem, 3.6vw, 1.4rem)/1.25 Lora, serif; }
.portal .door small { display: block; font: 400 .9rem/1.45 "DM Sans"; color: rgba(245,240,232,.66); margin-top: 3px; }
.portal .door .k { font: 500 .66rem/1 "DM Sans"; letter-spacing: .18em; text-transform: uppercase; color: rgba(226,196,138,.85); }
.portal .door.walked b { color: rgba(245,240,232,.62); }
.portal .door.walked .slit { background: linear-gradient(to bottom, transparent, rgba(245,240,232,.35), transparent); }
.portal .p-foot { text-align: center; font: 400 .82rem/1.5 "DM Sans"; color: rgba(245,240,232,.5); }
@media (prefers-reduced-motion: reduce) { .portal, .portal.closing { transition: none; } .portal .p-line, .portal .p-sub, .portal .door { transition: none; } .brand .pt::after { animation: none; } }
.top nav { display: flex; gap: 4px; align-items: center; }
.top nav a { text-decoration: none; font-size: .88rem; padding: 8px 10px; border-radius: 99px; opacity: .88; }
.top nav a:hover, .top nav a[aria-current="page"] { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.top .stay-btn { background: var(--accent); color: #fff; opacity: 1; }
.menu-btn { display: none; background: none; border: 1px solid currentColor; color: inherit; border-radius: 99px; padding: 7px 14px; font: inherit; font-size: .85rem; }
@media (max-width: 860px) {
  .top nav { display: none; position: absolute; top: 100%; right: 12px; flex-direction: column; align-items: stretch; background: var(--ground); color: var(--ink); padding: 10px; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.18); min-width: 200px; }
  .top nav.open { display: flex; }
  .menu-btn { display: inline-block; }
}

/* ---------- Season switch ---------- */
.seasons { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: color-mix(in srgb, currentColor 12%, transparent); }
.seasons button { all: unset; cursor: pointer; font-size: .78rem; padding: 6px 10px; border-radius: 99px; line-height: 1; }
.seasons button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.seasons button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.season-select { display: none; font: inherit; font-size: .82rem; color: inherit; background: color-mix(in srgb, currentColor 12%, transparent); border: 0; border-radius: 99px; padding: 7px 10px; }
.season-select option { color: #1A2218; }
@media (max-width: 600px) { .top .seasons { display: none; } .season-select { display: inline-block; } .brand { font-size: .88rem; } }
.season-note { font-size: .78rem; color: var(--muted); }
img.seasonal { filter: var(--img-filter); transition: filter 1s ease; }
img.seasonal.real { filter: none; }
.imagined-tag { position: absolute; right: 10px; bottom: 10px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.5); color: #fff; padding: 4px 8px; border-radius: 99px; display: none; }
.has-imagined .imagined-tag { display: inline-block; }

/* ---------- Passages: the point opens, descends, closes ---------- */
.passage { position: relative; background: #060A06; }
.passage .p-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.passage .p-stage, .bloom .stage { --W: 100vw; --H: 100svh; --R: 1200; }
/* The iris: a circle that opens and closes by transform alone (no repaint per frame), the picture counter-scaled inside it */
.iris { position: absolute; left: 50%; top: 50%; width: calc(var(--R) * 2px); height: calc(var(--R) * 2px); margin: calc(var(--R) * -1px) 0 0 calc(var(--R) * -1px); border-radius: 50%; overflow: hidden; transform: scale(.005); will-change: transform; }
.iris > .iris-in { position: absolute; left: 50%; top: 50%; width: var(--W); height: var(--H); margin: calc(var(--H) / -2) 0 0 calc(var(--W) / -2); will-change: transform, opacity; }
.passage .p-layer { position: absolute; inset: 0; }
.passage .p-layer img { width: 100%; height: 100%; object-fit: cover; }
.passage .p-layer video.dvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.has-imagined video.dvid { filter: var(--img-filter); transition: filter 1s ease; }
.passage .p-ring { position: absolute; left: 50%; top: 50%; width: calc(var(--R) * 2px + 28px); height: calc(var(--R) * 2px + 28px); translate: -50% -50%; pointer-events: none; overflow: visible; transform: scale(0); will-change: transform, opacity; }
.passage .p-ring circle { fill: none; stroke: rgba(255,248,230,.75); stroke-width: .6; vector-effect: non-scaling-stroke; }
.passage .p-ring circle.t { stroke-dasharray: 1 7; stroke-width: 1.4; stroke: #E2C48A; }
.passage .p-point { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 30px 6px rgba(255,255,255,.5); animation: breathe 4.6s ease-in-out infinite; pointer-events: none; }
.passage .p-words { position: absolute; inset: auto 0 14svh 0; display: grid; place-items: center; padding: 0 16px; pointer-events: none; }
.passage .p-line { grid-area: 1 / 1; max-width: 760px; text-align: center; color: #fff; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity 1s ease, transform 1s ease; text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.passage .p-line.on { opacity: 1; transform: none; }
.passage .p-line .serif { font: 500 clamp(2rem, 6vw, 3.8rem)/1.15 Lora, serif; }
.passage .p-line .voice { display: block; font-size: clamp(1.25rem, 3.2vw, 1.9rem); }
.passage .p-line .voice-by { color: rgba(255,255,255,.8); }
.passage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18svh; background: linear-gradient(to bottom, transparent, rgba(6,10,6,.35)); pointer-events: none; }

/* Every hero blooms open from a point when the page arrives */
.hero .bg { animation: heroBloom 2.2s cubic-bezier(.6,.05,.25,1) both; }
.hero::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 30px 6px rgba(255,255,255,.5); z-index: 1; animation: heroPoint 2.2s ease both; pointer-events: none; }
@keyframes heroBloom { 0% { clip-path: circle(6px at 50% 50%); } 30% { clip-path: circle(6px at 50% 50%); } 100% { clip-path: circle(150% at 50% 50%); } }
@keyframes heroPoint { 0%, 30% { opacity: 1; } 60%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero .bg, .hero::before { animation: none; } .hero::before { display: none; } }

/* Season change: a circle opens from the switch */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: seasonWipe .9s cubic-bezier(.6,.05,.25,1); }
@keyframes seasonWipe { from { clip-path: circle(0 at var(--wx, 50%) var(--wy, 50%)); } to { clip-path: circle(150% at var(--wx, 50%) var(--wy, 50%)); } }

/* Moving between pages: the next page opens from the centre */
@view-transition { navigation: auto; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: #060A06; color: #fff; }
.hero .bg { position: absolute; inset: 0; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.hero .bg video.dvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .veil { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(6,10,6,.15), rgba(6,10,6,.7)); }
.hero .inner { position: relative; text-align: center; padding: 120px 16px 80px; max-width: 780px; }
.hero h1 { color: #fff; }
.hero .lede { color: rgba(255,255,255,.85); margin-inline: auto; }
.page-hero { min-height: 72svh; }

/* Home: the point blooms */
.bloom { position: relative; height: 230svh; background: #060A06; }
.bloom .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.bloom .layer { position: absolute; inset: 0; }
.bloom .layer img { width: 100%; height: 100%; object-fit: cover; }
.bloom .aperture { position: absolute; }
.bloom .point { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 30px 6px rgba(255,255,255,.5); animation: breathe 4.6s ease-in-out infinite; }
.bloom .words { position: absolute; inset: auto 0 12svh 0; text-align: center; color: #fff; padding: 0 16px; transition: opacity .4s; }
.bloom .words h1 { font-size: clamp(2.2rem, 7vw, 4.4rem); text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.bloom .hint { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: .85 } 50% { transform: scale(1.5); opacity: 1 } }

/* ---------- Cards, grids ---------- */
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.card { position: relative; background: var(--ground); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease; }
a.card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.card .media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--ground-2); }
.card .media img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 18px 18px 20px; }
.card .body p { color: var(--muted); font-size: .95rem; margin: 0; }
.band.deep .card { background: var(--deep-2); border-color: rgba(255,255,255,.1); }
.band.deep .card .body p { color: color-mix(in srgb, var(--on-deep) 70%, transparent); }
.num { font: 500 .72rem/1 "DM Sans"; letter-spacing: .14em; color: var(--accent); }

/* ---------- Guest voices: verbatim, always attributed ---------- */
.voice { font-family: Lora, serif; font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.5; margin: 0; }
.voice::before { content: "\201C"; } .voice::after { content: "\201D"; }
.voice-by { display: block; margin-top: .6rem; font: 500 .8rem/1.3 "DM Sans"; letter-spacing: .06em; color: var(--muted); font-style: normal; }
.band.deep .voice-by { color: color-mix(in srgb, var(--on-deep) 65%, transparent); }
.voices { display: grid; gap: 34px; }
.voice-card { border-left: 2px solid var(--accent); padding: 4px 0 4px 20px; }

/* ---------- Where their words go (presentation markers) ---------- */
.slot { text-align: left; position: relative; border: 1.5px dashed var(--accent); border-radius: 14px; padding: 18px 18px 16px; margin: 1.4rem 0; background: color-mix(in srgb, var(--accent-soft) 22%, transparent); }
.slot .slot-tag { display: inline-flex; align-items: center; gap: 8px; font: 600 .7rem/1 "DM Sans"; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .7rem; }
.slot .slot-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.slot .draft { font-family: Lora, serif; font-style: italic; }
.slot .prompts { margin: .8rem 0 0; padding: 0; list-style: none; font-size: .9rem; color: var(--muted); }
.slot .prompts li { padding-left: 18px; position: relative; margin: .3rem 0; }
.slot .prompts li::before { content: "?"; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.band.deep .slot { background: rgba(255,255,255,.04); }
.band.deep .slot .prompts { color: color-mix(in srgb, var(--on-deep) 70%, transparent); }
/* With markers hidden, a slot leaves the page: a stand-in is never shown as if it were their own words */
html.clean .slot { display: none; }
.marker-toggle { position: static; font: 500 .75rem/1 "DM Sans"; background: var(--deep); color: var(--on-deep); border: 0; border-radius: 99px; padding: 10px 14px; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.marker-toggle .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }

/* ---------- Buttons, forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 99px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 500 .95rem/1 "DM Sans"; text-decoration: none; cursor: pointer; }
.btn.act { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.light { border-color: rgba(255,255,255,.7); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: .8rem; letter-spacing: .06em; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: #1A2218; min-height: 46px; }
.field textarea { min-height: 110px; resize: vertical; }

/* ---------- Timeline ---------- */
.tl { position: relative; padding-left: 28px; }
.tl::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 34px; }
.tl-item::before { content: ""; position: absolute; left: -26px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ground); border: 2px solid var(--accent); }
.tl-item.mark::before { background: var(--accent); }
.tl-when { font: 600 .74rem/1 "DM Sans"; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }

/* ---------- Footer ---------- */
footer.foot { background: var(--deep); color: var(--on-deep); padding: 64px 0 90px; }
footer.foot a { color: inherit; opacity: .85; }
footer.foot .cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
footer.foot .seed { font: italic 1.4rem/1.3 Lora, serif; margin-bottom: 1.2rem; }
footer.foot small { opacity: .6; }

/* ---------- Reveal ---------- */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; } }

/* ---------- Utility ---------- */
.pill { display: inline-block; font-size: .74rem; padding: 4px 10px; border-radius: 99px; background: var(--ground-2); color: var(--muted); }
.stack > * + * { margin-top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.notice { font-size: .85rem; padding: 12px 14px; border-radius: 12px; background: var(--ground-2); color: var(--muted); }

/* ---------- Button rows ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btns.center { justify-content: center; }

/* ---------- Animated icons: each figure does what its game does. Paused on the finished frame until touched; .live ones run. ---------- */
.ic { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; flex: none; }
.ic * { transform-box: fill-box; transform-origin: center; }
.ic .ic-dot, .ic .ic-core, .ic .ic-seek, .ic .ic-star { fill: currentColor; stroke: none; }
.ic .ic-dot { animation: icWave 4.2s ease-in-out infinite; }
@keyframes icWave { 0%, 100% { opacity: 1; } 12% { opacity: .18; transform: scale(.6); } 30% { opacity: 1; transform: none; } }
.ic .ic-seek { animation: icSeek 4.6s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes icSeek { 0%, 72%, 100% { transform: none; } 18% { transform: translate(-7px, -5px); } 40% { transform: translate(6px, 4px); } 58% { transform: translate(-2px, 2px); } }
.ic .ic-ring { opacity: .35; animation: icFound 4.6s ease-out infinite; }
@keyframes icFound { 0%, 72% { opacity: .35; transform: none; } 80% { opacity: 1; transform: scale(1.35); } 100% { opacity: .35; transform: none; } }
.ic .ic-tri { fill: currentColor; fill-opacity: .9; stroke-width: 1; animation: icBuild 4.4s ease-in-out infinite; }
@keyframes icBuild { 0%, 100% { fill-opacity: .9; } 8% { fill-opacity: 0; } 36% { fill-opacity: 0; } 46% { fill-opacity: .9; } }
.ic .ic-wait { stroke-dasharray: 76; stroke-dashoffset: 0; transform: rotate(-90deg); opacity: .6; animation: icWait 5.2s linear infinite; }
@keyframes icWait { 0% { stroke-dashoffset: 0; } 6% { stroke-dashoffset: 76; } 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
.ic .ic-star { animation: icStar 5.2s ease-in-out infinite; }
@keyframes icStar { 0%, 100% { transform: none; opacity: 1; } 6% { transform: scale(.25); opacity: .2; } 76% { transform: scale(.25); opacity: .2; } 86% { transform: scale(1.3); opacity: 1; } }
/* the place figures */
.ic .ic-fill { fill: currentColor; stroke: none; }
.ic .ic-soft { fill: currentColor; fill-opacity: .28; stroke: none; }
.ic .a-swing { transform-origin: 0% 50%; animation: aSwing 5s ease-in-out infinite; }
.ic .a-swing2 { transform-origin: 100% 50%; animation: aSwing 5s ease-in-out infinite; }
@keyframes aSwing { 0%, 100% { transform: none; } 30%, 62% { transform: scaleX(.32); } }
.ic .a-cloud { animation: aCloud 7s ease-in-out infinite; }
@keyframes aCloud { 0%, 100% { transform: none; } 50% { transform: translateX(10px); } }
.ic .a-sink { animation: aSink 4.4s ease-in-out infinite; }
@keyframes aSink { 0%, 100% { transform: none; } 35%, 70% { transform: translateY(1.6px) scaleY(.82); } }
.ic .a-tilt { transform-origin: 100% 100%; animation: aTilt 4.6s ease-in-out infinite; }
@keyframes aTilt { 0%, 100% { transform: none; } 30%, 60% { transform: rotate(16deg); } }
.ic .a-steam { animation: aSteam 3s ease-in-out infinite; }
@keyframes aSteam { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .1; transform: translateY(-3px); } }
.ic .a-glow { animation: aGlow 4s ease-in-out infinite; }
@keyframes aGlow { 0%, 100% { fill: transparent; } 50% { fill: currentColor; fill-opacity: .55; } }
.ic .a-rung { animation: aRung 3.2s ease-in-out infinite; }
@keyframes aRung { 0%, 100% { opacity: 1; } 18% { opacity: .15; } 36% { opacity: 1; } }
.ic .a-flame { transform-origin: 50% 100%; animation: aFlame 1.6s ease-in-out infinite; }
@keyframes aFlame { 0%, 100% { transform: none; } 25% { transform: scale(.92, 1.1) skewX(-4deg); } 55% { transform: scale(1.05, .9) skewX(3deg); } 80% { transform: scale(.96, 1.06); } }
.ic .a-ripple { animation: aRipple 2.6s ease-out infinite; }
@keyframes aRipple { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
.ic .a-spark { animation: aSpark 2.1s ease-out infinite; }
@keyframes aSpark { 0% { transform: translateY(4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(2px, -9px); opacity: 0; } }
.ic .a-sway { transform-origin: 50% 100%; animation: aSway 3.8s ease-in-out infinite; }
@keyframes aSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
.ic .a-draw { stroke-dasharray: 40; animation: aDraw 4.4s ease-in-out infinite; }
@keyframes aDraw { 0% { stroke-dashoffset: 0; } 10% { stroke-dashoffset: 40; } 70%, 100% { stroke-dashoffset: 0; } }
.ic .a-twinkle { animation: aTwinkle 2.8s ease-in-out infinite; }
@keyframes aTwinkle { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(.55); opacity: .4; } }
.ic .a-shoot { stroke-dasharray: 10; animation: aShoot 4.8s ease-in infinite; }
@keyframes aShoot { 0%, 60% { stroke-dashoffset: 0; opacity: 1; } 61% { stroke-dashoffset: 10; opacity: 1; } 75% { stroke-dashoffset: -10; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.ic .a-write { stroke-dasharray: 7; animation: aWrite 3.6s ease-in-out infinite; }
@keyframes aWrite { 0% { stroke-dashoffset: 0; } 8% { stroke-dashoffset: 7; } 40%, 100% { stroke-dashoffset: 0; } }
.card:hover svg.ic *, .card:focus-visible svg.ic * { animation-play-state: running; }
/* quiet on the finished frame until a hand comes near (the shorthands above reset play-state, so these sit after them) */
svg.ic:not(.live) * { animation-play-state: paused; }
a:hover svg.ic *, a:focus-visible svg.ic *, button:hover svg.ic *, button:focus-visible svg.ic * { animation-play-state: running; }
.btn .ic { margin-right: 2px; }
.portal .door { grid-template-columns: 40px 1fr auto; }
.portal .door-ic { color: #E2C48A; display: grid; place-items: center; }
.portal .door.walked .door-ic { color: rgba(245,240,232,.5); }
.foot-play a { display: inline-flex; align-items: center; gap: 8px; }
.foot-play .ic { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ic * { animation: none !important; } }
.hero-ic { display: block; color: #fff; margin-bottom: 14px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
.card .num .ic { vertical-align: -6px; margin-right: 8px; color: var(--accent); }

/* ---------- The dock (bottom left): notes and markers ---------- */
.dock { position: fixed; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
body.play .dock { bottom: auto; top: max(58px, calc(env(safe-area-inset-top) + 48px)); }
.notes-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: 500 .75rem/1 "DM Sans"; padding: 10px 14px; border-radius: 99px; background: rgba(245,240,232,.94); color: #1A2218; box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 0 0 1px rgba(26,34,24,.08); }
.notes-btn:focus-visible { outline: 2px solid #C9A96E; outline-offset: 2px; }
.notes-btn[aria-pressed="true"] { background: #C9A96E; }
.notes-btn.gbtn { background: #1A2218; color: #F5F0E8; }
.nb-ic { display: grid; gap: 2px; width: 12px; }
.nb-ic i { height: 1.5px; background: currentColor; border-radius: 2px; transform-origin: left; }
.nb-ic i:nth-child(2) { width: 75%; } .nb-ic i:nth-child(3) { width: 55%; }
.notes-btn[aria-pressed="true"] .nb-ic i { animation: nbWrite 2.6s ease-in-out infinite; }
.notes-btn[aria-pressed="true"] .nb-ic i:nth-child(2) { animation-delay: .25s; } .notes-btn[aria-pressed="true"] .nb-ic i:nth-child(3) { animation-delay: .5s; }
@keyframes nbWrite { 0%, 100% { transform: scaleX(1); } 15% { transform: scaleX(.15); } 45% { transform: scaleX(1); } }

/* ---------- A note before each part of the page ---------- */
.dnote { position: relative; z-index: 5; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; max-width: 720px; margin: 14px auto; padding: 14px 16px 14px 14px; width: calc(100% - 32px); box-sizing: border-box; border-radius: 14px; background: #FBF6EC; color: #1A2218; box-shadow: inset 3px 0 0 #C9A96E, 0 10px 30px rgba(0,0,0,.18); font: 400 .9rem/1.5 "DM Sans"; animation: dnIn .8s cubic-bezier(.2,.7,.2,1) both; text-align: left; }
.dnote b { display: block; font: 600 .95rem/1.3 "DM Sans"; margin-bottom: 2px; }
.dnote p { margin: 0; color: #2E3A2B; }
.dnote small { display: block; margin-top: 6px; color: #6B5A3A; font-size: .78rem; }
.dn-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #1A2218; color: #E2C48A; font: 600 .72rem/1 "DM Sans"; flex: none; }
.dnote.flash { animation: dnFlash 1.6s ease; }
@keyframes dnIn { from { opacity: 0; transform: translateY(8px); clip-path: inset(0 100% 0 0 round 14px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 14px); } }
@keyframes dnFlash { 0%, 100% { box-shadow: inset 3px 0 0 #C9A96E, 0 10px 30px rgba(0,0,0,.18); } 30% { box-shadow: inset 3px 0 0 #C9A96E, 0 0 0 6px rgba(201,169,110,.55); } }
.top + .dnote, main > .dnote:first-child { margin-top: 84px; }
html.notes .dn-target { outline: 1.5px dashed rgba(201,169,110,.75); outline-offset: -6px; }
html.notes .passage.dn-target { outline-offset: -10px; }

/* ---------- The guide (a side panel; a sheet on phones) ---------- */
.guide { position: fixed; z-index: 150; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: #FBF6EC; color: #1A2218; box-shadow: -20px 0 60px rgba(0,0,0,.25); transform: translateX(104%); transition: transform .55s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; font: 400 .95rem/1.55 "DM Sans"; }
.guide.open { transform: none; }
.g-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid rgba(26,34,24,.1); }
.g-tabs { display: flex; gap: 4px; background: rgba(26,34,24,.06); padding: 4px; border-radius: 99px; }
.g-tabs button, .g-x { all: unset; cursor: pointer; font: 500 .8rem/1 "DM Sans"; padding: 9px 12px; border-radius: 99px; }
.g-tabs button[aria-selected="true"] { background: #1A2218; color: #F5F0E8; }
.g-x { color: #5E6659; } .g-tabs button:focus-visible, .g-x:focus-visible { outline: 2px solid #C9A96E; }
.g-body { overflow-y: auto; padding: 18px 20px 40px; overscroll-behavior: contain; }
.g-layer { font: 600 .68rem/1 "DM Sans"; letter-spacing: .18em; text-transform: uppercase; color: #9A7A3E; }
.guide h2 { font: 500 1.6rem/1.2 Lora, serif; margin: .4rem 0 .6rem; }
.guide h3 { font: 600 .74rem/1 "DM Sans"; letter-spacing: .14em; text-transform: uppercase; color: #5E6659; margin: 1.6rem 0 .6rem; }
.g-purpose { font: italic 400 1.05rem/1.55 Lora, serif; margin: 0 0 .8rem; }
.g-who b { font-weight: 600; margin-right: 4px; }
.g-secs, .g-data, .g-l ul { margin: 0; padding: 0; list-style: none; }
.g-secs a { display: flex; gap: 10px; align-items: center; padding: 7px 0; text-decoration: none; }
.g-secs a:hover { color: #9A7A3E; }
.g-data li { padding: 6px 0 6px 14px; border-left: 2px solid #E2C48A; margin-bottom: 6px; font-size: .88rem; }
.g-l { margin-bottom: 1.2rem; } .g-l p { margin: 0 0 .5rem; font-size: .9rem; color: #2E3A2B; }
.g-l li a { display: block; padding: 6px 10px; border-radius: 8px; text-decoration: none; }
.g-l li a:hover { background: rgba(201,169,110,.15); }
.g-l li.here a { background: #1A2218; color: #E2C48A; }
.g-l li.here a::after { content: "  · you are here"; color: rgba(245,240,232,.6); font-size: .8rem; }
.constel { width: 100%; height: auto; margin: 10px 0 0; overflow: visible; }
.constel .ln { fill: none; stroke: #C9A96E; stroke-width: 1.2; stroke-dasharray: 140; stroke-dashoffset: 140; animation: lnDraw 1.2s cubic-bezier(.4,0,.2,1) forwards; }
.constel .ln.out { stroke: #1A2218; stroke-opacity: .5; }
@keyframes lnDraw { to { stroke-dashoffset: 0; } }
.constel circle { fill: #FBF6EC; stroke: #1A2218; stroke-width: 1.2; }
.constel .me circle { fill: #1A2218; stroke: #C9A96E; stroke-width: 3; animation: meBreath 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes meBreath { 50% { stroke-width: 6; } }
.constel .src circle { fill: #E2C48A; stroke: none; }
.constel text { font: 500 9.5px "DM Sans"; fill: #2E3A2B; }
.constel .me text { font: 600 11px Lora, serif; }
.constel a:hover text { fill: #9A7A3E; text-decoration: underline; }
@media (max-width: 700px) { .guide { top: auto; height: 82vh; width: 100%; border-radius: 20px 20px 0 0; transform: translateY(104%); box-shadow: 0 -20px 60px rgba(0,0,0,.3); } .guide.open { transform: none; } }
@media (prefers-reduced-motion: reduce) { .dnote, .constel .ln, .guide { animation: none !important; transition: none !important; } .constel .ln { stroke-dashoffset: 0; } }
.notes-btn[hidden] { display: none; }
.passage .p-layer.has-video::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(to bottom, transparent, rgba(4,7,5,.62)); pointer-events: none; }

/* ---------- Audit, Oct 14 ---------- */
/* a visible focus ring wherever a control was reset to plain */
:root body :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid #C9A96E; outline-offset: 2px; }
/* the owners' column in the footer appears with their notes on */
.foot .owner-only { display: none; } html.notes .foot .owner-only { display: block; }
/* phones: the header fits, the dock gets small */
@media (max-width: 420px) {
  .top { gap: 6px; padding: 10px 10px; } .brand { font-size: .82rem; } .brand .pt { margin-left: -8px; }
  .season-select { padding: 7px 6px; max-width: 86px; } .menu-btn { padding: 7px 11px; }
}
@media (max-width: 600px) {
  .dock { gap: 6px; left: 8px; }
  .dock .notes-btn .nb-t { display: none; } .dock .notes-btn { padding: 0; width: 38px; height: 38px; justify-content: center; }
  .dock .notes-btn.gbtn { width: auto; padding: 0 12px; height: 34px; }
  .dock .marker-toggle { padding: 8px 10px; font-size: .7rem; }
}
body.play .dock { left: auto; right: 10px; top: max(54px, calc(env(safe-area-inset-top) + 46px)); bottom: auto; align-items: flex-end; }

/* ---------- Flow: ripples from the point, the swell, the sound (assets/js/flow.js) ---------- */
.flow-rings { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; contain: strict; }
.flow-rings i { position: absolute; border-radius: 50%; box-sizing: border-box; opacity: 0; will-change: transform, opacity; }
.hero .bg > img, .hero .bg > video { transition: transform .35s ease-out; }
.flow-sound { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: 500 .75rem/1 "DM Sans"; padding: 10px 14px; border-radius: 99px; background: rgba(245,240,232,.94); color: #1A2218; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.flow-sound:focus-visible { outline: 2px solid #C9A96E; outline-offset: 2px; }
.flow-sound[aria-pressed="true"] { background: #1A2218; color: #F5F0E8; }
.flow-sound .wave { display: inline-flex; gap: 2px; align-items: center; height: 12px; }
.flow-sound .wave i { width: 2px; height: 4px; border-radius: 2px; background: currentColor; }
.flow-sound[aria-pressed="true"] .wave i { animation: flowWave 1.1s ease-in-out infinite; }
.flow-sound[aria-pressed="true"] .wave i:nth-child(2) { animation-delay: .18s; } .flow-sound[aria-pressed="true"] .wave i:nth-child(3) { animation-delay: .36s; }
@keyframes flowWave { 50% { height: 12px; } }
@media (max-width: 600px) { .flow-sound .t { display: none; } .flow-sound { width: 38px; height: 38px; padding: 0; justify-content: center; } .flow-sound[aria-pressed="true"] .t { display: none; } }
@media (prefers-reduced-motion: reduce) { .flow-sound .wave i { animation: none !important; } .hero .bg > img, .hero .bg > video { transform: none !important; } }

/* ---------- Scenes: the place games (assets/js/scenes/) ---------- */
.scene-band .wrap { max-width: 980px; }
.sc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.sc-head h2 { margin: .15rem 0 0; }
.sc-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #1A2218; color: #E2C48A; flex: none; }
.scene { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #070B09; color: #F5F0E8; outline: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; isolation: isolate; }
.scene:focus-visible { box-shadow: 0 0 0 3px #C9A96E; }
@media (max-width: 700px) { .scene { aspect-ratio: 4 / 5; border-radius: 18px; } }
.sc-stage { position: absolute; inset: 0; }
.sc-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc-edge { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(245,240,232,.08); z-index: 3; }
.sc-edge i { display: block; height: 100%; background: linear-gradient(90deg, rgba(226,196,138,.2), #E2C48A); transform: scaleX(0); transform-origin: left; transition: transform .6s ease; box-shadow: 0 0 14px rgba(226,196,138,.6); }
.sc-voice { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 20px; background: linear-gradient(to bottom, rgba(7,11,9,0), rgba(7,11,9,.78) 45%); text-align: center; z-index: 2; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity 1.4s ease, transform 1.4s ease; text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.sc-voice.on { opacity: 1; transform: none; }
.scene.voice-top .sc-voice { bottom: auto; top: 0; padding: 20px 22px 40px; background: linear-gradient(to top, rgba(7,11,9,0), rgba(7,11,9,.78) 45%); }
.scene.ending .sc-voice { opacity: 0; }
.sc-voice blockquote { margin: 0 auto .3rem; max-width: 640px; font: italic 400 clamp(1rem, 2.4vw, 1.3rem)/1.45 Lora, serif; }
.sc-voice span { font: 500 .78rem/1 "DM Sans"; color: rgba(245,240,232,.72); }
.sc-begin, .sc-end { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: radial-gradient(ellipse at center, rgba(7,11,9,.72), rgba(7,11,9,.96)); transition: opacity .7s ease; }
.sc-begin p, .sc-end p { margin: 0; max-width: 460px; font: italic 400 clamp(1.05rem, 2.6vw, 1.35rem)/1.45 Lora, serif; color: #F5F0E8; }
.sc-begin.gone { opacity: 0; pointer-events: none; }
.sc-end[hidden] { display: none; }
.sc-say { min-height: 1.5em; margin: 12px 0 0; color: var(--muted, #5E6659); font-size: .95rem; text-align: center; }
.sc-note { margin: 4px 0 0; font-size: .85rem; color: var(--muted, #5E6659); text-align: center; }
@media (prefers-reduced-motion: reduce) { .sc-voice, .sc-edge i, .sc-begin { transition: none; } }