/* ============================================================================
   ASTROVE — THE ENERGY GEL WORLD  (/energy-gel, /story, /field-notes)
   ----------------------------------------------------------------------------
   One world across three parts. Matte black, warm ivory, PP Editorial New set
   large, PP Neue Montreal for every label. One accent at a time: the page's
   flavour (gel mango, story jamun, field notes pineapple), and on
   /energy-gel the flavour the reader picks in the explorer, which the
   training and why sections then follow. Never all three as decoration.

   The claw cut -- three diagonal slashes -- appears twice and nowhere else:
   the hero reveal on /energy-gel (CSS only, once, under 900 ms) and the
   flavour change in the explorer (js/energy-gel-world.js adds .is-cut).
   The training section speaks its own language instead: ivory line
   drawings that draw themselves when an occasion is chosen (.is-drawing).
   Reduced motion removes all of it; the final state is shown at once.

   Phone first and composed on its own terms: its own crops, type sizes and
   44 px controls. Loaded after static-shell.css and site-index.css, so the
   skip link, the site index overlay and the shared footer keep their own
   styles; this file only sets the gel world's ground and accent for them.
   ========================================================================== */

/* ---- ground and accent ---------------------------------------------------- */
.gel-body {
  --g-black: #0b0a09;
  --g-raised: #15130f;
  --g-ivory: #f3ead8;
  --g-ivory-soft: #c9bea8;
  --g-ivory-dim: #9a907f;
  --g-line: rgba(243, 234, 216, 0.14);
  --g-line-strong: rgba(243, 234, 216, 0.3);
  --g-ink: #0b0a09;
  --accent: #ff8a1c;
  --accent-text: #ff8a1c;
  --g-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --g-gutter: max(1rem, var(--safe-left, 0px));
  --g-gutter-r: max(1rem, var(--safe-right, 0px));
  --shell-field: var(--g-black);
  /* The shell's index numerals and focus rings are text: use the text-safe
     accent (jamun's #c48bff keeps 11 px numerals at AA on the raised footer). */
  --shell-accent: var(--accent-text);
  --shell-masthead-h: calc(max(0.5rem, var(--safe-top, 0px)) + 6.1rem);
  background: var(--g-black);
  color: var(--g-ivory);
}
html:has(.gel-body) { background: var(--g-black); }

[data-flavour="mango"] { --accent: #ff8a1c; --accent-text: #ff8a1c; }
[data-flavour="pineapple"] { --accent: #f4d21f; --accent-text: #f4d21f; }
[data-flavour="jamun"] { --accent: #a34dff; --accent-text: #c48bff; }

.gel-body :where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 1px;
}

.gel-main { display: block; }
.gel-main > section,
.gel-main > article,
.gel-end__inner {
  padding-left: var(--g-gutter);
  padding-right: var(--g-gutter-r);
}
.gel-main > section[id] { scroll-margin-top: var(--shell-masthead-h); }

/* ---- type ------------------------------------------------------------------ */
.gel-eyebrow,
.gel-label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.gel-label { color: var(--g-ivory-soft); }
.gel-label span { color: var(--accent-text); }

.gel-display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.65rem, 11.4vw, 3.4rem);
  line-height: 0.96;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.gel-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 9vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.gel-h2 a { color: inherit; text-decoration: none; }
.gel-h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.12em; }

.gel-body-text {
  max-width: 34rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--g-ivory-soft);
}

.gel-caption {
  margin: 0.7rem 0 0;
  max-width: 34rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--g-ivory-dim);
}
.gel-caption::before {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 1px;
  margin-right: 0.5rem;
  vertical-align: 0.25em;
  background: var(--accent);
}

/* ---- controls ---------------------------------------------------------------- */
.gel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--accent);
  color: var(--g-ink);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--g-ease), color 160ms var(--g-ease), border-color 160ms var(--g-ease), transform 120ms var(--g-ease);
}
.gel-btn:hover { background: var(--g-ivory); border-color: var(--g-ivory); }
.gel-btn:active { transform: scale(0.98); }
.gel-btn--ghost { background: transparent; color: var(--g-ivory); border-color: var(--g-line-strong); }
.gel-btn--ghost:hover { background: transparent; border-color: var(--g-ivory); color: var(--g-ivory); }
.gel-btn--ivory { background: var(--g-ivory); border-color: var(--g-ivory); color: var(--g-ink); }
.gel-btn--ivory:hover { background: var(--accent); border-color: var(--accent); }
.gel-btn:disabled { cursor: default; opacity: 0.55; }

.gel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--g-ivory);
  border-bottom: 1px solid var(--accent);
}
.gel-link span { color: var(--accent-text); transition: transform 160ms var(--g-ease); }
.gel-link:hover span { transform: translateX(0.25rem); }

/* ---- masthead -------------------------------------------------------------------
   A phone gets two rows: the wordmark, the product and Join; then every link
   in a row that scrolls sideways if it must. No menu to open, no script. */
.gel-mast {
  position: sticky;
  top: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "home label join" "nav nav nav";
  align-items: center;
  column-gap: 0.85rem;
  padding: max(0.5rem, var(--safe-top, 0px)) var(--g-gutter-r) 0 var(--g-gutter);
  background: var(--g-black);
  border-bottom: 1px solid var(--g-line);
}
/* While the site index is open the page is pinned (styles/site-index.css);
   the gel masthead is held to the viewport exactly as the shell's is. */
html.is-locked .gel-mast { position: fixed; top: 0; left: 0; right: 0; }
.gel-mast__home { grid-area: home; display: block; width: 6.4rem; }
.gel-mast__label {
  grid-area: label;
  margin: 0;
  padding-left: 0.85rem;
  border-left: 1px solid var(--g-line-strong);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
}
.gel-mast__join {
  grid-area: join;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  background: var(--accent);
  color: var(--g-ink);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms var(--g-ease);
}
.gel-mast__join:hover { background: var(--g-ivory); }
/* On a phone the button reads JOIN; "the launch list" stays for screen readers. */
.gel-mast__more {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.gel-mast__nav {
  grid-area: nav;
  margin: 0.15rem calc(-1 * var(--g-gutter-r)) 0 calc(-1 * var(--g-gutter));
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gel-mast__nav::-webkit-scrollbar { display: none; }
.gel-mast__nav ul {
  display: flex;
  gap: 1.1rem;
  width: max-content;
  margin: 0;
  padding: 0 var(--g-gutter-r) 0 var(--g-gutter);
  list-style: none;
}
.gel-mast__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--g-ivory-soft);
  box-shadow: inset 0 -2px 0 transparent;
  transition: color 160ms var(--g-ease), box-shadow 160ms var(--g-ease);
}
.gel-mast__nav a:hover { color: var(--g-ivory); }
.gel-mast__nav a[aria-current] { color: var(--g-ivory); box-shadow: inset 0 -2px 0 var(--accent); }
.gel-mast__store { padding-left: 1.1rem; border-left: 1px solid var(--g-line); }
.gel-mast__store a { color: var(--g-ivory); }

