/* ============================================================
   Davis Street Tavern — Portland food guide
   Direction 1C: sunny pop bento. Static, no JavaScript.
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  --paper:  #FFF7E9;   /* warm sun background */
  --card:   #FFFFFF;
  --ink:    #2B2118;   /* near-black warm brown */
  --muted:  #6A5F52;   /* secondary text */
  --line:   #E9DEC8;   /* hairline on paper */

  --tomato: #FF5436;   /* primary accent */
  --teal:   #12A594;   /* secondary */
  --grape:  #6A4C93;   /* tertiary */
  --mustard:#FFB020;   /* highlight */
  --tomato-ink: #B32E17;
  --teal-ink:   #0B6156;

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow: 0 18px 40px -22px rgba(43,33,24,.45);
  --shadow-sm: 0 8px 20px -12px rgba(43,33,24,.4);

  --measure: 68ch;
  --wrap: 1200px;

  --f-display: 'Fredoka', system-ui, sans-serif;
  --f-body: 'DM Sans', system-ui, sans-serif;
}

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 20px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--tomato-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.03; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-weight: 600; font-size: 14px;
  letter-spacing: .02em; padding: 7px 15px; border-radius: var(--r-pill);
  background: var(--mustard); color: var(--ink);
}
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(30px, 4vw, 46px); margin: 0; }
.section-head .link { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--tomato-ink); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-weight: 600; font-size: 16px;
  padding: 13px 24px; border-radius: var(--r-pill); border: 0; cursor: pointer;
  text-decoration: none; transition: transform .12s ease, background .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--tomato); color: #fff; }
