/* Fossil Forecast — clean, modern, typography-led. 18px+ text, AA/AAA contrast.
   Design rules: hairlines instead of boxes, whitespace instead of borders,
   one serif (headlines) + one sans (everything else), colour used sparingly. */
:root {
  /* Owner-specified palette: chalky cream base, deep navy/teal primary,
     ammonite amber secondary, charcoal text, burnt-orange CTAs. */
  --bg: #faf7f0;          /* chalky cream */
  --surface: #ffffff;
  --ink: #0b1921;         /* charcoal */
  --muted: #55676f;
  --faint: #8b9aa1;
  --brand: #093a4f;       /* deep navy */
  --brand-deep: #062736;
  --teal: #044545;
  --gold: #be8032;        /* ammonite amber */
  --cta: #b34a10;         /* burnt orange / rust */
  --hairline: #e8e1d1;
  --link: #044545;
  --green: #157a3c; --green-bg: #e9f4ec;
  --amber: #8a5c00; --amber-bg: #faf3e0;
  --grey:  #5c6268; --grey-bg:  #eff0ee;
  --red:   #b3251a; --red-bg:   #fbeeec;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(25, 32, 36, 0.04), 0 8px 24px rgba(25, 32, 36, 0.06);
  --display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 112.5%; scroll-behavior: smooth; } /* 18px base */
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
main, .safety-banner, .shell { max-width: 44rem; margin-inline: auto; padding-inline: 1.25rem; }
h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0.4rem 0; color: var(--ink); }
/* Section headings as quiet small-caps labels — content does the talking */
h2 {
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
  margin: 3rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline);
}
h3 { font-size: 1.08rem; margin: 0; line-height: 1.4; font-weight: 650; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* ---- Header ---- */
.masthead { background: var(--bg); }
.masthead .shell { padding-block: 1.1rem 0; }
.masthead.slim .shell { padding-bottom: 0.4rem; }
.brand-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--hairline); }
.site-name {
  white-space: nowrap;
  font-family: var(--display); font-size: 1.32rem; font-weight: 700;
  color: var(--brand-deep); text-decoration: none; letter-spacing: 0.005em;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.logo-mark { width: 1.35em; height: 1.35em; color: var(--gold); }
.logo-img { display: inline-block; vertical-align: middle; }
.site-name .logo-img { margin-right: 0.3rem; margin-block: -0.5rem; }
.foot-brand .logo-img { margin-right: 0.3rem; }
.top-nav { display: flex; gap: 1.3rem; align-items: center; }
.top-nav a { color: var(--muted); text-decoration: none; font-size: 0.98rem; font-weight: 550; white-space: nowrap; }
.top-nav a:hover { color: var(--ink); }
.top-nav .nav-join {
  color: #fff; background: var(--cta); border-radius: 999px;
  padding: 0.35rem 1.05rem; font-weight: 650;
}
.top-nav .nav-join:hover { color: #fff; background: #963d0d; }

/* ---- Hero ---- */
.masthead h1 { margin-top: 3.2rem; text-align: center; }
.masthead h1 br { display: none; }
.hero-sub { color: var(--muted); font-size: 1.12rem; margin: 0.7rem auto 1.8rem; max-width: 30rem; text-align: center; }
.search-row { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; max-width: 34rem; margin: 0 auto; }
.search-row.inline { margin: 1.2rem 0 0.4rem; max-width: 34rem; justify-content: flex-start; }
.hero-browse { text-align: center; margin: 1rem auto 3rem; }

/* ---- Homepage "why us" ---- */
.why h2 { margin-top: 1.6rem; }
.why-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
@media (min-width: 720px) { .why-grid { grid-template-columns: 1fr 1fr 1fr; } }
.why-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.1rem 1.25rem;
}
.why-card .ico { width: 1.7em; height: 1.7em; color: var(--gold); }
.why-card h3 { margin: 0.5rem 0 0.35rem; font-family: var(--display); font-size: 1.18rem; }
.why-card p { margin: 0; color: #40474d; font-size: 0.98rem; }
.aim { max-width: 40rem; margin: 1.6rem 0 2.4rem; font-size: 1.05rem; }
.page-title { font-size: clamp(1.6rem, 4vw, 2rem); }
.search-wrap { position: relative; flex: 1 1 16rem; }
#beach-search {
  width: 100%; font: inherit; font-size: 1.1rem; padding: 0.85rem 1.4rem;
  border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow); min-height: 3.4rem;
}
#beach-search::placeholder { color: var(--faint); }
.suggestions {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 0.45rem);
  list-style: none; margin: 0; padding: 0.35rem; text-align: left;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--hairline);
}
.suggestions li {
  padding: 0.55rem 0.95rem; border-radius: 9px; cursor: pointer; color: var(--ink);
  display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline;
}
.suggestions li span { color: var(--muted); font-size: 0.9rem; }
.suggestions li:hover, .suggestions li.active { background: var(--green-bg); }

