/* ============================================================
   BLANCO — editorial coffee storefront
   Scarlet ink on cream, after the Redbrick reference system.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400&display=swap');

:root {
  /* Colors */
  --color-brick-red: #e82c2a;
  --color-press-black: #e82c2a;
  --color-cream-white: #ffffff;
  --color-soft-grey: #f2f2f2;
  --color-carbon: #ffffff;

  /* Type families (substitutes per the spec) */
  --font-surt: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-editorial-old: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-gtstandard-m: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-50: 50px;
  --spacing-117: 117px;
  --spacing-234: 234px;

  /* Radius */
  --radius-md: 3.75px;
  --radius-3xl: 25px;
  --radius-full: 50px;

  /* Layout */
  --section-gap: 50px;
  --card-padding: 30px;
  --element-gap: 10px;
  --page-pad: 30px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-surt);
  font-weight: 700;
  color: var(--color-brick-red);
  background: var(--color-cream-white);
  -webkit-font-smoothing: antialiased;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.017em;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* ---------- Type roles ---------- */
.display {
  font-family: var(--font-editorial-old);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  color: var(--color-brick-red);
  font-size: clamp(64px, 11vw, 132px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  font-feature-settings: "clig" on, "liga" on;
}
.display-lg {
  font-family: var(--font-editorial-old);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  color: var(--color-brick-red);
  font-size: clamp(72px, 16vw, 150px);
  line-height: 1.0;
  letter-spacing: -0.005em;
  font-feature-settings: "clig" on, "liga" on;
}
.subhead {
  font-family: var(--font-editorial-old);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  color: var(--color-brick-red);
  font-size: clamp(56px, 9vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.body { font-size: 20px; line-height: 1.3; letter-spacing: 0.017em; }
.body-sm { font-size: 15px; line-height: 1.5; letter-spacing: 0.013em; }
.micro {
  font-family: var(--font-gtstandard-m);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Layout shell ---------- */
.wrap { width: 100%; padding-inline: var(--page-pad); }
section { padding-block: var(--section-gap); }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce {
  background: var(--color-brick-red);
  color: #fff;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--spacing-8) var(--page-pad);
}
.announce__tag {
  font-family: var(--font-gtstandard-m);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.announce__nav {
  position: absolute;
  right: var(--page-pad);
  display: flex;
  gap: var(--spacing-20);
}
.announce__nav a {
  font-family: var(--font-gtstandard-m);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  transition: opacity .2s;
}
.announce__nav a:hover { opacity: .7; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header { background: var(--color-cream-white); position: sticky; top: 0; z-index: 50; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-20) var(--page-pad);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  color: var(--color-brick-red);
}
.brand__mark { width: 18px; height: 18px; flex: none; }
.brand__word {
  font-family: var(--font-surt);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--color-brick-red);
}
.nav__links { display: flex; gap: var(--spacing-30); align-items: center; }
.nav__links a {
  font-size: 15px;
  letter-spacing: 0.013em;
  color: var(--color-brick-red);
  transition: opacity .2s;
}
.nav__links a:hover { opacity: .65; }
.nav__links a[aria-current="page"] { opacity: .55; }

.nav__toggle { display: none; background: none; border: 0; cursor: pointer; }
.nav__toggle span { font-size: 15px; color: var(--color-brick-red); letter-spacing: 0.013em; }

.rule { height: 1px; background: var(--color-brick-red); width: 100%; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.runhead { padding-inline: var(--page-pad); }

/* Large Fraunces section title (used by most sections) */
.section-title {
  font-family: var(--font-editorial-old);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  color: var(--color-brick-red);
  font-size: clamp(56px, 9vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin-top: var(--spacing-20);
}

/* Centred 3-part bar (Blends): arrows left / title centre / link right, BELOW the rule */
.barhead { padding-inline: var(--page-pad); }
.barhead__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: var(--spacing-20);
}
.barhead__left { justify-self: start; }
.barhead__center {
  justify-self: center;
  font-size: 20px;
  letter-spacing: 0.017em;
  color: var(--color-brick-red);
}
.barhead__right { justify-self: end; }

.runhead__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--spacing-10);
}
.runhead__label {
  font-family: var(--font-gtstandard-m);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brick-red);
}
.arrow-link {
  font-size: 15px;
  letter-spacing: 0.013em;
  color: var(--color-brick-red);
  border-radius: var(--radius-md);
  transition: opacity .2s;
  white-space: nowrap;
}
.arrow-link:hover { opacity: .65; }

/* ============================================================
   EDITORIAL 50/50 SPLIT
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-50);
  align-items: center;
  padding-inline: var(--page-pad);
}
.split--rev .split__media { order: 2; }
.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-3xl);
  aspect-ratio: 4 / 3;
}
.split__text { max-width: 480px; display: flex; flex-direction: column; gap: var(--spacing-20); }
.split__text .body { color: var(--color-press-black); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: var(--spacing-50); }
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-50);
  align-items: center;
  padding-inline: var(--page-pad);
}
.hero__copy { display: flex; flex-direction: column; gap: var(--spacing-20); }
.hero__copy .body { color: var(--color-press-black); max-width: 440px; }
.hero__media img {
  width: 100%;
  border-radius: var(--radius-3xl);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ============================================================
   OUTLINED ACTION LINK
   ============================================================ */
.action {
  display: inline-block;
  border: 1px solid var(--color-brick-red);
  border-radius: var(--radius-full);
  color: var(--color-brick-red);
  font-size: 15px;
  letter-spacing: 0.013em;
  padding: var(--spacing-10) var(--spacing-20);
  transition: background .2s, color .2s;
  width: fit-content;
  cursor: pointer;
  background: none;
  font-family: var(--font-surt);
}
.action:hover { background: var(--color-brick-red); color: #fff; }

/* ============================================================
   PRODUCT CARD GRID
   ============================================================ */
.cards {
  padding-inline: var(--page-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-20);
}
.card {
  background: var(--color-soft-grey);
  border-radius: var(--radius-3xl);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-15);
}
.card__img {
  background: #ededed;
  border-radius: var(--radius-3xl);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__name {
  font-size: 20px;
  letter-spacing: 0.017em;
  color: var(--color-press-black);
}
.card__notes {
  font-family: var(--font-gtstandard-m);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brick-red);
  line-height: 1.6;
}
.card__price {
  font-size: 15px;
  letter-spacing: 0.013em;
  color: var(--color-press-black);
  margin-top: auto;
}

/* ============================================================
   QUIZ
   ============================================================ */
.quiz { padding-inline: var(--page-pad); }
.quiz__lead { max-width: 520px; display: flex; flex-direction: column; gap: var(--spacing-15); margin-bottom: var(--spacing-30); }
.quiz__lead .body { color: var(--color-press-black); }
.chips { display: flex; flex-wrap: wrap; gap: var(--spacing-10); margin-bottom: var(--spacing-30); }
.chip {
  border: 1px solid var(--color-brick-red);
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-brick-red);
  font-family: var(--font-surt);
  font-size: 15px;
  letter-spacing: 0.013em;
  padding: var(--spacing-10) var(--spacing-20);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.chip[aria-pressed="true"] { background: var(--color-brick-red); color: #fff; }
.quiz__actions { display: flex; gap: var(--spacing-15); align-items: center; flex-wrap: wrap; }
.quiz__reset {
  font-size: 15px;
  letter-spacing: 0.013em;
  color: var(--color-brick-red);
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-surt);
}
.quiz__reset:hover { opacity: .65; }

.result { margin-top: var(--spacing-50); display: none; }
.result.is-visible { display: block; }
.result__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--spacing-50);
  align-items: center;
  background: var(--color-soft-grey);
  border-radius: var(--radius-3xl);
  padding: var(--card-padding);
}
.result__img {
  background: #ededed;
  border-radius: var(--radius-3xl);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.result__img img { width: 100%; height: 100%; object-fit: cover; }
.result__copy { display: flex; flex-direction: column; gap: var(--spacing-15); }
.result__copy .subhead { font-size: clamp(30px, 4vw, 48px); line-height: 1.04; }
.result__copy .body { color: var(--color-brick-red); }
.result__match {
  font-family: var(--font-gtstandard-m);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-brick-red);
}

