/* Brewed Awakening: Rock Island coffee journal brand refresh */
:root {
  --ba-ink: #25130e;
  --ba-ink-soft: #57362a;
  --ba-paper: #f9f1e3;
  --ba-paper-deep: #ead4af;
  --ba-clay: #b9482d;
  --ba-clay-dark: #8e311f;
  --ba-blush: #d99273;
  --ba-brass: #bc8a4c;
  --ba-line: rgba(74, 36, 22, .19);
  --ba-script: "Caveat", cursive;
  --ba-serif: "Fraunces", Georgia, serif;
  --ba-mono: "DM Mono", monospace;
  --ba-sans: "DM Sans", sans-serif;
}
html { background: var(--ba-ink); }
body {
  background-color: var(--ba-paper) !important;
  color: var(--ba-ink) !important;
  background-image:
    radial-gradient(circle at 12% 14%, rgba(181, 111, 74, .10) 0 1px, transparent 1.4px),
    radial-gradient(circle at 88% 66%, rgba(120, 66, 37, .08) 0 1px, transparent 1.2px);
  background-size: 18px 18px, 23px 23px;
}
.page-grain { opacity: .04; mix-blend-mode: multiply; }

.site-header {
  height: 92px;
  padding: 0 clamp(22px, 4.3vw, 74px);
  background: rgba(249, 241, 227, .86);
  border-bottom: 1px solid rgba(73, 34, 19, .14);
  color: var(--ba-ink);
  box-shadow: 0 6px 25px rgba(67, 32, 18, .05);
  backdrop-filter: blur(15px);
}
.wordmark { width: 58px !important; height: 58px !important; position: relative; }
.wordmark::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(172, 65, 37, .24);
  border-radius: 50%;
  transform: rotate(-9deg);
  transition: transform .35s ease, border-color .35s ease;
}
.wordmark:hover::after { transform: rotate(11deg) scale(1.05); border-color: var(--ba-clay); }
.wordmark img { width: 58px !important; height: 58px !important; position: relative; z-index: 1; }
.nav-links { gap: clamp(20px, 3vw, 45px); color: var(--ba-ink); }
.nav-links a { letter-spacing: .13em; font-size: 10px; }
.nav-links a::after { background: var(--ba-clay); height: 2px; }
.header-cta { color: var(--ba-clay-dark); font-weight: 500; letter-spacing: .12em; }
.header-cta span { color: var(--ba-clay); }