.btn-primary:hover { background: var(--tomato-ink); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-ghost { background: var(--card); color: var(--ink); border: 2px solid var(--ink); }

/* ============================================================
   Header / nav (CSS-only mobile menu via checkbox)
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,247,233,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: var(--wrap); margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { font-family: var(--f-display); font-weight: 700; font-size: 24px; color: var(--tomato); letter-spacing: -.02em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand small { display: block; font-family: var(--f-body); font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 1px; }
.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--f-display); font-weight: 500; font-size: 15px; color: var(--ink);
  padding: 9px 15px; border-radius: var(--r-pill); background: var(--card);
}
.nav-links a:hover { text-decoration: none; background: var(--mustard); }
.nav-links a.cta { background: var(--tomato); color: #fff; font-weight: 600; }
.nav-links a.cta:hover { background: var(--tomato-ink); }
.nav-toggle, .nav-toggle-label { display: none; }

@media (max-width: 860px) {
  .site-header { background: var(--paper); backdrop-filter: none; }
  .nav-toggle-label {
    display: inline-flex; flex-direction: column; gap: 5px; cursor: pointer;
    padding: 10px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line);
  }
  .nav-toggle-label span { width: 24px; height: 3px; background: var(--ink); border-radius: 3px; transition: .2s; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 8px;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 16px 24px -18px rgba(43,33,24,.5);
    padding: 16px 24px 24px; max-height: 0; overflow: hidden;
    padding-top: 0; padding-bottom: 0; transition: max-height .25s ease, padding .25s ease;
  }
  .nav-links a { font-size: 18px; padding: 12px 16px; }
  .nav-toggle:checked ~ .nav-links { max-height: 460px; padding-top: 12px; padding-bottom: 24px; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--ink); color: var(--paper); padding: 56px 0 40px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-grid h4 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--mustard); font-family: var(--f-body); font-weight: 700; margin-bottom: 14px; }
.footer-brand { font-family: var(--f-display); font-weight: 700; font-size: 28px; color: var(--tomato); }
.footer-grid p { color: #d8cdbb; font-size: 17px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: #e4dccd; font-size: 16px; }
.footer-links a:hover { color: var(--mustard); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 20px; color: #b7ab97; font-size: 14px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: 60px 0 24px; }
.hero h1 { font-size: clamp(46px, 8vw, 92px); max-width: 15ch; margin: 20px 0 0; }
.hero h1 .pop { color: var(--tomato); }
.hero-sub { font-size: clamp(19px, 2.2vw, 23px); color: var(--muted); max-width: 52ch; margin: 22px 0 28px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ============================================================
   BENTO GRID (featured)
   ============================================================ */
.bento {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  grid-auto-rows: 210px; gap: 18px;
}
.bento-tile { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.bento-tile img { width: 100%; height: 100%; object-fit: cover; }
.bento-feature { grid-row: span 2; }
.tile-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.78) 100%); }
.tile-body { position: absolute; left: 22px; right: 22px; bottom: 20px; color: #fff; }
.tile-body h3 { font-size: 26px; margin: 8px 0 2px; }
.bento-feature .tile-body h3 { font-size: 38px; }
.tile-body .sub { font-size: 15px; opacity: .9; }
.tile-tag { display: inline-block; background: var(--mustard); color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 12px; padding: 5px 12px; border-radius: var(--r-pill); }
.bento-solid { display: flex; flex-direction: column; justify-content: space-between; padding: 24px; color: #fff; }
.bento-solid.tomato { background: var(--tomato); }
.bento-solid.grape  { background: var(--grape); }
.bento-solid .big { font-family: var(--f-display); font-weight: 700; font-size: 60px; line-height: .9; }
.bento-solid .label { font-family: var(--f-display); font-weight: 600; font-size: 16px; }
.bento-solid a { color: var(--mustard); font-family: var(--f-display); font-weight: 600; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } .bento-feature { grid-column: span 2; grid-row: span 1; min-height: 300px; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; grid-auto-rows: 200px; } .bento-feature { grid-column: span 1; } }

/* ---- Category chips ---- */
.chips { display: flex; gap: 12px; flex-wrap: wrap; }
.chip { font-family: var(--f-display); font-weight: 600; font-size: 16px; padding: 11px 20px; border-radius: var(--r-pill); background: var(--card); border: 2px solid var(--ink); color: var(--ink); }
.chip:hover { text-decoration: none; background: var(--ink); color: var(--paper); }
.chip.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ============================================================
   REVIEW FEED (varied, newest-first, CSS-only "more")
   ============================================================ */
.feed { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.review-card { background: var(--card); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.review-card:hover { text-decoration: none; }
.review-card .thumb { position: relative; overflow: hidden; }
.review-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.review-card .rc-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.rc-meta { display: flex; gap: 10px; align-items: center; font-family: var(--f-display); font-weight: 600; font-size: 13px; color: var(--muted); }
.rc-cat { color: var(--teal-ink); }
.rc-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.review-card h3 { font-size: 24px; margin: 0; color: var(--ink); }
.review-card p { font-size: 16px; color: var(--muted); margin: 0; }
.rc-foot { margin-top: auto; padding-top: 6px; font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--tomato-ink); }

/* Lead (big) card spanning */
.review-card.lead-card { grid-column: span 4; grid-row: span 2; display: block; position: relative; }
.review-card.lead-card .thumb { position: absolute; inset: 0; }
.review-card.lead-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.review-card.lead-card .rc-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px; gap: 10px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.85) 100%); }
.review-card.lead-card .rc-meta, .review-card.lead-card .rc-cat { color: #fff; }
.review-card.lead-card .rc-dot { background: rgba(255,255,255,.7); }
.review-card.lead-card h3 { font-size: clamp(30px, 3.4vw, 42px); color: #fff; }
.review-card.lead-card p { font-size: 19px; color: rgba(255,255,255,.9); max-width: 46ch; }
.review-card.lead-card .rc-foot { color: #fff; }

/* Second row big-ish */
.review-card.wide-card { grid-column: span 2; }
.review-card.wide-card .thumb { height: 190px; }
.review-card.tall-card { grid-column: span 2; }
.review-card.tall-card .thumb { height: 190px; }
.review-card.mini { grid-column: span 3; flex-direction: row; }
.review-card.mini .thumb { flex: 0 0 130px; }
.review-card.mini .rc-body { padding: 18px; }
.review-card.mini h3 { font-size: 20px; }

/* CSS-only "more" expander */
.feed-more { display: contents; }
.more-toggle { position: absolute; opacity: 0; pointer-events: none; }
.feed-extra { display: contents; }
.more-toggle:not(:checked) ~ .feed .feed-extra { display: none; }
.more-btn { display: inline-flex; margin: 28px auto 0; cursor: pointer; }
.more-toggle:checked ~ .more-btn .more-open { display: none; }
.more-toggle:not(:checked) ~ .more-btn .more-close { display: none; }

@media (max-width: 900px) {
  .feed { grid-template-columns: 1fr 1fr; }
  .review-card.lead-card { grid-column: span 2; grid-row: auto; display: flex; flex-direction: column; }
  .review-card.lead-card .thumb { position: relative; inset: auto; height: 240px; }
  .review-card.lead-card .rc-body { position: static; background: none; padding: 24px; }
  .review-card.lead-card .rc-meta, .review-card.lead-card .rc-cat { color: var(--muted); }
  .review-card.lead-card .rc-cat { color: var(--teal-ink); }
  .review-card.lead-card .rc-dot { background: var(--muted); }
  .review-card.lead-card h3 { color: var(--ink); }
  .review-card.lead-card p { color: var(--muted); }
  .review-card.lead-card .rc-foot { color: var(--tomato-ink); }
  .review-card.wide-card, .review-card.tall-card, .review-card.mini { grid-column: span 1; }
  .review-card.mini { flex-direction: column; }
  .review-card.mini .thumb { flex: none; height: 160px; }
}
@media (max-width: 560px) { .feed { grid-template-columns: 1fr; } .review-card.lead-card { grid-column: span 1; } }

/* ============================================================
   ABOUT strip
   ============================================================ */
.about-strip { background: var(--teal); color: #fff; border-radius: var(--r-lg); padding: 44px; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.about-strip .avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 4px solid rgba(255,255,255,.5); }
.about-strip .avatar img { width: 100%; height: 100%; object-fit: cover; }
.about-strip h2 { color: #fff; font-size: 34px; margin: 0 0 8px; }
.about-strip p { color: rgba(255,255,255,.92); font-size: 19px; margin: 0; max-width: 60ch; }
.about-strip .btn-ghost { border-color: #fff; background: transparent; color: #fff; white-space: nowrap; }
.about-strip .btn-ghost:hover { background: #fff; color: var(--teal-ink); }
@media (max-width: 780px) { .about-strip { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 32px; } }

/* ============================================================
   SPONSORS — 12 uniform slots: small logo + short blurb, CSS-only reveal
   ============================================================ */
.sponsors-band { background: var(--card); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.sponsor-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.sponsor {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: var(--r); background: var(--paper);
  border: 2px dashed var(--line); text-decoration: none; color: var(--ink);
  align-items: center; text-align: center;
  transition: border-color .15s ease, transform .15s ease;
}
.sponsor:hover { text-decoration: none; border-color: var(--tomato); transform: translateY(-3px); }
.sponsor img {
  width: 100%; height: 84px; object-fit: contain; border-radius: var(--r-sm);
  background: var(--ink); padding: 12px 16px;
  font-family: var(--f-display); font-weight: 600; font-size: 12px; color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
}
.sponsor-blurb { font-size: 12.5px; line-height: 1.4; color: var(--muted); min-height: 1px; }
.sponsor-blurb:empty::before { content: "Add a partner"; opacity: .5; font-style: italic; }

/* favor spot #1 — featured headline card: full-height logo panel + centered blurb */
.sponsor[data-partner="1"] { grid-column: span 2; flex-direction: row; align-items: stretch; text-align: left; background: var(--mustard); border-style: solid; border-color: transparent; gap: 22px; padding: 18px; }
.sponsor[data-partner="1"] img { flex: 0 0 44%; width: 44%; height: auto; align-self: stretch; }
.sponsor[data-partner="1"] .sponsor-blurb { flex: 1; min-width: 0; align-self: center; display: flex; flex-direction: column; justify-content: center; gap: 8px; font-size: 16px; line-height: 1.45; color: var(--ink); padding-right: 6px; }
.sponsor[data-partner="1"] .sponsor-blurb::before { content: "★ Headline partner"; font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--tomato-ink); }
.sponsor[data-partner="1"] .sponsor-blurb:empty { justify-content: center; }
.sponsor[data-partner="1"] .sponsor-blurb:empty::after { content: "Add a headline partner"; opacity: .55; font-style: italic; }

.sponsor-hidden { display: none; }
.sponsors-toggle { position: absolute; opacity: 0; pointer-events: none; }
.sponsors-toggle:checked ~ .sponsors-band .sponsor-hidden { display: flex; }
.sponsor-more-btn { display: inline-flex; margin: 22px auto 0; cursor: pointer; }
.sponsors-toggle:checked ~ .sponsor-more-btn .smore-open { display: none; }
.sponsors-toggle:not(:checked) ~ .sponsor-more-btn .smore-close { display: none; }

@media (max-width: 780px) { .sponsor-grid { grid-template-columns: repeat(3, 1fr); } .sponsor[data-partner="1"] { grid-column: span 3; } }
@media (max-width: 480px) {
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); }
  .sponsor[data-partner="1"] { grid-column: span 2; flex-direction: column; text-align: center; }
  .sponsor[data-partner="1"] img { flex: none; width: 100%; height: 64px; }
}

/* ============================================================
   NEWSLETTER / get the list
   ============================================================ */
.newsletter { background: var(--ink); color: var(--paper); border-radius: var(--r-lg); padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.newsletter h2 { color: var(--paper); font-size: 40px; margin: 0 0 10px; }
.newsletter h2 .pop { color: var(--tomato); }
.newsletter p { color: #d8cdbb; font-size: 18px; margin: 0; max-width: 44ch; }
.nl-form { display: flex; gap: 10px; }
.nl-form input { flex: 1; border: 0; border-radius: var(--r-pill); padding: 15px 20px; font-size: 16px; font-family: var(--f-body); background: var(--paper); color: var(--ink); }
.nl-form input::placeholder { color: #9b8f7d; }
@media (max-width: 780px) { .newsletter { grid-template-columns: 1fr; padding: 36px; } }

/* ============================================================
   ARTICLE / page body
   ============================================================ */
.page-hero { padding: 48px 0 8px; }
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(38px, 6vw, 66px); max-width: 18ch; }
.page-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--muted); margin-top: 14px; }
.article-hero-img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); margin: 28px 0 8px; aspect-ratio: 16/8; }
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-credit { font-size: 13px; color: var(--muted); margin: 8px 2px 0; }

.article { max-width: 760px; margin: 0 auto; padding: 40px 24px 20px; }
.article > * { max-width: var(--measure); }
.article > .full { max-width: 100%; }
.article p, .article ul, .article ol { font-size: 20px; line-height: 1.7; }
.article h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 1.6em 0 .5em; }
.article h3 { font-size: 24px; margin: 1.4em 0 .4em; }
.article ul, .article ol { padding-left: 1.2em; }
.article li { margin-bottom: .7em; }
.article a { color: var(--tomato-ink); font-weight: 600; }

/* ============================================================
   PALETTE_SPEC COMPONENTS
   ============================================================ */

/* .lead */
.lead { font-family: var(--f-body); font-weight: 500; font-size: clamp(21px, 2.4vw, 26px); line-height: 1.5; color: var(--ink); }

/* .pullquote */
.pullquote { margin: 1.4em 0; padding: 0 0 0 28px; border-left: 6px solid var(--tomato); }
.pullquote p { font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 3vw, 32px); line-height: 1.18; color: var(--ink); margin: 0; }

/* .blockquote */
.blockquote { margin: 1.4em 0; padding: 24px 28px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.blockquote p { font-size: 21px; font-style: italic; margin: 0 0 .5em; }
.blockquote cite { font-family: var(--f-display); font-weight: 600; font-style: normal; color: var(--teal-ink); font-size: 16px; }

/* .callout */
.callout { margin: 1.4em 0; padding: 22px 24px 22px 60px; background: #FFF2D6; border-radius: var(--r); position: relative; border: 1px solid var(--mustard); }
.callout::before { content: "★"; position: absolute; left: 22px; top: 20px; color: var(--mustard); font-size: 22px; }
.callout p { font-size: 19px; margin: 0; font-weight: 500; }

/* .note */
.note { font-size: 16px; color: var(--muted); background: var(--card); border-left: 4px solid var(--teal); padding: 12px 16px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.note::before { content: "Note — "; font-weight: 700; font-family: var(--f-display); color: var(--teal-ink); }

/* .versus */
.versus { width: 100%; border-collapse: separate; border-spacing: 12px; margin: 1.2em 0; }
.versus .versus-item, .versus td, .versus th { background: var(--card); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow-sm); text-align: center; font-size: 18px; vertical-align: top; }
.versus th { background: var(--ink); color: var(--paper); font-family: var(--f-display); }
.versus-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin: 1.2em 0; }
.versus-row .vs-badge { align-self: center; font-family: var(--f-display); font-weight: 700; color: var(--tomato); font-size: 22px; }
@media (max-width: 560px) { .versus { border-spacing: 8px; } }

/* .datatable */
.datatable { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 17px; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.datatable th { background: var(--ink); color: var(--paper); font-family: var(--f-display); text-align: left; padding: 14px 16px; font-weight: 600; }
.datatable td { padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.datatable tr:nth-child(even) td { background: #FFFBF2; }
.datatable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }

/* .statblock */
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 1.4em 0; }
.statblock { background: var(--card); border-radius: var(--r); padding: 26px 20px; text-align: center; box-shadow: var(--shadow-sm); border-top: 5px solid var(--tomato); }
.statblock:nth-child(3n+2) { border-top-color: var(--teal); }
.statblock:nth-child(3n) { border-top-color: var(--grape); }
.stat-num { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 6vw, 56px); line-height: 1; color: var(--ink); }
.stat-label { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); font-weight: 500; }

/* .timeline — long multi-word labels */
.timeline { list-style: none; margin: 1.4em 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 3px; background: var(--line); border-radius: 3px; }
.timeline li { position: relative; padding: 0 0 22px 40px; }
.timeline li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--tomato); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--tomato); }
.t-when { display: block; font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--teal-ink); }
.t-what { display: block; font-size: 18px; color: var(--ink); }

