/* zwesty · Huntress CTF 2026, Bloodborne edition. The main site's terminal type (VT323 titles, JetBrains Mono text)
   on a moonlit Yharnam night: blue-black stone, bone-white text, lamp gold, blood red. The hunters are marked in
   tarnished brass (Claude) and pale moon silver (the Homebase), both together in paleblood rose. Gold is the kill,
   blood red is death. Dark-only. */
:root {
  color-scheme: dark;
  --bg: #0a0b11; --panel: #11131b; --fg: #ddd8cc; --muted: #9c99a6; --faint: #66656f; --line: #23252f; --empty: #191b24;
  --ember: #d6b46a; --gold: #d6b46a; --blood: #9b1c30; --claude: #c79a4e; --home: #9b8ff0; --both: #c98a95; --hand: #8fa77a;
  --lamp: #f2dfae; --kill: #a6dcc6;
  --title: "VT323", "JetBrains Mono", monospace; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; color: var(--fg); font: 400 15.5px/1.65 var(--mono); background-color: var(--bg);
  background-image: radial-gradient(900px 520px at 70% -12%, rgb(170 184 214 / .09), transparent 65%),
    radial-gradient(1200px 700px at 50% 120%, rgb(179 18 46 / .08), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  background-attachment: fixed; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--title); font-weight: 400; line-height: .95; margin: 0; letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
.eyebrow { font: 500 11px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); opacity: .85; }

