/* ==========================================================================
   COMPONENTS — every block in the site. All values come from tokens.css.
   ========================================================================== */

/* ------------------------------------------------------------------ BUTTON */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-7);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: var(--fg);
  background: transparent;
  transition:
    color var(--d-base) var(--ease),
    background-color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease);
}

.button:hover {
  background: var(--fg);
  color: var(--bg);
}

.button--solid {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.button--solid:hover {
  background: transparent;
  color: var(--fg);
}

/* ------------------------------------------------------------------ HEADER
   Navigation is close to invisible: it sits over the image, weighs nothing,
   and only acquires a surface once the reader has left the opening frame. */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--c-paper);
  /* Soft top wash only — no hard bar, so the page keeps breathing under it. */
  background: linear-gradient(
    to bottom,
    rgba(11, 11, 12, 0.42) 0%,
    rgba(11, 11, 12, 0.12) 55%,
    transparent 100%
  );
  transition:
    background var(--d-slow) var(--ease),
    color var(--d-slow) var(--ease),
    opacity var(--d-slow) var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-settled {
  background: linear-gradient(
    to bottom,
    rgba(11, 11, 12, 0.58) 0%,
    rgba(11, 11, 12, 0.22) 62%,
    transparent 100%
  );
}

body.is-nav-open .header {
  z-index: 9200;
  background: linear-gradient(
    to bottom,
    rgba(11, 11, 12, 0.72) 0%,
    rgba(11, 11, 12, 0.35) 70%,
    transparent 100%
  );
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: var(--container);
  margin-inline: auto;
  height: 100%;
}

.header__end {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-5), 3vw, var(--s-7));
  flex: 0 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex: 0 0 auto;
  height: 100%;
}

/* Larger share of the existing bar — bar height itself stays put. */
.brand__mark {
  height: calc(var(--header-h) - 0.75rem);
  width: auto;
  object-fit: contain;
  object-position: left center;
  filter:
    drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 10px rgba(234, 180, 102, 0.28))
    drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.brand__name {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  line-height: 1;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

.brand__latin {
  font-size: clamp(0.75rem, 1vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand__cn {
  font-family: var(--font-cn);
  font-weight: 200;
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  opacity: 0.7;
}

/* ------------------------------------------------------- LANGUAGE SWITCH
   Two words and a hairline. It should read as part of the typography,
   not as a control. */

.lang {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
}

.lang__btn {
  padding: 0;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: inherit;
  opacity: 0.45;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  transition: opacity var(--d-base) var(--ease);
}

.lang__btn:hover {
  opacity: 0.8;
}

.lang__btn[aria-pressed="true"] {
  opacity: 1;
}

.lang__sep {
  width: 1px;
  height: 0.75rem;
  background: currentColor;
  opacity: 0.28;
}

/* Current chapter + hamburger — always top-right, never over the copy. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.5rem;
  max-width: min(14rem, 46vw);
  padding: 0.4rem 0.15rem 0.4rem 0.85rem;
  color: var(--c-paper);
  z-index: 9300;
}

.nav-here {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(0.6875rem, 1.4vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  opacity: 0.9;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.nav-toggle__icon {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 1.35rem;
  height: 1.35rem;
}

.nav-toggle__line {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--d-base) var(--ease), opacity var(--d-base) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-here {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* ----------------------------------------------------------- CHAPTER OPEN
   Pinned valley frame: poster screen, then body scrolls over the same image. */

.chapter--summit {
  position: relative;
  isolation: isolate;
  /* overflow must stay visible — sticky chapter pins break inside clip/hidden. */
  background: var(--c-ink);
  color: var(--c-paper);
}

.summit__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.summit__bgPin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.summit__bgPin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(var(--media-saturate, 0.68));
}

.summit__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 11, 12, 0.9) 0%,
    rgba(11, 11, 12, 0.2) 55%,
    rgba(11, 11, 12, 0.5) 100%
  );
}

.summit__open,
.summit__body {
  position: relative;
  z-index: 2;
}

.summit__open {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(var(--s-8), 10vh, var(--s-10));
}