/* ============================================================
   LOCATIONS GALLERY
   ============================================================ */
.gallery {
  padding-inline: var(--page-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-20);
}
.loc {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}
.loc__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-3xl);
}
.loc__name { font-size: 20px; letter-spacing: 0.017em; color: var(--color-press-black); }
.loc__meta { font-size: 15px; line-height: 1.5; letter-spacing: 0.013em; color: var(--color-press-black); }
.loc__meta span { display: block; }
.loc__hours { color: var(--color-brick-red); }

/* ============================================================
   NEWSLETTER BAND
   ============================================================ */
.band { padding-inline: var(--page-pad); }
.band__inner .subhead { font-size: clamp(30px, 4.5vw, 56px); line-height: 1.02; }
.band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-30);
  flex-wrap: wrap;
}
.subscribe { display: flex; gap: var(--spacing-10); flex-wrap: wrap; }
.subscribe input {
  border: 1px solid var(--color-brick-red);
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-press-black);
  font-family: var(--font-surt);
  font-size: 15px;
  letter-spacing: 0.013em;
  padding: var(--spacing-10) var(--spacing-20);
  min-width: 240px;
}
.subscribe input::placeholder { color: rgba(232,44,42,0.5); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--color-cream-white);
  color: var(--color-brick-red);
  padding: var(--spacing-50) var(--page-pad);
  margin-top: var(--section-gap);
  border-top: 1px solid var(--color-brick-red);
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-30);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-50);
}
.footer__word {
  font-family: var(--font-editorial-old);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1.0;
  color: var(--color-brick-red);
}
.footer__tag { font-size: 15px; letter-spacing: 0.013em; color: var(--color-brick-red); margin-top: var(--spacing-10); }
.footer__nav { display: flex; gap: var(--spacing-30); flex-wrap: wrap; }
.footer__nav a { font-size: 15px; letter-spacing: 0.013em; color: var(--color-brick-red); transition: opacity .2s; }
.footer__nav a:hover { opacity: .65; }
.footer__rule { height: 1px; background: var(--color-brick-red); margin-bottom: var(--spacing-20); }
.footer__base {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-20);
  flex-wrap: wrap;
}
.footer__base .micro { color: var(--color-brick-red); }

