/* ============================================================
   KL FIELD GUIDE — shared styles
   Editorial / field-guide aesthetic. Carried over from the map:
   Fraunces (display) + Newsreader (body), warm paper palette.
   ============================================================ */

:root{
  --paper:#FBF7EF; --paper-2:#F3ECDE; --paper-3:#EFE6D4;
  --ink:#23201B; --ink-soft:#5C564B; --ink-faint:#8A8275;
  --line:#D9CFBC; --line-soft:#E7DECD;
  --accent:#9A5A86;
  /* theme families (match map) */
  --eat:#B25B3E; --green:#4E6B4A; --culture:#3C5A8A; --views:#9A5A86; --move:#6E6A60;
  /* status */
  --confirmed:#3F7A55; --verify:#C68A1E; --optional:#8892A3; --backup:#8A6BA6; --floating:#3E8E8A;
  --done:#9aa896;
  --maxw:1080px;
  /* elevation — soft, paper-friendly */
  --card-shadow: 0 1px 0 var(--line), 0 12px 22px -16px rgba(35,32,27,.18);
  --card-shadow-lift: 0 1px 0 var(--line), 0 22px 38px -22px rgba(35,32,27,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* ============================================================
   COVER / INTRO SCREEN — dismissable, remembered via localStorage
   ============================================================ */
.cover{
  position:fixed; inset:0; z-index:3000;
  background:#0d0c1a;
  color:#fbf3df;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:32px 24px;
  overflow:hidden;
  transition:opacity .85s ease, transform .85s ease;
}
.cover.is-gone{opacity:0; transform:scale(1.02); pointer-events:none}
.cover.is-hidden{display:none}
.cover__sky{position:absolute; inset:0; background:#0d0c1a; transition:none}
.cover__stars{
  position:absolute; left:0; right:0; top:0; height:62%; pointer-events:none;
  opacity:.85;
  background-image:
    radial-gradient(1px 1px at 7% 16%, #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 28%, #fff8e7 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 23% 11%, #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 24%, #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 39% 17%, #fff8e7 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 47% 8%,  #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 22%, #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 13%, #fff8e7 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 71% 27%, #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 79% 16%, #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 24%, #fff8e7 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 93% 10%, #fff8e7 50%, transparent 51%);
  animation: cover-star-twinkle 4.5s ease-in-out infinite;
}
@keyframes cover-star-twinkle{
  0%,100%{filter:brightness(1)} 50%{filter:brightness(1.5)}
}
.cover__sun{
  position:absolute; left:50%; top:50%;
  width:34px; height:34px; margin-left:-17px; margin-top:-17px;
  border-radius:50%;
  background:radial-gradient(circle, #f5d27a 0%, transparent 68%);
  opacity:.7;
  filter:blur(7px);
}
.cover__sun::after{
  content:""; position:absolute; inset:32%; border-radius:50%;
  background:currentColor; opacity:.65; filter:blur(0);
}
.cover__skyline{
  position:absolute; bottom:0; left:0; width:100%;
  height:clamp(110px, 18vw, 200px); pointer-events:none; display:block;
}
.cover__skyline-fill{fill:rgba(20,16,14,.92)}
.cover__skyline-windows rect{
  fill:#ffd07a; opacity:.85;
  animation: cover-window 4.5s ease-in-out infinite;
}
.cover__skyline-windows rect:nth-child(3n){animation-delay:.8s}
.cover__skyline-windows rect:nth-child(4n){animation-delay:1.6s}
.cover__skyline-windows rect:nth-child(5n){animation-delay:2.3s}
.cover__skyline-windows rect:nth-child(7n){animation-delay:3.1s}
@keyframes cover-window{0%,100%{filter:brightness(1)} 50%{filter:brightness(1.7)}}

/* ornament + text */
.cover__inner{
  position:relative; z-index:5; max-width:560px; display:flex; flex-direction:column;
  align-items:center; gap:0;
}
.cover{
  --cover-text-bright:#fff7e2;
  --cover-text-mid:#ece2c5;
  --cover-text-faint:#c7be9f;
  --cover-ornament:#f0e2b2;
}
.cover__star{
  width:54px; height:54px; color:var(--cover-ornament); opacity:0;
  animation: cover-star-in 1s cubic-bezier(.2,.7,.2,1) .1s forwards,
             cover-star-spin 80s linear 1.1s infinite;
  transition: color .25s ease;
}
@keyframes cover-star-in{
  from{opacity:0; transform:scale(.5) rotate(-30deg)}
  to{opacity:.9; transform:scale(1) rotate(0)}
}
@keyframes cover-star-spin{
  from{transform:rotate(0)} to{transform:rotate(360deg)}
}
.cover__kicker{
  font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--cover-text-mid); margin:22px 0 8px;
  opacity:0; animation: cover-rise .8s ease .4s forwards;
  transition: color .25s ease;
}
.cover__title{
  font-family:"Fraunces",serif; font-weight:600;
  font-size:clamp(54px,13vw,118px); line-height:.95; letter-spacing:-.025em;
  margin:6px 0 0; color:var(--cover-text-bright);
  opacity:0; animation: cover-rise 1s cubic-bezier(.2,.7,.2,1) .6s forwards;
  text-shadow:0 2px 28px rgba(0,0,0,.35);
  transition: color .25s ease;
}
.cover__sub{
  font-family:"Newsreader",serif; font-style:italic;
  font-size:clamp(15px,2.6vw,19px); color:var(--cover-text-mid);
  margin:14px 0 0; max-width:30ch;
  opacity:0; animation: cover-rise .8s ease 1s forwards;
  transition: color .25s ease;
}
.cover__teaser{
  font-family:"Newsreader",serif; font-style:italic;
  font-size:clamp(13px,2vw,15px); color:var(--cover-text-faint);
  margin:24px 0 0; max-width:38ch; line-height:1.45;
  opacity:0; animation: cover-rise .8s ease 1.3s forwards;
  transition: color .25s ease;
}
.cover__begin{
  font-family:"Newsreader",serif; font-size:13.5px; letter-spacing:.18em;
  text-transform:uppercase; color:#0d0c1a; background:#fbf3df;
  border:0; padding:14px 34px; border-radius:99px;
  margin:34px 0 0; cursor:pointer;
  opacity:0; animation: cover-rise .8s ease 1.7s forwards;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  min-height:48px;
}
.cover__begin:hover{background:#fff; transform:translateY(-1px)}
.cover__begin:focus-visible{outline:2px solid #f5d27a; outline-offset:3px}
@keyframes cover-rise{
  from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){
  .cover__star, .cover__stars, .cover__skyline-windows rect{animation:none}
  .cover__kicker, .cover__title, .cover__sub, .cover__teaser, .cover__begin{
    opacity:1; animation:none;
  }
}
@media (max-width:520px){
  .cover{padding:24px 18px}
  .cover__star{width:42px; height:42px}
  .cover__sub{margin-top:10px}
  .cover__teaser{margin-top:18px}
  .cover__begin{margin-top:24px; padding:13px 28px; font-size:12.5px}
}

/* small replay link in the footer */
.cover-replay{
  font-size:11.5px; color:var(--ink-faint); background:none; border:0;
  cursor:pointer; padding:0; margin:0; text-decoration:underline; text-underline-offset:2px;
}
.cover-replay:hover{color:var(--ink)}
@media print{.cover, .cover-replay{display:none !important}}


/* keyboard focus — visible everywhere, never on mouse click */
:focus{outline:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
button:focus-visible, .pill:focus-visible, .dec__opt:focus-visible,
.day__head:focus-visible, .li:focus-visible, .stop__check input:focus-visible,
.foot__reset:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

body{
  margin:0; color:var(--ink); background:var(--paper-2);
  font-family:"Newsreader",Georgia,serif; font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* faint paper grain */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(35,32,27,.055) 1px, transparent 0);
  background-size:4px 4px;
}
img{max-width:100%}
a{color:var(--ink)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* display type */
.kicker{font-size:10.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft); margin:0}
h1,h2,h3{font-family:"Fraunces",serif; font-weight:600; letter-spacing:-.01em; line-height:1.04; margin:0}
.serif-it{font-style:italic; font-family:"Newsreader",serif}

/* ---------- staggered page-load reveal ---------- */
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.reveal{opacity:0; animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  isolation:isolate;
  /* time-driven sky vars — JS updates these every minute from klNow() */
  --sky-top:#e6e0cc; --sky-mid:var(--paper-2); --sky-low:var(--paper);
  --sun-x:50%; --sun-y:24%;
  --sun-color:#f5d27a; --sun-opacity:.5; --sun-size:18px; --sun-blur:8px;
  --skyline-color:rgba(35,32,27,.16);
  --window-opacity:0; --star-opacity:0;
  --hero-text:var(--ink); --hero-text-soft:var(--ink-soft); --hero-rule:var(--ink);
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(154,90,134,.08), transparent 55%),
    radial-gradient(120% 90% at 8% 0%, rgba(78,107,74,.08), transparent 55%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 100%);
  transition: background 12s linear, --sky-top 12s linear, --sky-mid 12s linear, --sky-low 12s linear;
  color:var(--hero-text);
}
.hero__sky{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.hero__sun{
  position:absolute; left:var(--sun-x); top:var(--sun-y);
  width:var(--sun-size); height:var(--sun-size); margin-left:calc(var(--sun-size) / -2); margin-top:calc(var(--sun-size) / -2);
  border-radius:50%;
  background:radial-gradient(circle, var(--sun-color) 0%, transparent 68%);
  opacity:var(--sun-opacity);
  filter:blur(var(--sun-blur));
  transition: left 60s linear, top 60s linear, background 12s linear, opacity 12s linear, filter 12s linear;
}
.hero__sun::after{
  content:""; position:absolute; inset:35%;
  background:var(--sun-color);
  border-radius:50%;
  opacity:.55;
  filter:blur(0);
}
.hero__stars{
  position:absolute; left:0; right:0; top:0; height:60%;
  opacity:var(--star-opacity);
  transition: opacity 18s linear;
  background-image:
    radial-gradient(1px 1px at 9%  18%, #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 17% 32%, #fff8e7 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 26% 12%, #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 26%, #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 42% 18%, #fff8e7 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 51% 8%,  #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 22%, #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 14%, #fff8e7 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 73% 28%, #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 16%, #fff8e7 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 24%, #fff8e7 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 95% 10%, #fff8e7 50%, transparent 51%);
}
.hero__skyline{
  position:absolute; bottom:0; left:0; width:100%; height:clamp(72px, 13vw, 140px);
  pointer-events:none; display:block;
}
.hero__skyline-fill{fill:var(--skyline-color); transition:fill 12s linear}
.hero__skyline-windows rect{
  fill:#ffd07a;
  opacity:var(--window-opacity);
  transition: opacity 18s linear;
  animation: hero-window 5s ease-in-out infinite;
}
.hero__skyline-windows rect:nth-child(3n){animation-delay:.9s}
.hero__skyline-windows rect:nth-child(4n){animation-delay:1.7s}
.hero__skyline-windows rect:nth-child(5n){animation-delay:2.4s}
.hero__skyline-windows rect:nth-child(7n){animation-delay:3.1s}
@keyframes hero-window{0%,100%{filter:brightness(1)} 50%{filter:brightness(1.7)}}
@media (prefers-reduced-motion:reduce){
  .hero__skyline-windows rect{animation:none}
  .hero, .hero__sun, .hero__skyline-fill, .hero__stars, .hero__skyline-windows rect{transition:none}
}
.hero__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.hero__inner{max-width:var(--maxw); margin:0 auto; padding:54px 22px 40px; position:relative; z-index:2}

/* Sky intro — when running the timelapse, kill all the slow 12s transitions
   so each rAF frame paints immediately. Class is removed when intro finishes. */
.hero.sky-intro,
.hero.sky-intro .hero__sun,
.hero.sky-intro .hero__skyline-fill,
.hero.sky-intro .hero__skyline-windows rect,
.hero.sky-intro .hero__stars,
.hero.sky-intro .hero__title,
.hero.sky-intro .status__big,
.hero.sky-intro .clock,
.hero.sky-intro .kicker,
.hero.sky-intro .hero__sub,
.hero.sky-intro .status__lab,
.hero.sky-intro .progress__cap,
.hero.sky-intro .progress__cap b,
.hero.sky-intro .hero__rule{
  transition:none !important;
}

/* hero text — three brightness tiers, smoothly interpolated by JS based on sky lightness */
.hero{
  --hero-text-bright: var(--ink);
  --hero-text-mid: var(--ink-soft);
  --hero-text-faint: var(--ink-faint);
}
.hero .hero__title,
.hero .status__big,
.hero .clock                    { color: var(--hero-text-bright); transition: color 12s linear }
.hero .kicker,
.hero .hero__sub,
.hero .status__lab,
.hero .progress__cap            { color: var(--hero-text-mid);    transition: color 12s linear }
.hero .progress__cap b          { color: var(--hero-text-bright); transition: color 12s linear }
.hero .hero__rule               { background: linear-gradient(90deg, var(--hero-text-bright), transparent); transition: background 12s linear }
/* progress bar — invert the cover when sky is dark */
.hero.is-dim .progress__bar     { border-color: rgba(246,239,221,.32) }
.hero.is-dim .progress__fill    { background: rgba(40,32,48,.55) }
.hero__title{font-size:clamp(46px,11vw,108px); margin:.10em 0 0; letter-spacing:-.025em}
.hero__sub{font-style:italic; font-size:clamp(16px,2.4vw,21px); color:var(--ink-soft); margin:10px 0 0; max-width:34ch}
.hero__rule{height:1px; background:linear-gradient(90deg,var(--ink),transparent); margin:26px 0 0; opacity:.5}

/* live status strip */
.status{display:flex; flex-wrap:wrap; gap:22px 42px; align-items:flex-end; margin-top:24px}
.status__block{min-width:118px}
.status__big{font-family:"Fraunces",serif; font-weight:600; font-size:clamp(30px,6vw,46px); line-height:.95; color:var(--ink)}
.status__lab{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); margin-top:7px}
.clock{font-variant-numeric:tabular-nums}
.progress{flex:1; min-width:200px}
.progress__bar{height:9px; border:1px solid var(--line); border-radius:99px; overflow:hidden; position:relative;
  background:linear-gradient(90deg, var(--green) 0%, #6d8a63 35%, var(--eat) 75%, var(--accent) 100%)}
.progress__fill{position:absolute; top:0; bottom:0; right:0; width:100%; background:var(--paper-3);
  transform:translateX(var(--pct, 0%)); transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.progress__cap{display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-soft); margin-top:7px}
.progress__cap b{color:var(--ink); font-weight:600}

/* ============================================================
   STICKY DAY SCRUBBER
   ============================================================ */
.scrub{position:sticky; top:0; z-index:60; background:rgba(251,247,239,.86);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line)}
.scrub__inner{max-width:var(--maxw); margin:0 auto; display:flex; gap:7px; padding:9px 22px;
  overflow-x:auto; scrollbar-width:none}
.scrub__inner::-webkit-scrollbar{display:none}
.pill{flex:none; border:1px solid var(--line); background:var(--paper); cursor:pointer;
  padding:9px 13px 13px; border-radius:99px; font-family:"Newsreader",serif; font-size:13px; color:var(--ink-soft);
  white-space:nowrap; transition:.15s; position:relative; min-height:34px}
.pill:hover{border-color:var(--ink-soft); color:var(--ink)}
.pill[data-day]::after{content:""; position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--fam, transparent); opacity:.85}
.pill.today{border-color:var(--fam, var(--accent)); color:var(--fam, var(--accent))}
.pill.done{color:var(--done)}
.pill.done::after{opacity:.35}
.pill[data-jump]{padding-bottom:9px}
.pill[data-jump="map"],.pill[data-jump="checklist"],.pill[data-jump="decisions"]{background:var(--paper-2)}

/* ============================================================
   NOW / NEXT STRIP
   ============================================================ */
.now{max-width:var(--maxw); margin:26px auto 0; padding:0 22px}
.now__card{border:1px solid var(--line); border-radius:4px; background:var(--paper);
  box-shadow:var(--card-shadow-lift); overflow:hidden; position:relative}
.now__card::before{content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--fam, var(--accent)); opacity:.55}
.now__head{display:flex; align-items:center; gap:9px; padding:12px 16px; border-bottom:1px solid var(--line-soft);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft)}
.now__live{width:8px;height:8px;border-radius:50%;background:var(--confirmed);box-shadow:0 0 0 0 rgba(63,122,85,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,122,85,.45)}70%{box-shadow:0 0 0 9px rgba(63,122,85,0)}100%{box-shadow:0 0 0 0 rgba(63,122,85,0)}}
.now__grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft)}
.now__cell{background:var(--paper); padding:15px 16px}
.now__lab{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 5px}
.now__name{font-family:"Fraunces",serif; font-weight:600; font-size:19px; line-height:1.1; margin:0}
.now__meta{font-size:13px; color:var(--ink-soft); margin:5px 0 0}
.now__big{font-family:"Fraunces",serif; font-size:30px; font-weight:600}
@media(max-width:520px){.now__grid{grid-template-columns:1fr}}

/* ============================================================
   TODAY'S DISPATCH — small editorial card under Now/Next
   ============================================================ */
.dispatch{max-width:var(--maxw); margin:14px auto 0; padding:0 22px}
.dispatch__card{
  position:relative; border:1px solid var(--line); border-radius:4px;
  background:var(--paper); padding:16px 18px 14px;
  box-shadow:var(--card-shadow); overflow:hidden;
}
.dispatch__card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--fam, var(--accent)); opacity:.65;
}
.dispatch__kicker{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 8px; font-weight:500;
}
.dispatch__text{
  font-family:"Fraunces",serif; font-weight:500; font-size:18px; line-height:1.35;
  color:var(--ink); margin:0; letter-spacing:-.005em;
}
.dispatch__ask{
  font-size:13px; color:var(--ink-soft); font-style:italic;
  margin:12px 0 0; padding-top:10px; border-top:1px dashed var(--line-soft); line-height:1.4;
}
.dispatch__ask-tag{
  font-style:normal; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fam, var(--accent)); margin-right:6px; font-weight:600;
}
@media(max-width:520px){
  .dispatch__text{font-size:16.5px}
}