/* ---- the claw cut ---------------------------------------------------------------
   Three diagonal slashes open the image, widen, and close over it. One
   twelve-point polygon per frame: three parallelograms joined along the bottom
   edge, so the joins have no area. The last frame covers the box; after it
   ends no clip remains (fill-mode backwards only). */
@keyframes gel-claw {
  0% {
    clip-path: polygon(34% 0%, 37% 0%, 7% 100%, 29% 100%, 59% 0%, 62% 0%, 32% 100%, 54% 100%, 84% 0%, 87% 0%, 57% 100%, 4% 100%);
  }
  45% {
    clip-path: polygon(22% 0%, 40% 0%, 10% 100%, 22% 100%, 52% 0%, 70% 0%, 40% 100%, 50% 100%, 80% 0%, 98% 0%, 68% 100%, -8% 100%);
  }
  100% {
    clip-path: polygon(-10% 0%, 55% 0%, 25% 100%, 10% 100%, 40% 0%, 105% 0%, 75% 100%, 60% 100%, 90% 0%, 160% 0%, 130% 100%, -40% 100%);
  }
}
@keyframes gel-settle {
  from { transform: scale(1.07); }
  to { transform: scale(1); }
}
/* The pouches stand up into place: `translate`, so each keeps its own tilt. */
@keyframes gel-stand {
  from { opacity: 0; translate: 0 1.75rem; }
  to { opacity: 1; translate: 0 0; }
}

/* ---- THE GEL: hero ----------------------------------------------------------------- */
/* A phone's first screen holds the tiger, the three pouches, what the gel
   is, who it's for and both buttons (360x740 and up). The tiger is a wide
   band capped by the screen height with its eye on the right; the pouches
   stand on its faded foot at the left; the words start under them. */
.gel-hero {
  --hero-art-h: min(84vw, 37svh);
  --hero-pack-w: min(52vw, 13.5rem);
  display: grid;
  padding-bottom: clamp(3rem, 9vw, 5rem);
}
.gel-hero__figure {
  position: relative;
  margin: 0 calc(-1 * var(--g-gutter-r)) 0 calc(-1 * var(--g-gutter));
}
.gel-hero__art {
  position: relative;
  height: var(--hero-art-h);
  overflow: hidden;
  animation: gel-claw 860ms var(--g-ease) backwards;
}
.gel-hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 36%;
  animation: gel-settle 1100ms var(--g-ease) backwards;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 58%, transparent 96%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 58%, transparent 96%);
}
/* The three pouches: Pineapple and Jamun tilted behind, Mango in front. */
.gel-hero__pouches {
  position: absolute;
  left: var(--g-gutter);
  bottom: -0.4rem;
  width: var(--hero-pack-w);
  aspect-ratio: 1 / 0.98;
}
.gel-hero__pouch {
  position: absolute;
  bottom: 0;
  width: 42%;
  animation: gel-stand 820ms var(--g-ease) backwards;
}
.gel-hero__pouch img { display: block; width: 100%; height: auto; }
.gel-hero__pouch--pineapple { left: 0; bottom: 5%; rotate: -8deg; scale: 0.9; transform-origin: 50% 100%; animation-delay: 300ms; }
.gel-hero__pouch--jamun { right: 0; bottom: 5%; rotate: 8deg; scale: 0.9; transform-origin: 50% 100%; animation-delay: 380ms; }
.gel-hero__pouch--mango { left: 29%; z-index: 2; animation-delay: 460ms; }

.gel-hero__copy { position: relative; display: grid; justify-items: start; margin-top: 1.1rem; }
.gel-hero__title {
  margin-top: 0.45rem;
  font-size: clamp(3.5rem, 15.6vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
}
.gel-hero__title em { font-style: italic; color: var(--accent-text); letter-spacing: -0.02em; }
.gel-hero__lead {
  max-width: 22ch;
  margin: 0.85rem 0 0;
  font-family: var(--font-display);
  font-size: 1.42rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--g-ivory);
}
.gel-hero__sub {
  max-width: 31rem;
  margin: 0.45rem 0 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--g-ivory-soft);
}
.gel-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  width: 100%;
  margin-top: 1.15rem;
}
.gel-actions .gel-btn { padding: 0 1rem; font-size: 0.74rem; letter-spacing: 0.08em; white-space: nowrap; }
.gel-hero__soon {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.95rem 0 0;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g-ivory);
}
.gel-hero__soon::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}
.gel-made {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  margin: 1.4rem 0 0;
  padding: 0.65rem 0;
  border-top: 1px solid var(--g-line);
  border-bottom: 1px solid var(--g-line);
  list-style: none;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--g-ivory-soft);
}
.gel-made li { white-space: nowrap; }
/* The dot hangs off the end of an item, so a wrapped line never starts with one. */
.gel-made li:not(:last-child)::after { content: "·"; margin: 0 0.6rem; color: var(--accent-text); }

/* ---- section heads ------------------------------------------------------------------ */
.gel-head { display: grid; gap: 0.85rem; max-width: 46rem; }
.gel-head__intro { margin: 0; max-width: 32rem; font-size: 1.05rem; line-height: 1.55; color: var(--g-ivory-soft); }

/* ---- THE GEL: pick your wild (flavour explorer) -------------------------------------- */
.gel-flavours {
  padding-top: clamp(3.5rem, 10vw, 7rem);
  padding-bottom: clamp(3.5rem, 10vw, 7rem);
  border-top: 1px solid var(--g-line);
}
.gel-flavours__head { display: grid; gap: 0.7rem; }
.gel-flavours__title { font-size: clamp(2.9rem, 13vw, 3.6rem); line-height: 0.92; }
.gel-flavours__names {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--g-ivory-soft);
}
.gel-flavours__question {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.gel-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2rem;
  border-bottom: 1px solid var(--g-line);
}
.gel-tabs[hidden] { display: none; }
.gel-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: var(--g-ivory-dim);
  font-family: var(--font-ui);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color 160ms var(--g-ease), box-shadow 220ms var(--g-ease);
}
.gel-tab:hover { color: var(--g-ivory); }
.gel-tab[aria-selected="true"] { color: var(--g-ivory); box-shadow: inset 0 -2px 0 var(--accent); }
.gel-tab__eye {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--eye);
}
#gel-tab-mango { --eye: #ff8a1c; }
#gel-tab-pineapple { --eye: #f4d21f; }
#gel-tab-jamun { --eye: #a34dff; }

