/* AIKHEMIST · page styles. Tokens first, then the page's own classes.
   Nothing here restyles .sc-world, [data-sc-copy] or any engine selector. */

:root {
  --sc-canvas:      #0f1014;
  --sc-surface:     #17181d;
  --sc-ink:         #F2EADB;
  --sc-ink-soft:    #A89C88;
  --sc-accent:      #D9A441;
  --sc-accent-ink:  #15110A;
  --sc-font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "IBM Plex Sans", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --sc-shadow-color: 24 40% 2%;
  --sc-r-sm: 6px;

  /* The column's centre. Every plane agrees on it. */
  --col-x: 63vw;
  --plate: color-mix(in oklab, var(--sc-surface) 92%, transparent);
}
@media (max-width: 860px) { :root { --col-x: 50vw; } }

::selection { background: color-mix(in oklab, var(--sc-accent) 40%, transparent); }

html { scroll-behavior: auto; }
/* The page's one size rule: the base grows with both the width and the height
   of the window, 16px on a phone, up to 22px on a large screen, so type is
   generous where there is room and nothing overruns a short viewport. */
@media (min-width: 861px) { html { font-size: clamp(16px, 0.35vw + 1.1vh + 5px, 22px); } }

/* ------------------------------------------------------------- chrome -- */
.mark {
  position: fixed; top: 0.8rem; left: var(--sc-gutter); z-index: var(--sc-z-chrome);
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.33rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--sc-ink);
  text-decoration: none; padding: 0.4rem 0.2rem;
}
.mark:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }

.gauge {
  position: fixed; right: 1.25rem; top: 50%; height: 66vh; z-index: var(--sc-z-chrome);
  transform: translateY(-50%); width: 11rem; pointer-events: none;
}
.gauge__ticks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.gauge__ticks::before {
  content: ""; position: absolute; right: 0.55rem; top: 0; bottom: 0; width: 1px;
  background: var(--sc-hairline-strong);
}
.gauge__tick {
  position: absolute; right: 0; bottom: calc(var(--pos, 0) * 100%);
  transform: translateY(50%);
}
.gauge__tick button {
  pointer-events: auto; cursor: pointer;
  background: none; border: 0; padding: 0.3rem 1.35rem 0.3rem 0.5rem; margin: 0;
  font-family: var(--sc-font-text); font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft);
  position: relative; transition: color var(--sc-d-fast) var(--sc-ease-out); white-space: nowrap;
}
.gauge__tick button::after {
  content: ""; position: absolute; right: 0.3rem; top: 50%; width: 0.55rem; height: 1px;
  background: currentColor; transform: translateY(-50%);
}
.gauge__tick button:hover, .gauge__tick button[aria-current="true"] { color: var(--sc-accent); }
.gauge__tick button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-radius: 2px; }
.gauge__tick button:active { transform: translateY(1px); }