.summit__body {
  background: linear-gradient(
    to bottom,
    rgba(11, 11, 12, 0) 0%,
    rgba(11, 11, 12, 0.74) 16%,
    rgba(11, 11, 12, 0.84) 100%
  );
}

.summit__label {
  margin-bottom: var(--s-6);
  color: rgba(242, 239, 234, 0.7);
}

.summit__title {
  max-width: 18ch;
}

.summit__cn {
  margin-top: var(--s-5);
  font-size: clamp(0.875rem, 1.2vw, 1.0625rem);
  letter-spacing: 0.18em;
  color: var(--c-stone-300);
}

.summit__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-top: clamp(var(--s-7), 8vh, var(--s-9));
  padding-top: var(--s-5);
  border-top: 1px solid rgba(242, 239, 234, 0.18);
}

.summit__note {
  max-width: 32ch;
  color: rgba(242, 239, 234, 0.75);
}

/* --------------------------------------------------------------------- HERO
   One image. One line. Nothing else competes. */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
}

.hero__media {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(11, 11, 12, 0.9) 0%, rgba(11, 11, 12, 0.15) 55%, rgba(11, 11, 12, 0.45) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: var(--container);
  margin-inline: auto;
  padding-bottom: clamp(var(--s-8), 10vh, var(--s-10));
  color: var(--c-paper);
}

.hero__label {
  margin-bottom: var(--s-6);
  color: rgba(242, 239, 234, 0.7);
}

.hero__title {
  max-width: 18ch;
}

.hero__cn {
  margin-top: var(--s-5);
  font-size: clamp(0.875rem, 1.2vw, 1.0625rem);
}

.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-top: clamp(var(--s-7), 8vh, var(--s-9));
  padding-top: var(--s-5);
  border-top: 1px solid rgba(242, 239, 234, 0.18);
}

.hero__note {
  max-width: 32ch;
  color: rgba(242, 239, 234, 0.75);
}

/* Scroll cue — a single hairline that breathes */
.scroll-cue {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: rgba(242, 239, 234, 0.55);
  white-space: nowrap;
}

.scroll-cue__line {
  display: block;
  width: 4rem;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: cue 3.2s var(--ease) infinite;
}

@keyframes cue {
  0%, 100% { transform: scaleX(0.25); opacity: 0.4; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

/* ------------------------------------------------------------ PHOTO SECTION
   The opening frame's construction — photograph, scrim, content — made
   reusable. Applied to the sections that would otherwise be flat black
   with nothing in them but type, so the page keeps some air in it.

   The scrim carries the whole burden here: it has to sink the photograph
   far enough that body copy reads cleanly, while leaving the horizon
   legible. --scrim-top and --scrim-bottom let each section tune that
   against its own picture. */

.section--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-ink);
}

.section__media {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  will-change: transform;
}

/* These photographs are working as ground, not as subject, so they are pulled
   back towards the muted palette the rest of the page keeps to. --media-blur
   buys legibility where a section carries small type over a busy frame; the
   slight scale hides the soft edge blur would otherwise leave. */
.section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(var(--media-saturate, 0.68)) blur(var(--media-blur, 0px));
  transform: scale(1.04);
}

.section__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(11, 11, 12, var(--scrim-top, 0.86)) 0%,
    rgba(11, 11, 12, var(--scrim-mid, 0.72)) 50%,
    rgba(11, 11, 12, var(--scrim-bottom, 0.92)) 100%
  );
}

.section--photo > .container {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------- STATEMENT
   A single sentence, given a whole screen. The pause between chapters. */

.statement {
  display: flex;
  align-items: center;
  min-height: 70svh;
}

.statement__text {
  max-width: 22ch;
}

/* The winter quote earns a taller frame — it is carrying a photograph now,
   not just a line of type. */
.statement--deep {
  min-height: 88svh;
}

.statement .peaks {
  margin-bottom: clamp(var(--s-6), 5vh, var(--s-8));
}

.statement__attrib {
  margin-top: var(--s-7);
}

/* ------------------------------------------------------------------ CHAPTER
   Every chapter opens the same way: numeral, title, one paragraph. */

.chapter__head {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-8);
}

