@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;900&family=Fraunces:opsz,wght@9..144,600;9..144,800&family=Big+Shoulders+Display:wght@500;700;800;900&family=Jost:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Space+Mono:wght@400;700&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff;
  color: #111;
  line-height: 1.5;
}

a { color: inherit; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}

.site-nav-wrap,
.site-footer {
  border-bottom: 1px solid #e5e7eb;
}

.site-footer {
  border-top: 1px solid #e5e7eb;
  border-bottom: 0;
}

.site-nav,
.site-footer-inner,
.page {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 20px;
}

.site-nav {
  display: flex;
  gap: 16px;
  align-items: center;
}

.site-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
}
.site-logo {
  display: block;
  width: 40px;
  height: auto;
}
.site-mark-text { line-height: 1; }
.page { padding-top: 28px; padding-bottom: 48px; }
.stack > * + * { margin-top: 16px; }
.card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
}
.muted,
.admin-muted { color: #6b7280; }
.button,
button {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111;
  text-decoration: none;
  cursor: pointer;
}
.button-primary { background: #111; color: #fff; border-color: #111; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

label { display: block; }
input {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
}

.flash {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
}
.flash-success { background: #f0fdf4; }
.flash-error { background: #fef2f2; }

.admin-form-stack,
.inline-form { display: grid; gap: 12px; }
.table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}
.admin-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.admin-setup-grid,
.asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.admin-setup-grid-wide {
  align-items: stretch;
}
.admin-totp-card {
  display: grid;
  gap: 12px;
}
.admin-qr-shell {
  min-height: 244px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fafafa;
  padding: 16px;
}
.admin-qr-shell canvas,
.admin-qr-shell img,
.admin-qr-image {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}
.admin-secret-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.admin-form-stack > .button,
.admin-form-stack > button {
  justify-self: start;
  width: auto;
  min-width: 160px;
}
.admin-copy-button {
  flex: 0 0 auto;
}
.admin-secret-block {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f8fafc;
  padding: 12px;
  overflow-wrap: anywhere;
}
.admin-small {
  font-size: 0.92rem;
}
.asset-card {
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.asset-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f3f4f6;
}
.asset-card figcaption { padding: 12px; }

@media (max-width: 720px) {
  .grid,
  .admin-setup-grid,
  .asset-grid { grid-template-columns: 1fr; }

  .admin-header,
  .admin-secret-row,
  .site-nav { flex-direction: column; align-items: flex-start; }
}

/* Avant Garde proof workspace */

:root {
  --ag-ink: #17100f;
  --ag-cream: #f6ecda;
  --ag-cream-2: #fff8ea;
  --ag-red: #8f171f;
  --ag-red-bright: #bf2029;
  --ag-amber: #f7941d;
  --ag-teal: #00abaf;
  --ag-deep-teal: #0d5659;
  --ag-yellow: #e2c638;
  --ag-muted: #6f6255;
  --ag-border: rgba(23, 16, 15, 0.14);
  --ag-display: 'Fraunces', Georgia, serif;
  --ag-body: 'DM Sans', system-ui, sans-serif;
}

body.page-home,
body.page-option-one {
  font-family: var(--ag-body);
  background:
    radial-gradient(circle at top left, rgba(247, 148, 29, 0.22), transparent 32rem),
    linear-gradient(135deg, rgba(0, 171, 175, 0.08), transparent 34rem),
    var(--ag-cream);
  color: var(--ag-ink);
}

body.page-home .page,
body.page-option-one .page {
  max-width: none;
  padding: 0;
}

body.page-home .site-nav-wrap,
body.page-option-one .site-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 236, 218, 0.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ag-border);
}

body.page-home .site-nav,
body.page-option-one .site-nav,
body.page-home .site-footer-inner,
body.page-option-one .site-footer-inner {
  max-width: 1180px;
  padding: 18px 24px;
}

body.page-home .site-mark,
body.page-option-one .site-mark {
  font-family: var(--ag-display);
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

body.page-home .site-logo,
body.page-option-one .site-logo {
  width: 46px;
}

body.page-home .site-nav a,
body.page-option-one .site-nav a {
  text-decoration: none;
  font-weight: 800;
}

body.page-home .site-nav a:not(.site-mark),
body.page-option-one .site-nav a:not(.site-mark) {
  color: var(--ag-muted);
  font-size: 0.9rem;
}

body.page-home .site-footer,
body.page-option-one .site-footer {
  border-top: 1px solid rgba(246, 236, 218, 0.12);
  background: #120d0c;
  color: rgba(246, 236, 218, 0.72);
}

body.page-home .site-footer-inner,
body.page-option-one .site-footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-credit a { color: inherit; }

.project-dashboard {
  min-height: 76vh;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(48px, 9vw, 104px) 24px;
}

.project-dashboard h1,
.option-one h1,
.option-one h2,
.option-one h3 {
  font-family: var(--ag-display);
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.project-dashboard h1 {
  max-width: 760px;
  font-size: clamp(3rem, 10vw, 7.4rem);
  margin: 0;
}

.dashboard-lede {
  max-width: 620px;
  margin: 20px 0 36px;
  color: var(--ag-muted);
  font-size: 1.15rem;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.dashboard-card {
  display: block;
  padding: 28px;
  min-height: 220px;
  border: 1px solid var(--ag-border);
  border-radius: 28px;
  background: rgba(255, 248, 234, 0.72);
  box-shadow: 0 24px 80px rgba(23, 16, 15, 0.08);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease;
}

.dashboard-card:hover {
  transform: translateY(-4px);
  border-color: rgba(247, 148, 29, 0.5);
}

.dashboard-card span,
.eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--ag-red);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dashboard-card strong {
  display: block;
  font-family: var(--ag-display);
  color: var(--ag-ink);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.05em;
}

.dashboard-card p {
  color: var(--ag-muted);
}

.option-one {
  overflow: hidden;
}

.option-one section {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 112px) 24px;
}

.ag-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.78fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  min-height: calc(100vh - 72px);
}

.ag-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(3.45rem, 8.4vw, 8.4rem);
}

.ag-logo-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 22px;
  color: var(--ag-muted);
}

.ag-logo-lockup img {
  width: clamp(112px, 14vw, 160px);
  height: auto;
  display: block;
  flex: 0 0 auto;
}

.ag-logo-lockup span {
  max-width: 220px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.hero-lede {
  max-width: 650px;
  margin: 24px 0 0;
  color: #3e312a;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0;
}

.ag-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid var(--ag-ink);
  font-weight: 900;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.ag-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(23, 16, 15, 0.16);
}

.ag-button-primary {
  background: var(--ag-red-bright);
  border-color: var(--ag-red-bright);
  color: #fff;
}

.ag-button-ghost {
  background: rgba(255, 248, 234, 0.7);
  color: var(--ag-ink);
}

.quick-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--ag-border);
  border-radius: 22px;
  background: var(--ag-border);
}

.quick-strip div {
  padding: 16px;
  background: rgba(255, 248, 234, 0.72);
}

.quick-strip strong,
.quick-strip span {
  display: block;
}

.quick-strip span {
  margin-top: 4px;
  color: var(--ag-muted);
  font-size: 0.9rem;
}

.hero-media {
  position: relative;
  min-height: 680px;
  border: 10px solid #17100f;
  border-radius: 38px;
  background: #17100f;
  box-shadow: 0 42px 100px rgba(23, 16, 15, 0.28);
  transform: rotate(1.5deg);
}

.hero-media::before {
  content: '';
  position: absolute;
  inset: -26px;
  z-index: -1;
  background: repeating-linear-gradient(135deg, rgba(143, 23, 31, 0.16) 0 12px, transparent 12px 24px);
  border-radius: 44px;
}

.hero-media img,
.image-stack img,
.event-options img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-media img {
  position: absolute;
  inset: 0;
  border-radius: 27px;
  object-position: 46% center;
}

.weather-card {
  position: absolute;
  right: -22px;
  bottom: 34px;
  z-index: 2;
  max-width: 280px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 20px;
  background: rgba(23, 16, 15, 0.88);
  color: var(--ag-cream-2);
  box-shadow: 0 20px 48px rgba(0,0,0,0.28);
  transform: rotate(-1.5deg);
}

