/* ==========================================================================
   Maresme Brewery — demo site
   Design tokens are lifted from the brewery's own site so this reads as them:
   Anonymous Pro (mono) for body, Figtree for headings, #fcfcfc paper on
   #020912 ink, and every corner square. All photography is theirs.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  color-scheme: light;

  --paper:   #fcfcfc;
  --ink:     #020912;
  --ink-80:  rgba(2, 9, 18, .80);
  --ink-62:  rgba(2, 9, 18, .62);
  --ink-45:  rgba(2, 9, 18, .45);
  --rule:    rgba(2, 9, 18, .16);
  --rule-soft: rgba(2, 9, 18, .09);
  --wash:    #f2f1ee;
  --untappd: #ffc000;
  /* The site's first status color — until now there wasn't one (see the
     style guide's color section). Reserved for exactly two things: an
     out-of-stock beer and a form error. */
  --danger:  #E75A7C;

  --paper-on-ink:    rgba(252, 252, 252, .92);
  --paper-on-ink-62: rgba(252, 252, 252, .60);
  --rule-on-ink:     rgba(252, 252, 252, .22);

  --mono: "Anonymous Pro", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Figtree, ui-sans-serif, system-ui, -apple-system, sans-serif;

  --page: 1400px;
  --gut: 40px;
}

html { background: var(--paper); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-80);
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing — the width/height attributes on every <img>
   reserve layout space, and without this the attribute height wins over a
   CSS width and the photograph comes out stretched */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- shared type roles -------------------------------------------------- */

/* the small mono all-caps label used as a section eyebrow throughout */
.eyebrow {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.eyebrow--onink { color: var(--paper); }

.lede {
  font-size: 20px;
  line-height: 1.75;
  color: var(--ink-62);
  max-width: 58ch;
}

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: transparent; color: var(--ink); }

/* Sold-out state — the only disabled button on the site. Fills with the
   danger color instead of ink so it reads as unavailable, not just inactive,
   and never inverts on hover the way a real button does. */