@media (min-width: 60rem) {
  .chapter__head {
    grid-template-columns: 8rem 1fr minmax(0, 26rem);
    gap: var(--s-7);
    align-items: end;
  }
}

/* Record chapter: one column, one reading line — no floating side copy. */
.chapter__head--stack {
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: var(--s-6);
}

@media (min-width: 60rem) {
  .chapter__head--stack {
    grid-template-columns: 8rem 1fr;
    gap: var(--s-7);
  }
}

.chapter__intro {
  min-width: 0;
}

.chapter__dek {
  margin: var(--s-4) 0 0;
  max-width: none;
  font-size: var(--t-body);
  color: var(--fg-muted);
}

.chapter__num {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--fg-faint);
  line-height: 1;
}

/* Full measure — artificial ch/em caps were orphaning last characters. */
.chapter__title {
  max-width: none;
  text-wrap: unset;
}

html[data-lang="zh"] .chapter__title {
  max-width: none;
  word-break: keep-all;
  line-break: strict;
}

/* -------------------------------------------------------------- FIGURE
   Full-bleed photography. The largest voice on the page. */

.figure {
  margin: 0;
  overflow: hidden;
}

.figure--bleed {
  width: 100%;
}

.figure--bleed img {
  width: 100%;
  height: clamp(24rem, 78svh, 52rem);
  object-fit: cover;
}

.figure--tall img {
  height: clamp(28rem, 92svh, 60rem);
}

.figure__caption {
  width: var(--container);
  margin: var(--s-4) auto 0;
  display: flex;
  gap: var(--s-4);
  align-items: baseline;
}

.figure__caption::before {
  content: "";
  flex: 0 0 2rem;
  height: 1px;
  background: var(--line);
  transform: translateY(-0.35em);
}

/* ------------------------------------------------------------------- SPLIT
   Image beside text. Alternates direction down the page. */

.split {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--s-7), 6vw, var(--s-10));
  }

  .split--reverse .split__media {
    order: 2;
  }

  .split--wide-media {
    grid-template-columns: 1.35fr 1fr;
  }

  /* Wide column follows the image when the pair is flipped. */
  .split--wide-media.split--reverse {
    grid-template-columns: 1fr 1.35fr;
  }
}

.split__media {
  margin: 0;
  overflow: hidden;
}

.split__media img {
  width: 100%;
  height: clamp(20rem, 60svh, 40rem);
  object-fit: cover;
}

.split__body > * + * {
  margin-top: var(--s-5);
}

/* -------------------------------------------------------------- STAT ROW
   Data, set like a specimen label. No cards, no boxes. */

.stats {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.stat {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  line-height: 1;
  letter-spacing: var(--tr-display);
  margin-bottom: var(--s-4);
}

.stat__unit {
  font-size: 0.4em;
  letter-spacing: 0;
  margin-left: 0.2em;
  color: var(--fg-faint);
}

.stat__label {
  display: block;
  margin-bottom: var(--s-3);
  font-size: var(--t-small);
  color: var(--fg);
}

/* -------------------------------------------------------------- RECORDS
   Chapter 01 proof block: title → two altitudes → note → film. One spine. */

/* Title → two altitudes → film. Spacing only — no rules. */
.record-block {
  display: grid;
  gap: clamp(var(--s-8), 7vh, var(--s-10));
  container-type: inline-size;
}

.record-block .chapter__head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.records {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .records {
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--s-7), 5vw, var(--s-9));
    align-items: start;
  }
}

.record {
  display: grid;
  gap: var(--s-3);
}

.record__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--accent);
}

.record__unit {
  font-size: 0.4em;
  letter-spacing: 0;
  margin-left: 0.15em;
  color: var(--fg-faint);
}

.record__label {
  display: block;
  font-size: var(--t-small);
  color: var(--fg);
}

.record__meta {
  margin: 0;
  font-size: clamp(0.625rem, 2.6vw, var(--t-caption));
  color: var(--fg-faint);
  max-width: none;
  white-space: nowrap;
}

.record__cta {
  margin: 0;
  min-width: 0;
}

/* Guinness film — scales to the block width; never orphans a trailing word. */
.record__film {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 6.2cqi, 4.25rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--tr-display);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--d-base) var(--ease);
}

