/* Avalon v2. Voice and structure: vision/SOUL.md. Colour: night, ivory, one amber. */
/* FONTS:START  (system chosen by the main agent from website/fonts-lab; all OFL, see fonts/LICENSES) */
@font-face { font-family: "Le Murmure"; font-display: swap; src: url(../fonts/le-murmure.woff2) format("woff2"); }
@font-face { font-family: "Anybody"; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; src: url(../fonts/anybody.woff2) format("woff2"); }
@font-face { font-family: "Doto"; font-weight: 700; font-display: swap; src: url(../fonts/doto.woff2) format("woff2"); }
@font-face { font-family: "Departure Mono"; font-display: swap; src: url(../fonts/departure-mono.woff2) format("woff2"); }
@font-face { font-family: "Redaction"; font-display: swap; src: url(../fonts/redaction-0.woff2) format("woff2"); }
@font-face { font-family: "Redaction 35"; font-display: swap; src: url(../fonts/redaction-35.woff2) format("woff2"); }
@font-face { font-family: "Redaction 50"; font-display: swap; src: url(../fonts/redaction-50.woff2) format("woff2"); }
@font-face { font-family: "Redaction 70"; font-display: swap; src: url(../fonts/redaction-70.woff2) format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 400 700; font-display: swap; src: url(../fonts/familjen-latin.woff2) format("woff2"); }
:root {
  --f-logo: "Familjen Grotesk", sans-serif;            /* logo lockup only */
  --f-display: "Le Murmure", "Arial Narrow", sans-serif; /* big headlines */
  --f-machine: "Doto", "Departure Mono", monospace;     /* the machine voice, 18px and up */
  --f-voice: "Anybody", system-ui, sans-serif;
  --f-text: "Anybody", system-ui, sans-serif;
  --f-mono: "Departure Mono", ui-monospace, monospace;  /* labels, timestamps, records */
  --w-display: 400;
  --track-display: 0;
}
/* FONTS:END */

:root {
  --night: #12111A;
  --night-2: #1C1B26;
  --night-3: #252433;
  --line: rgba(243, 239, 230, .12);
  --ivory: #F3EFE6;
  --ivory-2: #D6D1C6;
  --mist: #9A978F;
  --amber: #E39B2D;
  --amber-hi: #F2B84B;
  --blue: #7FA6FF;
  --red: #F26B5B;
  --gutter: clamp(16px, 5vw, 80px);
  --max: 1320px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--ivory); font: 400 18px/1.55 var(--f-text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: var(--w-display); letter-spacing: var(--track-display); line-height: .92; }
::selection { background: var(--amber); color: var(--night); }
:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 4px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--amber); color: var(--night); padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.fine { color: var(--mist); font-size: 15px; }
.label, .when { font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-hi); }
.label { margin-bottom: 40px; }
.when { margin-bottom: 14px; }
.big { font: var(--w-display) clamp(3.4rem, 10vw, 10.5rem)/.86 var(--f-display); letter-spacing: var(--track-display); margin-bottom: .3em; }
/* small headings (under ~72px) use Anybody: Le Murmure is for 72px and up */
.h-ui { font-family: var(--f-text) !important; font-weight: 650 !important; font-stretch: 88%; letter-spacing: -.02em !important; }
.ln { display: block; }
.aside { font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.4; color: var(--ivory-2); max-width: 34ch; }
.led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.led-amber { background: var(--amber); box-shadow: 0 0 12px var(--amber), 0 0 3px var(--amber-hi); animation: think 2.4s ease-in-out infinite; }
.led-blue { background: var(--blue); box-shadow: 0 0 10px var(--blue); }
@keyframes think { 50% { opacity: .45; box-shadow: 0 0 4px var(--amber); } }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--amber-hi); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; font: 700 16px/1 var(--f-text); text-decoration: none; cursor: pointer; color: var(--night); background: var(--amber); border: 2px solid var(--amber); border-radius: 999px; padding: 17px 28px; transition: background .2s, border-color .2s, color .2s; }
.btn:hover { background: var(--amber-hi); border-color: var(--amber-hi); }
.btn-ghost { background: transparent; color: var(--ivory); border-color: rgba(243,239,230,.35); }
.btn-ghost:hover { background: var(--ivory); color: var(--night); border-color: var(--ivory); }
.btn-small { padding: 11px 18px; font-size: 14px; }

/* nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px var(--gutter); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.nav.scrolled { background: rgba(18,17,26,.84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 23px/1 var(--f-logo); letter-spacing: -.02em; }
.lockup img { width: 28px; height: 28px; transform: scale(1.35); }
.nav-day { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-left: 6px; }
.nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav nav a { text-decoration: none; font-size: 14px; color: var(--ivory-2); }
.nav nav a:hover { color: var(--ivory); }
@media (max-width: 960px) { .nav nav { display: none; } }
@media (max-width: 420px) { .nav-day { display: none; } }

/* THE CRACK: real text in .crack-a, a decorative copy in .crack-b (aria-hidden).
   One long notched split across the line (about 14deg on Le Murmure's tall letters), lower piece displaced like the logo. */
.crack { --y0: 40%; --y1: 62%; --d: calc(var(--y1) - var(--y0)); --shift: translate(min(.02em, 4px), min(.035em, 6px)); position: relative; display: inline-block; white-space: nowrap; }
.crack-a, .crack-b { display: block; }
/* one cut between x-height and baseline, two soft zigzags like the logo; the gap itself is the crack */
.crack-a { clip-path: polygon(-10% -60%, 110% -60%, 110% var(--y1), 100% var(--y1), 48% calc(var(--y0) + var(--d) * 0.48 - 3%), 36% calc(var(--y0) + var(--d) * 0.36 + 4%), 0 var(--y0), -10% var(--y0)); }
.crack-b { position: absolute; inset: 0; clip-path: polygon(-10% var(--y0), 0 var(--y0), 36% calc(var(--y0) + var(--d) * 0.36 + 4%), 48% calc(var(--y0) + var(--d) * 0.48 - 3%), 100% var(--y1), 110% var(--y1), 110% 160%, -10% 160%); transform: var(--shift); }
.js .reveal .crack-b { transform: none; transition: transform .7s cubic-bezier(.3,1.6,.5,1) .4s; }
.js .reveal.in .crack-b { transform: var(--shift); }

/* hero */
.hero { position: relative; min-height: min(100vh, 1000px); min-height: min(100svh, 1000px); display: flex; align-items: center; overflow: hidden; isolation: isolate; background: var(--night) url(../assets/hero-poster.webp) 80% 50% / cover no-repeat; }
#field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0; transition: opacity 1.2s ease; }
#field.live { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(18,17,26,.75) 0%, rgba(18,17,26,.3) 45%, rgba(18,17,26,0) 70%), linear-gradient(to bottom, rgba(18,17,26,0) 75%, var(--night) 100%); }
.hero-inner { width: 100%; max-width: var(--max); margin: 0 auto; padding: 104px var(--gutter) 56px; }
.kicker { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-2); margin-bottom: 28px; }
.hero h1 { font-size: clamp(3.6rem, 10.2vw, 11rem); line-height: .84; margin-bottom: 26px; }
@media (max-width: 767px) { .hero h1 { font-size: 16.4vw; } }
.hero h1 .ln:last-child { color: var(--amber); }
.hero-voice { font: 400 clamp(1.1rem, 1.6vw, 1.45rem)/1.35 var(--f-voice); color: var(--ivory-2); max-width: 42ch; margin-bottom: 30px; }
.hero-voice b { color: var(--ivory); font-weight: 600; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 767px) {
  .hero { align-items: flex-end; background-size: 220% auto; background-position: 74% 0; }
  .hero::after { background: linear-gradient(to bottom, rgba(18,17,26,0) 26%, rgba(18,17,26,.82) 50%, var(--night) 100%); }
  .hero-inner { padding-top: min(40vh, 360px); padding-bottom: 40px; }
  .cta .btn { flex: 1 1 auto; }
}

/* the site remembers you */
.memory { margin-top: 26px; font-size: 15px; color: var(--ivory-2); max-width: 720px; }
.mem-line { min-height: 1.2em; margin-bottom: clamp(24px, 2.6vw, 38px); }
.machine { font: 700 clamp(20px, 2.1vw, 30px)/1.1 var(--f-machine); letter-spacing: .04em; color: var(--blue); margin: 0; transition: color 1.4s ease; }
.machine.settled { color: var(--amber-hi); }
.mem-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.memory form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.memory input { width: 13ch; background: rgba(28,27,38,.85); border: 1px solid rgba(243,239,230,.25); border-radius: 999px; color: var(--ivory); font: 400 15px var(--f-text); padding: 8px 14px; }
.memory input:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 2px; }
.memory .mem-btn { background: none; border: 1px solid rgba(243,239,230,.35); border-radius: 999px; color: var(--ivory); font: 600 14px var(--f-text); padding: 8px 14px; cursor: pointer; }
.memory .mem-btn:hover { background: var(--ivory); color: var(--night); }
.memory .mem-hello { font-weight: 600; color: var(--ivory); }
.memory .mem-small { font-size: 13px; color: var(--mist); margin: 10px 0 0; }