.gel-panels { display: grid; gap: 3.5rem; margin-top: 2rem; }
.gel-flavours.is-tabbed .gel-panels { margin-top: 1.75rem; }
.gel-flavour { display: grid; gap: 1.6rem; }
.gel-flavour[hidden] { display: none; }
/* Tabbed, the three panels share one grid cell and the unselected two are
   only invisible, so the section is always as tall as the tallest flavour
   and nothing below moves on a switch. */
.gel-flavours.is-tabbed .gel-panels { grid-template-areas: "panel"; }
.gel-flavours.is-tabbed .gel-flavour { grid-area: panel; }
.gel-flavours.is-tabbed .gel-flavour[hidden] { display: grid; visibility: hidden; }
.gel-flavour:focus-visible { outline-offset: 6px; }
.gel-flavour__media { margin: 0; }
.gel-flavour__art {
  display: grid;
  grid-template-columns: 44fr 56fr;
  gap: 0.5rem;
  background: var(--g-black);
}
.gel-flavour__art.is-cut { animation: gel-claw 640ms var(--g-ease) backwards; }
.gel-flavour__pouch,
.gel-flavour__tiger { position: relative; overflow: hidden; background: var(--g-black); }
/* Each pouch shot carries its own dark stone; its edges fade into the black. */
.gel-flavour__pouch img,
.gel-hero__pouch img,
.gel-entry__row-item img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 5%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 5%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.gel-flavour__pouch { aspect-ratio: 360 / 792; }
.gel-flavour__pouch img { width: 100%; height: 100%; object-fit: cover; }
.gel-flavour__tiger img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}
.gel-flavour__index {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--g-ivory-dim);
}
.gel-flavour__index span { color: var(--accent-text); }
.gel-flavour__name {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 12vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--accent-text);
}
.gel-flavour__line {
  max-width: 24ch;
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--g-ivory);
}
.gel-flavour__fruit {
  max-width: 34rem;
  margin: 1rem 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--g-ivory-soft);
}
.gel-flavour__pick {
  margin: 0.9rem 0 1.5rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--g-ivory);
}
.gel-flavour__ingredients {
  display: grid;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--g-line);
}
.gel-flavour__ingredients li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--g-line);
  font-size: 1rem;
  color: var(--g-ivory);
}

/* ---- THE GEL: what are you training for? ----------------------------------------------
   Its own language: a training log. A selector of six, and for each one an
   ivory line drawing (a route, a gradient, contours, stations, a start line,
   a ridge) with the accent on the part that matters, a title set in its own
   way, the situation, and two plain facts. */
.gel-training {
  padding-top: clamp(3.5rem, 10vw, 7rem);
  padding-bottom: clamp(3rem, 9vw, 6rem);
  background: var(--g-raised);
}
.gel-training__head { display: grid; gap: 0.85rem; max-width: 44rem; }
.gel-training__head .gel-h2 { font-size: clamp(2.6rem, 11.6vw, 3.4rem); line-height: 0.95; }
.gel-training__body { margin-top: 2rem; }

.gel-occasion-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 1.75rem;
}
.gel-occasion-tabs[hidden] { display: none; }
.gel-occasion-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  min-height: 3.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--g-line-strong);
  background: transparent;
  color: var(--g-ivory-soft);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms var(--g-ease), color 160ms var(--g-ease), background-color 160ms var(--g-ease);
}
.gel-occasion-tab__n { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--g-ivory-dim); }
.gel-occasion-tab__label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; line-height: 1.2; }
.gel-occasion-tab:hover { border-color: var(--g-ivory-dim); color: var(--g-ivory); }
.gel-occasion-tab[aria-selected="true"] { border-color: var(--accent); background: rgba(243, 234, 216, 0.05); color: var(--g-ivory); }
.gel-occasion-tab[aria-selected="true"] .gel-occasion-tab__n { color: var(--accent-text); }

.gel-occasions { display: grid; gap: 3.5rem; }
.gel-training.is-tabbed .gel-occasions { grid-template-areas: "panel"; gap: 0; }
.gel-training.is-tabbed .gel-occasion { grid-area: panel; }
.gel-training.is-tabbed .gel-occasion[hidden] { display: grid; visibility: hidden; }
.gel-occasion { display: grid; gap: 1.4rem; align-content: start; }
.gel-occasion:focus-visible { outline-offset: 6px; }
.gel-occasion__art {
  position: relative;
  padding: 0.75rem 0;
  border-top: 1px solid var(--g-line);
  border-bottom: 1px solid var(--g-line);
}
/* Survey ticks at the corners: the drawing sits on a chart, not in a card. */
.gel-occasion__art::before,
.gel-occasion__art::after {
  content: "";
  position: absolute;
  top: -0.35rem;
  width: 1px;
  height: 0.7rem;
  background: var(--accent);
}
.gel-occasion__art::before { left: 0; }
.gel-occasion__art::after { right: 0; }

