/* ============================================================
   CHESAPEAKE BAY CHRONICLES: visual identity. Site-specific.
   From Brand_Identity_Architecture.md, Brand 02 (Feb 2026).

   WHO THIS IS FOR
   The local steward first: Maryland, Virginia and DC residents,
   35 to 65, who live near the Bay, eat its seafood and share a
   good local story before any national news. Then weekend
   explorers within a few hours' drive, and people who grew up
   here and moved away. They read long, and they read with
   feeling.

   WHAT THE DESIGN HAS TO SAY
   Golden-hour light on the water. Earthy, warm, slightly
   editorial, slightly rustic. It should feel like being on the
   Bay, not looking at a postcard of it.

   SIGNATURES
   A tide line (a hand-drawn-feeling wave, decorative only) under
   every page heading. Figures set as "soundings", the way a chart
   gives depths, over faint contour rings. Section flags in small
   capitals, like the section names of a local paper.

   COLOR
   The brand palette: Bay Deep for links and buttons, Marsh Sage and
   Driftwood for grounds and rules, Sunrise Amber for the golden
   Tide Table band (dark ink on it, never amber text on light),
   Oyster Shell for the page. Every pair is checked by the build.

   TYPE
   Libre Baskerville for headlines, from the brand document.
   Merriweather for reading, the brand document's second choice,
   because Source Serif already runs on Glass House Economy.
   Karla for flags and navigation: both sans faces the brand
   document names already run on other portfolio sites.
   ============================================================ */

:root {
  --shell:      #f0ede5;
  --paper:      #fbf9f4;
  --ink:        #1b2620;
  --ink-soft:   #4d5a51;
  --bay:        #1a5632;
  --bay-deep:   #11401f;
  --sage:       #8fae7e;
  --driftwood:  #c4a882;
  --amber:      #d4944a;
  --amber-deep: #8a4e14;
  --amber-light:#e6b578;   /* footer headings and focus on the dark band */
  --line:       #ddd4c3;   /* decorative rules only */

  --accent:     var(--bay);
  --accent-ink: #ffffff;
  --focus:      var(--amber-deep);
  --measure:    68ch;

  --display: 'Libre Baskerville', Baskerville, Georgia, serif;
  --body:    'Merriweather', Georgia, 'Times New Roman', serif;
  --label:   'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[hidden] { display: none !important; }

body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.75; background: var(--shell); color: var(--ink); }

.wrap { width: min(66rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 44rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.7rem; }
h3 { font-size: 1.2rem; margin-bottom: 0.35rem; }
p + p { margin-top: 0.9rem; }
a { color: var(--bay); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--bay-deep); text-decoration-thickness: 2px; }
a[href^="mailto:"] { overflow-wrap: anywhere; }

.flag { font-family: var(--label); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bay); margin-bottom: 0.5rem; display: inline-block; border-bottom: 2px solid var(--bay); padding-bottom: 0.1rem; }
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 52ch; }
.fine { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.85rem; }

.tide { display: block; width: 100%; max-width: 32rem; height: 28px; color: var(--driftwood); margin: 1.1rem 0 1.25rem; }

/* ---- Header ------------------------------------------------ */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.7rem; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.brand em { font-weight: 400; color: var(--bay); margin-left: 0.3rem; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.2rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--label); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--driftwood); }
.site-nav a[aria-current="page"] { color: var(--bay); border-bottom-color: var(--bay); }

main { padding-block: 2.5rem 4rem; }
.hero { padding-bottom: 1rem; }
.hero h1 { max-width: 22ch; margin-bottom: 0.8rem; }
.section { margin-top: 3.25rem; }

/* ---- Masthead (home) --------------------------------------- */
.masthead { text-align: center; padding: 1.5rem 0 1rem; border-bottom: 3px double var(--driftwood); }
.masthead .dateline { font-family: var(--label); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); max-width: none; }
.masthead h1 { max-width: 20ch; margin: 0.6rem auto 0.4rem; font-size: clamp(2.2rem, 5.6vw, 3.8rem); }
.masthead .tagline { font-family: var(--display); font-style: italic; font-size: 1.2rem; color: var(--bay); margin-inline: auto; }
.masthead .tide { margin-inline: auto; }
.masthead .lede { margin-inline: auto; }
.masthead .actions { justify-content: center; }

/* ---- Section cards ----------------------------------------- */
.sections { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(14.5rem, 100%), 1fr)); }
.sections li { background: var(--paper); border-top: 4px solid var(--sage); border-radius: 2px 2px 8px 8px; padding: 1rem 1.1rem 1.2rem; max-width: none; box-shadow: 0 1px 0 var(--line); }
.sections h3 a { color: var(--ink); text-decoration: none; }
.sections h3 a:hover { color: var(--bay); text-decoration: underline; }
.sections p:last-child { font-size: 0.975rem; color: var(--ink-soft); }