.gauge__marker { position: absolute; right: 0.55rem; top: 0; width: 0; height: 100%; will-change: transform; }
.gauge__marker::before {
  content: ""; position: absolute; right: -0.28rem; top: -0.28rem; width: 0.56rem; height: 0.56rem;
  border-radius: 50%; background: var(--sc-accent);
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.5);
}
.gauge__temp {
  position: absolute; right: 0.55rem; top: -2.1rem; transform: translateX(50%);
  font-family: var(--sc-font-mono); font-size: 0.95rem; color: var(--sc-accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}


.lang {
  position: fixed; top: 1.15rem; left: calc(var(--sc-gutter) + 13.5rem); z-index: var(--sc-z-chrome);
  display: flex; gap: 0.15rem;
}
.lang button {
  cursor: pointer; background: none; border: 0; padding: 0.35rem 0.45rem; margin: 0;
  font-family: var(--sc-font-text); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em;
  color: var(--sc-ink-soft); border-radius: 3px;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.lang button:hover { color: var(--sc-ink); }
.lang button[aria-current="true"] { color: var(--sc-accent); }
.lang button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

/* --------------------------------------------------------------- world -- */
.env { position: absolute; inset: 0; background-color: var(--sc-canvas); }
.env::after { content: ""; position: absolute; inset: 0; opacity: 0; }

.env--fire { background-image: radial-gradient(52% 34% at var(--col-x) 104%, rgba(255,107,44,0.18), transparent 70%); }
.env--green {
  background-image:
    radial-gradient(48% 62% at 28% 42%, rgba(79,203,138,0.11), transparent 70%),
    radial-gradient(52% 34% at var(--col-x) 104%, rgba(255,107,44,0.14), transparent 70%);
}
.env--green::after { opacity: 0.07; background: repeating-linear-gradient(180deg, rgba(200,255,220,0.5) 0 1px, transparent 1px 4px); }
.env--ledger {
  background-image:
    radial-gradient(46% 56% at 24% 58%, rgba(224,165,90,0.13), transparent 70%),
    radial-gradient(52% 34% at var(--col-x) 104%, rgba(255,107,44,0.16), transparent 70%);
}
.env--ledger::after {
  opacity: 0.35;
  background: repeating-linear-gradient(180deg, rgba(224,165,90,0.06) 0 1px, transparent 1px 30px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 52%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 52%);
}
.env--still {
  background-image:
    radial-gradient(64% 70% at var(--col-x) 62%, rgba(181,98,47,0.20), transparent 72%),
    radial-gradient(52% 34% at var(--col-x) 104%, rgba(255,107,44,0.20), transparent 70%);
}
.env--foundation {
  background-image:
    radial-gradient(48% 52% at 26% 30%, rgba(140,150,170,0.09), transparent 70%),
    radial-gradient(58% 60% at var(--col-x) 72%, rgba(181,98,47,0.15), transparent 72%);
}
.env--layers {
  background-image:
    radial-gradient(50% 60% at 24% 50%, rgba(181,98,47,0.10), transparent 70%),
    radial-gradient(58% 50% at var(--col-x) 80%, rgba(255,120,50,0.17), transparent 72%);
}
.env--layers::after {
  opacity: 0.4;
  background: repeating-linear-gradient(180deg, rgba(224,165,90,0.05) 0 1px, transparent 1px 18vh);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
}
.env--botanicals {
  background-image:
    radial-gradient(52% 64% at 26% 46%, rgba(140,150,110,0.10), transparent 70%),
    radial-gradient(58% 54% at var(--col-x) 76%, rgba(201,138,90,0.17), transparent 72%);
}
.env--condenser {
  background-image:
    radial-gradient(60% 46% at var(--col-x) 104%, rgba(255,140,60,0.28), transparent 72%),
    radial-gradient(56% 40% at 36% 6%, rgba(217,164,65,0.13), transparent 70%);
}
.env--pour1 {
  background-image:
    radial-gradient(50% 60% at 28% 44%, rgba(217,164,65,0.10), transparent 70%),
    radial-gradient(56% 44% at var(--col-x) 90%, rgba(255,120,50,0.16), transparent 72%);
}
.env--label { background-image: radial-gradient(52% 58% at var(--col-x) 50%, rgba(181,98,47,0.13), transparent 72%); }
.env--pour { background-image: radial-gradient(40% 40% at 28% 34%, rgba(217,164,65,0.08), transparent 70%); }

.still { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 200; pointer-events: none; }
.sparks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; }

/* ----------------------------------------------------------------- type -- */
.scrim {
  background: linear-gradient(90deg, rgba(15,16,20,0.80) 0%, rgba(15,16,20,0.46) 36%, rgba(15,16,20,0) 56%);
}

.copy {
  position: absolute; left: var(--sc-gutter); max-width: 44vw;
  /* light on dark: a touch more leading and tracking than the light-mode metrics */
  line-height: 1.62; letter-spacing: 0.004em;
}
.copy--hero { bottom: 14vh; max-width: 46vw; }
.copy--hero .textlink { margin-top: var(--sc-5); }
.copy--hero .eyebrow { margin-bottom: var(--sc-4) !important; }
.copy--top { top: 20vh; }
.copy--low { bottom: 16vh; }
.copy--foundation { top: 16vh; }
.copy--wide { width: 46vw; max-width: none; top: var(--pane-top, 23vh); }
.copy--finale { top: 20vh; max-width: 44vw; }
.copy--tally { bottom: 1.55rem; top: auto; left: auto; right: 13.5rem; }
.copy--tally .tally { font-size: var(--sc-t-lg); }
.copy--opener { max-width: 40rem; }

.copy h1, .copy h2, .copy h3 { margin: 0; }
.copy p { margin: 0; color: var(--sc-ink-soft); max-width: 40rem; text-wrap: pretty; font-size: 1.2rem; }
.copy h2 + p, .copy h1 + p { margin-top: var(--sc-5); }
.copy--wide h2 + p { margin-top: var(--sc-4); max-width: 44rem; }

.display {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-2xl); line-height: 1.04; letter-spacing: -0.01em;
  color: var(--sc-ink); text-wrap: balance;
}
.display--xl { font-size: var(--sc-t-3xl); line-height: 0.98; letter-spacing: -0.015em; }
.copy--wide .display { font-size: var(--sc-t-xl); }
.lede { font-size: var(--sc-t-xl); font-weight: 400; }
.tally { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; font-style: italic; color: var(--sc-ink) !important; margin-top: var(--sc-5) !important; }
.copy--tally .tally { margin-top: 0 !important; }
.ask { font-size: var(--sc-t-lg); color: var(--sc-ink-soft) !important; margin: var(--sc-4) 0 var(--sc-6) !important; }
.eyebrow { font-size: 0.95rem !important; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-accent) !important; font-weight: 500; margin-bottom: var(--sc-3) !important; }