/* ---- Buttons ---- */
.btn {
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  padding: 0.6rem 1.25rem; border-radius: 999px; min-height: 3.2rem;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--brand);
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem;
  box-shadow: var(--shadow);
}
.btn:hover { border-color: var(--brand); }
.btn.solid, .btn.accent { background: var(--cta); color: #fff; border-color: var(--cta); }
.btn.solid:hover, .btn.accent:hover { background: #963d0d; border-color: #963d0d; }

/* ---- Safety banner: one quiet line ---- */
.safety-banner {
  color: var(--muted); font-size: 0.95rem; padding-block: 0.8rem;
  border-bottom: 1px solid var(--hairline); margin-bottom: 0.5rem;
}
.safety-banner strong { color: var(--ink); font-weight: 650; }

/* ---- Best day: quiet emphasis, not a box ---- */
.best-day { border-left: 3px solid var(--brand); padding: 0.25rem 0 0.35rem 1.35rem; margin: 2.4rem 0 2rem; }
.best-kicker { margin: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--gold); }
.best-headline { font-family: var(--display); font-size: 1.65rem; margin: 0.3rem 0 0.2rem; line-height: 1.22; color: var(--ink); }
.best-window { font-weight: 650; margin: 0.15rem 0; }
.best-reason { color: var(--muted); margin: 0.25rem 0 0.9rem; max-width: 36rem; }
.best-day .btn { min-height: 2.7rem; padding-block: 0.4rem; }

/* ---- Season line + region nav ---- */
.season-banner { color: var(--muted); margin: 1.4rem 0; font-size: 1.02rem; border: 0; padding: 0; }
.region-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 1.6rem 0 0.4rem; }
.region-link { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.98rem; padding-block: 0.3rem; }
.region-link:hover { color: var(--brand); }