html[data-lang="zh"] .record__film {
  font-family: var(--font-cn-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: clamp(1.5rem, 8.5cqi, 4.25rem);
}

.record__film:hover {
  opacity: 0.82;
}

/* ------------------------------------------------------------- COLLECTION
   The wines are exhibits, not products. Wide gutters, no price, no cart. */

/* One bottle to a row. The label ornament is the point of these photographs
   and it does not survive being set four or five across. */
.collection {
  display: grid;
  gap: clamp(var(--s-9), 14vw, var(--s-11));
  grid-template-columns: 1fr;
}

.wine {
  display: flex;
  flex-direction: column;
}

@media (min-width: 60rem) {
  /* The bottle takes the wider half and the reading matter sits beside it,
     both centred on the same line. Direction alternates so the page does
     not march down one side. */
  .wine {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(var(--s-7), 6vw, var(--s-10));
    align-items: center;
  }

  .wine__media { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .wine__body  { grid-column: 2; grid-row: 1; }

  .wine:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .wine:nth-child(even) .wine__media { grid-column: 2; }
  .wine:nth-child(even) .wine__body  { grid-column: 1; }
}

/* The labels carry a great deal of Tibetan ornament, so the bottle is given
   the whole width of its column and never cropped. The page already sits on
   the colour these were shot against; the vignette dissolves what is left of
   the frame, so the bottle appears to stand on the page rather than in a box. */
.wine__media {
  margin: 0 0 var(--s-6);
  display: flex;
  justify-content: center;
}

/* Each bottle was shot against a warm brown backdrop that falls away to
   near-black at the corners — the same near-black this section is set on.
   Feathering all four edges hides where the photograph stops, so what is
   left reads as one lit alcove rather than seven pasted rectangles. */
.wine__media img {
  width: 100%;
  max-height: clamp(24rem, 80vh, 46rem);
  object-fit: contain;
  -webkit-mask-image:
    linear-gradient(to right,  transparent, #000 15%, #000 85%, transparent),
    linear-gradient(to bottom, transparent, #000 9%,  #000 91%, transparent);
  mask-image:
    linear-gradient(to right,  transparent, #000 15%, #000 85%, transparent),
    linear-gradient(to bottom, transparent, #000 9%,  #000 91%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  transition: transform var(--d-slow) var(--ease);
}

.wine:hover .wine__media img {
  transform: scale(1.04);
}

/* The column is wide enough to strand the text, so the reading matter keeps
   its own measure and stays left under the bottle. */
.wine__index,
.wine__name,
.wine__cn,
.wine__specs,
.wine__note,
.wine__link {
  max-width: 30rem;
}

.wine__index {
  margin-bottom: var(--s-3);
  color: var(--fg-faint);
}

.wine__name {
  margin-bottom: var(--s-2);
}

.wine__cn {
  display: block;
  margin-bottom: var(--s-4);
  font-family: var(--font-cn);
  font-weight: 200;
  font-size: var(--t-caption);
  letter-spacing: 0.16em;
  color: var(--fg-faint);
}

.wine__specs {
  margin: 0 0 var(--s-4);
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-caption);
  color: var(--fg-muted);
}

.wine__specs div {
  display: flex;
  gap: var(--s-3);
  padding-block: 0.15rem;
}

.wine__specs dt {
  flex: 0 0 5.5rem;
  color: var(--fg-faint);
}

.wine__specs dd {
  margin: 0;
  flex: 1;
}

.wine__note {
  margin: 0 0 var(--s-5);
  flex: 1;
  font-size: var(--t-caption);
  line-height: 1.65;
  color: var(--fg-muted);
}

.wine__link {
  align-self: flex-start;
}

/* ------------------------------------------------------------------- QUOTE */

.quote {
  max-width: 26ch;
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  margin: 0;
}

.quote__cite {
  display: block;
  margin-top: var(--s-6);
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-style: normal;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* -------------------------------------------------------------------- FORM */

.form {
  display: grid;
  gap: var(--s-5);
}

.field {
  display: grid;
  gap: var(--s-3);
}

.field label {
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.field input,
.field textarea {
  width: 100%;
  padding: var(--s-4) 0;
  font-size: var(--t-body);
  font-weight: 300;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--d-base) var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.field textarea {
  resize: vertical;
}

.form__honeypot {
  position: absolute;
  left: -9999px;
}

/* ------------------------------------------------------------------ FOOTER */

.footer {
  padding-block: var(--s-9) var(--s-7);
}

.footer__top {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 60rem) {
  .footer__top {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.footer__mark {
  width: 6rem;
  margin-bottom: var(--s-5);
}

.footer__list {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  color: var(--fg-muted);
}

.footer__bottom {
  display: grid;
  gap: var(--s-5);
  padding-top: var(--s-6);
}

@media (min-width: 60rem) {
  .footer__bottom {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

/* ---------------------------------------------------------------- AGE GATE
   The one legally required interruption. Treated as a title card. */

.gate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: var(--c-ink);
}

.gate[hidden],
.shell[hidden] {
  display: none !important;
}

.gate__panel {
  width: min(34rem, 100%);
  text-align: center;
  color: var(--c-paper);
}

/* The gate is the first thing anyone sees, and the header's switch is still
   behind it — so the choice of language has to be offered here too. */
.gate__lang {
  justify-content: center;
  margin-bottom: var(--s-8);
}

.gate__mark {
  width: 5.5rem;
  margin: 0 auto var(--s-7);
}

.gate__question {
  margin-bottom: var(--s-5);
  margin-inline: auto; /* Chinese t-h2 max-width otherwise sits left in the panel */
}

.gate__text {
  margin-inline: auto;
  max-width: 34ch;
}

.gate__cn {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--t-caption);
}

.gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
  margin-top: var(--s-8);
}

.gate__fine {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-ink-line-soft);
}

/* ====================================================================
   THE POUR — the one theatrical moment on the site, and it happens once.

   Coming through the age gate, the icewine bottle tips at the top right
   and the site is poured into the frame: the viewport is the glass, and
   the wine rises from the bottom until it is full. The bottle then rights
   itself, condenses into the corner and hands that position to the menu.

   The rising level is an ink panel translated upward, not an animated
   gradient stop. A transform composites on the GPU, needs no registered
   custom property, and cannot jank on a long page.
   ==================================================================== */

.pour {
  position: fixed;
  inset: 0;
  z-index: 9200;
  pointer-events: none;
  /* One duration for the veil and the stream that cancels it. If these ever
     drift apart the stream will slide off the surface. */
  --pour-fill: 1500ms;
}

.pour[hidden] { display: none !important; }

/* Everything above the wine line. Its bottom edge *is* the surface. */
.pour__veil {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--c-ink);
  transform: translateY(0);
  transition: transform var(--pour-fill) cubic-bezier(0.4, 0.02, 0.2, 1);
}

.pour.is-open .pour__veil { transform: translateY(-100%); }

/* The meniscus. A wine line with a little light gathered under it reads as
   a surface; a hard edge reads as a wipe. */
.pour__veil::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14vh;
  background: linear-gradient(
    to bottom,
    rgba(214, 183, 122, 0) 0%,
    rgba(214, 183, 122, 0.07) 62%,
    rgba(214, 183, 122, 0.26) 100%
  );
  border-bottom: 1px solid rgba(214, 183, 122, 0.5);
}

/* Where the stream lands. Half of it sits below the surface and is clipped
   away, leaving the glow of the impact riding on the wine line. */
.pour__veil::before {
  content: "";
  position: absolute;
  bottom: -3.5vh;
  left: var(--pour-sx, 50%);
  width: 30vh;
  height: 7vh;
  margin-left: -15vh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214, 183, 122, 0.45), transparent 72%);
  filter: blur(7px);
  opacity: 0;
  transition: opacity 400ms var(--ease);
}

.pour.is-streaming .pour__veil::before { opacity: 1; }
.pour.is-drained .pour__veil::before { opacity: 0; }

/* Held still in screen space by cancelling the veil's own translate — same
   distance, same duration, same curve, opposite sign. The veil is what
   clips it, so the stream ends exactly on the surface at every frame
   without a line of script. */
.pour__stream {
  position: absolute;
  top: var(--pour-sy, 0px);
  left: var(--pour-sx, 0px);
  width: 3px;
  height: 100vh;
  margin-left: -1.5px;
  transform: translateY(0);
  transition: transform var(--pour-fill) cubic-bezier(0.4, 0.02, 0.2, 1),
              opacity 360ms var(--ease);
  background: linear-gradient(
    to bottom,
    rgba(214, 183, 122, 0.92),
    rgba(214, 183, 122, 0.55) 30%,
    rgba(214, 183, 122, 0.4)
  );
  filter: blur(1.7px);
  opacity: 0;
}

.pour.is-open .pour__stream { transform: translateY(100%); }
.pour.is-streaming .pour__stream { opacity: 1; }
.pour.is-drained .pour__stream { opacity: 0; }

.pour__bottle {
  position: absolute;
  /* Offset in vh, not vw, because what has to clear the right edge is the
     base swinging out on tip — and that reach is a function of the bottle's
     height (~0.58h past the pivot), not of the viewport's width. */
  right: clamp(5rem, 25vh, 24rem);
  top: clamp(0.5rem, 3vh, 3rem);
  /* Sized by height: the bottle is 1:5.4, so driving it from width makes it
     tower on tall viewports and vanish on short ones. */
  height: clamp(11rem, 34vh, 26rem);
  /* High pivot: the bottle turns about its shoulder, so the neck drops into
     the frame while the base stays up in the corner. */
  transform-origin: 50% 34%;
  transform: translateY(-2.5rem);
  opacity: 0;
  transition:
    transform 640ms cubic-bezier(0.33, 0.05, 0.2, 1),
    opacity 500ms var(--ease);
}

.pour__glass {
  display: block;
  height: 100%;
  width: auto;
  /* The photograph is a plain rectangle on ink; the bottle's outline lives
     in the mask. Cheaper than shipping the same pixels with an alpha
     channel, and the mask is two flat tones so it costs almost nothing. */
  -webkit-mask-image: url("../images/bottle-pour-mask.png");
  mask-image: url("../images/bottle-pour-mask.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}

/* The mouth of the bottle. Never drawn — it exists only so the script can
   read where the spout has ended up after the tip and aim the pour there. */
.pour__spout {
  position: absolute;
  top: 1.2%;
  left: 50%;
  width: 1px;
  height: 1px;
}

.pour.is-in      .pour__bottle { opacity: 1; transform: translateY(0); }
.pour.is-tipped  .pour__bottle { opacity: 1; transform: translateY(0) rotate(-118deg); }

.pour.is-done .pour__bottle {
  opacity: 0;
  transform: translate(var(--pour-dx, 0px), var(--pour-dy, 0px)) rotate(0deg) scale(0.08);
}

/* The header waits behind the pour and arrives as the bottle leaves, so the
   menu appears to be what the bottle turned into. */
.header.is-pouring {
  opacity: 0;
  pointer-events: none;
}

/* ====================================================================
   MOTIFS — borrowed from the 冰纯 packaging, redrawn as line work.
   The packaging quotes Tibetan architecture and Tibetan gemstones. The
   site quotes the packaging. Nothing here is filled, textured or gilded:
   a motif is one hairline, at one size, used once per chapter.
   ==================================================================== */

/* Three snow mountains — the ring around the foot of the box. Set as the
   ornament that opens a chapter, in place of a rule. */
.peaks {
  display: block;
  width: clamp(7rem, 11vw, 10rem);
  height: auto;
  color: var(--fg-faint);
}

.peaks path {
  vector-effect: non-scaling-stroke;
}

/* The centre cap is the only turquoise on an otherwise grey mark, so it is
   drawn heavier — at this size a hairline would read as grey too. */
.peaks__snow {
  color: var(--accent-cool);
  stroke-width: 2;
}

/* The benma wall — Yumbulakhang in section: a pale coping, the ochre band
   of tamarisk, the sunlit stone below. Five pixels tall, never wider than
   a thumb. */
.wall {
  width: 4.5rem;
  height: 5px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    to bottom,
    var(--c-stone-yellow) 0 1px,
    var(--accent-clay)    1px 4px,
    var(--fg-faint)       4px 5px
  );
}

/* The numeral and the wall share one cell at the head of every chapter. */
.chapter__lead {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  align-content: end;
}

/* -------------------------------------------------------------- UTILITIES */

.u-flow > * + * {
  margin-top: var(--s-5);
}

.u-flow-lg > * + * {
  margin-top: var(--s-7);
}

.u-mt-6 { margin-top: var(--s-6); }
.u-mt-7 { margin-top: var(--s-7); }
.u-mt-8 { margin-top: var(--s-8); }

.u-rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------- RESPONSIVE
   The navigation folds first, the layout second. */

/* The table of contents runs to nine chapters. It needs more room than the
   layout grid does, so it folds into the menu earlier. */
/* Eight uppercase links at this tracking need about 1,300px before they stop
   crowding the masthead. Below that the menu goes behind the toggle rather
   than being squeezed until it wraps. */
/* Drawer — sibling of header (not a child), so fixed coords are the viewport. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 9050;
  padding: 0;
  border: 0;
  margin: 0;
  background: rgba(11, 11, 12, 0.4);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--d-base) var(--ease),
    visibility var(--d-base) var(--ease);
}

.nav-scrim:not([hidden]) {
  opacity: 1;
  visibility: visible;
}

.nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9100;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: min(20rem, 86vw);
  padding:
    calc(var(--header-h) + var(--s-5))
    clamp(1.5rem, 4vw, 2.25rem)
    var(--s-8);
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(180, 60, 66, 0.92);
  background: color-mix(in srgb, var(--c-cinnabar) 92%, transparent);
  color: #fff;
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.4);
  transform: translateX(105%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.nav__eyebrow {
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
}

.nav__link {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: clamp(1rem, 2.8vw, 1.1875rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #fff;
  opacity: 1;
  white-space: normal;
}

.nav__link:hover,
.nav__link:focus-visible {
  opacity: 0.8;
}

.nav__link.is-current {
  color: #fff;
  opacity: 1;
}

@media (max-width: 59.999rem) {
  .hero__foot,
  .summit__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-5);
  }
}

/* -------------------------------------------------------------- MOBILE
   Phone widths: keep the top bar inside the viewport, then tighten a few
   blocks that assume desktop measure. */

@media (max-width: 48rem) {
  .header {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  }

  .header__inner {
    gap: var(--s-3);
    min-width: 0;
  }

  /* Logo alone — Latin + Chinese name fights the lang / chapter / menu cluster. */
  .brand__name {
    display: none;
  }

  .brand__mark {
    height: calc(var(--header-h) - 1.1rem);
  }

  .header__end {
    gap: var(--s-3);
    min-width: 0;
  }

  .lang {
    gap: 0.35rem;
  }

  .lang__btn {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
  }

  /* Chapter label lives in the drawer on phones — keeps lang + menu clear. */
  .nav-here {
    display: none;
  }

  .nav-toggle {
    max-width: none;
    gap: 0;
    padding-left: 0.15rem;
  }

  .nav {
    width: min(20rem, 92vw);
    padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(var(--s-8), env(safe-area-inset-bottom, 0px));
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .stat__value,
  .record__value {
    font-size: clamp(2.25rem, 11vw, 3.25rem);
  }

  .record-block {
    gap: var(--s-8);
  }

  .records {
    gap: var(--s-7);
  }

  .wine__specs dt {
    flex: 0 0 4.5rem;
  }

  .pour__bottle {
    right: clamp(0.75rem, 6vw, 2.5rem);
    top: clamp(0.25rem, 2vh, 1.5rem);
    height: clamp(8.5rem, 26vh, 14rem);
  }

  .gate {
    padding:
      max(var(--gutter), env(safe-area-inset-top, 0px))
      max(var(--gutter), env(safe-area-inset-right, 0px))
      max(var(--gutter), env(safe-area-inset-bottom, 0px))
      max(var(--gutter), env(safe-area-inset-left, 0px));
  }

  .gate__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .gate__actions .button {
    width: 100%;
  }

  .form input,
  .form textarea {
    font-size: 16px; /* iOS: avoid zoom-on-focus */
  }
}