.btn[disabled] {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--ink);
  cursor: not-allowed;
}
.btn[disabled]:hover { background: var(--danger); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--onink { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--onink:hover { background: transparent; color: var(--paper); }

.btn--ghost-onink { background: transparent; border-color: var(--rule-on-ink); color: var(--paper); }
.btn--ghost-onink:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* the site's signature accent: whatever color is currently highlighting
   "Maresme" in the homepage headline (set by the inline gate script in each
   page's <head>, rotating on every page load). Applied to the handful of
   primary CTA buttons called out across the site so they all move together;
   the fallback color is only ever seen if that script fails to run. */
.btn--accent { background: var(--hero-name-color, #9AD2CB); border-color: var(--hero-name-color, #9AD2CB); color: var(--ink); }
.btn--accent:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* the underlined mono link used for tertiary actions */
.tlink {
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: border-color .18s ease;
}
.tlink:hover { border-color: var(--ink); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #FFFFFF;
  /* own layer at first paint — iOS mispaints lazily-promoted sticky bars */
  transform: translateZ(0);
}

.site-head__in {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 24px;
  padding-bottom: 16px;
}

.brand { flex: none; display: block; }
.brand img {
  height: 52px;
  width: auto;
  /* logo ships as black-on-white JPEG; multiply drops the white box */
  mix-blend-mode: multiply;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-inline-start: 8px;
}
.nav a {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink-62);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.head-end {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-45);
}
.lang button {
  appearance: none;
  border: 0;
  background: none;
  padding: 2px 0;
  font: inherit;
  color: var(--ink-45);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.icon-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 6px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
}
.icon-btn svg { width: 24px; height: 24px; display: block; }

.cart-btn { position: relative; }
.cart-count {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 22px; height: 22px;
  padding: 0 5px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
.cart-count[hidden] { display: none; }

.burger { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  overflow: hidden;
}
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 64px;
  align-items: center;
  padding-block: 88px 96px;
}

.hero h1 {
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -.035em;
}
/* highlight color set per visit by the inline script in index.html's
   <head> — the var's fallback is only ever seen if that script fails to
   run. Text stays the heading's own ink color; only the background rotates. */
.hero-name {
  color: var(--ink);
  background-color: var(--hero-name-color, #9AD2CB);
  padding: 0 .06em;
  margin: 0 -.06em;
}
/* the second line is a subtitle, not a second headline — held well below the
   H1 so the two don't read as equal weight */
.hero h1 em {
  font-style: normal;
  font-family: var(--mono);
  font-weight: 700;
  display: block;
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--ink-62);
  margin-top: 20px;
  max-width: none;
}

.hero__rule {
  width: 96px;
  height: 2px;
  background: var(--ink);
  margin: 32px 0 24px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}
/* The widget auto-matches "Shop the beer" (.btn--accent, the page's most
   prominent filled button) rather than the plain outlined .btn--ghost look
   the other secondary buttons on this row use — a filled swatch reads more
   like a second "buy" button than a secondary action next to it. Rebuilt
   here as .btn--ghost's own look (transparent, ink border/text, inverts on
   hover) instead of the widget's auto-detected fill. Its detector also only
   reads a handful of properties even for what it does match: .btn's real
   52px height comes from min-height + flex centering and its
   uppercase/tracked look from text-transform/letter-spacing, neither of
   which the widget's own button rule applies on its own. Set directly here
   rather than in the shared widget file, which every other client's live
   site also loads. Also resets the widget's own inline left/right margins,
   which otherwise push it away from the button beside it instead of sitting
   in this row's own 12px gap. */
.hero__cta > .openfront-tables { margin-left: 0 !important; margin-right: 0 !important; }
.hero__cta > .openfront-tables .ofs-reserve-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; text-transform: uppercase; letter-spacing: .08em;
  background: transparent; border: 1px solid var(--ink); color: var(--ink);
  transition: background .18s ease, color .18s ease;
}
.hero__cta > .openfront-tables .ofs-reserve-btn:hover {
  background: var(--ink); color: var(--paper);
}

/* Their product shots each carry their own backdrop (soft grey on Calima, a
   hot gradient on Supernova), so they're framed as photographs rather than
   knocked out — a blend mode can't remove a coloured background, it just
   leaves a dirty box. */
.hero__art { position: relative; }
.hero__art img { width: 100%; height: auto; }
.hero__cap {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* ==========================================================================
   Proof band — the real Untappd / taproom numbers
   ========================================================================== */

.band {
  background: var(--ink);
  color: var(--paper-on-ink);
}
/* dividers come from borders on the cells, not a background showing through a
   1px gap — the gap trick leaks grey into the wrap's side padding */
.band__in {
  display: grid;
  grid-template-columns: repeat(var(--band-cols, 4), 1fr);
}
.band__in--3 {
  grid-template-columns: repeat(3, 1fr);
}
.stat {
  padding: 44px 28px;
  text-align: center;
  border-left: 1px solid var(--rule-on-ink);
}
.stat:first-child { border-left: 0; }
.stat__n {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1;
  color: var(--paper);
  letter-spacing: -.03em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.stat__n .u {
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0;
  color: var(--untappd);
}
.stat__l {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
}

/* ==========================================================================
   Generic section scaffolding
   ========================================================================== */

.sec { padding-block: 104px; }
.sec--tight { padding-block: 80px; }
.sec--ink { background: var(--ink); color: var(--paper-on-ink); }
.sec--wash { background: var(--wash); }
.sec + .sec:not(.sec--ink):not(.sec--wash) { border-top: 1px solid var(--rule); }

/* Legibility rule (Erik, 2026-08-06): every dark/black surface on the site
   bolds its text by default — .sec--ink, .band and .beer__foot join
   .site-foot (which sets its own bold further down) here.
   Anything nested inside that already carries its own explicit weight
   (buttons, eyebrow labels, stat labels) is untouched since it's 700+
   already; anything that had a LIGHTER explicit weight blocking this — the
   headings, the stat number, the price on a beer card's dark footer — got
   its own weight bumped to 700 at its own rule, right where it's defined,
   rather than fighting this one from a distance. */
.sec--ink, .band, .beer__foot {
  font-weight: 700;
}

.sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.sec__head h2 {
  font-size: clamp(32px, 4vw, 48px);
  margin-top: 14px;
}
.sec--ink .sec__head h2 { color: var(--paper); font-weight: 700; }

.sec__cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ==========================================================================
   Beer grid
   ========================================================================== */

/* Rules are drawn on the cards, not by letting a container background show
   through 1px gaps — a part-full last row would otherwise leave grey
   phantom cells where there is no card. */
.beers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  border-top: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
}

.beer {
  background: var(--paper);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
  text-decoration: none;
  position: relative;
  transition: background .18s ease;
}
.beer:hover { background: #fff; }

/* Every beer/product grid on the site uses this modifier — spaced cards,
   each bordered on its own, is the only allowed layout (site-wide rule, set
   after the homepage/brewery/community strips used to render with cards
   sharing edges and no gap between them). The plain .beers rule above still
   carries the old shared-edge lattice (border-top/left on the grid,
   border-right/bottom on each card) only because .beers--catalog needs a
   base to override — nothing renders it bare anymore, and no new grid
   should ever drop this modifier to get it back. */
.beers--catalog {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  border-top: 0;
  border-left: 0;
}
/* Drawn as an overlay, not a plain border, because the photo below bleeds
   all the way to the card's outer edge (see .beer__shot) and would paint
   right over a real border on the top/left/right sides — the card would
   read as bordered on paper but show no line where it actually matters.
   The overlay paints after the photo, so the line wraps the whole card,
   photo included, on all four sides. */
.beers--catalog .beer::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--rule-soft);
  pointer-events: none;
}

/* Bleeds to the top/left/right edges of the card (cancelling the card's own
   28px padding AND its 1px border with matching negative margins, same
   trick as .beer__foot below) while keeping the 24px gap to the text
   underneath untouched. .beer always carries its own 1px border-right (the
   shared-border lattice on the non-catalog grids), so the right side needs
   an extra 1px everywhere; the catalog variant below also self-borders its
   top/left, so those need the same extra 1px there specifically. */
.beer__shot {
  aspect-ratio: 1;
  display: block;
  margin: -28px -29px 24px -28px;
  overflow: hidden;
  background: var(--wash);
}
.beers--catalog .beer__shot {
  margin: -29px -29px 24px;
}
/* every catalogue shot is already square, so cover fills the tile without
   cropping anything off */
.beer__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.2, .8, .3, 1);
}
.beer:hover .beer__shot img { transform: scale(1.04); }

.beer__style {
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.beer__name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 8px 0 14px;
  line-height: 1.15;
}

.beer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 14px;
  color: var(--ink-45);
  margin-bottom: 18px;
}

