/* The Sunday Puzzle Post — shared site styles (design mockup) */

@font-face{
  font-family:"GT Alpina";
  src:url("GT-Alpina-Standard-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

/* Atkinson Hyperlegible NEXT (SIL OFL 1.1, Braille Institute of America) —
 * the body face. Designed for low-vision readers: it pulls 0/O, 1/l/I and
 * rn/m apart, which is exactly the set of confusions that produces a
 * mistyped email address. Self-hosted; see build.php's FONTS.
 *
 * The upright is the VARIABLE font — one 48KB file carrying every weight
 * from 200 to 800, smaller than the three static cuts it replaces. The
 * original family shipped 400 and 700 only, and anything between them came
 * out as a synthesized smear; Next removes that constraint, so 500 and 600
 * are now real cuts and safe to use.
 *
 * font-synthesis:none stays anyway: the italic is a single static 400, so a
 * bold italic would still be faked, and it should fail visibly if asked for. */
@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url("fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url("fonts/AtkinsonHyperlegibleNext-Italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}

:root{
  color-scheme: light;
  --paper:#FAF6EC;
  --paper-2:#F2EAD6;
  --card:#FFFFFF;
  --ink:#161D28;
  --navy:#16324F;
  --navy-deep:#0F2338;
  --brass:#5F4B20;
  --brass-bright:#B0892E;
  --muted:#3D4650;
  --rule:rgba(28,36,50,.16);
  --rule-strong:rgba(28,36,50,.34);
  /* Headlines keep GT Alpina, unchanged. */
  --serif-display:"GT Alpina","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  /* Everything else is Atkinson. --serif-body and --sans are kept as aliases
   * so the ~40 existing references across these stylesheets and the landers
   * did not all have to be rewritten to prove out the change; the names are
   * now historical. Body copy was Georgia until 2026-07-28. */
  --body:"Atkinson Hyperlegible Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif-body:var(--body);
  --sans:var(--body);
}
:root[data-theme="dark"]{ color-scheme: light; }

*{box-sizing:border-box;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1.1875rem;line-height:1.6;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;
}
/* Browsers default form controls to a system font regardless of what the
 * page says. On the landers this is the single highest-value place the face
 * is applied — it is where the email address gets typed. */
input,textarea,select,button{font-family:inherit;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;width:100%;}
.read{max-width:680px;margin-left:auto;margin-right:auto;}
h1,h2,h3{font-family:var(--serif-display);color:var(--navy);font-weight:500;letter-spacing:-.018em;text-wrap:balance;line-height:1.1;margin:0;}
a{color:var(--navy);}
p{margin:0 0 1rem;}

.eyebrow{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 .9rem;}

/* ---- masthead ---- */
.nameplate{position:relative;border-bottom:2px solid rgba(28,36,50,.5);background:var(--paper);}
.nameplate::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:rgba(28,36,50,.4);}
.nameplate .wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:18px;padding-bottom:16px;}
.nameplate a.brand{text-decoration:none;}
.nameplate .logo{display:block;width:min(330px,82vw);height:auto;}
.nav{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;}
.nav a{
  font-family:var(--sans);font-size:.92rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--brass);}
.nav a[aria-current="page"]{color:var(--brass);border-bottom-color:var(--brass);}

/* ---- buttons ---- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:700;letter-spacing:.01em;
  color:#FFF;background:var(--navy);border:0;border-radius:3px;text-decoration:none;
  cursor:pointer;transition:background .12s ease;padding:15px 28px;font-size:1.08rem;
}
.btn:hover{background:var(--navy-deep);}
.btn:focus-visible{outline:3px solid var(--brass);outline-offset:2px;}
.btn-lg{font-size:1.2rem;padding:18px 34px;}
.btn-outline{
  display:inline-block;font-family:var(--sans);font-weight:700;font-size:1.05rem;
  color:var(--navy);background:transparent;border:2px solid var(--navy);border-radius:3px;
  padding:13px 26px;text-decoration:none;cursor:pointer;transition:background .12s ease,color .12s ease;
}
.btn-outline:hover{background:var(--navy);color:#FFF;}
.btn-outline:focus-visible{outline:3px solid var(--brass);outline-offset:2px;}

/* ---- section rhythm ---- */
main{flex:1 0 auto;}
section.band{padding:56px 0;border-top:1px solid var(--rule);}
section.band:first-child{border-top:0;}
section.band.alt{background:var(--paper-2);}
.band h2{font-size:clamp(1.6rem,3.5vw,2.2rem);margin-bottom:.5rem;}
.kicker{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:.8rem;}