/* the opening screens: painted first, then faded away to reveal the page */
.intro { display: none; }
html.opening .intro { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 22px; background: #050506; }
html.opening body > :not(.intro):not(script) { opacity: 0; }
html.opening, html.opening body { overflow: hidden; }   /* no scrolling the hidden page while the opening plays */
body > * { transition: opacity .7s ease; }
.intro.leaving { opacity: 0; transition: opacity .8s ease; }
.intro-text { font: 400 clamp(46px, 8vw, 96px)/1 var(--title); letter-spacing: .1em; text-transform: uppercase; opacity: 0; }
.intro.won .intro-text { color: var(--kill); text-shadow: 0 0 22px rgb(120 205 172 / .7), 0 0 60px rgb(120 205 172 / .3); }
.intro.died .intro-text { color: #b3122e; text-shadow: 0 0 26px rgb(179 18 46 / .65); letter-spacing: .16em; }
.lamp-intro .intro-text { color: var(--lamp); font-size: clamp(36px, 6vw, 72px); text-shadow: 0 0 22px rgb(255 230 168 / .45); }
.intro.play .intro-text { animation: verdict 1.9s ease forwards; }
.lamp-intro.play .intro-text { animation: verdict 1.6s ease .9s forwards; }
@keyframes verdict { 0% { opacity: 0; transform: scale(1.04); } 35% { opacity: 1; transform: none; } 100% { opacity: 1; } }
.intro-art .lamp.big { height: 160px; width: auto; filter: none; transition: filter 1s ease; }
.lamp-intro .lamp.big .fl, .lamp-intro .lamp.big .fy, .lamp-intro .lamp.big .fw { opacity: 0; animation: none; }
.lamp-intro.play .lamp.big .fl, .lamp-intro.play .lamp.big .fy, .lamp-intro.play .lamp.big .fw { animation: kindle .9s steps(4) forwards; }
.lamp-intro.play .lamp.big .fy { animation-delay: .25s; } .lamp-intro.play .lamp.big .fw { animation-delay: .45s; }
.lamp-intro.play .lamp.big { filter: drop-shadow(0 0 18px rgb(255 230 168 / .55)); }
@keyframes kindle { 0% { opacity: 0; } 40% { opacity: .5; } 60% { opacity: .2; } 100% { opacity: 1; } }
/* under the lamp as it's lit: Eileen the Crow's line */
.intro-quote { display: grid; justify-items: center; gap: 14px; opacity: 0; text-align: center; }
.intro-quote q { font: 400 clamp(32px, 4.6vw, 58px)/1.1 var(--title); letter-spacing: .06em; color: var(--lamp); quotes: "“" "”";
  text-shadow: 0 0 22px rgb(255 230 168 / .4); }
.intro-quote cite { font: 400 12.5px/1 var(--mono); font-style: normal; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.intro-quote cite::before { content: "— "; }
.lamp-intro.play .intro-quote { animation: verdict 1.6s ease .9s forwards; }

/* top bar */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px max(16px, calc((100% - 1180px) / 2 + 16px)); background: rgb(10 10 12 / .88); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgb(217 180 90 / .2); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--fg); font: 400 30px/1 var(--title); letter-spacing: .08em; text-transform: uppercase; }
.brand:hover { text-decoration: none; }
.bar nav { display: flex; align-items: center; gap: 20px; font: 500 13px/1 var(--mono); }
.bar nav a { color: var(--muted); }
.bar nav a:hover { color: var(--fg); text-decoration: none; }
.fog-link { color: var(--fg) !important; padding: 8px 12px; border: 1px solid rgb(230 225 214 / .28);
  background: linear-gradient(90deg, rgb(230 225 214 / .03), rgb(230 225 214 / .13), rgb(230 225 214 / .03)); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .fog-link:hover { animation: fog 2.4s linear infinite; } }

/* the lamp (logo) */
.lamp { display: block; height: 38px; width: auto; overflow: visible; filter: drop-shadow(0 0 7px rgb(255 230 168 / .45)); }
.lamp .metal { fill: #8a7a5a; } .lamp .glass { fill: #26303d; }
.lamp .fl { fill: #ffb347; } .lamp .fy { fill: #ffd98a; } .lamp .fw { fill: #fff6dc; }
@media (prefers-reduced-motion: no-preference) {
  .lamp .fl { animation: flicker 1.7s steps(1) infinite; } .lamp .fy { animation: flicker 1.2s steps(1) infinite reverse; }
}
@keyframes flicker { 0%, 100% { opacity: 1; } 30% { opacity: .72; } 55% { opacity: .95; } 75% { opacity: .82; } }
.brand:hover .lamp { filter: drop-shadow(0 0 12px rgb(255 230 168 / .8)); }

main { max-width: 1180px; margin: 0 auto; padding: 0 16px 64px; }
.card { display: block; position: relative; background: linear-gradient(180deg, rgb(22 21 26 / .92), rgb(12 12 15 / .92));
  border: 1px solid rgb(217 180 90 / .26); outline: 1px solid rgb(0 0 0 / .6); outline-offset: -4px; padding: 20px 22px; color: var(--fg);
  box-shadow: inset 0 0 40px rgb(0 0 0 / .55); }
a.card:hover { text-decoration: none; border-color: rgb(217 180 90 / .55); box-shadow: inset 0 0 40px rgb(0 0 0 / .55), 0 0 20px rgb(255 230 168 / .08); }
.sec-h { display: grid; gap: 8px; margin: 64px 0 20px; justify-items: center; text-align: center; }
.sec-h h2 { font-size: clamp(38px, 5vw, 54px); }
.sec-h h2::after { content: ""; display: block; width: 180px; height: 1px; margin: 12px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.sec-h p { margin: 0; color: var(--muted); max-width: 72ch; font-size: 14px; }

/* hunters: summoning circles and mode pills */
.ring { width: 36px; height: 18px; vertical-align: middle; overflow: visible; }
.ring ellipse { fill: none; stroke-width: 1.4; } .ring circle { stroke: none; }
.ring.claude { --c: var(--claude); } .ring.homebase { --c: var(--home); } .ring.both { --c: var(--both); }
.ring ellipse { stroke: var(--c); } .ring ellipse:nth-child(2) { opacity: .7; } .ring ellipse:nth-child(3) { opacity: .45; } .ring circle { fill: var(--c); }
.ring { filter: drop-shadow(0 0 4px var(--c)); }
.pills { display: inline-flex; gap: 3px; }
.pill { font: 600 10.5px/1 var(--mono); padding: 4px 5px; min-width: 24px; text-align: center; color: #0e0d10; }
.pill.claude, .cal b.claude, .strip b.claude, .split .claude { background: var(--claude); }
.pill.homebase, .cal b.homebase, .strip b.homebase, .split .homebase { background: var(--home); }
.pill.both, .cal b.both, .strip b.both, .split .both { background: var(--both); }
.pill.hand, .cal b.hand, .strip b.hand, .legend .sw.hand { background: var(--hand); }
.pill.none, .cal b.none, .strip b.none, .split .none, .legend .sw.none { background: var(--empty); color: var(--faint); }
.pill.na, .cal b.na, .strip b.na { background: none; outline: 1px dashed var(--line); outline-offset: -1px; color: var(--faint); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: center; font: 500 12.5px/1 var(--mono); color: var(--muted); }
.legend .ring { width: 30px; height: 15px; margin-right: -10px; }
.legend .sw { display: inline-block; width: 11px; height: 11px; margin-right: -10px; }

/* hero */
/* the hero and both door cards fit the first screen on a desktop: spacing shrinks with the window's height */
.hero { padding: clamp(16px, 3.2vh, 60px) 0 4px; display: grid; gap: clamp(8px, 1.5vh, 20px); justify-items: center; text-align: center; }
.hero h1 { font-size: clamp(28px, min(4.6vw, 6.6vh), 64px); white-space: nowrap; text-shadow: 0 0 30px rgb(255 230 168 / .14); }
.lede { font-size: 15.5px; color: var(--muted); max-width: 66ch; margin: 0; }
.credit { margin: 0; max-width: 76ch; font: italic 400 12.5px/1.6 var(--mono); color: var(--faint); }
.summons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.summon { display: grid; justify-items: center; gap: 2px; padding: 2px 8px; cursor: pointer; background: none; border: 0; color: var(--fg); }
.bellsign { width: clamp(100px, 13vh, 150px); height: clamp(68px, 8.8vh, 102px); overflow: visible; }
.bellsign.claude { --c: var(--claude); } .bellsign.homebase { --c: var(--home); }
.bellsign .rip { fill: none; stroke: var(--c); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.bellsign .bh, .bellsign .bc { fill: #6e6250; } .bellsign .bb { fill: #a58a55; } .bellsign .bl { fill: #e3cf98; }
.bellsign .bell { transform-box: fill-box; transform-origin: 50% 0; filter: drop-shadow(0 0 4px var(--c)); }
@media (prefers-reduced-motion: no-preference) {
  .bellsign .rip { animation: ripple 3.6s ease-out infinite; } .bellsign .rp1 { animation-delay: -1.2s; } .bellsign .rp2 { animation-delay: -2.4s; }
  .bellsign .bell { animation: swing 3.2s ease-in-out infinite; }
  .summon.homebase .bellsign .bell { animation-delay: -1.6s; }
  .summon.ringing .bellsign .bell { animation: swing .45s ease-in-out infinite; }
  .summon.ringing .bellsign .rip { animation-duration: 1.2s; }
}
@media (prefers-reduced-motion: reduce) { .bellsign .rip { opacity: .4; } .bellsign .rp1 { opacity: .25; transform: scale(.7); } .bellsign .rp2 { opacity: .15; transform: scale(.4); } }
@keyframes ripple { 0% { transform: scale(.15); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@keyframes swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(6deg); } 75% { transform: rotate(-6deg); } }
.prompt-bar { display: block; min-width: 290px; padding: clamp(7px, 1.1vh, 12px) 18px; font: 400 14.5px/1.5 var(--mono); text-align: left; white-space: nowrap;
  background: linear-gradient(90deg, transparent, rgb(0 0 0 / .78) 12%, rgb(0 0 0 / .78) 88%, transparent);
  border-top: 1px solid rgb(230 225 214 / .3); border-bottom: 1px solid rgb(230 225 214 / .3); }
.prompt-bar b { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%;
  font-size: 11px; color: var(--fg); border: 1px solid var(--muted); }
.prompt-bar small { display: block; margin: 6px 0 0 28px; font-size: 11.5px; color: var(--faint); }
.summon:hover .prompt-bar { border-color: rgb(230 225 214 / .6); }
/* while one bell rings, both are locked; the one waiting dims until the summon has arrived */
.summon[aria-disabled="true"] { cursor: default; }
.summon[aria-disabled="true"]:not(.ringing) { opacity: .45; transition: opacity .3s; }
.summon[aria-disabled="true"]:hover .prompt-bar { border-color: rgb(230 225 214 / .3); }
.hero-note { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--faint); }
/* the bell's sound switch, pinned in the empty space between the two bells and level with their middle, so it takes
   no room of its own and the bells stay where they were. Where the bells stack (phones), it sits in a row above them */
.summons > .hush { position: absolute; left: 50%; top: calc(2px + clamp(68px, 8.8vh, 102px) / 2 - 13px); transform: translateX(-50%); z-index: 2; }
@media (max-width: 1000px) { .summons > .hush { position: static; transform: none; margin: 0 auto 4px; } }
.hush { padding: 3px 12px; font: 400 12.5px/1.5 var(--mono); color: var(--fg); opacity: .8; background: rgb(0 0 0 / .35);
  border: 1px solid rgb(230 225 214 / .32); border-radius: 3px; cursor: pointer; white-space: nowrap; }
.hush:hover, .hush:focus-visible { opacity: 1; border-color: rgb(217 180 90 / .6); }
.hush[aria-pressed="false"] { opacity: .55; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 860px; gap: 1px;
  background: rgb(217 180 90 / .2); border: 1px solid rgb(217 180 90 / .28); }
.stats div { background: var(--bg); padding: clamp(8px, 1.2vh, 14px) 16px; display: grid; gap: 4px; }
.stats b { font: 400 clamp(32px, 4.4vh, 44px)/.85 var(--title); color: var(--fg); }
.stats span { font: 500 11px/1.2 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }

/* doors and the fog gate */
.doors { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-top: clamp(14px, 2.4vh, 40px); }
.door { display: grid; gap: 8px; padding: clamp(16px, 2.2vh, 26px) 24px; overflow: hidden; }
.door h2 { font-size: clamp(32px, min(3.8vw, 5vh), 52px); }
.door p { margin: 0; color: var(--muted); }
.door .go { font: 600 13px/1 var(--mono); letter-spacing: .06em; color: var(--gold); margin-top: 6px; }
.go small { font-weight: 400; color: var(--faint); letter-spacing: 0; }
/* the fog wall: the mist layers churn (in the SVG) and drift against each other here; hovering thickens it */
.door.fog { background: #0c0d12; }
.fogwall { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .62; transition: opacity .6s; }
@media (prefers-reduced-motion: no-preference) {
  .fogwall .fl0 { animation: drift0 26s ease-in-out infinite alternate; }
  .fogwall .fl1 { animation: drift1 19s ease-in-out infinite alternate; }
}
@keyframes drift0 { from { transform: translate(-60px, 8px); } to { transform: translate(60px, -8px); } }
@keyframes drift1 { from { transform: translate(50px, -6px); } to { transform: translate(-50px, 10px); } }
.door.fog:hover .fogwall { opacity: .82; }
.door.fog > :not(.fogwall) { position: relative; text-shadow: 0 0 6px #000, 0 0 14px #000, 0 0 24px rgb(0 0 0 / .8); }
.door.fog p { color: var(--fg); }
/* passing through: the fog rolls in over the page and thickens into an even mist, and the page changes while the
   window is that flat mist. The Wrapped starts from the same mist and thins away (wrapped_copy in build_souls.py), so
   the two halves meet on a colour with no pattern in it and nothing jumps at the swap */
.fog-pass { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; background: #0c0d12; }
.fog-pass .fogwall { opacity: 1; }
.fog-pass::after { content: ""; position: absolute; inset: 0; background: #3b3c41; opacity: 0; }
.fog-pass.go { animation: pass .55s ease-in forwards; }
.fog-pass.go::after { animation: pass .35s ease-in .45s forwards; }
.fog-pass.vt::after { display: none; }   /* the browser crossfades into the next page instead (FOG_CROSSFADE) */
@keyframes pass { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) { .fog-pass .fl0 { animation: drift0 26s ease-in-out infinite alternate; } .fog-pass .fl1 { animation: drift1 19s ease-in-out infinite alternate; } }

/* the month */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.cal-h { font: 500 11px/1 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .12em; padding: 0 2px 4px; text-align: center; }
.cal-d { display: grid; gap: 8px; padding: 8px 9px 10px; background: rgb(18 18 22 / .9); border: 1px solid var(--line); color: var(--fg); }
.cal-d:hover { text-decoration: none; border-color: rgb(255 230 168 / .45); box-shadow: 0 0 14px rgb(255 230 168 / .14); }
.cal-d .n { font: 400 24px/.8 var(--title); }
.mq { display: grid; gap: 2px; } .mq .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; height: 7px; } .mq b { display: block; }

/* featured: item descriptions */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
@media (min-width: 1000px) { .feat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.item { display: grid; gap: 10px; align-content: start; }
.item-h { display: grid; gap: 6px; }
.item h3 { font-size: 34px; color: #f3ead9; }
.lore { margin: 0; color: var(--muted); font-style: italic; font-size: 13.5px; line-height: 1.6; padding-top: 10px; border-top: 1px solid var(--line); }
.stamp { font: 400 20px/1 var(--title); letter-spacing: .12em; text-transform: uppercase; }
.stamp.small { font-size: 15px; }
.stamp.won { color: var(--kill); text-shadow: 0 0 10px rgb(120 205 172 / .5); }
.stamp.died { color: #d23048; text-shadow: 0 0 10px rgb(179 18 46 / .6); }

/* lanes and days */
.lane-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.lane-c { text-align: center; } .lane-c h3 { font-size: 26px; margin-top: 8px; }
.day { border-top: 1px solid var(--line); padding: 18px 0 8px; }
.day h3 { font-size: 32px; display: flex; align-items: center; gap: 12px; }
.day h3 span { font: 500 12px/1 var(--mono); color: var(--faint); letter-spacing: .06em; text-transform: none; }
.day ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.day li { display: grid; grid-template-columns: 92px minmax(0, 15rem) auto minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 8px 10px; border-left: 2px solid transparent; }
.day li:hover { background: rgb(255 230 168 / .04); border-left-color: rgb(255 230 168 / .45); }
.day li .lane { font: 500 11px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.day li a { font-weight: 700; color: var(--fg); }
.day li .sk { color: var(--faint); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day li.nowu > span:nth-child(2) { color: var(--faint); }
.tag.died { font: 400 15px/1 var(--title); letter-spacing: .14em; text-transform: uppercase; color: #d23048;
  border: 1px solid rgb(179 18 46 / .6); padding: 2px 6px; margin-right: 6px; }
.lanes .sec-h p { max-width: none; }   /* its one sentence on one line, where the screen has room */
.lane-c .go { display: block; font: 600 12px/1 var(--mono); letter-spacing: .06em; color: var(--gold); margin-top: 10px; opacity: .8; }
.lane-c:hover { text-decoration: none; } .lane-c:hover .go { opacity: 1; }

/* lane pages: the header, the lane's month as a strip (a column per day, a row per mode), who won its modes, its best
   marks, and a card per challenge */
.lane-head { display: grid; gap: 14px; padding: 22px 0 26px; border-bottom: 1px solid rgb(217 180 90 / .28); }
.lane-head h1 { font-size: clamp(38px, 8vw, 100px); color: #f3ead9; overflow-wrap: anywhere; }
.lane-head .hook { display: flex; align-items: center; gap: 2px; }
.lane-counts { display: flex; flex-wrap: wrap; gap: 8px 26px; font: 500 12px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.lane-counts b { font: 400 28px/.8 var(--title); color: var(--fg); letter-spacing: .02em; margin-right: 6px; }
.lane-strip { margin-top: 30px; display: grid; gap: 12px; }
.strip-h { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.strip-h .legend { justify-content: flex-end; }
.strip { display: grid; grid-template-columns: auto repeat(31, minmax(0, 1fr)); gap: 3px; padding: 12px; background: rgb(18 18 22 / .9); border: 1px solid var(--line); }
.strip-k, .sd { display: grid; grid-template-rows: repeat(3, 16px) auto; gap: 3px; }
.strip-k span { font: 500 10px/16px var(--mono); color: var(--faint); padding-right: 6px; text-align: right; }
.sd b { display: block; } .sd .n { font: 500 10px/1 var(--mono); color: var(--faint); text-align: center; padding-top: 3px; }
.sd:hover { text-decoration: none; } .sd:hover .n { color: var(--lamp); } .sd:hover b { box-shadow: 0 0 8px rgb(255 230 168 / .25); }
.split { display: flex; height: 6px; gap: 2px; }
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; margin-top: 30px; }
.stats small { font: 400 12px/1.4 var(--mono); color: var(--faint); }
.lane-grid-d { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.lane-d { scroll-margin-top: 90px; }
.lane-d h3 { font-size: 28px; color: #f3ead9; }
.lane-d .sk { margin: 0; color: var(--faint); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lane-d .fine { color: #d23048; }
.lane-d:hover { text-decoration: none; }
.lane-d.nowu { opacity: .7; }
.lane-d:target { border-color: rgb(255 230 168 / .55); box-shadow: 0 0 18px rgb(255 230 168 / .16); }

/* messages left by the Messengers */
.note { display: inline-grid; place-items: center; padding: 2px; margin: 0 4px; vertical-align: middle; background: none; border: 0; cursor: pointer; }
.messengers { display: block; height: 30px; width: auto; overflow: visible; filter: drop-shadow(0 0 4px rgb(170 184 214 / .45)); }
.messengers .mh { fill: #dcdfe6; } .messengers .mx { fill: #1a1c24; } .messengers .mb { fill: #a4aab8; }
.messengers .ms { fill: #a9bde8; }
.note { padding: 8px 4px 2px; }
.messengers .scroll, .messengers .lo { transform-box: view-box; }
.messengers .scroll { transform-origin: 31.5px 3px; }
@media (prefers-reduced-motion: no-preference) {
  .messengers .scroll { animation: tilt 2.8s ease-in-out infinite; }
  .messengers .l1 { animation: endl 2.8s ease-in-out infinite; }
  .messengers .l2 { animation: mid 2.8s ease-in-out infinite; }
  .messengers .l3 { animation: endr 2.8s ease-in-out infinite; }
  .note:hover .messengers .scroll, .note:hover .messengers .lo { animation-duration: 1.3s; }
}
/* the scroll tips 3 degrees each way and lifts a step at the middle; the left and right little ones rise and sink with
   their ends of it, the middle one with its centre, on the same clock, so every hand stays on the scroll */
@keyframes tilt { 0%, 100% { transform: none; } 25% { transform: rotate(3deg); } 50% { transform: translateY(-1px); } 75% { transform: rotate(-3deg); } }
@keyframes endl { 0%, 100% { transform: none; } 25% { transform: translateY(-1.2px); } 50% { transform: translateY(-1px); } 75% { transform: translateY(1.2px); } }
@keyframes mid { 0%, 100% { transform: none; } 25% { transform: none; } 50% { transform: translateY(-1px); } 75% { transform: none; } }
@keyframes endr { 0%, 100% { transform: none; } 25% { transform: translateY(1.2px); } 50% { transform: translateY(-1px); } 75% { transform: translateY(-1.2px); } }
.note:hover .messengers, .note:focus-visible .messengers { filter: drop-shadow(0 0 9px rgb(169 189 232 / .9)); }
.note-pop { position: fixed; z-index: 30; width: max-content; max-width: min(300px, calc(100vw - 16px)); padding: 10px 16px 8px; text-align: center; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(4 5 8 / .94) 10%, rgb(4 5 8 / .94) 90%, transparent); }
.note-pop::before, .note-pop::after { content: ""; position: absolute; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(221 216 204 / .5) 15%, rgb(221 216 204 / .5) 85%, transparent); }
.note-pop::before { top: 0; } .note-pop::after { bottom: 0; }
.note-pop q { display: block; font: 400 20px/1.15 var(--title); color: var(--fg); quotes: none; }
.note-pop .appr { display: flex; justify-content: space-between; gap: 18px; margin: 8px 0 0; padding: 4px 0; font: 500 10.5px/1 var(--mono);
  border-top: 1px solid rgb(221 216 204 / .18); border-bottom: 1px solid rgb(221 216 204 / .18); }
.note-pop .appr b { font-weight: 500; color: #8f98c9; } .note-pop .appr span { color: var(--fg); }

/* the phantom who answers the bell: rises out of the ground in the side space, its arrival written under it. It is
   placed against the summons row (the full column width), so the buttons' changing text never moves it */
.summons { position: relative; width: 100%; }
.summon { position: relative; width: 500px; }
.prompt-bar { text-align: center; }
.prompt-bar small { margin-left: 0; }
.prompt-bar .pt { transition: color .3s; } .summon.ringing .pt { color: var(--lamp); }
.phantom { position: absolute; top: -170px; display: grid; justify-items: center; width: 190px; pointer-events: none; visibility: hidden; }
.phantom.claude { left: calc((1148px - 100vw) / 4 - 95px); } .phantom.homebase { right: calc((1148px - 100vw) / 4 - 95px); }
.phantom.claude { --c: #e6c98a; } .phantom.homebase { --c: #cdc6fa; }
/* the stage's bottom edge is the ground: the figure is clipped there, so it climbs out of the circle, never through it */
.phantom .stage { position: relative; display: grid; justify-items: center; padding-bottom: 4px; }
.phantom .fig { display: block; overflow: hidden; filter: drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 16px var(--c)); }
.phantom svg:not(.gring) { display: block; width: 126px; height: auto; transform: translateY(100%); opacity: 0; }
.phantom .p1 { fill: color-mix(in srgb, var(--c), #fff 45%); } .phantom .p2 { fill: var(--c); } .phantom .p3 { fill: color-mix(in srgb, var(--c), #10121a 62%); }
.phantom .pa { fill: color-mix(in srgb, var(--c), #fff 40%); } .phantom .pw { fill: color-mix(in srgb, var(--c), #10121a 35%); } .phantom .px { fill: var(--c); } .phantom .pp { fill: color-mix(in srgb, var(--c), #fff 30%); }
/* trousers and leather boots sit between the coat and the shadow, so the legs show without reading as armour */
.phantom .p4 { fill: color-mix(in srgb, var(--c), #10121a 42%); } .phantom .p5 { fill: color-mix(in srgb, var(--c), #10121a 25%); }
.phantom .gring { position: absolute; left: 50%; bottom: -10px; width: 140px; height: 28px; transform: translateX(-50%) scale(0); opacity: 0;
  filter: drop-shadow(0 0 4px var(--c)); }
.phantom .gring ellipse { fill: none; stroke: var(--c); stroke-width: 1.4; } .phantom .gring ellipse + ellipse { opacity: .55; }
.phantom .cap { margin-top: 18px; font: 400 12.5px/1.5 var(--mono); color: var(--fg); text-align: center; opacity: 0; max-width: 190px; }
.phantom.up { visibility: visible; }
.phantom.up .gring { animation: open .6s ease-out forwards, hum 3s ease-in-out 1.1s infinite; }
.phantom.up svg:not(.gring) { animation: climb 1.5s cubic-bezier(.2, .7, .3, 1) .35s forwards, waver 3.4s ease-in-out 1.85s infinite; }
.phantom.up .cap { animation: capin .55s ease 1.65s forwards; }
@keyframes open { from { transform: translateX(-50%) scale(0); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: .9; } }
@keyframes hum { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }
@keyframes climb { 0% { transform: translateY(100%); opacity: .3; } 100% { transform: none; opacity: .85; } }
@keyframes waver { 0%, 100% { opacity: .85; } 50% { opacity: .65; } }
@keyframes capin { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .phantom.up svg:not(.gring) { transform: none; opacity: .85; } .phantom.up .gring { transform: translateX(-50%); opacity: .9; } .phantom.up .cap { opacity: 1; }
}
/* narrower screens have no side space: the phantoms stand at the ends of the summons row instead */
@media (max-width: 1459px) {
  .summon { width: 470px; } .prompt-bar { font-size: 13.5px; }
  .phantom { top: -20px; width: 120px; } .phantom svg:not(.gring) { width: 80px; } .phantom .gring { width: 90px; height: 18px; bottom: -6px; }
  .phantom.claude { left: -60px; } .phantom.homebase { right: -60px; }
}
@media (max-width: 1260px) { .phantom { display: none; } }
@media (max-width: 1000px) { .summon { width: min(470px, 100%); } .prompt-bar { white-space: normal; } }

/* write-up page */
.crumbs { font: 500 12.5px/1 var(--mono); color: var(--faint); padding: 26px 0 0; }
.crumbs a { color: var(--muted); }
.wu-head { display: grid; gap: 14px; padding: 22px 0 26px; border-bottom: 1px solid rgb(217 180 90 / .28); }
/* small enough on a phone for one long word ("Administratively"), and allowed to break inside a word if one is longer */
.wu-head h1 { font-size: clamp(38px, 8vw, 100px); color: #f3ead9; overflow-wrap: anywhere; }
.wu-head .stamp { font-size: 24px; }
.hook { margin: 0; font-size: 16.5px; color: var(--muted); max-width: 72ch; }
.who { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.who .pill { font-size: 12px; padding: 6px 8px; min-width: 32px; }
.who .legend { justify-content: flex-start; }
.fine { margin: 0; font: italic 400 12.5px/1.5 var(--mono); color: var(--faint); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 22px; margin: 6px 0 0; padding: 16px 18px;
  background: rgb(18 18 22 / .9); border: 1px solid var(--line); font-size: 14px; }
.facts dt { font: 500 11px/1.8 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--gold); }
.facts dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; } .facts dd strong { color: var(--fg); }
.wu-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; margin-top: 30px; }
.outline { position: sticky; top: 90px; align-self: start; display: grid; gap: 10px; font: 400 13px/1.45 var(--mono); }
.outline ol, .outline ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; border-left: 1px solid var(--line); }
.outline li a { display: block; padding-left: 12px; color: var(--muted); }
.outline li a:hover { color: var(--fg); border-left: 2px solid var(--lamp); margin-left: -1px; padding-left: 11px; text-decoration: none; }
.outline .more-h { margin-top: 18px; } .aside-note { margin-top: 18px; }
.prose { max-width: 78ch; font-size: 15.5px; line-height: 1.75; }
.prose h2 { font-size: 40px; margin: 48px 0 14px; color: #f3ead9; }
.prose h2::after { content: ""; display: block; width: 120px; height: 1px; margin-top: 10px; background: linear-gradient(90deg, var(--gold), transparent); }
.prose h3 { font-size: 30px; margin: 32px 0 10px; }
.prose h4 { font: 700 14px/1.3 var(--mono); margin: 24px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose li + li { margin-top: 6px; }
.prose strong { color: #f8f0e0; font-weight: 700; }
.prose code { font: 400 .9em/1.4 var(--mono); background: rgb(217 180 90 / .07); border: 1px solid rgb(217 180 90 / .16); padding: 1px 5px; overflow-wrap: anywhere; }
.prose pre { margin: 0 0 18px; padding: 14px 16px; overflow-x: auto; background: #070708; border: 1px solid var(--line);
  border-left: 3px solid rgb(255 230 168 / .4); font: 400 13.5px/1.55 var(--mono); }
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; }
.prose blockquote { margin: 0 0 18px; padding: 10px 18px; border-left: 2px solid var(--gold); background: rgb(217 180 90 / .05); color: var(--muted); font-style: italic; }
.prose blockquote p:last-child { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 13.5px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
/* ids in tables break only after _ / . - (the build marks those points), and no column is squeezed below ~12 characters */
.prose td code { overflow-wrap: normal; white-space: normal; }
.prose td { min-width: 12ch; }
.prose th { font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); border-bottom: 1px solid rgb(217 180 90 / .4); white-space: nowrap; }
.prose img { max-width: 100%; height: auto; border: 1px solid var(--line); }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; }
.pn { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid rgb(217 180 90 / .26); background: rgb(18 18 22 / .9); color: var(--fg); font: 400 26px/1 var(--title); text-transform: uppercase; }
.pn span { font: 500 11px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.pn.next { text-align: right; grid-column: 2; }
.pn:hover { text-decoration: none; border-color: rgb(217 180 90 / .55); }

.foot { max-width: 1180px; margin: 0 auto; padding: 26px 16px 48px; border-top: 1px solid var(--line); font: 400 12.5px/1.6 var(--mono); color: var(--faint); }
.foot p { margin: 0 0 4px; } .foot-row { display: flex; align-items: center; gap: 6px; }

@media (max-width: 900px) {
  /* minmax(0, ...) so a wide table scrolls inside its own box rather than widening the column past the screen */
  .doors, .wu-grid { grid-template-columns: minmax(0, 1fr); } .outline { display: none; }
  .lane-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats.three { grid-template-columns: 1fr; }
  .day li { grid-template-columns: 74px minmax(0, 1fr) auto; } .day li .sk { display: none; }
  .prompt-bar { min-width: 0; }
}
@media (max-width: 560px) {
  .hero h1 { white-space: normal; }
  .bar nav a:not(.fog-link) { display: none; } .brand span { display: none; }
  .cal { gap: 3px; } .cal-d { padding: 5px; gap: 5px; } .cal-d .n { font-size: 18px; } .mq .row { height: 4px; gap: 1px; }
  .strip { gap: 1px; padding: 8px 6px; } .strip-k, .sd { grid-template-rows: repeat(3, 10px) auto; gap: 1px; }
  .strip-k span { line-height: 10px; font-size: 8px; padding-right: 3px; } .sd .n { font-size: 7px; }
  .sd:nth-of-type(odd) .n { visibility: hidden; }
  .prevnext { grid-template-columns: 1fr; } .pn.next { grid-column: auto; }
}
/* short laptop screens: the credit line (also in every footer) steps out of the hero so both doors still fit */
@media (min-width: 901px) and (max-height: 820px) { .hero .credit { display: none; } }

/* the first screen's cue that there's more: the night thickens at the bottom edge, and a few Messengers rise there
   holding a note. Both go as soon as the page is scrolled; the cue only appears when the first screen has room for it */
.dusk { position: fixed; left: 0; right: 0; bottom: 0; height: 90px; z-index: 5; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgb(10 11 17 / .85)); transition: opacity .5s; }
.descend { position: fixed; left: 50%; bottom: 10px; z-index: 6; display: flex; align-items: center; gap: 10px;
  padding: 4px 10px; transform: translate(-50%, 120%); opacity: 0; color: var(--muted); text-decoration: none;
  font: 400 18px/1 var(--title); letter-spacing: .06em; text-transform: uppercase; transition: transform .8s ease, opacity .8s ease; }
.descend .messengers { height: 26px; }
.descend:hover { color: var(--fg); text-decoration: none; }
.descend.up { transform: translate(-50%, 0); opacity: 1; }
body.scrolled .descend { transform: translate(-50%, 120%); opacity: 0; pointer-events: none; }
body.scrolled .dusk { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .descend.up span { animation: beckon 2.6s ease-in-out infinite; } }
@keyframes beckon { 0%, 100% { transform: none; } 50% { transform: translateY(2px); } }

/* the first-screen unit: zoomed to fit by souls.js; its own cap on the hero's height-based sizes is lifted so the
   zoom alone sets the scale */
.fold .hero h1 { font-size: clamp(28px, 4.6vw, 58px); }