:root {
  --yellow: #f7b900;
  --yellow-dark: #dc9f00;
  --ink: #111111;
  --paper: #f7f3e9;
  --paper-2: #fffdf7;
  --muted: #5f5b52;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper-2);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 20px; top: 20px; z-index: 100; background: white; padding: 10px 14px; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; text-transform: uppercase; }
h1 { font-size: clamp(3rem, 7vw, 6.3rem); margin-bottom: 26px; letter-spacing: -.035em; }
h1 span, .kicker { color: var(--yellow); }
h2 { font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.025em; }
h3 { font-size: clamp(1.3rem, 2vw, 2rem); text-transform: none; }
.kicker { font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  background: var(--yellow);
  border: 2px solid var(--yellow);
  color: #111;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  transition: .2s ease;
}
.button:hover, .button:focus-visible { background: transparent; }

.hero {
  min-height: 690px;
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,248,226,.96) 0%, rgba(255,246,216,.87) 38%, rgba(255,240,195,.15) 68%),
    url('../images/hero-temp.jpg') right center / 55% 100% no-repeat,
    linear-gradient(135deg, #f4d99c, #7b6a43);
}
.hero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(25,15,2,.2), transparent 35%); pointer-events: none; }
.hero__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding-block: 70px; }
.hero__copy { max-width: 560px; }
.hero__copy > p:not(.hero__eyebrow) { font-size: 1.15rem; max-width: 520px; margin-bottom: 28px; }
.hero__eyebrow { display: none; }
.hero__brand { justify-self: center; text-align: center; transform: translateY(-125px); }
.brand-mark { font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: clamp(4rem, 8vw, 7rem); line-height: .8; }
.brand-subline { font-family: Georgia, serif; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 800; letter-spacing: .03em; }
.hero__brand small { font-weight: 700; text-transform: uppercase; }

.benefits { background: var(--paper); padding: 44px 0; }
.benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.benefit { text-align: center; padding: 15px 28px; border-right: 1px solid rgba(220,159,0,.45); }
.benefit:last-child { border-right: 0; }
.benefit__icon { color: var(--yellow); font-size: 3.2rem; line-height: 1; margin-bottom: 18px; }
.benefit h2 { font-size: 1.05rem; margin-bottom: 9px; }
.benefit p { margin: 0; color: var(--muted); }

.section { padding: 80px 0; }
.beers { background: #fffefb; position: relative; overflow: hidden; }
.beers::after { content: ''; position: absolute; width: 320px; height: 520px; right: -80px; top: 40px; opacity: .08; background: repeating-linear-gradient(72deg, transparent 0 13px, #91773f 14px 16px); transform: rotate(-10deg); }
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.product-image { width: min(560px, 100%); margin-top: 24px; filter: contrast(1.03); }
.copy-block { max-width: 500px; }
.copy-block p { font-size: 1.08rem; margin-bottom: 28px; }

.story { display: grid; grid-template-columns: 1fr 1fr; min-height: 490px; background: #0b0b0b; color: white; }
.story__copy { display: grid; align-items: center; background: radial-gradient(circle at 20% 15%, #242424, #070707 72%); }
.story__inner { width: min(100% - 40px, 560px); margin-left: auto; padding: 60px 55px 60px 20px; }
.story__inner p:not(.kicker) { color: #e7e7e7; font-size: 1.05rem; }
.story__image { background: linear-gradient(90deg, rgba(0,0,0,.32), transparent), url('../images/brewery-temp.jpg') center / cover no-repeat; }

.events { display: grid; grid-template-columns: 1fr 1fr; min-height: 360px; background: var(--paper); }
.events__image { background: url('../images/events-temp.jpg') center / cover no-repeat; }
.events__copy { display: grid; align-items: center; }
.events__inner { width: min(100% - 40px, 560px); padding: 55px 20px 55px 55px; display: grid; grid-template-columns: 74px 1fr; gap: 24px; }
.events h2 { font-size: clamp(1.8rem, 3vw, 3rem); }
.calendar-icon { color: var(--yellow); border: 4px solid currentColor; font-size: 2.2rem; height: 64px; display: grid; place-items: center; }

.footer-main { background: var(--yellow); padding: 42px 0; }
.footer-grid { display: grid; grid-template-columns: .72fr 1.45fr 1fr; gap: 55px; align-items: start; }
.footer-brand img { max-width: 210px; mix-blend-mode: multiply; }
.footer-grid h2 { font-size: 1rem; margin-bottom: 8px; }
.footer-grid p { margin-bottom: 16px; font-size: .95rem; }
.footer-bottom { background: #111; color: #ddd; text-align: center; padding: 18px 20px; font-size: .9rem; }

@media (max-width: 900px) {
  .hero { min-height: 760px; background-size: auto 100%; background-position: 62% center; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { padding-top: 180px; }
  .hero__brand { position: absolute; top: 38px; left: 50%; transform: translateX(-50%); width: 100%; }
  .benefits__grid { grid-template-columns: 1fr 1fr; }
  .benefit:nth-child(2) { border-right: 0; }
  .benefit:nth-child(-n+2) { border-bottom: 1px solid rgba(220,159,0,.35); }
  .split { grid-template-columns: 1fr; gap: 35px; }
  .story, .events { grid-template-columns: 1fr; }
  .story__image, .events__image { min-height: 330px; }
  .events__image { order: 2; }
  .story__inner, .events__inner { width: min(100% - 40px, var(--max)); margin: auto; padding: 55px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .hero { min-height: 710px; background-position: 68% center; }
  .hero::before { content: ''; position: absolute; inset: 0; background: rgba(255,245,214,.25); }
  .hero__copy { padding-top: 175px; position: relative; }
  .hero__brand { top: 28px; }
  .brand-mark { font-size: 3.5rem; }
  .brand-subline { font-size: 1.6rem; }
  .benefits__grid { grid-template-columns: 1fr; }
  .benefit { border-right: 0; border-bottom: 1px solid rgba(220,159,0,.35); padding: 28px 10px; }
  .benefit:last-child { border-bottom: 0; }
  .section { padding: 58px 0; }
  .events__inner { grid-template-columns: 1fr; }
  .calendar-icon { width: 64px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}