/* ==========================================================
   SUE SUN-TIMES — digital edition design system
   Locked Aug 27, 2026 · Editor: Zoe · Desk: C. Squiggle
   Paper #EFEDE6 · Ink #2B2925 · Gold #A87D2E · Rose #B4566A
   Faces: masthead SVG (outlined) · Libre Caslon Text (body,
   roman/italic only) · Libre Franklin (utility; sole bold/caps
   face) · Akshar 600 (display-only: alt headlines + faux ads)
   ========================================================== */

:root{
  --paper:#EFEDE6;
  --ink:#2B2925;
  --faded:#6B665C;
  --rule:#BFB9AC;
  --gold:#A87D2E;
  --rose:#B4566A;
  --tile:#F7F5EE;
  --tile-border:#CCC6B7;
  /* wordle/connections game states (retuned to palette) */
  --absent:#8B8578; --present:#C9A227; --correct:#5E7C3A;
  --y:#E7C95C; --g:#A0C35A; --b:#A8BEE3; --p:#BB86C7;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Libre Caslon Text', Georgia, serif;
  line-height:1.55;
  position:relative;
}
/* paper grain — feTurbulence, tuned to be missed only when removed */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sheet{position:relative; z-index:1; max-width:640px; margin:0 auto; padding:20px 16px 60px;}
.sheet--wide{max-width:860px;}

/* ---------- masthead ---------- */
.masthead{text-align:center; border-bottom:3px double var(--ink); padding-bottom:10px;}
.masthead .plate{display:block; width:min(440px,88%); height:auto; margin:10px auto 4px;}
.kicker{font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); font-weight:700; font-family:'Libre Franklin', sans-serif;}
.dateline{display:flex; flex-wrap:wrap; justify-content:center; column-gap:18px; row-gap:2px; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--faded); border-top:1px solid var(--ink); padding-top:5px; margin-top:8px; font-family:'Libre Franklin', sans-serif; font-weight:500;}
.dateline span{white-space:nowrap;}

/* ---------- navigation ---------- */
.secnav{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; border-bottom:1px solid var(--ink); padding:7px 0; font-family:'Libre Franklin', sans-serif; font-weight:700; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;}
.secnav a{color:var(--ink); text-decoration:none; padding:2px 1px;}
.secnav a:hover{color:var(--gold);}
.secnav a[aria-current="page"]{color:var(--gold); border-bottom:2px solid var(--gold);}
.secnav .tk{color:var(--faded); cursor:default;}
.backline{text-align:center; margin:14px 0 6px;}
.backline a{font-family:'Libre Franklin', sans-serif; font-weight:700; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--faded); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px;}
.backline a:hover{color:var(--gold);}

/* ---------- editorial furniture ---------- */
.deck{font-style:italic; color:var(--faded); text-align:center; font-size:15px; margin:10px 0 16px;}
.sechead{font-family:'Libre Franklin', sans-serif; font-weight:800; font-size:14px; letter-spacing:2.5px; text-transform:uppercase; text-align:center; border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); padding:6px 0; margin:26px 0 14px;}
.headline{font-family:'Libre Caslon Text', Georgia, serif; font-weight:400; font-size:clamp(26px,6vw,40px); line-height:1.15; text-align:center; margin:18px 0 6px;}
.byline{font-family:'Libre Franklin', sans-serif; font-weight:700; font-size:11px; letter-spacing:2px; text-transform:uppercase; text-align:center; color:var(--faded); margin:10px 0 18px;}
.bodycopy p{font-size:16px; margin:0 0 1em; text-align:justify; hyphens:auto;}
.bodycopy p + p{text-indent:1.4em;}
.dropcap::first-letter{font-size:3.1em; float:left; line-height:.82; padding:.04em .08em 0 0;}
.pullquote{font-style:italic; font-size:21px; line-height:1.35; text-align:center; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:14px 8px; margin:22px 12%;}
.rule-box{border:1.5px solid var(--ink); padding:14px 16px; margin:18px 0;}
.smallcaps-lead{font-family:'Libre Franklin', sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.5px;}
.display{font-family:'Akshar', 'Libre Franklin', sans-serif; font-weight:600;}

figure{margin:18px 0;}
figure img{width:100%; height:auto; display:block; border:1px solid var(--rule);}
figcaption{font-size:12.5px; color:var(--faded); font-style:italic; margin-top:6px; line-height:1.45;}

/* ---------- game shared ---------- */
.msg{min-height:22px; text-align:center; font-family:'Libre Franklin', sans-serif; font-weight:700; font-size:13px; letter-spacing:.5px; color:var(--gold);}
.hidden{display:none;}
.note{font-size:12px; color:var(--faded); text-align:center; margin-top:14px;}

/* ---------- game cards (hub) ---------- */
.gamelink{display:block; text-decoration:none; color:var(--ink); border:1.5px solid var(--ink); border-radius:8px; padding:20px 18px; text-align:center; background:var(--tile); transition:transform .1s; position:relative; z-index:1;}
.gamelink:active{transform:scale(.98);}
.gamelink h2{font-family:'Libre Franklin', sans-serif; font-size:15px; letter-spacing:2px; text-transform:uppercase; margin:0 0 4px;}
.gamelink p{font-size:13px; font-style:italic; color:var(--faded); margin:0;}

/* ---------- footer ---------- */
footer{text-align:center; margin-top:44px; border-top:3px double var(--ink); padding-top:12px; position:relative; z-index:1;}
footer .toast{font-family:'Libre Caslon Text', Georgia, serif; font-style:italic; font-size:19px; margin:4px 0;}
footer .colophon{font-size:12.5px; color:var(--faded); max-width:460px; margin:10px auto 6px; line-height:1.5;}
footer .fine{font-size:11px; color:var(--faded); letter-spacing:1px; text-transform:uppercase; font-family:'Libre Franklin', sans-serif; font-weight:500;}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }
.shake{animation:shake .35s;}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}