/* Full-bleed footer — runs edge-to-edge within the card, so it cancels out
   the card's own padding (28px sides / 24px bottom) with matching negative
   margins rather than sitting inset like the rest of the card content. */
.beer__foot {
  margin: auto -28px -24px;
  padding: 20px 28px 22px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.beer__price {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--paper);
}
.beer__price s { color: var(--paper-on-ink-62); margin-inline-end: 6px; }

/* Rating stars — the one place colour is allowed in */
.score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--paper-on-ink-62);
  white-space: nowrap;
}
.score svg {
  width: 16px; height: 16px;
  fill: var(--untappd);
  flex: none;
}
.score b { font-weight: 700; color: var(--paper); }

/* .beers--catalog shows the rating and price bigger/bolder than the plain
   .beers strip. Every beer/product grid on the site carries this modifier
   now — the full catalogue (beers.html), the homepage's 3-up pick, the beer
   detail page's "rest of the range" strip, the brewery page's range, and
   the community page's two-can list. */
.beers--catalog .beer__price {
  font-weight: 900;
}
.beers--catalog .score {
  font-size: 16px;
  gap: 8px;
}
.beers--catalog .score svg {
  width: 20px;
  height: 20px;
}

.flag {
  position: absolute;
  top: 0; right: 0;
  padding: 6px 12px;
  background: var(--danger);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.flag--soft { background: var(--wash); color: var(--ink-62); }

/* ==========================================================================
   Split feature (taproom, two homes, community)
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
  align-items: center;
}
.split--flip .split__media { order: 2; }

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.split__media--contain img { aspect-ratio: 1; object-fit: cover; }

.split h2 {
  font-size: clamp(32px, 4vw, 48px);
  margin: 16px 0 28px;
}
.sec--ink .split h2 { color: var(--paper); font-weight: 700; }
.sec--ink .lede { color: var(--paper-on-ink-62); }

.split__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }

/* key / value list used for address + hours */
.facts {
  margin: 40px 0 0;
  border-top: 1px solid var(--rule);
}
.sec--ink .facts { border-color: var(--rule-on-ink); }
.facts > div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.7;
}
.sec--ink .facts > div { border-color: var(--rule-on-ink); }
.facts > div.no-rule { border-bottom: none; }
.facts dt {
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-45);
  padding-top: 3px;
}
.sec--ink .facts dt { color: var(--paper-on-ink-62); font-weight: 700; }
.facts dd { margin: 0; color: var(--ink); }
.sec--ink .facts dd { color: var(--paper); font-weight: 700; }
/* .hours-row: day left, time right, so the times line up in a column
   instead of trailing right after each day at a ragged width */