.hero {
  min-height: min(870px, 100vh);
  grid-template-columns: minmax(440px, 49%) 1fr;
  background: var(--ba-paper);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -22vw;
  top: 17%;
  width: 53vw;
  height: 53vw;
  border: 1px solid rgba(179, 70, 40, .18);
  border-radius: 50%;
  box-shadow: 24px 25px 0 -23px rgba(179, 70, 40, .2), 75px 54px 0 -72px rgba(179, 70, 40, .2);
  pointer-events: none;
}
.hero-copy {
  z-index: 2;
  padding: 164px clamp(30px, 8vw, 132px) 72px;
  justify-content: flex-start;
}
.hero-copy::before { display: none; }
.brand-row { margin: 0 0 35px !important; position: relative; }
.brand-row .coffee-note {
  color: var(--ba-clay) !important;
  font-size: clamp(22px, 2vw, 28px);
  line-height: .95;
  transform: rotate(-7deg);
  position: relative;
  padding-left: 32px !important;
}
.brand-row .coffee-note::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 3px;
  font: 12px var(--ba-mono);
  color: var(--ba-clay);
}
#hero-title {
  color: var(--ba-ink) !important;
  max-width: 630px;
  font-size: clamp(60px, 7.15vw, 116px);
  line-height: .84;
  letter-spacing: -.075em;
  margin-bottom: 31px;
}
.hero-copy > p:not(.hero-subnote) {
  max-width: 405px;
  color: var(--ba-ink-soft) !important;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 22px;
}
.hero-subnote {
  color: var(--ba-clay) !important;
  margin: 4px 0 31px !important;
  font-size: 23px !important;
}
.hero-actions { gap: 26px; }
.button {
  min-height: 52px;
  padding: 16px 23px;
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(142, 49, 31, .18);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.button:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(142, 49, 31, .18); }
.button-solid { background: var(--ba-clay); color: #fff9ee; }
.button-solid::before { background: var(--ba-ink); }
.text-link { color: var(--ba-clay-dark); border-bottom-width: 1px; }
.hero-details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 48px;
  color: var(--ba-ink-soft);
  font: 500 9px/1.5 var(--ba-mono);
  letter-spacing: .12em;
}
.hero-details-dot { color: var(--ba-clay); font-size: 13px; }
.hero-photo {
  width: 104%;
  margin-left: -4%;
  min-height: min(870px, 100vh);
  clip-path: polygon(7% 0, 100% 0, 100% 96%, 92% 100%, 2% 96%, 0 5%);
  box-shadow: -24px 25px 0 rgba(190, 110, 74, .52), 10px 10px 0 rgba(66, 28, 15, .18);
}
.hero-photo::after {
  background: linear-gradient(90deg, var(--ba-paper) 0, rgba(249,241,227,.83) 9%, rgba(249,241,227,.18) 27%, transparent 49%);
}
.hero-photo img {
  object-position: 61% center;
  filter: sepia(.18) saturate(.9) contrast(1.02) brightness(1.04);
}
.hero-photo::before {
  content: "a little ritual, every day";
  right: 45px;
  bottom: 39px;
  font-size: clamp(20px, 2vw, 29px);
}
.hero-logo-stamp {
  width: 92px !important;
  height: 92px !important;
  left: 45% !important;
  bottom: 16% !important;
  opacity: .72 !important;
}
.hero-heart { color: var(--ba-clay); right: 48%; top: 25%; }
.hero-postmark {
  right: clamp(24px, 4vw, 64px);
  bottom: 80px;
  border-color: var(--ba-clay);
  color: var(--ba-clay);
  background: rgba(249,241,227,.9);
  width: 102px;
  height: 102px;
}
.welcome-strip {
  min-height: 86px;
  background: var(--ba-ink);
  color: #f7e7cf;
  border-top: 1px solid rgba(239, 190, 126, .25);
  border-bottom: 1px solid rgba(239, 190, 126, .25);
  letter-spacing: .15em;
}
.welcome-strip span { background: var(--ba-blush); box-shadow: 0 0 0 4px rgba(217,146,115,.13); }

.menu-section {
  background: #f0d8b5 !important;
  padding-block: clamp(110px, 13vw, 185px);
  gap: clamp(60px, 11vw, 200px);
}
.menu-section::before {
  width: 440px;
  height: 440px;
  top: 58px;
  border-color: rgba(140, 48, 26, .18);
}
.menu-section::after {
  content: "THE DAILY POUR";
  position: absolute;
  right: clamp(28px, 7vw, 110px);
  top: 48px;
  color: rgba(129, 46, 28, .55);
  font: 500 9px var(--ba-mono);
  letter-spacing: .23em;
  transform: rotate(90deg) translateX(100%);
  transform-origin: right top;
}
.section-label { color: var(--ba-clay) !important; letter-spacing: .17em; }
.section-intro h2,
.space-copy h2,
.story-section h2,
.visit-lead h2 { color: var(--ba-ink) !important; letter-spacing: -.06em; }
.section-intro h2 { font-size: clamp(45px, 4.7vw, 76px); line-height: .9; }
.section-intro > p:not(.section-label) { color: var(--ba-ink-soft) !important; font-size: 16px; }
.menu-list { border-color: rgba(79, 34, 18, .25) !important; }
.menu-item {
  padding: 33px 29px 30px 0;
  border-color: rgba(79, 34, 18, .25) !important;
  border-left: 0;
}
.menu-item::before { background: var(--ba-clay); }
.menu-item:hover {
  padding-left: 18px;
  background: rgba(255, 250, 238, .36);
}
.menu-item:hover::after { color: var(--ba-clay); }
.menu-number,.menu-mark { color: var(--ba-clay) !important; }
.menu-item h3 { color: var(--ba-ink) !important; font-size: 31px; }
.menu-item div p { color: var(--ba-ink-soft) !important; }
.menu-list::after { color: var(--ba-clay-dark); font-size: 27px; }
.menu-scribble { color: var(--ba-clay-dark); font-size: 31px; }

