/* ==========================================================================
   MOCKINGBIRD SAKE — SHARED STYLESHEET
   Tokens + reset + base typography + components reused across every page.
   Page-specific layout (panel structure, unique sections) stays in each
   page's own <style> block — this file only holds what's genuinely shared.
   ========================================================================== */

/* ── SELF-HOSTED FONTS ── */
@font-face { font-family: 'Roboto Condensed'; src: url('../fonts/RobotoCondensed-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto Condensed'; src: url('../fonts/RobotoCondensed-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto Condensed'; src: url('../fonts/RobotoCondensed-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto Condensed'; src: url('../fonts/RobotoCondensed-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Yusei Magic'; src: url('../fonts/YuseiMagic-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Amatic SC'; src: url('../fonts/AmaticSC-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Amatic SC'; src: url('../fonts/AmaticSC-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans JP'; src: url('../fonts/IBMPlexSansJP-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }

/* ── REDUCED MOTION (WCAG 2.3.3) ── Nothing on this site auto-plays or
   moves at scale — motion is limited to short hover/focus transitions
   (color, border, transform) — but users who've set the OS-level "reduce
   motion" preference still shouldn't get any of it. !important on a
   universal selector is deliberate here, not sloppy: page-specific <style>
   blocks load after this stylesheet, so without !important their own
   transition/animation declarations would win the cascade by source order
   and quietly opt back into motion this rule is meant to kill everywhere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── A11Y UTILITY ── */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── SKIP LINK — first focusable element on every page. Hidden off-screen
   until it receives keyboard focus, then jumps above everything (z-index)
   so it's never hidden behind the hero photo or panel backgrounds. Targets
   #main-content, the id every page's <main> now carries. ── */
.skip-link {
  position: absolute;
  top: -80px; left: 0.75rem;
  z-index: 1000;
  background: var(--terra);
  color: #ffffff;
  font-family: var(--font-condensed);
  font-size: 14px;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-control);
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0.75rem;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ── DESIGN TOKENS ── */
:root {
  /* Accent */
  --terra:        #C0392B;
  --terra-dark:   #8E1A0E;
  --terra-light:  #D4744F;
  --terra-border: #B85C38;  /* nav/footer/drawer border tint — used as rgba(184,92,56,X) throughout since a hex custom property can't carry opacity on its own */
  --highlight-amber: #F99A19; /* in-copy text highlight — used as rgba(249,154,25,0.14) per the hex+opacity convention above */

  /* Text */
  --sand:         #f0e8d5;  /* legacy warm-cream text/UI tone — being phased out of text and UI in favor of --grey-wisp below; retained only in case something still references it mid-migration */
  --grey-wisp:      #E4E4E4; /* replaces --sand for text/UI on dark panels — keeps the warm sand/terra tone reserved for image assets only */
  --grey-wisp-rgb:  228, 228, 228; /* channel values only, for opacity variants: rgba(var(--grey-wisp-rgb), 0.6) instead of a hardcoded rgba triplet */
  --grey-light:   #6e6e6e;  /* darkened from #8F8F8D — that value failed WCAG AA (2.94:1) against bg-white; this hits 4.63:1 */
  --ink-black:    #1a1a18;  /* body/heading text color on --bg-white panels — used often enough (headings, buttons, links, tooltips) to warrant a name instead of a repeated hardcoded hex */

  /* Structural chrome only — footer, panel gap lines, floating nav button.
     Never used as a page/panel content background. */
  --ink:          #0f1020;

  /* The only 4 approved panel/page background colors */
  --bg-gray:      #27272D;
  --bg-black:     #0d0d0b;
  --bg-white:     #F5F4F0;
  --bg-navy:      #162F4F;

  /* Fonts */
  --font-jp:        'IBM Plex Sans JP', sans-serif;
  --font-condensed: 'Roboto Condensed', sans-serif;
  --font-yusei:     'Yusei Magic', sans-serif;
  --font-amatic:    'Amatic SC', cursive;

  /* Layout */
  --panel-gap:    1px;

  /* Radius scale */
  --radius-card:    5px;   /* photos, also-like, journal/review/term cards, popovers */
  --radius-control: 3px;   /* nav-toggle, drawer-close, small buttons/CTAs, filter-panel */
  --radius-pill:    100px; /* flags, tags */
}

/* ── BASE TYPOGRAPHY ──
   h1 = the one page title per page, Amatic 52px. Repeat Amatic-style
   headlines lower on the page carry the same look via the .panel-heading
   class on an h2 (see below). .eyebrow = small uppercase kicker label
   above a headline, color keyed to whatever panel it sits on — presentational,
   so it's a <p>, not a heading. h3 = shared secondary heading style (card
   titles, verdict prompts, icon titles). */
h1, .panel-heading {
  font-family: var(--font-amatic);
  font-size: 52px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-align: center;
  text-transform: none;
  margin-bottom: 0.5rem;
}
.heading-light { color: #ffffff; }
.heading-dark  { color: #1a1a18; }
.heading-sand  { color: var(--grey-wisp); }

h2, .eyebrow, .panel-eyebrow {
  font-family: var(--font-yusei);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.2rem;
}
/* Eyebrow color, keyed to panel background per the 4-color rule */
.eyebrow--black,
.eyebrow--navy   { color: var(--grey-wisp); }
.eyebrow--white  { color: var(--grey-light); }
.eyebrow--gray   { color: #ffffff; }

h3 {
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--terra-light);
  transition: color 0.2s;
}
h3.terra-dark { color: var(--terra-dark); }

/* ── PANEL BODY COPY ──
   Shared base for the left-aligned paragraph copy that follows a panel's
   headline (about-intro, story-intro, connect-intro, brewing-intro,
   tasting-intro, grades-intro, story-copy, milling-copy, pyramid-intro,
   next-copy). Each of those page-specific classes now only sets color;
   this carries font/size/line-height/margin so they can't drift apart
   again. Not used by .rollup-intro, which is a separate centered-hero
   pattern shared across the 3 rollup-style pages. */
.panel-copy {
  font-family: var(--font-condensed);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.3;
  margin: 1.1rem 0 0 0;
  text-align: left;
}

/* Floor the responsive range at 320px (smallest common device viewport,
   e.g. 1st-gen iPhone SE). Below this, the browser shows a horizontal
   scrollbar instead of continuing to compress the layout further. Lives
   on html (not body) so it holds even on pages with their own local
   html/body overrides, since none of those set min-width. */
html {
  min-width: 320px;
}

/* ── BUTTON SYSTEM ──
   One base, two color modifiers. .btn-sand covers every dark background
   (black, gray, navy) since they all read the same against sand. .btn-ink
   covers the one white/cream background. */
.site-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 450;
  letter-spacing: -0.01em;
  text-transform: none;
  padding: 0.5rem 0.7rem;
  background: transparent !important;
  border-top: none;
  border-bottom: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
  cursor: pointer;
  align-self: center;
  transition: color 0.5s, border-color 0.5s, transform 0.1s;
}
.site-btn .btn-tl { position: absolute; top: -1px; left: -1px; height: 0; width: 15px; transition: width 0.35s ease, border-color 0.5s; }
.site-btn .btn-tr { position: absolute; top: -1px; right: -1px; height: 0; width: 15px; transition: width 0.35s ease, border-color 0.5s; }
.site-btn .btn-bl { position: absolute; bottom: -1px; left: -1px; height: 0; width: 15px; transition: width 0.35s ease, border-color 0.5s; }
.site-btn .btn-br { position: absolute; bottom: -1px; right: -1px; height: 0; width: 15px; transition: width 0.35s ease, border-color 0.5s; }
.site-btn:active { opacity: 0.8; transform: translateY(1px); }
.site-btn:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }

.btn-sand { color: var(--grey-wisp); border-left: 1.5px solid var(--grey-wisp); border-right: 1.5px solid var(--grey-wisp); }
.btn-sand .btn-tl, .btn-sand .btn-tr { border-top: 1.5px solid var(--grey-wisp); }
.btn-sand .btn-bl, .btn-sand .btn-br { border-bottom: 1.5px solid var(--grey-wisp); }
/* Hover/active uses terra-light, not terra — plain terra falls below (or
   barely clears) 3:1 UI-component contrast against all three dark panel
   backgrounds (2.73:1 gray, 2.49:1 navy, 3.58:1 black). terra-light clears
   4-6:1 on all three. .btn-ink (light/white bg) keeps plain terra below,
   since terra reads fine there. */
.btn-sand:hover:not(:disabled), .btn-sand:active:not(:disabled) { color: var(--terra-light); border-color: var(--terra-light); }
.btn-sand:hover:not(:disabled) .btn-tl, .btn-sand:hover:not(:disabled) .btn-tr, .btn-sand:hover:not(:disabled) .btn-bl, .btn-sand:hover:not(:disabled) .btn-br,
.btn-sand:active:not(:disabled) .btn-tl, .btn-sand:active:not(:disabled) .btn-tr, .btn-sand:active:not(:disabled) .btn-bl, .btn-sand:active:not(:disabled) .btn-br { width: calc(50% + 1px); border-color: var(--terra-light); }

.btn-ink { color: #1a1a18; border-left: 1.5px solid #1a1a18; border-right: 1.5px solid #1a1a18; }
.btn-ink .btn-tl, .btn-ink .btn-tr { border-top: 1.5px solid #1a1a18; }
.btn-ink .btn-bl, .btn-ink .btn-br { border-bottom: 1.5px solid #1a1a18; }
.btn-ink:hover:not(:disabled), .btn-ink:active:not(:disabled) { color: var(--terra); border-color: var(--terra); }
.btn-ink:hover:not(:disabled) .btn-tl, .btn-ink:hover:not(:disabled) .btn-tr, .btn-ink:hover:not(:disabled) .btn-bl, .btn-ink:hover:not(:disabled) .btn-br,
.btn-ink:active:not(:disabled) .btn-tl, .btn-ink:active:not(:disabled) .btn-tr, .btn-ink:active:not(:disabled) .btn-bl, .btn-ink:active:not(:disabled) .btn-br { width: calc(50% + 1px); border-color: var(--terra); }

.site-btn:disabled { color: rgba(var(--grey-wisp-rgb),0.3); border-color: rgba(var(--grey-wisp-rgb),0.2); cursor: default; }
.site-btn:disabled .btn-tl, .site-btn:disabled .btn-tr, .site-btn:disabled .btn-bl, .site-btn:disabled .btn-br { border-color: rgba(var(--grey-wisp-rgb),0.2); }
/* .site-btn:disabled above is sand-tinted — correct for .btn-sand on a dark
   panel, but nearly invisible for .btn-ink on a light one (e.g. the "That's
   every review" state on reviews-rollup.html). Override with ink-tinted
   values for that variant specifically. */
.btn-ink:disabled { color: rgba(26,26,24,0.3); border-color: rgba(26,26,24,0.2); cursor: default; }
.btn-ink:disabled .btn-tl, .btn-ink:disabled .btn-tr, .btn-ink:disabled .btn-bl, .btn-ink:disabled .btn-br { border-color: rgba(26,26,24,0.2); }

.btn-arrow { display: inline-flex; align-items: center; line-height: 1; color: inherit; }
.btn-arrow svg line, .btn-arrow svg polyline { transition: stroke 0.5s; }
.site-btn:hover .btn-arrow svg line, .site-btn:hover .btn-arrow svg polyline,
.site-btn:active .btn-arrow svg line, .site-btn:active .btn-arrow svg polyline { stroke: var(--terra); }
/* .btn-sand overrides to terra-light, matching its own hover color/border above. */
.btn-sand:hover .btn-arrow svg line, .btn-sand:hover .btn-arrow svg polyline,
.btn-sand:active .btn-arrow svg line, .btn-sand:active .btn-arrow svg polyline { stroke: var(--terra-light); }

/* ── HAMBURGER NAV — one canonical version, same everywhere ── */
.nav-toggle {
  position: fixed;
  top: 1.1rem;
  right: 1.25rem;
  z-index: 200;
  width: 40px; height: 40px;
  background: rgba(15,16,32,0.82);
  border: 1px solid rgba(184,92,56,0.28);
  border-radius: var(--radius-control);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.nav-toggle:hover { background: rgba(30,30,60,0.95); border-color: rgba(184,92,56,0.6); }
.nav-toggle .bar {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--grey-wisp);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}
.nav-toggle.is-open .bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open .bar:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.is-open .bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(8,8,20,0.6);
  z-index: 150;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nav-backdrop.is-open { opacity: 1; pointer-events: all; }

/* ── NAV DRAWER ──
   Rolled out sitewide (was trialled on index.html only under a
   .nav-drawer--redesign modifier; now merged into the base rules below
   since every page uses this markup). Bordered frame + wordmark image +
   cup-icon dividers + Amatic SC links + bird emblem, closing with the
   fixed .nav-toggle hamburger as the only open/close control (it morphs
   into an X and handles both, so there's no separate in-drawer close
   button to keep in sync). */
.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 88vw);
  background: var(--ink);
  z-index: 160;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  scrollbar-width: none;
  padding: 14px;
}
.nav-drawer::-webkit-scrollbar { display: none; }
.nav-drawer.is-open { transform: translateX(0); }

.drawer-frame {
  min-height: calc(100% - 28px);
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--terra-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.4rem 0.9rem;
  flex-shrink: 0;
}
.drawer-wordmark { height: 50px; width: auto; display: block; }

/* Divider — a rule split by the little o-choko cup icon, used below the
   wordmark and again between the Explore/Featured sections. */
.drawer-divider {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 1.4rem;
  margin: 0.3rem 0 0.2rem;
  flex-shrink: 0;
}
.drawer-divider::before, .drawer-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(184,92,56,0.35);
}
.drawer-divider-cup { width: 24px; height: auto; flex-shrink: 0; opacity: 0.9; }

.drawer-section-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-yusei);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra-light);
  padding: 0.9rem 1.4rem 0.5rem;
}
.label-mark { color: var(--terra); font-size: 0.7rem; line-height: 1; }
.drawer-nav { flex: 0 0 auto; }
.drawer-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.45rem 1.4rem;
  text-decoration: none;
  color: rgba(var(--grey-wisp-rgb),0.85);
  font-family: var(--font-amatic);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.02em;
  line-height: 1.15;
  border-left: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.drawer-link:hover { color: var(--grey-wisp); background: rgba(184,92,56,0.06); border-left-color: var(--terra); }
.drawer-link.is-current { color: var(--terra-light); border-left-color: var(--terra-light); }

/* Bird emblem — closes out the drawer. margin-top:auto on this flex-column
   frame lets it settle at the bottom when the link list doesn't fill the
   drawer's height, and just flow naturally after the links otherwise. */
.drawer-emblem {
  margin-top: auto;
  padding: 1rem 1.75rem 1.4rem;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
/* The <picture> wrapper (added for webp+fallback) is inline by default, so
   a percentage width on the <img> alone resolves against an undefined
   containing block and throws off centering — sizing the <picture> itself
   fixes it. */
.drawer-emblem picture { display: block; width: 76%; max-width: 210px; }
.drawer-emblem-img { width: 100%; height: auto; display: block; }

/* ── ALSO-LIKE CARD — one component, two text-color variants ──
   Default assumes a dark panel (black/gray/navy) behind it. Add
   .also-like--on-white when it sits on the white/cream panel. */
.also-like {
  border: 2px solid rgba(var(--grey-wisp-rgb),0.12); /* always 2px — only border-color
    transitions on hover (matches .review-card's pattern in reviews-rollup.html).
    A hover-only width change shrinks the content box and reflows/shifts the
    text inside it; reserving the full width up front avoids that. */
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: border-color 0.2s;
  position: relative;
  z-index: 1;
  -webkit-user-drag: none;
  user-drag: none;
  flex-shrink: 0; /* prevents it from being compressed below content size
    inside a fixed-height flex-column panel (.panel-verdict at ultrawide) —
    without this, overflow:hidden lets it shrink to fit rather than the
    panel scrolling, which clips the note text/flags. See also-like-label
    below for the same protection. */
}
.also-like:hover { border-color: rgba(192,57,43,0.45); } /* full terra is fine on hover/rollover — the resting border is a neutral tint, not terra, so there's no legibility concern to fix here */
.also-like-label {
  font-family: var(--font-yusei);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-light);
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
  display: block;
  flex-shrink: 0;
}
.also-like-inner { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem; min-width: 0; }
.also-like-img { width: 75px; min-width: 75px; height: 150px; min-height: 150px; object-fit: cover; object-position: center top; border-radius: 3px; flex-shrink: 0; display: block; }
.also-like-body { flex: 1; min-width: 0; }
.also-like-name { font-family: var(--font-condensed); font-weight: 700; font-size: 17px; color: var(--grey-wisp); line-height: 1.2; margin-bottom: 0.25rem; }
.also-like-brewery { font-family: var(--font-yusei); font-size: 10px; letter-spacing: 0.08em; color: rgba(var(--grey-wisp-rgb),0.55); text-transform: uppercase; margin-bottom: 0.4rem; }
.also-like-note { font-family: var(--font-condensed); font-weight: 300; font-size: 16px; line-height: 1.3; color: rgba(var(--grey-wisp-rgb),0.55); }
.also-like-flags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.also-like-flag { font-family: var(--font-yusei); font-size: 9px; letter-spacing: 0.08em; padding: 0.2rem 0.5rem; border: 1px solid rgba(var(--grey-wisp-rgb),0.2); border-radius: var(--radius-pill); color: rgba(var(--grey-wisp-rgb),0.55); background: transparent; }
.also-like-arrow { color: var(--terra-light); flex-shrink: 0; opacity: 0.8; transition: opacity 0.2s, transform 0.2s; }
.also-like:hover .also-like-arrow { opacity: 1; transform: translateX(4px); }

/* On white/cream panels, swap to dark ink text and terra (not terra-light)
   for the label, hover border, and arrow */
.also-like--on-white { border-color: rgba(143,143,141,0.3); }
.also-like--on-white:hover { border-color: var(--terra); }
/* .also-like-label usually sits as a sibling BEFORE the card, not nested
   inside it — so it needs the modifier class directly, not just a
   descendant match. Support both in case markup ever nests it. */
.also-like-label.also-like--on-white,
.also-like--on-white .also-like-label { color: var(--terra); }
.also-like--on-white .also-like-name { color: #1a1a18; }
.also-like--on-white .also-like-brewery { color: var(--grey-light); }
.also-like--on-white .also-like-note { color: rgba(26,26,24,0.7); }
.also-like--on-white .also-like-flag { border-color: rgba(143,143,141,0.3); color: var(--grey-light); }
.also-like--on-white .also-like-arrow { color: var(--terra); }

/* On the navy panel specifically, the default 0.55-opacity grey-wisp text
   (fine on black/gray at 5.14:1 and 4.60:1) drops to 4.31:1 against
   --bg-navy — just under the 4.5:1 AA minimum for normal text (WCAG 1.4.3).
   Bumping to 0.65 here (navy only) clears it at ~5.4:1, matching the same
   opacity bump already used for .temp-chart-caption on light backgrounds. */
.also-like--on-navy .also-like-brewery,
.also-like--on-navy .also-like-note,
.also-like--on-navy .also-like-flag { color: rgba(var(--grey-wisp-rgb),0.65); }

/* Below 360px (smallest phones still seen in real traffic — iPhone SE,
   older/small Android), the flag pills wrap and crowd the card too tightly
   to read comfortably. Hiding just the flags row keeps photo/name/brewery/
   note intact and avoids the awkward "orphaned heading" problem that would
   come from hiding the whole card. */
@media (max-width: 359px) {
  .also-like-flags { display: none; }
}

/* ── ROLLUP CONTENT COLUMN — shared base, background keyed to the 4 tokens ── */
.rollup-content { position: relative; }
.rollup-content--black { background: var(--bg-black); color: var(--grey-wisp); }
.rollup-content--white { background: var(--bg-white); color: var(--ink-black); }
.rollup-content--gray  { background: var(--bg-gray);  color: var(--grey-wisp); }
.rollup-content--navy  { background: var(--bg-navy);  color: var(--grey-wisp); }

/* ── FOOTER — one padding/gap value on mobile, everywhere ── */
.site-footer {
  flex-shrink: 0;
  height: 36px;
  background: var(--ink);
  border-top: 1px solid rgba(184,92,56,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  gap: 2rem;
  z-index: 20;
}
.site-footer p, .site-footer a {
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  /* ~6.7:1 against --ink — passes WCAG AA (4.5:1 min for normal text).
     Previous 0.28 alpha measured ~2.2:1 and failed. */
  color: rgba(var(--grey-wisp-rgb),0.65);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
  line-height: 1;
}
.site-footer a:hover, .site-footer a:focus-visible { color: var(--terra-light); }
.site-footer a:focus-visible { outline: 2px solid var(--terra-light); outline-offset: 2px; }
.footer-links { display: flex; align-items: center; gap: 1.25rem; }
.footer-sep { display: inline-block; width: 1px; height: 10px; background: rgba(var(--grey-wisp-rgb),0.1); vertical-align: middle; }
@media (max-width: 699px) {
  .site-footer { height: auto !important; flex-direction: column !important; align-items: center !important; gap: 0.35rem !important; padding: 0.75rem 1.5rem !important; text-align: center; }
}
@media (max-width: 480px) {
  /* .footer-links (4 links + separators) runs ~390px wide and doesn't
     wrap, which overflows any phone-width viewport on its own — dropping
     the least-essential link (Sitemap) plus the separator right after it
     brings it down to ~298px, comfortably inside the site's 320px minimum.
     The separator *before* Sitemap is kept so Terms of Use / Contact still
     get a divider between them. */
  .footer-link-sitemap, .footer-sep-sitemap { display: none; }
}

/* ── TOOLTIP / POPOVER SYSTEM ──
   One shared overlay markup pattern: a single #termPopoverBackdrop populated
   by JS from a term-definition map (see js/popovers.js). No more one
   hardcoded overlay div per term. */
.tooltip-btn {
  background: none; border: none; padding: 0;
  font-family: var(--font-condensed);
  font-size: inherit; font-weight: inherit; line-height: inherit;
  color: #ffffff;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(255,255,255,0.4);
  text-underline-offset: 3px;
  cursor: help;
  user-select: text;
  -webkit-user-select: text;
  display: inline;
  white-space: normal;
  word-break: break-word;
  transition: color 0.25s, text-decoration-color 0.25s;
}
.tooltip-btn:hover { color: var(--terra-light); text-decoration-color: var(--terra-light); }
.tooltip-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; border-radius: 2px; }
.tooltip-btn--sand { color: rgba(var(--grey-wisp-rgb),0.6); font-family: var(--font-yusei); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: normal; text-decoration-color: rgba(var(--grey-wisp-rgb),0.35); }
.tooltip-btn--sand:hover { color: var(--terra-light); text-decoration-color: var(--terra-light); }
/* No white/cream-panel variant existed yet — every popover trigger so far
   sat on a dark panel. Mirrors .text-link's ink coloring, keeps the dotted
   underline + cursor:help so it still reads as "popover" not "link". */
.tooltip-btn--ink { color: #1a1a18; text-decoration-color: rgba(26,26,24,0.35); }
.tooltip-btn--ink:hover { color: var(--terra); text-decoration-color: var(--terra); }
.tooltip-btn--ink:focus-visible { outline-color: var(--terra); }
/* For dark panels whose body copy is --grey-wisp rather than white (navy
   panels) — keeps the inherited font/size, just starts at grey-wisp instead
   of white so it doesn't stand out from the surrounding text, and shifts to
   terra-light on hover, same as every other dark-panel tooltip variant.
   Not to be confused with .tooltip-btn--sand, which is an unrelated
   small-caps label style used on the review template. */
.tooltip-btn--sand-inline { color: var(--grey-wisp); text-decoration-color: rgba(var(--grey-wisp-rgb),0.45); }
.tooltip-btn--sand-inline:hover { color: var(--terra-light); text-decoration-color: var(--terra-light); }
.tooltip-jp { font-family: var(--font-jp); font-size: 0.9em; }

.popover-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(15,16,32,0.6); z-index: 300;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  align-items: center; justify-content: center; padding: 1.5rem;
}
.popover-backdrop.is-open { display: flex; }
.popover-box {
  background: #27272D; border: 1px solid rgba(var(--grey-wisp-rgb),0.12);
  border-radius: var(--radius-card); padding: 1.5rem; width: 100%; max-width: 340px;
  position: relative; box-shadow: 0 8px 32px rgba(15,16,32,0.4);
}
.popover-close {
  position: absolute; top: 0.6rem; right: 0.75rem;
  background: none; border: none; cursor: pointer;
  color: rgba(var(--grey-wisp-rgb),0.35); font-size: 40px;
  transition: color 0.2s; padding: 0; line-height: 1;
}
.popover-close:hover { color: var(--grey-wisp); }
.popover-term { font-family: var(--font-jp); font-size: 24px; color: var(--grey-wisp); margin-bottom: 0.25rem; }
.popover-romanji { font-family: var(--font-yusei); font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--terra-light); margin-bottom: 0.85rem; }
.popover-def { font-family: var(--font-condensed); font-weight: 300; font-size: 18px; line-height: 1.5; color: rgba(var(--grey-wisp-rgb),0.75); }

.flag { font-family: var(--font-yusei); font-size: 12px; letter-spacing: 0.08em; padding: 0.25rem 0.6rem; border: 1px solid rgba(192,57,43,0.25); border-radius: var(--radius-pill); color: var(--terra); background: transparent; cursor: help; transition: color 0.25s, border-color 0.25s, background 0.25s; -webkit-appearance: none; appearance: none; outline: none; }
.flag:hover { color: var(--terra); border-color: var(--terra); background: rgba(192,57,43,0.05); }
.flag:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.flag[aria-expanded="true"] { color: var(--terra); border-color: var(--terra); background: rgba(192,57,43,0.08); }
.flag--dark { border-color: rgba(var(--grey-wisp-rgb),0.2); color: rgba(var(--grey-wisp-rgb),0.55); cursor: help; }
.flag--dark:hover { color: var(--grey-wisp); border-color: var(--grey-wisp); background: rgba(var(--grey-wisp-rgb),0.05); }
.flag--dark[aria-expanded="true"] { color: var(--grey-wisp); border-color: var(--grey-wisp); background: rgba(var(--grey-wisp-rgb),0.08); }

/* ── TEXT LINKS ── */
.text-link {
  color: #1a1a18;
  text-decoration: underline;
  text-decoration-color: rgba(26,26,24,0.35);
  text-underline-offset: 2px;
  transition: color 0.25s, text-decoration-color 0.25s;
}
.text-link:hover { color: var(--terra); text-decoration-color: var(--terra); }
.text-link:active { color: var(--terra-dark); text-decoration-color: var(--terra-dark); }
.text-link:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-radius: 2px; }
.text-link:visited { color: #555; text-decoration-color: rgba(85,85,85,0.35); }

.cover-link {
  color: rgba(var(--grey-wisp-rgb),0.88);
  text-decoration: underline;
  text-decoration-color: rgba(var(--grey-wisp-rgb),0.35);
  text-underline-offset: 2px;
  transition: color 0.25s, text-decoration-color 0.25s;
}
.cover-link:hover { color: var(--terra-light); text-decoration-color: var(--terra-light); } /* rollover accent for grey-wisp text on dark panels — terra-light reads better against dark backgrounds than full terra */
.cover-link:focus-visible { outline: 2px solid var(--grey-wisp); outline-offset: 2px; border-radius: 2px; }

.prose-link, .policy-email {
  color: rgba(var(--grey-wisp-rgb),0.88);
  text-decoration: underline;
  text-decoration-color: rgba(var(--grey-wisp-rgb),0.3);
  text-underline-offset: 2px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.prose-link:hover, .policy-email:hover { color: #ffffff; text-decoration-color: rgba(var(--grey-wisp-rgb),0.7); }

/* ── BREADCRUMB (grandchild pages only — parent-type link, no "Home") ── */
.breadcrumb { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.breadcrumb-link { font-family: var(--font-yusei); font-size: 10px; letter-spacing: 0.1em; color: rgba(26,26,24,0.65); text-decoration: none; text-transform: uppercase; transition: color 0.2s; }
.breadcrumb-link:hover { color: var(--terra); }

/* ── PAGE TOPBAR (logo, floats over panel padding) ── */
.page-topbar { position: absolute; top: 0.85rem; left: 1.25rem; z-index: 10; display: flex; align-items: center; gap: 0.65rem; pointer-events: all; }
.panel-logo { width: 50px; height: 50px; object-fit: contain; flex-shrink: 0; display: block; }

/* ── STICKY BOOKEND COLUMN — shared by all 3 page types. The illustration
   itself (e.g. about-us.html's armadillo) is just a different <img src> on
   the same markup, not a different class. Each type's own section below
   still owns when its bookends show/hide, since that follows each type's
   own breakpoints. ── */
.panel-bookend { position: relative; overflow: hidden; background: #1C1E40; }
.panel-bookend img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.panel-bookend::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,  rgba(15,16,32,0.3) 0%, transparent 45%),
    linear-gradient(to left,   rgba(15,16,32,0.3) 0%, transparent 45%),
    linear-gradient(to bottom, rgba(15,16,32,0.25) 0%, transparent 25%),
    linear-gradient(to top,    rgba(15,16,32,0.25) 0%, transparent 30%);
  pointer-events: none;
}
@media (min-width: 1999px) {
  .panel-bookend { position: sticky; top: 0; height: calc(100vh - 36px); align-self: start; }
}

/* ══════════════════════════════════════════════════════════════════════
   TYPE 1 SHELL — 5-PANEL BROCHURE (index.html, about-us.html)
   5 columns at ultrawide (2 image bookends + 3 content panels), collapsing
   to 3 at desktop, 2 at tablet, 1 at mobile. Panel background colors and
   any page-specific spacing stay in each page's own <style> block.
   NOTE: .shell and its height/overflow toggle just below apply to EVERY
   page type, not just Type 1 — don't scope them to .brochure, or Type 2/3
   will break. ══════ */
html, body { height: 100%; overflow: hidden; font-size: 120%; }
body { font-family: var(--font-condensed); color: var(--grey-wisp); background: var(--ink); }

.shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.brochure {
  display: grid;
  width: 100%;
  flex: 1;
  min-height: 0;
  height: calc(100vh - 36px);
  gap: var(--panel-gap);
  background: var(--ink);
  align-items: stretch;
  /* Containing block for the page's <header class="page-topbar"> (a direct
     child, positioned absolute) at desktop/tablet/mobile — .content-row is
     display:contents there so it has no box of its own to anchor to, and
     .brochure's own box happens to coincide with the first panel's top-left
     corner at those breakpoints (bookends are hidden). At ultrawide,
     .content-row gets the containing-block job instead (see its own rule
     below) since .brochure's box spans the bookends there too. */
  position: relative;
}

/* .content-row wraps the 3 real (non-bookend) panels. Transparent to layout
   (display:contents) below ultrawide, so panels flow directly into
   .brochure's own grid. At ultrawide it becomes a real grid, since nesting
   the panels one level down (in a wrapper with no explicit height) lets
   them stretch to match each other's true content height instead of being
   clamped to .brochure's own fixed viewport height — same pattern as
   basics-of-sake-grades.html's content-stack. */
.content-row { display: contents; }
/* .main-panels is the <main> landmark wrapping the 3 real panels, now
   nested one level inside .content-row (which also holds the page's
   <header class="page-topbar"> as a sibling before it). display:contents
   here transparently flattens the panels up through .main-panels and
   .content-row so they still land as direct grid items of .brochure
   (desktop/tablet/mobile) or of the ultrawide .content-row grid, exactly
   as before <main> was introduced — <main> itself never gets its own box,
   so it can't disturb either grid's column math. */
.main-panels { display: contents; }
@media (min-width: 1200px) and (max-width: 1998px) {
  /* height: auto here matters — the base .brochure rule below sets a fixed
     height: calc(100vh - 36px) for the ultrawide layout, and min-height
     alone doesn't undo a fixed height. Without this, the grid row (and the
     panels stretched to fill it) got clamped to one viewport-height instead
     of growing with real content. */
  .brochure { grid-template-columns: 1fr 1fr 1fr; height: auto; min-height: calc(100vh - 36px); }
  .brochure .panel-bookend { display: none; }
  html, body { overflow: auto; height: auto; }
  .shell { height: auto; overflow: visible; }
  /* .panel's own overflow:visible override for THIS bucket lives further
     down, merged into a @media(min-width:1200px)and(max-width:1998px)
     block that sits after .panel's base rule — same reason as the
     ultrawide note below: at equal specificity, source order wins over
     media-query nesting, so a rule placed up here would lose the cascade
     to the base .panel rule (which comes later in the file) and silently
     do nothing. This is what let individually-scrolling panels sneak back
     in even though a fix was sitting right here. */
  .site-footer { position: sticky; bottom: 0; }
}
@media (min-width: 1999px) {
  /* 3 columns now, not 5: bookend | content-row | bookend. .brochure
     scrolls as one unit to reveal whatever height the content-row ends up
     needing; .panel-bookend goes sticky (shared component above) so it
     stays pinned through that scroll.
     NOTE: the .panel height/overflow override lives further down, merged
     into the @media(min-width:1999px) block that sits after .panel's base
     rule — for equal specificity, source order wins over media-query
     nesting, so placing it here would lose the cascade. */
  .brochure { grid-template-columns: 1fr 3fr 1fr; overflow-y: auto; }
  /* Takes over as page-topbar's containing block here specifically — this
     is the one breakpoint where .brochure's own box spans the bookend
     columns too, so anchoring to .brochure directly would float the header
     over the left bookend illustration instead of the content. */
  .content-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--panel-gap); min-width: 0; position: relative; }
}
@media (max-width: 1199px) {
  html, body { overflow: auto; height: auto; font-size: 118%; }
  .shell { height: auto; overflow: visible; }
  .brochure { grid-template-columns: 1fr 1fr; flex: none; height: auto; }
  .brochure .panel-bookend { display: none; }
  /* The right bookend reappears here as a closing decorative panel (its
     own 2-column grid cell after the 3 content panels) — deliberate,
     Type-1-only tablet/mobile behavior, not a leftover. */
  .brochure .panel-bookend--right { display: block; }
  /* .panel's own override for THIS bucket lives further down too, after the
     base rule — see the note in the 1200-1998px bucket above. */
  .site-footer { position: sticky; bottom: 0; }
}
@media (max-width: 699px) {
  .brochure { grid-template-columns: 1fr; }
}

.panel {
  padding: 4.5rem 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(176,88,56,0.25) transparent;
}
.panel::-webkit-scrollbar { width: 4px; }
.panel::-webkit-scrollbar-thumb { background: rgba(176,88,56,0.25); border-radius: 2px; }
.panel::-webkit-scrollbar-track { background: transparent; }
.panel:not(.panel-bookend)::before {
  content: '';
  position: absolute; top: 0; bottom: 0; right: 0; width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(184,92,56,0.12) 20%, rgba(184,92,56,0.2) 50%,
    rgba(184,92,56,0.12) 80%, transparent 100%
  );
  pointer-events: none; z-index: 2;
}
@media (min-width: 1200px) and (max-width: 1998px) {
  /* Must stay AFTER the base .panel rule above — at equal specificity the
     later rule wins regardless of @media order, so this exact override
     placed up in the earlier @media block (next to .brochure/.shell/etc.)
     was silently losing to the base rule and doing nothing.
     overflow: visible (both axes), not just overflow-y — per the CSS
     Overflow spec, if overflow-x is anything other than visible (it's
     hidden on the base .panel rule above) and overflow-y is visible, the
     computed value of overflow-y silently downgrades to auto instead. */
  .panel { overflow: visible; min-height: 0; }
}
@media (max-width: 1199px) {
  /* Same cascade-order fix as the bucket above. */
  .panel { min-height: 50vh; overflow: visible; padding: 4.5rem 1.75rem 2.5rem; }
}
@media (min-width: 1999px) {
  /* Both axes need to be visible — per the CSS Overflow spec, overflow-x
     and overflow-y can't be split visible/non-visible; leaving overflow-x
     hidden silently forces overflow-y back to auto too. */
  .panel { padding: 4.5rem 2.7rem 2.5rem; height: auto; overflow: visible; }
}

/* ── IN-COPY TEXT HIGHLIGHT ── */
.highlight { background: rgba(249,154,25,0.14); }

/* ── FISHEYE BULLET LIST — U+25C9 ◉, rendered in --font-jp for consistent
   glyph support, always terra-light regardless of the panel background it
   sits on. Reusable anywhere a list needs this exact marker. ── */
.list-fisheye { list-style: none; margin: 0; padding: 0; }
.list-fisheye li { position: relative; padding-left: 1.6em; }
.list-fisheye li + li { margin-top: 0.6em; }
.list-fisheye li::before {
  content: '\25C9';
  font-family: var(--font-jp);
  color: var(--terra-light);
  position: absolute; left: 0; top: 0;
  line-height: inherit;
}

/* ── JOURNAL TEASER LABEL — same visual treatment as .also-like-label
   (yusei, terra-light, uppercase), but its own class since it sits above
   a .journal-card rather than an .also-like card. ── */
.journal-teaser-label {
  font-family: var(--font-yusei);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-light);
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   TYPE 2 SHELL — CENTER-COLUMN ROLLUP BROCHURE
   (sake-journal.html, sake-vocabulary.html, website-tenets.html,
   privacy-policy.html, terms-of-use.html)
   3 columns at ultrawide — 2 sticky bookends (.panel-bookend above) + 1
   scrolling content column — collapsing to a single column below that.
   NOTE: .rollup-hero stays page-scoped — its padding (and, on
   sake-journal.html, extra flex-centering) genuinely varies per page. ══════ */
.brochure-rollup {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  flex: 1;
  min-height: calc(100vh - 36px);
  gap: var(--panel-gap);
  background: var(--ink);
}
@media (min-width: 1999px) {
  /* .shell clips anything taller than the viewport at ultrawide (see TYPE
     1 SHELL above) unless this element provides its own scroll. */
  .brochure-rollup { overflow-y: auto; height: calc(100vh - 36px); }
}
@media (max-width: 1998px) {
  .brochure-rollup { grid-template-columns: 1fr; }
  .panel-bookend { display: none; }
}