.weather-label {
  color: var(--ag-yellow);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.weather-card strong {
  display: block;
  margin: 8px 0;
  font-family: var(--ag-display);
  font-size: 1.35rem;
  line-height: 1.05;
}

.weather-card p { margin: 0; color: rgba(246,236,218,0.76); }

.current-happenings {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 34px;
  align-items: start;
  padding-bottom: clamp(32px, 5vw, 72px) !important;
}

.current-happenings h2,
.section-copy h2,
.section-heading h2,
.beer-copy h2,
.direction-summary h2 {
  margin: 0 0 18px;
  font-size: clamp(2.4rem, 5.8vw, 5.4rem);
}

.current-happenings p,
.section-copy p,
.section-heading p,
.beer-copy p {
  color: var(--ag-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.happening-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.happening-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, transparent, rgba(23,16,15,0.88)),
    url('/assets/img/ingested/2026-04-29-alex-drive/live-music.webp') center/cover;
  color: white;
}

.happening-card.live {
  background:
    linear-gradient(180deg, rgba(13,86,89,0.05), rgba(23,16,15,0.86)),
    url('/assets/img/ingested/2026-04-29-alex-drive/belsito-pizza-catering-at-avantgarde.webp') center/cover;
}

.happening-card:nth-child(2) { background-position: center 42%; }
.happening-card:nth-child(3) { background-image: linear-gradient(180deg, transparent, rgba(23,16,15,0.88)), url('/assets/img/ingested/2026-04-29-alex-drive/live-music-outdoors.webp'); }

.happening-card span {
  color: var(--ag-yellow);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
}

.happening-card h3 { margin: 8px 0; font-size: 1.45rem; }
.happening-card p { margin: 0; color: rgba(255,255,255,0.9); font-size: 0.98rem; line-height: 1.45; }
.happening-card h3,
.event-options h3,
.weather-card strong { text-shadow: 0 2px 18px rgba(0,0,0,0.22); }

.split-section {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
}

.image-stack {
  position: relative;
  min-height: 560px;
}

.image-stack .wide {
  height: 520px;
  border-radius: 34px;
  box-shadow: 0 34px 80px rgba(23, 16, 15, 0.2);
}

.image-stack .small {
  position: absolute;
  right: -8px;
  bottom: -24px;
  width: 46%;
  height: 250px;
  border: 8px solid var(--ag-cream);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(23, 16, 15, 0.2);
}

.check-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.check-list li {
  padding: 14px 16px;
  border-left: 4px solid var(--ag-teal);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 248, 234, 0.72);
}

.events-section {
  max-width: none !important;
  background:
    radial-gradient(circle at 0% 20%, rgba(247,148,29,0.3), transparent 28rem),
    #17100f;
  color: var(--ag-cream-2);
}

.events-section > * {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.section-heading {
  max-width: 850px;
  text-align: center;
}

.events-section .eyebrow { color: var(--ag-amber); }
.events-section p { color: rgba(246,236,218,0.74); }

.event-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 38px;
}

.event-options article {
  overflow: hidden;
  border: 1px solid rgba(246,236,218,0.18);
  border-radius: 30px;
  background: rgba(246,236,218,0.06);
}

.event-options img {
  height: 340px;
}

.event-options div { padding: 24px; }
.event-options span { color: var(--ag-amber); font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; }
.event-options h3 { margin: 8px 0 12px; font-size: 2.1rem; }
.event-options p { margin: 0; }

.process-line {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  overflow: hidden;
  margin-top: 22px;
  border: 1px solid rgba(246,236,218,0.16);
  border-radius: 18px;
  background: rgba(246,236,218,0.16);
}

.process-line span {
  padding: 14px;
  background: rgba(246,236,218,0.07);
  text-align: center;
  font-weight: 900;
  font-size: 0.84rem;
}

.beer-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.beer-media {
  position: relative;
  min-height: 520px;
}

.beer-photo {
  width: 86%;
  height: 430px;
  display: block;
  object-fit: cover;
  object-position: center 55%;
  border: 8px solid var(--ag-ink);
  border-radius: 34px;
  box-shadow: 0 34px 80px rgba(23, 16, 15, 0.22);
}

.can-row {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: end;
  padding: 12px 14px 0;
  border: 1px solid var(--ag-border);
  border-radius: 26px;
  background: rgba(255,248,234,0.9);
  box-shadow: 0 22px 58px rgba(23, 16, 15, 0.16);
}

.can-row img {
  width: 100%;
  filter: drop-shadow(0 28px 28px rgba(23,16,15,0.18));
  transform: rotate(-3deg);
}

.can-row img:nth-child(2) { transform: translateY(-18px) rotate(2deg); }
.can-row img:nth-child(3) { transform: rotate(4deg); }

.direction-summary {
  padding-top: 32px !important;
}

.direction-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--ag-border);
  border-radius: 24px;
  background: var(--ag-border);
}

.direction-grid div {
  min-height: 180px;
  padding: 22px;
  background: rgba(255,248,234,0.78);
}

.direction-grid strong,
.direction-grid span { display: block; }
.direction-grid strong { font-family: var(--ag-display); font-size: 1.5rem; line-height: 1; letter-spacing: -0.04em; }
.direction-grid span { margin-top: 12px; color: var(--ag-muted); }

@media (max-width: 980px) {
  .ag-hero,
  .current-happenings,
  .split-section,
  .beer-section {
    grid-template-columns: 1fr;
  }

  .hero-media { min-height: 520px; transform: none; }
  .weather-card { right: 18px; }
  .direction-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  body.page-home .site-nav,
  body.page-option-one .site-nav { flex-direction: row; align-items: center; flex-wrap: wrap; }

  .dashboard-cards,
  .happening-grid,
  .event-options,
  .process-line,
  .direction-grid,
  .quick-strip {
    grid-template-columns: 1fr;
  }

  .project-dashboard { padding-top: 48px; }
  .project-dashboard h1 { font-size: clamp(3rem, 16vw, 4.8rem); }
  .ag-hero { min-height: auto; padding-top: 46px !important; }
  .ag-hero h1 { font-size: clamp(3.2rem, 16vw, 5.2rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .ag-button { width: 100%; }
  .hero-media { min-height: 420px; border-width: 6px; border-radius: 26px; }
  .hero-media img { border-radius: 18px; }
  .weather-card { position: static; max-width: none; margin: -72px 14px 16px; transform: none; }
  .image-stack { min-height: auto; }
  .image-stack .wide { height: 360px; }
  .image-stack .small { position: relative; right: auto; bottom: auto; width: 72%; height: 210px; margin: -80px 0 0 auto; }
  .event-options img { height: 250px; }
  .can-row { position: relative; width: 86%; margin: -48px 0 0 auto; }
}

/* ============================================================ */
/* Option 2 — Avant Garde Broadsheet                             */
/* Editorial-poster homepage. Cream paper, brand red, brand teal */
/* on ink, Big Shoulders + Jost + Space Mono. Scoped under       */
/* body.page-option-two so it doesn't leak into other pages.     */
/* ============================================================ */

body.page-option-two {
  --o2-paper: #f5edd8;
  --o2-paper-soft: #faf3e1;
  --o2-paper-deep: #ecdcb6;
  --o2-ink: #0e0e0e;
  --o2-ink-soft: #4a3f33;
  --o2-ink-mute: #6f6255;
  --o2-red: #bf2029;
  --o2-red-deep: #8f171f;
  --o2-teal: #00abaf;
  --o2-deep-teal: #0d5659;
  --o2-amber: #f7941d;
  --o2-yellow: #e2c638;
  --o2-rule: rgba(14, 14, 14, 0.16);
  --o2-rule-strong: rgba(14, 14, 14, 0.32);
  --o2-display: 'Big Shoulders Display', 'Anton', system-ui, sans-serif;
  --o2-body: 'Jost', system-ui, -apple-system, sans-serif;
  --o2-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;

  font-family: var(--o2-body);
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 38px,
      rgba(14, 14, 14, 0.018) 38px,
      rgba(14, 14, 14, 0.018) 39px
    ),
    var(--o2-paper);
  color: var(--o2-ink);
  font-size: 17px;
  line-height: 1.55;
}

body.page-option-two .page {
  max-width: none;
  padding: 0;
}

/* nav + footer overrides */
body.page-option-two .site-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--o2-paper);
  border-bottom: 1px solid var(--o2-ink);
}

body.page-option-two .site-nav,
body.page-option-two .site-footer-inner {
  max-width: 1240px;
  padding: 14px 24px;
}