/* the stranger + New chat */
.stranger, .name, .amber, .believe, .rituals, .refuse, .company { padding: clamp(110px, 13vw, 200px) 0; border-top: 1px solid var(--line); }
.stranger .aside { margin: 0 0 clamp(56px, 8vw, 110px); }
.newchat-stage { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: clamp(64px, 9vw, 130px); }
.newchat { position: relative; width: 7.4em; height: 1.7em; padding: 0; border: 0; background: none; cursor: pointer; font: 600 clamp(2.1rem, 6.2vw, 5.8rem)/1 var(--f-text); font-stretch: 85%; letter-spacing: -.03em; color: var(--ivory); }
.nc-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .28em; border: .045em solid currentColor; border-radius: 999px; color: rgba(243,239,230,.62); transition: transform .6s cubic-bezier(.3,1.5,.5,1), color .4s; }
.nc-face .plus { font-weight: 400; }
/* crack through the button: 14deg zigzag, top-left to bottom-right (button is 7.4em x 1.7em) */
.nc-a { clip-path: polygon(.3em 0, 100% 0, 100% 100%, 7.1em 100%, 5.5em 1.2em, 5.05em 1.27em, 3.2em .62em, 2.75em .7em); }
.nc-b { clip-path: polygon(0 0, .3em 0, 2.75em .7em, 3.2em .62em, 5.05em 1.27em, 5.5em 1.2em, 7.1em 100%, 0 100%); transform: translate(-.05em, .08em); }
.newchat:hover .nc-b, .newchat.broken .nc-b { transform: translate(-.14em, .22em) rotate(1.5deg); }
.newchat:hover .nc-face, .newchat.broken .nc-face { color: rgba(243,239,230,.38); }
.newchat:focus-visible { outline-offset: 10px; border-radius: 999px; }
@media (max-width: 600px) { .newchat { font-size: 10.5vw; } }
.newchat-say { font-family: var(--f-mono); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); margin: 0; min-height: 1.4em; }
.newchat-say.said { color: var(--amber-hi); }
.stranger .ours { color: var(--amber); margin: 0; }

/* the name: a dictionary entry */
.dict-word { font-size: clamp(7rem, 30vw, 30rem); line-height: .78; margin-left: -.02em; padding-top: .12em; }
.dict-pron { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; margin: 26px 0 56px; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--mist); }
.dict-pron span { font-family: var(--f-mono); }
.dict-defs { list-style: none; counter-reset: d; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.dict-defs li { counter-increment: d; padding-top: 22px; border-top: 2px solid var(--ivory); font-size: 17px; color: var(--ivory-2); }
.dict-defs li::before { content: counter(d); display: block; font: var(--w-display) 56px/1 var(--f-display); color: var(--amber); margin-bottom: 18px; }
.dict-defs strong { display: block; font: 650 clamp(1.4rem, 2vw, 1.9rem)/1.1 var(--f-text); letter-spacing: -.02em; color: var(--ivory); margin-bottom: 12px; }
@media (max-width: 860px) { .dict-defs { grid-template-columns: 1fr; } }

/* Day N */
.day { padding: clamp(90px, 11vw, 170px) 0; background: var(--amber); color: var(--night); }
.day ::selection { background: var(--night); color: var(--amber); }
.day .label { color: var(--night); opacity: .7; }
.day-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(24px, 4vw, 64px); }
.day-word { font: var(--w-display) clamp(6rem, 18vw, 18rem)/.78 var(--f-display); margin: 0; }
.dots { display: block; height: clamp(110px, 16vw, 250px); width: auto; max-width: 100%; }
.dots circle { fill: rgba(18,17,26,.14); }
.dots circle.on { fill: var(--night); }
.js .dots circle.on { transition: fill .35s ease; }
.js .dots:not(.lit) circle.on { fill: rgba(18,17,26,.14); }
.day-text { font-size: clamp(1.15rem, 2vw, 1.7rem); line-height: 1.3; font-weight: 500; max-width: 42ch; margin: 40px 0 0; }
.day-text b { font-weight: 700; }

