/* ============================================================
   Homepage + decorative sections — Nicholas Coffee & Tea Co.
   ============================================================ */

/* ---------- Hero: split archival print layout ---------- */
.hero { border-bottom: 3px double var(--ink); overflow: hidden; }
.hero .wrap {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
@media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; } }

.hero-copy .est-line {
  display: flex; align-items: center; gap: 1rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--copper);
  margin-bottom: 1.4rem;
}
.hero-copy .est-line::after { content: ""; flex: 1; max-width: 110px; height: 1px; background: var(--line); }
.hero-copy h1 { margin-bottom: 1rem; }
.hero-copy h1 em { font-style: italic; color: var(--brick); }
.hero-copy .lede { margin-bottom: 1.8rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero-media { position: relative; }
.hero-media .stamp { position: absolute; top: -34px; right: -16px; z-index: 2; }
@media (max-width: 880px) { .hero-media .stamp { top: -28px; right: 4px; } }
.hero-media .photo-frame { transform: rotate(.6deg); }
.hero-media .hero-img { aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- Heritage band (parallax) ---------- */
.heritage { position: relative; color: var(--paper); overflow: hidden; }
.heritage .heritage-bg {
  position: absolute; inset: -12% 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: sepia(.25) brightness(.5);
  will-change: transform;
}
.heritage .wrap { position: relative; z-index: 1; padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(4rem, 9vw, 7rem); max-width: 820px; text-align: center; }
.heritage .eyebrow { color: #D9B98C; }
.heritage h2 { color: #FFFDF7; font-size: clamp(1.9rem, 4vw, 3rem); }
.heritage p { color: #EFE5CF; font-size: 1.08rem; max-width: 60ch; margin: 0 auto 1.6rem; }
.heritage .orn { color: #D9B98C; justify-content: center; }
.heritage .orn::before, .heritage .orn::after { background: rgba(239,229,207,.4); }

/* ---------- Best sellers ---------- */
.bestsellers .section-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; max-width: none; }
.bestsellers .section-head .bs-link { white-space: nowrap; margin-bottom: .4rem; }
@media (max-width: 640px) { .bestsellers .section-head { flex-direction: column; align-items: flex-start; } }

/* ---------- Coffee bar promo: split band ---------- */
.barband { background: var(--paper-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.barband .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
@media (max-width: 880px) { .barband .wrap { grid-template-columns: 1fr; } }
.barband .photo-frame { transform: rotate(-.6deg); }
.barband .bar-img { aspect-ratio: 4 / 3; object-fit: cover; }
.bar-points { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.bar-points li { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .65rem; color: var(--ink-soft); }
.bar-points li::before { content: "◆"; color: var(--copper); font-size: .7rem; }

/* ---------- Why Nicholas ---------- */
.why .card h3 { display: flex; align-items: center; gap: .7rem; }
.why .card .why-num { font-family: var(--serif); font-style: italic; color: var(--copper); font-size: 1.6rem; }
.why .card p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

/* ---------- Visit CTA ---------- */
.visit-cta { text-align: center; }
.visit-cta .card--label { max-width: 760px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem); }
.visit-cta .addr { font-family: var(--serif); font-size: 1.15rem; margin-bottom: 1.4rem; }
.visit-cta .addr .confirm { color: var(--ink-soft); font-style: italic; font-size: .95rem; }

/* ---------- Story page timeline ---------- */
.timeline { position: relative; margin: 2.5rem 0; padding-left: 2rem; border-left: 3px double var(--line); }
.timeline-item { position: relative; padding-bottom: 2.2rem; }
.timeline-item::before {
  content: "◆"; position: absolute; left: calc(-2rem - 9px);
  color: var(--brick); background: var(--paper); padding: .2rem 0; font-size: .8rem;
}
.timeline-item .t-year { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--brick); display: block; margin-bottom: .3rem; }
.timeline-item p { color: var(--ink-soft); max-width: 62ch; margin: 0; }

/* ---------- Category page rows ---------- */
.cat-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; padding: clamp(2rem, 4vw, 3rem) 0; border-bottom: 1px solid var(--line); }
.cat-row:last-child { border-bottom: none; }
@media (max-width: 800px) { .cat-row { grid-template-columns: 1fr; } }
.cat-row .photo-frame img { aspect-ratio: 4 / 3; object-fit: cover; }
.cat-row h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.cat-row p { color: var(--ink-soft); }

/* ---------- Counters ---------- */
.counter { font-variant-numeric: tabular-nums; }