body.page-option-two .site-mark {
  font-family: var(--o2-mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--o2-ink);
}

body.page-option-two .site-logo { width: 42px; }

body.page-option-two .site-nav a {
  text-decoration: none;
  font-family: var(--o2-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.page-option-two .site-nav a:not(.site-mark) { color: var(--o2-ink-mute); }
body.page-option-two .site-nav a:not(.site-mark):hover { color: var(--o2-red); }

body.page-option-two .site-footer {
  background: var(--o2-ink);
  color: var(--o2-paper);
  border-top: 0;
}
body.page-option-two .site-footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--o2-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* general layout container */
.option-two .o2-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 112px) 24px;
}

/* MASTHEAD */
.o2-masthead {
  border-top: 4px solid var(--o2-ink);
  border-bottom: 1px solid var(--o2-ink);
  background: var(--o2-paper);
}
.o2-masthead-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  font-family: var(--o2-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o2-ink);
}
.o2-mast-block { display: flex; align-items: center; gap: 8px; }
.o2-mast-edition { padding-right: 14px; border-right: 1px solid var(--o2-rule-strong); margin-right: 6px; }
.o2-mast-logo {
  display: block;
  height: 28px;
  width: auto;
}
.o2-mast-date { margin-left: auto; font-weight: 700; }

.o2-nameplate {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 44px) 24px clamp(18px, 3vw, 30px);
  text-align: center;
  border-bottom: 1px solid var(--o2-ink);
}

.o2-nameplate img {
  width: clamp(220px, 45vw, 520px);
  height: auto;
  display: block;
  margin: 0 auto;
}

.o2-nameplate p {
  margin: 14px auto 0;
  max-width: 780px;
  font-family: var(--o2-mono);
  font-size: clamp(0.68rem, 1.2vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--o2-ink-mute);
}

/* HERO */
.o2-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) 24px clamp(28px, 4vw, 56px);
}
.o2-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: stretch;
}
.o2-hero-copy { display: flex; flex-direction: column; gap: 22px; padding-top: 12px; }
.o2-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--o2-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o2-red);
}
.o2-rule {
  display: inline-block;
  width: 56px; height: 2px;
  background: var(--o2-red);
}
.o2-hero-headline {
  font-family: var(--o2-display);
  font-weight: 800;
  font-size: clamp(3.25rem, 9.5vw, 8rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--o2-ink);
}
.o2-hero-headline span { display: block; }
.o2-hero-em { color: var(--o2-red); }
.o2-hero-dek {
  margin: 0;
  max-width: 540px;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--o2-ink-soft);
}
.o2-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.o2-hero-coords {
  margin: 8px 0 0;
  font-family: var(--o2-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--o2-ink-mute);
  text-transform: uppercase;
}

.o2-hero-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.o2-hero-figure img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  display: block;
  object-fit: cover;
  object-position: center 55%;
  border: 1px solid var(--o2-ink);
  border-radius: 0;
}
.o2-hero-figure figcaption {
  font-family: var(--o2-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--o2-ink-mute);
  display: flex;
  align-items: center;
  gap: 12px;
}
.o2-fig-num {
  display: inline-block;
  padding: 3px 8px;
  background: var(--o2-ink);
  color: var(--o2-paper);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* BUTTONS */
.o2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  min-height: 50px;
  border: 2px solid var(--o2-ink);
  background: transparent;
  color: var(--o2-ink);
  font-family: var(--o2-mono);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 140ms ease, background 140ms ease, color 140ms ease;
}
.o2-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--o2-ink); }
.o2-btn-primary { background: var(--o2-red); border-color: var(--o2-red); color: #fff; }
.o2-btn-primary:hover { background: var(--o2-red-deep); border-color: var(--o2-red-deep); box-shadow: 4px 4px 0 var(--o2-ink); }
.o2-btn-ghost { background: transparent; color: var(--o2-ink); }
.o2-btn-ghost-dark { background: transparent; color: var(--o2-ink); border-color: var(--o2-ink); }
.o2-btn-lg { padding: 18px 28px; min-height: 60px; font-size: 0.92rem; }

/* utility strip */
.o2-utility {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--o2-ink);
  background: var(--o2-paper);
}
.o2-utility > div {
  padding: 16px 18px;
  border-right: 1px solid var(--o2-rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.o2-utility > div:last-child { border-right: 0; }
.o2-util-label {
  font-family: var(--o2-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o2-red);
}
.o2-utility strong {
  font-family: var(--o2-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--o2-ink);
}
.o2-util-meridiem { font-size: 0.85rem; vertical-align: super; }

/* SECTION HEADER */
.o2-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--o2-ink);
  padding-top: 18px;
  position: relative;
}
.o2-chapter {
  font-family: var(--o2-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--o2-red);
  text-transform: uppercase;
}
.o2-chapter-light { color: var(--o2-amber); }
.o2-h2 {
  font-family: var(--o2-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6.4vw, 5.2rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--o2-ink);
}
.o2-h2 em { font-style: italic; color: var(--o2-red); }
.o2-h2-light { color: var(--o2-paper); }
.o2-h2-light em { color: var(--o2-amber); }
.o2-section-dek {
  max-width: 720px;
  margin: 6px 0 0;
  font-size: 1.05rem;
  color: var(--o2-ink-soft);
}

/* TODAY */
.o2-today-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--o2-ink);
}
.o2-today-card {
  padding: 28px 26px 26px;
  background: var(--o2-paper);
  border-right: 1px solid var(--o2-rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;
}
.o2-today-card:last-child { border-right: 0; }
.o2-today-card:nth-child(2) { background: var(--o2-paper-soft); }
.o2-today-card:nth-child(3) {
  background: var(--o2-ink);
  color: var(--o2-paper);
}
.o2-today-card:nth-child(3) .o2-today-tag { color: var(--o2-amber); }
.o2-today-card:nth-child(3) .o2-today-headline { color: var(--o2-paper); }
.o2-today-card:nth-child(3) p { color: rgba(245, 237, 216, 0.78); }
.o2-today-card:nth-child(3) .o2-today-foot { color: rgba(245, 237, 216, 0.55); border-color: rgba(245, 237, 216, 0.18); }

.o2-today-tag {
  font-family: var(--o2-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o2-red);
}
.o2-today-headline {
  font-family: var(--o2-display);
  font-weight: 800;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--o2-ink);
}
.o2-today-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--o2-ink-soft);
}
.o2-today-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--o2-rule);
  font-family: var(--o2-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--o2-ink-mute);
}

/* ON TAP — can shelf */
.o2-can-shelf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--o2-ink);
  border-bottom: 4px solid var(--o2-ink);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 8px,
      rgba(247, 148, 29, 0.08) 8px 9px
    ),
    var(--o2-paper-soft);
}
.o2-can {
  padding: 28px 16px 22px;
  border-right: 1px solid var(--o2-rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  position: relative;
}
.o2-can:last-child { border-right: 0; }
.o2-can img {
  width: 100%;
  max-width: 130px;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 18px rgba(14, 14, 14, 0.18));
  transition: transform 200ms ease;
}
.o2-can:hover img { transform: translateY(-6px) rotate(-2deg); }
.o2-can-meta { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.o2-can strong {
  font-family: var(--o2-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--o2-ink);
}
.o2-can-meta > span {
  font-family: var(--o2-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--o2-red);
}
.o2-can p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--o2-ink-soft);
}

.o2-shelf-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}
.o2-link-arrow {
  font-family: var(--o2-mono);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--o2-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--o2-red);
  padding-bottom: 4px;
}
.o2-link-arrow:hover { color: var(--o2-red); }
.o2-shelf-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.o2-shelf-badges span {
  padding: 6px 12px;
  border: 1px solid var(--o2-rule-strong);
  font-family: var(--o2-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--o2-ink-soft);
}