.gel-art { display: block; width: 100%; height: auto; overflow: visible; }
.gel-art__line,
.gel-art__accent {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.gel-art__line { stroke: var(--g-ivory); stroke-width: 1.4; }
.gel-art__line--faint { stroke: var(--g-ivory-dim); stroke-width: 1; opacity: 0.7; }
.gel-art__accent { stroke: var(--accent); stroke-width: 2.2; }
.gel-art__accent--thick { stroke-width: 3.6; }
.gel-art__dot { fill: var(--accent); stroke: none; }
.gel-art__box { fill: var(--g-raised); }
.gel-art__trail { stroke-dasharray: 5 7; }

.gel-occasion__kicker {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g-ivory-soft);
}
.gel-occasion__n { color: var(--accent-text); }
.gel-occasion__title {
  margin: 0.55rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 10.4vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* Six titles, six treatments. */
.gel-occasion--profile .gel-occasion__title,
.gel-occasion--stations .gel-occasion__title {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(1.75rem, 8vw, 2.3rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.gel-occasion--stations .gel-occasion__title { letter-spacing: -0.01em; }
.gel-occasion--contour .gel-occasion__title { font-style: italic; }
.gel-occasion--start .gel-occasion__title { width: fit-content; padding-bottom: 0.12em; border-bottom: 3px solid var(--accent); }
.gel-occasion--ridge .gel-occasion__title { font-style: italic; color: var(--accent-text); }
.gel-occasion--route .gel-occasion__title::after { content: ""; display: block; width: 3.5rem; height: 2px; margin-top: 0.7rem; background: var(--accent); }

.gel-occasion__scene {
  max-width: 36rem;
  margin: 1rem 0 0;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--g-ivory);
}
.gel-occasion__facts { display: grid; gap: 0; margin: 1.3rem 0 0; }
.gel-occasion__facts > div { display: grid; gap: 0.35rem; padding: 0.95rem 0; border-top: 1px solid var(--g-line); }
.gel-occasion__facts dt { color: var(--accent-text); }
.gel-occasion__facts dd { margin: 0; max-width: 34rem; font-size: 0.98rem; line-height: 1.55; color: var(--g-ivory-soft); }

/* How to fuel: the usage guidance, under the six. */
.gel-howto {
  display: grid;
  gap: 0.9rem;
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--accent);
}
.gel-howto__label { color: var(--accent-text); }
.gel-howto__steps { display: grid; margin: 0; padding: 0; list-style: none; }
.gel-howto__steps li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.75rem; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid var(--g-line); }
.gel-howto__when { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-ivory-soft); }
.gel-howto__what { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; color: var(--g-ivory); }
.gel-howto__note { margin: 0.2rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--g-ivory-soft); }

/* The line draws itself when an occasion is chosen (js adds .is-drawing to
   the art). The dash pattern exists only while it plays (fill-mode
   backwards), so a browser that ignores pathLength ends on a solid line. */
@keyframes gel-draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes gel-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
.gel-occasion__art.is-drawing [pathLength] { animation: gel-draw 1000ms var(--g-ease) backwards; }
.gel-occasion__art.is-drawing .gel-art__accent { animation-delay: 320ms; }
.gel-occasion__art.is-drawing .gel-art__dot,
.gel-occasion__art.is-drawing .gel-art__trail { animation: gel-appear 500ms 650ms var(--g-ease) backwards; }

/* ---- THE GEL: why it works ------------------------------------------------------------- */
.gel-why {
  padding-top: clamp(3.5rem, 10vw, 7rem);
  padding-bottom: clamp(3.5rem, 10vw, 7rem);
}
.gel-why__list { display: grid; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.gel-why__item {
  display: grid;
  gap: 0.7rem;
  padding: 1.4rem 0 1.6rem;
  border-top: 1px solid var(--g-line);
}
.gel-why__item:last-child { border-bottom: 1px solid var(--g-line); }
.gel-why__text {
  max-width: 36rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.24;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* ---- THE GEL: from the source to the start line (founder) ------------------------------- */
.gel-founder {
  display: grid;
  gap: 2rem;
  padding-top: clamp(3.5rem, 10vw, 7rem);
  padding-bottom: clamp(3.5rem, 10vw, 7rem);
  border-top: 1px solid var(--g-line);
}
.gel-founder__portrait {
  position: relative;
  width: min(60vw, 18rem);
  margin: 0;
}
.gel-founder__portrait img { display: block; width: 100%; height: auto; }
/* One accent rule, offset behind the portrait. */
.gel-founder__portrait::after {
  content: "";
  position: absolute;
  inset: 0.9rem -0.9rem -0.9rem 0.9rem;
  z-index: -1;
  border: 1px solid var(--accent);
}
.gel-founder__portrait { isolation: isolate; }
.gel-founder__copy { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.gel-founder__title { font-size: clamp(2.5rem, 11vw, 3.2rem); line-height: 0.95; max-width: 12ch; }
.gel-founder__excerpt { display: grid; gap: 0.9rem; margin: 0.6rem 0 0; padding: 0; }
.gel-founder__excerpt p {
  max-width: 34rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.38;
  text-wrap: pretty;
}
.gel-founder__sign {
  margin: 0.2rem 0 0.4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--g-ivory-soft);
}

/* ---- THE GEL: field notes teaser ------------------------------------------------------- */
.gel-notes-teaser {
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  padding-top: clamp(3rem, 9vw, 5.5rem);
  padding-bottom: clamp(3rem, 9vw, 5.5rem);
  border-top: 1px solid var(--g-line);
}
.gel-notes-teaser__head { display: grid; gap: 0.5rem; }
.gel-notes-teaser__lead { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; }

.gel-note-row {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  max-width: 52rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--g-line);
  border-bottom: 1px solid var(--g-line);
  text-decoration: none;
  color: var(--g-ivory);
}
.gel-note-row time {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.gel-note-row__title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.gel-note-row__summary { max-width: 40rem; font-size: 0.98rem; line-height: 1.55; color: var(--g-ivory-soft); }
.gel-note-row:hover .gel-note-row__title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.12em; }

/* ---- THE GEL: questions ---------------------------------------------------------------- */
.gel-faq {
  padding-top: clamp(3.5rem, 10vw, 7rem);
  padding-bottom: clamp(3.5rem, 10vw, 7rem);
  border-top: 1px solid var(--g-line);
}
.gel-faq__list { display: grid; margin-top: 2rem; border-top: 1px solid var(--g-line); }
.gel-faq__item { padding: 1.25rem 0 1.4rem; border-bottom: 1px solid var(--g-line); }
.gel-faq__item h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--g-ivory);
}
.gel-faq__item p { max-width: 38rem; margin: 0.5rem 0 0; font-size: 0.98rem; line-height: 1.6; color: var(--g-ivory-soft); }
.gel-faq__item a { color: var(--g-ivory); text-decoration-color: var(--accent); text-underline-offset: 0.2em; }

/* ---- THE GEL: your next training partner (join) -------------------------------------- */
.gel-join {
  display: grid;
  gap: 2.25rem;
  padding-top: clamp(3.5rem, 10vw, 7rem);
  padding-bottom: clamp(3.5rem, 10vw, 7rem);
  border-top: 1px solid var(--accent);
  background: var(--g-raised);
}
.gel-join__intro { display: grid; gap: 0.9rem; align-content: start; justify-items: start; }
.gel-join__title { font-size: clamp(2.8rem, 12.6vw, 3.6rem); line-height: 0.93; max-width: 11ch; }
.gel-join__sub { margin: 0; max-width: 30rem; font-size: 1.1rem; line-height: 1.5; color: var(--g-ivory); }
.gel-join__figure { width: 100%; margin: 0.8rem 0 0; }
.gel-join__figure img { display: block; width: 100%; height: auto; }
/* Phones: the pouches are already in the hero and the explorer, so the form
   comes straight after the heading. The lazy image is never fetched there. */
