/* ============================================================
   ZAYMAR — pages/product.css
   The descent: ivory hero → sand story → the fragrance's own
   heart room → espresso → ink. Driven by js/modules/temperature.js;
   static surface classes are the no-JS / reduced-motion fallback.
   ============================================================ */

/* The descent surface rules (.descent-live) are shared —
   see components.css. */

/* ---- Hero ---- */
.p-hero {
  padding-top: calc(var(--header-h) + var(--space-block));
  padding-bottom: var(--space-block);
}
.p-hero__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}
.p-hero__bottle { grid-column: 1 / 7; }
.p-hero__commerce { grid-column: 8 / 12; }
.p-hero__kicker { color: var(--fg2); }
/* the fragrance's own tone, darkened to ink-safe, on its numeral */
main[data-temp-accent='date-me'] { --temp-self: var(--temp-date-me); }
main[data-temp-accent='tropical-burn'] { --temp-self: var(--temp-tropical-burn); }
main[data-temp-accent='sweet-disaster'] { --temp-self: var(--temp-sweet-disaster); }
main[data-temp-accent='black-honey'] { --temp-self: var(--temp-black-honey); }
.p-hero__kicker .num {
  color: color-mix(in srgb, var(--temp-self, var(--accent)) 70%, var(--z-ink));
}
.p-hero__name { margin-top: var(--sp-s); }
.p-hero__tagline {
  margin-top: var(--sp-m);
  font-size: var(--fs-body-lg);
  color: var(--fg2);
}
.p-hero__price {
  margin-top: var(--sp-xl);
  display: flex;
  align-items: baseline;
  gap: var(--sp-s);
}
.p-hero__amount { font-family: var(--font-display); font-size: var(--fs-h2); }
.p-hero__facts { margin-top: var(--sp-l); }
.p-hero__facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-m);
  padding-block: var(--sp-s);
  border-top: var(--hairline) solid var(--line);
}
.p-hero__facts dt {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg2);
}
.p-hero__facts dd { text-align: right; }
.p-hero__actions {
  margin-top: var(--sp-l);
  display: flex;
  align-items: center;
  gap: var(--sp-l);
  flex-wrap: wrap;
}
.p-hero__meta {
  margin-top: var(--sp-l);
  color: var(--fg2);
}

/* ---- Story ---- */
.p-story .container { display: flex; flex-direction: column; gap: var(--space-block); }
.p-story__stanza {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: 1.4;
  letter-spacing: var(--track-display);
  max-width: 22em;
}
.p-story__stanza:nth-of-type(even) { align-self: flex-end; }
/* the closing lines land on the left, where the eye returns */
/* the closing lines land on the left, where the eye returns: the
   stanza that sits just before the profile line */
.p-story .p-story__stanza:has(+ .p-story__profile) { align-self: flex-start; margin-left: 0; padding-left: 0; }
.p-story__profile {
  margin-top: var(--sp-2xl);
  color: var(--accent);
}

/* ---- The story as a scene (see story.js) ----
   One passage, one screen. The section is taller than the screen and
   the stage is held in place, so the passage stays while its words
   turn white in reading order. */
.p-story.p-story--scene { padding: 0; }
.p-story--scene .p-story__stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
}
.p-story--scene.is-scene-live { height: 190svh; }
.p-story--scene.is-scene-live .p-story__stage { position: sticky; top: 0; height: 100svh; }
/* the held page starts below the header, so its label is never under it */
.p-story--scene .p-story__stage { padding-top: var(--header-h); box-sizing: border-box; }
@media (min-width: 56.01em) and (max-height: 740px), (max-width: 30em) and (min-aspect-ratio: 390/740), (min-width: 30.01em) and (max-width: 56em) and (max-height: 740px) {
  .p-story--scene .p-story__label { margin-bottom: 1rem; }
  .p-story--scene .p-story__sign { margin-top: 1rem; }
}
.p-story__passage {
  max-width: 22em;
  font-family: var(--font-display);
  font-weight: 300;
  /* sized by the screen's height as well as its width, so the label,
     the passage and the signature always sit within one screen */
  font-size: clamp(1.0625rem, min(6.2vw, 2.75svh), 2.5rem);
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--z-ivory);
}
/* no will-change per word: a hundred layers cost a phone more than the
   light repaint of a word changing its opacity */