.space-section {
  min-height: 700px;
  background: var(--ba-blush) !important;
  grid-template-columns: 1.08fr .92fr;
}
.space-section::before { background: rgba(249, 241, 227, .78); box-shadow: 0 8px 18px rgba(78,34,18,.16); }
.space-image { min-height: 700px; clip-path: polygon(0 0,95% 0,100% 6%,96% 100%,0 93%); }
.space-image::after {
  background: linear-gradient(90deg, rgba(67, 27, 14, .1), transparent 45%);
}
.space-image img { filter: sepia(.22) saturate(.86) contrast(1.04); }
.space-copy {
  background: #f8eddb !important;
  padding: clamp(78px, 9vw, 150px) clamp(30px, 7vw, 118px);
}
.space-copy::before {
  content: "A PLACE TO PAUSE";
  position: absolute;
  left: -29px;
  bottom: 94px;
  color: var(--ba-clay);
  font: 500 9px var(--ba-mono);
  letter-spacing: .18em;
  transform: rotate(-90deg);
  transform-origin: left top;
}
.space-copy h2 { font-size: clamp(47px, 4.5vw, 73px); line-height: .91; }
.space-copy > p:not(.section-label) { color: var(--ba-ink-soft) !important; font-size: 17px; }
.little-stamp { border-color: var(--ba-clay); color: var(--ba-clay); background: rgba(255,249,238,.45); }
.quote { border-color: rgba(79, 34, 18, .24); }
.quote span { color: var(--ba-clay); }
.quote p { color: var(--ba-ink); }