@media (max-width: 699px) { .gel-join__figure { display: none; } }
.gel-partners {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
  max-width: 30rem;
  margin: 0.6rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--g-line);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--g-ivory-soft);
}

.gel-form { display: grid; gap: 1.2rem; max-width: 34rem; }
.gel-form[hidden] { display: none; }
.gel-field { display: grid; gap: 0.45rem; }
.gel-field label,
.gel-choices legend {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g-ivory);
}
.gel-opt { margin-left: 0.4rem; font-weight: 400; color: var(--g-ivory-dim); }
.gel-form input[type="email"],
.gel-form input[type="tel"],
.gel-form input[type="text"] {
  width: 100%;
  min-height: 3.25rem;
  padding: 0 0.95rem;
  border: 1px solid var(--g-line-strong);
  border-radius: 0;
  background: var(--g-black);
  color: var(--g-ivory);
  font: inherit;
  font-size: 1rem;
  transition: border-color 160ms var(--g-ease);
}
.gel-form input:hover { border-color: var(--g-ivory-dim); }
.gel-form input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 0; border-color: transparent; }
.gel-form input[aria-invalid="true"] { border-color: #ff6b5e; }
.gel-phone { display: flex; }
.gel-phone__code {
  display: inline-flex;
  align-items: center;
  padding: 0 0.85rem;
  border: 1px solid var(--g-line-strong);
  border-right: 0;
  background: var(--g-raised);
  color: var(--g-ivory-soft);
  font-size: 1rem;
}
.gel-field__note { margin: 0; font-size: 0.8rem; color: var(--g-ivory-dim); }
.gel-check {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.8rem;
  align-items: start;
  min-height: 2.75rem;
  padding: 0.35rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--g-ivory);
  cursor: pointer;
}
.gel-check input,
.gel-choice input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
}
.gel-submit { width: 100%; }
.gel-status { min-height: 1.5em; margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--g-ivory); }
.gel-form[data-state="invalid"] .gel-status,
.gel-form[data-state="error"] .gel-status { color: #ff8f84; }
.gel-form[data-state="success"] .gel-status { color: var(--accent-text); }
.gel-privacy { margin: 0; font-size: 0.85rem; }
.gel-privacy a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--g-ivory-soft); text-underline-offset: 0.25em; text-decoration-color: var(--g-line-strong); }
.gel-privacy a:hover { color: var(--g-ivory); }
/* The no-JavaScript outcome of a join: the server sends the browser back to
   one of these fragments, and only the targeted one shows. */
.gel-nojs-note {
  display: none;
  margin: 0 0 1.75rem;
  padding: 0.9rem 0 0.9rem 1rem;
  border-left: 2px solid var(--accent);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--g-ivory);
  scroll-margin-top: calc(var(--shell-masthead-h) + 1.5rem);
}
.gel-nojs-note:target { display: block; }
.gel-nojs-note:focus { outline: none; }

.gel-survey { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--g-line); }
.gel-survey__title,
.gel-done__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.gel-survey__title:focus,
.gel-done__title:focus { outline: none; }
.gel-survey__intro { margin: -0.4rem 0 0; color: var(--g-ivory-soft); }
.gel-choices { display: grid; gap: 0.7rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.gel-choices legend { line-height: 1.5; }
.gel-choices__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gel-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0 0.95rem 0 0.75rem;
  border: 1px solid var(--g-line-strong);
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 160ms var(--g-ease), background-color 160ms var(--g-ease);
}
.gel-choice input { margin: 0; }
.gel-choice:hover { border-color: var(--g-ivory-dim); }
.gel-choice:has(input:checked) { border-color: var(--accent); background: rgba(243, 234, 216, 0.05); }
.gel-choice:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.gel-choice input:focus-visible { outline: none; }
.gel-survey__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.gel-done { display: grid; gap: 1.2rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--accent); max-width: 34rem; }
.gel-done[hidden] { display: none; }
.gel-done__links { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.gel-done__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--g-ivory);
}
.gel-done__links span { color: var(--accent-text); }

/* ---- shared page hero (story, field notes) ------------------------------------------ */
.gel-page-hero {
  display: grid;
  gap: 2rem;
  padding-top: clamp(2.5rem, 8vw, 5rem);
  padding-bottom: clamp(3rem, 9vw, 5.5rem);
}
.gel-page-hero__copy { display: grid; gap: 1rem; align-content: start; }
.gel-page-hero__copy .gel-display { max-width: 12ch; }
.gel-page-hero__sub { max-width: 30rem; margin: 0.2rem 0 0; font-size: 1.05rem; line-height: 1.55; color: var(--g-ivory-soft); }
.gel-page-hero--notes .gel-display { max-width: 11ch; font-size: clamp(2.9rem, 13vw, 3.8rem); }

/* ---- THE STORY ----------------------------------------------------------------------------- */
.gel-page-hero--story .gel-display { font-size: clamp(2.9rem, 13vw, 3.8rem); max-width: 10ch; }
.gel-story__portrait { position: relative; width: min(78vw, 24rem); margin: 0; isolation: isolate; }
.gel-story__portrait img { display: block; width: 100%; height: auto; }
.gel-story__portrait::after {
  content: "";
  position: absolute;
  inset: 0.9rem -0.9rem 2.6rem 0.9rem;
  z-index: -1;
  border: 1px solid var(--accent);
}
.gel-story__who {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin-top: 0.8rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
}
.gel-story__who span + span { font-family: var(--font-ui); font-style: normal; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--g-ivory-soft); }

.gel-chapter {
  display: grid;
  gap: 1.2rem;
  padding-top: clamp(3rem, 9vw, 6rem);
  padding-bottom: clamp(3rem, 9vw, 6rem);
  border-top: 1px solid var(--g-line);
}
.gel-chapter__n {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--g-ivory-soft);
}
.gel-chapter__n span { margin-right: 0.6rem; color: var(--accent-text); }
.gel-chapter__body { display: grid; gap: 1.1rem; max-width: 38rem; }
.gel-chapter__title { margin-bottom: 0.4rem; }
.gel-chapter__body > p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.gel-chapter__body > p:nth-of-type(1) { font-size: 1.55rem; line-height: 1.3; }
.gel-chapter__body > .gel-chapter__sign { display: grid; gap: 0.2rem; margin-top: 0.6rem; padding-top: 1.2rem; border-top: 1px solid var(--g-line); font-size: 1rem; }
.gel-chapter__name { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; }
.gel-chapter__role { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--g-ivory-soft); }

