/* Fact of the Day — shared editorial "paper" theme
   Calm, warm, minimal. One muted terracotta accent, used sparingly.
   Pages link this, then add only their page-specific layout. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Inter:wght@400;500;600&display=swap");

:root{
  --paper:#f5f1e8;        /* warm cream page */
  --paper-2:#efe9da;      /* panel / card */
  --paper-press:#ece5d6;  /* hover */
  --ink:#22201b;          /* warm near-black */
  --ink-soft:#4a4439;     /* secondary text */
  --muted:#8c8472;        /* warm grey */
  --line:#e2dbca;         /* hairline */
  --accent:#a4583b;       /* muted terracotta — rare */
  --accent-soft:#c08a5e;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh; overflow-x:hidden;
}
a{color:inherit}
::selection{background:rgba(164,88,59,.18)}

/* ---- top bar: back link + quiet page label ---- */
.bar{position:fixed; top:0; left:0; right:0; display:flex; align-items:center;
  justify-content:space-between; padding:16px clamp(18px,4vw,32px); z-index:6;}
.back{font-size:.78rem; font-weight:500; color:var(--muted); text-decoration:none;
  display:inline-flex; align-items:center; gap:7px; transition:color .2s ease;}
.back:hover{color:var(--ink)}
.brandtag,.src-tag{font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:.9rem; color:var(--muted); letter-spacing:0; text-transform:none;}

/* ---- small labels ---- */
.eyebrow{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-weight:500;}
.date{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:500;}

/* ---- countdown ---- */
.cd{font-size:.74rem; color:var(--muted); letter-spacing:.02em;}
.cd b{color:var(--ink-soft); font-weight:500; font-variant-numeric:tabular-nums;}

/* ---- buttons / pills ---- */
.btn,.copy{font-family:var(--sans); font-size:.78rem; font-weight:500; color:var(--ink);
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; cursor:pointer; text-decoration:none; display:inline-flex;
  align-items:center; gap:7px; transition:background-color .2s ease, border-color .2s ease, color .2s ease;}
.btn:hover,.copy:hover{background:var(--paper-press); border-color:#cfc6b1;}
.btn-accent{border-color:rgba(164,88,59,.38); color:var(--accent);}
.btn-accent:hover{background:rgba(164,88,59,.08); border-color:rgba(164,88,59,.5);}

/* ---- surfaces ---- */
.surface{background:var(--paper-2); border:1px solid var(--line); border-radius:14px;}

/* ---- serif display helpers ---- */
.serif{font-family:var(--serif);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;}
}