/* ============================================================
   FIELD NOTE — small italic marginalia, one per section
   ============================================================ */
.fieldnote{
  font-style:italic; font-size:12.5px; color:var(--ink-soft);
  margin:-10px 0 22px; max-width:58ch; line-height:1.5;
  padding-left:14px; border-left:2px solid var(--line);
}
.fieldnote__tag{
  font-style:normal; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); font-weight:600; margin-right:8px;
}

/* ============================================================
   THREE ACTS — narrative strip above day-by-day
   ============================================================ */
.acts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:8px 0 24px;
}
.act{
  position:relative; display:flex; gap:12px; align-items:flex-start;
  background:var(--paper); border:1px solid var(--line); border-radius:5px;
  padding:14px 16px; text-align:left; cursor:pointer; font-family:inherit;
  box-shadow:var(--card-shadow); transition:transform .15s, box-shadow .25s;
  overflow:hidden;
}
.act::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--fam, var(--ink-soft)); opacity:.45;
}
.act:hover{transform:translateY(-1px); box-shadow:var(--card-shadow-lift)}
.act:hover::before{opacity:.85}
.act__numwrap{
  flex:none; display:flex; align-items:flex-start;
}
.act__roman{
  font-family:"Fraunces",serif; font-weight:500; font-size:24px; line-height:1;
  color:var(--fam, var(--ink-faint)); letter-spacing:.04em; padding-top:2px;
}
.act__body{display:flex; flex-direction:column; min-width:0; gap:3px; flex:1}
.act__title{
  font-family:"Fraunces",serif; font-weight:600; font-size:15.5px; line-height:1.15;
  color:var(--ink);
}
.act__dates{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:1px;
}
.act__blurb{
  font-size:12.5px; color:var(--ink-soft); font-style:italic; line-height:1.4; margin-top:5px;
}
.act.is-current{
  box-shadow:0 0 0 1.5px var(--fam, var(--accent)), var(--card-shadow-lift);
  background:color-mix(in srgb, var(--fam) 4%, var(--paper));
}
.act.is-current .act__roman{color:var(--fam)}
.act.is-current::before{opacity:1}
.act.is-done{opacity:.72}
.act.is-done .act__title{text-decoration:line-through; text-decoration-color:var(--line)}
.act__pulse{
  position:absolute; top:10px; right:10px; width:6px; height:6px; border-radius:50%;
  background:var(--fam, var(--accent));
  box-shadow:0 0 0 0 color-mix(in srgb, var(--fam, var(--accent)) 50%, transparent);
  animation:act-pulse 2.4s infinite;
}
@keyframes act-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--fam, var(--accent)) 45%, transparent)}
  70%{box-shadow:0 0 0 8px color-mix(in srgb, var(--fam, var(--accent)) 0%, transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--fam, var(--accent)) 0%, transparent)}
}
@media (max-width:720px){
  .acts{grid-template-columns:1fr; gap:8px}
  .act__blurb{display:none}
}
@media (prefers-reduced-motion:reduce){
  .act__pulse{animation:none}
  .act:hover{transform:none}
}