/* a closing set of short lines, a beat apart from the passage */
.p-story__close { display: inline-block; margin-top: 0.7em; }
/* the page's frame: a label above with a hairline running out from it,
   and a signature below, as a page in a book is headed and signed */
.p-story__label {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  max-width: none;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--z-gold);
}
.p-story__label::after { content: ''; flex: 1; height: var(--hairline); background: rgba(169, 143, 85, 0.35); }
.p-story__sign {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  max-width: none;
  margin-top: clamp(1.75rem, 4.5vh, 2.75rem);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.45);
}
.p-story__sign::before { content: ''; flex: none; width: 1.75rem; height: var(--hairline); background: var(--z-gold); }
/* the signature always reads on one line, whatever the name's length */
.p-story__sign { gap: 0.4rem 0.65rem; letter-spacing: 0.14em; flex-wrap: wrap; }
.p-story__sign > span { white-space: nowrap; }
.p-story__sign-ar { font-family: var(--font-ar-text); font-size: var(--fs-body); letter-spacing: 0; text-transform: none; color: var(--z-gold); }

/* ---- Crossover (display type only — see temperature.js) ---- */
/* no short rule above the title: the heading stands on its own */
.p-crossover .stmt__display.tick-above::before { display: none; }
.p-crossover .p-crossover__ar { margin-top: var(--sp-xs); color: var(--z-gold); font-size: var(--fs-body-lg); }

/* The crossover band carries the section title through the white↔black
   flip. It used to be a full focal block — a screen of empty surface —
   because the flip once ran across most of a viewport. The descent now
   crosses over in a tight window, so the band needs only enough room
   to hold the title clear of the copy on either side of it. */
.p-crossover {
  text-align: center;
  padding-block: clamp(3rem, 8vh, 5.5rem) clamp(1.5rem, 4vh, 2.5rem);
}
.p-crossover .display-2 { margin-inline: auto; }
.p-crossover .stmt__display.tick-above::before { margin-bottom: var(--sp-l); }
/* the story hands over to the band, and the band into the profile, at
   block rhythm rather than section rhythm */
.p-story { padding-bottom: var(--space-block); }
.p-pyramid { padding-top: var(--sp-m); padding-bottom: var(--space-block); }
.p-character { padding-top: var(--space-block); }

/* ---- Pyramid note ---- */

/* ---- Character ---- */
.p-character__list div {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: var(--sp-l);
  border-top: var(--hairline) solid var(--line);
}
.p-character__list dt {
  grid-column: 2 / 4;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg2);
}
.p-character__list dd {
  grid-column: 4 / 11;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h3);
}

/* ---- Mobile ---- */
@media (max-width: 56em) {
  .p-hero__bottle { grid-column: 1 / -1; }
  .p-hero__commerce { grid-column: 1 / -1; margin-top: var(--sp-m); }

  /* The first screen is whole: the bottle, the chapter line, the name
     and its line all sit within it, and the page goes on below. The
     photograph gives way first on a short phone. */
  .p-hero { padding-top: calc(var(--header-h) + var(--sp-m)); }
  .p-hero .p-hero__bottle {
    aspect-ratio: auto;
    /* the photograph takes the screen the words leave, so the first
       view ends just after the line, and the price begins below it */
    height: max(16rem, calc(100svh - var(--header-h) - var(--sp-m) - 13.75rem));
  }
  .p-hero .p-hero__bottle.has-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
  .p-hero .p-hero__name { margin-top: var(--sp-xs); }
  .p-hero .p-hero__tagline { margin-top: var(--sp-s); }
  .p-hero .p-hero__tagline { min-height: 3.2em; }
  .p-hero .p-hero__price { margin-top: var(--sp-l); }

  /* one margin on a phone: every stanza starts at the left edge */
  .p-story .p-story__stanza,
  .p-story .p-story__stanza:nth-of-type(even) {
    font-size: var(--fs-h3);
    align-self: flex-start;
    margin-left: 0;
    padding-left: 0;
  }

  .p-character__list dt { grid-column: 1 / -1; margin-bottom: var(--sp-xs); }
  .p-character__list dd { grid-column: 1 / -1; }

}