/* ---- Beach list: hairline rows ---- */
.region-best { color: var(--muted); font-size: 0.95rem; margin: -0.5rem 0 0.4rem; }
.region-best strong { color: var(--ink); font-weight: 650; }
.beach-list { display: flex; flex-direction: column; }
.beach-row {
  display: flex; justify-content: space-between; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.85rem 0.5rem; margin-inline: -0.5rem;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: var(--ink); border-radius: 10px;
}
.beach-row:hover { background: #f4f3ee; }
.row-name { font-weight: 650; font-size: 1.04rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.row-status { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.row-detail { color: var(--muted); font-size: 0.95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-detail.red-detail { color: var(--red); font-weight: 600; }
.row-flag { color: var(--red); font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.beach-row .distance { margin: 0; font-size: 0.9rem; color: var(--brand); font-weight: 650; }

/* ---- Status marker: dot + word, no box ---- */
.pill { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; font-weight: 650; font-size: 0.98rem; }
.pill .dot { width: 0.58em; height: 0.58em; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.st-GREEN.pill { color: var(--green); }
.st-AMBER.pill { color: var(--amber); }
.st-GREY.pill  { color: var(--grey); }
.st-RED.pill   { color: var(--red); }

/* ---- Safety-first lines ---- */
.window { font-weight: 600; margin: 0.25rem 0; font-variant-numeric: tabular-nums; }
.window.big { font-size: 1.15rem; }
.reason { margin: 0.3rem 0; color: #40474d; max-width: 38rem; }
.why-label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.76rem; font-weight: 700; color: var(--gold); margin-right: 0.15rem; }
.tides { color: var(--muted); margin: 0.25rem 0 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.leave-by { margin: 0.5rem 0; padding-left: 0.85rem; border-left: 3px solid var(--gold); font-size: 1.05rem; }
.leave-by strong { font-weight: 700; }
.tide-state { font-weight: 600; margin: 0.25rem 0; }
.tide-state.falling { color: var(--green); }
.tide-state.rising { color: var(--red); }
.spring-note { color: var(--muted); margin: 0.3rem 0; font-size: 0.95rem; }
.cutoff-warning { color: var(--red); border-left: 3px solid var(--red); padding: 0.15rem 0 0.15rem 0.85rem; margin: 0.7rem 0; }
.cutoff-warning.big { font-size: 1.02rem; margin-block: 1.1rem; }
.route-caveat { color: var(--muted); border-left: 3px solid var(--hairline); padding-left: 0.85rem; margin: 0.7rem 0; font-size: 0.98rem; }
.data-notice { color: var(--muted); border-left: 3px solid var(--link); padding-left: 0.85rem; margin: 0.8rem 0; font-size: 0.98rem; }

/* ---- Beach page: the "now" panel ---- */
.crumb { margin: 1rem 0 0.4rem; font-size: 0.95rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.beach-hero h1 { margin-bottom: 0; }
.region-line { color: var(--muted); margin: 0.1rem 0 1.4rem; }
/* Blocks where they aid scanning (owner request): the "now" panel and the
   knowledge sections sit in cards; day lists stay as hairline rows. */
.now-panel {
  background: var(--surface); border: 1px solid var(--hairline); border-left: 5px solid var(--grey);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.1rem 1.35rem; margin-top: 0.6rem;
}
.now-panel.st-GREEN { border-left-color: var(--green); }
.now-panel.st-AMBER { border-left-color: var(--amber); }
.now-panel.st-RED { border-left-color: var(--red); }
.now-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.today-label { margin: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.stat-grid { display: flex; flex-wrap: wrap; gap: 0 2.2rem; margin: 0.9rem 0 0.4rem; }
.stat { display: flex; flex-direction: column; gap: 0; padding: 0.5rem 0; border: 0; background: none; }
.stat-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--faint); }
.stat-value { font-weight: 650; font-size: 1.12rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.hero-stat .stat-value { font-family: var(--display); font-size: 2.5rem; font-weight: 600; line-height: 1.15; color: var(--ink); }
.hero-stat .stat-label { color: var(--gold); }
.hero-stat.st-RED .stat-value { color: var(--red); }
.stat-note { font-size: 0.88rem; color: var(--muted); max-width: 15rem; }

/* ---- 7-day strip ---- */
.week-strip {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-block: 1px solid var(--hairline); margin-top: 1.8rem;
}
@media (max-width: 560px) { .week-strip { grid-template-columns: repeat(4, 1fr); } }
.day-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.75rem 0.2rem; text-decoration: none; color: var(--ink); font-size: 0.92rem;
  border-left: 1px solid var(--hairline);
}
.day-tile:first-child { border-left: 0; }
@media (max-width: 560px) { .day-tile:nth-child(5) { border-left: 0; } }
.day-tile .dot { width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--grey); }
.day-tile.st-GREEN .dot { background: var(--green); }
.day-tile.st-AMBER .dot { background: var(--amber); }
.day-tile.st-RED .dot { background: var(--red); }
.day-tile:hover { background: #f4f3ee; }
.tile-dow { font-weight: 650; }
.tile-word { color: var(--muted); font-size: 0.82rem; }
.tile-low { color: var(--faint); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.day-tile .glyph { width: 1.35em; height: 1.35em; }
.day-tile.st-GREEN .glyph { color: var(--green); }
.day-tile.st-AMBER .glyph { color: var(--amber); }
.day-tile.st-GREY .glyph { color: var(--grey); }
.day-tile.st-RED .glyph { color: var(--red); }
.pill .glyph { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ---- Inline icon set (replaces emoji) ---- */
.ico { width: 1.08em; height: 1.08em; vertical-align: -0.17em; display: inline-block; flex-shrink: 0; }
.leave-by .ico, .hero-points .ico { color: var(--gold); }
.cutoff-warning .ico, .row-flag .ico, .note.hazard .ico { color: var(--red); }
.top-nav .nav-donate {
  color: var(--brand); border: 1.5px solid var(--hairline); border-radius: 999px;
  padding: 0.32rem 0.95rem; font-weight: 650; display: inline-flex; align-items: center; gap: 0.35rem;
}
.top-nav .nav-donate:hover { border-color: var(--brand); color: var(--brand); }
.hero-points span { display: inline-flex; align-items: center; gap: 0.45rem; }

/* ---- About page ---- */
.about-me { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.about-photo {
  width: 200px; height: 200px; object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--hairline); box-shadow: var(--shadow); flex-shrink: 0;
}
.about-text { flex: 1 1 20rem; min-width: 0; }
.about-text p:first-child { margin-top: 0; }

/* ---- Tide chart ---- */
.tide-chart { margin: 1.8rem 0 0; }
.tide-chart svg { width: 100%; height: auto; display: block; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow); }
.tide-chart .tc-label { font: 700 13px -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--ink); }
.tide-chart .tc-time { font: 12px -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--muted); }
.tide-chart .tc-axis { font: 12px -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--faint); }
.tide-chart .tc-window { font: 700 11px -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--green); letter-spacing: 0.08em; text-transform: uppercase; }
.tide-chart figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 0.5rem; }

/* ---- Day-by-day list: hairline entries, not cards ---- */
.cards { display: flex; flex-direction: column; }
.card {
  background: none; border: 0; border-bottom: 1px solid var(--hairline);
  border-radius: 0; padding: 1.15rem 0; box-shadow: none;
}
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.2rem; }
.day-card { border-left: 0; }

/* ---- Knowledge panels: readable blocks ---- */
.where-to-look, .id-help, .legal-panel {
  max-width: 42rem; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.3rem;
}
.legal-panel p { margin: 0.55rem 0; }
.check-locally { color: var(--muted); font-size: 0.92rem; border-top: 1px solid var(--hairline); padding-top: 0.5rem; }
.further-reading { font-size: 1.02rem; margin-top: 1.2rem; }
.notes-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
@media (min-width: 700px) { .notes-grid { grid-template-columns: 1fr 1fr; } }
.note {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.9rem 1.15rem;
}
.note h3 { font-size: 0.98rem; margin-bottom: 0.25rem; }
.note p { margin: 0; color: #40474d; }
.note.hazard { border-left: 5px solid var(--red); }
.note.hazard h3 { color: var(--red); }

/* ---- Membership, gift, forms ---- */
.hero-sub-dark { color: var(--muted); font-size: 1.1rem; max-width: 36rem; }
.member-card { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 1.3rem 1.5rem; margin-block: 1.4rem; }
.member-card ul { padding-left: 1.1rem; }
.member-card li { margin: 0.5rem 0; }
.subscribe-form input[type=email] { font: inherit; font-size: 1.08rem; padding: 0.65rem 0.95rem; width: 100%; max-width: 24rem; display: block; margin: 0.3rem 0 1rem; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); }
.subscribe-form textarea { font: inherit; font-size: 1.05rem; padding: 0.65rem 0.95rem; width: 100%; max-width: 34rem; display: block; margin: 0.3rem 0 1rem; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); }
.subscribe-form fieldset { border: 1px solid var(--hairline); border-radius: var(--radius); margin-block: 1.2rem; background: var(--surface); }
.subscribe-form label { display: block; padding: 0.2rem 0; }
.muted { color: var(--muted); }
.print-line { margin-top: 2rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
#no-results { color: var(--muted); padding: 0.9rem 0; }

/* ---- Gift certificate ---- */
.certificate {
  background: var(--surface); border: 1px solid var(--hairline); outline: 3px double var(--gold); outline-offset: -12px;
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 2.6rem 2rem; margin-block: 1.6rem; text-align: center; position: relative; overflow: hidden;
}
.cert-ammonite { position: absolute; right: -1.8rem; bottom: -1.8rem; width: 10rem; height: 10rem; color: var(--gold); opacity: 0.12; }
.cert-brand { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--brand-deep); margin: 0; }
.certificate h1 { margin: 0.6rem 0; font-size: 1.9rem; }
.cert-line { color: var(--muted); max-width: 30rem; margin: 0.5rem auto; }
.cert-name { font-family: var(--display); font-size: 2rem; margin: 0.6rem auto; min-height: 2.6rem; border-bottom: 1.5px solid var(--hairline); max-width: 22rem; }
.cert-foot { color: var(--muted); margin-top: 1.4rem; }

/* ---- Planner table ---- */
.planner { border-collapse: collapse; width: 100%; font-size: 0.85rem; background: var(--surface); }
.planner th, .planner td { border: 1px solid var(--hairline); padding: 0.32rem 0.45rem; text-align: left; vertical-align: top; }
.planner thead th { background: var(--brand); color: #fff; }
.planner .plan-region th { background: #f1efe8; font-weight: 700; }
.planner td.plan { white-space: nowrap; font-variant-numeric: tabular-nums; }
.planner .dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.3em; background: var(--grey); }
.planner td.st-GREEN { background: var(--green-bg); } .planner td.st-GREEN .dot { background: var(--green); }
.planner td.st-AMBER { background: var(--amber-bg); } .planner td.st-AMBER .dot { background: var(--amber); }
.planner td.st-RED { background: var(--red-bg); font-weight: 700; } .planner td.st-RED .dot { background: var(--red); }
.plan-leave { color: var(--amber); font-size: 0.78rem; }
.planner-key { color: var(--muted); font-size: 0.95rem; margin-top: 0.8rem; }

/* ---- Safety page list ---- */
.safety-list li { margin: 0.7rem 0; }

/* ---- USP + partners ---- */
.usp p { max-width: 40rem; margin: 0.8rem 0; color: #40474d; }
.usp strong { color: var(--ink); }
.embed-code {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 0.9rem 1.1rem; overflow-x: auto; font-size: 0.9rem; line-height: 1.5;
}
.embed-list { padding-left: 1.1rem; }
.embed-list li { margin: 0.4rem 0; }
.embed-list code { background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px; padding: 0.1rem 0.4rem; font-size: 0.85rem; }

/* ---- Footer: quiet link columns ---- */
footer { border-top: 1px solid var(--hairline); margin-top: 4rem; padding-block: 2rem 1.2rem; color: var(--muted); font-size: 0.95rem; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot-main { grid-column: 1 / -1; }
@media (min-width: 720px) { .foot-main { grid-column: auto; } }
.foot-col a { display: block; color: var(--muted); text-decoration: none; padding: 0.18rem 0; }
.foot-col a:hover { color: var(--brand); text-decoration: underline; }
.foot-head { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 700; color: var(--faint); margin: 0 0 0.35rem; }
.foot-brand { font-family: var(--display); font-size: 1.08rem; font-weight: 700; color: var(--brand-deep); margin: 0 0 0.3rem; }
.foot-tag { margin: 0 0 0.5rem; max-width: 16rem; }
.foot-small { border-top: 1px solid var(--hairline); margin-top: 1.6rem; padding-top: 0.9rem; }
.foot-small p { margin: 0; font-size: 0.88rem; color: var(--faint); }
.generated { font-size: 0.88rem; color: var(--faint); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media print {
  @page { size: A4; margin: 12mm; }
  .safety-banner, .print-line, .search-row, .region-nav, footer, .btn, .top-nav, .no-print, .season-banner { display: none !important; }
  body, .masthead { background: #fff !important; color: #000 !important; }
  .masthead .site-name, .masthead h1, .hero-sub { color: #000 !important; }
  .card, .best-day, .legal-panel, .day-card { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  .leave-by { border-left: 3px solid #000; }
  .planner { font-size: 8pt; }
  .planner thead th { background: #ddd !important; color: #000 !important; }
  .planner td.st-GREEN, .planner td.st-AMBER, .planner td.st-RED, .planner .plan-region th { background: #fff !important; }
  .planner td.st-RED { text-decoration: underline; }
  .planner h1, h1 { font-size: 16pt; margin: 0 0 6pt; }
  .certificate { border: 1px solid #000; outline: 3px double #000; min-height: 24cm; display: flex; flex-direction: column; justify-content: center; }
}