/* CAD & Coin site styles. Brand values from the Issue #1 email and the @Crypto_905 banner.
   Design review: newsletter-a/marketing/site-design-review-2026-10-22.md (look only). Mobile first. */

/* Source Serif 4 (SIL OFL 1.1, see /assets/fonts/OFL.txt). Self-hosted: no third-party font requests. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/source-serif-4-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/source-serif-4-latin-700-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --accent:#9E1B1E;      /* brand red: links, h2, buttons */
  --accent-dark:#781216; /* hover, gradient end */
  --accent-deep:#5A0F12; /* button shadow, text on gold */
  --gold:#D6AA60;        /* rules, borders, markers, hero h1 on red ONLY (never text on white) */
  --gold-light:#E2BD7E;  /* gold button hover */
  --cream:#FAF0E1;       /* text on red */
  --ink:#222;
  --ink-strong:#111;
  --muted:#666666;
  --rule:#eee;
  --card-rule:#E8DCC4;
  --note-bg:#fbf6ec;
  --page-bg:#FAF5EE;     /* page background (steer 7:19 PM) */
  --footer-bg:#F3EBDD;
  --note-ink:#7a5a12;
  --font:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--page-bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;overflow-wrap:break-word}
a{color:var(--accent);text-decoration:underline}
a:hover,a:focus{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:600px;margin:0 auto;padding:0 16px}

/* Header: logo row, then nav row on phone; one row from 640px */
.site-header{background:var(--page-bg);border-bottom:3px solid var(--gold)}
.brand{display:inline-flex;align-items:center;padding:12px 0 4px;text-decoration:none}
.brand img{display:block;width:40px;height:40px}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0 -8px;padding:0 0 4px}
.site-nav a{display:inline-block;min-height:44px;padding:11px 8px;font-size:14px;line-height:22px;color:var(--ink);text-decoration:none;border-radius:4px;white-space:nowrap}
.site-nav a:hover,.site-nav a:focus{color:var(--accent);background:var(--footer-bg)}
.site-nav a[aria-current="page"]{color:var(--accent);font-weight:600;box-shadow:inset 0 -2px 0 var(--gold)}

/* Main (spacing scale 8/12/16/24/32/48) */
main{background:var(--page-bg)}
main.wrap,.main-body{padding:28px 16px 40px}
.main-body > h2:first-child{margin-top:0}
h1{font-family:var(--serif);font-size:30px;line-height:1.15;font-weight:700;margin:0 0 16px;color:var(--ink-strong)}
h2{font-family:var(--serif);font-size:22px;line-height:1.25;font-weight:600;margin:28px 0 12px;padding-top:12px;border-top:2px solid var(--gold);color:var(--accent)}
p{margin:0 0 12px}
.intro{font-size:17px}
.points{margin:0 0 24px;padding-left:22px}
.points li{margin:0 0 8px}
.points li::marker{color:var(--gold)}
.fine{font-size:14px;color:var(--muted);margin:0 0 24px}

/* Red hero band (Home, Subscribe) */
.hero{background:linear-gradient(180deg,#9E1B1E 0%,#781216 100%);border-bottom:4px solid var(--gold);color:var(--cream)}
.hero .wrap{padding-top:32px;padding-bottom:32px}
.hero h1{color:var(--gold)}
.hero .intro,.hero .points{color:var(--cream)}
.hero .signup{margin-bottom:0}

/* Buttons */
.signup{margin:8px 0 12px}
.button{display:block;width:100%;text-align:center;min-height:52px;padding:14px 28px;border-radius:6px;background:var(--accent);color:#ffffff;font-size:17px;font-weight:700;line-height:24px;text-decoration:none;box-shadow:0 2px 0 var(--accent-deep)}
.button:hover,.button:focus{background:var(--accent-dark);color:#ffffff}
.button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hero .button{background:var(--gold);color:var(--accent-deep)}
.hero .button:hover,.hero .button:focus{background:var(--gold-light);color:var(--accent-deep)}

/* Placeholder boxes: clearly visible until the real content is approved */
.placeholder{margin:0 0 12px;padding:14px 16px;border:2px dashed var(--gold);border-radius:4px;background:var(--note-bg);color:var(--note-ink);font-size:15px;font-weight:600}

/* Issue card (Home "Latest issue", every Archive entry) */
.issue-card{background:#FFFFFF;border:1px solid var(--card-rule);border-left:4px solid var(--accent);border-radius:6px;padding:16px 18px;margin:0 0 16px}
.issue-card:hover{border-color:var(--gold)}
.issue-card .placeholder{margin:0 0 8px;padding:0;border:0;background:none}
.issue-card > :last-child{margin-bottom:0}
.issue-date{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--note-ink);margin:0 0 4px}
.issue-title{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.25;margin:0 0 8px}
.issue-title a{color:var(--ink-strong);text-decoration:none}
.issue-title a:hover,.issue-title a:focus{text-decoration:underline}
.issue-summary{font-size:16px;line-height:1.55;color:var(--ink)}
.issue-links{margin:0;font-size:15px}

/* Footer */
.site-footer{background:var(--footer-bg);border-top:2px solid var(--gold);padding:24px 0 32px;color:var(--muted);font-size:13px;line-height:1.5}
.site-footer a{color:var(--accent)}
.site-footer p{margin:0 0 8px}

@media (min-width:640px){
  body{font-size:17px}
  .wrap{padding:0 24px}
  main.wrap,.main-body{padding:48px 24px 56px}
  h1{font-size:42px}
  .site-header .wrap{display:flex;justify-content:space-between;align-items:center}
  .brand{padding:10px 0}
  .site-nav ul{margin:0 -8px 0 0;padding:0}
  .site-nav a{font-size:15px}
  .hero .wrap{padding-top:56px;padding-bottom:56px}
  .button{display:inline-block;width:auto}
  .issue-card{padding:20px 24px}
  .issue-title{font-size:22px}
}