/* Design plan
   Concept: a ballpark scorecard crossed with a stock certificate.
   Colour:  ink navy, cool newsprint, Dodger royal blue, stitch red, brass (certificate border), ticker amber.
   Type:    Bodoni Moda (names, titles), Barlow Condensed (scorecard labels), Source Serif 4 (reading).
   Memorable element: the ticker tape on the home page. Everything else stays quiet.
   Layout:  left-aligned, 68ch reading column, photo grids with natural aspect ratios. */
:root{
  --ink:#10243a; --ink-soft:#44566b; --ground:#eef1f5; --paper:#fbfcfd; --line:#c9d2de;
  --blue:#1d4ea2; --blue-ink:#ffffff; --red:#b3262e; --brass:#a5822f; --amber:#f2b63c; --band:#10243a; --band-ink:#f2b63c;
  --tape:#fff3a8; --tape-ink:#4a3c00; --focus:#1d4ea2;
  --sk-top:#274a7c; --sk-low:#f2b63c; --sk-back:#5f7ea6; --sk-front:#10243a; --sk-win:#f2b63c; --sk-water:#1d4ea2;
  --serif:"Source Serif 4",Georgia,serif; --display:"Bodoni Moda","Didot",Georgia,serif; --label:"Barlow Condensed","Arial Narrow",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#e8edf4; --ink-soft:#a8b6c8; --ground:#0b1626; --paper:#122238; --line:#2a3d57;
  --blue:#7ea6ee; --blue-ink:#0b1626; --red:#ef7078; --brass:#d0aa55; --band:#06101c; --band-ink:#f2b63c;
  --tape:#5a4a00; --tape-ink:#fff3a8; --focus:#9cbcf5;
  --sk-top:#06101c; --sk-low:#3b4f78; --sk-back:#1b2f4d; --sk-front:#050d18; --sk-win:#f2b63c; --sk-water:#0a1e3a; color-scheme:dark}}
:root[data-theme="dark"]{
  --ink:#e8edf4; --ink-soft:#a8b6c8; --ground:#0b1626; --paper:#122238; --line:#2a3d57;
  --blue:#7ea6ee; --blue-ink:#0b1626; --red:#ef7078; --brass:#d0aa55; --band:#06101c; --band-ink:#f2b63c;
  --tape:#5a4a00; --tape-ink:#fff3a8; --focus:#9cbcf5;
  --sk-top:#06101c; --sk-low:#3b4f78; --sk-back:#1b2f4d; --sk-front:#050d18; --sk-win:#f2b63c; --sk-water:#0a1e3a; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.0625rem/1.65 var(--serif);padding-inline:max(16px,4vw)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
h1,h2{font-family:var(--display);font-weight:700;line-height:1.1;text-wrap:balance;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,6vw,3.4rem)} h2{font-size:1.6rem;margin-top:1.8em}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip:focus{position:fixed;top:8px;left:8px;background:var(--paper);padding:.5em 1em;z-index:9}

.top{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 2rem;padding-block:1.1rem;border-bottom:3px double var(--brass);max-width:72rem;margin-inline:auto}
.mark{font:700 1.5rem/1 var(--display);color:var(--ink);text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.top nav a,.foot nav a{font:600 1rem/1.2 var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent}
.top nav a:hover,.foot nav a:hover{color:var(--ink)}
.top nav a[aria-current]{color:var(--ink);border-bottom-color:var(--red)}
main{max-width:72rem;margin-inline:auto;padding-block:2rem 3rem}
.foot{max-width:72rem;margin-inline:auto;border-top:3px double var(--brass);padding-block:1.4rem 2.5rem;text-align:left}
.foot-line{margin:0 0 .6rem;color:var(--ink-soft)} .foot nav{display:flex;gap:1.4rem}

/* ticker tape: the one memorable element */
.tape-strip{background:var(--band);color:var(--band-ink);overflow:hidden;margin-bottom:2.2rem;border-block:2px solid var(--brass);margin-inline:calc(-1 * max(16px,4vw));}
.tape-run{display:flex;width:max-content;gap:3rem;padding:.65rem 0;font:600 1.05rem/1 var(--label);letter-spacing:.12em;white-space:nowrap;animation:run 70s linear infinite}
.tape-run span{display:inline-flex;gap:3rem;align-items:center}
.tape-run span::after{content:"\25B2";color:var(--red);font-size:.7em}
@keyframes run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tape-run{animation:none;flex-wrap:wrap;width:auto;padding-inline:16px;gap:.6rem 2rem}}

/* certificate hero */
.cert{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2rem;align-items:start}
.cert-frame{border:2px solid var(--brass);outline:1px solid var(--brass);outline-offset:6px;background:var(--paper);padding:clamp(1.4rem,4vw,3rem);margin:8px}
.cert-top{font:600 1rem var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:0 0 .8rem}
.cert h1{margin-bottom:.4em}
.cert-lede{font-size:1.25rem;max-width:34ch;margin:0 0 1.5rem}
.cert-links{display:flex;flex-wrap:wrap;gap:.8rem;margin:0}
.cert-photo{margin:8px 0 0} .cert-photo img{border:1px solid var(--line);background:var(--paper);padding:8px}
.cert-photo figcaption{font-size:.95rem;color:var(--ink-soft);padding-top:.5rem}
@media (max-width:760px){.cert{grid-template-columns:1fr}.cert-photo{max-width:320px}}
.btn{display:inline-block;font:600 1.05rem/1 var(--label);letter-spacing:.08em;text-transform:uppercase;background:var(--blue);color:var(--blue-ink);padding:.85rem 1.3rem;border:2px solid var(--blue);text-decoration:none;cursor:pointer}
.btn.alt{background:transparent;color:var(--blue)}
.btn:hover{filter:brightness(1.1)}

.lineup ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0;border-top:2px solid var(--ink)}
.lineup li{border-bottom:1px solid var(--line)}
.lineup a{display:flex;flex-direction:column;padding:1rem .2rem;text-decoration:none;color:var(--ink)}
.lineup b{font:700 1.3rem var(--display)} .lineup span{color:var(--ink-soft)}
.lineup a:hover b{color:var(--red)}

