* { box-sizing: border-box; }
:root { --paper:#f6f3ec; --surface:#fbf9f4; --ink:#292d2b; --muted:#696d64; --line:#dbddd2; --accent:#426885; --art:#e9ede6; --heading:Georgia,'Times New Roman',serif; --radius:3px; }
[data-theme="minimal"] { --paper:#fff; --surface:#fff; --ink:#16202c; --muted:#68727f; --line:#e4e7eb; --accent:#245eea; --art:#f5f7fb; --heading:Arial,Helvetica,sans-serif; --radius:12px; }
[data-theme="dark"] { color-scheme:dark; --paper:#131918; --surface:#1a2220; --ink:#edf1e9; --muted:#9ca9a1; --line:#34403a; --accent:#bdd6a7; --art:#222e29; --heading:Arial,Helvetica,sans-serif; --radius:10px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
a:focus-visible, button:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.theme-bar { background:#20252b; color:#fff; padding:13px 24px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; font-size:12px; }
.theme-bar > span { color:#aeb9c3; letter-spacing:.08em; text-transform:uppercase; font-size:10px; }
.choices { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; }
.choices button { border:1px solid #58616c; background:transparent; color:#d4dbe3; border-radius:6px; padding:9px 14px; cursor:pointer; font:inherit; }
.choices button[aria-pressed="true"] { background:#fff; color:#20252b; border-color:#fff; }
.swatch { display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; border:1px solid #aab2b7; }
.wrap { width:min(1080px, calc(100% - 96px)); margin:auto; }
.masthead { padding:29px 0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { font-size:12px; letter-spacing:.13em; text-transform:uppercase; display:flex; align-items:center; gap:12px; }
.mark { width:21px; height:25px; border:1px solid var(--accent); position:relative; transform:rotate(-8deg); }
.mark:after { content:''; position:absolute; inset:4px -5px -4px 4px; border:1px solid var(--accent); background:var(--paper); }
.masthead a { text-decoration:none; font-size:12px; color:var(--muted); }
.hero { padding:66px 0 54px; display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:40px; align-items:center; }
.eyebrow { font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 20px; }
h1 { font-family:var(--heading); font-weight:400; font-size:clamp(36px,5.4vw,64px); letter-spacing:-.045em; line-height:1.06; margin:0 0 22px; }
h1 em { font-weight:400; color:var(--accent); }
[data-theme="minimal"] h1,[data-theme="dark"] h1 { font-weight:600; }
[data-theme="minimal"] h1 em,[data-theme="dark"] h1 em { font-style:normal; font-weight:600; }
.intro { margin:0; max-width:470px; font-size:15px; line-height:1.8; color:var(--muted); }
.hero-art { width:220px; height:190px; color:var(--accent); opacity:.7; }
.section-label { display:flex; align-items:center; justify-content:space-between; padding-bottom:17px; border-bottom:1px solid var(--line); margin-bottom:23px; }
.section-label h2 { font-weight:400; font-size:13px; margin:0; }
.section-label span { font-size:10px; letter-spacing:.06em; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.card { display:flex; flex-direction:column; position:relative; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px 22px; transition:transform .18s,border-color .18s; }
.card:hover { transform:translateY(-3px); border-color:var(--accent); }
.card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.tag { color:var(--accent); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.number { font-size:10px; color:var(--muted); font-family:monospace; }
.card h3 { overflow-wrap:anywhere; font-family:var(--heading); font-size:25px; font-weight:400; letter-spacing:-.025em; margin:0 0 10px; }
[data-theme="minimal"] .card h3,[data-theme="dark"] .card h3 { overflow-wrap:anywhere; font-size:22px; font-weight:500; }
.card p { font-size:12px; color:var(--muted); line-height:1.7; margin:0; max-width:290px; }
.card-content { padding-right:80px; min-height:89px; position:relative; }
.card-art { width:65px; height:65px; position:absolute; right:0; top:0; color:var(--accent); opacity:.75; }
.card-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding-top:17px; border-top:1px solid var(--line); font-size:11px; }
.edition { color:var(--muted); font-size:10px; }
.action { color:var(--accent); }
footer { margin-top:42px; padding:22px 0 30px; display:flex; justify-content:space-between; border-top:1px solid var(--line); font-size:10px; color:var(--muted); }
.footer-link { text-underline-offset:3px; }
svg { fill:none; stroke:currentColor; stroke-width:1.2; }
@media(min-width:1400px) { .hero { padding-top:82px; padding-bottom:66px; } }
@media(max-width:740px) { .wrap { width:calc(100% - 40px); } .hero { grid-template-columns:1fr; padding:45px 0 36px; } .hero-art { display:none; } .grid { grid-template-columns:1fr; } .theme-bar { padding:12px 8px; gap:10px; } .choices button { font-size:11px; padding:8px; } .card { padding:24px; } footer { gap:16px; line-height:1.6; } }
@media(prefers-reduced-motion:reduce) { .card { transition:none; } }

[hidden] { display:none !important; }
.skip-link { position:absolute; top:8px; left:8px; z-index:10; padding:12px; background:var(--surface); transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.hero > div { min-width:0; }
.card { min-width:0; }
.card h3 { line-height:1.14; }
.card p { max-width:310px; }
.masthead a { text-underline-offset:4px; }
.masthead a:hover { text-decoration:underline; }
@media(max-width:480px) {
  .theme-bar { flex-direction:column; gap:9px; }
  .choices { width:100%; }
  .choices button { min-height:42px; padding:9px 12px; }
  .masthead { gap:16px; }
  .masthead a { font-size:11px; text-align:right; }
  .wordmark { font-size:10px; gap:10px; flex-shrink:0; }
  .card-content { padding-right:55px; }
  .card-art { width:43px; height:43px; }
  .card h3 { font-size:24px; }
  [data-theme="minimal"] .card h3,[data-theme="dark"] .card h3 { font-size:22px; }
  .card { padding:22px; }
  footer { flex-wrap:wrap; }
}