/* story.css (owner: builder C): rituals, about, journal.
   Tokens only (the product neon arrives as --c). Easing from base.css: settle, recede, draw. */

/* ================================================================ rituals */
.rituals .crumbs { padding-top: 26px; }
.rh-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 30px 60px; align-items: end; padding: 54px 0 38px; border-bottom: 1px solid var(--line); }
.rh-head .h1 { font-size: clamp(54px, 6.4vw, 104px); line-height: .96; letter-spacing: -.028em; }
.rh-head .lede { color: var(--text); opacity: .86; }
.rh-note { margin: 14px 0 0; font-size: 15px; color: var(--text-2); }
.rh-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.rh-card { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color .4s; }
.rh-card-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: var(--world-filter); transition: transform 1.2s var(--settle); }
.rh-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--bg-deep) 88%, transparent), color-mix(in srgb, var(--bg-deep) 20%, transparent) 62%, transparent); }
.rh-card:hover { border-color: var(--line-2); }
.rh-card:hover .rh-card-img { transform: scale(1.04); }
.rh-card-txt { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 20px 22px 18px; }
.rh-card-txt b { font: 300 36px/1 var(--display); letter-spacing: -.01em; }
.rh-card-txt small { font-size: 14px; color: var(--text-2); }
.rh-card-txt small .mono { color: var(--text); }
.rh-packs { display: flex; align-items: flex-end; gap: 8px; height: 48px; margin-top: 8px; }
.rh-packs > .pk { height: calc((.3 + .7 * var(--pk-rel)) * 48px); }   /* a mini lineup: true order, gently compressed */
.rh-packs i { flex: none; width: 10px; height: 1px; margin-bottom: 12px; background: var(--line-2); }

/* Round 6: each routine is a scene with the routine standing in it, as one composed group on a photographed plinth of
   wet black stone (.rt-slab: site/parts/rituals.mjs RITUAL_SLABS, lit for its scene), the packs close together at their
   real relative heights. The lineup is sized in pack units: --u is the tallest pack's height, as large as the row
   allows (--lh at most). The template writes --n (packs), --sw (the packs' widths summed, in u), --sg (the gaps between
   them summed, in u; each pack's own gap is its --g) and the slab's measured geometry: --sl-ar (its aspect) and
   --sl-back/front/stand/bottom (fractions of its height: the top face's back edge, its front edge, the line the packs
   stand on, the foot of the stone). No count is hard-coded: any lineup fits. */
@property --u { syntax: '<length>'; inherits: true; initial-value: 320px; }
.rt { --lh: clamp(330px, 24vw, 430px);                     /* the tallest pack, at most */
  --tc: clamp(290px, 22vw, 350px); --cg: clamp(30px, 4vw, 72px);   /* the title column and the gap beside it */
  --gk: 1;                                                  /* the gaps' scale (tighter on phones) */
  --pad: max(.26, var(--sw) * .07);                         /* the stone beyond the outer packs, each side, in u */
  --stone: calc(var(--sw) + var(--sg, 0) * var(--gk) + 2 * var(--pad));   /* the slab's width, in u */
  --sl-hu: calc(var(--stone) / var(--sl-ar, 6));            /* its height, in u */
  position: relative; padding-top: clamp(50px, 5vw, 80px); scroll-margin-top: 20px; }
.rt-stage { position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(560px, 42vw, 680px); }
.rt-plate { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.rt-plate-img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 40%; filter: var(--world-filter); }
.rt-motion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 40%; filter: var(--world-filter); pointer-events: none; }
/* dark behind the title; the top meets the section above, and the foot of the scene falls away into the page: no line */
.rt-plate::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 46%, transparent) 34%, transparent 62%),
  linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 60%, transparent) 14%, transparent 34%, transparent 58%, color-mix(in srgb, var(--bg) 62%, transparent) 82%, var(--bg)); }