/* amber */
.leds { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); margin-bottom: 48px; }
.ledbig { display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.ledbig i { width: 22px; height: 22px; border-radius: 50%; }
.ledbig.b i { background: #3a4a6e; }
.ledbig.r i { background: #6e3a36; }
.ledbig.a { color: var(--amber-hi); }
.ledbig.a i { background: var(--amber); box-shadow: 0 0 28px var(--amber), 0 0 6px var(--amber-hi); animation: think 2.4s ease-in-out infinite; }
.amber .big .dim { color: rgba(243,239,230,.32); }
.amber-line { color: var(--amber); }

/* beliefs */
.beliefs { list-style: none; margin: 0; padding: 0; }
.beliefs li { display: grid; grid-template-columns: clamp(60px, 12vw, 200px) 1fr; gap: 20px; padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid var(--line); }
.beliefs li:last-child { border-bottom: 1px solid var(--line); }
.beliefs .num { font: var(--w-display) clamp(4rem, 10vw, 9rem)/.8 var(--f-display); color: var(--amber); }
.b-head { font: var(--w-display) clamp(3rem, 6.4vw, 6.4rem)/.9 var(--f-display); margin-bottom: 18px; max-width: 20ch; }
.b-body { color: var(--ivory-2); max-width: 52ch; margin: 0; font-size: clamp(1rem, 1.3vw, 1.15rem); }
@media (max-width: 600px) { .beliefs li { grid-template-columns: 1fr; } }

/* rituals */
.rituals .big { margin-bottom: 28px; }
.realnow { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 clamp(40px, 6vw, 80px); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; max-width: 900px; }
.realnow div { padding: 20px 24px; }
.realnow div + div { border-left: 1px solid var(--line); }
.realnow h3 { font: 500 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amber-hi); margin-bottom: 12px; }
.realnow div + div h3 { color: var(--mist); }
.realnow ul { margin: 0; padding-left: 18px; color: var(--ivory-2); font-size: 16px; }
@media (max-width: 600px) { .realnow { grid-template-columns: 1fr; } .realnow div + div { border-left: 0; border-top: 1px solid var(--line); } }
.ritual { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 100px); align-items: center; padding: clamp(56px, 7vw, 100px) 0; border-top: 1px solid var(--line); }
.ritual.flip .r-text { order: 2; }
.ritual h3 { font-size: clamp(4rem, 9.6vw, 9.4rem); margin-bottom: 22px; }
.r-text > p:not(.when) { color: var(--ivory-2); max-width: 40ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.r-text .fine { color: var(--mist) !important; font-size: 15px !important; }
@media (max-width: 860px) { .ritual { grid-template-columns: 1fr; } .ritual.flip .r-text { order: 0; } }

.fig { margin: 0; }
.fig figcaption { margin-top: 12px; font: 500 11px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.fig figcaption b { color: var(--ivory-2); font-weight: 500; }
.card { background: var(--night-2); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.card-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.tag { border: 1px solid rgba(127,166,255,.45); color: var(--blue); border-radius: 999px; padding: 4px 9px; font-size: 10px; white-space: nowrap; }
.bubble { max-width: 82%; margin: 0; padding: 12px 16px; border-radius: 18px; font-size: 16px; line-height: 1.4; }
.r-name { padding-bottom: 22px; display: flex; flex-direction: column; gap: 12px; }
.r-name .card-bar { margin-bottom: 10px; }
.bubble.ai { align-self: flex-start; margin-left: 20px; background: rgba(227,155,45,.1); border: 1px solid rgba(227,155,45,.28); border-bottom-left-radius: 6px; }
.bubble.you { align-self: flex-end; margin-right: 20px; background: var(--night-3); border-bottom-right-radius: 6px; font-weight: 600; }
.moon { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset -4px -2px 0 0 var(--blue); transform: rotate(-20deg); }
.dream-steps { list-style: none; margin: 0; padding: 8px 0; }
.dream-steps li { display: flex; align-items: center; gap: 16px; padding: 16px 20px; font-size: 17px; color: var(--mist); transition: color .5s; }
.dream-steps li span { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(243,239,230,.25); font: 500 12px var(--f-mono); transition: background .5s, color .5s, border-color .5s; }
.dream-steps li.on { color: var(--ivory); }
.dream-steps li.on span { background: var(--amber); border-color: var(--amber); color: var(--night); }
.note-lead { padding: 20px 20px 4px; margin: 0; font: 650 clamp(1.3rem, 2vw, 1.7rem)/1.15 var(--f-text); letter-spacing: -.02em; }
.note-list { margin: 0; padding: 8px 20px 4px 44px; }
.note-list li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ivory-2); font-size: 16px; }
.note-list li::marker { font-family: var(--f-mono); color: var(--amber-hi); }
.note-list p { margin: 0 0 8px; }
.undo { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; display: inline-block; }
.note-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px 18px; margin: 0; font-size: 13px; color: var(--mist); }
.lake-map { position: relative; aspect-ratio: 4 / 3; }
#lake { position: absolute; inset: 0; width: 100%; height: 100%; }
.lake-label { position: absolute; transform: translate(-50%, -50%); font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(243,239,230,.6); white-space: nowrap; }
.lake-label.gold { color: var(--amber-hi); }
.lake-pin { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--amber-hi); box-shadow: 0 0 16px var(--amber); }
.lake-pin i { position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--amber-hi); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.lake-card { position: absolute; left: 57%; top: 60%; width: min(210px, 40%); padding: 14px 16px; background: rgba(28,27,38,.94); border: 1px solid rgba(242,184,75,.35); border-radius: 14px; }
.lake-card p { margin: 0; }
.lake-card .k { font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-hi); margin-bottom: 8px; }
.lake-card .t { font: 650 17px/1.2 var(--f-text); }
.lake-card .s { font-size: 12px; color: var(--mist); margin-top: 4px; }
.lake-card .a { display: flex; gap: 14px; margin-top: 10px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ivory-2); }
.lake-card .a span:last-child { color: var(--red); }
@media (max-width: 520px) { .lake-card { left: auto; right: 10px; top: auto; bottom: 10px; width: 58%; } .lake-label { font-size: 9px; } }
.crack-report { margin: 0; padding: 10px 20px 0; }
.crack-report div { padding: 14px 0; border-bottom: 1px dashed rgba(243,239,230,.18); }
.crack-report dt { font: 650 20px/1.1 var(--f-text); margin-bottom: 8px; }
.crack-report dd { margin: 0; color: var(--ivory-2); font-size: 15px; }