/* ============================================================
   SLEEPING / CLOSED NOW-CARD STATES
   ============================================================ */
.now__card--asleep, .now__card--closed{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fam) 6%, var(--paper)) 0%, var(--paper) 60%),
    var(--paper);
}
.now__moon, .now__seal{
  display:inline-block; font-size:14px; line-height:1; color:var(--fam, var(--ink-soft));
  margin-right:2px;
}
.now__name--quiet{
  font-style:italic; font-weight:500; color:var(--ink); font-size:18px;
}
.now__sigoff{
  font-size:13px; color:var(--ink-soft); font-style:italic; line-height:1.5;
  margin:10px 0 0; padding-top:9px; border-top:1px dashed var(--line-soft);
}

/* ============================================================
   DAY CARD BODY — dispatch line + ask-us-later footer
   ============================================================ */
.day__dispatch{
  font-family:"Fraunces",serif; font-style:italic; font-size:15px; line-height:1.4;
  color:var(--ink); margin:0; padding:14px 18px 4px;
  border-bottom:1px dashed var(--line-soft);
}
.day__meet{
  font-size:12.5px; color:var(--ink-soft); font-style:italic; line-height:1.4;
  padding:8px 18px 10px; margin:0; border-bottom:1px solid var(--line-soft);
}
.day__meet-tag{
  font-style:normal; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); margin-right:8px; font-weight:600;
}
.day__ask{
  font-size:12.5px; color:var(--ink-soft); font-style:italic; line-height:1.5;
  padding:11px 18px 14px; margin:0; border-top:1px dashed var(--line-soft);
  background:color-mix(in srgb, var(--fam) 4%, transparent);
}
.day__ask-tag{
  font-style:normal; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fam, var(--accent)); margin-right:8px; font-weight:600;
}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:46px 0}
.sec-head{display:flex; align-items:baseline; gap:14px; margin-bottom:6px}
.sec-head h2{font-size:clamp(26px,4.4vw,38px)}
.sec-num{font-family:"Fraunces",serif; font-size:13px; color:var(--ink-soft); letter-spacing:.05em; font-weight:600}
#overview .sec-num{color:color-mix(in srgb, var(--green) 75%, var(--ink))}
#days .sec-num{color:color-mix(in srgb, var(--culture) 80%, var(--ink))}
#map .sec-num{color:color-mix(in srgb, var(--eat) 70%, var(--ink))}
#decisions .sec-num{color:color-mix(in srgb, var(--verify) 60%, var(--ink))}
#checklist .sec-num{color:color-mix(in srgb, var(--accent) 75%, var(--ink))}
.sec-lede{font-style:italic; color:var(--ink-soft); max-width:60ch; margin:8px 0 26px}