.rt-grid { position: relative; display: grid; grid-template-columns: var(--tc) minmax(0, 1fr); gap: 0 var(--cg); }
.rt-stage > .rt-grid { container-type: inline-size; }
/* --u: the lineup column is the row less the title column, and the whole slab fits in it */
.rt-title, .rt-show { --u: min(var(--lh), calc((100cqw - var(--tc) - var(--cg)) / var(--stone))); }
/* the title's foot sits level with the slab's front edge */
.rt-title { position: relative; z-index: 3; align-self: end; padding-bottom: calc((var(--sl-bottom, 1) - var(--sl-front, .45)) * var(--sl-hu) * var(--u)); }
.rt-count { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.rt-count .mono { color: var(--accent); letter-spacing: 0; margin-right: 6px; }
.rt-h { margin: 16px 0 0; font: 300 clamp(56px, 5.4vw, 92px)/.9 var(--display); letter-spacing: -.03em; white-space: nowrap; overflow-wrap: normal; } /* one word, never broken */
.rt-intro { margin: 18px 0 0; font-size: 17.5px; line-height: 1.55; color: var(--text); opacity: .88; max-width: 30ch; }

/* one button that carries the total, and a quiet way down to the steps */
.rt-buy { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; margin-top: 32px; }
.rt-cta { height: 54px; padding: 0 28px 0 30px; gap: 16px; font-size: 12.5px; letter-spacing: .14em; color: var(--text);
  background: color-mix(in srgb, var(--text) 13%, transparent); border: 1px solid color-mix(in srgb, var(--text) 50%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgb(var(--glint) / .16), 0 16px 36px -18px rgb(var(--shade) / .8); }
.rt-cta i { flex: none; width: 1px; height: 15px; background: currentColor; opacity: .35; }
.rt-cta .mono { font-size: 14.5px; letter-spacing: 0; text-transform: none; }
.rt-cta:hover { background: color-mix(in srgb, var(--text) 20%, transparent); border-color: color-mix(in srgb, var(--text) 75%, transparent); }
.rt-cta:active { transform: translateY(1px); }
[data-theme="v21-violet-hour"] .rt-cta { background: rgb(var(--key) / .2); border-color: color-mix(in srgb, color-mix(in srgb, var(--accent) 62%, var(--text)) 50%, transparent);
  box-shadow: inset 0 1px 0 rgb(var(--glint) / .07), 0 16px 36px -18px rgb(var(--shade) / .8); }
[data-theme="v21-violet-hour"] .rt-cta:hover { background: rgb(var(--key) / .32); border-color: color-mix(in srgb, var(--accent) 40%, var(--text)); }
.rt-more { display: inline-flex; align-items: center; min-height: 24px; font: 600 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--text); text-shadow: 0 0 2px rgb(var(--bg-rgb) / .9), 0 0 12px rgb(var(--bg-rgb) / .85); transition: color .3s; }
.rt-more::after { content: '\2193'; display: inline-block; margin-left: 9px; transition: transform .4s var(--settle); }
.rt-more:hover { color: var(--accent); }
.rt-more:hover::after { transform: translateY(3px); }

/* the lineup: one group, centred on its slab */
.rt-show { position: relative; z-index: 2; align-self: end; display: flex; justify-content: center; min-width: 0; }
.rt-set { position: relative; --refl: calc((var(--sl-front, .45) - var(--sl-stand, .27)) * var(--sl-hu) * var(--u));
  margin-bottom: calc((var(--sl-bottom, 1) - var(--sl-stand, .27)) * var(--sl-hu) * var(--u)); }
.rt-ledge { position: relative; z-index: 2; display: flex; align-items: flex-end; margin: 0; padding: 0; list-style: none; }
.rt-ledge li { display: flex; align-items: flex-end; }
.rt-ledge li + li { margin-left: calc(var(--g, .075) * var(--gk) * var(--u)); }   /* set optically by the template */
/* each pack at its real relative height (.pk, site/parts/packs.mjs); a lineup of one stands at its solo height */
.lp-pk { height: calc(var(--pk-rel) * var(--u)); }
.rt.is-solo .lp-pk { height: calc(var(--pk-solo) * var(--u)); }
/* the slab: its stand line on the packs' bases. Its front face darkens toward the foot in the photo itself (light
   falling off, so the rock keeps its detail); only the last few percent fade, to lose the foot in the dark */
.rt-slab { position: absolute; z-index: 0; left: 50%; top: 100%; width: calc(var(--stone) * var(--u)); max-width: none; height: auto;
  translate: -50% calc(var(--sl-stand) * -100%); filter: var(--world-filter); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%), radial-gradient(76% 122% at 50% 0%, #000 84%, transparent 105%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 80%, transparent 99%), radial-gradient(76% 122% at 50% 0%, #000 84%, transparent 105%); mask-composite: intersect; }
/* the scene's light: pooled on the wet top face around the group, and on each pack's lit edge (cool rose dawn from the
   right, the daylight shaft from the left, the warm night lamp from the right) */
.rt { --scene: 214 206 236; --rim: 236 232 246; --rim-o: .2; --rim-dir: 90deg; --shx: -48%; }
.rt-am, .rt-pm { --shx: -53%; } .rt-day { --shx: -44%; }   /* shadows fall away from the light */
.rt-am { --scene: 206 190 240; --rim: 236 200 226; --rim-o: .24; }
.rt-day { --scene: 228 234 226; --rim: 238 242 234; --rim-o: .2; --rim-dir: 270deg; }
.rt-pm { --scene: 255 186 112; --rim: 255 172 92; --rim-o: .36; }
.rt-am { --pk-grade: url(#rt-grade-am); } .rt-day { --pk-grade: url(#rt-grade-day); } .rt-pm { --pk-grade: url(#rt-grade-pm); }   /* the SVG filters in rituals.mjs */
.rt-grades { position: absolute; width: 0; height: 0; overflow: hidden; }
.lp-pack { filter: var(--pk-grade, none); }
.rt-pool { position: absolute; z-index: 1; left: 50%; top: 100%; width: calc(var(--stone) * var(--u) * .86); height: calc(var(--sl-hu) * var(--u) * .7); translate: -50% -58%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgb(var(--scene) / .12), rgb(var(--scene) / .035) 60%, transparent); }
.lp-rim { position: absolute; z-index: 1; display: block; pointer-events: none; mix-blend-mode: screen;
  width: calc(100% / (1 - var(--pk-ml, 0) - var(--pk-mr, 0))); height: calc(100% / var(--pk-hc, 1));
  left: calc(-100% * var(--pk-ml, 0) / (1 - var(--pk-ml, 0) - var(--pk-mr, 0))); top: calc(-100% * var(--pk-mt, 0) / var(--pk-hc, 1));
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(var(--rim-dir), transparent 50%, rgb(var(--rim) / calc(var(--rim-o) * .35)) 74%, rgb(var(--rim) / var(--rim-o)) 93%, rgb(var(--rim) / calc(var(--rim-o) * .6))); }
/* where each base meets the stone: a tight, dark line of contact, inside a small soft shadow (no broad halo) */
.rt-ledge .pk-shadow { width: max(116%, calc(42% / var(--pk-car, .5))); aspect-ratio: 7; translate: var(--shx) 50%;
  background: radial-gradient(closest-side, rgb(var(--shade) / .8), rgb(var(--shade) / .38) 50%, transparent) 50% 50% / 80% 56% no-repeat,
    radial-gradient(closest-side, rgb(var(--shade) / .34), rgb(var(--shade) / .1) 60%, transparent); }
.lp-pk::after { content: ''; position: absolute; z-index: 0; left: 50%; bottom: 0; width: 92%; aspect-ratio: 22; translate: calc(-50% + (var(--shx) + 48%) * .5) 34%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--shade)), rgb(var(--shade) / .78) 48%, transparent); }
/* the wet top face mirrors each pack faintly, and only as far as the stone's front edge */
.rt-ledge .pk-refl { opacity: .4; filter: var(--pk-grade,) blur(1.1px) brightness(.85) saturate(.85);
  -webkit-mask-image: linear-gradient(180deg, transparent calc((1 - var(--pk-mb, 0)) * 100% - var(--refl)), rgb(0 0 0 / .85) calc((1 - var(--pk-mb, 0)) * 100%));
  mask-image: linear-gradient(180deg, transparent calc((1 - var(--pk-mb, 0)) * 100% - var(--refl)), rgb(0 0 0 / .85) calc((1 - var(--pk-mb, 0)) * 100%)); }