/* charts */
.chart { margin: 1.4em 0; background: var(--card); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-sm); }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart figcaption { margin-top: 14px; font-size: 15px; color: var(--muted); text-align: center; }
.chart .bar-rect { fill: var(--tomato); }
.chart .bar-rect.alt { fill: var(--teal); }
.chart .bar-label { font-family: var(--f-body); font-size: 12px; fill: var(--muted); }
.chart .bar-val { font-family: var(--f-display); font-weight: 600; font-size: 13px; fill: var(--ink); }
.chart .axis { stroke: var(--line); stroke-width: 1.5; }
.chart .line-path { fill: none; stroke: var(--tomato); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart .line-dot { fill: var(--tomato); }
.chart .line-area { fill: rgba(255,84,54,.12); }
.chart .donut-track { fill: none; stroke: var(--line); stroke-width: 22; }
.chart .donut-val { fill: none; stroke: var(--teal); stroke-width: 22; stroke-linecap: round; }
.chart .donut-center { font-family: var(--f-display); font-weight: 700; font-size: 30px; fill: var(--ink); }

/* .article-figure */
.article-figure { margin: 1.6em 0; }
.article-figure img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow-sm); }
.article-figure figcaption { margin-top: 10px; font-size: 15px; color: var(--muted); font-style: italic; }