.story-section {
  min-height: 690px;
  padding-block: clamp(125px, 15vw, 205px);
  background: #402219 !important;
  color: #f8e6c9;
  position: relative;
}
.story-section::before {
  content: "FROM ROCK ISLAND, WITH LOVE";
  left: clamp(26px, 6vw, 100px);
  top: 52px;
  color: var(--ba-blush);
  font: 600 25px/1 var(--ba-script);
  transform: rotate(-6deg);
}
.story-section::after {
  content: "✦";
  right: clamp(36px, 7vw, 120px);
  bottom: 55px;
  color: var(--ba-brass);
  font: 100px/1 var(--ba-serif);
  opacity: .65;
}
.story-section h2 { color: #fff1d9 !important; font-size: clamp(51px, 5.4vw, 85px); }
.story-section p:not(.section-label) { color: #f3cda7 !important; font-size: 17px; }
.story-section .section-label { color: var(--ba-blush) !important; }
.house-note {
  background: #f7ead6;
  color: var(--ba-ink);
  box-shadow: 12px 13px 0 rgba(182, 72, 45, .75), 0 18px 30px rgba(0,0,0,.18);
}
.note-number,.note-label,.note-heart { color: var(--ba-clay) !important; }
.note-main { color: var(--ba-ink) !important; font-size: 36px; }
.note-small { color: var(--ba-ink-soft) !important; }
.house-note::after {
  content: "BA • 01";
  position: absolute;
  right: 18px;
  top: 23px;
  color: rgba(91, 47, 35, .45);
  font: 500 8px var(--ba-mono);
  letter-spacing: .1em;
}

.visit-section {
  background: #f8eddb !important;
  padding-block: clamp(100px, 12vw, 160px);
}
.visit-section::before {
  content: "COME AS YOU ARE";
  position: absolute;
  right: clamp(25px, 7vw, 118px);
  bottom: 58px;
  color: rgba(178, 71, 43, .42);
  font: 600 29px var(--ba-script);
  transform: rotate(-7deg);
}
.visit-section::after { border-color: rgba(178,77,47,.17); }
.visit-lead h2 { font-size: clamp(50px, 5vw, 81px); line-height: .9; }
.visit-lead > p:not(.section-label) { color: var(--ba-ink-soft) !important; }
.button-dark { background: var(--ba-ink); color: #fff5e4; box-shadow: 4px 4px 0 rgba(178,77,47,.22); }
.button-dark::before { background: var(--ba-clay); }
.visit-note { color: var(--ba-clay-dark); font-size: 30px; }
.visit-details { border-color: rgba(79,34,18,.24); }
.detail-label { color: var(--ba-clay) !important; }
.visit-details div > p:not(.detail-label) { color: var(--ba-ink); }
.email-form { border-color: var(--ba-ink); }
.email-form input { color: var(--ba-ink); }
.email-form button { color: var(--ba-clay); }

footer {
  background: #24130e;
  color: #e9c89e;
  padding-block: 52px;
}
footer::before {
  content: "GOOD COFFEE • GOOD PEOPLE •";
  position: absolute;
  left: clamp(24px, 4vw, 66px);
  top: 18px;
  color: rgba(238, 190, 134, .55);
  font: 500 8px var(--ba-mono);
  letter-spacing: .2em;
}
footer .footer-logo { color: #fff1d9; }
footer em { color: var(--ba-blush); }

@media (max-width: 850px) {
  .site-header { height: 76px; padding-inline: 23px; }
  .wordmark,.wordmark img { width: 44px !important; height: 44px !important; }
  .nav-links { top: 76px; background: #f9f1e3; }
  .menu-toggle span { background: var(--ba-ink); }
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-copy { padding: 119px 28px 60px; min-height: 590px; }
  .hero::before { width: 110vw; height: 110vw; left: -54vw; top: 92px; }
  #hero-title { font-size: clamp(62px, 19vw, 88px); }
  .hero-details { margin-top: 36px; }
  .hero-photo { width: 100%; margin: 0; min-height: 440px; clip-path: polygon(0 0,100% 0,100% 95%,90% 100%,0 96%); }
  .hero-photo::after { background: linear-gradient(180deg, var(--ba-paper), rgba(249,241,227,.15) 25%, transparent 44%); }
  .hero-logo-stamp { width: 72px !important; height: 72px !important; left: 55% !important; bottom: 18% !important; }
  .hero-heart { right: 32px; top: 235px; }
  .hero-postmark { display: grid !important; right: 24px; bottom: 36px; width: 84px; height: 84px; font-size: 8px; }
  .welcome-strip { min-height: 100px; line-height: 1.55; }
  .welcome-strip p:nth-of-type(2),.welcome-strip span:nth-of-type(2) { display: none; }
  .menu-section::after,.space-copy::before { display: none; }
  .space-section { display: flex; flex-direction: column; }
  .space-image { min-height: 410px; }
  .space-copy { padding: 78px 28px 86px; }
  .story-section { padding: 110px 28px 95px; }
  .story-section::before { left: 28px; top: 38px; font-size: 23px; }
  .visit-section::before { right: 28px; bottom: 36px; }
  footer { padding-top: 61px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-details span { animation: ba-rise .7s both; }
  .hero-details span:nth-child(2) { animation-delay: .12s; }
  .hero-details span:nth-child(3) { animation-delay: .22s; }
  @keyframes ba-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

@media (max-width:850px) {
  .site-header:has(.menu-toggle[aria-expanded="true"]) .nav-links { display:flex !important; }
  body:has(#menu:target) .site-header .nav-links,
  body:has(#space:target) .site-header .nav-links,
  body:has(#story:target) .site-header .nav-links,
  body:has(#visit:target) .site-header .nav-links { display:none !important; }
  body:has(#menu:target) .menu-toggle[aria-expanded="true"] span:first-child,
  body:has(#space:target) .menu-toggle[aria-expanded="true"] span:first-child,
  body:has(#story:target) .menu-toggle[aria-expanded="true"] span:first-child,
  body:has(#visit:target) .menu-toggle[aria-expanded="true"] span:first-child { transform:none; }
  body:has(#menu:target) .menu-toggle[aria-expanded="true"] span:last-child,
  body:has(#space:target) .menu-toggle[aria-expanded="true"] span:last-child,
  body:has(#story:target) .menu-toggle[aria-expanded="true"] span:last-child,
  body:has(#visit:target) .menu-toggle[aria-expanded="true"] span:last-child { transform:none; }
}