.facts dd .hours-row { display: flex; justify-content: space-between; gap: 16px; }
.addr-link {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--ink-45);
  text-underline-offset: 3px;
}
.addr-link:hover { text-decoration-color: currentColor; }
.sec--ink .addr-link { text-decoration-color: var(--paper-on-ink-62); }

/* Book-a-table page only: the hours/finding-us column shares the page-head's
   row instead of the reserve widget's, so "Opening hours" lines up with the
   street eyebrow above the widget; the widget itself sits a fixed 48px
   below the intro copy. */
.split.book-hero { align-items: start; }
.book-hero__widget { margin-top: 48px; }
.page-head.book-page-head { padding-bottom: 72px; }
.book-group-note { margin-top: 48px; }

/* "Two homes" section on the brewery page: the taproom column has an extra
   "Visit the taproom" link the brewery column doesn't, so the default
   center alignment (meant for pairing a photo with shorter text) pushed the
   shorter brewery column down to stay centered against the taller one. Top
   alignment keeps "The brewery"/"The taproom" and the two place names level
   with each other; the taproom's extra link is left to run on past the
   brewery column's shorter text, which is fine. */
.split.two-homes { align-items: start; }

/* ==========================================================================
   Community pull-quote
   ========================================================================== */

.quote {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.22;
  letter-spacing: -.025em;
  color: var(--ink);
  max-width: 20ch;
}