/* the four plates under the foundation */
.stats {
  list-style: none; margin: var(--sc-5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; max-width: 40rem;
}
.stats li {
  padding: 0.55rem 0.7rem; border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-sm);
  background: var(--plate); box-shadow: var(--sc-e1), var(--sc-edge);
  display: grid; gap: 0.1rem;
}
.stats strong { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.1; color: var(--sc-ink); }
.stats span { font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* client names, beside the column, arriving one ring at a time */
.rings {
  list-style: none; margin: 0; padding: 0;
  position: absolute; top: 48vh; left: calc(52.5vw - 15rem - var(--sc-gutter)); width: 15rem;
  text-align: right;
}
.rings li {
  font-size: 1.05rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-ink-soft); padding: 0.5rem 0;
  border-bottom: 1px solid var(--sc-hairline);
  opacity: 0; transform: translateX(6px);
  transition: opacity 220ms var(--sc-ease-out), transform 260ms var(--sc-ease-out);
}
.rings li.is-in, .layers li.is-in, .botanicals li.is-in { opacity: 1; transform: none; }

/* the five layers */
.layers { list-style: none; margin: var(--sc-4) 0 0; padding: 0; display: grid; gap: 0.3rem; }
/* A dense block is a reading pane: it never reaches below 11vh from the
   bottom (the play control lives there), and content taller than the pane
   slides up inside it by exactly its overflow, driven by still.js. Nothing
   moves, and nothing is clipped, when it fits. */
.fit { transform: translate3d(0, var(--fit, 0px), 0); will-change: transform; }
.copy--wide, .pour1 { max-height: calc(94vh - var(--pane-top, 23vh)); overflow: hidden; }
.tray { max-height: calc(94vh - var(--pane-top, 26vh)); overflow: hidden; }
/* only a pane with overflow gets the soft edges; a pane that fits shows every pixel */
.is-over { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 2.2rem), transparent 100%);
                  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 2.2rem), transparent 100%); }