/* no slab (a missing file): a dark wet floor, a soft pool of the scene's light under the group, no line */
.rt:not(.has-slab) .rt-set { margin-bottom: 70px; }
.rt:not(.has-slab) .rt-pool { width: calc(100% + 2 * var(--pad) * var(--u)); height: 90px; translate: -50% -50%; background: radial-gradient(closest-side, rgb(var(--scene) / .12), transparent); }
.rt:not(.has-slab) .rt-set::before { content: ''; position: absolute; left: 50%; top: 100%; width: calc(100% + 2 * var(--pad) * var(--u)); height: 120px; translate: -50% -40%; background: radial-gradient(closest-side, rgb(var(--shade) / .55), transparent); }
/* the packs step onto the stone in order (learn.js adds .rt-anim only when it can also reveal them) */
.rt-anim .rt-ledge li { transition: opacity .8s var(--settle), transform 1s var(--settle); }
.rt-anim .rt:not(.is-in) .rt-ledge li { opacity: 0; transform: translateY(14px); }
.rt-anim .rt.is-in .rt-ledge li:nth-child(2) { transition-delay: .08s; } .rt-anim .rt.is-in .rt-ledge li:nth-child(3) { transition-delay: .16s; } .rt-anim .rt.is-in .rt-ledge li:nth-child(4) { transition-delay: .24s; } .rt-anim .rt.is-in .rt-ledge li:nth-child(n+5) { transition-delay: .32s; }