.cite {
  margin-top: 20px;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* the home page's community-section quote, framed in its own box — a dark
   border and square corners, same as the buttons and the .propose-widget
   card elsewhere on this site. Scoped to this one instance (not the base
   .quote) since community.html's quote is a different component already —
   a colored box with no border, part of the "how it works" pair of boxes
   (Erik, 2026-08-07). */
.quote--framed {
  margin-left: 0;
  margin-right: 0;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 32px 36px;
}

/* ==========================================================================
   How-it-works — two boxes, one the pull-quote and one the three steps,
   that slide in from opposite sides of the screen and settle overlapping
   slightly with one sitting a little higher than the other (Erik,
   2026-08-07: "coming from the left and the right side, and they meet in
   the middle"). Separation between the two is carried entirely by their
   own background colors, never a shadow — this codebase never uses drop
   shadows, on this site or any other page.

   The quote box's color comes from the accent rotation (see the inline
   script at the top of community.html) and changes on every reload, always
   picked to differ from whatever color the hero "Five cents" text is
   showing on that same visit.

   The steps box sits on top of the quote box in the overlap, not the other
   way around (Erik, 2026-08-08): its own content — the ONE/TWO/THREE
   labels — starts flush against its own left edge, so being underneath
   put the quote box's background right over those labels (confirmed and
   fixed once already). The quote box's blockquote is capped at 20ch and
   left-aligned, so it always leaves empty color to spare on its own right
   edge — that's the space the overlap eats into now, never actual words.

   .hiw-pending is added to <html> only by that same inline script, before
   first paint, and removed by howItWorksReveal() in main.js once the
   section scrolls into view — see the comment there for why it's done this
   way instead of hiding the boxes by default. */
.hiw-boxes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.hiw-box {
  flex: 1 1 380px;
  min-width: 0;
  padding: 48px 44px;
  transition: transform .8s cubic-bezier(.16, .84, .32, 1), opacity .6s ease;
}
.hiw-box--quote {
  background: var(--quote-box-color, #9AD2CB);
  color: var(--ink);
  margin-right: -18px;
  z-index: 1;
}
.hiw-box--steps {
  background: var(--ink);
  color: var(--paper-on-ink);
  font-weight: 700;
  margin-top: 64px;
  margin-left: -18px;
  z-index: 2;
}
.hiw-box--steps .eyebrow,
.hiw-box--steps h2 { color: var(--paper); }
.hiw-box--steps .facts,
.hiw-box--steps .facts > div { border-color: var(--rule-on-ink); }
.hiw-box--steps .facts dt { color: var(--paper-on-ink-62); font-weight: 700; }
.hiw-box--steps .facts dd { color: var(--paper); font-weight: 700; }
.hiw-box--steps .lede { color: var(--paper-on-ink-62); }

html.hiw-pending .hiw-box--quote { transform: translateX(-160px); opacity: 0; }
html.hiw-pending .hiw-box--steps { transform: translateX(160px); opacity: 0; }

/* Propose-an-org widget + the "5c" figure. The widget sits in its own boxed
   card (same border/padding/background the old mockup form used, so the
   real widget drops into the identical footprint) with a higher z-index than
   the figure column. The figure's gray circle bleeds left past its own
   column into the gap, so the card's opaque background covers the part of
   the circle that lands underneath it — the circle reads as tucked in
   behind the widget rather than as a separate shape floating beside it. */
.split--propose { position: relative; }
.propose-widget {
  position: relative;
  z-index: 2;
  border: 1px solid var(--rule);
  padding: 40px;
  background: var(--paper);
}
/* The widget tries to match whatever card/border/color pattern it can find
   near it on the page — normally a nice touch, but next to this section's
   round wash-colored "5c" circle it was picking up the CIRCLE as if it were
   a card: its pale wash fill and its fully round edges, plus extra inner
   spacing on top of this box's own 40px padding. That's what made the form
   look faded and blobby instead of like a plain card. Pinned back to this
   site's own plain values — a flat paper background (this wrapper already
   supplies the card), square corners, no added inner spacing, and the same
   line/ink colors + dark button every other form and button on this site
   uses — so it always renders the same way regardless of what's next to it. */
.propose-widget .openfront-inquiries {
  --of-max-width: none;
  --of-card-bg: transparent !important;
  --of-card-border: none !important;
  --of-card-shadow: none !important;
  --of-card-radius: 0 !important;
  --of-card-pad: 0 !important;
  --of-text: var(--ink) !important;
  --of-text-muted: var(--ink-45) !important;
  --of-field-bg: var(--paper) !important;
  --of-field-border-color: var(--rule) !important;
  --of-accent: var(--ink) !important;
  --of-btn-text: var(--paper) !important;
}
.propose-figure { position: relative; z-index: 1; }
.propose-figure__circle {
  position: absolute;
  top: 50%;
  left: -170px;
  z-index: 0;
  width: 380px;
  height: 380px;
  max-width: 60vw;
  max-height: 60vw;
  border-radius: 50%;
  background: var(--wash);
  transform: translateY(-50%);
}
.propose-figure .figure-xl { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .propose-figure__circle { left: 50%; top: -40px; transform: translate(-50%, -55%); }
}

/* the big "5 cents" figure */
.figure-xl {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(80px, 14vw, 180px);
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--ink);
}
.figure-xl small {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-top: 20px;
  line-height: 1.6;
}

/* the "5c" figure on the home page's community section, set inside its own
   green circle (a coin, since this is literally about five cents) — a
   fixed green rather than the rotating hero accent color, since this one
   needs to always read as green. Centered in its own column so the coin
   sits closer to the middle of the screen instead of flush against the
   left edge (Erik, 2026-08-06). */
.community-figure {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.community-figure__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(220px, 24vw, 310px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #9AD2CB;
  /* the coin slides in from off the left edge of the screen and sharpens
     into focus as the section scrolls up to meet it (see
     communityCoinReveal in main.js), rather than just appearing here
     already in place — --enter-x/--enter-blur are how far left and how
     blurred it currently is, both counting down to 0 as you scroll.
     Locked at 0/0 (no motion, no blur) under reduced-motion. */
  transform: translateX(var(--enter-x, 0px));
  filter: blur(var(--enter-blur, 0px));
  transition: transform .1s linear, filter .1s linear;
}
.community-figure__num {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(64px, 8.5vw, 120px);
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--ink);
}
.community-figure__caption {
  display: block;
  max-width: 26ch;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-45);
  line-height: 1.6;
  /* the box itself is already centered under the coin by .community-figure's
     align-items:center, but that only centers the box — without this, the
     text inside sits flush against the box's left edge, so a shorter
     second line (wrapped at max-width) reads as pushed left of the coin's
     center (Erik, 2026-08-07). */
  text-align: center;
}