/* ---- Soundings over contour rings -------------------------- */
.chart { background-color: var(--paper); background-image: repeating-radial-gradient(circle at 85% 20%, transparent 0 22px, rgba(196, 168, 130, 0.28) 22px 23px); border: 1px solid var(--line); border-radius: 10px; padding: clamp(1.25rem, 3vw, 2rem); }
.soundings { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); margin: 1.25rem 0 0; }
.sounding { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-left: 3px solid var(--bay); padding-left: 0.85rem; }
.sounding dd { margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.1; color: var(--bay-deep); }
.sounding dt { font-family: var(--label); font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.25rem; }

/* ---- Ledger table ------------------------------------------ */
.table-scroll { margin-top: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
table.ledger { width: 100%; min-width: 34rem; font-size: 0.95rem; }
table.ledger th, table.ledger td { text-align: left; vertical-align: top; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
table.ledger thead th { font-family: var(--label); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 2px solid var(--bay); }
table.ledger tbody th { font-weight: 400; }
table.ledger td.num { font-family: var(--display); font-style: italic; white-space: nowrap; color: var(--bay-deep); }
table.ledger tbody tr:last-child th, table.ledger tbody tr:last-child td { border-bottom: 0; }
table.ledger caption { caption-side: bottom; text-align: left; padding: 0.6rem 0.9rem; font-size: 0.875rem; color: var(--ink-soft); }

/* ---- Lists ------------------------------------------------- */
.checks { list-style: none; margin: 1.25rem 0 0; padding: 0; counter-reset: check; display: grid; gap: 0.9rem; }
.checks li { counter-increment: check; position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem 0.6rem 3.4rem; max-width: 50rem; }
.checks li::before { content: counter(check); position: absolute; left: 1rem; top: 1rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--bay); color: #ffffff; font-family: var(--label); font-weight: 700; font-size: 0.9rem; }
.checks .go a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--label); font-weight: 700; }
.promises, .values { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.promises li { border-left: 3px solid var(--driftwood); padding: 0.2rem 0 0.2rem 1rem; }
.values { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; }
.values li { background: var(--paper); border-top: 4px solid var(--amber); border-radius: 2px 2px 8px 8px; padding: 1rem 1.1rem; max-width: none; }
.values h3 { font-family: var(--label); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.95rem; color: var(--bay-deep); }
.sources { padding-left: 1.2rem; }
.sources li { margin-bottom: 0.4rem; }

/* ---- Panels, bands, empty states --------------------------- */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: clamp(1.25rem, 3vw, 2rem); }
.empty { border: 2px dashed var(--driftwood); border-radius: 10px; padding: 1.75rem; text-align: center; }
.empty p { margin-inline: auto; }
.band { border-radius: 12px; padding: clamp(1.5rem, 4vw, 2.5rem); }
.band--golden { background: linear-gradient(120deg, var(--amber) 0%, #dcae73 55%, var(--driftwood) 100%); }
.band--sage { background: var(--sage); }
.band .fine, .band p { color: var(--ink); }
.band a:not(.btn) { color: var(--ink); }
.band :focus-visible { outline-color: var(--ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.3rem; background: var(--bay); color: #ffffff; border: 2px solid var(--bay); border-radius: 4px; font-family: var(--label); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--bay-deep); border-color: var(--bay-deep); color: #ffffff; }
.btn--ghost { background: transparent; color: var(--bay); }
.btn--ghost:hover { background: var(--paper); color: var(--bay-deep); }
.band .btn { background: var(--bay-deep); border-color: var(--bay-deep); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.prose h2 { margin-top: 2.25rem; }
.prose ul, ul.prose { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.5rem; }

.signup { display: grid; gap: 0.6rem; max-width: 26rem; margin-top: 1rem; }
.signup label { font-family: var(--label); font-weight: 700; }
.signup input { padding: 0.6rem 0.9rem; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); }
.signup button { justify-self: start; }

/* ---- Footer: dark band, light focus ring ------------------- */
.site-footer { background: var(--bay-deep); color: var(--shell); margin-top: 2rem; padding-block: 2.5rem 3rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-family: var(--label); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-light); margin-bottom: 0.5rem; }
.site-footer .foot-tag { font-family: var(--display); font-style: italic; color: var(--shell); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #ffffff; display: inline-block; padding-block: 0.3rem; font-family: var(--label); }
.site-footer a:hover { color: var(--amber-light); }
.site-footer .fine { color: #cfd8cf; margin-top: 2rem; }
.site-footer :focus-visible { outline-color: var(--amber-light); }

@media (forced-colors: active) {
  .sections li, .values li, .panel, .band, .btn, .checks li, .chart { border: 1px solid; }
  .tide { color: CanvasText; }
}