/* the steps: one calm row under the scene. Each step's parts share rows across the steps (subgrid), so the names, the
   notes, the "why"s and the buttons line up; a part a step lacks leaves its row empty. The list is the size container
   (--col is one step's width): containment on a step itself would switch its subgrid off. */
.rt-under { padding-top: clamp(34px, 3.4vw, 50px); }
.rt-aside { padding-top: 2px; }
.rt-aside p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--text-2) 82%, var(--text)); max-width: 32ch; }
.rt-aside .arrow-link { display: inline; line-height: 1.6; }   /* a long link wraps with its arrow after the last word */
.rt-aside .arrow-link::after { display: inline; position: relative; left: 0; margin-left: 10px; transition: left .4s var(--settle); }   /* inline, so it stays glued to the last word */
.rt-aside .arrow-link:hover::after { transform: none; left: 5px; }
.rt-steps { --cgap: clamp(22px, 2.2vw, 36px); --col: calc((100cqi - (var(--n) - 1) * var(--cgap)) / var(--n));
  container-type: inline-size; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(7, auto); gap: 0 var(--cgap); margin: 0; padding: 0; list-style: none; }
.rs { position: relative; display: grid; grid-row: span 7; grid-template-rows: subgrid; align-content: start; min-width: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.rs-k { grid-row: 1; display: flex; align-items: baseline; gap: 10px; margin: 0; font: 500 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.rs-n { font-size: 12px; letter-spacing: 0; color: color-mix(in oklab, var(--c) 80%, #fff); }
.rs-name { grid-row: 2; margin: 12px 0 0; font-weight: 400; font-family: var(--display); font-size: min(26px, calc(var(--col) * .124)); line-height: 1.12; letter-spacing: -.01em; }
.rs-name a { text-decoration: none; background: linear-gradient(var(--c), var(--c)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--settle); }
.rs-name a:hover { background-size: 100% 1px; }
.rs-size { grid-row: 3; margin: 5px 0 0; }
.rs-size .size { font-size: 12px; color: color-mix(in srgb, var(--text-3) 75%, var(--text)); white-space: nowrap; }
.rs-how { grid-row: 4; margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--text); opacity: .92; }
.rs-why { grid-row: 5; margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: color-mix(in srgb, var(--text-2) 82%, var(--text)); }
.rs-why span { display: block; margin-bottom: 4px; font: 500 10px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--text-3) 78%, var(--text)); }
.rs-row { grid-row: 6; margin: 0; padding-top: 18px; }
/* a step's own button, the routine button's quieter sibling: "+ Add · $18" */
.rs-add { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 13px 0 11px; border: 1px solid color-mix(in srgb, var(--text) 30%, transparent); border-radius: 2px;
  background: color-mix(in srgb, var(--text) 5%, transparent); font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text); white-space: nowrap;
  transition: border-color .3s, background .3s, color .3s; }
