/* willytai.com — "Gazette" design system (from the Claude-design handoff).
   Elegant newspaper: Newsreader serif + Inter UI + JetBrains Mono utility.
   Warm paper, cobalt accent, 3px/1px rule pattern, NO rounded corners,
   "Midnight Cobalt" dark mode via [data-theme=dark] variable swap. */
:root{
  --bg:#FAF7F1; --paper:#FAF7F1; --card:#FFFFFF; --ink:#211E18; --body:#3A352D;
  --muted:#7A7264; --line:#E3DACA; --rule:#CFC5B2; --accent:#1F5AA8; --ok:#2C6B5F;
  --shadow:rgba(80,60,20,.35);
  --serif:'Newsreader',Georgia,serif; --ui:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
[data-theme="dark"]{
  --bg:#080C14; --paper:#080C14; --card:#0D1420; --ink:#DCE6F5; --body:#A9B9D2;
  --muted:#68788F; --line:#182234; --rule:#223047; --accent:#57A6FF; --ok:#43D6B2;
  --shadow:rgba(0,0,0,.7);
}
*{box-sizing:border-box} html,body{margin:0} html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.container{max-width:1180px;margin:0 auto;padding:0 56px}

/* utility bar */
.utility{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--line)}
.utility .theme-toggle{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);background:none;border:1px solid var(--line);padding:3px 10px;cursor:pointer}
.utility .theme-toggle:hover{color:var(--ink);border-color:var(--rule)}
.utility .right{display:flex;align-items:center;gap:14px}

/* masthead — full (home) */
.masthead{text-align:center;padding:30px 0 18px}
.masthead .plate{display:flex;align-items:center;justify-content:center;gap:26px}
.masthead .plate .hl{flex:1;height:1px;background:var(--rule)}
.masthead h1{font-family:var(--serif);font-weight:600;font-size:66px;letter-spacing:.02em;color:var(--ink);margin:0;line-height:1;white-space:nowrap}
.masthead h1 a{color:inherit}
.masthead .strap{font-family:var(--serif);font-style:italic;font-size:16.5px;color:var(--muted);margin:14px 0 0}

/* masthead — compact (subpages) */
.masthead-compact{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:22px 0 14px}
.masthead-compact .plate{font-family:var(--serif);font-weight:600;font-size:38px;color:var(--ink);line-height:1}
.masthead-compact nav{display:flex;gap:26px;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.masthead-compact nav a{color:var(--ink);padding-bottom:3px}
.masthead-compact nav a.accent{color:var(--accent)}
.masthead-compact nav a.active{color:var(--accent);border-bottom:2px solid var(--accent)}

/* rules */
.rule3{border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
.rule-double{border-top:3px solid var(--ink)}

/* main nav (home) */
.gnav{position:relative;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
.gnav .row{display:flex;align-items:stretch;justify-content:center}
.gnav a.item{padding:13px 26px;font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border-left:1px solid var(--line);display:flex;align-items:center;gap:7px}
.gnav a.item:last-child{border-right:1px solid var(--line)}
.gnav a.item .caret{font-size:8px;opacity:.5}
.gnav a.item.accent{color:var(--accent)}
.gnav a.item.open{color:var(--accent)}
.gnav .dropdown{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:3px double var(--ink);border-left:1px solid var(--line);border-right:1px solid var(--line);box-shadow:0 24px 40px -22px var(--shadow);z-index:20}
.gnav .dropdown .inner{padding:22px 30px}
.gnav .dropdown .kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--accent);margin-bottom:14px}
.gnav .dropdown .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 28px}
.gnav .dropdown .grid a{display:block;padding:11px 0;border-top:1px solid var(--line)}
.gnav .dropdown .grid a .t{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);line-height:1.2}
.gnav .dropdown .grid a .d{font-family:var(--ui);font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}
.gnav .dropdown .grid a:hover .t{color:var(--accent)}

/* typography atoms */
.kicker{display:block;font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.kicker-mono{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--accent);margin-bottom:12px}
.deck{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--muted)}
.byline{font-family:var(--ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.serif-body{font-family:var(--serif);font-size:15.5px;line-height:1.6;color:var(--body)}
.serif-body p{margin:0 0 12px} .serif-body p:last-child{margin-bottom:0}
.dropcap::first-letter{float:left;font-family:var(--serif);font-weight:600;font-size:62px;line-height:.78;padding:6px 10px 0 0;color:var(--accent)}
.readmore{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--accent)}
.cta-caps{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* figures */
.gfig{margin:18px 0 4px}
.gfig .frame{border:1px solid var(--ink);background:var(--card)}
.gfig .frame img,.gfig .frame svg{width:100%;display:block}
.gfig figcaption{font-family:var(--ui);font-size:11.5px;color:var(--muted);margin-top:8px;padding-bottom:8px;border-bottom:1px solid var(--rule);line-height:1.5}
.gfig figcaption b{color:var(--ink);font-weight:600}

/* page head (subpages) */
.page-head{padding:34px 0 22px;border-bottom:3px solid var(--ink)}
.page-head h1{font-family:var(--serif);font-weight:600;font-size:48px;line-height:1.04;letter-spacing:-.015em;color:var(--ink);margin:0 0 10px;text-wrap:balance}
.page-head .deck{font-size:17px}

/* index rows (use cases / articles) */
.index-row{display:grid;grid-template-columns:56px 300px 1fr auto;gap:26px;align-items:start;padding:26px 8px;border-bottom:1px solid var(--rule)}
.index-row:hover{background:var(--card)}
.index-row .num{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--muted)}
.index-row .thumb{border:1px solid var(--ink);height:170px;overflow:hidden;background:var(--card)}
.index-row .thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.index-row h3{font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.1;color:var(--ink);margin:7px 0 9px}
.index-row .desc{font-family:var(--serif);font-size:14.5px;line-height:1.55;color:var(--body);max-width:56ch}
.index-row .go{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--accent);white-space:nowrap;padding-top:6px}

/* footer */
.gfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:24px 0 44px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.gfoot .name{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink)}
.gfoot a{color:var(--muted)} .gfoot a:hover{color:var(--ink)}

/* responsive */
@media(max-width:960px){
  .container{padding:0 24px}
  .masthead h1{font-size:44px;white-space:normal}
  .gnav a.item{padding:12px 14px;letter-spacing:.08em}
  .gnav .dropdown .grid{grid-template-columns:1fr}
  .index-row{grid-template-columns:1fr;gap:12px}
  .index-row .thumb{height:190px}
  .masthead-compact{flex-direction:column;align-items:flex-start;gap:10px}
  .page-head h1{font-size:34px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* mobile pass (~390px) — from the mobile handoff spec, adapted to Gazette */
html,body{overflow-x:clip}
@media(max-width:640px){
  .container{padding:0 18px}
  .utility{flex-wrap:wrap;row-gap:4px}
  .utility>span:first-child{display:none} /* compact header: drop the motto, keep clock + mode */
  .masthead{padding:22px 0 12px}
  .masthead h1{font-size:38px}
  .masthead .strap{font-size:14px}
  .gnav .row{flex-wrap:wrap}
  .gnav a.item{flex:1 1 33%;justify-content:center;padding:11px 6px;font-size:10.5px;letter-spacing:.06em;border-left:none;border-top:1px solid var(--line2)}
  .page-head h1{font-size:30px}
  .page-head{padding:24px 0 16px}
  .index-row .thumb{height:150px}
  .index-row h3{font-size:22px}
  .gfoot{flex-direction:column;align-items:flex-start;gap:6px}
}