/* ==========================================================================
   Newsletter + footer
   ========================================================================== */

/* The signup form is Frontsill's real Newsletter widget now, not markup of
   our own — see the .openfront-newsletter mount in every page's footer. The
   hand-built .subscribe form that used to live here (and its
   assets/subscribe.js) are gone.

   WHY THIS BLOCK EXISTS. The widget picks its own colours by looking at the
   page it has been dropped into. That works on a normal page and gets this
   one wrong, because the site is light everywhere EXCEPT the footer: left to
   itself the widget sampled the light page and painted itself a pale card in
   the middle of the near-black footer, with body text too faint to read
   against it. It cannot know it is in a dark strip.

   So we tell it. The widget publishes its whole look as --of-* custom
   properties and sets them WITHOUT !important, which is the documented way a
   host site overrides them — so every value below is simply this site's own
   token handed to the widget. Nothing here restyles the widget's internals by
   class name; if it renames something inside, this keeps working.

   Keep these mapped to tokens rather than to literal colours. The accent in
   particular is --hero-name-color, which each page's <head> script rotates on
   every load, so the Subscribe button keeps moving with the rest of the
   site's accent buttons exactly as the old form's did.

   No shadow tokens here, deliberately. */
.site-foot .openfront-newsletter {
  /* the widget's own card: gone, so it sits directly on the footer */
  --of-card-bg: transparent !important;
  --of-card-border: none !important;
  --of-card-radius: 0 !important;
  --of-card-shadow: none !important;
  --of-card-pad: 0 !important;
  --of-max-width: 440px !important;

  /* type: the footer's own ink-on-paper-reversed palette */
  --of-text: var(--paper-on-ink) !important;
  --of-text-muted: var(--paper-on-ink-62) !important;
  --of-heading-color: var(--paper-on-ink) !important;

  /* the heading matches the other footer column headings (BOTIGA, VISITA) */
  --of-heading-font: var(--mono) !important;
  --of-heading-size: 14px !important;
  --of-heading-weight: 700 !important;
  --of-heading-spacing: .16em !important;

  /* the email field: the old form's transparent box with a hairline rule */
  --of-field-bg: transparent !important;
  --of-field-border-color: var(--rule-on-ink) !important;

  /* the button: the site's rotating accent, square, mono, like every other
     primary button on the site (.btn--accent) */
  --of-accent: var(--hero-name-color, #9AD2CB) !important;
  --of-btn-bg: var(--hero-name-color, #9AD2CB) !important;
  --of-btn-text: var(--ink) !important;
  --of-btn-radius: 0 !important;
  --of-btn-font: var(--mono) !important;
  --of-btn-weight: 700 !important;
  --of-btn-transform: uppercase !important;
  --of-btn-spacing: .08em !important;
  --of-btn-padding-y: 16px !important;
  --of-btn-shadow: none !important;
}

/* The two things the widget doesn't expose as a variable. Both are here to
   match the footer's existing type, not to change the widget's layout. */
.site-foot .openfront-newsletter h3 { text-transform: uppercase; }
.site-foot .openfront-newsletter input[type="email"] { padding: 15px 16px; }

.site-foot {
  background: var(--ink);
  color: var(--paper-on-ink-62);
  padding-block: 80px 40px;
  font-weight: 700;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule-on-ink);
}
.foot-grid h3 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-on-ink-62);
  margin-bottom: 20px;
  letter-spacing: .16em;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a { color: var(--paper-on-ink); text-decoration: none; font-size: 15px; }