/* ---- The olfactive profile fills one phone screen ----
   The title and the three layers read as a single page: the title sits
   just under the header, and the layers share the rest of the screen,
   each row given room to breathe. */
@media (max-width: 56em) {
  .p-crossover { padding-block: clamp(2.25rem, 6vh, 3.25rem) var(--sp-s); }
  .p-pyramid {
    min-height: calc(100svh - var(--header-h) - 12.4rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--sp-s) var(--sp-l);
  }
  .p-pyramid .container { width: 100%; }
  .p-pyramid .pyramid__tier { padding-block: clamp(1.05rem, 2.8vh, 1.5rem); }
  .p-pyramid .pyramid__notes { font-size: clamp(1.125rem, 4.9vw, 1.3125rem); }
  .p-pyramid .pyramid__photo { width: 4.75rem; height: 4.75rem; }
}

/* ---- More from Chapter I ----
   The other three of the chapter, as on the home page: a square studio
   photograph, then the number, the name and its line beneath. A row to
   swipe on a phone, the next always peeking in; three across on a
   laptop. Each is the way into its own page. */
.p-more { padding-block: var(--sp-2xl) var(--sp-3xl); }
.p-more__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem var(--sp-s);
  font-family: var(--font-display);
  font-weight: 300;
  /* the same size and setting as the Olfactive profile title */
  font-size: clamp(2.125rem, 5.5vw, 5.375rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--z-ink);
}
.p-more__ar { font-family: var(--font-ar-text); font-size: var(--fs-body-lg); color: var(--z-bronze); }
.p-more__row {
  display: flex;
  gap: 0.875rem;
  margin-top: var(--sp-l);
  padding-inline: var(--margin) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.p-more__row::-webkit-scrollbar { display: none; }
.p-more__row::after { content: ''; flex: none; width: calc(var(--margin) - 0.875rem); }
.p-more__tile { flex: none; width: 76%; display: flex; flex-direction: column; color: var(--z-ink); }
.p-more__photo { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #F0F0F0; }
.p-more__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; transition: transform var(--dur-state) var(--ease-enter); }
.p-more__tile:hover .p-more__photo img { transform: scale(1.03); }
.p-more__name {
  margin-top: var(--sp-s);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.p-more__line {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: rgba(13, 11, 9, 0.82);
}
.p-more__line::before { content: '\201C'; color: var(--z-bronze); }
.p-more__line::after { content: '\201D'; color: var(--z-bronze); }
@media (min-width: 56.01em) {
  .p-more__row {
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gutter);
    max-width: var(--container, 80rem);
    margin-inline: auto;
    padding-inline: var(--margin);
  }
  .p-more__row::after { display: none; }
  .p-more__tile { width: auto; }
}

/* Very short phones (iPhone SE 1st gen, small Androids): a smaller floor
   and tighter frame so label, passage and signature still share a screen */
@media (min-width: 56.01em) and (max-height: 620px), (max-width: 30em) and (min-aspect-ratio: 390/620), (min-width: 30.01em) and (max-width: 56em) and (max-height: 620px) {
  .p-story--scene .p-story__passage { font-size: clamp(0.9375rem, min(6.2vw, 2.7svh), 2.5rem); line-height: 1.36; }
  .p-story--scene .p-story__label { margin-bottom: 0.6rem; }
  .p-story--scene .p-story__sign { margin-top: 0.6rem; }
}

/* Laptop: the opening holds one screen; the photograph is sized to the
   screen's height (4:5), so its foot never runs past the page */
@media (min-width: 56.01em) {
  .p-hero { min-height: 100svh; padding-block: calc(var(--header-h) + 2rem) 2rem; display: grid; align-content: center; }
  .p-hero .p-hero__bottle {
    width: auto;
    height: calc(100svh - var(--header-h) - 4rem);
    max-height: 52rem;
    aspect-ratio: 4 / 5;
    max-width: 100%;
    justify-self: start;
  }
  .p-hero .p-hero__bottle.has-media > img { width: 100%; height: 100%; object-fit: cover; }
}
/* a shorter laptop: the details tighten so both columns share one screen */
@media (min-width: 56.01em) and (max-height: 820px) {
  .p-hero .p-hero__name { font-size: clamp(2.75rem, 8vh, 4.5rem); }
  .p-hero .p-hero__tagline { margin-top: var(--sp-xs); min-height: 0; }
  .p-hero .p-hero__price { margin-top: var(--sp-m); }
  .p-hero .p-hero__facts { margin-top: var(--sp-s); }
  .p-hero .p-hero__facts div { padding-block: 0.6rem; }
  .p-hero .p-hero__actions, .p-hero .p-hero__meta { margin-top: var(--sp-m); }
}

/* ---- Laptop: the story and the olfactive profile, set larger ----
   The story fills its held screen: a wider measure and type sized to the
   screen's height, still one clean block between its label and signature.
   The profile's three layers grow to match: larger notes, larger marks
   and photographs, more air in each row. */
@media (min-width: 56.01em) {
  .p-story--scene .p-story__stage .container { max-width: 76rem; }
  .p-story--scene .p-story__passage {
    max-width: 24em;
    font-size: clamp(1.75rem, min(2.75vw, 4.4svh), 3.25rem);
    line-height: 1.38;
  }
  .p-story--scene .p-story__label { margin-bottom: clamp(2rem, 6vh, 4rem); }
  .p-story--scene .p-story__sign { margin-top: clamp(2rem, 6vh, 4rem); }

  .p-pyramid { min-height: calc(100svh - var(--header-h) - 14rem); display: grid; align-content: center; padding-bottom: var(--sp-xl); }
  .p-pyramid .pyramid { max-width: 56rem; }
  .p-pyramid .pyramid__tier {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    column-gap: var(--sp-l);
    padding-block: clamp(1.25rem, 3.4vh, 2rem);
  }
  .p-pyramid .pyramid__tier::before { width: 4rem; }
  .p-pyramid .pyramid__stage { font-size: 0.8125rem; letter-spacing: 0.18em; }
  .p-pyramid .pyramid__notes { margin-top: 0.45rem; font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.3; }
  .p-pyramid .pyramid__photo { width: clamp(6rem, 12vh, 8rem); height: clamp(6rem, 12vh, 8rem); }
}
/* Laptop: the longer stories (those with a closing set of lines) a step
   smaller, so label, passage and signature share the screen with room
   under the header */
@media (min-width: 56.01em) {
  .p-story--scene .p-story__stage { padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: 1.5rem; }
  .p-story--scene:has(.p-story__close) .p-story__passage { font-size: clamp(1.375rem, min(2.4vw, 3.3svh), 2.75rem); line-height: 1.36; }
  .p-story--scene:has(.p-story__close) .p-story__close { margin-top: 0.55em; }
  .p-story--scene:has(.p-story__close) .p-story__label { margin-bottom: clamp(1.25rem, 4vh, 2.75rem); }
  .p-story--scene:has(.p-story__close) .p-story__sign { margin-top: clamp(1.25rem, 4vh, 2.75rem); }
}
@media (min-width: 56.01em) {
  .p-story--scene:has(.p-story__close) .p-story__passage { font-size: clamp(1.5rem, min(2.6vw, 3.65svh), 3rem); line-height: 1.32; }
  .p-story--scene:has(.p-story__close) .p-story__label { margin-bottom: clamp(1rem, 3vh, 2.25rem); }
  .p-story--scene:has(.p-story__close) .p-story__sign { margin-top: clamp(1rem, 3vh, 2.25rem); }
}

/* ---- Laptop story, set to fill its screen ----
   The label, the passage and the signature close up into one block,
   centred in the held screen; the passage set large, sized to the
   screen's height so it always fits, at a measure that keeps the lines
   long and even. */
@media (min-width: 56.01em) {
  .p-story--scene .p-story__stage { display: grid; align-content: center; padding-top: calc(var(--header-h) + 1rem); padding-bottom: 1rem; }
  .p-story--scene .p-story__stage .container { max-width: 80rem; }
  .p-story--scene .p-story__label { margin-bottom: clamp(1.75rem, 4.5vh, 3rem); }
  .p-story--scene .p-story__sign { margin-top: clamp(1.75rem, 4.5vh, 3rem); }
  .p-story--scene .p-story__passage {
    max-width: 21em;
    font-size: clamp(2rem, min(3.4vw, 5.6svh), 4rem);
    line-height: 1.24;
    letter-spacing: -0.012em;
  }
  .p-story--scene:has(.p-story__close) .p-story__passage {
    max-width: 23em;
    font-size: clamp(1.625rem, min(2.75vw, 4.15svh), 3.25rem);
    line-height: 1.26;
  }
  .p-story--scene:has(.p-story__close) .p-story__label { margin-bottom: clamp(1.25rem, 3.5vh, 2.5rem); }
  .p-story--scene:has(.p-story__close) .p-story__sign { margin-top: clamp(1.25rem, 3.5vh, 2.5rem); }
}
@media (min-width: 56.01em) { .p-story--scene .p-story__passage { text-wrap: pretty; } }

/* every story is one paragraph now; the longer three keep the size the
   closing lines used to give them, and Date Me steps down a little */
@media (min-width: 56.01em) {
  .p-story--scene .p-story__passage { font-size: clamp(1.875rem, min(3vw, 4.9svh), 3.5rem); line-height: 1.26; }
  .p-story--scene.p-story--long .p-story__passage {
    max-width: 23em;
    font-size: clamp(1.625rem, min(2.75vw, 4.15svh), 3.25rem);
    line-height: 1.28;
  }
  .p-story--scene.p-story--long .p-story__label { margin-bottom: clamp(1.25rem, 3.5vh, 2.5rem); }
  .p-story--scene.p-story--long .p-story__sign { margin-top: clamp(1.25rem, 3.5vh, 2.5rem); }
}
/* the three longer stories at Date Me's size; a slightly longer measure
   carries the extra words so each still fits its screen */
@media (min-width: 56.01em) {
  .p-story--scene.p-story--long .p-story__passage {
    max-width: 24.5em;
    font-size: clamp(1.875rem, min(3vw, 4.9svh), 3.5rem);
    line-height: 1.24;
  }
}

/* ---- A phone held sideways (2026-10-11) ----
   The story is held on one screen while its words light up; a screen
   only ~375 high cannot hold the passage and its signature, so there
   the passage is simply read, already lit (see story.js), at its own
   height. */
@media (orientation: landscape) and (max-height: 32em) {
  .p-story--scene .p-story__stage { padding-block: calc(var(--header-h) + 1.5rem) 2.5rem; min-height: 0; }
  /* and if the phone is turned after the page has loaded */
  .p-story--scene.is-scene-live { height: auto; }
  .p-story--scene.is-scene-live .p-story__stage { position: relative; height: auto; }
  .p-story--scene .p-story__word { opacity: 1 !important; }
}

/* ---- Fragrance photograph on a phone: never cropped (2026-10-11) ----
   Its height came from the screen's height, so a shorter screen made a
   squat box that cut off the cap. It now keeps the reference phone's
   proportion (343 x 532) on every phone, whatever the screen's height. */
@media (max-width: 30em) {
  main .p-hero .p-hero__bottle.media-slot { height: auto; aspect-ratio: 343 / 532; }
}