/* THIS WEEK */
.o2-week-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--o2-ink);
  border-bottom: 1px solid var(--o2-ink);
}
.o2-week-item {
  display: grid;
  grid-template-columns: 96px 1fr 90px;
  gap: 22px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--o2-rule);
}
.o2-week-item:last-child { border-bottom: 0; }
.o2-week-item:hover { background: rgba(247, 148, 29, 0.04); }
.o2-week-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 4px;
}
.o2-week-date strong {
  font-family: var(--o2-display);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--o2-red);
  text-transform: uppercase;
}
.o2-week-date span {
  font-family: var(--o2-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--o2-ink-mute);
  margin-top: 4px;
}
.o2-week-body { display: flex; flex-direction: column; gap: 6px; }
.o2-week-tag {
  font-family: var(--o2-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--o2-teal);
}
.o2-week-body h3 {
  font-family: var(--o2-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--o2-ink);
  margin: 0;
}
.o2-week-body p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--o2-ink-soft);
  max-width: 56ch;
}
.o2-week-time {
  font-family: var(--o2-mono);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--o2-ink);
  text-align: right;
  padding-top: 4px;
}
.o2-week-foot {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--o2-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--o2-ink-mute);
}

/* BREWHOUSE */
.o2-brewhouse {
  background: var(--o2-ink);
  color: var(--o2-paper);
  border-top: 1px solid var(--o2-ink);
}
.o2-brewhouse .o2-section-head { display: none; }
.o2-brewhouse-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.o2-brewhouse-figure { margin: 0; }
.o2-brewhouse-figure img {
  width: 100%;
  display: block;
  border: 1px solid rgba(245, 237, 216, 0.2);
  filter: grayscale(0.06) contrast(1.04);
}
.o2-brewhouse-figure figcaption {
  margin-top: 10px;
  font-family: var(--o2-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 237, 216, 0.6);
  display: flex;
  align-items: center;
  gap: 12px;
}
.o2-brewhouse-figure .o2-fig-num { background: var(--o2-paper); color: var(--o2-ink); }
.o2-brewhouse-copy { display: flex; flex-direction: column; gap: 18px; }
.o2-brewhouse-copy p {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.55;
  color: rgba(245, 237, 216, 0.88);
  max-width: 56ch;
}
.o2-brewhouse-copy strong { color: var(--o2-amber); font-weight: 600; }

.o2-partners {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(245, 237, 216, 0.18);
}
.o2-partners li {
  padding: 16px 18px;
  border-right: 1px solid rgba(245, 237, 216, 0.18);
  border-bottom: 1px solid rgba(245, 237, 216, 0.18);
}
.o2-partners li:nth-child(2n) { border-right: 0; }
.o2-partners li:nth-last-child(-n+2) { border-bottom: 0; }
.o2-partners strong {
  display: block;
  font-family: var(--o2-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  color: var(--o2-paper);
}
.o2-partners span {
  display: block;
  margin-top: 4px;
  font-family: var(--o2-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(245, 237, 216, 0.55);
}

/* EVENTS */
.o2-events-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--o2-ink);
}
.o2-event-card {
  padding: 32px;
  background: var(--o2-paper);
  border-right: 1px solid var(--o2-ink);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.o2-event-card:last-child { border-right: 0; }
.o2-event-card-flag { background: var(--o2-paper-soft); position: relative; }
.o2-event-card-flag::before {
  content: 'Flagship';
  position: absolute;
  top: 0; right: 0;
  padding: 6px 14px;
  background: var(--o2-red);
  color: #fff;
  font-family: var(--o2-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.o2-event-card-head { display: flex; flex-direction: column; gap: 6px; }
.o2-event-tier {
  font-family: var(--o2-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o2-red);
}
.o2-event-card h3 {
  font-family: var(--o2-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--o2-ink);
}
.o2-event-pitch {
  margin: 0;
  font-size: 1.02rem;
  color: var(--o2-ink-soft);
}

.o2-event-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--o2-rule-strong);
  border-bottom: 1px solid var(--o2-rule-strong);
}
.o2-event-specs > div {
  padding: 14px 14px 14px 0;
  border-right: 1px solid var(--o2-rule);
}
.o2-event-specs > div:last-child { border-right: 0; padding-right: 0; padding-left: 14px; }
.o2-event-specs > div:not(:first-child) { padding-left: 14px; }
.o2-event-specs dt {
  font-family: var(--o2-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--o2-ink-mute);
}
.o2-event-specs dd {
  margin: 4px 0 0;
  font-family: var(--o2-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--o2-ink);
}

.o2-event-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.o2-event-includes li {
  padding-left: 26px;
  position: relative;
  font-size: 0.98rem;
  color: var(--o2-ink-soft);
}
.o2-event-includes li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 16px; height: 2px;
  background: var(--o2-red);
}

.o2-process {
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--o2-ink);
}
.o2-process li {
  padding: 22px 18px;
  background: var(--o2-paper);
  border-right: 1px solid var(--o2-rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 160px;
}
.o2-process li:last-child { border-right: 0; }
.o2-process li > span {
  font-family: var(--o2-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--o2-red);
}
.o2-process li strong {
  font-family: var(--o2-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--o2-ink);
}
.o2-process li p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--o2-ink-soft);
}

/* VISIT */
.o2-visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  border-top: 1px solid var(--o2-ink);
  padding-top: clamp(28px, 4vw, 48px);
}
.o2-visit-copy { display: flex; flex-direction: column; gap: 24px; }
.o2-visit-block {
  padding: 18px 0 0;
  border-top: 1px solid var(--o2-rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.o2-visit-block:first-of-type { border-top: 0; padding-top: 0; }
.o2-visit-label {
  font-family: var(--o2-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o2-red);
}
.o2-visit-block strong {
  font-family: var(--o2-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--o2-ink);
}
.o2-visit-aside { margin: 4px 0 0; font-size: 0.94rem; color: var(--o2-ink-mute); }
.o2-hours { width: 100%; border-collapse: collapse; }
.o2-hours th, .o2-hours td { padding: 8px 0; border-bottom: 1px dashed var(--o2-rule); text-align: left; }
.o2-hours th {
  font-family: var(--o2-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--o2-ink-mute);
  width: 40%;
}
.o2-hours td {
  font-family: var(--o2-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--o2-ink);
}
.o2-visit-contact { margin: 0; font-size: 1.08rem; line-height: 1.7; }
.o2-visit-contact a { color: var(--o2-ink); text-decoration-thickness: 2px; }
.o2-visit-contact a:hover { color: var(--o2-red); }

.o2-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--o2-ink);
}
.o2-trust li {
  padding: 18px;
  background: var(--o2-paper);
  border-right: 1px solid var(--o2-rule);
  border-bottom: 1px solid var(--o2-rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 130px;
}
.o2-trust li:nth-child(2n) { border-right: 0; }
.o2-trust li:nth-last-child(-n+2) { border-bottom: 0; }
.o2-trust strong {
  font-family: var(--o2-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--o2-red);
}
.o2-trust span { font-size: 0.94rem; color: var(--o2-ink-soft); line-height: 1.45; }

/* FINAL */
.o2-final {
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 12px,
      rgba(247, 148, 29, 0.08) 12px 13px
    ),
    var(--o2-paper-deep);
  border-top: 4px solid var(--o2-ink);
  border-bottom: 4px solid var(--o2-ink);
}
.o2-final-grid {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.o2-final-headline {
  font-family: var(--o2-display);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--o2-ink);
}
.o2-final-headline span { display: block; }
.o2-final-em { color: var(--o2-red); font-style: italic; }
.o2-final-dek {
  margin: 0;
  max-width: 520px;
  font-size: 1.12rem;
  color: var(--o2-ink-soft);
}
.o2-final-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

/* COLOPHON */
.o2-colophon {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  font-family: var(--o2-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--o2-ink-mute);
}