/* .gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 1.6em 0; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--r); }
.gallery figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* .map-figure */
.map-figure { margin: 1.6em 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--card); }
.map-figure svg { width: 100%; height: auto; display: block; }
.map-figure figcaption { padding: 12px 18px; font-size: 15px; color: var(--muted); background: var(--card); }

/* .profile-card */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 1.6em 0; }
.profile-card { background: var(--card); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-sm); text-align: center; }
.profile-card .p-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; border: 3px solid var(--mustard); }
.profile-card h3 { font-size: 22px; margin: 0 0 2px; }
.profile-card .p-role { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--teal-ink); margin: 0 0 12px; }
.profile-card p { font-size: 16px; color: var(--muted); }
.profile-card.no-photo { text-align: left; border-left: 5px solid var(--grape); }
.profile-card.no-photo::before { content: attr(data-initial); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--grape); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 24px; margin-bottom: 14px; }
.p-links { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; }
.no-photo .p-links { justify-content: flex-start; }
.p-attr { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* .org-card */
.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 1.6em 0; }
.org-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; background: var(--card); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); }
.org-card:hover { text-decoration: none; transform: translateY(-2px); }
.org-logo { grid-row: span 2; width: 52px; height: 52px; border-radius: var(--r-sm); object-fit: cover; background: var(--paper); }
.org-name { font-family: var(--f-display); font-weight: 600; font-size: 18px; }
.org-host { font-size: 14px; color: var(--muted); }
.org-card.no-logo { grid-template-columns: 1fr; }
.org-card.no-logo .org-name::before { content: "▲ "; color: var(--tomato); }

