/* The chooser. External stylesheet, never inline: the production CSP is
   `style-src 'self'`, which silently strips an inline block. */
:root { color-scheme:dark; --ink:#f2f5ee; --muted:#b5c0c2; --amber:#e6b75d; --line:rgba(225,239,237,.2); --void:#050b12; --display:"GT Sectra Display","GT Sectra",Georgia,"Times New Roman",serif; --sans:"Geist Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
* { box-sizing:border-box; }
html { background:var(--void); }
body { margin:0; min-width:320px; min-height:100svh; display:grid; align-content:center; padding:clamp(2rem,6vh,4.5rem) clamp(1.25rem,5vw,4rem); background:var(--void); color:var(--ink); font-family:var(--sans); }
body::before { position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 66% 56% at 18% 14%,rgb(230 183 93 / .06),transparent 60%),radial-gradient(ellipse 60% 55% at 86% 90%,rgb(120 170 190 / .06),transparent 58%); content:""; }
a { color:inherit; text-decoration:none; }

.sheet { position:relative; z-index:1; width:min(72rem,100%); margin:0 auto; }
.mark { display:flex; align-items:center; gap:.7rem; margin-bottom:clamp(1.4rem,4vh,2.4rem); font-family:Georgia,serif; font-size:1rem; letter-spacing:.02em; }
.mark img { width:26px; height:26px; }

.index { display:flex; align-items:center; gap:.8rem; margin:0 0 1rem; color:#d6dedb; font:600 .61rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.index .coordinate { color:var(--amber); }
.index .rule { flex:1 1 auto; height:1px; background:linear-gradient(90deg,rgb(230 183 93 / .8),rgb(230 183 93 / .05)); }

h1 { margin:0 0 .9rem; font-family:var(--display); font-size:clamp(2rem,4.4vw,3.2rem); font-weight:400; letter-spacing:-.05em; line-height:.96; }
.lede { max-width:44rem; margin:0 0 clamp(1.8rem,4vh,2.8rem); color:#dde4e1; font-size:clamp(.95rem,1.15vw,1.05rem); line-height:1.6; }

.options { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2.4vw,2rem); }
.option { display:grid; grid-template-rows:auto auto 1fr auto; border:1px solid var(--line); background:rgb(255 255 255 / .012); transition:border-color .2s,background .2s,transform .2s; }
.option:hover,.option:focus-visible { border-color:rgb(230 183 93 / .55); background:rgb(230 183 93 / .04); transform:translateY(-2px); }
.option:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }

/* The preview is a real frame from each page, so the choice is made on what the
   pages actually look like rather than on their names. */
.shot { position:relative; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line); }
.shot img { width:100%; height:100%; object-fit:cover; filter:saturate(.96) contrast(1.02); }
.shot b { position:absolute; left:.85rem; bottom:.85rem; padding:.34rem .6rem; background:rgb(5 11 18 / .82); color:var(--amber); font:600 .56rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; }

.option h2 { margin:0; padding:1.15rem 1.3rem .5rem; font-family:var(--display); font-size:clamp(1.35rem,2.1vw,1.85rem); font-weight:400; letter-spacing:-.035em; line-height:1; }
.option p { margin:0; padding:0 1.3rem 1rem; color:#c9d3d0; font-size:.9rem; line-height:1.58; }
.option dl { display:grid; grid-template-columns:auto 1fr; gap:.3rem .8rem; margin:0; padding:0 1.3rem 1.2rem; color:#95a2a2; font:500 .68rem/1.5 var(--mono); letter-spacing:.05em; }
.option dt { color:var(--amber); }
.option dd { margin:0; }
.option .go { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding:.95rem 1.3rem; border-top:1px solid var(--line); color:var(--ink); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.option:hover .go,.option:focus-visible .go { color:var(--amber); }

.footnote { max-width:44rem; margin:clamp(1.6rem,4vh,2.4rem) 0 0; color:#8e9a9a; font-size:.74rem; line-height:1.6; }

@media (max-width:760px) {
  .options { grid-template-columns:1fr; }
  h1 { font-size:clamp(1.75rem,7vw,2.4rem); }
  .option h2 { font-size:1.35rem; }
}
@media (prefers-reduced-motion:reduce) { .option { transition:none; } .option:hover { transform:none; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }