@font-face {
      font-family: 'PowerGrotesk';
      src: url('fonts/PowerGrotesk-UltraLight.woff2') format('woff2');
      font-weight: 200;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'PowerGrotesk';
      src: url('fonts/PowerGrotesk-Light.woff2') format('woff2');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'PowerGrotesk';
      src: url('fonts/PowerGrotesk-Regular.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'PowerGrotesk';
      src: url('fonts/PowerGrotesk-Medium.woff2') format('woff2');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'InstrumentSerif';
      src: url('fonts/InstrumentSerif-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'InstrumentSerif';
      src: url('fonts/InstrumentSerif-Italic.ttf') format('truetype');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }

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

    :root {
      --burgundy: #641107;
      --espresso: #552200;
      --warm-brown: #885E46;
      --tan: #BAAA9A;
      --cream: #DED4C6;
      --offwhite: #F2F1EC;
      --gold: #C57D35;
      --ink: #2A1A10;
      --paper: #ECE6DA;
      --paper-deep: #DED4C6;
      --line: rgba(42, 26, 16, 0.14);
      --line-dark: rgba(242, 241, 236, 0.16);
      --font-sans: 'PowerGrotesk', sans-serif;
      --font-serif: 'InstrumentSerif', serif;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-sans);
      background: var(--offwhite);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.07;
      background-image:
        radial-gradient(circle at 20% 30%, rgba(85,34,0,0.24) 0 0.7px, transparent 0.8px),
        radial-gradient(circle at 78% 64%, rgba(100,17,7,0.18) 0 0.7px, transparent 0.8px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23paper)' opacity='0.8'/%3E%3C/svg%3E");
      background-size: 90px 90px, 130px 130px, 180px 180px;
      mix-blend-mode: multiply;
    }

    img { display: block; max-width: 100%; }
    button, a { font: inherit; }

    .site-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 2rem clamp(1.5rem, 5vw, 4rem);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(to bottom, rgba(42,26,16,0.34), rgba(42,26,16,0));
      transition: background 0.3s ease, padding 0.3s ease, backdrop-filter 0.3s ease;
    }

    .site-nav.scrolled {
      top: 0.9rem;
      left: 1rem;
      right: 1rem;
      padding: 0.85rem clamp(1.35rem, 3vw, 2.6rem);
      background: rgba(242,241,236,0.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(136,94,70,0.14);
      border-radius: 999px;
      box-shadow: 0 12px 34px rgba(42,26,16,0.08);
    }

    .nav-logo { height: 44px; opacity: 0.94; }
    .site-nav.scrolled .nav-logo { content: url('../img/logo-nav-burgundy.png'); }

    .nav-links {
      display: flex;
      gap: 3rem;
      list-style: none;
      align-items: center;
    }

    .nav-links a {
      font-size: 0.6rem;
      font-weight: 300;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      text-decoration: none;
      color: rgba(242,241,236,0.78);
      transition: color 0.3s ease, opacity 0.3s ease;
    }

    .site-nav.scrolled .nav-links a,
    .site-nav.scrolled .menu-toggle { color: rgba(42,26,16,0.66); }
    .nav-links a:hover,
    .menu-toggle:hover { opacity: 0.72; }

    .nav-item { position: relative; }

    .menu-toggle {
      appearance: none;
      border: 0;
      background: transparent;
      cursor: pointer;
      font-size: 0.6rem;
      font-weight: 300;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      text-decoration: none;
      color: rgba(242,241,236,0.78);
      transition: color 0.3s ease, opacity 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
    }

    .menu-chevron {
      width: 6px;
      height: 6px;
      border-right: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
      transform: translateY(-2px) rotate(45deg);
      transition: transform 0.22s ease;
      flex: 0 0 auto;
    }

    .nav-item:hover .menu-chevron,
    .nav-item.menu-open .menu-chevron,
    .mobile-menu-toggle[aria-expanded="true"] .menu-chevron {
      transform: translateY(1px) rotate(225deg);
    }

    .menu-dropdown {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(6px);
      min-width: 190px;
      list-style: none;
      display: grid;
      gap: 0.2rem;
      padding: 1.45rem 0.7rem 0.7rem;
      border: 1px solid rgba(136,94,70,0.14);
      border-radius: 18px;
      background: rgba(242,241,236,0.92);
      box-shadow: 0 18px 42px rgba(42,26,16,0.14);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .menu-dropdown[hidden] { display: none; }

    .nav-item:hover .menu-dropdown,
    .nav-item.menu-open .menu-dropdown {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .menu-dropdown a,
    .site-nav.scrolled .menu-dropdown a {
      display: block;
      color: rgba(42,26,16,0.72);
      padding: 0.72rem 0.82rem;
      border-radius: 999px;
      white-space: nowrap;
    }

    .menu-dropdown a:hover {
      background: rgba(100,17,7,0.08);
      opacity: 1;
    }

    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none;
      z-index: 220;
    }

    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 1px;
      background: rgba(242,241,236,0.8);
      transition: transform 0.3s ease, opacity 0.3s ease, background 0.4s ease;
    }

    .site-nav.scrolled .nav-hamburger span { background: var(--espresso); }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 180;
      background: var(--burgundy);
      background-image:
        radial-gradient(ellipse at 20% 80%, rgba(136,94,70,0.15) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(85,34,0,0.2) 0%, transparent 50%);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2.2rem;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity 0.35s ease, transform 0.35s ease;
      pointer-events: none;
    }

    .mobile-menu.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }

    .mobile-menu a,
    .mobile-menu-toggle {
      font-size: 0.7rem;
      font-weight: 300;
      letter-spacing: 0.45em;
      text-transform: uppercase;
      text-decoration: none;
      color: rgba(242,241,236,0.75);
    }

    .mobile-menu-toggle {
      appearance: none;
      border: 0;
      background: transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      padding: 0;
    }

    .mobile-menu-group {
      display: grid;
      justify-items: center;
      gap: 0;
    }

    .mobile-menu-links {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      visibility: hidden;
      transition: grid-template-rows 0.28s ease, opacity 0.2s ease, margin 0.28s ease, visibility 0s linear 0.28s;
      margin-top: 0;
    }

    .mobile-menu-links.open {
      grid-template-rows: 1fr;
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
      margin-top: 1.15rem;
    }

    .mobile-menu-links > * {
      overflow: hidden;
    }

    .mobile-menu-links a {
      display: block;
      text-align: center;
      padding: 0.5rem 0;
      font-size: 0.58rem;
      letter-spacing: 0.36em;
      color: rgba(242,241,236,0.58);
    }

    .mobile-menu-links a[aria-current="page"] {
      color: var(--offwhite);
    }

    body.nav-open { overflow: hidden; }

    .mobile-menu-close {
      position: absolute;
      top: 1.75rem;
      right: 1.5rem;
      width: 38px;
      height: 38px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
    }

    .mobile-menu-close span::before,
    .mobile-menu-close span::after {
      content: '';
      position: absolute;
      top: 18px;
      left: 9px;
      width: 20px;
      height: 1px;
      background: rgba(242,241,236,0.72);
    }

    .mobile-menu-close span::before { transform: rotate(45deg); }
    .mobile-menu-close span::after { transform: rotate(-45deg); }

    .mobile-menu-rule {
      width: 1px;
      height: 24px;
      background: rgba(242,241,236,0.15);
    }

    .setup-mobile-after { display: none; }

    .hero {
      min-height: 92vh;
      padding: 11rem clamp(1.5rem, 8vw, 8rem) 7rem;
      color: var(--offwhite);
      background: #21130d;
      display: grid;
      align-items: end;
      position: relative;
      overflow: hidden;
    }

    .slow-bar-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .slow-bar-hero-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(42,26,16,0.3), rgba(42,26,16,0.82)), radial-gradient(circle at 72% 22%, rgba(197,125,53,0.18), transparent 30rem); }

    .hero-inner {
      max-width: 1160px;
      width: 100%;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.55fr);
      gap: clamp(3rem, 8vw, 7rem);
      align-items: end;
      position: relative;
      z-index: 1;
    }

    .eyebrow {
      font-size: 0.62rem;
      line-height: 1.3;
      font-weight: 500;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.5rem;
    }

    .section .eyebrow { color: #71401f; }

    h1 {
      font-weight: 300;
      font-size: clamp(3rem, 8.6vw, 7.2rem);
      line-height: 0.9;
      letter-spacing: -0.065em;
      text-transform: uppercase;
      max-width: 820px;
    }

    .hero-note {
      font-family: var(--font-serif);
      font-size: clamp(1rem, 1.45vw, 1.3rem);
      line-height: 1.5;
      color: rgba(242,241,236,0.74);
      max-width: 330px;
      padding-bottom: 0.6rem;
    }

    .hero-meta {
      margin-top: 4rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.7rem;
    }

    .pill {
      border: 1px solid rgba(242,241,236,0.25);
      border-radius: 999px;
      padding: 0.58rem 0.85rem;
      font-size: 0.53rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(242,241,236,0.68);
      background: rgba(242,241,236,0.04);
    }

    main { background: var(--offwhite); }

    .section {
      padding: clamp(5.5rem, 9vw, 9rem) clamp(1.5rem, 8vw, 8rem);
    }

    .section.dark {
      background: var(--ink);
      color: var(--offwhite);
    }

    .section-inner {
      max-width: 1160px;
      margin: 0 auto;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
      gap: clamp(2.25rem, 8vw, 7rem);
      align-items: start;
      margin-bottom: clamp(3rem, 7vw, 5.75rem);
    }

    h2 {
      font-weight: 300;
      font-size: clamp(2.2rem, 5vw, 5.3rem);
      line-height: 0.94;
      letter-spacing: -0.045em;
      text-transform: uppercase;
      color: var(--burgundy);
    }

    .dark h2 { color: var(--offwhite); }

    .section-copy {
      font-family: var(--font-serif);
      font-size: clamp(1.05rem, 1.7vw, 1.32rem);
      line-height: 1.68;
      color: rgba(42,26,16,0.68);
      max-width: 620px;
    }

    .dark .section-copy { color: rgba(242,241,236,0.68); }

    .utility-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      margin-bottom: 2rem;
      padding-bottom: 1.2rem;
      border-bottom: 1px solid var(--line);
    }

    .dark .utility-row { border-color: var(--line-dark); }

    .count-label {
      font-size: 0.58rem;
      font-weight: 500;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--warm-brown);
    }

    .dark .count-label { color: rgba(197,125,53,0.88); }

    .serve-toggle {
      display: inline-flex;
      gap: 0.45rem;
      padding: 0.35rem;
      border: 1px solid rgba(100,17,7,0.18);
      border-radius: 14px;
      background: rgba(100,17,7,0.055);
    }

    .serve-toggle button {
      appearance: none;
      border: 1px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: rgba(42,26,16,0.72);
      padding: 0.68rem 0.9rem;
      cursor: pointer;
      font-size: 0.55rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      transition: background 0.25s, color 0.25s;
    }

    .serve-toggle button.active {
      background: var(--burgundy);
      color: var(--offwhite);
      border-color: var(--burgundy);
      box-shadow: 0 8px 18px rgba(100,17,7,0.14);
    }

    .category-guide {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      margin: 0 0 2.2rem;
      border: 1px solid rgba(42,26,16,0.10);
      background: rgba(42,26,16,0.10);
    }

    .category-guide article {
      background: rgba(255,255,255,0.28);
      padding: 1.05rem 1.1rem 1.15rem;
    }

    .category-guide span {
      display: block;
      margin-bottom: 0.7rem;
      font-size: 0.54rem;
      font-weight: 500;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--burgundy);
    }

    .category-guide p {
      font-family: var(--font-serif);
      font-size: 0.95rem;
      line-height: 1.55;
      color: rgba(42,26,16,0.72);
    }

    .category-notes-mobile { display: none; }

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

    .coffee-card,
    .seasonal-card {
      position: relative;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.28);
      min-height: 420px;
      padding: clamp(1.3rem, 3vw, 2rem);
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 1.6rem;
      cursor: pointer;
      transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    }

    .coffee-card:hover,
    .seasonal-card:hover {
      transform: translateY(-4px);
      border-color: rgba(100,17,7,0.38);
      background: rgba(255,255,255,0.44);
    }

    .expand-mark {
      position: absolute;
      right: 1.2rem;
      top: 1.2rem;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(42,26,16,0.14);
      border-radius: 50%;
      transition: transform 0.35s ease, border-color 0.35s ease;
    }

    .expand-mark::before,
    .expand-mark::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 12px;
      height: 1px;
      background: rgba(42,26,16,0.58);
      transform: translate(-50%, -50%);
    }

    .expand-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
    .coffee-card:hover .expand-mark,
    .seasonal-card:hover .expand-mark { transform: rotate(45deg); border-color: rgba(100,17,7,0.34); }

    .category-tag {
      display: inline-flex;
      align-items: center;
      margin-top: 0;
      margin-bottom: 1rem;
      border: 1px solid rgba(100,17,7,0.18);
      border-left: 3px solid var(--burgundy);
      border-radius: 4px;
      padding: 0.42rem 0.58rem 0.38rem;
      font-size: 0.5rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(100,17,7,0.74);
      background: rgba(100,17,7,0.055);
    }


    .card-identity {
      margin-top: 0.9rem;
      font-size: 0.52rem;
      letter-spacing: 0.18em;
      line-height: 1.45;
      text-transform: uppercase;
      color: rgba(42,26,16,0.72);
    }

    .card-identity strong { color: rgba(42,26,16,0.72); font-weight: 500; }

    .card-price {
      position: absolute;
      top: 1.45rem;
      right: 1.45rem;
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(100,17,7,0.72);
      border: 1px solid rgba(100,17,7,0.14);
      border-radius: 999px;
      padding: 0.42rem 0.62rem;
      background: rgba(255,255,255,0.34);
    }

    .card-number {
      font-size: 0.56rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1rem;
    }

    .coffee-name,
    .drink-name {
      font-size: clamp(1.3rem, 2.4vw, 2rem);
      line-height: 1.03;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      font-weight: 400;
      color: var(--ink);
      max-width: 380px;
    }

    .coffee-variety {
      margin-top: 0.9rem;
      font-family: var(--font-serif);
      font-size: 1rem;
      line-height: 1.55;
      color: rgba(42,26,16,0.64);
    }

    .mobile-process {
      display: none;
      margin-top: 0.45rem;
    }

    .mobile-meta-v {
      font-family: var(--font-serif);
      font-size: 1rem;
      line-height: 1.55;
      color: rgba(42,26,16,0.64);
    }

    .spec-list {
      display: grid;
      gap: 0.8rem;
      align-self: end;
    }

    .spec-row {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 1rem;
      padding-top: 0.78rem;
      border-top: 1px solid rgba(42,26,16,0.10);
    }

    .spec-k {
      font-size: 0.52rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(42,26,16,0.72);
    }

    .spec-v {
      font-family: var(--font-serif);
      font-size: 0.98rem;
      line-height: 1.45;
      color: rgba(42,26,16,0.74);
    }

    .notes {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 1rem;
    }

    .note-chip {
      border: 1px solid rgba(100,17,7,0.16);
      border-radius: 999px;
      padding: 0.45rem 0.63rem;
      font-size: 0.52rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(100,17,7,0.72);
    }

    .scale-block {
      display: grid;
      gap: 0.72rem;
      margin-top: 1.2rem;
    }

    .scale-row {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 0.8rem;
      align-items: center;
    }

    .scale-name {
      font-size: 0.5rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(42,26,16,0.48);
    }

    .scale-track {
      height: 2px;
      background: rgba(42,26,16,0.16);
      position: relative;
    }

    .scale-fill {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      background: var(--burgundy);
    }

    .card-actions {
      display: flex;
      gap: 0.6rem;
      flex-wrap: wrap;
      align-self: end;
    }

    .choice-btn,
    .quiet-btn {
      appearance: none;
      border: 1px solid rgba(42,26,16,0.18);
      background: transparent;
      color: rgba(42,26,16,0.72);
      padding: 0.75rem 0.9rem;
      border-radius: 999px;
      cursor: pointer;
      font-size: 0.52rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      transition: background 0.25s, color 0.25s, border-color 0.25s;
    }

    .choice-btn:hover,
    .quiet-btn:hover {
      background: var(--burgundy);
      color: var(--offwhite);
      border-color: var(--burgundy);
    }

    .setup-trigger {
      margin-left: auto;
      background: rgba(255,255,255,0.28);
    }

    .seasonal-wrap {
      display: grid;
      grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
      gap: clamp(2rem, 6vw, 5rem);
      align-items: start;
    }

    .seasonal-card {
      min-height: 320px;
      background: rgba(242,241,236,0.035);
      border-color: var(--line-dark);
      cursor: pointer;
    }

    .seasonal-card:hover {
      border-color: rgba(197,125,53,0.36);
      background: rgba(242,241,236,0.065);
    }

    .dark .drink-name { color: var(--offwhite); }
    .dark .coffee-variety,
    .dark .spec-v { color: rgba(242,241,236,0.68); }
    .dark .spec-k { color: rgba(242,241,236,0.70); }
    .dark .spec-row { border-top-color: rgba(242,241,236,0.12); }
    .dark .note-chip { color: rgba(242,241,236,0.70); border-color: rgba(242,241,236,0.16); }

    .coming-soon {
      display: inline-block;
      margin-bottom: 1.2rem;
      font-size: 0.52rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
    }

    .seasonal-intro {
      position: sticky;
      top: 8rem;
    }

    .quote-line {
      margin-top: 2.6rem;
      font-family: var(--font-serif);
      font-style: italic;
      font-size: clamp(1.8rem, 3.5vw, 3rem);
      line-height: 1.1;
      color: rgba(242,241,236,0.72);
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: none;
    }

    .modal.open { display: block; }

    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(42,26,16,0.62);
      backdrop-filter: blur(8px);
    }

    .modal-panel {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(1120px, calc(100vw - 2rem));
      max-height: calc(100vh - 2rem);
      overflow: auto;
      background: var(--offwhite);
      color: var(--ink);
      border: 1px solid rgba(242,241,236,0.18);
      box-shadow: 0 30px 90px rgba(42,26,16,0.38);
    }

    .modal-top {
      position: sticky;
      top: 0;
      z-index: 2;
      background: rgba(242,241,236,0.92);
      backdrop-filter: blur(12px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 1rem 1rem 1.35rem;
      border-bottom: 1px solid var(--line);
    }

    .modal-title-label {
      font-size: 0.52rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--warm-brown);
    }

    .modal-close {
      appearance: none;
      border: 1px solid rgba(42,26,16,0.16);
      background: transparent;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      cursor: pointer;
      position: relative;
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    .modal-close span,
    .modal-close::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 15px;
      height: 1px;
      background: var(--ink);
    }

    .modal-close span { transform: translate(-50%, -50%) rotate(45deg); }
    .modal-close::before { transform: translate(-50%, -50%) rotate(-45deg); }
    .modal-close:hover { border-color: rgba(100,17,7,0.36); background: rgba(255,255,255,0.34); }

    .modal-body {
      padding: clamp(1.5rem, 4vw, 3rem);
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
      gap: clamp(1.6rem, 4vw, 3rem);
      align-items: start;
    }

    .modal h3 {
      font-size: clamp(2.2rem, 5vw, 4.8rem);
      line-height: 0.95;
      letter-spacing: -0.045em;
      text-transform: uppercase;
      font-weight: 300;
      color: var(--burgundy);
      margin-bottom: 1.2rem;
    }

    .modal-story {
      font-family: var(--font-serif);
      font-size: 1.12rem;
      line-height: 1.72;
      color: rgba(42,26,16,0.72);
      max-width: 620px;
    }

    .inline-why {
      margin-top: 1.25rem;
      max-width: 620px;
      border-top: 1px solid rgba(42,26,16,0.10);
      padding-top: 1rem;
    }

    .inline-why p {
      font-family: var(--font-serif);
      font-size: 1.03rem;
      line-height: 1.62;
      color: rgba(42,26,16,0.68);
    }

    .modal-grid {
      display: grid;
      gap: 1rem;
      margin-top: 1.5rem;
    }

    .modal-specs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }

    .modal-specs .spec-row {
      display: block;
      padding: 0.9rem;
      border: 1px solid rgba(42,26,16,0.10);
      background: rgba(255,255,255,0.24);
    }

    .modal-specs .spec-k { display: block; margin-bottom: 0.4rem; }
    .modal-specs .notes,
    .modal-specs .scale-block,
    .modal-specs .taste-panel { grid-column: 1 / -1; }

    .recipe-panel {
      border: 1px solid var(--line);
      padding: 1.2rem;
      background: rgba(255,255,255,0.28);
    }

    .recipe-tabs {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1.1rem;
      flex-wrap: wrap;
    }

    .recipe-tab {
      appearance: none;
      border: 1px solid rgba(42,26,16,0.16);
      border-radius: 999px;
      padding: 0.6rem 0.82rem;
      background: transparent;
      color: rgba(42,26,16,0.62);
      cursor: pointer;
      font-size: 0.5rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .recipe-tab.active {
      background: var(--burgundy);
      color: var(--offwhite);
      border-color: var(--burgundy);
    }

    .recipe-title {
      font-size: 0.62rem;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--warm-brown);
      margin-bottom: 0.9rem;
    }

    .recipe-list {
      list-style: none;
      display: grid;
      gap: 0.78rem;
      font-family: var(--font-serif);
      line-height: 1.55;
      color: rgba(42,26,16,0.74);
    }

    .recipe-list strong {
      font-family: var(--font-sans);
      font-size: 0.52rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(42,26,16,0.56);
      margin-right: 0.2rem;
    }

    .meticulous-profile {
      margin-top: 1.3rem;
      padding-top: 1.2rem;
      border-top: 1px solid var(--line);
    }

    .meticulous-profile .recipe-title { margin-bottom: 0.25rem; }
    .meticulous-temperature { font-family: var(--font-serif); font-size: 1.35rem; color: var(--burgundy); margin-bottom: 0.7rem; }
    .profile-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; padding-bottom: 0.35rem; }
    .meticulous-graph { width: 100%; min-width: 680px; height: auto; display: block; overflow: visible; }
    .profile-grid { stroke: rgba(42,26,16,0.12); stroke-width: 1; }
    .profile-stage-line { stroke: rgba(42,26,16,0.22); stroke-width: 1; stroke-dasharray: 4 5; }
    .profile-axis-title { fill: rgba(42,26,16,0.74); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
    .profile-axis-number { fill: rgba(42,26,16,0.66); font-family: var(--font-sans); font-size: 11px; font-variant-numeric: tabular-nums; }
    .profile-stage-index { fill: rgba(42,26,16,0.54); font-family: var(--font-sans); font-size: 10px; font-variant-numeric: tabular-nums; }
    .profile-disclaimer { max-width: 42rem; margin: 0 0 0.65rem; font-size: 0.66rem; line-height: 1.5; color: rgba(42,26,16,0.58); }
    .profile-limit { opacity: 0.72; }
    .profile-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.3rem; }
    .profile-key { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(42,26,16,0.68); }
    .profile-key::before { content: ''; width: 0.65rem; height: 0.18rem; display: inline-block; margin-right: 0.35rem; vertical-align: middle; background: currentColor; }
    .profile-key.pressure { color: #8f2038; }
    .profile-key.flow { color: #287aa1; }
    .profile-key.power { color: #d07822; }

    .download-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      margin-top: 1.35rem;
    }

    .download-row .quiet-btn { text-decoration: none; }

    .modal-side {
      display: grid;
      gap: 1rem;
      min-width: 0;
    }

    .modal-body > *, .recipe-panel, [role="tabpanel"] { min-width: 0; }

    .taste-panel {
      margin-top: 1.4rem;
      border: 1px solid var(--line);
      padding: 1.1rem;
      background: rgba(255,255,255,0.22);
    }

    .taste-intro {
      font-family: var(--font-serif);
      font-size: 0.98rem;
      line-height: 1.55;
      color: rgba(42,26,16,0.66);
      margin-bottom: 1rem;
    }

    .taste-options {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }

    .taste-option {
      appearance: none;
      border: 1px solid rgba(100,17,7,0.18);
      background: transparent;
      border-radius: 999px;
      padding: 0.55rem 0.7rem;
      cursor: pointer;
      font-size: 0.5rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(100,17,7,0.74);
      transition: background 0.25s, color 0.25s;
    }

    .taste-option:hover,
    .taste-option.voted {
      background: var(--burgundy);
      color: var(--offwhite);
    }

    .taste-picker {
      display: grid;
      gap: 0.75rem;
      margin-top: 0.7rem;
    }

    .taste-entry {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 0.55rem;
      align-items: end;
    }

    .taste-lines {
      display: grid;
      gap: 0.55rem;
    }

    .taste-lines input {
      width: 100%;
      border: 0;
      border-bottom: 1px solid rgba(42,26,16,0.20);
      background: transparent;
      padding: 0.62rem 0;
      font-family: var(--font-serif);
      font-size: 1rem;
      color: var(--ink);
      outline: none;
    }

    .taste-suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
    }

    .taste-help,
    .taste-credit {
      font-family: var(--font-serif);
      font-size: 0.88rem;
      line-height: 1.55;
      color: rgba(42,26,16,0.56);
    }

    .taste-credit { margin-top: 0.85rem; }
    .taste-credit a { color: var(--burgundy); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

    .info-panel {
      border: 1px solid var(--line);
      padding: 1.05rem;
      background: rgba(255,255,255,0.22);
    }

    .info-panel p {
      font-family: var(--font-serif);
      font-size: 0.98rem;
      line-height: 1.58;
      color: rgba(42,26,16,0.68);
    }

    .setup-panel {
      padding: clamp(1.2rem, 2.4vw, 1.7rem);
    }

    .setup-panel .recipe-title { margin-bottom: 0.35rem; }

    .setup-dose-standard {
      margin: 0 0 1.25rem;
      padding-left: 0.75rem;
      border-left: 2px solid rgba(197,125,53,0.72);
      color: rgba(100,17,7,0.78) !important;
    }

    .setup-methods {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.8rem;
    }

    .setup-method {
      position: relative;
      min-width: 0;
      padding: 1.1rem;
      background: rgba(197,125,53,0.07);
      border-top: 2px solid rgba(197,125,53,0.72);
    }

    .setup-method-2 {
      background: rgba(100,17,7,0.045);
      border-top-color: rgba(100,17,7,0.58);
    }

    .setup-method-heading {
      display: flex;
      align-items: baseline;
      gap: 0.65rem;
      margin-bottom: 1rem;
    }

    .setup-method-number {
      font-size: 0.48rem;
      letter-spacing: 0.2em;
      color: rgba(42,26,16,0.42);
    }

    .setup-method-title {
      font-family: var(--font-sans);
      font-size: 0.76rem;
      font-weight: 400;
      letter-spacing: 0.22em;
      line-height: 1;
      text-transform: uppercase;
      color: var(--burgundy);
    }

    .setup-equipment-list {
      display: grid;
      gap: 0.9rem;
      margin: 0;
    }

    .setup-equipment-item { min-width: 0; }

    .setup-equipment-label {
      margin-bottom: 0.24rem;
      font-size: 0.46rem;
      letter-spacing: 0.2em;
      line-height: 1.2;
      text-transform: uppercase;
      color: rgba(42,26,16,0.48);
    }

    .setup-equipment-value {
      margin: 0;
      font-family: var(--font-serif);
      font-size: clamp(0.98rem, 1.35vw, 1.16rem);
      line-height: 1.25;
      color: rgba(42,26,16,0.78);
      overflow-wrap: anywhere;
    }

    .setup-empty {
      font-size: 0.92rem !important;
      line-height: 1.45 !important;
    }

    .profile-chart {
      margin-top: 1.2rem;
      border-top: 1px solid rgba(42,26,16,0.10);
      padding-top: 1rem;
    }

    .profile-chart svg { width: 100%; height: auto; display: block; }
    .profile-chart text { font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; fill: rgba(42,26,16,0.50); }

    .taste-results {
      margin-top: 1rem;
      padding-top: 0.9rem;
      border-top: 1px solid rgba(42,26,16,0.10);
    }

    .taste-result-row {
      display: grid;
      grid-template-columns: 110px 1fr 30px;
      gap: 0.7rem;
      align-items: center;
      margin-top: 0.55rem;
    }

    .taste-result-row span {
      font-size: 0.5rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(42,26,16,0.52);
    }

    .taste-result-track {
      height: 2px;
      background: rgba(42,26,16,0.12);
      position: relative;
    }

    .taste-result-fill {
      position: absolute;
      inset: 0 auto 0 0;
      background: var(--gold);
    }

    footer {
      background: var(--ink);
      color: var(--offwhite);
      padding: 4rem clamp(1.5rem, 8vw, 8rem);
      display: grid;
      gap: 2rem;
      justify-items: center;
      text-align: center;
    }

    .footer-logo { height: 40px; opacity: 0.76; }
    .footer-rule { width: min(1000px, 100%); height: 1px; background: rgba(242,241,236,0.07); }
    .footer-copy { font-size: 0.52rem; letter-spacing: 0.22em; color: rgba(242,241,236,0.55); }

    @media (max-width: 900px) {
      .hero-inner, .section-head, .seasonal-wrap, .modal-body, .category-guide, .modal-specs { grid-template-columns: 1fr; }
      .hero { min-height: 64vh; }
      .card-grid { grid-template-columns: 1fr; }
      .coffee-card, .seasonal-card { min-height: auto; }
      .seasonal-intro { position: static; }
      .utility-row { align-items: flex-start; flex-direction: column; }
    }

    @media (max-width: 768px) {
      .site-nav { padding: 1.25rem 1.5rem; }
      .site-nav.scrolled {
        top: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        padding: 0.72rem 1.1rem;
      }
      .nav-logo { height: 28px; }
      .nav-links { display: none; }
      .nav-hamburger { display: flex; }
      .mobile-menu { display: flex; }
    }

    @media (max-width: 560px) {
      .site-nav { padding: 1.25rem 1.3rem; }
      .site-nav.scrolled { padding: 0.72rem 1.1rem; }
      .nav-logo { height: 28px; }
      .hero {
        min-height: 42vh;
        padding: 7.1rem 1.2rem 2.6rem;
      }
      h1 { font-size: clamp(2.15rem, 11vw, 3.05rem); max-width: 8ch; }
      .hero-note { font-size: 1rem; line-height: 1.36; max-width: 300px; }
      .section { padding: 3.8rem 1.2rem 4.8rem; }
      .section-head { margin-bottom: 1.8rem; }
      .utility-row { gap: 0.9rem; margin-bottom: 1rem; padding-bottom: 1rem; }
      .serve-toggle { width: 100%; overflow-x: auto; }
      .serve-toggle button { white-space: nowrap; flex: 1; padding: 0.62rem 0.7rem; font-size: 0.48rem; }
      .setup-trigger { display: none; }
      .setup-mobile-after {
        display: flex;
        width: 100%;
        margin: 1rem 0 0;
        justify-content: center;
        background: var(--burgundy);
        color: var(--offwhite);
        border-color: var(--burgundy);
      }
      .category-guide { display: none; }
      .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
      .coffee-card {
        min-height: 230px;
        padding: 0.9rem;
        gap: 0.7rem;
        grid-template-rows: auto 1fr;
      }
      .coffee-card .spec-list,
      .coffee-card .card-actions,
      .coffee-card .card-identity { display: none; }
      .coffee-card .category-tag {
        margin-bottom: 0.65rem;
        padding: 0.3rem 0.45rem;
        font-size: 0.42rem;
        letter-spacing: 0.18em;
      }
      .coffee-card .card-price {
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.28rem 0.42rem;
        font-size: 0.46rem;
        letter-spacing: 0.12em;
      }
      .coffee-card .coffee-name {
        font-size: clamp(1.05rem, 6.2vw, 1.35rem);
        line-height: 0.98;
      }
      .coffee-card .coffee-variety,
      .coffee-card .mobile-process {
        display: grid;
        gap: 0.22rem;
      }
      .coffee-card .coffee-variety .spec-k,
      .coffee-card .mobile-process .spec-k {
        font-family: var(--font-sans);
      }
      .coffee-card .coffee-variety {
        margin-top: 0.55rem;
      }
      .coffee-card .mobile-process { margin-top: 0.45rem; }
      .coffee-card .mobile-meta-v {
        font-size: 0.82rem;
        line-height: 1.28;
      }
      .coffee-card .notes { margin-top: 0.7rem; gap: 0.32rem; }
      .coffee-card .note-chip {
        padding: 0.32rem 0.42rem;
        font-size: 0.42rem;
        letter-spacing: 0.12em;
      }
      .spec-row { grid-template-columns: 1fr; gap: 0.35rem; }
      .scale-row { grid-template-columns: 78px 1fr; gap: 0.55rem; }
      .modal-panel { width: calc(100vw - 1rem); }
      .modal-body { padding: 1.2rem; }
      .setup-methods { grid-template-columns: 1fr; }
      .setup-panel { padding: 1rem; }
      .setup-method { padding: 1rem; }
      .category-notes-mobile {
        display: block;
        width: 100%;
        margin-top: 0;
        padding-top: 0;
      }
      .category-notes-mobile summary {
        cursor: pointer;
        font-size: 0.54rem;
        font-weight: 500;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: rgba(100,17,7,0.72);
      }
      .category-notes-mobile div {
        display: grid;
        gap: 0.8rem;
        margin-top: 1rem;
      }
      .category-notes-mobile p {
        font-family: var(--font-serif);
        font-size: 0.94rem;
        line-height: 1.45;
        color: rgba(42,26,16,0.64);
      }
      .category-notes-mobile strong {
        font-family: var(--font-sans);
        font-size: 0.52rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--burgundy);
      }
    }

/* Production live-data and accessibility additions */
html, body { max-width: 100%; overflow-x: clip; }
button { font: inherit; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.menu-state { margin:2rem 0 0; padding:1.25rem; border:1px solid var(--line); font-family:var(--font-serif); font-size:1.08rem; line-height:1.55; }
.count-label[role="status"] { min-width:13rem; }
.coffee-card { cursor:pointer; }
.coffee-card:focus-visible,.quiet-btn:focus-visible,.recipe-tab:focus-visible,.modal-close:focus-visible,.serve-toggle button:focus-visible,.taste-note-line:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.card-note-label { margin-top:1rem; color:var(--warm-brown); font-size:.48rem; letter-spacing:.2em; text-transform:uppercase; }
.modal-title-label,.recipe-title,.spec-k,.category-tag,.card-price,.count-label,.quiet-btn,.taste-help,.taste-feedback,.taste-credit,.taste-result-row,.card-note-label { text-transform:uppercase; }
.modal-story,.inline-why p,.recipe-list li,.taste-intro,.taste-feedback,.taste-empty { font-family:var(--font-serif); text-transform:none; }
.recipe-empty { margin:.8rem 0; font-family:var(--font-serif); font-size:1rem; line-height:1.5; color:rgba(42,26,16,.72); }
.equipment-specific { margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); }
.taste-form { display:grid; gap:.55rem; }
.taste-note-line { width:100%; border:1px solid var(--line); background:rgba(255,255,255,.35); padding:.72rem; font-family:var(--font-serif); font-size:1rem; }
.taste-submit { justify-self:start; margin-top:.35rem; }
.taste-submit:disabled,.taste-note-line:disabled { opacity:.55; cursor:not-allowed; }
.taste-feedback { margin:.8rem 0; color:rgba(42,26,16,.7); font-size:.72rem; letter-spacing:.08em; }
.taste-empty { margin:.7rem 0; }
.profile-chart svg { width:100%; height:auto; }
.modal.open .modal-panel { outline:none; }
body.modal-open { overflow:hidden; }
@media (max-width:680px) { .site-nav{padding-left:1rem;padding-right:1rem}.nav-logo{max-width:104px}.hero-note{max-width:100%}.coffee-card{overflow-wrap:anywhere}.modal-panel{max-height:calc(100dvh - 1rem)}.taste-result-row{grid-template-columns:minmax(75px,.8fr) minmax(70px,1.5fr) 1.5rem} }