/* .entity-ref */
.entity-ref { color: var(--teal-ink); font-weight: 600; border-bottom: 2px solid rgba(18,165,148,.35); }
.entity-ref:hover { text-decoration: none; border-bottom-color: var(--teal); }

/* .further-grid */
.further-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 1.6em 0; }
.further-grid a { background: var(--card); border-radius: var(--r); padding: 20px 22px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 19px; line-height: 1.2; display: flex; flex-direction: column; gap: 8px; border-bottom: 4px solid var(--tomato); }
.further-grid a::after { content: "Read →"; font-family: var(--f-body); font-weight: 600; font-size: 14px; color: var(--tomato-ink); }
.further-grid a:hover { text-decoration: none; transform: translateY(-3px); }

/* Contact form (no-JS static) */
.contact-form { display: grid; gap: 16px; max-width: 560px; margin: 1.4em 0; }
.contact-form label { font-family: var(--f-display); font-weight: 600; font-size: 16px; display: block; margin-bottom: 6px; }
.contact-form input, .contact-form textarea { width: 100%; border: 2px solid var(--line); border-radius: var(--r-sm); padding: 13px 16px; font-size: 17px; font-family: var(--f-body); background: var(--card); color: var(--ink); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--teal); outline: none; }
.contact-form textarea { min-height: 140px; resize: vertical; }