/* ========= RESPONSIVE ========= */
@media (max-width: 980px) {
  .o2-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .o2-hero-figure img { min-height: 360px; }
  .o2-utility { grid-template-columns: repeat(2, 1fr); }
  .o2-utility > div { border-right: 1px solid var(--o2-rule); border-bottom: 1px solid var(--o2-rule); }
  .o2-utility > div:nth-child(2n) { border-right: 0; }
  .o2-utility > div:last-child { border-bottom: 0; grid-column: 1 / -1; }

  .o2-today-grid { grid-template-columns: 1fr; }
  .o2-today-card { border-right: 0; border-bottom: 1px solid var(--o2-rule); }
  .o2-today-card:last-child { border-bottom: 0; }

  .o2-can-shelf { grid-template-columns: repeat(3, 1fr); }
  .o2-can:nth-child(3n) { border-right: 0; }
  .o2-can { border-bottom: 1px solid var(--o2-rule); }
  .o2-can:nth-last-child(-n+3) { border-bottom: 0; }

  .o2-brewhouse-grid { grid-template-columns: 1fr; gap: 32px; }
  .o2-events-grid { grid-template-columns: 1fr; }
  .o2-event-card { border-right: 0; border-bottom: 1px solid var(--o2-ink); }
  .o2-event-card:last-child { border-bottom: 0; }

  .o2-process { grid-template-columns: repeat(2, 1fr); }
  .o2-process li { border-right: 1px solid var(--o2-rule); border-bottom: 1px solid var(--o2-rule); }
  .o2-process li:nth-child(2n) { border-right: 0; }
  .o2-process li:last-child { border-bottom: 0; grid-column: 1 / -1; }

  .o2-visit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body.page-option-two .site-nav { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; }
  .o2-masthead-inner { gap: 12px; font-size: 0.64rem; padding: 10px 16px; }
  .o2-mast-date { margin-left: 0; }

  .o2-hero { padding: 28px 16px 16px; }
  .o2-hero-grid { gap: 22px; }
  .o2-hero-headline { font-size: clamp(2.6rem, 12vw, 4.4rem); line-height: 0.88; }
  .o2-hero-cta { flex-direction: column; align-items: stretch; }
  .o2-hero-cta .o2-btn { width: 100%; }
  .o2-hero-figure img { min-height: 280px; }

  .o2-section { padding: 48px 16px; }
  .o2-section-head { padding-top: 14px; }

  .o2-utility { grid-template-columns: 1fr; }
  .o2-utility > div { border-right: 0; border-bottom: 1px solid var(--o2-rule); }
  .o2-utility > div:last-child { border-bottom: 0; }

  .o2-can-shelf { grid-template-columns: repeat(2, 1fr); }
  .o2-can { padding: 22px 12px 18px; }
  .o2-can:nth-child(3n) { border-right: 1px solid var(--o2-rule); }
  .o2-can:nth-child(2n) { border-right: 0; }
  .o2-can:nth-last-child(-n+2) { border-bottom: 0; }
  .o2-can:nth-last-child(3) { border-bottom: 1px solid var(--o2-rule); }

  .o2-shelf-foot { flex-direction: column; align-items: flex-start; gap: 14px; }

  .o2-week-item { grid-template-columns: 64px 1fr; gap: 14px; }
  .o2-week-time { grid-column: 2; text-align: left; padding-top: 0; font-size: 0.84rem; color: var(--o2-ink-mute); }
  .o2-week-date strong { font-size: 1.7rem; }

  .o2-event-card { padding: 22px; }
  .o2-event-specs { grid-template-columns: 1fr; }
  .o2-event-specs > div { border-right: 0; border-bottom: 1px solid var(--o2-rule); padding: 10px 0 !important; }
  .o2-event-specs > div:last-child { border-bottom: 0; }

  .o2-process { grid-template-columns: 1fr; }
  .o2-process li { border-right: 0; border-bottom: 1px solid var(--o2-rule); min-height: auto; }
  .o2-process li:last-child { border-bottom: 0; }

  .o2-trust { grid-template-columns: 1fr; }
  .o2-trust li { border-right: 0; border-bottom: 1px solid var(--o2-rule); min-height: auto; }
  .o2-trust li:last-child { border-bottom: 0; }

  .o2-final-headline { font-size: clamp(2.6rem, 14vw, 4.4rem); }
  .o2-final-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .o2-final-cta .o2-btn { width: 100%; }

  .o2-colophon { font-size: 0.66rem; }
}

/* Mobile proof nav: keep the review controls usable after adding the real logo. */
@media (max-width: 720px) {
  body.page-home .site-nav,
  body.page-option-one .site-nav,
  body.page-option-two .site-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.page-home .site-nav::-webkit-scrollbar,
  body.page-option-one .site-nav::-webkit-scrollbar,
  body.page-option-two .site-nav::-webkit-scrollbar { display: none; }

  body.page-home .site-nav a,
  body.page-option-one .site-nav a,
  body.page-option-two .site-nav a {
    flex: 0 0 auto;
  }

  body.page-home .site-mark,
  body.page-option-one .site-mark,
  body.page-option-two .site-mark { gap: 0; }

  body.page-home .site-mark-text,
  body.page-option-one .site-mark-text,
  body.page-option-two .site-mark-text { display: none; }

  body.page-home .site-logo,
  body.page-option-one .site-logo,
  body.page-option-two .site-logo { width: 34px; }
}