.gel-roadmap {
  display: grid;
  gap: 1.5rem;
  padding-top: clamp(3rem, 9vw, 6rem);
  padding-bottom: clamp(3rem, 9vw, 6rem);
  background: var(--g-raised);
}
.gel-roadmap__list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.gel-roadmap__item {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  grid-template-areas: "n copy" "n status";
  column-gap: 0.9rem;
  padding: 1.35rem 0 1.5rem;
  border-top: 1px solid var(--g-line);
}
.gel-roadmap__item:last-child { border-bottom: 1px solid var(--g-line); }
.gel-roadmap__n {
  grid-area: n;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent-text);
}
.gel-roadmap__copy { grid-area: copy; display: grid; gap: 0.45rem; }
.gel-roadmap__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 7.4vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.gel-roadmap__line { max-width: 34rem; margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--g-ivory-soft); }
.gel-roadmap__status {
  grid-area: status;
  justify-self: start;
  margin-top: 0.7rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--g-line-strong);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--g-ivory-soft);
}
.gel-roadmap__item:last-child .gel-roadmap__title { font-style: italic; color: var(--accent-text); }

.gel-media { display: grid; gap: 1.4rem; margin: 1rem 0 0; }
.gel-film__video { width: 100%; height: auto; background: var(--g-raised); }
.gel-photos { grid-template-columns: 1fr; }
.gel-photo { margin: 0; }
.gel-photo img { width: 100%; height: auto; }
.gel-people__list { padding: 0; list-style: none; }
.gel-person blockquote { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; }
.gel-person p { margin: 0; }
.gel-person .gel-person__who { margin-top: 0.6rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-ivory-soft); }

/* ---- onward links (story, field notes, entries) ------------------------------------- */
.gel-onward {
  display: grid;
  padding-top: clamp(2.5rem, 8vw, 4rem);
  padding-bottom: clamp(2.5rem, 8vw, 4rem);
  border-top: 1px solid var(--g-line);
}
.gel-onward__item {
  display: grid;
  gap: 0.35rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--g-line);
  text-decoration: none;
  color: var(--g-ivory);
}
.gel-onward__item:first-child { border-top: 1px solid var(--g-line); }
.gel-onward__title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.12; }
.gel-onward__item:hover .gel-onward__title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.12em; }

/* ---- FIELD NOTES ----------------------------------------------------------------------------- */
.gel-note-lead {
  display: grid;
  gap: 1.75rem;
  padding-top: clamp(2.5rem, 8vw, 4rem);
  padding-bottom: clamp(3rem, 9vw, 5rem);
  border-top: 1px solid var(--g-line);
}
.gel-note-lead__figure { margin: 0; }
.gel-note-lead__figure img { width: 100%; height: auto; }
.gel-note-lead__copy { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.gel-notes__list { margin: 0; padding: 0; list-style: none; }
.gel-notes { padding-bottom: 3rem; }

.gel-entry { padding-top: clamp(1.5rem, 5vw, 3rem); padding-bottom: clamp(3rem, 9vw, 5rem); }
.gel-entry__head { display: grid; gap: 1rem; max-width: 50rem; }
.gel-crumbs ol { display: flex; flex-wrap: wrap; gap: 0 0.55rem; margin: 0; padding: 0; list-style: none; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-ivory-dim); }
.gel-crumbs li { display: inline-flex; align-items: center; min-height: 2.75rem; }
.gel-crumbs li + li::before { content: "/"; margin-right: 0.55rem; color: var(--g-line-strong); }
.gel-crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--g-ivory-soft); text-decoration: none; }
.gel-crumbs a:hover { color: var(--g-ivory); }
.gel-display--entry { max-width: 14ch; }
.gel-entry__summary { max-width: 36rem; margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.35rem; line-height: 1.35; color: var(--g-ivory-soft); }
.gel-entry__body { display: grid; gap: 1.2rem; margin-top: 2.5rem; }
.gel-entry__body > p { max-width: 36rem; margin: 0; font-size: 1.08rem; line-height: 1.7; color: var(--g-ivory); }
.gel-entry__figure { margin: 1.2rem 0; }
.gel-entry__figure--wide { margin-left: calc(-1 * var(--g-gutter)); margin-right: calc(-1 * var(--g-gutter-r)); }
.gel-entry__figure--wide .gel-caption { margin-left: var(--g-gutter); margin-right: var(--g-gutter-r); }
.gel-entry__figure--wide img { width: 100%; height: auto; }
.gel-entry__row-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.gel-entry__row-item { background: var(--g-black); }
.gel-entry__row-item img { width: 100%; height: auto; }
.gel-entry__row-label {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g-ivory-soft);
}
.gel-entry__noted { max-width: 36rem; margin-top: 2.5rem; padding: 1.5rem 0 0; border-top: 1px solid var(--accent); }
.gel-entry__noted ul { display: grid; gap: 0.6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.gel-entry__noted li { position: relative; padding-left: 1.4rem; font-size: 1rem; line-height: 1.5; }
.gel-entry__noted li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.8rem; height: 1px; background: var(--accent); }

/* ---- the gel footer band --------------------------------------------------------------- */
.gel-end { border-top: 1px solid var(--g-line); background: var(--g-black); }
.gel-end__inner {
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  padding-top: clamp(3.5rem, 10vw, 6rem);
  padding-bottom: clamp(2.5rem, 8vw, 4rem);
}
.gel-end__title {
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 9.2vw, 2.8rem);
  line-height: 1.02;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.gel-end__body { margin: 0; max-width: 30rem; color: var(--g-ivory-soft); }
.gel-end__nav { width: 100%; margin-top: 1.5rem; padding-top: 0.6rem; border-top: 1px solid var(--g-line); }
.gel-end__nav ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.gel-end__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--g-ivory-soft);
}
.gel-end__nav a:hover { color: var(--g-ivory); }
.gel-body .shell-footer { margin-top: 0; background: var(--g-raised); border-top-color: var(--g-line); }

/* Narrow phones: the link row has to fit (360 px is the most common Indian
   Android width). Below 460 px INDEX goes -- the shared footer carries the full site
   index -- and the row tightens. The fade on its right edge says "scrolls"
   if a long label ever pushes it over. */
@media (max-width: 459px) {
  .gel-mast__index { display: none; }
  .gel-mast__nav ul { gap: 0.85rem; }
  .gel-mast__nav a { letter-spacing: 0.07em; }
  .gel-mast__store { padding-left: 0.85rem; }
}
@media (max-width: 959px) {
  .gel-mast__nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent);
  }
}