/* styleguide helpers */
.sg-section { margin: 0 0 56px; }
.sg-section > h2 { font-size: 30px; border-bottom: 3px solid var(--tomato); padding-bottom: 8px; margin-bottom: 8px; }
.sg-label { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--muted); margin: 24px 0 8px; text-transform: uppercase; letter-spacing: .06em; }
.swatches { display: flex; flex-wrap: wrap; gap: 14px; margin: 1em 0; }
.swatch { width: 120px; }
.swatch .chip-color { height: 72px; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }
.swatch .chip-name { font-family: var(--f-display); font-weight: 600; font-size: 14px; margin-top: 8px; }
.swatch .chip-hex { font-size: 13px; color: var(--muted); }

/* 404 */
.err-page { text-align: center; padding: 90px 24px 60px; }
.err-page .code { font-family: var(--f-display); font-weight: 700; font-size: clamp(90px, 20vw, 180px); line-height: .9; color: var(--tomato); }
.err-page h1 { font-size: clamp(32px, 5vw, 48px); }
.err-page p { font-size: 20px; color: var(--muted); max-width: 44ch; margin: 12px auto 28px; }

/* ---- mobile hardening (pipeline): solid bento tiles — group label+figure, no dead middle ---- */
@media (max-width: 560px) {
  .bento-solid { justify-content: center; gap: 14px; }
  .bento-solid .big { font-size: 52px; }
}

/* ---- mobile hardening (pipeline): .hero/.section zero out .wrap's side padding (same specificity, later rule) ---- */
@media (max-width: 1248px) {
  .hero.wrap, .section.wrap { padding-left: 24px; padding-right: 24px; }
}

/* ===== pipeline mobile-gutter guard (finalize) — content never touches the screen edge ===== */
@media (max-width:680px){ .wrap,.wrap-wide,.container,.hero-inner,.footer-inner,.footer-bottom,.article-inner,.climate-inner,.nav,[class$="-inner"],[class*="-inner "]{ padding-left:max(18px,env(safe-area-inset-left,0px))!important; padding-right:max(18px,env(safe-area-inset-right,0px))!important; } }

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-grid .sponsor.sponsor img{height:76px!important;display:block!important;width:233px!important;max-width:100%!important;flex:none!important}