/* currency anchor */
.currency-note{font-size:12px; color:var(--ink-soft); letter-spacing:.02em; margin:-18px 0 22px;
  font-variant-numeric:tabular-nums}
.currency-note b{color:var(--ink); font-weight:600}

/* overview meta row */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft);
  border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-top:8px;
  box-shadow:var(--card-shadow)}
.fact{background:var(--paper); padding:18px 16px}
.fact b{display:block; font-family:"Fraunces",serif; font-size:27px; font-weight:600}
.fact span{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
@media(max-width:640px){.facts{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   RHYTHM STRIP — the shape of the trip at a glance
   ============================================================ */
.rhythm{
  margin:22px 0 0; padding:20px 18px 16px;
  border:1px solid var(--line); border-radius:5px; background:var(--paper);
  box-shadow:var(--card-shadow);
}
.rhythm__cap{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  margin:0 0 14px; font-style:normal; font-weight:500;
}
.rhythm__inner{
  display:grid; grid-template-columns:repeat(15, 1fr); gap:5px; align-items:end;
}
.rhy{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:transparent; border:0; cursor:pointer; padding:6px 2px 4px;
  border-radius:4px; font-family:inherit; position:relative;
  transition:background .15s;
}
.rhy:hover{ background:color-mix(in srgb, var(--fam) 9%, transparent) }
.rhy__bar-wrap{
  width:100%; max-width:22px; height:62px; display:flex; align-items:flex-end; justify-content:center;
}
.rhy__bar{
  width:100%; max-width:18px; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg, var(--fam), color-mix(in srgb, var(--fam) 70%, var(--ink)));
  opacity:.78; transition:opacity .15s, transform .15s;
  min-height:8px;
}
.rhy:hover .rhy__bar{ opacity:1; transform:scaleY(1.04); transform-origin:bottom }
.rhy__num{
  font-family:"Fraunces",serif; font-size:11px; font-weight:500;
  color:var(--ink-faint); letter-spacing:.04em;
}
.rhy__marks{
  display:flex; gap:3px; align-items:center; justify-content:center;
  height:9px; min-height:9px;
}
.rhy__dot{ width:5px; height:5px; border-radius:50%; display:inline-block }
.rhy__dot--fam{ background:var(--confirmed) }
.rhy__dot--date{ background:var(--accent) }
.rhy__storm{ font-size:8px; opacity:.55; line-height:1 }
.rhy.is-today{
  background:color-mix(in srgb, var(--fam) 14%, var(--paper));
  outline:1.5px solid var(--fam); outline-offset:-1px;
}
.rhy.is-today .rhy__num{ color:var(--fam); font-weight:600 }
.rhy.is-today .rhy__bar{ opacity:1 }
.rhy.is-today::before{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--fam);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--fam) 50%, transparent);
  animation:rhy-pulse 2.4s infinite;
}
@keyframes rhy-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--fam) 45%, transparent)}
  70%{box-shadow:0 0 0 7px color-mix(in srgb, var(--fam) 0%, transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--fam) 0%, transparent)}
}
.rhy.is-done .rhy__bar{ opacity:.32 }
.rhy.is-done .rhy__num{ color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--line) }
.rhythm__legend{
  display:flex; gap:14px; flex-wrap:wrap; padding:11px 0 0; margin-top:10px;
  border-top:1px solid var(--line-soft);
  font-size:11px; color:var(--ink-soft); letter-spacing:.02em; align-items:center;
}
.rhythm__leg{ display:inline-flex; align-items:center; gap:6px }
.rhythm__leg-label{
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; margin-right:-4px;
}
.rhythm__leg-sep{
  width:1px; height:14px; background:var(--line); display:inline-block; margin:0 4px;
}
.rhythm__sw{ width:8px; height:8px; border-radius:50%; display:inline-block; flex:none }
.rhythm__sw.fam{ background:var(--confirmed) }
.rhythm__sw.date{ background:var(--accent) }
.rhythm__sw.storm{ background:none; width:auto; height:auto; font-size:11px; border-radius:0 }
.rhythm__leg--today::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--accent);
  display:inline-block; margin-right:6px;
  animation:rhy-pulse 2.4s infinite;
}
@media (max-width:560px){
  .rhythm{ padding:16px 8px 14px }
  .rhythm__inner{ gap:1px }
  .rhy{ padding:8px 2px 4px; gap:4px; min-height:44px }
  .rhy__bar-wrap{ max-width:100%; height:46px }
  .rhy__bar{ max-width:14px }
  .rhy__num{ font-size:10px }
  .rhy__marks{ height:10px; gap:2px }
  .rhy__dot{ width:4px; height:4px }
  .rhy__storm{ font-size:9px }
  .rhythm__cap{ font-size:10px; letter-spacing:.14em }
}
@media (prefers-reduced-motion:reduce){
  .rhy.is-today::before, .rhythm__leg--today::before{ animation:none }
  .rhy:hover .rhy__bar{ transform:none }
}