/* ---- prose (about / legal pages) ---- */
.page{padding:52px 0 64px;}
.page h1{font-size:clamp(2.1rem,4.4vw,3rem);letter-spacing:-.025em;line-height:1.05;margin-bottom:.4rem;}
/* The standfirst under a page title. This used to share .updated with the
 * legal "Last updated:" date, which meant a page's opening line was set at
 * 13.6px in muted grey — smaller and lighter than the body copy beneath it.
 * Matches the landers' h1 deck: body face, bold, ink. */
.page .deck{
  font-family:var(--body);font-weight:700;color:var(--ink);
  font-size:1.375rem;line-height:1.3;letter-spacing:-.005em;margin:0 0 1.6rem;
}
/* Genuinely secondary metadata — the date on /privacy and /terms only. */
.page .updated{font-family:var(--sans);font-size:1rem;color:var(--muted);letter-spacing:.02em;margin-bottom:2rem;}
.prose{font-size:1em;}
.prose h2{font-size:1.75rem;margin:2.2rem 0 .8rem;}
.prose h3{font-size:1.3rem;margin:1.6rem 0 .5rem;}
.prose p{margin:0 0 1.1rem;}
.prose ul{margin:0 0 1.1rem;padding-left:1.3rem;}
.prose li{margin:0 0 .5rem;}
.prose a{color:var(--navy);text-underline-offset:2px;}
.prose a.btn{color:#FFF;text-decoration:none;}
.prose a.btn:hover{color:#FFF;}
.prose strong{color:var(--navy);}

/* ---- footer ---- */
footer{flex-shrink:0;border-top:1px solid var(--rule-strong);background:var(--navy);color:#CBD6E4;padding:40px 0 44px;}
footer .fp{font-family:var(--serif-display);color:#F6EFDD;font-size:1.2rem;font-weight:500;margin-bottom:.5rem;}
footer .footer-logo{display:block;width:209px;max-width:66%;height:auto;margin:0 0 .85rem -4px;filter:brightness(0) invert(1);}
footer .flinks{display:flex;gap:22px;flex-wrap:wrap;margin:0 0 1rem;padding:0;list-style:none;}
footer .flinks a{color:#E6DFCF;text-decoration:none;font-family:var(--sans);font-size:.95rem;}
footer .flinks a:hover{text-decoration:underline;}
/* Both were below AA on the navy footer: #93A3B8 measured 4.53:1 and
 * #7E8FA6 only 3.53:1, and the second carries the legal publisher line.
 * #B9C6D6 is 6.72:1 and still reads as secondary. */
footer small{color:#B9C6D6;font-family:var(--sans);font-size:.82rem;}
footer .pub{color:#B9C6D6;font-family:var(--sans);font-size:.8rem;margin-top:.4rem;}

@media (min-width:768px){
  body{font-size:1.25rem;}
  .page .deck{font-size:1.625rem;}
}
@media (max-width:820px){
  .nav{gap:20px;}
}
/* 18px, not the 19px above. Atkinson has a large x-height and reads about a
 * step bigger than a humanist sans at the same pixel size, so 18px here sits
 * where 19-20px would in the old Georgia setting — and the 1-2px saved per
 * line goes straight into the mobile fold budget on the landers. */

@media (prefers-reduced-motion:reduce){*{transition:none!important;}}