/* The narrowest phones keep both hero buttons side by side, smaller. */
@media (max-width: 379px) {
  .gel-actions .gel-btn { padding: 0 0.7rem; font-size: 0.68rem; letter-spacing: 0.06em; }
  .gel-mast { column-gap: 0.6rem; }
  .gel-mast__home { width: 5.4rem; }
  .gel-mast__label { padding-left: 0.6rem; font-size: 0.62rem; letter-spacing: 0.14em; }
  .gel-mast__join { padding: 0 0.8rem; font-size: 0.64rem; letter-spacing: 0.1em; }
  .gel-occasion-tab { padding: 0.4rem 0.5rem; }
  .gel-occasion-tab__label { font-size: 0.74rem; }
}

/* ============================================================================
   WIDER SCREENS
   ========================================================================== */
@media (min-width: 640px) {
  .gel-body { --g-gutter: max(2rem, var(--safe-left, 0px)); --g-gutter-r: max(2rem, var(--safe-right, 0px)); }
  .gel-actions { display: flex; flex-wrap: wrap; width: auto; }
  .gel-actions .gel-btn { padding: 0 1.6rem; }
  .gel-flavour__art { grid-template-columns: 40fr 60fr; }
  .gel-faq__list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; border-top: 0; }
  .gel-faq__item { border-top: 1px solid var(--g-line); border-bottom: 0; }
  .gel-entry__row-list { gap: 0.75rem; }
  .gel-occasion__facts { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .gel-howto__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
  .gel-howto__steps li { grid-template-columns: 1fr; gap: 0.4rem; border-bottom: 0; border-top: 1px solid var(--g-line); }
  .gel-occasion-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* From tablet width the hero is two columns: the copy on the left, the tiger
   large on the right, the three pouches standing in front of it, sized to the
   first screen. The tiger is capped at 560 px: its 960 px master would
   otherwise be upscaled past twice on a retina screen. */
@media (min-width: 700px) {
  .gel-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "copy figure";
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4rem);
    min-height: calc(100svh - var(--shell-masthead-h));
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
  .gel-hero__copy { grid-area: copy; margin-top: 0; }
  .gel-hero__figure { grid-area: figure; margin: 0; justify-self: end; width: min(100%, calc(100svh - 11rem), 35rem); }
  .gel-hero__art { height: auto; aspect-ratio: 1; }
  .gel-hero__art img {
    object-position: 60% 40%;
    -webkit-mask-image: radial-gradient(farthest-side at 62% 42%, #000 56%, transparent 100%);
    mask-image: radial-gradient(farthest-side at 62% 42%, #000 56%, transparent 100%);
  }
  .gel-hero__pouches { left: -14%; bottom: -0.5rem; width: 58%; }
  .gel-hero__title { font-size: clamp(3.6rem, 8.4vw, 5rem); }
}

/* Tablet (700-959 px): the flavour and the occasion go side by side, so a
   tap shows its name and its first lines next to the art instead of a
   screen below it. The selectors stay a row above. */
@media (min-width: 700px) and (max-width: 959px) {
  .gel-flavour { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .gel-flavour__name { font-size: clamp(2.8rem, 6.2vw, 3.4rem); }
  .gel-occasion { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .gel-occasion__facts { grid-template-columns: 1fr; }
}

@media (min-width: 960px) {
  .gel-body {
    --g-gutter: max(clamp(2.5rem, 5vw, 5rem), var(--safe-left, 0px));
    --g-gutter-r: max(clamp(2.5rem, 5vw, 5rem), var(--safe-right, 0px));
    --shell-masthead-h: 4.75rem;
  }

  /* One row: wordmark and product, the parts, Join the launch list. */
  .gel-mast {
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "home label nav join";
    column-gap: 1.4rem;
    padding-top: max(0.9rem, var(--safe-top, 0px));
    padding-bottom: 0.9rem;
  }
  .gel-mast__home { width: 7.4rem; }
  .gel-mast__nav { margin: 0; overflow: visible; justify-self: end; }
  .gel-mast__nav ul { gap: 1.8rem; padding: 0 0.6rem 0 0; }
  .gel-mast__nav a { letter-spacing: 0.16em; }
  .gel-mast__store { padding-left: 1.8rem; }
  .gel-mast__join { padding: 0 1.2rem; }
  .gel-mast__join { column-gap: 0.4em; }
  .gel-mast__more { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

  .gel-display { font-size: clamp(4.2rem, 6.3vw, 6.9rem); line-height: 0.93; }
  .gel-h2 { font-size: clamp(2.9rem, 4.2vw, 4.4rem); }

  .gel-hero__title { margin-top: 1rem; font-size: clamp(5.2rem, 8.6vw, 8.6rem); line-height: 0.86; }
  .gel-hero__lead { margin-top: 1.4rem; font-size: clamp(1.7rem, 2.3vw, 2.15rem); }
  .gel-hero__sub { font-size: 1.12rem; margin-top: 0.6rem; }
  .gel-actions { margin-top: 1.8rem; }
  .gel-hero__soon { margin-top: 1.2rem; }

  .gel-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; max-width: none; align-items: end; }
  .gel-head .gel-eyebrow { grid-column: 1 / -1; }
  .gel-head__intro { justify-self: end; }

  /* Pick your wild: a big title with the three names, the tabs, then the
     diptych left and the words right. */
  .gel-flavours__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; align-items: end; }
  .gel-flavours__head .gel-eyebrow { grid-column: 1 / -1; }
  .gel-flavours__title { grid-row: 2 / span 2; font-size: clamp(4.6rem, 8vw, 8rem); }
  .gel-flavours__names { font-size: 1.9rem; }
  .gel-tabs { max-width: 40rem; margin-top: 2.75rem; }
  .gel-tab { font-size: 0.74rem; letter-spacing: 0.12em; min-height: 3.5rem; }
  .gel-actions .gel-btn { font-size: 0.8rem; letter-spacing: 0.14em; }
  .gel-flavour { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .gel-flavour__media { max-width: 34rem; }
  .gel-flavour__name { font-size: clamp(4rem, 6vw, 6.2rem); }
  .gel-flavour__line { font-size: 1.85rem; }

  /* Training: the selector down the left like a log, the occasion right. */
  .gel-training__head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); column-gap: 3rem; max-width: none; align-items: end; }
  .gel-training__head .gel-eyebrow { grid-column: 1 / -1; }
  .gel-training__head .gel-h2 { font-size: clamp(3.6rem, 6vw, 6rem); max-width: 10ch; }
  .gel-training__head .gel-head__intro { justify-self: end; }
  .gel-training__body { display: grid; grid-template-columns: 16rem minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); margin-top: 3.5rem; align-items: start; }
  .gel-training:not(.is-tabbed) .gel-training__body { grid-template-columns: 1fr; }
  .gel-occasion-tabs { grid-template-columns: 1fr; gap: 0; margin: 0; border-top: 1px solid var(--g-line); }
  .gel-occasion-tab {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 1rem;
    min-height: 3.6rem;
    padding: 0.6rem 0 0.6rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--g-line);
    box-shadow: inset 2px 0 0 transparent;
    transition: color 160ms var(--g-ease), box-shadow 200ms var(--g-ease), background-color 160ms var(--g-ease);
  }
  .gel-occasion-tab__label { font-family: var(--font-display); font-size: 1.55rem; font-weight: 400; letter-spacing: -0.01em; }
  .gel-occasion-tab[aria-selected="true"] { border-bottom-color: var(--g-line); background: rgba(243, 234, 216, 0.04); box-shadow: inset 2px 0 0 var(--accent); }
  .gel-occasion-tab:hover { border-color: var(--g-line); }
  .gel-occasion { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .gel-occasion__title { font-size: clamp(2.8rem, 3.6vw, 3.8rem); }
  .gel-occasion--profile .gel-occasion__title,
  .gel-occasion--stations .gel-occasion__title { font-size: clamp(2rem, 2.6vw, 2.7rem); }
  .gel-occasion__facts { grid-template-columns: 1fr; }
  .gel-howto { grid-template-columns: 16rem minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5rem); margin-top: 4rem; }
  .gel-howto__note { grid-column: 2; }

  .gel-why__item { grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr); align-items: baseline; padding: 1.8rem 0 2rem; }
  .gel-why__text { font-size: 2rem; }

  .gel-founder { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(3rem, 7vw, 7rem); align-items: center; }
  .gel-founder__portrait { width: 100%; max-width: 27rem; }
  .gel-founder__title { font-size: clamp(3.4rem, 5.4vw, 5.6rem); }
  .gel-founder__excerpt p { font-size: 1.85rem; line-height: 1.3; }

  .gel-notes-teaser { grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr); column-gap: 3rem; align-items: start; }
  .gel-notes-teaser__head { grid-row: 1 / span 2; }
  .gel-notes-teaser .gel-link { grid-column: 2; }

  .gel-join { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .gel-join__title { font-size: clamp(4rem, 6.4vw, 6.4rem); }
  .gel-join__figure { margin-top: 1.6rem; }
  .gel-join__intro { grid-row: 1 / span 2; }
  .gel-partners { grid-column: 2; align-self: end; }

  .gel-faq { display: grid; grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr); column-gap: 3rem; align-items: start; }
  .gel-faq__list { margin-top: 0; }

  .gel-note-row { grid-template-columns: 11rem 1fr; column-gap: 2rem; align-items: baseline; }
  .gel-note-row__title { font-size: 2.4rem; }
  .gel-note-row__summary { grid-column: 2; }

  .gel-page-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: center; column-gap: 4rem; min-height: min(calc(100svh - var(--shell-masthead-h)), 52rem); }
  .gel-page-hero--notes { grid-template-columns: 1fr; min-height: 0; padding-top: 5rem; padding-bottom: 4rem; }
  .gel-page-hero--notes .gel-display { max-width: 13ch; font-size: clamp(4.6rem, 7.4vw, 7.6rem); }
  .gel-page-hero--story .gel-display { max-width: 10ch; font-size: clamp(4.6rem, 7vw, 7.4rem); }
  .gel-story__portrait { justify-self: center; width: min(100%, 26rem); }

  .gel-chapter { grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr); column-gap: 3rem; }
  .gel-chapter__body > p { font-size: 1.55rem; }
  .gel-chapter__body > p:nth-of-type(1) { font-size: 2.1rem; }
  .gel-roadmap { grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr); column-gap: 3rem; align-items: start; }
  .gel-roadmap__item { grid-template-columns: 5.5rem minmax(0, 1fr) auto; grid-template-areas: "n copy status"; column-gap: 1.5rem; align-items: baseline; padding: 1.8rem 0 2rem; }
  .gel-roadmap__n { font-size: 3.6rem; }
  .gel-roadmap__title { font-size: clamp(2.2rem, 3.2vw, 3.1rem); }
  .gel-roadmap__status { margin-top: 0; }

  .gel-onward { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); column-gap: 2.5rem; }
  .gel-onward__item { border-top: 1px solid var(--g-line); }

  .gel-note-lead { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: 4rem; align-items: center; }
  .gel-entry { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; column-gap: 4rem; }
  .gel-entry__head,
  .gel-entry__body { grid-column: 1; }
  .gel-entry__noted { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--shell-masthead-h) + 2rem); margin-top: 3.5rem; }
  .gel-entry__figure { max-width: 62.5rem; }
  .gel-entry__figure--wide { margin-left: 0; margin-right: 0; }
  .gel-entry__figure--wide .gel-caption { margin-left: 0; }
  .gel-entry__body > p { font-size: 1.15rem; }

  .gel-end__inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; align-items: end; }
  .gel-end__inner > * { grid-column: 1; }
  .gel-end__inner > .gel-btn { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
  .gel-end__nav { grid-column: 1 / -1; }
  .gel-end__title { max-width: 22ch; font-size: clamp(2.8rem, 4vw, 4rem); }
}

/* ---- reduced motion: no reveal, no drawing, no transition, final state at once -- */
/* Wide screens: the 35rem cap left the tiger small and pushed to the far
   edge, with the headline doing all the work. From 1600 px it grows to
   44rem and sits centred in its column, closer to the copy. (The tiger
   master is 960 px; at 44rem a 1x screen shows it at native size or less.) */
@media (min-width: 1600px) {
  .gel-hero__figure { justify-self: center; width: min(100%, calc(100svh - 11rem), 44rem); }
}

@media (prefers-reduced-motion: reduce) {
  .gel-hero__art,
  .gel-hero__art img,
  .gel-hero__pouch,
  .gel-flavour__art.is-cut { animation: none; }
  .gel-occasion__art.is-drawing [pathLength],
  .gel-occasion__art.is-drawing .gel-art__dot,
  .gel-occasion__art.is-drawing .gel-art__trail { animation: none; }
  .gel-btn,
  .gel-link span,
  .gel-tab,
  .gel-occasion-tab,
  .gel-mast__nav a,
  .gel-mast__join,
  .gel-choice,
  .gel-form input { transition: none; }
}