/* The Lake: older memories in more degraded Redaction grades, the newest sharp */
.decay { list-style: none; margin: 30px 0 0; padding: 0; }
.decay li { display: flex; align-items: baseline; gap: 16px; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.35; color: var(--ivory-2); }
.decay li span { font: 12px var(--f-mono); color: var(--mist); width: 3.2em; flex: none; }
.decay .g70 { font-family: "Redaction 70", serif; opacity: .55; }
.decay .g50 { font-family: "Redaction 50", serif; opacity: .7; }
.decay .g35 { font-family: "Redaction 35", serif; opacity: .85; }
.decay .g0 { font-family: "Redaction", serif; color: var(--ivory); }
.decay-note { margin-top: 14px; }

/* refuse */
.refusals { list-style: none; margin: 0; padding: 0; }
.refusals li { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px 40px; align-items: center; padding: clamp(18px, 2.4vw, 30px) 0; border-top: 1px solid var(--line); }
.refusals li:last-child { border-bottom: 1px solid var(--line); }
.refusals s { font: var(--w-display) clamp(3.2rem, 8.4vw, 8.4rem)/.9 var(--f-display); color: var(--ivory); text-decoration: none; position: relative; justify-self: start; }
.refusals s::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 54%; height: .08em; background: var(--amber); transform: rotate(-2deg) scaleX(0); transform-origin: left center; transition: transform .7s cubic-bezier(.6,0,.2,1) .2s; }
.refusals li.in s::after { transform: rotate(-2deg) scaleX(1); }
.refusals span { color: var(--ivory-2); font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 40ch; }
.refusals .rn { display: block; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-bottom: 8px; }
@media (max-width: 760px) { .refusals li { grid-template-columns: 1fr; } }