.foot-grid a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-grid p { font-size: 15px; color: var(--paper-on-ink); }
.foot-grid a.foot-address {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.foot-brand img {
  height: 44px;
  width: auto;
  filter: invert(1) brightness(2);
  mix-blend-mode: screen;
  margin-bottom: 22px;
}

.foot-base {
  padding-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  font-size: 14px;
}
.foot-base a { color: var(--paper-on-ink-62); text-decoration: none; }
.foot-base a:hover { color: var(--paper); }
.foot-base .spacer { margin-inline-start: auto; }

/* ==========================================================================
   Inner-page header block
   ========================================================================== */

.page-head {
  padding-block: 68px 0px;
}
.page-head h1 {
  font-size: clamp(40px, 5.6vw, 72px);
  margin: 0;
}
/* extra clearance above/below the highlighted headline word so it doesn't
   crowd the eyebrow line or the lede paragraph */
.page-head .eyebrow + h1 { margin-top: 20px; }
.page-head h1 + .lede { margin-top: 20px; }
/* brewery.html only: page-head is followed directly by the proof band with
   no section in between, so the gap needs setting here rather than as
   page-head's own bottom padding (which would also affect beers.html and
   community.html, where a different section follows). */
.page-head + .band { margin-top: 60px; }

/* ==========================================================================
   Legal pages (refund / privacy / terms) — a narrow reading column. The body
   text is translated into all three of the site's languages, same as
   everything else on this demo — see "legal.*.body" in site-i18n-dict.js.
   ========================================================================== */

.legal {
  max-width: 68ch;
  padding-block: 48px 96px;
}
.legal p { margin: 0 0 24px; }
.legal p:last-child { margin-bottom: 0; }
.legal h2, .legal h3 {
  font-size: 20px;
  margin: 40px 0 16px;
}
.legal h2 + p, .legal h3 + p { margin-top: 0; }
.legal .legal-updated {
  color: var(--ink-45);
  font-size: 15px;
  margin-bottom: 40px;
}

/* ==========================================================================
   Beer detail
   ========================================================================== */

.detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
  align-items: start;
  padding-block: 72px 96px;
}
.detail__shot { background: var(--wash); }
.detail__shot img { width: 100%; }

.detail h1 { font-size: clamp(32px, 4.4vw, 56px); margin: 12px 0 20px; }

.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  margin: 32px 0;
}
.spec div { background: var(--paper); padding: 22px 20px; text-align: center; }
.spec dt {
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 8px;
}
.spec dd {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -.02em;
}