@media (max-width: 420px) {
  body.page-home .site-nav,
  body.page-option-one .site-nav,
  body.page-option-two .site-nav {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.page-home .site-nav a:not(.site-mark),
  body.page-option-one .site-nav a:not(.site-mark),
  body.page-option-two .site-nav a:not(.site-mark) {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }
}

/* ============================================================ */
/* Client feedback pass, 2026-05-06                              */
/* Alex: less round, less fluffy, more geometric, clearer CTAs.   */
/* ============================================================ */
body.page-option-one {
  --ag-teal: var(--ag-red);
  --ag-deep-teal: var(--ag-red);
}
.option-one h1,
.option-one h2,
.option-one h3 {
  font-family: 'DM Sans', system-ui, sans-serif;
  letter-spacing: -0.065em;
  line-height: 0.96;
}
.option-one .ag-button,
.option-one .quick-strip,
.option-one .hero-media,
.option-one .hero-media::before,
.option-one .hero-media img,
.option-one .weather-card,
.option-one .happening-card,
.option-one .image-stack .wide,
.option-one .image-stack .small,
.option-one .event-options article,
.option-one .beer-photo,
.option-one .can-row,
.option-one .process-line,
.option-one .direction-grid {
  border-radius: 6px;
}
.option-one .ag-button { border-radius: 4px; }
.option-one .current-happenings {
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
  align-items: stretch;
}
.option-one .current-happenings h2 { font-size: clamp(2.2rem, 4.8vw, 4.4rem); }
.option-one .current-happenings > div:first-child p { max-width: 34ch; }
.option-one .happening-card { min-height: 330px; }
.option-one .happening-card h3 { font-family: 'DM Sans', system-ui, sans-serif; font-size: 1.35rem; letter-spacing: -0.03em; }
.option-one .happening-card p { font-size: 0.94rem; }
.option-one .events-section {
  background: linear-gradient(180deg, var(--ag-cream-2), var(--ag-cream));
  color: var(--ag-ink);
}
.option-one .events-section .eyebrow { color: var(--ag-red); }
.option-one .events-section p { color: var(--ag-muted); }
.option-one .events-section .section-heading { text-align: left; }
.option-one .event-options article {
  border-color: var(--ag-border);
  background: rgba(255, 248, 234, 0.86);
  color: var(--ag-ink);
}
.option-one .event-options span { color: var(--ag-red); }
.option-one .event-options h3 { text-shadow: none; }
.option-one .event-options img { object-position: center 48%; }
.option-one .process-line {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: transparent;
  border-color: var(--ag-border);
}
.option-one .process-line span {
  display: block;
  background: rgba(255, 248, 234, 0.78);
  color: var(--ag-ink);
  text-align: left;
  line-height: 1.35;
  font-weight: 700;
}
.option-one .process-line strong { color: var(--ag-red); margin-right: 4px; }
.option-one .ag-inline-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--ag-red);
  color: var(--ag-red);
  font-weight: 900;
  text-decoration: none;
}
.option-one .direction-grid a {
  display: block;
  min-height: 180px;
  padding: 22px;
  background: rgba(255,248,234,0.78);
  text-decoration: none;
}
.option-one .direction-grid a:hover { background: #fff8ea; }
.option-one .direction-grid strong,
.option-one .direction-grid span { display: block; }
.option-one .direction-grid strong { font-family: 'DM Sans', system-ui, sans-serif; font-size: 1.45rem; line-height: 1; letter-spacing: -0.04em; }
.option-one .direction-grid span { margin-top: 12px; color: var(--ag-muted); }

body.page-option-two {
  --o2-display: 'DM Sans', system-ui, sans-serif;
  --o2-mono: 'DM Sans', system-ui, sans-serif;
  --o2-teal: var(--o2-red);
}
body.page-option-two .site-mark,
body.page-option-two .site-nav a,
.o2-masthead-inner,
.o2-eyebrow,
.o2-hero-coords,
.o2-btn,
.o2-util-label,
.o2-today-tag,
.o2-today-foot,
.o2-can-meta > span,
.o2-link-arrow,
.o2-shelf-badges span,
.o2-week-date span,
.o2-week-tag,
.o2-week-foot,
.o2-visit-label,
.o2-colophon {
  letter-spacing: 0.06em;
}
.o2-masthead-inner { justify-content: space-between; }
.o2-mast-edition { border-right: 0; }
.o2-hero-figure { gap: 0; }
.o2-hero-figure figcaption,
.o2-brewhouse-figure figcaption { display: none; }
.o2-btn-ghost,
.o2-btn-ghost-dark { background: var(--o2-red); border-color: var(--o2-red); color: #fff; }
.o2-btn-ghost:hover,
.o2-btn-ghost-dark:hover { background: var(--o2-red-deep); border-color: var(--o2-red-deep); }
.o2-utility { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.o2-today,
.o2-visit { background: #fff8ea; }
.o2-on-tap,
.o2-events { background: var(--o2-paper-soft); }
.o2-week { background: var(--o2-paper); }
.o2-today-card:nth-child(1),
.o2-today-card:nth-child(3) { background: var(--o2-paper); color: var(--o2-ink); }
.o2-today-card:nth-child(2) { background: var(--o2-paper-soft); }
.o2-today-card:nth-child(3) .o2-today-tag { color: var(--o2-red); }
.o2-today-card:nth-child(3) .o2-today-headline { color: var(--o2-ink); }
.o2-today-card:nth-child(3) p { color: var(--o2-ink-soft); }
.o2-today-card:nth-child(3) .o2-today-foot { color: var(--o2-ink-mute); border-color: var(--o2-rule); }
.o2-can-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.o2-can:nth-child(2n) { border-right: 0; }
.o2-brewhouse-copy strong { color: var(--o2-paper); }
.o2-event-card-flag::before { content: none; }
.o2-event-quote-row { margin-top: 24px; display: flex; justify-content: center; }
.o2-event-quote-row .o2-btn { width: min(100%, 560px); }
.o2-final-dek { max-width: 680px; }

@media (max-width: 980px) {
  .option-one .current-happenings { grid-template-columns: 1fr; }
  .option-one .process-line { grid-template-columns: 1fr; }
  .o2-utility { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .o2-utility { grid-template-columns: 1fr; }
}

.o2-event-photo-row {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 0.9fr;
  gap: 12px;
  margin: 0 0 24px;
}
.o2-event-photo-row img {
  width: 100%;
  height: clamp(220px, 26vw, 340px);
  object-fit: cover;
  border: 1px solid var(--o2-ink);
}
.o2-event-photo-row img:first-child { object-position: center 45%; }
@media (max-width: 720px) { .o2-event-photo-row { grid-template-columns: 1fr; } }

/* ============================================================ */
/* Client synthesis pass, 2026-05-06                             */
/* Base: Option 2. Kept Option 1 warmth, full-bleed section color, */
/* photo-led weekly events, simpler private events, clearer visit. */
/* ============================================================ */
.option-two {
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 6%, rgba(247, 148, 29, 0.2), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(247, 148, 29, 0.12), transparent 32rem),
    linear-gradient(180deg, #fff8ea 0%, var(--o2-paper) 44%, #fff8ea 100%);
}

.option-two .o2-section,
.o2-brewhouse,
.o2-final {
  position: relative;
  isolation: isolate;
}

.o2-today::before,
.o2-on-tap::before,
.o2-week::before,
.o2-events::before,
.o2-visit::before,
.o2-brewhouse::before,
.o2-final::before {
  content: '';
  position: absolute;
  inset: 0 -100vw;
  z-index: -1;
}

.o2-today::before,
.o2-visit::before {
  background: linear-gradient(135deg, #fff8ea 0%, #f7ecd2 58%, rgba(247, 148, 29, 0.16) 100%);
}
.o2-on-tap::before,
.o2-events::before {
  background: linear-gradient(135deg, var(--o2-paper-soft) 0%, #f3e3bf 100%);
}
.o2-week::before {
  background:
    radial-gradient(circle at 8% 8%, rgba(247, 148, 29, 0.11), transparent 24rem),
    linear-gradient(145deg, var(--o2-paper) 0%, #fff8ea 100%);
}
.o2-brewhouse::before { background: var(--o2-ink); }
.o2-final::before {
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(247, 148, 29, 0.08) 12px 13px),
    linear-gradient(135deg, #ecdcb6 0%, #fff0ca 100%);
}

.o2-hero {
  background:
    radial-gradient(circle at 0% 0%, rgba(247, 148, 29, 0.16), transparent 26rem),
    linear-gradient(180deg, rgba(255, 248, 234, 0.72), rgba(245, 237, 216, 0));
}

.o2-week-feature {
  display: grid;
  grid-template-columns: minmax(250px, 0.36fr) minmax(0, 0.64fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.o2-week-feature-copy {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.o2-week-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.o2-week-photo-card {
  min-height: 360px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--o2-ink);
  background: var(--o2-ink);
  color: var(--o2-paper);
}
.o2-week-photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(0.98) contrast(1.04);
}
.o2-week-photo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 14, 0.06), rgba(14, 14, 14, 0.82));
}
.o2-week-photo-card div {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: 22px;
}
.o2-week-photo-card span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--o2-yellow);
  font-family: var(--o2-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.o2-week-photo-card h3 {
  margin: 0 0 8px;
  font-family: var(--o2-display);
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.o2-week-photo-card p {
  margin: 0;
  color: rgba(245, 237, 216, 0.9);
  line-height: 1.35;
}

.o2-event-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.o2-event-feature-card {
  overflow: hidden;
  border: 1px solid var(--o2-ink);
  background: var(--o2-paper);
}
.o2-event-feature-card img {
  display: block;
  width: 100%;
  height: clamp(260px, 32vw, 420px);
  object-fit: cover;
}
.o2-event-feature-card:first-child img { object-position: center 55%; }
.o2-event-feature-card:last-child img { object-position: center 44%; }
.o2-event-feature-card > div {
  display: grid;
  gap: 10px;
  padding: 24px;
}
.o2-event-feature-card h3 {
  margin: 0;
  font-family: var(--o2-display);
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--o2-ink);
}
.o2-event-feature-card p {
  margin: 0;
  color: var(--o2-ink-soft);
  font-size: 1.02rem;
}
.o2-event-feature-card strong {
  display: inline-flex;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid var(--o2-red);
  color: var(--o2-red);
  font-family: var(--o2-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.o2-direction-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--o2-ink);
  background: var(--o2-ink);
}
.o2-direction-grid a {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-end;
  padding: 22px;
  background: rgba(255, 248, 234, 0.9);
  color: var(--o2-ink);
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.o2-direction-grid a:hover {
  background: var(--o2-red);
  color: #fff;
}
.o2-direction-grid strong {
  font-family: var(--o2-display);
  font-size: clamp(1.45rem, 2.8vw, 2.2rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.o2-direction-grid span {
  color: var(--o2-ink-soft);
  line-height: 1.35;
}
.o2-direction-grid a:hover span { color: rgba(255,255,255,0.86); }

.o2-visit-closing {
  margin-top: clamp(18px, 3vw, 34px);
  padding: clamp(24px, 4vw, 42px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 4vw, 42px);
  align-items: center;
  border: 1px solid var(--o2-ink);
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 12px,
      rgba(247, 148, 29, 0.09) 12px 13px
    ),
    var(--o2-paper-deep);
  box-shadow: 0 16px 38px rgba(14, 14, 14, 0.08);
}
.o2-visit-closing h3 {
  margin: 8px 0 10px;
  max-width: 720px;
  font-family: var(--o2-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--o2-ink);
}
.o2-visit-closing p {
  margin: 0;
  max-width: 620px;
  font-size: 1.06rem;
  color: var(--o2-ink-soft);
}
.o2-visit-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 980px) {
  .o2-week-feature,
  .o2-event-showcase,
  .o2-direction-grid { grid-template-columns: 1fr; }
  .o2-visit-closing { grid-template-columns: 1fr; }
  .o2-visit-cta { justify-content: flex-start; }
  .o2-week-feature-copy { position: static; }
  .o2-week-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .o2-week-photo-grid { grid-template-columns: 1fr; }
  .o2-week-photo-card { min-height: 320px; }
  .o2-week-photo-card span { font-size: 0.78rem; }
  .o2-event-feature-card img { height: 260px; }
  .o2-direction-grid a { min-height: 150px; }
  .o2-visit-closing { padding: 22px; }
  .o2-visit-cta { flex-direction: column; align-items: stretch; }
  .o2-visit-cta .o2-btn { width: 100%; }
  body.page-option-two .site-nav a:not(.site-mark) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 0.74rem;
  }
}

/* ============================================================ */
/* Client feedback pass, 2026-05-12                              */
/* Alex: top happenings visible, smaller headers, fuller menu,    */
/* edge-to-edge sections, no red in gradients.                    */
/* ============================================================ */
.option-two .o2-hero,
.option-two .o2-section,
.option-two .o2-final {
  max-width: none;
  width: 100%;
  padding-left: max(18px, calc((100vw - 1240px) / 2 + 24px));
  padding-right: max(18px, calc((100vw - 1240px) / 2 + 24px));
}

.option-two .o2-section {
  padding-top: clamp(46px, 6vw, 86px);
  padding-bottom: clamp(46px, 6vw, 86px);
}

.o2-hero {
  padding-top: clamp(18px, 3vw, 38px);
  padding-bottom: clamp(28px, 4vw, 48px);
}

.o2-hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.72fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: center;
}

.o2-hero-copy {
  gap: 16px;
  padding-top: 0;
}

.o2-hero-headline {
  font-size: clamp(2.65rem, 6.8vw, 6.25rem);
  line-height: 0.92;
  max-width: 820px;
}

.o2-h2 {
  font-size: clamp(2rem, 4.8vw, 4.1rem);
  line-height: 0.96;
}

.o2-final-headline {
  font-size: clamp(2.65rem, 6.8vw, 5.7rem);
}

.o2-hero-figure img {
  min-height: 390px;
  max-height: 540px;
}

.o2-utility {
  margin: 0 0 clamp(22px, 3.2vw, 36px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  box-shadow: 0 14px 34px rgba(14, 14, 14, 0.07);
}

.o2-utility strong {
  font-size: clamp(1.02rem, 1.7vw, 1.28rem);
  line-height: 1.08;
}

.o2-can-shelf {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.o2-can:nth-child(2n),
.o2-can:nth-child(3n) {
  border-right: 1px solid var(--o2-rule);
}

.o2-can:nth-child(4n) {
  border-right: 0;
}

.o2-can:nth-last-child(-n+4) {
  border-bottom: 0;
}

.o2-can strong {
  font-size: clamp(1.05rem, 1.9vw, 1.34rem);
}

.o2-week-photo-card,
.o2-event-feature-card,
.o2-direction-grid,
.o2-can-shelf,
.o2-process,
.o2-utility {
  box-shadow: 0 16px 38px rgba(14, 14, 14, 0.08);
}

.o2-masthead,
body.page-option-two .site-nav-wrap {
  background:
    linear-gradient(90deg, rgba(247, 148, 29, 0.12), transparent 38%),
    var(--o2-paper);
}

.o2-week::before {
  background:
    radial-gradient(circle at 8% 8%, rgba(247, 148, 29, 0.14), transparent 24rem),
    linear-gradient(145deg, var(--o2-paper) 0%, #fff8ea 100%);
}

/* Client feedback pass, 2026-05-13: restore a stronger final section, keep the four utility boxes. */
.o2-visit.o2-visit-final {
  border-top: 4px solid var(--o2-ink);
  border-bottom: 4px solid var(--o2-ink);
}

.o2-visit.o2-visit-final::before {
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(247, 148, 29, 0.08) 12px 13px),
    linear-gradient(135deg, #ecdcb6 0%, #fff0ca 100%);
}

.o2-visit-final-inner {
  max-width: 980px;
  gap: clamp(22px, 4vw, 34px);
}

.o2-visit-final-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.o2-visit-final-copy .o2-chapter {
  color: var(--o2-red);
}

.o2-visit-final-grid {
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: left;
  box-shadow: 0 16px 38px rgba(14, 14, 14, 0.08);
}

.o2-visit-final-grid a {
  background: rgba(255, 248, 234, 0.92);
}

.o2-visit-final-cta {
  width: 100%;
}

@media (max-width: 980px) {
  .o2-visit-final-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .o2-visit-final-grid { grid-template-columns: 1fr; }
  .o2-visit-final-cta { flex-direction: column; align-items: stretch; }
  .o2-visit-final-cta .o2-btn { width: 100%; }
}

@media (max-width: 980px) {
  .o2-hero-grid {
    grid-template-columns: 1fr;
  }

  .o2-can-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .o2-can:nth-child(2n) { border-right: 0; }
  .o2-can:nth-child(4n) { border-right: 0; }
  .o2-can:nth-last-child(-n+4) { border-bottom: 1px solid var(--o2-rule); }
  .o2-can:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 720px) {
  .option-two .o2-hero,
  .option-two .o2-section,
  .option-two .o2-final {
    padding-left: 16px;
    padding-right: 16px;
  }

  .o2-hero { padding-top: 18px; }
  .o2-hero-headline { font-size: clamp(2.25rem, 10vw, 3.6rem); }
  .o2-h2 { font-size: clamp(2rem, 10vw, 3.2rem); }
  .o2-hero-figure img { min-height: 250px; }
  .o2-utility { grid-template-columns: 1fr; }
}


/* ============================================================ */
/* Client feedback pass, 2026-05-13 late: Alex section notes.    */
/* Smaller headings, hero beer photo, monotone weekly photos,     */
/* mobile brewhouse photo sizing, event language, top-left boxes. */
/* ============================================================ */
.o2-hero-topline {
  margin: 0 0 14px;
}

.o2-hero-headline {
  font-size: clamp(2.35rem, 5.8vw, 5.25rem);
  line-height: 0.96;
}

.o2-h2 {
  font-size: clamp(1.85rem, 4.1vw, 3.45rem);
  line-height: 1;
}

.o2-final-headline {
  font-size: clamp(2.25rem, 5.4vw, 4.75rem);
  line-height: 0.96;
}

.o2-section-dek {
  max-width: 960px;
}

.o2-hero-figure img {
  object-position: center 44%;
}

.o2-can-fallback {
  justify-content: center;
  min-height: 250px;
  background:
    linear-gradient(135deg, rgba(143, 23, 31, 0.08), transparent 58%),
    rgba(255, 248, 234, 0.82);
}

.o2-can-fallback-mark {
  width: min(120px, 72%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--o2-ink);
  border-radius: 999px;
  color: var(--o2-red);
  font-family: var(--o2-mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 6px 6px 0 rgba(14, 14, 14, 0.11);
}

.o2-week-photo-card img {
  filter: grayscale(1) sepia(0.18) saturate(0.74) contrast(1.12) brightness(0.82);
}

.o2-week-photo-card::after {
  background: linear-gradient(180deg, rgba(14, 14, 14, 0.12), rgba(14, 14, 14, 0.86));
}

.o2-brewhouse-grid {
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
}

.o2-brewhouse-figure img {
  max-height: 520px;
  object-fit: cover;
  object-position: center 42%;
}

.o2-event-feature-card strong {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  color: var(--o2-red);
}

.o2-event-feature-card:last-child img {
  object-position: center 48%;
}

.o2-event-quote-row .o2-btn {
  width: auto;
  min-width: min(100%, 260px);
}

.o2-direction-grid a,
.o2-visit-final-grid a {
  justify-content: flex-start;
}

@media (max-width: 980px) {
  .o2-brewhouse-grid {
    grid-template-columns: 1fr;
  }

  .o2-brewhouse-figure img {
    max-height: 380px;
  }
}

.o2-hero-copy,
.o2-hero-headline,
.o2-hero-dek,
.o2-hero-coords,
.o2-final-headline,
.o2-final-dek {
  min-width: 0;
  max-width: 100%;
}

.o2-hero-headline span,
.o2-final-headline span,
.o2-hero-coords {
  overflow-wrap: anywhere;
}

/* Client feedback pass, 2026-05-18: hero statement above status, Alex's beer-glass hero,
   crowler fallback card, shorter mobile event cards, and safer final visit headline. */
.o2-hero-headline-top {
  max-width: 1040px;
  margin: 0 0 clamp(18px, 3vw, 30px);
}

.o2-hero-figure img {
  object-position: 70% 58%;
}

.o2-can-crowler {
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(247, 148, 29, 0.08) 8px 9px),
    var(--o2-paper-soft);
}

.o2-crowler-art {
  width: min(112px, 74%);
  aspect-ratio: 0.58;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--o2-ink);
  border-radius: 10px 10px 16px 16px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.34), transparent 24%, transparent 76%, rgba(0,0,0,0.08)),
    linear-gradient(180deg, #f8f0da 0%, #e5d3ad 100%);
  color: var(--o2-ink);
  box-shadow: 0 14px 18px rgba(14, 14, 14, 0.18);
  transition: transform 200ms ease;
}

.o2-crowler-art::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 22%;
  width: 56%;
  height: 12px;
  border: 2px solid var(--o2-ink);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #ded0b6;
}

.o2-crowler-art span,
.o2-crowler-art strong {
  font-family: var(--o2-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.o2-crowler-art span {
  color: var(--o2-red);
  font-size: 0.68rem;
  font-weight: 800;
}

.o2-crowler-art strong {
  font-size: 0.82rem;
  font-weight: 900;
}

.o2-can-crowler:hover .o2-crowler-art {
  transform: translateY(-6px) rotate(-2deg);
}

@media (max-width: 720px) {
  .o2-hero-headline {
    font-size: clamp(1.9rem, 8.4vw, 2.95rem);
  }

  .o2-h2 {
    font-size: clamp(1.8rem, 8.8vw, 2.8rem);
  }

  .o2-final-headline {
    font-size: clamp(2.05rem, 10vw, 3.25rem);
  }

  .o2-hero-dek {
    font-size: 1rem;
  }

  .o2-hero-coords {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .o2-hero-figure img {
    min-height: 300px;
    object-position: 68% 56%;
  }

  .o2-week-photo-card {
    min-height: 205px;
  }

  .o2-week-photo-card div {
    padding: 14px;
  }

  .o2-week-photo-card h3 {
    margin-bottom: 4px;
    font-size: clamp(1.25rem, 7vw, 1.75rem);
  }

  .o2-week-photo-card p {
    display: none;
  }

  .o2-brewhouse-figure img {
    max-height: 300px;
  }
}

/* ============================================================ */
/* Client palette pass, 2026-05-18                              */
/* Alex asked for the same proof in the PowerPoint/BASE palette: */
/* warm cream, charcoal, BASE blue, rust, malt tan, olive, and   */
/* subtle hexagon/connector cues from the deck.                  */
/* ============================================================ */
body.page-option-two {
  --o2-paper: #f4e7d4;
  --o2-paper-soft: #fff3df;
  --o2-paper-deep: #d1b28c;
  --o2-ink: #1e1a17;
  --o2-ink-soft: #44372e;
  --o2-ink-mute: #716255;
  --o2-brand-blue: #5c84c3;
  --o2-brand-blue-deep: #426ba6;
  --o2-rust: #b46d3e;
  --o2-rust-deep: #8f4d2e;
  --o2-malt: #d1b28c;
  --o2-olive: #5e6b3f;
  --o2-red: var(--o2-brand-blue);
  --o2-red-deep: var(--o2-brand-blue-deep);
  --o2-amber: var(--o2-rust);
  --o2-yellow: var(--o2-malt);
  --o2-rule: rgba(30, 26, 23, 0.16);
  --o2-rule-strong: rgba(30, 26, 23, 0.34);
  background:
    radial-gradient(circle at 7% 8%, rgba(92, 132, 195, 0.16), transparent 26rem),
    radial-gradient(circle at 92% 12%, rgba(180, 109, 62, 0.12), transparent 30rem),
    repeating-linear-gradient(0deg, transparent 0, transparent 38px, rgba(30, 26, 23, 0.018) 38px, rgba(30, 26, 23, 0.018) 39px),
    var(--o2-paper);
}

.option-two {
  position: relative;
  background:
    radial-gradient(circle at 10% 6%, rgba(92, 132, 195, 0.18), transparent 28rem),
    radial-gradient(circle at 90% 18%, rgba(180, 109, 62, 0.14), transparent 32rem),
    linear-gradient(180deg, #fff3df 0%, var(--o2-paper) 48%, #fff3df 100%);
}

.option-two::before,
.option-two::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background: var(--o2-brand-blue);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
}

.option-two::before {
  width: clamp(140px, 18vw, 260px);
  aspect-ratio: 1.12;
  top: 84px;
  right: max(18px, calc((100vw - 1240px) / 2 + 24px));
}

.option-two::after {
  width: clamp(90px, 12vw, 170px);
  aspect-ratio: 1.12;
  top: 218px;
  right: max(120px, calc((100vw - 1240px) / 2 + 210px));
  background: var(--o2-rust);
  opacity: 0.12;
}

.option-two > * { position: relative; z-index: 1; }

.o2-masthead,
body.page-option-two .site-nav-wrap {
  background:
    linear-gradient(90deg, rgba(92, 132, 195, 0.14), transparent 42%),
    var(--o2-paper);
}

.o2-masthead { border-top-color: var(--o2-brand-blue); }
.o2-hero-topline,
.o2-rule,
.o2-hero-em,
.o2-util-label,
.o2-chapter,
.o2-can-meta > span,
.o2-link-arrow:hover,
.o2-event-tier,
.o2-event-feature-card strong,
.o2-final-em { color: var(--o2-brand-blue); }
.o2-rule { background: var(--o2-brand-blue); }
.o2-btn-primary,
.o2-btn-ghost,
.o2-btn-ghost-dark {
  background: var(--o2-brand-blue);
  border-color: var(--o2-brand-blue);
  color: #fff;
}
.o2-btn-primary:hover,
.o2-btn-ghost:hover,
.o2-btn-ghost-dark:hover {
  background: var(--o2-brand-blue-deep);
  border-color: var(--o2-brand-blue-deep);
}

.o2-utility > div:nth-child(1) { border-top: 4px solid var(--o2-brand-blue); }
.o2-utility > div:nth-child(2) { border-top: 4px solid var(--o2-rust); }
.o2-utility > div:nth-child(3) { border-top: 4px solid var(--o2-malt); }
.o2-utility > div:nth-child(4) { border-top: 4px solid var(--o2-olive); }

.o2-on-tap::before,
.o2-events::before {
  background:
    radial-gradient(circle at 92% 8%, rgba(92, 132, 195, 0.11), transparent 24rem),
    linear-gradient(135deg, var(--o2-paper-soft) 0%, #ead7b8 100%);
}

.o2-week::before {
  background:
    radial-gradient(circle at 8% 8%, rgba(92, 132, 195, 0.16), transparent 24rem),
    radial-gradient(circle at 86% 36%, rgba(180, 109, 62, 0.1), transparent 24rem),
    linear-gradient(145deg, var(--o2-paper) 0%, #fff3df 100%);
}

.o2-visit.o2-visit-final::before,
.o2-final::before {
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(92, 132, 195, 0.08) 12px 13px),
    linear-gradient(135deg, #d1b28c 0%, #f3dfbb 100%);
}

.o2-brewhouse::before {
  background:
    radial-gradient(circle at 12% 14%, rgba(92, 132, 195, 0.2), transparent 28rem),
    linear-gradient(135deg, #1e1a17 0%, #2a211b 100%);
}

.o2-brewhouse-copy strong,
.o2-chapter-light { color: var(--o2-malt); }
.o2-week-photo-card span { color: var(--o2-malt); }
.o2-week-photo-card::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  width: 34px;
  aspect-ratio: 1.12;
  border: 2px solid rgba(244, 231, 212, 0.82);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
}

.o2-can-shelf {
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(92, 132, 195, 0.08) 8px 9px),
    var(--o2-paper-soft);
}

.o2-can-crowler {
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(180, 109, 62, 0.1) 8px 9px),
    var(--o2-paper-soft);
}

.o2-crowler-art {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.34), transparent 24%, transparent 76%, rgba(0,0,0,0.08)),
    linear-gradient(180deg, #f3dfbb 0%, var(--o2-malt) 100%);
}
.o2-crowler-art span { color: var(--o2-rust); }

.o2-event-feature-card strong {
  color: var(--o2-rust);
}

.o2-direction-grid a:hover {
  background: var(--o2-brand-blue);
  color: #fff;
}

@media (max-width: 720px) {
  .option-two::before,
  .option-two::after { display: none; }
  .o2-utility > div { border-top-width: 3px; }
}