:root { --bg:#000; --ink:#d8cfbf; --dim:#5a5246; --soft:#9a8f7c; --lit:#f0a01c; --glow:rgba(243,151,10,.5); }
  * { box-sizing:border-box; }
  html { background:var(--bg); }
  body::after { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:url("img/scene.webp") center calc(100% - 4vh + 0.36 * min(70vh, 70vw)) / auto min(70vh, 70vw) no-repeat; opacity:.35; }
  main { display:flex; flex-direction:column; align-items:center; flex:1; }
  body { overflow-x:hidden; }
  body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.07;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .85  0 0 0 0 .78  0 0 0 0 .62  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
    background-size:240px 240px; }
  html,body { margin:0; height:100%; background:var(--bg); color:var(--ink);
    font:16px/1.5 Georgia,"Times New Roman",serif; }
  /* No bottom padding here: main is a flex child that grows, and once it overflows it paints
     straight through the body's bottom padding, so the gap under the footer has to belong to the
     footer. See the footer rule. */
  body { display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    min-height:100vh; padding:5vh 6vw 0; background:transparent; }
  h1 { margin:0 0 5vh; }
  h1 img { display:block; width:min(70vw, 420px); height:auto;
    filter:drop-shadow(0 0 18px rgba(230,184,92,.25)); }
  .blurb { margin:3vh 0 0; font-style:italic; font-size:.95rem; color:var(--ink); opacity:.85; text-align:center;
    max-width:32em; line-height:1.6; }
  #road { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, 14px);
    justify-content:space-between; width:min(70vw, 420px); }
  .dot { position:relative; width:14px; height:14px; border-radius:50%; opacity:.9;
    border:1px solid rgba(216,207,191,.1);
    background:radial-gradient(circle at 50% 60%, #262119 0%, #18150f 75%);          /* sunken */
    box-shadow:inset 0 1px 2px rgba(0,0,0,.6), inset 0 -1px 1px rgba(216,207,191,.05);
    transition:opacity .9s ease-in-out, border-color .9s ease-in-out; }
  .dot::after { content:""; position:absolute; inset:-1px; border-radius:50%; opacity:0;   /* raised */
    background:radial-gradient(circle at 42% 38%, #ffd35c 0%, var(--lit) 55%, #c0600a 100%);
    box-shadow:0 1px 1px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,230,170,.4), inset 0 -1px 2px rgba(110,50,5,.4),
               0 0 10px var(--glow); }
  .dot.lit { opacity:1; border-color:rgba(255,200,120,.35); transition-duration:.3s; }
  .dot.lit::after { opacity:1; animation:ignite .55s ease-out both; }
  @keyframes ignite {                                   /* fade up, flash hot, glow swells then settles */
    0%   { opacity:0;  filter:saturate(2.2) brightness(1.6);
           box-shadow:0 1px 1px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,230,170,.4), inset 0 -1px 2px rgba(110,50,5,.4),
                      0 0 0 rgba(243,151,10,0); }
    40%  { opacity:1;  filter:saturate(2.2) brightness(1.5);
           box-shadow:0 1px 1px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,230,170,.4), inset 0 -1px 2px rgba(110,50,5,.4),
                      0 0 16px rgba(255,170,40,.85); }
    100% { opacity:1;  filter:none;
           box-shadow:0 1px 1px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,230,170,.4), inset 0 -1px 2px rgba(110,50,5,.4),
                      0 0 10px var(--glow); } }
  @media (prefers-reduced-motion: reduce) { .dot.lit::after { animation:none; } }
  body.locked { justify-content:center; }
  body.locked > :not(#gate) { display:none; }
  body.locked::after { display:none; }
  #gate { display:none; flex-direction:column; align-items:center; gap:18px; }
  body.locked #gate { display:flex; }
  #gate p { margin:0; font-style:italic; color:var(--dim); }
  #gate input { background:#15130f; border:1px solid #26221b; color:var(--ink); font:inherit;
    padding:10px 14px; text-align:center; letter-spacing:.2em; outline:none; width:14em; }
  #gate input:focus { border-color:var(--lit); }
  #gate input.wrong { animation:shake .3s; border-color:#a0442c; }
  #gate button { background:transparent; border:1px solid #26221b; color:var(--soft); font:inherit;
    font-size:.8rem; letter-spacing:.3em; text-transform:uppercase; padding:8px 22px; cursor:pointer;
    transition:color .3s ease, border-color .3s ease; }
  #gate button:hover, #gate button:focus-visible { color:var(--lit); border-color:var(--lit); outline:none; }
  @keyframes shake { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
  #tally { margin-top:2.2vh; font-size:.8rem; color:var(--soft); letter-spacing:.25em; }
  #sprint { margin-top:.7rem; font-size:.68rem; letter-spacing:.38em; text-transform:uppercase; color:var(--dim); }
  #sprint:empty { display:none; }
  #eta { margin-top:1rem; font-size:.85rem; font-style:italic; color:var(--dim); text-align:center; max-width:32em; line-height:1.6; }
  /* Sits at the foot of the page, not pinned to the viewport: margin-top:auto drops it to the
     bottom of a short page, padding keeps the gap once the content is long enough to scroll. */
  /* padding-top only shows on a page long enough to scroll - on a short one margin-top:auto
     absorbs it. padding-bottom is the one that always shows, so it owns the gap to the edge. */
  footer { margin-top:auto; padding:16vh 0 34px; font-size:.8rem; color:var(--soft);
    letter-spacing:.15em; text-align:center; }
  .studio { margin-top:1.1rem; text-align:center; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; }
  .studio a { color:var(--soft); text-decoration:none; border-bottom:1px solid transparent;
    transition:color .4s ease, border-color .4s ease; }
  .studio a:hover, .studio a:focus-visible { color:var(--lit); border-color:var(--lit); outline:none; }

  /* corner link */
  .corner { position:fixed; top:18px; right:22px; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
    color:var(--dim); text-decoration:none; border-bottom:1px solid transparent; z-index:2;
    transition:color .4s ease, border-color .4s ease; }
  .corner-2 { right:auto; left:22px; }
  .corner:hover, .corner:focus-visible { color:var(--lit); border-color:var(--lit); outline:none; }

  /* burn-up chart: what has been finished against what is on the list, and where they meet */
  /* The scene art is a fixed, bottom-anchored backdrop and the chart lands right on top of it,
     so carry a soft vignette to sit on - a hard panel would be the only box on the whole site. */
  #chart { margin:4vh 0 0; padding:16px 10px 14px; width:min(80vw, 560px);
    background:radial-gradient(ellipse 80% 72% at 50% 50%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.75) 58%, rgba(0,0,0,0) 100%); }
  #chart[hidden] { display:none; }
  #plot svg { display:block; width:100%; height:auto; overflow:visible; }
  .ch-axis { stroke:#2b261e; stroke-width:1; }
  .ch-grid { stroke:#1a1712; stroke-width:1; }
  .ch-tick { fill:var(--dim); font:9px Georgia,"Times New Roman",serif; letter-spacing:.12em; }
  .ch-total { fill:none; stroke:var(--soft); stroke-width:1.25; opacity:.55; }
  .ch-done { fill:none; stroke:var(--lit); stroke-width:1.75; }
  .ch-proj { fill:none; stroke:var(--lit); stroke-width:1.25; stroke-dasharray:4 4; opacity:.65; }
  .ch-proj-total { fill:none; stroke:var(--soft); stroke-width:1; stroke-dasharray:4 4; opacity:.3; }
  .ch-meet { fill:var(--lit); }
  .ch-meet.soft { fill:var(--soft); opacity:.7; }
  .ch-meet-label.soft { fill:var(--soft); opacity:.8; }
  .ch-meet-label { fill:var(--lit); font:9.5px Georgia,"Times New Roman",serif; letter-spacing:.2em; text-transform:uppercase; }
  .ch-meet-note { fill:var(--dim); font:8px Georgia,"Times New Roman",serif; letter-spacing:.14em; text-transform:uppercase; }
  .ch-legend { margin-top:1rem; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
    color:var(--dim); text-align:center; }
  .ch-legend span { margin:0 .7em; white-space:nowrap; }
  .ch-legend i { display:inline-block; width:15px; height:0; border-top:2px solid; vertical-align:.25em; margin-right:.45em; }

  /* landing */
  .soon { margin-top:4vh; font-style:italic; font-size:1.25rem; color:var(--ink); opacity:.9; letter-spacing:.05em; }