/* day ring — slightly heavier stroke on phones for legibility */
@media (max-width:560px){
  .day__ring svg circle{ stroke-width:3.5 }
}

/* ============================================================
   DAY CARDS
   ============================================================ */
.day{border:1px solid var(--line); border-radius:5px; margin-bottom:14px;
  overflow:hidden; box-shadow:var(--card-shadow);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--fam, #888) 9%, var(--paper)) 0,
      var(--paper) 90px),
    var(--paper);
  transition:box-shadow .25s ease}
.day:hover{box-shadow:var(--card-shadow-lift)}
.day.is-today{box-shadow:0 0 0 2px var(--fam, var(--accent)), var(--card-shadow-lift)}
.day.has-family-meal{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--fam, #888) 9%, var(--paper)) 0,
      var(--paper) 90px),
    linear-gradient(90deg, color-mix(in srgb, var(--confirmed) 14%, transparent), transparent 32%),
    var(--paper)}
.day.has-family-meal .day__bar{ background:var(--confirmed) }
.pill.has-family-meal::after{background:var(--confirmed); width:6px; height:6px; opacity:1;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--confirmed) 18%, transparent)}
.day__bar{height:4px; background:var(--fam,#888)}
.day__head{display:flex; align-items:center; gap:14px; padding:18px; cursor:pointer; user-select:none;
  width:100%; background:transparent; border:0; text-align:left; font:inherit; color:inherit; min-height:64px}
.day__ring{flex:none; width:40px; height:40px; position:relative}
.day__ring svg{transform:rotate(-90deg)}
.day__ring-num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces",serif; font-size:14px; font-weight:600}
.day__t{flex:1; min-width:0}
.day__name{font-family:"Fraunces",serif; font-weight:600; font-size:19px; line-height:1.08}
.day__line{font-style:italic; color:var(--ink-soft); font-size:13.5px; margin-top:2px}
.day__meta{display:flex; align-items:center; gap:10px; flex:none}
.tag-today{font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fam, var(--accent)); border:1px solid var(--fam, var(--accent));
  border-radius:99px; padding:3px 8px; background:color-mix(in srgb, var(--fam, var(--accent)) 8%, transparent)}
.day__chev{font-size:13px; color:var(--ink-faint); transition:transform .25s}
.day.open .day__chev{transform:rotate(180deg)}
.day__body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease}
.day.open .day__body{grid-template-rows:1fr}
.day__bodyinner{overflow:hidden}
.stops{border-top:1px solid var(--line-soft); padding:6px 0}

