/* ============ HEADER / MASTHEAD (NYT front page) ============ */
.site-header { background: var(--ink); position: relative; z-index: 2; }
.masthead { padding-top: 12px; }
.dateline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px;
  font-family: var(--label); text-transform: uppercase; letter-spacing: .06em; font-size: .6rem; font-weight: 600; color: var(--muted);
  padding-bottom: 11px; }
.dateline span:nth-child(2) { color: var(--cream); }
.section-nav { display: flex; flex-wrap: wrap; justify-content: center;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line); }
.section-nav a { font-family: var(--label); text-transform: uppercase; letter-spacing: .08em;
  font-size: .7rem; font-weight: 600; color: var(--cream); padding: 11px 18px; transition: color .15s, background .15s; }
.section-nav a + a { border-left: 1px solid var(--line); }
.section-nav a:hover { color: var(--accent); background: var(--ink-2); }
.nameplate { display: block; text-align: center; padding: 20px 0 22px; }
.nameplate img { display: block; width: auto; height: clamp(30px, 4.8vw, 50px);
  max-width: 100%; margin: 0 auto; }

/* ============ HERO (photo background) ============ */
.hero { position: relative; z-index: 2; min-height: clamp(520px, 76vh, 780px); display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; background: #1a1714 url("../images/hero-brewery-dusk.png") center/cover no-repeat; }
.hero-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,7,.52) 0%, rgba(8,8,7,.30) 42%, rgba(8,8,7,.66) 100%); }
.hero-inner { position: relative; z-index: 1; max-width: 900px; text-align: center; padding-block: clamp(56px, 10vw, 100px); }
.hero-inner .kicker { display: block; color: #fff; opacity: .95; margin-bottom: 16px; }
.hero h1 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.2rem); margin: 0 auto 16px; max-width: 18ch; }
.hero-byline { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em;
  font-size: .64rem; font-weight: 600; color: rgba(255,255,255,.82); margin: 0 auto 22px;
  display: inline-block; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.35); }
.hero .lead { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: rgba(255,255,255,.9); max-width: 58ch; margin: 0 auto; line-height: 1.5; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.hero .btn-primary { background: #fff; color: #121212; }
.hero .btn-primary:hover { background: rgba(255,255,255,.85); }
.hero .btn-outline { border-color: rgba(255,255,255,.6); color: #fff; }
.hero .btn-outline:hover { background: #fff; color: #121212; border-color: #fff; }

/* ============ STATS ============ */
.stats { background: var(--ink-2); border-bottom: 1px solid var(--line-strong); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding: 28px 14px; border-right: 1px solid var(--line); }
.stat:nth-child(2n) { border-right: 0; }
@media (min-width: 760px) { .stat { border-right: 1px solid var(--line); } .stat:last-child { border-right: 0; } }
.stat strong { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--cream); letter-spacing: -.02em; }
.stat span { font-family: var(--label); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* founding-stories grid sits right under the stats band — trim top padding (no header) */
#houses { padding-top: clamp(36px, 4.5vw, 52px); }
#timeline { padding-block: clamp(52px, 7vw, 84px); background: var(--ink-2); border-block: 1px solid var(--line-strong); }
#timeline .section-head { border-top: 0; padding-top: 0; }

/* ============ HERITAGE ============ */
.heritage { background: var(--ink-2); border-block: 1px solid var(--line-strong); }
.heritage-grid { display: grid; gap: clamp(34px, 5vw, 56px); }
@media (min-width: 860px) { .heritage-grid { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.heritage-lead .block-label { display: block; margin-bottom: 14px; }
.heritage-lead h2 { margin-bottom: 20px; max-width: 16ch; }
.heritage-lead p { max-width: 54ch; margin-top: 16px; }

/* ============ CTA (dark) ============ */
.cta-band { background: #161412; color: #ededec; }
.cta-inner { padding-block: clamp(56px, 8vw, 96px); text-align: center; display: grid; gap: 14px; justify-items: center; }
.cta-inner h2 { max-width: 18ch; color: #fff; }
.cta-inner p { color: rgba(255,255,255,.72); max-width: 46ch; }
.cta-inner .btn { margin-top: 14px; }
.cta-band .btn-primary { background: #fff; color: #161412; }
.cta-band .btn-primary:hover { background: rgba(255,255,255,.86); }

/* ============ FOOTER / COLOPHON (dark) ============ */
.site-footer { background: #161412; border-top: 1px solid rgba(255,255,255,.12); padding-top: 52px; position: relative; z-index: 2; }
.colophon { display: grid; gap: 28px 24px; padding-bottom: 36px; }
@media (min-width: 680px) { .colophon { grid-template-columns: 1.3fr 1.4fr 1fr; align-items: start; } }
.colophon-brand .brand-text { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; color: #fff; }
.colophon-brand p { margin-top: 10px; max-width: 34ch; color: rgba(255,255,255,.5); }
.footer-col-label { display: block; font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.55); margin-bottom: 13px; }
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-links[aria-label="Breweries"] { display: grid; grid-template-columns: max-content max-content; gap: 11px 20px; }
.footer-col:has(nav[aria-label="Breweries"]) { width: max-content; }
.footer-col:has(nav[aria-label="Breweries"]) .footer-col-label { text-align: center; padding-right: 64px; letter-spacing: .16em; }
.footer-links a { font-family: var(--label); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: rgba(255,255,255,.8); transition: color .15s; }
.footer-links a:hover { color: #fff; }
.colophon-foot { border-top: 1px solid rgba(255,255,255,.1); padding-block: 24px 34px; display: grid; gap: 12px; }
.disclaimer { font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.55; max-width: 92ch; }
.copy { font-family: var(--label); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.5); }
.footer-address { font-style: normal; font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.55; }
.footer-address a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .15s; }
.footer-address a:hover { color: #fff; }