/* Gen-3 — the-whiskey.html. Extracted verbatim; do not edit here.
   Regenerate: python3 scripts/extract-gen3-assets.py */

@import url("_fonts.css");

:root {
    --paper: #F4F4F4;
    --ink: #1D232A;
    --red: #D52128;
    --deep-red: #980117;
    --gold-1: #A37529;
    --gold-2: #E2BA73;
    --border: #D9D2C3;
    --font-display: "DIN Stand-in", "Arial Narrow", sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    /* Shared grid — one gutter/max-width system for every section */
    --grid-max: 1400px;
    --grid-gutter: max(clamp(20px, 5vw, 64px), calc(50% - (var(--grid-max) / 2)));
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { overflow-x: hidden; }
  /* overflow-x is scoped to html only (not body) — body also having a
     non-visible overflow makes it a second scroll container, which
     breaks position:sticky for descendants (the whiskey tab bottle
     image relies on it) in Chromium. */
  html, body {
    /* Body colour is driven by JS on scroll (ink -> paper) — see script.
       No section owns its own background; this is what shows through as
       the hero's video fades, so there's one continuous page colour, not
       a seam between components. */
    background-color: var(--ink);
    transition: background-color 0.06s linear;
  }
  body {
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
  }
  img, svg { max-width: 100%; }

  /* ============================================================
     HERO
     ============================================================ */
  .hero {
    position: relative;
    height: 100vh;
    min-height: 520px;
    width: 100%;
    overflow: hidden;
    background: transparent;
  }

  .hero video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; opacity: 0;
    transition: opacity 250ms ease;
  }
  .hero.loaded video { opacity: 1; }
  .hero.reduced video { display: none; }

  .hero .poster {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
  }
  .hero.loaded:not(.reduced) .poster { display: none; }

  .hero .scrim {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(29,23,17,.60) 0%, rgba(29,23,17,.05) 20%, rgba(29,23,17,.05) 55%, rgba(29,23,17,.20) 72%, rgba(29,23,17,.93) 100%);
    transition: opacity 200ms ease;
  }

  .hero-anchor {
    position: absolute;
    left: 50%; bottom: 0;
    width: clamp(200px, 22vw, 320px);
    opacity: 0.70;
    z-index: 2;
    pointer-events: none;
    transform: translate(calc(-50% + 300px), 30%);
  }
  .hero-anchor svg { width: 100%; height: auto; display: block; }

  .hero-baseline {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6px;
    background: var(--red);
    z-index: 4;
    pointer-events: none;
  }

  .play-pause {
    position: absolute;
    right: var(--grid-gutter); bottom: 26px;
    z-index: 3;
    width: 38px; height: 38px; border-radius: 2px;
    border: 1px solid rgba(244,244,244,.55);
    background: transparent;
    display: grid; place-items: center;
    cursor: pointer;
    opacity: 0;
    transition: background 150ms ease, border-color 150ms ease, opacity 200ms ease;
  }
  .hero.loaded .play-pause { opacity: 1; }
  .play-pause:hover { background: rgba(244,244,244,.12); border-color: rgba(244,244,244,.85); }
  .play-pause:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
  .pp-icon { position: relative; width: 18px; height: 18px; display: block; }
  .pp-icon svg {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
    transition: transform 320ms cubic-bezier(.65,0,.35,1), opacity 250ms ease;
  }
  .pp-icon .i-play { transform: translate(-50%,-50%) scale(.5); opacity: 0; }
  .play-pause[aria-pressed="true"] .i-pause { transform: translate(-50%,-50%) scale(.5); opacity: 0; }
  .play-pause[aria-pressed="true"] .i-play { transform: translate(-50%,-50%) scale(1); opacity: 1; }

  .hero-header {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    display: flex; align-items: center; gap: 22px;
    padding: 22px var(--grid-gutter);
    opacity: 0;
    transition: opacity 250ms ease;
    transition-delay: 200ms;
  }
  .hero.loaded .hero-header { opacity: 1; }
  /* Once the banner has scrolled past, the header switches from
     absolute-over-the-image to a fixed, compact bar — kept minimal
     (slim padding, translucent dark fill) so it doesn't eat into the
     page below it the way the full banner treatment would. */
  .hero-header.is-stuck {
    position: fixed;
    padding-top: 12px;
    padding-bottom: 12px;
    background: rgba(29, 35, 42, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  .hero-header .mark { width: clamp(120px, 13vw, 158px); flex: 0 0 auto; display: block; }
  .hero-header .spacer { flex: 1 1 auto; }
  .hero-header nav { display: flex; gap: 26px; flex: 0 0 auto; }
  .hero-header > .nav-link { flex: 0 0 auto; }

  .nav-link {
    position: relative;
    color: var(--paper); text-decoration: none;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
    padding: 4px 0;
    white-space: nowrap;
  }
  .nav-link::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
    background: var(--red);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .nav-link:hover::after, .nav-link:focus-visible::after { width: 100%; }
  @media (max-width: 780px) { .hero-header nav { display: none; } }

  .burger-wrap { position: relative; flex: 0 0 auto; }
  .burger {
    width: 38px; height: 38px; border-radius: 2px;
    border: 1px solid rgba(244,244,244,.55);
    background: transparent;
    display: grid; place-items: center;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
  }
  .burger[aria-expanded="true"] { background: rgba(244,244,244,.12); border-color: rgba(244,244,244,.85); }
  .burger:hover { background: var(--red); border-color: var(--red); }
  .burger:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
  .burger-icon { position: relative; width: 18px; height: 18px; display: block; }
  .burger-icon svg {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
    transition: transform 320ms cubic-bezier(.65,0,.35,1), opacity 250ms ease;
  }
  .burger-icon .i-close { transform: translate(-50%,-50%) scale(.5); opacity: 0; }
  .burger[aria-expanded="true"] .i-bars { transform: translate(-50%,-50%) scale(.5); opacity: 0; }
  .burger[aria-expanded="true"] .i-close { transform: translate(-50%,-50%) scale(1); opacity: 1; }

  .secondary-menu {
    position: absolute; top: calc(100% + 12px); right: 0;
    min-width: 210px;
    background: var(--paper);
    border-radius: 2px;
    padding: 10px;
    box-shadow: 0 16px 32px rgba(0,0,0,.32);
    display: flex; flex-direction: column; gap: 1px;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 420ms cubic-bezier(.65,0,.35,1);
    overflow: hidden;
  }
  .secondary-menu::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
  }
  .secondary-menu.open { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); pointer-events: auto; }
  .secondary-menu a {
    display: block;
    color: var(--ink); text-decoration: none;
    font-size: 13px; font-weight: 600;
    padding: 10px 12px;
  }
  .secondary-menu a span {
    position: relative;
    display: inline-block;
  }
  .secondary-menu a span::after {
    content: "";
    position: absolute; left: 0; bottom: -3px;
    height: 1px; width: 0;
    background: var(--red);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .secondary-menu a:hover span::after, .secondary-menu a:focus-visible span::after { width: 100%; }

  .secondary-menu-tier-primary { display: none; }
  .secondary-menu-divider { display: none; height: 1px; background: var(--border); margin: 6px 12px; }
  .secondary-menu a.secondary-menu-primary {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.01em; font-size: 15px;
  }

  /* Full-screen takeover on tablet/mobile — replaces the small
     anchored dropdown with a left-aligned stack of links covering
     the viewport, matching the concept's bold, editorial style. The
     burger button gets a z-index above the overlay so it stays
     visible/clickable as the close control. */
  @media (max-width: 780px) {
    /* .hero-content shares .hero-header's z-index (3) but sits later
       in the DOM, so it would otherwise paint over the open menu
       (a nested stacking context can't out-rank an equal-or-higher
       sibling above it) — bumping the header's z-index here keeps
       it, and the menu inside it, above the hero body on mobile. */
    .hero-header { z-index: 9999; }
    /* Solid grey band instead of the desktop translucent/blurred one —
       backdrop-filter is a common source of mobile Safari rendering
       quirks with position:fixed, so mobile gets a plain opaque fill
       instead of depending on it. */
    .hero-header.is-stuck {
      background: var(--ink);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    /* No reason to let the page scroll behind a full-screen takeover. */
    body.menu-open { overflow: hidden; }
    /* backdrop-filter on the stuck header creates a new containing
       block for position:fixed descendants (spec behaviour) — with
       the menu nested inside .hero-header, that shrank the "full
       screen" takeover down to just the slim stuck bar's own box
       whenever it was opened after scrolling past the hero. Turning
       the blur off while the menu is open avoids that entirely. */
    body.menu-open .hero-header.is-stuck { backdrop-filter: none; -webkit-backdrop-filter: none; }
    /* The full-screen menu (fixed, inset:0, nested in .burger-wrap)
       otherwise paints straight over the logo — lift it above the
       menu's stacking context so it stays visible while open. */
    .site-logo-link { position: relative; z-index: 30; }
    .burger-wrap { position: relative; z-index: 21; }
    .burger { position: relative; z-index: 2; }
    .secondary-menu { z-index: 1; }
    .secondary-menu {
      position: fixed;
      inset: 0;
      width: 100%; height: 100%;
      min-width: 0;
      background: var(--ink);
      border-radius: 0;
      padding: 110px var(--grid-gutter) 40px;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .secondary-menu::before { display: none; }
    .secondary-menu a {
      width: 100%;
      color: var(--paper);
      font-size: 16px;
      padding: 16px 0;
      border-bottom: 1px solid rgba(244,244,244,.15);
    }
    .secondary-menu a.secondary-menu-primary {
      font-size: clamp(28px, 8vw, 36px);
      padding: 14px 0;
    }
    .secondary-menu a span::after { background: var(--red); }
    .secondary-menu-divider { display: block; background: rgba(244,244,244,.15); margin: 8px 0; }
  }

  @media (max-width: 780px) {
    .hero-header > a.nav-link { display: none; }
    .secondary-menu-tier-primary { display: flex; flex-direction: column; }
    .secondary-menu-divider { display: block; }
    .secondary-menu { min-width: 230px; }
  }

  .hero-content {
    position: absolute; z-index: 3;
    left: var(--grid-gutter);
    right: var(--grid-gutter);
    bottom: 48px;
  }
  .hero-content .line {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--paper);
    font-size: clamp(73px, 7.6vw, 104px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 250ms ease, transform 250ms ease;
    transition-delay: 260ms;
  }
  .hero.loaded .hero-content .line { opacity: 1; transform: translateY(0); }
  .hero-content .line .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .hero-content .copy {
    margin: 20px 0 0;
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.55;
    color: var(--paper);
    max-width: 46ch;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 250ms ease, transform 250ms ease;
    transition-delay: 400ms;
  }
  .hero.loaded .hero-content .copy { opacity: 0.92; transform: translateY(0); }

  /* ============================================================
     CARDS — "Four ways into West Cork."
     ============================================================ */
  section.pillars {
    position: relative;
    padding: clamp(56px, 8vw, 96px) var(--grid-gutter) 100px;
    background: transparent;
  }
  .pillars-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: clamp(28px, 4vw, 44px); flex-wrap: wrap;
  }
  .pillars-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(24px, 4.6vw, 60px);
    line-height: 0.95;
    margin: 0;
    color: var(--ink);
    white-space: nowrap;
  }
  .pillars-head h2 .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .card-row { position: relative; display: flex; gap: 12px; height: clamp(440px, 60vh, 640px); }
  /* Full-width red band behind the bottom third of the cards, matching
     the homepage's "Welcome to West Cork" treatment — same component,
     same background, wherever this section is placed. z-index:0 (not
     negative — see the note on .place-chapter-mark elsewhere on this
     page re: the overflow-x:hidden + negative-z-index Chromium bug)
     placed first in the DOM, with .pillar-card's own position:relative
     giving it the same stack level so the cards paint on top. Hidden
     at the 860px breakpoint, where the row becomes a 2x2/1-col grid
     with an auto height this percentage math can't track. */
  .pillars-bleed {
    position: absolute;
    left: calc(50% - 50vw);
    width: 100vw;
    top: 66.67%;
    bottom: -100px;
    background: var(--red);
    z-index: 0;
    pointer-events: none;
  }
  @media (max-width: 860px) {
    .pillars-bleed { display: none; }
  }
  .pillar-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 2px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: var(--paper);
    outline: none;
  }

  .pillar-card img.photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.25,0.1,.25,1);
  }
  .pillar-card:hover img.photo { transform: scale(1.045); }


  .pillar-card .scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(29,35,42,0) 0%, rgba(29,35,42,0) 40%, rgba(29,35,42,.55) 78%, rgba(29,35,42,.92) 100%);
  }
  .pillar-card:focus-visible { box-shadow: inset 0 0 0 3px var(--paper); }

  .pillar-card .num {
    position: absolute; top: 18px; left: 20px;
    font-family: var(--font-body); font-weight: 600; font-size: 11px;
    letter-spacing: 0.12em; color: var(--gold-2);
    font-variant-numeric: tabular-nums;
  }

  .pillar-card .body { position: absolute; left: 20px; right: 20px; bottom: 20px; }
  .pillar-card .kicker {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.01em; font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1; margin: 0;
    white-space: nowrap;
  }

  .pillar-card .arrow {
    position: absolute; right: 18px; bottom: 18px;
    width: 32px; height: 32px; border-radius: 2px;
    border: 1px solid rgba(244,244,244,.55);
    display: grid; place-items: center;
    opacity: 0; transform: translate(6px, 6px) scale(.8);
    transition: opacity 280ms ease, transform 280ms ease, background 200ms ease, border-color 200ms ease;
  }
  .pillar-card:hover .arrow, .pillar-card:focus-visible .arrow {
    opacity: 1; transform: translate(0,0) scale(1);
    background: var(--red); border-color: var(--red);
  }
  .pillar-card .arrow svg { width: 14px; height: 14px; }

  /* Smaller desktop / tablet: with three columns (this page dropped
     The Place card) each is still narrow enough that .kicker's
     white-space:nowrap can overflow before the 860px carousel. */
  @media (max-width: 1100px) {
    .pillar-card .kicker { font-size: clamp(16px, 2.4vw, 24px); white-space: normal; }
  }

  @media (max-width: 860px) {
    /* 4-or-fewer cards stack in a single column on tablet/mobile
       rather than a 2x2 grid, matching the site's mobile pattern. */
    .card-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      height: auto;
    }
    .pillar-card { aspect-ratio: 4 / 3; }
    .pillar-card .arrow { opacity: 1; transform: none; width: 28px; height: 28px; }
    .pillar-card .num { top: 12px; left: 14px; }
    .pillar-card .body { left: 14px; right: 14px; bottom: 14px; }
    section.pillars { padding: clamp(28px, 4vw, 48px) var(--grid-gutter) 50px; }
  }
  @media (max-width: 480px) {
    .pillar-card .kicker { font-size: clamp(15px, 5vw, 20px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-content .line, .hero-content .copy, .hero-content .cta, .hero-header,
    .pillar-card img.photo, .pillar-card .arrow,
    .secondary-menu, .burger-icon svg {
      transition-duration: 200ms !important;
      transform: none !important;
    }
  }

  /* ============================================================
     THE PLACE — "Some places stay with you."
     ============================================================ */
  section.place-story {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--ink);
    background-image:
      linear-gradient(to right, var(--ink) 0%, rgba(29,35,42,.55) 45%, rgba(29,35,42,.2) 100%),
      url("/wp-content/uploads/gen3/assets/images/place-image.jpeg");
    background-position: top, top;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    padding: clamp(90px, 12vw, 140px) var(--grid-gutter) clamp(32px, 4vw, 48px);
  }
  .place-anchor-wash {
    position: absolute;
    z-index: 0;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width: 900px;
    opacity: 0.07;
    pointer-events: none;
  }
  .place-anchor-wash svg { width: 100%; height: auto; display: block; }
  .place-frame {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--grid-max);
    margin: 0 auto;
  }
  .place-headline {
    max-width: 90ch;
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--paper);
    font-size: clamp(26px, 3.6vw, 46px);
    line-height: 1.15;
    margin: 0 0 clamp(14px, 2vw, 22px);
  }
  .place-headline .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .place-row { margin-top: auto; }
  .place-card {
    position: relative;
    z-index: 2;
    width: 42%;
    max-width: 520px;
    margin-left: auto;
    margin-right: 0;
    background: var(--paper);
    border-radius: 2px;
    overflow: hidden;
    padding: 44px 44px 40px;
  }
  .place-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--red);
  }
  .place-card-body {
    font-size: 14px; line-height: 1.6; color: #4A4438;
    margin: 0 0 24px;
  }
  .place-card-tagline {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 24px;
  }
  .place-card-tagline .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .place-card-link {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink);
    text-decoration: none;
    padding-bottom: 7px;
  }
  .place-card-link::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    height: 1px; width: 50%;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .place-card-link:hover::after, .place-card-link:focus-visible::after { width: 100%; }
  .place-card-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

  @media (max-width: 860px) {
    .place-headline { max-width: 100%; font-size: clamp(24px, 7vw, 34px); }
    .place-card { width: 100%; max-width: none; padding: 32px 28px; }
  }

  /* ============================================================
     RANGE DISCS — "Every bottle tells the same story."
     ============================================================ */
  section.range {
    position: relative;
    padding: clamp(56px, 8vw, 96px) var(--grid-gutter);
  }
  .range-head {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .range-head .eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold-1); margin: 0 0 12px;
    text-align: center;
    width: 100%;
  }
  .range-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(42px, 4.6vw, 60px);
    line-height: 0.95;
    margin: 0 0 20px;
    color: var(--ink);
  }
  .range-head h2 .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .range-head p {
    font-size: 16px; line-height: 1.45; color: #4A4438;
    margin: 0 auto; max-width: 56ch;
  }
  .range-head p + p { margin-top: 4px; }

  /* Bottle row: equal flex columns, each bottle letterboxed into an
     identical aspect-ratio frame (object-fit:contain) so all five read
     as the same scale/height regardless of their source PNG's own
     proportions. Name reveals on hover, oversized and centred so it
     bleeds into neighbouring columns; hovering the row dims the other
     bottles and pops the hovered one forward — this is the exact
     mechanic referenced from citadellegin.com, rebuilt with our own
     fonts/colours rather than importing their type or decoration. */
  .bottle-row {
    display: flex;
    gap: clamp(16px, 3vw, 48px);
    margin-top: clamp(48px, 7vw, 72px);
  }
  .bottle-col {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: block;
    text-decoration: none;
    transition: opacity 300ms ease;
  }
  .bottle-row:hover .bottle-col { opacity: .5; }
  .bottle-row .bottle-col:hover { opacity: 1; z-index: 10; }

  .bottle-frame { position: relative; width: 100%; aspect-ratio: 1 / 1.5; }
  .bottle-frame img {
    position: absolute; left: 50%; bottom: 0;
    width: auto; height: 88%;
    transform: translateX(-50%);
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(29,23,17,.16));
  }

  .bottle-title {
    position: absolute;
    left: 50%; top: 40%;
    width: 220%;
    transform: translate(-50%, 10px);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(22px, 3.2vw, 48px);
    line-height: 1;
    color: var(--ink);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 400ms ease, transform 400ms cubic-bezier(.25,0.1,.25,1);
  }
  .bottle-col:hover .bottle-title, .bottle-col:focus-visible .bottle-title {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .range-cta {
    display: table;
    margin: 90px auto 0;
    padding: 14px 30px;
    border-radius: 2px;
    border: 1px solid var(--gold-1);
    background: transparent;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink);
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .range-cta:hover, .range-cta:focus-visible {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
  }
  .range-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

  @media (max-width: 860px) {
    .bottle-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px 16px;
    }
    .bottle-col:last-child { grid-column: 1 / -1; }
    .bottle-row:hover .bottle-col { opacity: 1; }
    .bottle-title {
      position: static;
      display: block;
      width: auto;
      transform: none;
      opacity: 1;
      font-size: clamp(16px, 4vw, 20px);
      margin-top: 12px;
    }
    .bottle-frame { aspect-ratio: 1 / 1.1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bottle-col, .bottle-title { transition-duration: 1ms; }
  }

  /* ============================================================
     CASK CONVERSATIONS — film gallery
     ============================================================ */
  section.films {
    position: relative;
    z-index: 0;
    padding: clamp(56px, 8vw, 96px) var(--grid-gutter);
  }
  .films-head { max-width: 640px; }
  .films-head .eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold-1); margin: 0 0 12px;
  }
  .films-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(42px, 4.6vw, 60px);
    line-height: 0.95;
    margin: 0 0 20px;
    color: var(--ink);
  }
  .films-head h2 .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .films-head p {
    font-size: 16px; line-height: 1.45; color: #4A4438;
    margin: 0; max-width: 56ch;
  }
  .films-note {
    font-size: 12px; color: #6B6053; margin: 10px 0 0; max-width: 56ch;
  }

  /* Cask Conversations is deliberately NOT another row of equal photo
     tiles — it's a stage + list "episode" player: one large featured
     video with a clickable, numbered list beside it. Selecting a list
     item swaps the stage and plays that conversation; this is the one
     section on the page built around picking from a list rather than
     scanning equal cards. */
  .film-player {
    display: flex;
    align-items: stretch;
    gap: clamp(24px, 4vw, 56px);
    margin-top: clamp(40px, 6vw, 56px);
  }
  .film-stage {
    position: relative;
    flex: 1 1 68%;
    min-width: 0;
    aspect-ratio: 16 / 10;
    border-radius: 2px;
    overflow: hidden;
    background: var(--ink);
    cursor: pointer;
  }
  .film-stage img.film-poster {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(.25,0.1,.25,1), opacity 220ms ease;
  }
  .film-stage:hover img.film-poster { transform: scale(1.03); }
  .film-stage.is-switching img.film-poster,
  .film-stage.is-switching .film-stage-caption {
    opacity: 0;
  }
  .film-stage video, .film-stage iframe {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0;
  }
  .film-stage .film-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(29,23,17,0) 45%, rgba(29,23,17,.65) 100%);
    pointer-events: none;
  }
  .film-stage-caption {
    position: absolute; left: 24px; bottom: 20px; z-index: 1;
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.01em; font-size: clamp(20px, 2.2vw, 28px);
    color: var(--paper); margin: 0;
    transition: opacity 220ms ease;
  }
  .play-btn {
    position: absolute; top: 50%; left: 50%;
    width: 64px; height: 64px;
    border-radius: 2px;
    border: 1px solid rgba(244,244,244,.55);
    background: transparent;
    color: var(--paper);
    display: grid; place-items: center;
    opacity: 0;
    transform: translate(-50%, -50%) translate(6px, 6px) scale(.8);
    transition: opacity 280ms ease, transform 280ms ease, background 200ms ease, border-color 200ms ease;
  }
  .film-stage:hover .play-btn, .film-stage:focus-visible .play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0,0) scale(1);
    background: var(--red); border-color: var(--red);
  }
  .play-btn svg { width: 26px; height: 26px; margin-left: 2px; }

  .film-list { flex: 1 1 32%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .film-list-item {
    border-top: 1px solid var(--border);
    padding: 22px 2px;
  }
  .film-list li:last-child .film-list-item { border-bottom: 1px solid var(--border); }
  .film-list-item-row {
    display: flex; align-items: center; gap: 16px;
    width: 100%; text-align: left;
    border: none; background: none; cursor: pointer;
    padding: 0; font-family: inherit;
  }
  .film-list-item .num {
    flex: 0 0 28px;
    font-family: var(--font-body); font-weight: 600; font-size: 12px;
    letter-spacing: 0.1em; color: var(--gold-1);
    font-variant-numeric: tabular-nums;
  }
  .film-list-item .name {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.01em; font-size: clamp(18px, 1.8vw, 24px);
    color: var(--ink);
    transition: color 200ms ease;
  }
  .film-list-item-row:hover .name { color: var(--red); }
  .film-list-item.is-active .num { color: var(--red); }
  .film-list-item.is-active .name { font-weight: 600; }
  .film-list-item.is-active .film-list-item-row::after {
    content: ""; margin-left: auto;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--red);
  }
  .film-list-item-expand {
    display: grid;
    grid-template-rows: 0fr;
    padding-left: 44px;
    max-width: 44ch;
    opacity: 0;
    transition: grid-template-rows 400ms cubic-bezier(.25,0.1,.25,1), opacity 300ms ease, margin-top 400ms ease;
  }
  .film-list-item-expand-inner { min-height: 0; overflow: hidden; }
  .film-list-item.is-active .film-list-item-expand {
    grid-template-rows: 1fr; opacity: 1; margin-top: 12px;
  }
  .film-list-item-desc {
    margin: 0;
    font-size: 14px; line-height: 1.6; color: #4A4438;
  }
  .film-list-item-cta {
    position: relative;
    display: inline-block;
    margin-top: 14px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink);
    text-decoration: none;
    padding-bottom: 6px;
  }
  .film-list-item-cta::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    height: 1px; width: 50%;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .film-list-item-cta:hover::after, .film-list-item-cta:focus-visible::after { width: 100%; }
  .film-list-item-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

  @media (max-width: 860px) {
    .film-player { flex-direction: column; }
    .film-stage { aspect-ratio: 4 / 3; }
    .play-btn { opacity: 1; transform: translate(-50%, -50%); }
    /* Once a real <video> with native controls is playing, let the
       stage bleed full viewport width instead of sitting inside the
       grid-gutter — Safari's native control bar doesn't collapse
       extra icons into an overflow menu the way Chrome's does, so a
       narrow, inset container can end up cutting off the fullscreen/
       more-options icons on the right. Full width gives it the most
       room to render every control without truncation. */
    .film-stage:has(video) {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      border-radius: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .film-stage img.film-poster, .film-stage-caption, .play-btn, .film-list-item-expand { transition-duration: 1ms; }
  }

/* ============================================================
     THE PLACE — "Some places stay with you."
     ============================================================ */
  section.place-story {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--ink);
    /* Brightened from the original heavy ink-wash — the gradient now
       only holds real contrast directly behind the headline (0-35%,
       for AA legibility of the white text), fading much faster to
       near-clear so the rest of the photo reads at full brightness. */
    background-image:
      linear-gradient(to right, rgba(29,35,42,.72) 0%, rgba(29,35,42,.28) 35%, rgba(29,35,42,.06) 60%, rgba(29,35,42,.04) 100%),
      url("/wp-content/uploads/gen3/assets/images/place-image.jpeg");
    background-position: top, top;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    padding: clamp(90px, 12vw, 140px) var(--grid-gutter) clamp(32px, 4vw, 48px);
  }
  .place-anchor-wash {
    position: absolute;
    z-index: 0;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width: 900px;
    opacity: 0.07;
    pointer-events: none;
  }
  .place-anchor-wash svg { width: 100%; height: auto; display: block; }
  .place-frame {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--grid-max);
    margin: 0 auto;
  }
  .place-headline {
    max-width: 90ch;
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--paper);
    font-size: clamp(32px, 3.6vw, 46px);
    line-height: 1.15;
    margin: 0 0 clamp(14px, 2vw, 22px);
  }
  .place-headline .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .place-row { margin-top: auto; }
  .place-card {
    position: relative;
    z-index: 2;
    width: 42%;
    max-width: 520px;
    margin-left: auto;
    margin-right: 0;
    background: var(--paper);
    border-radius: 2px;
    overflow: hidden;
    padding: 44px 44px 40px;
  }
  .place-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 6px;
    background: var(--red);
  }
  .place-card-body {
    font-size: 14px; line-height: 1.6; color: #4A4438;
    margin: 0 0 24px;
  }
  .place-card-tagline {
    font-size: 14px;
    line-height: 1.6;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 24px;
  }
  .place-card-tagline .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .place-card-link {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink);
    text-decoration: none;
    padding-bottom: 7px;
  }
  .place-card-link::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    height: 1px; width: 50%;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .place-card-link:hover::after, .place-card-link:focus-visible::after { width: 100%; }
  .place-card-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

  /* Mobile: min-height:100vh plus .place-row's margin-top:auto (which
     pins the card to the very bottom of a full viewport-height
     section) leaves a huge empty gap under a short headline on most
     phone/tablet screens. Let the section hug its real content
     instead, with a fixed ~90px gap between headline and card. */
  @media (max-width: 860px) {
    section.place-story { min-height: 0; }
    .place-frame { flex: 0 0 auto; }
    .place-row { margin-top: 90px; }
    .place-headline { max-width: 100%; font-size: clamp(32px, 7vw, 34px); }
    .place-card { width: 100%; max-width: none; padding: 32px 28px; }
  }

  /* ============================================================

  /* ============================================================
     SOCIAL WALL — auto-scrolling strip of Instagram/LinkedIn/X
     content. Real posts pulled from the staging site's wcw-sfb
     component (images + platform links), rebuilt here as a
     borderless, edge-to-edge marquee rather than its bento grid.
     Card sequence is duplicated in the DOM (second half marked
     aria-hidden) so translateX(-50%) loops with no visible seam.
     ============================================================ */
  section.social-wall {
    position: relative;
    padding: 0;
  }
  /* Full viewport-width gold rule, flush above and below the carousel —
     same left:calc(50% - 50vw) bleed as the viewport itself. */
  .social-wall-rule {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 2px;
    background: var(--red);
  }
  /* Full viewport-width strip, breaking out of the section's own
     grid-gutter padding — same left:calc(50% - 50vw) bleed used by
     .pillars-bleed and .footer-bottom elsewhere on this page. */
  .social-wall-viewport {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
  }
  .social-wall-track {
    display: flex;
    width: max-content;
    animation: social-wall-scroll 56s linear infinite;
  }
  .social-wall-track:hover { animation-play-state: paused; }
  @keyframes social-wall-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .social-card {
    position: relative;
    flex: 0 0 auto;
    width: 400px;
    height: 400px;
    overflow: hidden;
    display: block;
    text-decoration: none;
  }
  .social-card img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 700ms cubic-bezier(.25,0.1,.25,1);
  }
  .social-card:hover img { transform: scale(1.045); }
  .social-card-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(29,35,42,0) 0%, rgba(29,35,42,0) 40%, rgba(29,35,42,.55) 78%, rgba(29,35,42,.92) 100%);
    pointer-events: none;
  }
  /* Same square badge as .burger: 38px, radius 2px, transparent with
     a translucent paper border by default — and the identical
     hover recipe (solid red fill, icon stays paper via currentColor)
     rather than reinventing a new treatment. */
  .social-card-icon {
    position: absolute; left: 16px; bottom: 16px;
    width: 38px; height: 38px; border-radius: 2px;
    border: 1px solid rgba(244,244,244,.55);
    background: transparent;
    color: var(--paper);
    display: grid; place-items: center;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .social-card-icon svg { width: 18px; height: 18px; display: block; }
  .social-card:hover .social-card-icon,
  .social-card:focus-visible .social-card-icon {
    background: var(--red);
    border-color: var(--red);
  }
  .social-card:focus-visible { outline: 2px solid var(--paper); outline-offset: -4px; }

  @media (max-width: 640px) {
    .social-card { width: 260px; height: 260px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .social-wall-track { animation: none; }
  }

  
  /* ============================================================
     FOOTER
     ============================================================ */
  footer.site-footer {
    position: relative;
    background: var(--ink);
    padding: clamp(56px, 7vw, 88px) var(--grid-gutter) 0;
  }
  .footer-frame { max-width: var(--grid-max); margin: 0 auto; }
  .footer-top {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    padding-bottom: clamp(48px, 6vw, 72px);
  }
  .footer-brand { flex: 0 0 auto; max-width: 320px; }
  .footer-mark { width: clamp(150px, 15vw, 190px); display: block; }
  .footer-address {
    font-size: 20px; line-height: 1.4; color: var(--paper);
    margin: 26px 0 0;
  }
  .footer-note {
    font-size: 13px; color: rgba(244,244,244,.5);
    margin: 16px 0 0;
  }
  .footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex: 1 1 auto;
    gap: clamp(24px, 4vw, 56px);
  }
  .footer-col-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: none; padding: 0; margin: 0 0 20px;
    cursor: default; text-align: left; font: inherit; color: inherit;
  }
  .footer-col-toggle h4 { margin: 0; }
  .footer-col-chevron { display: none; color: var(--paper); }
  .footer-col-expand { display: contents; }
  .footer-col h4 {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.14em; font-size: 13px;
    color: var(--paper); margin: 0 0 20px;
  }
  .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .footer-col a {
    position: relative;
    display: inline-block;
    font-size: 15px;
    color: rgba(244,244,244,.65);
    text-decoration: none;
    transition: color 150ms ease;
  }
  .footer-col a::after {
    content: "";
    position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
    background: var(--red);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .footer-col a:hover, .footer-col a:focus-visible { color: var(--paper); }
  .footer-col a:hover::after, .footer-col a:focus-visible::after { width: 100%; }

  .footer-awards {
    border-top: 1px solid rgba(163,117,41,.35);
    padding: 32px 0;
    text-align: center;
  }
  .footer-awards-label {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.14em; font-size: 13px;
    color: rgba(244,244,244,.5); margin: 0 0 24px;
  }
  .footer-awards-row {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: clamp(20px, 3vw, 40px);
  }
  .footer-awards-row img {
    height: 64px; width: auto; display: block;
    opacity: 0.9;
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .footer-awards-row img:hover { opacity: 1; transform: translateY(-2px); }

  @media (max-width: 860px) {
    .footer-awards { padding: 24px 0; }
    .footer-awards-row { gap: 20px; }
    .footer-awards-row img { height: 48px; }
  }

  .footer-bottom {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--red);
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    padding: 22px clamp(20px, 5vw, 64px);
    font-size: 13px;
    color: rgba(244,244,244,.75);
  }
  .footer-credit { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
  .footer-credit strong { font-weight: 700; text-decoration: none; }
  .footer-legal { display: inline-flex; gap: 8px; }
  .footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .footer-legal a:hover, .footer-legal a:focus-visible { color: var(--paper); }

  @media (max-width: 1100px) and (min-width: 861px) {
    .footer-top { gap: 40px; }
    .footer-cols { grid-template-columns: repeat(2, 1fr); row-gap: clamp(24px, 4vw, 40px); }
  }

  @media (max-width: 860px) {
    .footer-top { flex-direction: column; }
    .footer-cols { display: flex; flex-direction: column; gap: 0; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

    .footer-col { border-top: 1px solid rgba(244,244,244,.15); }
    .footer-col:last-child { border-bottom: 1px solid rgba(244,244,244,.15); }
    .footer-col-toggle { cursor: pointer; padding: 18px 0; margin: 0; }
    .footer-col-chevron { display: block; width: 14px; height: 14px; flex: 0 0 auto; transition: transform 300ms ease; }
    .footer-col-toggle[aria-expanded="true"] .footer-col-chevron { transform: rotate(180deg); }
    .footer-col-expand {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 350ms cubic-bezier(.25,0.1,.25,1);
    }
    .footer-col-expand-inner { overflow: hidden; min-height: 0; }
    .footer-col-toggle[aria-expanded="true"] + .footer-col-expand { grid-template-rows: 1fr; }
    .footer-col ul { padding-bottom: 20px; }
  }

  /* Page (not homepage) background — this page has no hero video to
     fade the body colour on scroll, so it sits on paper throughout,
     with the banner below providing its own dark ground for the
     overlaid nav and title. */
  html, body { background-color: var(--paper); }

  /* ============================================================
     PLACE BANNER — same mechanic as the homepage hero (transparent
     nav fading in over a dark-scrimmed image, headline bottom-left)
     at half the height, since this page doesn't need a full-screen
     opener — it's a section banner, not the front door.
     ============================================================ */
  .place-hero {
    height: 50vh; min-height: 320px;
    /* The map graphic is meant to bleed past the banner into the
       section below on shorter viewports — overflow:visible lets it
       do that instead of .hero's shared overflow:hidden clipping it. */
    overflow: visible;
  }
  .place-hero img.place-hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 42%; z-index: 0;
  }
  .place-hero .hero-content { bottom: 48px; }
  /* place image.jpeg is bright — the shared .scrim (tuned for the
     homepage's darker hero footage) isn't enough contrast for the
     white nav/logo sitting directly on it, so this banner gets its
     own darker pass. */
  .place-hero .scrim {
    background:
      linear-gradient(to bottom, rgba(29,23,17,.78) 0%, rgba(29,23,17,.42) 20%, rgba(29,23,17,.42) 55%, rgba(29,23,17,.55) 72%, rgba(29,23,17,.94) 100%);
  }

  /* West Cork map outline — a very low-opacity brand watermark behind
     Chapter 1's media/copy, flush with the container's top-right
     corner. z-index:0 (not negative — negative z-index on a descendant
     is invisible anywhere on this page, since html/body's overflow-x:
     hidden triggers a Chromium quirk that drops negative-z-index
     paint entirely) placed first in the DOM, with the media/copy
     siblings given position:relative so they paint after it at the
     same stack level and so sit visually on top. */
  .place-chapter-mark {
    position: absolute;
    top: 0; right: 0;
    z-index: 0;
    width: clamp(374px, 47vw, 702px);
    opacity: 0.1;
    pointer-events: none;
  }
  .place-chapter-mark svg path { fill: var(--deep-red); }
  .place-chapter-mark svg { width: 100%; height: auto; display: block; }

  /* ============================================================
     PLACE CHAPTERS — structure mapped from the Citadelle Gin
     homepage (asymmetric text/collage split, rotated numeral index,
     rule-plus-flanked-label CTA), rebuilt entirely in this site's
     own fonts, colours and photography. Two instances, mirrored to
     keep the current text orientation: chapter 1 media left/copy
     right, chapter 2 (.rev) copy left/media right.
     ============================================================ */
  .place-chapter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: clamp(32px, 5vw, 80px);
    min-height: clamp(480px, 62vw, 720px);
    padding: clamp(56px, 8vw, 96px) var(--grid-gutter);
  }
  .place-chapter.rev .place-chapter-media { order: 2; }
  /* First chapter sits directly under the banner — extra clearance
     so it doesn't feel like it's butting straight up against it.
     Also the positioning context for .place-chapter-mark below. */
  #place-chapter-1 { padding-top: calc(clamp(56px, 8vw, 96px) + 50px); position: relative; }

  /* Chapter 2 sits on ink instead of paper, so its copy flips to
     light text for contrast — the gold full stop needs no change. */
  #place-chapter-2 { background: var(--ink); }
  #place-chapter-2 .place-chapter-copy h2 { color: var(--paper); }
  #place-chapter-2 .place-chapter-copy p { color: rgba(244,244,244,.75); }
  #place-chapter-2 .place-chapter-cta { color: var(--paper); }
  #place-chapter-2 .place-chapter-cta:focus-visible { outline-color: var(--paper); }

  /* Staggered main + accent image collage, replacing a single
     full-bleed photo — a smaller image overlaps the top corner of
     the larger one, mirrored toward whichever side is the gutter. */
  .place-chapter-media { position: relative; }
  /* The single photo is clipped into the West Cork coastline outline
     (a client-supplied cutout, reused here as a mask) rather than sat
     in a plain rectangle — replaces the old main+accent photo collage. */
  .place-chapter-img-main {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
  }
  .place-chapter-img-main img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }

  .place-chapter-copy {
    display: flex; flex-direction: column; justify-content: center;
    position: relative;
  }
  .place-chapter-copy .eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold-1); margin: 0 0 16px;
  }
  .place-chapter-copy .eyebrow::before {
    content: "";
    display: block;
    width: 40px; height: 2px;
    margin: 0 0 14px;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
  }
  .place-chapter-copy h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(31px, 3.4vw, 44px);
    line-height: 1.02;
    margin: 0 0 24px;
    color: var(--ink);
    max-width: 26ch;
  }
  .place-chapter-copy h2 .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .place-chapter-copy p {
    font-size: 16px; line-height: 1.6; color: #4A4438;
    margin: 0 0 14px; max-width: 46ch;
  }
  .place-chapter-copy p:last-of-type { margin-bottom: 0; }

  /* CTA: the homepage's underline-stroke treatment (place-card-link /
     film-list-item-cta) — a gold-gradient line under the label that
     expands to full width on hover. align-self:flex-start keeps the
     link sized to its own text rather than stretched by the flex
     column parent, so the line tracks the words, not the container. */
  .place-chapter-cta {
    align-self: flex-start;
    position: relative;
    display: inline-block;
    margin-top: 32px;
    font-family: var(--font-display); font-weight: 500; font-size: 15px;
    text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--ink); text-decoration: none;
    padding-bottom: 7px;
  }
  .place-chapter-cta::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    height: 1px; width: 50%;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .place-chapter-cta:hover::after, .place-chapter-cta:focus-visible::after { width: 100%; }
  .place-chapter-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

  @media (max-width: 860px) {
    .place-chapter { grid-template-columns: 1fr; min-height: 0; row-gap: 32px; }
    .place-chapter.rev .place-chapter-media { order: 0; }
    .place-chapter-copy h2 { max-width: none; }
  }

  /* ============================================================
     WHY FIVE YEARS — cask photo + red panel carrying a huge
     translucent "5" watermark behind a 2x2 benefit grid.
     ============================================================ */
  .why-five { display: grid; grid-template-columns: 1fr 1fr; }
  /* min-height:0 stops the image's own intrinsic aspect ratio from
     inflating the grid row taller than the copy actually needs —
     without it, the row matched the (taller) photo and left dead
     red space under the benefits grid. The image now just crops
     (object-fit:cover) to whatever height the copy establishes. */
  .why-five-media { position: relative; z-index: 2; overflow: hidden; height: 0; min-height: 100%; }
  .why-five-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .why-five-copy {
    position: relative; z-index: 1; overflow: visible;
    background: var(--red); color: var(--paper);
    padding: calc(clamp(32px, 4vw, 48px) + 40px) clamp(32px, 5vw, 64px);
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  .why-five-num {
    position: absolute; left: clamp(-100px, -4vw, -60px); top: 50%; transform: translateY(-50%);
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(260px, 30vw, 420px); line-height: 1; color: var(--deep-red);
    z-index: 0; pointer-events: none; user-select: none;
  }
  .why-five-copy > *:not(.why-five-num) { position: relative; z-index: 1; }
  .why-five-copy .eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--paper); opacity: 0.85; margin: 0 0 16px;
  }
  .why-five-copy h2 {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.02em; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.0;
    color: var(--paper); margin: 0 0 clamp(32px, 4vw, 48px); max-width: 100%;
  }
  .why-five-copy h2 .dot { color: var(--paper); }
  .why-five-benefits {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: clamp(24px, 3vw, 48px); row-gap: clamp(22px, 3vw, 32px);
    max-width: 620px;
  }
  .why-five-copy p { font-size: 16px; line-height: 1.6; color: rgba(244,244,244,.85); margin: 0 0 16px; max-width: 620px; }
  .why-five-copy p:last-of-type { margin-bottom: 0; }
  .why-five-cta {
    align-self: flex-start;
    position: relative; display: inline-block; margin-top: clamp(24px, 3vw, 32px);
    font-family: var(--font-display); font-weight: 500; font-size: 15px;
    text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--paper); text-decoration: none; padding-bottom: 7px;
  }
  .why-five-cta::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 50%;
    background: var(--paper);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .why-five-cta:hover::after, .why-five-cta:focus-visible::after { width: 100%; }
  .why-five-cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

  /* ============================================================
     ENJOY THE WHISKEY, ON YOUR TERMS — same chapter component as
     the-place.html's place-chapter, adapted for a landscape video:
     wider media column and a 16:9 box instead of the usual 1:1.
     ============================================================ */
  .enjoy-chapter {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: center;
    column-gap: clamp(32px, 5vw, 80px);
    min-height: clamp(480px, 62vw, 720px);
    padding: clamp(56px, 8vw, 96px) var(--grid-gutter);
  }
  .enjoy-chapter-media { position: relative; }
  /* Click-to-play poster, same treatment as the Cask Conversations
     film-stage elsewhere on the site — starts as a still with a play
     button rather than autoplaying, and only becomes a real <video>
     (with sound, native controls) once clicked. */
  .enjoy-chapter-media-main {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
    background: var(--ink);
    cursor: pointer;
  }
  .enjoy-chapter-media-main img.enjoy-poster {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(.25,0.1,.25,1);
  }
  .enjoy-chapter-media-main:hover img.enjoy-poster { transform: scale(1.03); }
  .enjoy-chapter-media-main video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
  }
  .enjoy-chapter-media-main .enjoy-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(29,23,17,0) 45%, rgba(29,23,17,.65) 100%);
    pointer-events: none;
  }
  .enjoy-chapter-media-main .play-btn {
    position: absolute; top: 50%; left: 50%;
    width: 64px; height: 64px;
    border-radius: 2px;
    border: 1px solid rgba(244,244,244,.55);
    background: transparent;
    color: var(--paper);
    display: grid; place-items: center;
    opacity: 0;
    transform: translate(-50%, -50%) translate(6px, 6px) scale(.8);
    transition: opacity 280ms ease, transform 280ms ease, background 200ms ease, border-color 200ms ease;
  }
  .enjoy-chapter-media-main:hover .play-btn, .enjoy-chapter-media-main:focus-visible .play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0,0) scale(1);
    background: var(--red); border-color: var(--red);
  }
  .enjoy-chapter-media-main .play-btn svg { width: 26px; height: 26px; margin-left: 2px; }
  @media (max-width: 860px) {
    .enjoy-chapter-media-main .play-btn { opacity: 1; transform: translate(-50%, -50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .enjoy-chapter-media-main img.enjoy-poster, .enjoy-chapter-media-main .play-btn { transition-duration: 1ms; }
  }
  .enjoy-chapter-copy {
    display: flex; flex-direction: column; justify-content: center;
  }
  .enjoy-chapter-copy h2 {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(31px, 3.4vw, 44px);
    line-height: 1.02;
    margin: 0 0 24px;
    color: var(--ink);
    max-width: 26ch;
  }
  .enjoy-chapter-copy h2 .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .enjoy-chapter-copy p {
    font-size: 16px; line-height: 1.6; color: #4A4438;
    margin: 0 0 14px; max-width: 46ch;
  }
  .enjoy-chapter-copy p:last-of-type { margin-bottom: 0; }
  @media (max-width: 860px) {
    .enjoy-chapter { grid-template-columns: 1fr; min-height: 0; row-gap: 32px; padding: clamp(28px, 4vw, 48px) var(--grid-gutter); }
    .enjoy-chapter-copy h2 { max-width: none; }
  }
  .why-five-benefit h3 {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.01em; font-size: 17px; margin: 0 0 8px; color: var(--paper);
  }
  .why-five-benefit p { font-size: 14px; line-height: 1.55; color: rgba(244,244,244,.82); margin: 0; }
  @media (max-width: 860px) {
    .why-five { grid-template-columns: 1fr; }
    .why-five-media { aspect-ratio: 16 / 9; }
    .why-five-benefits { grid-template-columns: 1fr; }
    .why-five-num { left: 50%; transform: translate(-50%, -50%); font-size: clamp(160px, 48vw, 240px); opacity: 0.7; }
  }

  /* ============================================================
     WHISKEY RANGE — tab set covering the five core expressions plus
     the Iced Toddy serve, each panel sharing the same media+copy
     split as the chapter component elsewhere on this site.
     ============================================================ */
  .whiskey-range { position: relative; padding: 40px var(--grid-gutter) 0; }
  .whiskey-range .eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold-1); margin: 0 0 16px;
  }
  .whiskey-range .eyebrow::before {
    content: ""; display: block; width: 40px; height: 2px; margin: 0 0 14px;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
  }

  .whiskey-tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: clamp(24px, 3vw, 32px);
    margin-bottom: clamp(40px, 6vw, 64px);
  }
  .whiskey-tab {
    font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent; color: var(--ink);
    border: 1px solid var(--border); border-radius: 2px;
    padding: 10px 18px; cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .whiskey-tab:hover, .whiskey-tab:focus-visible { border-color: var(--ink); }
  .whiskey-tab.is-active { background: var(--red); border-color: var(--red); color: var(--paper); }

  .whiskey-panel {
    display: grid; grid-template-columns: 3.4fr 6.6fr;
    align-items: start;
    column-gap: clamp(32px, 5vw, 80px);
    padding-bottom: clamp(56px, 8vw, 96px);
    min-height: 860px;
    scroll-margin-top: 110px;
    opacity: 1;
    transition: opacity 420ms ease;
  }
  .whiskey-panel[hidden] { display: none; }
  /* Used only for the instant after a panel is un-hidden but before
     its fade-in has been allowed to start (see activate() in the
     script below) — keeps a tab switch/deep link from just snapping
     the new panel into view. */
  .whiskey-panel.is-entering { opacity: 0; }
  @media (prefers-reduced-motion: reduce) {
    .whiskey-panel { transition-duration: 1ms; }
  }
  /* The outer wrapper stretches to the full row height (driven by
     whichever tab's copy is tallest) so it acts as the scroll "track" —
     the inner box is the actual sticky element, sized to just the
     bottle's own display area, so it keeps following the scroll and
     stays visible for the full length of that track instead of
     detaching as soon as its own (otherwise oversized) box ends. */
  .whiskey-panel-media { align-self: stretch; width: 100%; }
  /* The inner box sizes itself tightly to the bottle image (fixed
     height, not a tall aspect-ratio box) so there's no dead space
     between the visible bottle and its own sticky container — that
     dead space was what stopped the bottle looking like it "reached"
     the CTA even though the (taller, invisible) box behind it did. */
  .whiskey-panel-media-inner {
    position: sticky; top: 130px;
    width: 100%;
    display: grid; justify-items: center;
  }
  .whiskey-panel-media-bottle {
    position: relative; z-index: 1;
    height: 490px; width: auto; max-width: 100%; object-fit: contain; display: block;
    transform: translateX(10px);
    filter: drop-shadow(0 14px 20px rgba(29,23,17,.16));
  }
  /* These four bottle shapes render visually larger than the others
     at the same height, so they're sized down 20%. */
  #maritime-sherry .whiskey-panel-media-bottle,
  #maritime-rum .whiskey-panel-media-bottle,
  #maritime-virgin-oak .whiskey-panel-media-bottle {
    height: 392px;
  }
  /* Iced Toddy glass, sized down a further 23.5% on top of that. */
  #iced-toddy .whiskey-panel-media-bottle {
    height: 300px;
  }
  .whiskey-panel-copy .eyebrow { margin-bottom: 16px; }
  .whiskey-panel-copy h3 {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.05;
    margin: 0 0 20px;
    color: var(--ink);
  }
  .whiskey-panel-copy h3 .dot {
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .whiskey-panel-copy p { font-size: 16px; line-height: 1.6; color: #4A4438; margin: 0 0 14px; max-width: 46ch; }
  .whiskey-specs {
    display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px);
    margin-top: clamp(20px, 3vw, 32px);
    padding-top: clamp(20px, 3vw, 32px);
    border-top: 1px solid var(--border);
  }
  .whiskey-spec-label {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.08em; font-size: 13px;
    color: var(--ink); margin: 0 0 12px;
  }
  .whiskey-note-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; }
  .whiskey-note-card { background: none; padding: 0 0 0 20px; border-left: 1px solid var(--border); }
  .whiskey-note-card:first-child { padding-left: 0; border-left: none; }
  .whiskey-note-card svg { width: 34px; height: 34px; display: block; margin: 0 0 12px; color: var(--gold-1); }
  .whiskey-note-photo { width: auto; height: 56px; display: block; margin: 0 0 12px; object-fit: contain; }
  .whiskey-note-card h5 {
    font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.08em; font-size: 13px; margin: 0 0 8px;
    background: linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  .whiskey-note-card p { font-size: 13px; line-height: 1.55; color: #4A4438; margin: 0; max-width: none; }
  /* Tasting Notes keeps the solid red card treatment; Perfect Serve
     uses the plain divided-list style above. */
  .whiskey-note-cards--boxed { gap: 10px; }
  .whiskey-note-cards--boxed .whiskey-note-card {
    background: var(--red); border-radius: 2px; padding: 16px 16px 18px;
    border-left: none;
  }
  .whiskey-note-cards--boxed .whiskey-note-card:first-child { padding-left: 16px; }
  .whiskey-note-cards--boxed .whiskey-note-card svg { color: var(--paper); }
  .whiskey-note-cards--boxed .whiskey-note-card h5 {
    background: none; -webkit-text-fill-color: unset; color: var(--paper);
  }
  .whiskey-note-cards--boxed .whiskey-note-card p { color: rgba(244,244,244,.92); }
  .whiskey-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 44px; margin-top: calc(clamp(24px, 3vw, 36px) + 40px); }
  .whiskey-cta {
    position: relative; display: inline-block;
    font-family: var(--font-display); font-weight: 500; font-size: 15px;
    text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--ink); text-decoration: none; padding-bottom: 7px;
  }
  .whiskey-cta::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 50%;
    background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
    transition: width 320ms cubic-bezier(.65,0,.35,1);
  }
  .whiskey-cta:hover::after, .whiskey-cta:focus-visible::after { width: 100%; }
  .whiskey-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .whiskey-cta--ghost {
    padding: 12px 22px 11px; border: 1px solid var(--ink); border-radius: 2px;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .whiskey-cta--ghost::after { display: none; }
  .whiskey-cta--ghost:hover, .whiskey-cta--ghost:focus-visible {
    background: var(--red); border-color: var(--red); color: var(--paper);
  }
  @media (max-width: 860px) {
    /* Flexbox instead of a single-column grid — grid + the desktop
       sticky/align-items:start combination was causing the copy
       column to overlap the media row instead of stacking cleanly. */
    .whiskey-panel { display: flex; flex-direction: column; gap: 32px; padding-bottom: clamp(28px, 4vw, 48px); }
    /* Same composition as desktop (same aspect-ratio, same percentage
       sizing on the mark/bottle below) just at a narrower, centered
       width — so it's a straight scale-down, not a re-tuned layout,
       and the anchor is free to bleed past the edges exactly like it
       does on desktop rather than being clipped. */
    .whiskey-panel-media { align-self: auto; width: auto; }
    .whiskey-panel-media-inner { position: relative; top: auto; width: 230px; margin: 0 auto; }
    /* One consistent bottle height on mobile — Original/Black Cask
       otherwise read noticeably larger than the rounder Maritime/Iced
       Toddy shapes at this composition size. */
    .whiskey-panel-media-bottle,
    #maritime-sherry .whiskey-panel-media-bottle,
    #maritime-rum .whiskey-panel-media-bottle,
    #maritime-virgin-oak .whiskey-panel-media-bottle,
    #iced-toddy .whiskey-panel-media-bottle {
      height: 215px;
    }
    .whiskey-note-cards { grid-template-columns: 1fr 1fr; }
  }

  /* ============================================================
     Subtle brand watermark — reused anchor mark, very low opacity,
     sits behind section content purely for texture/depth. Never
     interactive, never affects layout.
     ============================================================ */
  .section-mark {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
  }
  .section-mark svg { width: 100%; height: auto; display: block; }
  .section-mark--pillars { top: -40px; right: -60px; width: clamp(220px, 26vw, 360px); }
  .section-mark--range   { bottom: -60px; left: -80px; width: clamp(220px, 26vw, 360px); }
  .section-mark--films   { top: -30px; left: 50%; transform: translateX(-50%); width: clamp(200px, 22vw, 320px); }

  .pillars-head, .card-row, .range-head, .bottle-row, .range-cta,
  .films-head, .film-player { position: relative; z-index: 1; }

  /* ============================================================
     Reveal-on-scroll — cards/items fade + rise into place, staggered
     within their own group via a JS-set transition-delay. Understated
     by design; fully inert under reduced-motion.
     ============================================================ */
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 650ms cubic-bezier(.25,0.1,.25,1), transform 650ms cubic-bezier(.25,0.1,.25,1);
  }
  [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { transition-duration: 1ms; }
  }

  [data-parallax] { will-change: transform; }