.rs-add::before { content: '+'; margin: -1px -3px 0 0; font: 300 15px/1 var(--sans); letter-spacing: 0; }
.rs-add i { flex: none; width: 1px; height: 12px; background: currentColor; opacity: .3; }
.rs-add .mono { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
@media (pointer: coarse), (max-width: 860px) { .rs-add { height: 44px; padding: 0 16px 0 14px; } }   /* a full touch target on phones and tablets */
.rs-add:hover { border-color: color-mix(in srgb, var(--text) 62%, transparent); background: color-mix(in srgb, var(--text) 10%, transparent); }
.rs-add.added { background: var(--text); color: var(--bg); border-color: var(--text); }
/* the alternative to a step (Night: the mask instead of the scrub), quiet, under its step */
.rs-alt { grid-row: 7; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'k' 'h' 'why' 'btn'; margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.rs-alt-k { grid-area: k; margin: 0; font: 500 10.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.rs-alt-h { grid-area: h; margin: 8px 0 0; font: 400 19px/1.15 var(--display); }
.rs-alt-h a { text-decoration: none; }
.rs-alt-why { grid-area: why; margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, var(--text-2) 82%, var(--text)); }
.rs-alt .rs-add { grid-area: btn; justify-self: start; margin-top: 14px; }

/* a routine of one product (Day): it stands larger on a short block, its step centred under it */
.rt.is-solo { --pad: .44; }
.rt.is-solo .rt-steps { grid-template-columns: minmax(0, 560px); justify-content: center; }
.rt.is-solo .rs { justify-items: center; text-align: center; border-top: 0; padding-top: 0; }
.rt.is-solo .rs-k { justify-content: center; }
.rt.is-solo .rs-name { font-size: clamp(30px, 2.6vw, 38px); }
.rt.is-solo .rs-how, .rt.is-solo .rs-why { max-width: 46ch; }
/* a long routine (Night stands five): a narrower title column gives the lineup and the steps more of the row */
.rt.is-long { --tc: clamp(300px, 21vw, 330px); }
.rt-next { margin-top: 48px; }
.rt-next a { font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--text-2); }
.rt-next a::after { content: ' \2193'; }
.rt-next a:hover { color: var(--text); }
.rt-help { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 60px; align-items: center; margin-top: clamp(90px, 9vw, 140px); padding-top: 40px; border-top: 1px solid var(--line); }
.rt-help p { margin: 12px 0 0; max-width: 60ch; color: var(--text-2); }
.rt-help-links { display: flex; flex-wrap: wrap; gap: 18px 30px; }

/* ================================================================ about */
.about .crumbs { padding-top: 0; margin-bottom: clamp(50px, 7vw, 110px); }
.ab-hero { position: relative; padding: 26px 0 0; background: radial-gradient(50% 70% at 78% 30%, rgb(var(--key) / .08), transparent 70%); }
.ab-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.ab-hero-copy { padding-top: 26px; }
.ab-hero-copy .eyebrow { margin-top: 20px; }
.ab-h1 { margin: 22px 0 0; font: 300 clamp(56px, 6vw, 96px)/.96 var(--display); letter-spacing: -.028em; }
.ab-lede { margin-top: 26px; color: var(--text); opacity: .86; max-width: 44ch; }
.ab-facts { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); margin: 40px 0 0; border-top: 1px solid var(--line-2); max-width: 560px; }
.ab-facts div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.ab-facts dt { font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.ab-facts dd { margin: 8px 0 0; font-size: 18px; }
.ab-facts dd.mono { font-size: 24px; }
.ab-collage { position: relative; padding: 26px 0 90px 16%; }
.ab-collage figure { margin: 0; overflow: hidden; border-radius: var(--radius); }
.ab-c1 { box-shadow: 0 50px 90px color-mix(in srgb, var(--bg-deep) 80%, transparent); }
.ab-c1 img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* the place (#20): Henderson at night from the hills, a landscape inset over the foot of the bench photo */
.ab-c2 { position: absolute; left: 0; bottom: 0; width: 62%; border: 6px solid var(--bg); border-radius: calc(var(--radius) + 6px) !important; box-shadow: 0 30px 60px color-mix(in srgb, var(--bg-deep) 80%, transparent); }
.ab-c2 img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 62%; }
.ab-body { padding-top: clamp(90px, 9vw, 140px); }
.ab-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; padding-bottom: clamp(90px, 9vw, 140px); }
.ab-row.is-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.ab-row.is-flip .ab-fig { order: 2; }
.ab-fig { margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.ab-fig img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.6s var(--settle); }
.ab-row:hover .ab-fig img { transform: scale(1.02); }
.ab-copy h2, .ab-std-copy h2, .ab-values h2 { margin: 0; font: 300 clamp(36px, 3.4vw, 52px)/1.04 var(--display); letter-spacing: -.012em; }
.ab-text { margin-top: 22px; }
.ab-text p { margin: 0 0 1em; font-size: 17.5px; line-height: 1.72; color: var(--text); opacity: .9; max-width: 50ch; }
.ab-copy .arrow-link { margin-top: 10px; }
.ab-more { margin: 18px 0 0; }
/* his story (#21, #22): a tall image that stays in view beside the text on wide screens; the opening paragraph set larger */
.ab-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 100px); align-items: start; padding-bottom: clamp(90px, 9vw, 140px); }
.ab-story-fig { position: sticky; top: calc(var(--hdr-h) + 28px); }
.ab-story-fig img { aspect-ratio: 4 / 5; object-position: 50% 45%; }
.ab-story-copy { padding-top: clamp(0px, 2vw, 30px); }
.ab-story .ab-text p { max-width: 54ch; }
.ab-story .ab-text .ab-story-open { max-width: 40ch; margin-bottom: 1.1em; font: 300 clamp(21px, 1.75vw, 26px)/1.5 var(--display); letter-spacing: -.005em; opacity: 1; }
.ab-standard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: start; padding: clamp(60px, 7vw, 90px) clamp(30px, 4vw, 60px); margin-bottom: clamp(90px, 9vw, 140px); background-color: var(--bg-2); background-image: var(--atmos-band); border: 1px solid var(--line); border-radius: var(--radius); }
.ab-std-copy .btn { margin-top: 14px; }
.ab-std-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; margin: 0; padding: 0; list-style: none; }
.ab-std-list li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font: 400 20px/1.2 var(--display); }
.ab-std-list li::before { content: ''; flex: none; width: 18px; height: 1px; background: var(--moss); box-shadow: 0 0 8px var(--moss); }
.ab-std-list li.is-named::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.ab-values { padding-bottom: clamp(90px, 9vw, 140px); }
.ab-values ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 30px; margin: 34px 0 0; padding: 0; list-style: none; }
.ab-values li { padding-top: 22px; border-top: 1px solid var(--line-2); }
.ab-values h3 { margin: 0; font: 400 24px/1.15 var(--display); }
.ab-values p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.ab-end { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-end-card { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
.ab-end-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--settle); }
.ab-end-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--bg-deep) 85%, transparent), transparent 70%); }
.ab-end-card:hover img { transform: scale(1.04); }
.ab-end-card > span:not(.ab-end-packs) { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 20px 22px; }
.ab-end-card small { font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.ab-end-card b { font: 300 28px/1.1 var(--display); }

/* Round 6: a few packs stand on the rock in the Shop card (owner: "about 4 or 5"; the first five products, so the line can grow).
   The rock's top runs 60-70% down the shop plate; the packs stand at 66%, true relative heights, above the card's bottom fade. */
.ab-end-packs { position: absolute; left: 7%; right: 7%; top: 0; height: 66%; z-index: 0; display: flex; justify-content: center; align-items: flex-end; gap: 5%;
  pointer-events: none; transform-origin: 50% 75.75%; transition: transform 1.2s var(--settle); }
.ab-end-packs .pk { height: calc(var(--pk-rel) * 62%); }
.ab-end-card:hover .ab-end-packs { transform: scale(1.04); }
.ab-end-card > span:last-child { z-index: 1; }

/* ================================================================ journal */
.journal .crumbs, .article .crumbs { padding-top: 26px; }
.j-head-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 30px; align-items: end; padding: 50px 0 40px; margin-bottom: 44px; border-bottom: 1px solid var(--line); }
.j-meta { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13.5px; letter-spacing: .04em; color: var(--text-2); }
.j-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }
.j-lead { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); align-items: center; }
.j-lead-media, .j-card-media { display: block; overflow: hidden; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.j-lead-media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.4s var(--settle); }
.j-card-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.4s var(--settle); }
.j-lead:hover .j-lead-media img, .j-card:hover .j-card-media img { transform: scale(1.03); }
.j-lead-h { margin: 18px 0 0; font: 300 clamp(40px, 3.8vw, 60px)/1.02 var(--display); letter-spacing: -.015em; }
.j-lead-h a, .j-card-h a { text-decoration: none; }
.j-lead-h a:hover, .j-card-h a:hover { color: var(--accent); }
.j-dek { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 46ch; }
.j-prods { display: flex; align-items: flex-end; gap: 10px; height: 44px; margin: 22px 0 22px; }
.j-prods span { display: flex; align-items: flex-end; height: 100%; }
.j-prods img { max-height: 44px; width: auto; filter: drop-shadow(0 3px 4px rgb(var(--shade) / .55)); }
.j-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 30px; margin-top: clamp(60px, 7vw, 100px); padding-top: 50px; border-top: 1px solid var(--line); }
.j-card .j-meta { margin-top: 20px; }
.j-card-h { margin: 12px 0 0; font: 300 clamp(30px, 2.6vw, 40px)/1.06 var(--display); letter-spacing: -.01em; }