.is-over.is-slid { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.6rem, #000 calc(100% - 2.2rem), transparent 100%);
                          mask-image: linear-gradient(180deg, transparent 0, #000 1.6rem, #000 calc(100% - 2.2rem), transparent 100%); }
.is-over.is-slid.is-end { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.6rem, #000 100%);
                                 mask-image: linear-gradient(180deg, transparent 0, #000 1.6rem, #000 100%); }
.label { max-height: calc(94vh - var(--pane-top, 22vh)); overflow: hidden; }
.copy--finale { max-height: 75vh; overflow: hidden; }
.layers li {
  display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 0.6rem; align-items: start;
  padding: 0.55rem 0 0.6rem; border-top: 1px solid var(--sc-hairline);
  opacity: 0; transform: translateY(6px);
  transition: opacity 220ms var(--sc-ease-out), transform 240ms var(--sc-ease-out);
}
.layers__n { font-family: var(--sc-font-mono); font-size: 0.95rem; color: var(--sc-accent); padding-top: 0.25rem; }
.layers h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.15; color: var(--sc-ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; }
.layers h3 small { font-family: var(--sc-font-mono); font-size: 0.9rem; font-weight: 400; letter-spacing: 0.06em; color: var(--sc-ink-soft); }
.layers p { font-size: 1.14rem; line-height: 1.42; margin-top: 0.2rem; }

/* the six botanicals */
.botanicals { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.4rem; }
.botanicals li {
  padding: 0.55rem 0 0.6rem; border-top: 1px solid var(--sc-hairline);
  opacity: 0; transform: translateY(6px);
  transition: opacity 220ms var(--sc-ease-out), transform 240ms var(--sc-ease-out);
}
.botanicals h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.15; color: var(--sc-ink); }
.botanicals h3::before { content: "✦ "; color: var(--sc-accent); font-size: 0.7em; vertical-align: 0.15em; }
.botanicals p { font-size: 1.06rem; line-height: 1.4; margin-top: 0.2rem; }

/* the tray: seven rows, each one a product a drop became */
.tray { top: var(--pane-top, 26vh); width: 46vw; max-width: none; }
.tray .fit { display: grid; grid-template-columns: 1fr; gap: clamp(0.8rem, 1.4vh, 1.2rem); }
.drop {
  display: grid; grid-template-columns: 1fr auto; column-gap: 0.6rem; align-items: baseline; align-content: start;
  padding: 0.7rem 1rem 0.7rem 2.5rem; text-decoration: none; color: inherit;
  background: color-mix(in oklab, var(--sc-surface) 90%, transparent);
  border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e1), var(--sc-edge);
  opacity: 0; transform: translateY(6px);
  transition: opacity 200ms var(--sc-ease-out), transform 220ms var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out);
}
.drop.is-in { opacity: 1; transform: none; }
.drop:hover { border-color: var(--sc-hairline-strong); }
.drop:active { transform: translateY(1px); }
.drop:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.drop__name { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.1; color: var(--sc-ink); }
.drop__status { font-family: var(--sc-font-mono); font-size: 0.86rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); }
.drop__status--live { color: var(--sc-accent); }
.drop__group { grid-column: 1 / -1; font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); opacity: 0.9; margin-top: 0.1rem; }
.drop__line { grid-column: 1 / -1; font-size: 1.12rem; color: var(--sc-ink); margin-top: 0.3rem; }
.drop__desc { grid-column: 1 / -1; font-size: 1rem; line-height: 1.34; color: var(--sc-ink-soft); margin-top: 0.2rem; }
.drop__tags { grid-column: 1 / -1; font-family: var(--sc-font-mono); font-size: 0.86rem; letter-spacing: 0.04em; color: var(--sc-ink-soft); margin-top: 0.45rem; opacity: 0.85; }

/* the Cuidar+ cell on the first tray */
.note {
  display: grid; align-content: start; padding: 0.7rem 1rem 0.8rem 1rem;
  border: 1px dashed color-mix(in oklab, var(--sc-accent) 40%, transparent); border-radius: var(--sc-r-sm);
}
.note__name { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.1; color: var(--sc-ink); }
.note { opacity: 0; transition: opacity 220ms var(--sc-ease-out); }
.note.is-in { opacity: 1; }

/* the first pour: FoodScan Pro */
.pour1 { display: block; top: var(--pane-top, 23vh); }
.phones { position: relative; float: right; width: 10.5rem; height: 16rem; margin: 0.4rem 0 0.6rem 1.4rem; }
.phones img {
  position: absolute; width: 8.6rem; height: auto; border-radius: 1rem;
  border: 1px solid var(--sc-hairline-strong); box-shadow: var(--sc-e3);
}
.phones img:first-child { left: 0; top: 0; z-index: 2; }
.phones img:last-child { left: 3.2rem; top: 1.4rem; z-index: 1; opacity: 0.92; }
.pour1::after { content: ""; display: block; clear: both; }
.pour1__text h2 { font-size: var(--sc-t-xl); }
.pour1__text h2 + p { margin-top: var(--sc-3); }
.bullets { margin: var(--sc-3) 0 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; }
.bullets li { font-size: 1.14rem; color: var(--sc-ink-soft); padding-left: 1.1rem; position: relative; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--sc-accent); }
.textlink { display: inline-block; margin-top: var(--sc-5); color: var(--sc-ink); font-weight: 500; font-size: var(--sc-t-base); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-color: var(--sc-accent); }
.textlink:hover { color: var(--sc-accent); }
.textlink:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }

/* the label on the vessel */
.label {
  left: calc(var(--col-x) - 14rem); width: 28rem; top: var(--pane-top, 22vh); max-width: none;
  text-align: center; padding: var(--sc-6) var(--sc-6) var(--sc-5);
  background: color-mix(in oklab, var(--sc-surface) 95%, transparent);
  border: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent);
  outline: 1px solid color-mix(in oklab, var(--sc-accent) 22%, transparent); outline-offset: 4px;
  border-radius: 2px;
  box-shadow: var(--sc-e3), var(--sc-edge);
}
.label__brand, .label__foot {
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--sc-accent) !important;
  max-width: none !important;
}
.label__foot { font-weight: 500; letter-spacing: 0.18em; color: var(--sc-ink-soft) !important; margin-top: var(--sc-5) !important; }
.label__title {
  font-family: var(--sc-font-display); font-weight: 500; font-style: italic;
  font-size: var(--sc-t-xl); line-height: 1.1; letter-spacing: -0.005em; color: var(--sc-ink);
  margin: var(--sc-4) 0 var(--sc-4) !important; text-wrap: balance;
}
.label__text { font-size: 1.04rem; line-height: 1.45; max-width: none !important; }
.label__text + .label__text { margin-top: var(--sc-3) !important; }

/* play: the scroll runs itself */
.play {
  position: fixed; right: 1.25rem; bottom: 1.2rem; z-index: var(--sc-z-chrome);
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.95rem 0.55rem 0.8rem; border-radius: var(--sc-r-sm); cursor: pointer;
  background: color-mix(in oklab, var(--sc-canvas) 78%, transparent);
  border: 1px solid var(--sc-hairline-strong); color: var(--sc-accent);
  font-family: var(--sc-font-text); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.play:hover { border-color: var(--sc-accent); }
.play:active { transform: translateY(1px); }
.play:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.play__icon { width: 0; height: 0; border-style: solid; border-width: 0.32rem 0 0.32rem 0.5rem; border-color: transparent transparent transparent currentColor; }
.play[aria-pressed="true"] .play__icon { width: 0.55rem; height: 0.55rem; border: 0; background: currentColor; }

/* the close */
.copy--finale .display { font-size: var(--sc-t-xl); }
.cta {
  display: inline-block; padding: 0.95rem 1.6rem; border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none;
  font-weight: 500; font-size: var(--sc-t-sm); letter-spacing: 0.02em; white-space: nowrap;
  box-shadow: var(--sc-e2);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.cta:hover { transform: translateY(-1px); background: #E5B455; }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }

.foot {
  margin-top: clamp(2.5rem, 12vh, 8rem);
  display: flex; gap: 0.6rem 1.1rem; flex-wrap: wrap;
  font-size: 1.05rem; color: var(--sc-ink-soft); letter-spacing: 0.01em;
}
.foot a { color: var(--sc-ink-soft); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.foot a:hover { color: var(--sc-ink); }
.foot a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .drop, .rings li, .layers li, .botanicals li { transform: none; transition-duration: 180ms; }
  .cta:hover, .cta:active, .drop:active { transform: none; }
}

/* ----------------------------------------------------------- short desktop -- */
@media (min-width: 861px) and (max-height: 760px) {
  .drop__desc { display: none; }        /* a very short screen keeps the names in view instead of sliding them off */
  .layers p, .botanicals p, .drop__desc { font-size: 1rem; line-height: 1.36; }
  .layers li, .botanicals li { padding: 0.4rem 0 0.45rem; }
  .drop { padding: 0.5rem 0.8rem 0.55rem 2.3rem; }
  .tray .fit { gap: 0.6rem; }
  .copy--wide h2 + p { margin-top: var(--sc-3); }
  .phones { height: 16rem; width: 11rem; }
  .phones img { width: 7.5rem; }
}

/* ----------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  .mark { top: 0.9rem; font-size: 1.15rem; }
  .lang { top: 2.9rem; left: var(--sc-gutter); }
  .lang button { font-size: 0.72rem; padding: 0.3rem 0.4rem; }
  .gauge { right: 0.6rem; width: 2.2rem; height: 58vh; }
  .gauge__tick button { font-size: 0; padding: 0.5rem 0.9rem 0.5rem 0.6rem; }
  .gauge__tick button::after { width: 0.4rem; right: 0.35rem; }
  .gauge__temp { font-size: 0.62rem; top: -1.8rem; }

  .scrim {
    background: linear-gradient(180deg, rgba(15,16,20,0.93) 0%, rgba(15,16,20,0.86) 38%, rgba(15,16,20,0.55) 54%, rgba(15,16,20,0) 67%);
  }
  .copy { left: var(--sc-gutter); right: calc(var(--sc-gutter) + 1.6rem); max-width: none; top: 11vh; bottom: auto; width: auto; }
  .copy--hero { top: 12vh; }
  .display--xl { font-size: var(--sc-t-2xl); }
  .display, .copy--wide .display { font-size: var(--sc-t-xl); }
  .copy h2 + p, .copy h1 + p, .copy--wide h2 + p { margin-top: var(--sc-4); }
  .copy p { font-size: var(--sc-t-base); }

  /* information-dense blocks sit on a plate over the column */
  .copy--plate {
    padding: var(--sc-4) var(--sc-4) var(--sc-5);
    background: color-mix(in oklab, var(--sc-surface) 94%, transparent);
    border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-sm);
    box-shadow: var(--sc-e2), var(--sc-edge);
  }
  .copy--wide { top: 9vh; }

  .stats { grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-top: var(--sc-4); }
  .stats strong { font-size: 1rem; }
  .rings { position: static; width: auto; text-align: left; margin-top: var(--sc-4);
           display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .rings li { padding: 0.3rem 0; font-size: 0.68rem; }

  .layers { gap: 0.2rem; margin-top: var(--sc-4); }
  .layers li { grid-template-columns: 1.6rem 1fr; padding: 0.4rem 0 0.45rem; }
  .layers h3 { font-size: 1rem; }
  .layers h3 small { font-size: 0.68rem; }
  .layers p { font-size: 0.86rem; line-height: 1.35; }
  .copy--wide .intro { display: none; }

  .botanicals { grid-template-columns: 1fr; gap: 0.25rem; margin-top: var(--sc-4); }
  .botanicals li { padding: 0.4rem 0 0.45rem; }
  .botanicals h3 { font-size: 1rem; }
  .botanicals p { font-size: 0.88rem; line-height: 1.38; }

  /* one plate, seven rows: the description lives on each product's own site */
  .tray { top: var(--pane-top, 36vh); width: auto; padding: 0; overflow: hidden; }
  .tray .fit { grid-template-columns: 1fr; gap: 0; }
  .drop { padding: 0.6rem 0.8rem 0.65rem 2.1rem; background: none; border: 0; border-radius: 0;
          box-shadow: none; border-bottom: 1px solid var(--sc-hairline); }
  .drop:last-child { border-bottom: 0; }
  .drop__name { font-size: 1.05rem; }
  .drop__line { font-size: 0.94rem; margin-top: 0.1rem; }
  .drop__desc { display: none; }
  .drop__tags { margin-top: 0.15rem; font-size: 0.78rem; }
  .drop__group { font-size: 0.78rem; }
  .note { padding: 0.5rem 0.8rem; border: 0; border-bottom: 1px solid var(--sc-hairline); border-radius: 0; }
  .note .drop__desc { display: block; }
  .note__name { font-size: 1.05rem; }

  .pour1 { top: 9vh; }
  .phones { height: auto; width: 34%; margin: 0 0 0.6rem 0.8rem; }
  .phones img { position: static; width: 100%; }
  .phones img:last-child { display: none; }
  .pour1__text h2 { font-size: var(--sc-t-lg); }
  .bullets li { font-size: 0.9rem; }
  .textlink { margin-top: var(--sc-4); }

  .label { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: 9vh; padding: var(--sc-5) var(--sc-4) var(--sc-4); }
  .label__text { font-size: 0.94rem; line-height: 1.45; }
  .copy--finale { top: 40vh; max-height: 52vh; }
  .copy--wide, .pour1, .label { max-height: 82vh; }
  .tray { max-height: calc(94vh - var(--pane-top, 36vh)); }
  .copy--hero { bottom: auto; top: 10vh; }
  .copy--tally { top: 11vh; bottom: auto; left: var(--sc-gutter); right: auto; }
  .play { left: auto; right: 0.8rem; bottom: 1rem; padding: 0.5rem 0.7rem; font-size: 0.62rem; }
  .copy--opener .tally { display: none; }
  .copy--foundation { top: 9vh; }
  .foot { margin-top: clamp(1.5rem, 5vh, 3rem); gap: 0.4rem 0.9rem; font-size: 0.7rem; }
}
@media (max-width: 380px) {
  .drop { padding: 0.32rem 0.7rem 0.36rem 1.9rem; }
  .drop__name { font-size: 0.95rem; }
  .drop__tags { display: none; }
  .layers p, .botanicals p { font-size: 0.7rem; }
}