.prose{max-width:68ch} .prose p{margin:0 0 1.1em}
.lede{font-size:1.25rem;color:var(--ink-soft);max-width:60ch;margin-bottom:1.6rem}
.wide{max-width:none}
.crumb{font:600 1rem var(--label);letter-spacing:.08em;text-transform:uppercase;margin:0 0 .6rem}

/* timeline as a scorecard row */
.tl{list-style:none;padding:0;margin:1.5rem 0;border-top:2px solid var(--ink)}
.tl li{display:grid;grid-template-columns:9rem 1fr;gap:.2rem 1.5rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.tl-d{font:700 1.3rem/1.2 var(--label);letter-spacing:.04em;color:var(--red)}
.tl-s{grid-column:2;font:600 .95rem var(--label);letter-spacing:.06em;text-transform:uppercase}
@media (max-width:560px){.tl li{grid-template-columns:1fr}.tl-s{grid-column:1}}

/* photos */
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.2rem}
.room{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.room img{aspect-ratio:4/3;object-fit:cover;width:100%}
.room span{display:flex;flex-direction:column;padding:.8rem 1rem 1rem}
.room b{font:700 1.3rem var(--display)} .room i{color:var(--ink-soft)} .room em{font:600 .95rem var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--red);font-style:normal;margin-top:.3rem}
.room:hover{border-color:var(--brass)}
.grid{columns:16rem;column-gap:1.2rem}
.shot{margin:0 0 1.2rem;break-inside:avoid;background:var(--paper);border:1px solid var(--line);padding:8px}
.shot .open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.shot figcaption{display:flex;flex-direction:column;gap:.3rem;padding:.7rem .3rem .3rem;font-size:.98rem}
.meta{color:var(--ink-soft);font-size:.9rem}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:1.4rem;align-items:start}
.shot-big .open img{width:100%}

.empty{border:2px dashed var(--line);padding:1.4rem;max-width:40rem}
.form{display:grid;gap:1.1rem;max-width:36rem}
.form label{display:grid;gap:.3rem;font:600 1.05rem var(--label);letter-spacing:.05em}
.form small{font:400 .9rem var(--serif);color:var(--ink-soft);letter-spacing:0}
.form input,.form textarea{font:400 1.05rem var(--serif);padding:.7rem;border:1px solid var(--ink-soft);background:var(--paper);color:var(--ink);width:100%}
.hp{position:absolute;left:-9999px}
.form-msg{margin:0;min-height:1.5em;font-weight:600}

dialog{border:0;padding:0;background:var(--paper);color:var(--ink);max-width:min(96vw,60rem);max-height:96vh;width:100%}
dialog::backdrop{background:rgba(5,12,22,.85)}
.lb-inner{padding:1rem;display:flex;flex-direction:column;gap:.6rem;max-height:94vh;overflow:auto}
#lb-img{max-height:68vh;width:auto;margin-inline:auto;object-fit:contain}
#lb-cap{margin:0;font-size:1.1rem} #lb-meta{margin:0;color:var(--ink-soft);font-size:.95rem}
.lb-row{display:flex;gap:.6rem;flex-wrap:wrap}
.lb-row button,.lb-x{font:600 1rem var(--label);letter-spacing:.08em;text-transform:uppercase;padding:.6rem 1rem;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.lb-x{align-self:flex-end}

/* review-only layer */
.pv{display:none}
body.preview .pv{display:inline-block}
.pv-bar{display:block;background:var(--tape);color:var(--tape-ink);font:600 1rem/1.4 var(--label);letter-spacing:.04em;padding:.6rem 1rem;margin-inline:calc(-1 * max(16px,4vw))}
body:not(.preview) .pv-bar{display:none}
.badge{font:700 .95rem var(--label);letter-spacing:.06em;background:var(--ink);color:var(--ground);padding:.1rem .45rem;align-self:flex-start;margin-right:.4rem}
.chip{font:600 .85rem var(--label);letter-spacing:.08em;text-transform:uppercase;padding:.1rem .45rem;border:1px solid currentColor;align-self:flex-start}
.chip-named{color:var(--blue)} .chip-believed{color:var(--brass)} .chip-unknown{color:var(--red)}
.tape{background:var(--tape);color:var(--tape-ink);font:500 .9rem/1.3 var(--serif);padding:.3rem .5rem;transform:rotate(-.6deg);margin-top:.3rem;display:block}
body.preview .shot.is-held{opacity:.6;outline:2px dashed var(--red)}

.skyline{margin:0 0 2rem}.skyline svg{display:block;width:100%;height:clamp(190px,29vw,345px)}
.skyline figcaption{font-size:.9rem;color:var(--ink-soft);padding-top:.4rem}