/* article */
.art-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 40; height: 2px; pointer-events: none; }
.art-progress i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 10px var(--accent); transform: scaleX(0); transform-origin: left; }
.art-head-in { max-width: 920px; padding: 54px 0 40px; }
.art-h1 { margin: 18px 0 0; font: 300 clamp(52px, 5.8vw, 92px)/.98 var(--display); letter-spacing: -.026em; }
.art-dek { margin: 24px 0 0; font: 300 clamp(21px, 1.8vw, 26px)/1.45 var(--display); color: var(--text); opacity: .82; max-width: 44ch; }
.art-cover { margin: 0 auto; }
.art-cover img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.art-grid { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 720px); justify-content: center; gap: clamp(40px, 6vw, 100px); padding-top: clamp(50px, 6vw, 80px); }
.art-side { position: sticky; top: 96px; align-self: start; }
.art-side-h { margin: 0 0 12px; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.art-plist { margin: 0 0 28px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.art-plist li { border-bottom: 1px solid var(--line); }
.art-plist a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; text-decoration: none; }
.art-pimg { display: grid; place-items: end center; height: 46px; }
.art-pimg img { max-height: 46px; width: auto; filter: drop-shadow(0 3px 4px rgb(var(--shade) / .55)); }
.art-plist b { display: block; font: 400 18px/1.15 var(--display); }
.art-plist small { font-size: 13px; color: var(--text-2); }
.art-plist a:hover b { color: var(--c); }
.art-ilist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.art-ilist a { padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 2px; font-size: 13.5px; text-decoration: none; color: var(--text); transition: border-color .3s; }
.art-ilist a:hover { border-color: var(--text); }
.art-body { font-size: 18px; line-height: 1.78; }
.art-body > p:first-child { font-size: 20px; line-height: 1.7; color: var(--text); }
.art-body h2 { margin: 1.9em 0 .55em; font: 300 34px/1.12 var(--display); letter-spacing: -.01em; }
.art-body ul, .art-body ol { padding-left: 0; list-style: none; }
.art-body li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line); margin: 0; }
.art-body li::before { content: ''; position: absolute; left: 0; top: 1.3em; width: 12px; height: 1px; background: var(--accent); }
.art-body blockquote.pull { margin: 2em 0; padding: 26px 0 26px 30px; }
.art-body .pull p { font-size: clamp(28px, 2.6vw, 38px); }
.art-more, .art-ings, .art-next { padding-top: clamp(90px, 9vw, 130px); }
.art-cards { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 300px)); gap: 22px; }
.art-ing-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.art-ing { display: block; text-decoration: none; }
.art-ing .por { border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.art-ing span { display: grid; gap: 4px; padding-top: 10px; }
.art-ing b { font: 400 16px/1.2 var(--display); }
.art-ing small { font-size: 10.5px; color: var(--text-2); overflow-wrap: anywhere; }
.art-ing:hover b { color: var(--accent); }
.art-next .j-grid { margin-top: 26px; padding-top: 0; border-top: 0; }

/* ================================================================ small screens */
@media (max-width: 1100px) {
  .ab-values ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .art-ing-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .rh-head { grid-template-columns: 1fr; padding-top: 34px; }
  .rh-cards { grid-template-columns: 1fr; }
  .rh-card { aspect-ratio: 16 / 9; }
  .rt { --lh: 240px; --gk: .6; --pad: .1; }
  .rt.is-solo { --pad: .5; }
  .rt-stage { min-height: 0; }
  /* the title sits over the top of the scene on phones: a scrim from the top keeps it legible over bright ferns */
  .rt-plate::after { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 72%, transparent) 16%, color-mix(in srgb, var(--bg) 52%, transparent) 40%, transparent 58%, transparent 74%, color-mix(in srgb, var(--bg) 62%, transparent) 90%, var(--bg)); }
  .rt-grid, .rt.is-long .rt-grid { grid-template-columns: 1fr; }
  /* phones: the title above the lineup; the lineup and its slab take the column's width */
  .rt-title, .rt-show { --u: min(var(--lh), calc(100cqw / var(--stone))); }
  .rt-title { padding: 70px 0 34px; }
  .rt-cta { height: 50px; padding: 0 22px 0 24px; gap: 14px; }
  .rt-h { font-size: 64px; }
  .rt-under { padding-top: 30px; }
  .rt-aside { order: 2; margin-top: 34px; }
  .rt-steps { grid-template-columns: 1fr; grid-template-rows: none; gap: 24px; }
  .rs { padding-top: 14px; }
  .rs-row { padding-top: 14px; }
  .rs { grid-row: auto; display: flex; flex-direction: column; }
  .rs-name { font-size: 26px; }
  .rs-why { margin-top: 8px; }
  .rt.is-solo .rs { align-items: flex-start; text-align: left; }
  .rt.is-solo .rs-k { justify-content: flex-start; }
  .rt-help { grid-template-columns: 1fr; }
  .ab-hero-in, .ab-row, .ab-row.is-flip, .ab-standard, .ab-story { grid-template-columns: 1fr; }
  .ab-row.is-flip .ab-fig { order: 0; }
  .ab-story-fig { position: static; }
  .ab-story-fig img { aspect-ratio: 4 / 3; }
  .ab-collage { padding: 0 0 70px 14%; }
  .ab-c2 { width: 66%; }
  .ab-facts { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
  .ab-facts div { padding-right: 10px; }
  .ab-facts dd { font-size: 16px; }
  .ab-std-list { grid-template-columns: 1fr; }
  .ab-values ul { grid-template-columns: 1fr; }
  .ab-end { grid-template-columns: 1fr; }
  .j-head-in, .j-lead { grid-template-columns: 1fr; }
  .j-grid { grid-template-columns: 1fr; }
  .art-grid { grid-template-columns: 1fr; }
  .art-side { position: static; order: 2; }
  .art-cover img { aspect-ratio: 16 / 10; }
  .art-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-ing-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}