/* sp-feat-align: the headline tile's mark shares the copy's centre line.
   Measured, three attempts in:
     · the tile's two flex items are ALREADY centred — A.sp-logo centre 87, .sponsor-blurb
       centre 87. The container alignment was never the problem.
     · A.sp-logo is a 135px-tall display:block box holding a 76px mark pinned to its top, so the
       mark's centre sits at 58 against the copy's 87 — the 29px the operator saw.
     · align-self on the <img> does nothing at tile level: the img is not a flex item of the tile,
       it is a child of the anchor.
   So the anchor centres its own content. One rule, on the element that actually governs.

   ⚠️ ATTEMPT ONE REWROTE THE LAYOUT AND WAS MUCH WORSE — it restored Design's
   flex:0 0 44% + height:auto + align-self:stretch, the mark stretched the full tile height and
   the copy was crushed into a 70px column wrapping one word per line. The complaint was vertical
   alignment; nothing else needed touching. */
.sponsor[data-partner="1"] .sp-logo{display:flex!important;align-items:center!important;
                                    justify-content:center!important}

/* ⚠️ AND THE MARK ITSELF CARRIES align-self:stretch FROM DESIGN, which beats the anchor's
   align-items:center. With height:76px pinned the box does not actually stretch — it just sits
   at the start of a 135px box, centre 58 against the copy's 87. An auto margin on the block axis
   centres a flex child whatever align-self says, so it does not depend on out-specifying Design. */
.sponsor[data-partner="1"] .sp-logo img{margin-block:auto!important}

/* op-footer-compact: the footer printed 4 rows for 4 link(s) in
   1 list(s) — 708px at 390, 10% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 708 -> 569px (20% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(10px,2.78vw,40px)!important;row-gap:10px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-blurb-rows: money blurbs ran to 6 rows at 390, 939px of tier across
   7 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:51px!important;min-height:0!important;overflow:hidden!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — div reached
   355px in a 320px screen (+35px), inside
   div.newsletter. Remedy: let the words break. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div,div *{overflow-wrap:anywhere!important;min-width:0!important}
}

/* op-article-width: the article column was capped at 712px (78 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 760px (declared in .article) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article.article{max-width:min(980px, 100%)!important}
}
@media (min-width:1600px){
  article.article{max-width:min(clamp(980px, 68.056vw, 1176px), 100%)!important}
  article.article > :is(p:not([class])), article.article > :is(ul:not([class])) > li{font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-grid 7 rows at 900). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sponsor-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--f-display); font-weight: 700; line-height: 1.03; margin: 0px 0px 0.5em; letter-spacing: -0.01em;}
.tile-body h2:where(.rt-h3){font-size: 26px; margin: 8px 0px 2px;}
.bento-feature .tile-body h2:where(.rt-h3){font-size: 38px;}
.review-card h2:where(.rt-h3){font-size: 24px; margin: 0px; color: var(--ink);}
.review-card.lead-card h2:where(.rt-h3){font-size: clamp(30px, 3.4vw, 42px); color: rgb(255, 255, 255);}
.review-card.mini h2:where(.rt-h3){font-size: 20px;}
@media (max-width: 900px){.review-card.lead-card h2:where(.rt-h3){color: var(--ink);}}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px) and (max-width:1299px){
  div.page-meta{padding-left:max(24px, 18px);padding-right:max(24px, 18px)}
  div.wrap.page-hero{padding-left:max(24px, 18px);padding-right:max(24px, 18px)}
  div.wrap.page-hero div.page-meta{padding-left:0;padding-right:0}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.lead-card.review-card > div.thumb > img,
  a.mini.review-card > div.thumb > img,
  a.review-card.tall-card > div.thumb > img,
  a.review-card.wide-card > div.thumb > img,
  article.article > figure.article-figure > img,
  div.about-strip > div.avatar > img,
  div.bento > a.bento-feature.bento-tile > img,
  div.bento > a.bento-tile > img,
  div.wrap > figure.article-hero-img > img){height:auto}
/* op-img-dims:end */
.sponsor-grid .sponsor[data-partner="1"] .sponsor-blurb{display:block!important;-webkit-line-clamp:unset!important;max-height:none!important;overflow:visible!important}.sponsor-grid .sponsor[data-partner="1"] .sponsor-blurb::before{display:block!important;margin-bottom:8px!important}@media (min-width:781px) and (max-width:939px){.sponsor[data-partner="1"]{flex-direction:column!important;text-align:center!important;align-items:center!important}}