/* company */
.company-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 7vw, 120px); margin-top: 30px; }
.story p { color: var(--ivory-2); font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 50ch; }
.story .story-pull { font: 650 clamp(1.7rem, 3vw, 2.7rem)/1.05 var(--f-text); letter-spacing: -.02em; color: var(--amber); margin: 1em 0; }
.place { font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.traits { list-style: none; margin: 0; padding: 0; align-self: start; }
.traits li { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.traits li:last-child { border-bottom: 1px solid var(--line); }
.traits b { font: var(--w-display) clamp(2.8rem, 5vw, 4.8rem)/1 var(--f-display); }
.traits s { font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.research { margin-top: clamp(80px, 10vw, 150px); padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: 24px; background: var(--night-2); }
.research-line { font: 650 clamp(1.7rem, 3.4vw, 3rem)/1.05 var(--f-text); letter-spacing: -.02em; max-width: 24ch; }
.research .fine { max-width: 70ch; margin: 0; }
.hiring { margin-top: clamp(80px, 10vw, 150px); }
.hire-list { list-style: none; margin: 0 0 40px; padding: 0; }
.hire-list li { font: 650 clamp(1.5rem, 3vw, 2.6rem)/1.15 var(--f-text); letter-spacing: -.02em; color: var(--ivory-2); max-width: 30ch; }
@media (max-width: 860px) { .company-grid { grid-template-columns: 1fr; } }

/* join */
.join { padding: clamp(120px, 15vw, 220px) 0; border-top: 1px solid var(--line); background: radial-gradient(60% 55% at 50% 35%, rgba(227,155,45,.12), transparent 70%); }
.join-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.join-title { font-size: clamp(4.4rem, 19vw, 21rem); line-height: .84; margin-bottom: 40px; color: var(--amber); }
.join .aside { margin: 0 auto 40px; max-width: 40ch; }
.wl-form { width: 100%; max-width: 640px; }
.wl-row { display: flex; gap: 8px; padding: 6px; background: var(--night-2); border: 1px solid rgba(243,239,230,.2); border-radius: 999px; }
.wl-row:focus-within { border-color: var(--amber-hi); }
.wl-row input, .wl-row select { background: transparent; border: 0; color: var(--ivory); font: 400 17px var(--f-text); }
.wl-row input { flex: 1; min-width: 0; padding: 0 18px; }
.wl-row select { padding: 0 10px; color: var(--ivory-2); cursor: pointer; }
.wl-row select option { background: var(--night-2); }
.wl-row input::placeholder { color: rgba(154,151,143,.85); }
.wl-row input:focus-visible, .wl-row select:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 2px; }
.wl-check { display: inline-flex; gap: 10px; align-items: center; margin-top: 18px; font-size: 15px; color: var(--ivory-2); cursor: pointer; }
.wl-check input { width: 18px; height: 18px; accent-color: var(--amber); }
.wl-err { min-height: 1.6em; margin: 10px 0 0; color: var(--red); font-size: 15px; }
.wl-thanks-big { font: 650 clamp(2rem, 4.4vw, 3.6rem)/1.05 var(--f-text); letter-spacing: var(--track-display); color: var(--amber); margin-bottom: 12px; }
.wl-thanks:focus { outline: none; }
@media (max-width: 600px) { .wl-row { flex-direction: column; border-radius: 22px; } .wl-row input, .wl-row select { padding: 14px; } }

/* footer */
.footer { border-top: 1px solid var(--line); padding: 72px 0 48px; }
.foot { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; align-items: end; }
.lockup-lg { font-size: clamp(3rem, 8vw, 6.4rem); gap: 20px; letter-spacing: -.04em; }
.lockup-lg img { width: clamp(44px, 7vw, 88px); height: auto; transform: scale(1.4); }
.foot-line { justify-self: end; text-align: right; margin: 0; font: 650 clamp(1.3rem, 2.2vw, 2rem)/1.1 var(--f-text); letter-spacing: -.02em; color: var(--ivory-2); }
.foot-note { max-width: 56ch; margin: 0; }
.colophon { grid-column: 1 / -1; margin: 12px 0 0; font: 11px/1.7 var(--f-mono); letter-spacing: .06em; color: rgba(154,151,143,.75); }
.foot-meta { grid-column: 1 / -1; justify-self: start; text-align: left; margin: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); line-height: 1.8; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr; } .foot-line { justify-self: start; text-align: left; } }

/* ?motion=reduced (debug and screenshots): same as the OS setting */
.no-motion *, .no-motion *::before, .no-motion *::after { transition: none !important; animation: none !important; }

/* reveals */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .reveal .crack-b { transform: var(--shift); transition: none; }
  .refusals s::after { transform: rotate(-2deg) scaleX(1); transition: none; }
  .js .dots:not(.lit) circle.on { fill: var(--night); }
  .led-amber, .ledbig.a i, .lake-pin i { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}