/* a stop row */
.stop{display:flex; gap:12px; padding:11px 18px 11px 21px; align-items:flex-start; position:relative;
  transition:background .15s}
.stop::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background:var(--cat, var(--line)); border-radius:0 2px 2px 0; opacity:.55; transition:opacity .15s}
.stop:hover::before{opacity:.9}
.stop:hover{background:color-mix(in srgb, var(--cat, var(--ink)) 4%, transparent)}
.stop+.stop{border-top:1px solid var(--line-soft)}
.stop.soft{background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(217,207,188,.16) 9px,rgba(217,207,188,.16) 18px)}
.stop.checked::before{opacity:.25}
.stop__check{flex:none; margin:-10px 0 -10px -8px; padding:10px 8px; cursor:pointer; min-width:44px; min-height:44px;
  display:inline-flex; align-items:flex-start; justify-content:center}
.stop__check input{appearance:none; width:22px; height:22px; border:1.5px solid var(--ink-soft); border-radius:50%;
  background:var(--paper); cursor:pointer; position:relative; transition:.15s; margin-top:1px}
.stop__check input:checked{background:var(--done); border-color:var(--done)}
.stop__check input:checked::after{content:""; position:absolute; left:7px; top:3px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(40deg)}
.stop__time{flex:none; width:52px; font-size:12px; color:var(--ink-faint); letter-spacing:.02em; padding-top:2px; font-variant-numeric:tabular-nums}
.stop__glyph{flex:none; font-size:16px; padding-top:1px}
.stop__main{flex:1; min-width:0}
.stop__name{font-size:15.5px; font-weight:500; line-height:1.25}
.stop.checked .stop__name{color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--line)}
.stop__sub{font-size:12.5px; color:var(--ink-soft); margin-top:2px}
.stop__sub .dot{opacity:.5; margin:0 5px}
.stop__badges{display:inline-flex; gap:5px; margin-left:7px; vertical-align:middle}
.b{font-size:10px; letter-spacing:.04em; padding:2px 7px; border-radius:99px; border:1px solid var(--line); color:var(--ink-soft); background:var(--paper-2); white-space:nowrap}
.b.fam{font-size:11px; padding:3px 9px; color:#fff; background:var(--confirmed); border:0; font-weight:500}
.b.verify{color:#fff; background:var(--verify); border:0}
.b.date{color:#fff; background:var(--accent); border:0}
.b.solo{color:#fff; background:#6b7c90; border:0; font-weight:500}
.stop__note{font-size:12.5px; font-style:italic; color:var(--ink-soft); margin-top:5px; line-height:1.4}
.stop__flag{font-style:normal; background:#fdf3e0; border:1px solid #eccf95; color:#8a6312; border-radius:3px; padding:6px 8px; font-size:12px; margin-top:6px; line-height:1.4}
.stop__link{font-size:11.5px; color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line); margin-top:6px; display:inline-block}
.stop__link:hover{color:var(--accent); border-color:var(--accent)}
.stop__hint{font-size:11.5px; color:var(--confirmed); font-style:italic; margin-top:6px}
.stop.home{background:linear-gradient(90deg, color-mix(in srgb, var(--confirmed) 7%, var(--paper)), var(--paper) 60%)}
.stop.home::before{background:var(--confirmed); opacity:.75}
.stop.home .stop__time{color:var(--confirmed); font-style:italic}
.stop.home .stop__name::after{content:" · at home"; font-style:italic; color:var(--ink-faint); font-weight:400; font-size:12px}

/* day footer (storm note) */
.day__foot{font-size:12px; color:var(--ink-soft); padding:9px 18px 14px; border-top:1px solid var(--line-soft); font-style:italic}

/* ============================================================
   THE MAP EMBED
   ============================================================ */
.mapwrap{border:1px solid var(--line); border-radius:5px; overflow:hidden; box-shadow:var(--card-shadow-lift); background:var(--paper-2)}
.mapwrap iframe{display:block; width:100%; height:min(74vh,640px); border:0}
.mapwrap__bar{display:flex; justify-content:space-between; align-items:center; padding:11px 16px; border-top:1px solid var(--line); background:var(--paper)}
.mapwrap__bar span{font-size:12px; color:var(--ink-soft); font-style:italic}
.btn{display:inline-block; font-family:"Newsreader",serif; font-size:13px; letter-spacing:.02em; color:var(--paper);
  background:var(--ink); border:1px solid var(--ink); padding:8px 15px; border-radius:99px; text-decoration:none; cursor:pointer; transition:.15s}
.btn:hover{background:#000}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:var(--paper-2)}

/* ============================================================
   DECISIONS
   ============================================================ */
.dec{border:1px solid var(--line); border-radius:5px; background:var(--paper); margin-bottom:14px; overflow:hidden;
  box-shadow:var(--card-shadow)}
.dec__q{padding:15px 18px}
.dec__q h3{font-size:18px}
.dec__q p{font-size:13.5px; color:var(--ink-soft); margin:5px 0 0; font-style:italic}
.dec__opts{display:flex; gap:1px; background:var(--line-soft); border-top:1px solid var(--line-soft)}
.dec__opt{flex:1; background:var(--paper); border:0; cursor:pointer; padding:14px 16px; text-align:left;
  font-family:"Newsreader",serif; font-size:14px; color:var(--ink); transition:.15s}
.dec__opt:hover{background:var(--paper-2)}
.dec__opt.chosen{background:var(--ink); color:var(--paper)}
.dec__opt small{display:block; font-size:11.5px; opacity:.7; margin-top:3px}
.dec__opt.chosen small{opacity:.85}
@media(max-width:520px){.dec__opts{flex-direction:column}}
.dec__resolved{font-size:12px; color:var(--confirmed); padding:10px 18px; border-top:1px solid var(--line-soft); font-style:italic}

/* ============================================================
   CHECKLISTS
   ============================================================ */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:680px){.cols{grid-template-columns:1fr}}
.list{border:1px solid var(--line); border-radius:5px; background:var(--paper); overflow:hidden;
  box-shadow:var(--card-shadow)}
.list__head{font-family:"Fraunces",serif; font-weight:600; font-size:17px; padding:14px 18px; border-bottom:1px solid var(--line-soft)}
.li{display:flex; gap:11px; align-items:flex-start; padding:11px 18px; cursor:pointer; user-select:none}
.li+.li{border-top:1px solid var(--line-soft)}
.li input{appearance:none; flex:none; width:18px; height:18px; border:1.5px solid var(--ink-soft); border-radius:3px; background:var(--paper); cursor:pointer; position:relative; margin-top:1px}
.li input:checked{background:var(--ink); border-color:var(--ink)}
.li input:checked::after{content:""; position:absolute; left:5px; top:1.5px; width:4px; height:8px; border:solid var(--paper); border-width:0 2px 2px 0; transform:rotate(40deg)}
.li__t{font-size:14.5px; line-height:1.35}
.li.checked .li__t{color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--line)}
.li__t small{display:block; color:var(--ink-soft); font-size:12px; font-style:italic}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--line); background:var(--paper-2); padding:0 0 46px; margin-top:30px; overflow:hidden}
.foot__sky{
  position:relative; width:100%; height:clamp(58px, 8vw, 100px);
  background:linear-gradient(180deg, #f8d29a 0%, #f0a76b 55%, #c97250 100%);
  border-bottom:1px solid var(--line);
  margin-bottom:32px;
}
.foot__sky::before{
  content:""; position:absolute; right:18%; top:18%; width:18px; height:18px;
  border-radius:50%; background:radial-gradient(circle, #ffe9a8 0%, transparent 70%);
  filter:blur(6px);
}
.foot__sky::after{
  content:""; position:absolute; right:calc(18% + 5px); top:calc(18% + 5px); width:8px; height:8px;
  border-radius:50%; background:#ffe9a8;
  opacity:.7;
}
.foot__skyline{position:absolute; bottom:0; left:0; width:100%; height:100%; display:block; fill:rgba(35,32,27,.88)}
@media (prefers-reduced-motion:reduce){.foot__sky::before,.foot__sky::after{transition:none}}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; align-items:flex-end}
.foot__title{font-family:"Fraunces",serif; font-weight:600; font-size:22px}
.foot__note{font-size:12.5px; color:var(--ink-soft); font-style:italic; max-width:46ch}
.foot__tools{display:flex; flex-direction:column; align-items:flex-end; gap:10px}
@media(max-width:520px){.foot__tools{align-items:flex-start; width:100%}}
.foot__reset-wrap{font-size:11.5px; color:var(--ink-soft)}
.foot__reset-wrap summary{cursor:pointer; list-style:none; user-select:none; opacity:.65; padding:4px 0}
.foot__reset-wrap summary::-webkit-details-marker{display:none}
.foot__reset-wrap[open] summary{opacity:1}
.foot__reset-wrap p{font-size:11.5px; margin:8px 0; color:var(--ink-soft); font-style:italic; max-width:38ch}
.foot__reset{font-size:11.5px; color:#a44; background:none; border:1px solid #d2b3b3; cursor:pointer;
  padding:6px 11px; border-radius:99px; margin-top:4px}
.foot__reset:hover{background:#fbecec; color:#7a2a2a; border-color:#b88}

/* utility */
.hidden{display:none !important}

/* ============================================================
   COPY BUTTONS — small, unobtrusive
   ============================================================ */
.dispatch__copy{
  position:absolute; top:12px; right:12px;
  background:transparent; border:1px solid var(--line); border-radius:99px;
  font-family:"Newsreader",serif; font-size:11px; letter-spacing:.04em;
  color:var(--ink-soft); cursor:pointer; padding:8px 12px;
  transition:.15s; line-height:1; min-height:32px;
}
.dispatch__copy:hover{background:var(--paper-2); color:var(--ink); border-color:var(--ink-soft)}
.dispatch__copy.is-copied{background:var(--confirmed); color:#fff; border-color:var(--confirmed)}
.dispatch__card{position:relative}

.day__link{
  position:absolute; top:14px; right:54px;
  background:transparent; border:0; cursor:pointer;
  width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-faint); opacity:0; transition:opacity .15s, background .15s, color .15s;
}
.day:hover .day__link, .day__link:focus-visible{opacity:1}
.day__link:hover{background:var(--paper-2); color:var(--ink)}
.day__link.is-copied{color:var(--confirmed); opacity:1}
.day{position:relative}
@media(max-width:520px){
  .day__link{opacity:.55; right:42px; width:40px; height:40px; top:10px}
}

/* ============================================================
   PRINT / KEEPSAKE MODE — "the field guide closes into a printed booklet"
   ============================================================ */
@media print{
  :root{
    --paper:#fff; --paper-2:#fff; --paper-3:#f6f3ec;
    --ink:#1a1812; --ink-soft:#444; --ink-faint:#666;
    --line:#bbb; --line-soft:#ddd;
  }
  *{
    animation:none !important; transition:none !important;
    box-shadow:none !important; text-shadow:none !important;
  }
  html, body{
    background:#fff !important; color:#1a1812 !important;
    font-size:11.5pt; line-height:1.45;
    background-image:none !important;
  }
  /* hide the live / interactive UI */
  .scrub, .now, .dispatch, .map, .mapwrap, .mapwrap__bar,
  .hero__sky, .hero__grain, .hero__sun, .hero__stars, .hero__skyline,
  .foot__sky, .foot__reset-wrap, .dispatch__copy, .day__link, .day__chev,
  .pill, .tag-today, .stop__check, .day__ring svg, .rhythm__legend,
  .currency-note + .facts + .rhythm__legend,
  details summary, .progress, button#resetBtn, .btn, .dec__opt,
  .li input, .stop__check input{display:none !important}
  /* keep the hero readable as a cover */
  .hero{
    overflow:visible; border:0; padding:0;
    background:#fff !important; color:#1a1812 !important;
    --hero-text-bright:#1a1812 !important;
    --hero-text-mid:#444 !important;
    --hero-text-faint:#666 !important;
  }
  .hero__inner{padding:0 0 16pt; max-width:none}
  .hero__title{font-size:34pt; color:#1a1812 !important; margin-top:0}
  .hero__sub{color:#444 !important}
  .kicker{color:#666 !important}
  .status{display:none !important}
  /* sections become continuous prose */
  section{padding:18pt 0; page-break-inside:avoid}
  .sec-head h2{font-size:18pt}
  .sec-num{color:#888 !important}
  .sec-lede{color:#444 !important}
  .fieldnote{border-left-color:#999; color:#444 !important}
  /* facts grid prints clean */
  .facts{box-shadow:none; border:1px solid #ccc; background:#fff}
  .fact{background:#fff !important; border-right:1px solid #ddd}
  /* rhythm strip — keep as a visual sparkline of the trip shape */
  .rhythm{background:#fff !important; border:1px solid #ccc; padding:12pt}
  .rhy{background:transparent !important}
  .rhy.is-today, .rhy.is-done{background:transparent !important}
  .rhy.is-today::before{display:none}
  /* three acts — keep, simplified */
  .acts{display:block; gap:0}
  .act{
    display:block !important; background:#fff !important;
    border:1px solid #ccc !important; margin-bottom:8pt;
    padding:10pt 12pt; opacity:1 !important;
  }
  .act.is-done .act__title{text-decoration:none}
  .act__pulse{display:none}
  .act__roman{color:#444 !important; font-size:16pt}
  /* force every day card open */
  .day{
    border:1px solid #ccc !important; background:#fff !important;
    margin-bottom:10pt; page-break-inside:avoid; break-inside:avoid;
    box-shadow:none !important;
  }
  .day__bar{display:none}
  .day__body{display:block !important; grid-template-rows:1fr !important}
  .day__bodyinner{overflow:visible}
  .day__head{padding:10pt 12pt; cursor:default}
  .day__t{flex:1}
  .day__name{font-size:13pt}
  .day__line{color:#444 !important}
  .day__ring-num{position:static; font-size:13pt; color:#666; margin-right:8pt}
  .day__ring{width:auto; height:auto}
  .day__dispatch{
    padding:8pt 12pt 4pt; font-size:11pt; color:#222 !important;
    border-bottom:1px dashed #ccc;
  }
  .day__ask{
    padding:8pt 12pt; background:#f8f4e8 !important; color:#444 !important;
    border-top:1px dashed #ccc;
  }
  .day__ask-tag{color:#666 !important}
  /* stops */
  .stop{
    padding:5pt 12pt 5pt 14pt; border-top:1px solid #eee;
    background:#fff !important;
  }
  .stop::before{background:#999 !important; opacity:.4 !important}
  .stop__time{color:#666 !important}
  .stop__name{font-size:10.5pt}
  .stop__sub{color:#666 !important}
  .stop__note{color:#555 !important; font-size:9.5pt}
  .stop__link{display:none}
  .b{
    background:#fff !important; color:#444 !important;
    border:1px solid #999 !important; font-size:8pt
  }
  .b.fam{background:#444 !important; color:#fff !important}
  .day__foot{background:#fff !important; color:#666 !important; font-size:9.5pt}
  /* decisions — show only chosen option as plain text */
  .dec{background:#fff !important; border:1px solid #ccc; box-shadow:none}
  .dec__opts{display:none}
  .dec__resolved{display:block; font-size:10pt; color:#444 !important; padding:8pt 12pt}
  .verifyList .li{background:#fff !important}
  /* checklists print as text rows */
  .list{background:#fff !important; border:1px solid #ccc; box-shadow:none}
  .list__head{font-size:12pt; padding:8pt 12pt}
  .li{padding:5pt 12pt; background:#fff !important}
  .li::before{
    content:"☐ "; color:#666;
    font-size:11pt; margin-right:6pt;
  }
  .li.checked::before{content:"☑ "; color:#1a1812}
  .li__t{font-size:10.5pt}
  .li__t small{color:#666 !important; font-size:9pt}
  .cols{display:block}
  .cols > *{margin-bottom:10pt}
  /* footer prints as a small colophon */
  footer{background:#fff !important; border-top:1px solid #ccc; padding:14pt 0; margin:0}
  .foot__title{font-size:12pt}
  .foot__note{color:#666 !important; font-size:9.5pt}
  /* avoid orphan headers */
  h1, h2, h3{page-break-after:avoid}
  /* page setup */
  @page{margin:14mm 12mm}
}

/* the visible "Print field guide" button */
.print-btn{
  font-family:"Newsreader",serif; font-size:12px; letter-spacing:.04em;
  color:var(--ink-soft); background:transparent; border:1px solid var(--line);
  padding:9px 14px; border-radius:99px; cursor:pointer; transition:.15s; min-height:36px;
}
.print-btn:hover{background:var(--paper); color:var(--ink); border-color:var(--ink-soft)}
@media print{.print-btn{display:none !important}}

/* ============================================================
   MOBILE POLISH — narrow-phone fixes (≤520px / ≤414px)
   ============================================================ */
@media(max-width:520px){
  /* day name + line scale down for the narrow column when day__link icon eats right side */
  .day__name{font-size:16px; line-height:1.12; padding-right:6px}
  .day__line{font-size:12.5px}
  .day__head{gap:10px; padding:14px 14px}
  /* tag-today / done pills shrink to free up horizontal room */
  .tag-today{font-size:9px; padding:2.5px 6px; letter-spacing:.14em}
  /* hero status reflows cleanly — progress bar gets its own row */
  .status{gap:14px 18px}
  .progress{min-width:100%; flex-basis:100%; margin-top:4px}
  /* dispatch — reserve right side for copy button, never let text run under it */
  .dispatch__kicker, .dispatch__text{padding-right:64px}
  .dispatch__copy{top:10px; right:10px; padding:7px 10px; font-size:10.5px; min-height:30px}
  /* progress cap stays readable */
  .progress__cap{font-size:11px}
}
@media(max-width:414px){
  /* rhythm strip — give bars a little more presence at tightest widths */
  .rhy__bar{max-width:16px}
  .rhy__num{font-size:11px}
  /* scrubber pill family-meal dot — soften the glow ring so adjacent pills don't bloom together */
  .pill.has-family-meal::after{box-shadow:0 0 0 1px color-mix(in srgb, var(--confirmed) 22%, transparent)}
  /* hero kicker shrinks slightly so the long "with Alisha's family" tail doesn't break awkwardly */
  .kicker{font-size:10px; letter-spacing:.28em}
}