/* ============================================================
   FORMS (wholesale)
   ============================================================ */
.form { padding-inline: var(--page-pad); max-width: 640px; }
.form__grid { display: flex; flex-direction: column; gap: var(--spacing-15); margin-top: var(--spacing-30); }
.form label { font-size: 15px; letter-spacing: 0.013em; color: var(--color-press-black); display: flex; flex-direction: column; gap: var(--spacing-8); }
.form input, .form textarea {
  border: 1px solid var(--color-brick-red);
  border-radius: var(--radius-3xl);
  background: none;
  font-family: var(--font-surt);
  font-size: 15px;
  letter-spacing: 0.013em;
  color: var(--color-press-black);
  padding: var(--spacing-12) var(--spacing-20);
}
.form input { border-radius: var(--radius-full); }
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form textarea:focus, .subscribe input:focus, .chip:focus-visible, .action:focus-visible {
  outline: 2px solid var(--color-press-black); outline-offset: 2px;
}

/* ============================================================
   PAGE HEADING (interior pages)
   ============================================================ */
.pagehead { padding-inline: var(--page-pad); padding-top: var(--spacing-50); }
.pagehead .display { margin-top: var(--spacing-10); }

/* ============================================================
   BLENDS CAROUSEL — standard scrolling row
   ============================================================ */
.blends { padding-left: var(--page-pad); }
.blends__viewport {
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}
.blends__viewport::-webkit-scrollbar { display: none; }
.blends__track {
  display: flex;
  gap: var(--spacing-30);
  padding-right: var(--page-pad);
  width: max-content;
}
.blend {
  flex: 0 0 auto;
  width: 360px;
  max-width: 72vw;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-15);
}
.blend__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: #ededed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blend__img img { width: 100%; height: 100%; object-fit: cover; }
.blend__name {
  font-family: var(--font-editorial-old);
  font-weight: 400;
  font-variation-settings: 'opsz' 40;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-brick-red);
}

/* Inline text arrows (Blends bar) */
.bar-arrows { display: flex; gap: var(--spacing-20); }
.bar-arrows button {
  background: none;
  border: 0;
  color: var(--color-brick-red);
  font-family: var(--font-surt);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: opacity .2s;
}
.bar-arrows button:hover { opacity: .6; }
.bar-arrows button:disabled { opacity: .25; cursor: default; }

/* ============================================================
   LOCATIONS — scroll-driven focus-slice carousel
   ============================================================ */
.slices { padding-inline: var(--page-pad); }

/* Tall track gives scroll room; inner pins to viewport */
.slices__track { position: relative; height: 280vh; }
.slices__pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-20);
  padding-block: var(--spacing-30);
}
.slices__row {
  display: flex;
  gap: var(--spacing-12);
  height: 56vh;
  max-height: 560px;
  align-items: stretch;
}
.slice {
  position: relative;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 56px;
  transition: flex-basis .6s cubic-bezier(.42,0,.58,1), border-radius .4s;
  background: var(--color-soft-grey);
}
.slice[aria-selected="true"] { flex: 1 1 auto; cursor: default; }
.slice:not([aria-selected="true"]) { border-radius: var(--radius-full); }
.slice img { width: 100%; height: 100%; object-fit: cover; }

.slices__caption {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  min-height: 120px;
}
.slices__name {
  font-family: var(--font-editorial-old);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--color-brick-red);
}
.slices__addr { font-size: 20px; line-height: 1.3; letter-spacing: 0.017em; color: var(--color-brick-red); }
.slices__hours { font-size: 15px; letter-spacing: 0.013em; color: var(--color-brick-red); }
.slices__map { margin-top: var(--spacing-5); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .cards, .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  :root { --page-pad: 20px; }
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .header[data-open="true"] .nav__links {
    display: flex;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    gap: var(--spacing-15);
    background: var(--color-cream-white);
    padding: var(--spacing-20) var(--page-pad);
    border-bottom: 1px solid var(--color-brick-red);
  }
  .hero__inner, .split, .split--rev .split__media, .result__inner { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .result__inner { grid-template-columns: 1fr; }
  /* Focus-slice → vertical stack on mobile, no sticky scroll */
  .slices__track { height: auto; }
  .slices__pin { position: static; min-height: 0; padding-block: 0; }
  .slices__row { flex-direction: column; height: auto; max-height: none; }
  .slice { flex: 0 0 70px; height: 70px; border-radius: var(--radius-3xl); }
  .slice[aria-selected="true"] { flex: 0 0 320px; height: 320px; }
  .slice:not([aria-selected="true"]) { border-radius: var(--radius-3xl); }
}
@media (max-width: 560px) {
  .cards, .gallery { grid-template-columns: 1fr; }
  body { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}