.buybar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px 0;
  border-block: 1px solid var(--rule);
  margin-bottom: 32px;
}
.buybar__price-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.buybar__price {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 32px;
  color: var(--ink);
  letter-spacing: -.02em;
}
.buybar__per {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-45);
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  height: 52px;
}
.qty button {
  appearance: none;
  width: 46px; height: 100%;
  border: 0; background: none;
  font: inherit; font-size: 18px;
  color: var(--ink);
  cursor: pointer;
}
.qty button:hover { background: var(--wash); }
.qty span { min-width: 34px; text-align: center; font-size: 15px; }

/* ==========================================================================
   Booking form
   ========================================================================== */

.form-card {
  border: 1px solid var(--rule);
  padding: 40px;
  background: var(--paper);
}
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.field textarea { min-height: 108px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--ink);
}
.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.note {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--wash);
  font-size: 14px;
  color: var(--ink-62);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .band__in { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--rule-on-ink); }
}

@media (max-width: 900px) {
  :root { --gut: 24px; }

  .nav { display: none; }
  .burger { display: inline-flex; }
  .lang { display: none; }

  .hero { position: relative; }
  .hero__in { grid-template-columns: 1fr; gap: 40px; padding-block: 56px 64px; }
  .hero h1 { font-size: clamp(56px, 17vw, 92px); }
  /* no can photo on phones — desktop keeps its own side-by-side photograph
     card, untouched */
  .hero__art { display: none; }

  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--flip .split__media { order: 0; }

  /* Stacked full-width and flush — the side-by-side overlap only reads on a
     screen wide enough to show both boxes at once. */
  .hiw-box { flex-basis: 100%; margin: 0; padding: 36px 28px; }
  .hiw-box--quote { margin-bottom: 24px; }
  html.hiw-pending .hiw-box--quote,
  html.hiw-pending .hiw-box--steps { transform: translateY(40px); opacity: 0; }

  .detail { grid-template-columns: 1fr; gap: 40px; padding-block: 48px 72px; }
  .detail__shot { padding: 28px; }

  .beers--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }

  .sec { padding-block: 64px; }
  .sec--tight { padding-block: 48px; }
  .sec__head { margin-bottom: 36px; }
  .page-head { padding-block: 68px 0px; }
  .page-head.book-page-head { padding-bottom: 48px; }

  .form-card { padding: 28px 22px; }
}

@media (max-width: 620px) {
  .beers { grid-template-columns: 1fr 1fr; }
  .beers--catalog { grid-template-columns: 1fr; gap: 24px; }
  .beer { padding: 18px 16px 16px; }
  .beer__shot { margin: -18px -17px 24px -16px; }
  .beers--catalog .beer__shot { margin: -19px -17px 24px; }
  .beer__name { font-size: 18px; }
  .beer__meta { font-size: 14px; }
  .beer__foot { flex-direction: column; align-items: flex-start; gap: 8px; margin: auto -16px -16px; padding: 16px; }

  .band__in { grid-template-columns: 1fr; }
  .stat { padding: 32px 20px; border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--rule-on-ink); }

  .foot-grid { grid-template-columns: 1fr; gap: 36px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .spec { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 8px; }

  /* buttons sized to their own text look ragged once they stack */
  .hero__cta, .split__cta { flex-direction: column; align-items: stretch; }

  .buybar { gap: 14px; }
  .buybar .btn, .buybar .qty { flex: 1 1 auto; }
}

/* --- mobile drawer ------------------------------------------------------ */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--paper);
  padding: 24px var(--gut) 40px;
  overflow-y: auto;
  transform: translateZ(0);
}
.drawer[hidden] { display: none; }
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin-bottom: 32px;
}
.drawer nav { display: grid; }
.drawer nav a {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.drawer__lang {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  padding-top: 24px;
}
.drawer__lang button {
  appearance: none;
  border: 0;
  background: none;
  padding: 4px 0;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-45);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.drawer__lang button:hover { color: var(--ink); }
.drawer__lang button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}