/* Glow RN Studio — "The Glow Edition"
   One story told in light: the opening is a dark room where the word glows (B),
   dawn warms it into a magazine (A), a loud coral insert interrupts the issue (C),
   and the back page returns to the dark and the light. Type, colour and motion only. */

@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/bodoni-moda.woff2') format('woff2'); }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('../fonts/bodoni-moda-italic.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/inter-tight.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../fonts/bricolage-grotesque.woff2') format('woff2'); }

:root {
  --night: #070505; --night-2: #120c0a;
  --paper: #F2EBE1; --paper-2: #EAE1D4;
  --ink: #1F0E10; --ink-2: rgba(31, 14, 16, .72); --ink-3: rgba(31, 14, 16, .6); --rule: rgba(31, 14, 16, .85); --hair: rgba(31, 14, 16, .2);
  --red: #9E1631;            /* cochinilla: cochineal crimson */
  --cream: #EFE6DA; --cream-2: rgba(239, 230, 218, .7);
  --gold: #F4C27A; --gold-grad: linear-gradient(100deg, #FFE2B0 0%, #F4B866 48%, #E58856 100%);
  --coral: #FF7A59; --deep: #2A0A1F; --butter: #FFD66B; --blush: #FFC4D0;
  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pop: 'Bricolage Grotesque', var(--sans);
  --ease: cubic-bezier(.2, .8, .1, 1);
  --g: clamp(18px, 3.4vw, 56px);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
main { overflow-x: clip; }           /* contains the page turns, so phones never widen */
body { font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--red); color: var(--paper); }
/* Andean stepped border (escalonado), drawn as a hairline */
.andes { height: 12px; margin: 14px 0 0; opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 11h6V7h6V3h6V1h6v2h6v4h6v4h12' fill='none' stroke='%239E1631' stroke-width='1'/%3E%3C/svg%3E") repeat-x left center / 48px 12px; }
.andes-light { margin-top: 34px; opacity: .55; filter: saturate(0) brightness(2.2); }
.colophon-note { margin-top: 16px; max-width: 64ch; font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; color: var(--cream-2); }
.colophon-note span:first-child { font-family: var(--sans); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-right: 10px; }
.colophon-note em { color: var(--cream); }
.seal b.inti { color: var(--red); }
.seal b.inti svg { position: static; width: 46px; height: 46px; transform: rotate(calc(var(--rot, 0deg) * -2)); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.wrap { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: var(--g); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 400; background: var(--ink); color: var(--paper); padding: 10px 16px; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.nw { white-space: nowrap; }
.dash { font-family: var(--sans); font-weight: 300; font-style: normal; }
.fig { font-family: var(--sans); font-style: normal; font-weight: 300; font-size: .92em; vertical-align: baseline; }
sup.reg { font-family: var(--sans); font-size: .42em; font-weight: 500; font-style: normal; line-height: 0; vertical-align: .95em; letter-spacing: 0; }

/* paper grain over the magazine */
.cover, .menu, .method, .profile, .qa { position: relative; }
.cover::after, .menu::after, .method::after, .profile::after, .qa::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0 0.06 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------ the bar */
.bar { position: fixed; inset: 0 0 auto; z-index: 100; display: flex; align-items: center; gap: 28px; height: 68px; padding-inline: var(--g); color: var(--cream); transition: color .4s, background-color .4s, border-color .4s; border-bottom: 1px solid transparent; }
.bar.is-scrolled { -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.bar.is-scrolled[data-tone="dark"] { background: rgba(7, 5, 5, .62); border-bottom-color: rgba(239, 230, 218, .12); }
.bar[data-tone="paper"] { color: var(--ink); }
.bar.is-scrolled[data-tone="paper"] { background: rgba(242, 235, 225, .82); border-bottom-color: var(--hair); }
.bar[data-tone="coral"] { color: var(--deep); }
.bar.is-scrolled[data-tone="coral"] { background: rgba(247, 168, 200, .86); border-bottom-color: rgba(42, 10, 31, .2); }
.bar-mark { font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: .05em; text-decoration: none; white-space: nowrap; font-variation-settings: 'opsz' 24; }
.bar-mark span { font-family: var(--sans); font-weight: 500; font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; margin-left: 8px; opacity: .78; }
.bar-links { display: flex; gap: 28px; margin-left: auto; }
.bar-links a { font-size: .86rem; letter-spacing: .04em; text-decoration: none; opacity: .86; position: relative; }
.bar-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.bar-links a:hover { opacity: 1; }
.bar-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.bar-tel-m { display: none; }
.bar-act { display: flex; align-items: center; gap: 20px; }
.bar-tel { font-size: .82rem; letter-spacing: .04em; text-decoration: none; opacity: .86; }
.bar-book { display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border-radius: 999px; font-size: .88rem; font-weight: 500; text-decoration: none; border: 1px solid currentColor; transition: background-color .3s, color .3s; }
.bar[data-tone="dark"] .bar-book { background: var(--gold-grad); color: #1A0F0A; border-color: transparent; }
.bar[data-tone="paper"] .bar-book { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bar[data-tone="coral"] .bar-book { background: var(--deep); color: var(--cream); border-color: var(--deep); }
.bar-menu { display: none; width: 44px; height: 44px; place-items: center; }
.bar-menu span[aria-hidden] { position: relative; display: block; width: 20px; height: 1.5px; background: currentColor; transform: translateY(-3px); transition: transform .35s var(--ease); }
.bar-menu span[aria-hidden]::before { content: ""; position: absolute; left: 0; top: 6px; width: 20px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.bar-menu[aria-expanded="true"] span[aria-hidden] { transform: rotate(45deg); }
.bar-menu[aria-expanded="true"] span[aria-hidden]::before { transform: translateY(-6px) rotate(-90deg); }

/* ------------------------------------------------------------------ I. the light */
.light { position: relative; height: 210svh; background: var(--night); color: var(--cream); }
.light-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; padding: 88px var(--g) clamp(24px, 5svh, 48px); isolation: isolate; }
.light-room { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(40vmax 40vmax at var(--vx, 50%) var(--vy, 45%), var(--g-room, rgba(244, 172, 96, .17)), var(--g-room2, rgba(220, 110, 70, .05)) 45%, transparent 70%),
    radial-gradient(120vmax 80vmax at 50% 125%, rgba(130, 44, 30, calc(.18 + var(--warm, 0) * .5)), transparent 62%); }
.lit-word { text-align: center; line-height: 1; }
.lw { position: relative; display: inline-block; font-family: var(--display); font-style: italic; font-weight: 800; font-variation-settings: 'opsz' 72; font-size: min(30vw, 44svh); line-height: .86; letter-spacing: -.04em; padding: 0 .08em; }
.lw > span { display: block; }
.lw-lit, .lw-halo { position: absolute; inset: 0; padding: 0 .08em; }
.lw-base { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(180deg, #2c211c 0%, #15100e 60%, #1f1613 100%); -webkit-text-stroke: 1px rgba(255, 214, 160, .1); }
.lw-lit { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: radial-gradient(var(--lr, 22vmax) var(--lr, 22vmax) at calc(var(--lx, 50%) + .5em) calc(var(--ly, 50%) + .25em), var(--g-core, #FFF4DE) 0%, var(--g-main, #F6C27A) 14%, var(--g-deep, #E0794A) 32%, var(--g-shade, rgba(120, 40, 24, .55)) 52%, transparent 72%); }
.lw-halo { color: transparent; -webkit-background-clip: text; background-clip: text; filter: blur(26px); opacity: .85;
  background-image: radial-gradient(calc(var(--lr, 22vmax) * .8) calc(var(--lr, 22vmax) * .8) at calc(var(--lx, 50%) + .5em) calc(var(--ly, 50%) + .25em), var(--g-halo, rgba(255, 196, 120, .9)), var(--g-halo2, rgba(224, 121, 74, .4)) 40%, transparent 70%); }
.rays { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; z-index: 1; }
.lit-word { position: relative; z-index: 0; }
.light-copy { position: relative; z-index: 2; text-align: center; margin-top: clamp(14px, 3svh, 30px); }
.light-line { font-family: var(--display); font-variation-settings: 'opsz' 40; font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.1; letter-spacing: -.01em; }
.light-line em { color: var(--gold); }
.light-sub { margin: 12px auto 0; max-width: 40ch; color: var(--cream-2); font-size: 1rem; }
.light-ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: 26px; }
.btn-gold { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--gold-grad); color: #1A0F0A; font-weight: 500; letter-spacing: .02em; text-decoration: none; box-shadow: 0 0 44px -8px rgba(244, 184, 102, .6); transition: box-shadow .4s, transform .4s var(--ease); }
.btn-gold:hover { box-shadow: 0 0 64px -6px rgba(244, 184, 102, .9); transform: translateY(-2px); }
.btn-line { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(239, 230, 218, .32); color: var(--cream); text-decoration: none; transition: border-color .3s, background-color .3s; }
.btn-line:hover { border-color: var(--gold); background: rgba(244, 194, 122, .08); }
.light-price { display: inline-flex; align-items: baseline; gap: 10px; color: var(--cream-2); text-decoration: none; font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; }
.light-price b { font-family: var(--display); font-weight: 800; font-size: 2rem; letter-spacing: -.02em; color: transparent; background: linear-gradient(180deg, #FFF0D4, #F4C27A 55%, #D97A4E); -webkit-background-clip: text; background-clip: text; }
.light-price:hover { color: var(--cream); }
.light-price sup.reg { font-size: .9em; vertical-align: .32em; margin-left: 1px; }
.light-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(239, 230, 218, .5); white-space: nowrap; }
.cue-m { display: none; }
.tilt { position: absolute; left: 50%; top: 86px; transform: translateX(-50%); z-index: 3; min-height: 36px; padding: 0 16px; border-radius: 999px; font-size: .74rem; letter-spacing: .08em; color: var(--cream); background: rgba(239, 230, 218, .08); border: 1px solid rgba(244, 194, 122, .35); white-space: nowrap; }
.tilt span { color: var(--gold); margin-right: 4px; }
.tilt[hidden] { display: none; }
@media (hover: none), (pointer: coarse) { .cue-d { display: none; } .cue-m { display: inline; } }
.motion { position: absolute; right: var(--g); bottom: 18px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(239, 230, 218, .28); color: var(--cream); }
.motion svg { width: 14px; height: 14px; fill: currentColor; display: none; }
.motion[aria-pressed="false"] .i-pause, .motion[aria-pressed="true"] .i-play { display: block; }

/* ------------------------------------------------------------------ dawn */
.dawn-unused { height: 60svh; background: linear-gradient(180deg, var(--night) 0%, #1e0d0b 22%, #5a2318 42%, #b9573a 58%, #e9a27a 74%, #f2d2b8 88%, var(--paper) 100%); }

/* ------------------------------------------------------------------ II. the cover
   No gap after the light: the cover rides up over the bottom of the hero, its top
   edge fading from clear to paper so the glow melts into the page. */
.cover { z-index: 2; margin-top: -34svh; padding-top: 34svh; padding-bottom: clamp(60px, 8vw, 110px);
  background: linear-gradient(180deg, rgba(242, 235, 225, 0) 0, rgba(242, 235, 225, .55) 16svh, var(--paper) 30svh); }
.cover::after { top: 30svh; }
.cover { pointer-events: none; }          /* the clear fade must not block the hero buttons beneath it */
.cover > .wrap { pointer-events: auto; }
.mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; padding-top: 10px; }
.mast-meta { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; }
.mast-meta b { font-weight: 600; }
.mast-meta.r { text-align: right; }
.mast-word { font-family: var(--display); font-weight: 900; font-variation-settings: 'opsz' 28; font-size: clamp(4.6rem, 14vw, 14.5rem); line-height: .9; letter-spacing: -.045em; text-align: center; overflow: hidden; padding: .06em .1em 0; }
.mast-word span { display: inline-block; transform: translateY(105%); transition: transform 1.3s var(--ease); }
.mast-word.is-in span { transform: none; }
.mast-word span:nth-child(2) { transition-delay: .07s; } .mast-word span:nth-child(3) { transition-delay: .14s; } .mast-word span:nth-child(4) { transition-delay: .21s; }
.mast-rules { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); height: 7px; margin-top: 12px; }
.strap { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.cover-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: end; padding: clamp(50px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); }
.kicker { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.cover-h { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 8.4vw, 9.4rem); line-height: .88; letter-spacing: -.035em; }
.cover-h em { color: var(--red); }
.ln { display: block; overflow: hidden; padding-bottom: .04em; }
.ln > span { display: block; transform: translateY(102%); transition: transform 1.25s var(--ease); }
.ln + .ln > span { transition-delay: .12s; }
.is-in .ln > span, .ln.is-in > span { transform: none; }
.dek p { font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.55; padding-top: 22px; border-top: 1px solid var(--rule); }
.dek b { font-weight: 600; }
.drop { float: left; font-family: var(--display); font-weight: 800; font-size: 5.4em; line-height: .78; color: var(--red); margin: .04em .1em 0 -.02em; font-variation-settings: 'opsz' 28; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.facts > div { padding: 22px 22px 24px 0; border-right: 1px solid var(--hair); margin-right: 22px; }
.facts > div:last-child { border-right: 0; margin-right: 0; }
.facts dt { font-family: var(--display); font-weight: 800; font-variation-settings: 'opsz' 14; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -.02em; }
.facts > div:nth-child(2) dt { color: var(--red); }
.facts dd { margin-top: 10px; font-size: .92rem; color: var(--ink-2); max-width: 26ch; }

/* ------------------------------------------------------------------ section heads */
.sec { display: grid; gap: 14px; }
.sec-no { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--red); }
.sec-h { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 7vw, 7.4rem); line-height: .9; letter-spacing: -.03em; }
.sec-h-it { display: block; font-style: italic; font-size: .42em; line-height: 1.1; letter-spacing: -.01em; color: var(--ink-2); margin-top: .3em; }
.sec-dek { max-width: 54ch; color: var(--ink-2); font-size: 1.04rem; }
.sec-dek a { color: var(--ink); text-underline-offset: 3px; }

/* ------------------------------------------------------------------ III. the menu */
.menu { padding: clamp(70px, 9vw, 130px) 0; background: var(--paper-2); }
.card::before { content: ""; position: absolute; left: clamp(22px, 3.4vw, 54px); right: clamp(22px, 3.4vw, 54px); bottom: 10px; height: 12px; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 11h6V7h6V3h6V1h6v2h6v4h6v4h12' fill='none' stroke='%239E1631' stroke-width='1'/%3E%3C/svg%3E") repeat-x left center / 48px 12px; }
.card { position: relative; margin-top: clamp(40px, 6vw, 80px); border: 1px solid var(--ink); padding: clamp(22px, 3.4vw, 54px); background: rgba(255, 255, 255, .26); }
.card-h { font-family: var(--serif); font-style: italic; font-size: clamp(2.2rem, 3.4vw, 3rem); text-align: center; line-height: 1; }
.card-sub { text-align: center; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
.seal { position: absolute; top: -66px; right: clamp(16px, 4vw, 60px); width: 140px; height: 140px; display: grid; place-items: center; color: var(--red); z-index: 2; }
.seal > svg { position: absolute; inset: 0; transform: rotate(var(--rot, 0deg)); }
.seal text { font-family: var(--sans); font-size: 10.4px; font-weight: 600; letter-spacing: 3.1px; fill: currentColor; }
.seal b { font-family: var(--display); font-weight: 900; font-size: 2.2rem; letter-spacing: -.03em; background: var(--paper-2); border-radius: 50%; width: 78px; height: 78px; display: grid; place-items: center; border: 1px solid var(--red); }

.dish { border-bottom: 1px dotted rgba(31, 14, 16, .36); interpolate-size: allow-keywords; }
.dish summary { display: grid; grid-template-columns: 3.2em minmax(0, auto) 1fr auto 28px; align-items: baseline; gap: 14px; padding: 22px 0; cursor: pointer; list-style: none; transition: padding .45s var(--ease), color .3s; }
.dish summary::-webkit-details-marker { display: none; }
.dish summary:hover { color: var(--red); padding-left: 8px; }
.dn { font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--red); font-variation-settings: 'opsz' 14; }
.dt { font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.05; }
.dt small { display: block; margin-top: 4px; font-family: var(--sans); font-size: .82rem; letter-spacing: .02em; color: var(--ink-3); }
.dd { border-bottom: 1px dotted rgba(31, 14, 16, .4); transform: translateY(-.35em); min-width: 20px; }
.dp { font-family: var(--display); font-weight: 700; font-variation-settings: 'opsz' 14; font-size: clamp(1.4rem, 2.4vw, 2.2rem); white-space: nowrap; letter-spacing: -.01em; }
.dp small { font-family: var(--sans); font-weight: 400; font-size: .48em; letter-spacing: .04em; color: var(--ink-3); margin: 0 .2em; }
.dp.hero { color: var(--red); font-size: clamp(2.2rem, 4vw, 3.6rem); }
.dx { position: relative; width: 20px; height: 20px; align-self: center; }
.dx::before, .dx::after { content: ""; position: absolute; left: 2px; right: 2px; top: 9px; height: 1.5px; background: currentColor; transition: transform .45s var(--ease); }
.dx::after { transform: rotate(90deg); }
.dish[open] .dx::after { transform: rotate(0deg); }
.dish::details-content { block-size: 0; overflow: clip; transition: block-size .55s var(--ease), content-visibility .55s allow-discrete; }
.dish[open]::details-content { block-size: auto; }
.dish-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px 50px; padding: 0 0 30px calc(3.2em + 14px); }
.dish-body > p:first-child { font-size: 1.04rem; line-height: 1.6; }
.rows li { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.rows li:first-child { border-top: 1px solid var(--hair); }
.rows small { display: block; font-size: .82rem; color: var(--ink-3); }
.rows b { font-weight: 500; white-space: nowrap; }
.note { grid-column: 2; font-size: .88rem; color: var(--ink-2); }
.dish-book { grid-column: 2; justify-self: start; font-weight: 500; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--ink); transition: color .3s, border-color .3s; }
.dish-book:hover { color: var(--red); border-color: var(--red); }
.card-foot { margin-top: 26px; font-family: var(--serif); font-style: italic; font-size: 1.25rem; text-align: center; color: var(--ink-2); }
.card-book { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; padding: 20px 26px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 1.05rem; font-weight: 500; transition: background-color .3s; }
.card-book:hover { background: var(--red); }
.card-book span:last-child { transition: transform .4s var(--ease); }
.card-book:hover span:last-child { transform: translateX(8px); }

/* ------------------------------------------------------------------ IV. the insert */
.insert { position: relative; overflow: hidden; background: var(--coral); color: var(--deep); padding: clamp(110px, 12vw, 170px) 0 0; isolation: isolate; }
.insert::before { content: ""; position: absolute; z-index: -1; width: 90vmax; height: 90vmax; left: 50%; top: 40%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #FFB27A 0%, rgba(255, 140, 100, .55) 35%, transparent 65%); }
.insert-tape { position: absolute; left: -5%; right: -5%; top: 34px; transform: rotate(-2.4deg); background: var(--deep); color: var(--cream); padding: 12px 0; overflow: hidden; white-space: nowrap; font-family: var(--pop); font-weight: 600; font-size: 1.05rem; }
.insert-tape span { display: inline-block; transform: translate3d(var(--tx, 0), 0, 0); will-change: transform; }
.insert-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 70px; align-items: center; position: relative; z-index: 1; }
.insert-h { font-family: var(--pop); font-weight: 800; font-size: clamp(3.2rem, 7.6vw, 8rem); line-height: .86; letter-spacing: -.045em; }
.insert-h em { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.02em; }
.calc { background: var(--cream); border: 2px solid var(--deep); border-radius: 26px; padding: clamp(22px, 3vw, 38px); box-shadow: 0 12px 0 -2px var(--deep); }
.calc-label { display: block; font-family: var(--pop); font-weight: 700; font-size: 1rem; }
.calc-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; margin-top: 18px; }
.calc-units { font-family: var(--pop); font-weight: 600; font-size: 1rem; white-space: nowrap; }
.calc-units b { font-size: 1.5rem; }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
.calc input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--deep) var(--fill, 9%), rgba(42, 10, 31, .16) var(--fill, 9%)); }
.calc input[type=range]::-moz-range-track { height: 10px; border-radius: 99px; background: rgba(42, 10, 31, .16); }
.calc input[type=range]::-moz-range-progress { height: 10px; border-radius: 99px; background: var(--deep); }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -12px; border-radius: 50%; background: var(--butter); border: 2px solid var(--deep); box-shadow: 0 4px 0 -1px var(--deep); }
.calc input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--butter); border: 2px solid var(--deep); }
.calc input[type=range]:focus-visible { outline: 2px solid var(--deep); outline-offset: 4px; border-radius: 99px; }
.calc-total { margin-top: 10px; font-family: var(--display); font-weight: 900; font-variation-settings: 'opsz' 18; font-size: clamp(4rem, 9vw, 7rem); line-height: 1; letter-spacing: -.04em; }
.calc-note { margin-top: 8px; font-size: .92rem; color: rgba(42, 10, 31, .78); }
.stickers { position: relative; grid-column: 1; height: 150px; }
.stk { position: absolute; display: grid; place-items: center; text-align: center; font-family: var(--pop); font-weight: 800; line-height: .95; border: 2px solid var(--deep); box-shadow: 0 8px 0 -2px var(--deep); transition: transform .45s cubic-bezier(.2, 1.4, .3, 1); }
.stk:hover { transform: rotate(0deg) scale(1.06) !important; }
.s1 { left: 0; top: 0; width: 150px; height: 150px; border-radius: 50%; background: var(--butter); transform: rotate(-12deg); font-size: .92rem; }
.s1 b { display: block; font-size: 2.8em; letter-spacing: -.05em; }
.s1 small { font-weight: 600; font-size: .78em; }
.s2 { left: 170px; top: 30px; padding: 12px 18px; border-radius: 14px; background: var(--cream); transform: rotate(5deg); font-size: 1rem; font-weight: 700; }
.s3 { left: 200px; top: 98px; padding: 9px 16px; border-radius: 99px; background: var(--blush); transform: rotate(-4deg); font-size: .92rem; font-weight: 700; }
.insert-book { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; border-radius: 999px; background: var(--deep); color: var(--cream); text-decoration: none; font-family: var(--pop); font-weight: 700; font-size: 1.1rem; box-shadow: 0 8px 0 -1px rgba(42, 10, 31, .45); transition: transform .2s, box-shadow .2s; }
.insert-book:hover { transform: translateY(3px); box-shadow: 0 5px 0 -1px rgba(42, 10, 31, .45); }
.insert-word { font-family: var(--pop); font-weight: 800; font-size: 36vw; line-height: .78; letter-spacing: -.045em; margin: clamp(30px, 4vw, 60px) -1.5vw -8.6vw; white-space: nowrap; user-select: none; }

/* ------------------------------------------------------------------ results */
.results { position: relative; padding: clamp(80px, 10vw, 140px) 0; }
.ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 34px); margin-top: clamp(36px, 5vw, 64px); }
.slider { border: 1px solid var(--ink); padding: 10px; background: rgba(255, 255, 255, .3); }
.slider.wide { grid-column: 1 / -1; }
.sl-frame { --pos: 50%; position: relative; overflow: hidden; background: var(--paper-2); user-select: none; -webkit-user-select: none; }
.sl-frame picture, .sl-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-after { clip-path: inset(0 0 0 var(--pos)); }
.sl-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--paper); box-shadow: 0 0 0 1px rgba(31, 14, 16, .25), 0 0 18px rgba(31, 14, 16, .35); pointer-events: none; }
.sl-knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--red); box-shadow: 0 6px 18px rgba(31, 14, 16, .35); transition: transform .3s var(--ease); }
.sl-knob svg { width: 22px; height: 22px; }
.sl-tag { position: absolute; top: 12px; padding: 5px 10px; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; background: rgba(31, 14, 16, .72); color: var(--paper); pointer-events: none; }
.sl-b { left: 12px; } .sl-a { right: 12px; background: var(--red); }
.sl-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; }
.sl-input::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100vh; }
.sl-input::-moz-range-thumb { width: 60px; height: 100vh; border: 0; background: transparent; }
.sl-frame:has(.sl-input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.sl-frame:has(.sl-input:active) .sl-knob { transform: scale(1.1); }
.slider figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 4px 2px; font-size: .82rem; color: var(--ink-2); }
.slider figcaption b { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.3rem; color: var(--ink); }
.results .ig { margin-top: clamp(28px, 4vw, 44px); }

/* ------------------------------------------------------------------ V. the method */
.method { padding: clamp(80px, 10vw, 150px) 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--ink); }
.steps li { padding: 28px clamp(18px, 2.4vw, 40px) 10px 0; border-right: 1px solid var(--hair); margin-right: clamp(18px, 2.4vw, 40px); }
.steps li:last-child { border-right: 0; margin-right: 0; }
.num { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(4.4rem, 8.4vw, 8.4rem); line-height: .9; color: var(--red); letter-spacing: -.02em; }
.steps h3 { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1; }
.steps p { margin-top: 12px; color: var(--ink-2); max-width: 32ch; }

/* ------------------------------------------------------------------ VI. the profile */
.profile { padding: clamp(80px, 10vw, 150px) 0; background: var(--paper-2); }
.profile-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.monogram { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; background: var(--red); color: var(--paper); display: grid; place-items: center; overflow: hidden; }
.monogram::before { content: ""; position: absolute; inset: 14px; border-radius: 999px 999px 0 0; border: 1px solid rgba(242, 235, 225, .45); }
.monogram span { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(8rem, 17vw, 17rem); line-height: 1; letter-spacing: -.05em; transform: translateY(-.04em); }
.monogram figcaption { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; }
.profile-h { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 7.6vw, 8rem); line-height: .88; letter-spacing: -.035em; }
.profile-h em { color: var(--red); }
.pull { margin-top: 28px; padding: 22px 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.2; }
.cols { columns: 2 260px; column-gap: 34px; margin-top: 26px; }
.cols p { break-inside: avoid; margin-bottom: 14px; color: var(--ink-2); }
.cols p:first-child::first-letter { font-family: var(--display); font-weight: 800; color: var(--red); float: left; font-size: 3.2em; line-height: .8; margin: .06em .08em 0 0; }
.filefacts { margin-top: 20px; border-top: 1px solid var(--ink); }
.filefacts li { display: flex; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-weight: 500; }
.filefacts span { width: 7em; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); padding-top: .25em; font-weight: 600; }

.portrait { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--ink); box-shadow: 0 50px 90px -60px rgba(80, 20, 20, .7); }
.portrait > picture img { width: 100%; height: 100%; object-fit: cover; }
.portrait::before { content: ""; position: absolute; inset: 14px; z-index: 1; border-radius: 999px 999px 0 0; border: 1px solid rgba(242, 235, 225, .5); pointer-events: none; }
.portrait > figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 60px 0 26px; text-align: center; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--paper); background: linear-gradient(0deg, rgba(31, 14, 16, .78), transparent); }
@media (max-width: 900px) { .portrait { width: min(100%, 420px); } }

.portrait { overflow: visible; }
.portrait > picture { position: absolute; inset: 0; border-radius: 999px 999px 0 0; overflow: hidden; }
.portrait > picture img { width: 100%; height: 100%; object-fit: cover; }
.studio-inset { position: absolute; z-index: 2; right: -9%; bottom: -8%; width: 40%; aspect-ratio: 4 / 5; border: 6px solid var(--paper-2); box-shadow: 0 30px 50px -30px rgba(31, 14, 16, .6); background: var(--paper-2); }
.studio-inset img { width: 100%; height: 100%; object-fit: cover; }
.studio-inset figcaption { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.signoff { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--red); }
.signoff span { font-style: normal; font-family: var(--sans); font-size: .8rem; letter-spacing: .1em; color: var(--ink-3); }
@media (max-width: 900px) {
  .ba { grid-template-columns: 1fr; }
  .studio-inset { right: -4%; width: 42%; }
  .profile-grid { row-gap: 70px; }
}

/* ------------------------------------------------------------------ voice */
.voice { padding: clamp(70px, 9vw, 120px) 0; text-align: center; }
.voice blockquote p { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.12; max-width: 24ch; margin: 0 auto; }
.voice blockquote em { color: var(--red); }
.voice footer { margin-top: 20px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }

/* ------------------------------------------------------------------ VII. Q&A */
.qa { padding: clamp(80px, 10vw, 150px) 0; }
.qa-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.qa-head { position: sticky; top: 100px; }
.ig { display: grid; gap: 4px; margin-top: 18px; padding: 20px 22px; border: 1px solid var(--ink); text-decoration: none; position: relative; transition: background-color .3s, color .3s; max-width: 360px; }
.ig span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.ig b { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 2rem; line-height: 1; }
.ig i { position: absolute; right: 18px; top: 16px; font-style: normal; font-size: 1.2rem; transition: transform .4s var(--ease); }
.ig:hover { background: var(--ink); color: var(--paper); }
.ig:hover span { color: var(--gold); }
.ig:hover i { transform: translate(3px, -3px); }
.qa-list { border-top: 1px solid var(--ink); }
.qa-list details { border-bottom: 1px solid var(--hair); interpolate-size: allow-keywords; }
.qa-list summary { position: relative; display: block; padding: 22px 46px 22px 2.4em; cursor: pointer; list-style: none; font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.2; text-wrap: balance; transition: color .3s; }
.qa-list summary::-webkit-details-marker { display: none; }
.qa-list summary:hover { color: var(--red); }
.qa-list summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-weight: 300; font-size: 1.6rem; transition: transform .45s var(--ease); }
.qa-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.q, .a { position: absolute; left: 0; font-family: var(--display); font-weight: 800; color: var(--red); font-variation-settings: 'opsz' 14; }
.q { top: 25px; font-size: 1.05rem; }
.qa-list details p { position: relative; padding: 0 46px 24px 2.4em; color: var(--ink-2); }
.a { top: 2px; font-size: 1.05rem; color: var(--ink); }
.qa-list details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.qa-list details[open]::details-content { block-size: auto; }

/* ------------------------------------------------------------------ VIII. the back page */
.back { position: relative; overflow: hidden; background: var(--night); color: var(--cream); padding: clamp(110px, 14vw, 200px) 0 clamp(70px, 9vw, 120px); isolation: isolate; }
.back::before { content: ""; position: absolute; inset: 0 0 auto; height: 30vh; background: linear-gradient(180deg, var(--paper), var(--night)); z-index: -1; opacity: 0; }
.back-room { position: absolute; inset: 0; z-index: -1; background: radial-gradient(44vmax 44vmax at var(--bx, 60%) var(--by, 40%), rgba(244, 172, 96, .14), transparent 70%); }
.back .sec-no { color: var(--gold); }
.back-h { margin-top: 18px; font-family: var(--display); font-weight: 500; font-size: clamp(3.4rem, 10vw, 10rem); line-height: .9; letter-spacing: -.03em; font-variation-settings: 'opsz' 60; }
.bh-plain { display: inline-block; }
.lw-sm { font-size: 1em; }
.back-lede { margin-top: 24px; max-width: 40ch; color: var(--cream-2); font-size: 1.08rem; }
.back-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.colophon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: clamp(60px, 8vw, 110px); padding-top: 26px; border-top: 1px solid rgba(239, 230, 218, .2); }
.colophon dt { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.colophon dd { margin-top: 10px; font-family: var(--serif); font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.25; }
.colophon a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.colophon a:hover { background-size: 100% 1px; }
.area { margin-top: 28px; color: var(--cream-2); font-size: .95rem; }

.end { background: #040303; color: rgba(239, 230, 218, .62); padding: 46px 0 34px; }
.end-nav { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.end-nav a { color: var(--cream); text-decoration: none; font-family: var(--serif); font-size: 1.25rem; }
.end-nav a:hover { color: var(--gold); }
.legal { margin-top: 26px; font-size: .8rem; max-width: 90ch; }
.credit { margin-top: 18px; font-size: .74rem; letter-spacing: .06em; }
.credit a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(239, 230, 218, .3); transition: color .3s, border-color .3s; }
.credit a:hover { color: var(--gold); border-color: var(--gold); }
.end-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(239, 230, 218, .12); font-size: .74rem; letter-spacing: .06em; }

.book-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(7, 5, 5, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid rgba(239, 230, 218, .12); transform: translateY(110%); transition: transform .5s var(--ease); }
.book-bar .btn-gold { flex: 1; }
.book-bar.is-on { transform: none; }

/* ------------------------------------------------------------------ page turns
   Each section slides into place from alternating sides as it enters, tied to
   the scroll itself, so scrolling back up slides it back out the way it came. */
@keyframes turn-l { from { transform: translateX(-16vw); clip-path: inset(0 100% 0 0); } to { transform: none; clip-path: inset(0 0 0 0); } }
@keyframes turn-r { from { transform: translateX(16vw); clip-path: inset(0 0 0 100%); } to { transform: none; clip-path: inset(0 0 0 0); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section:not(.cover) { animation: turn-l linear both; animation-timeline: view(); animation-range: entry 0% entry 70vh; will-change: transform, clip-path; }
    main > section:not(.cover):nth-of-type(even) { animation-name: turn-r; }
  }
}

/* ------------------------------------------------------------------ reveals */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1060px) { .bar-tel { display: none; } .bar-links { gap: 20px; } }
@media (max-width: 900px) {
  .bar { height: 60px; gap: 10px; }
  .bar-mark span { display: none; }
  .bar-menu { display: grid; }
  .bar-act { margin-left: auto; gap: 8px; }
  .bar-links { position: fixed; inset: 60px 0 auto; flex-direction: column; gap: 0; margin: 0; padding: 8px var(--g) 22px; background: rgba(242, 235, 225, .97); color: var(--ink); border-bottom: 1px solid var(--hair);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .4s var(--ease), visibility 0s .4s; }
  .bar.is-open .bar-links { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s var(--ease); }
  .bar.is-open { color: var(--ink); background: rgba(242, 235, 225, .97); }
  .bar-links a { padding: 15px 0; font-family: var(--serif); font-size: 1.6rem; border-bottom: 1px solid var(--hair); opacity: 1; }
  .bar-links a::after { display: none; }
  .bar-tel-m { display: block; }

  .lw { font-size: 31vw; }
  .light { height: 230svh; }
  .light-ctas { flex-direction: column; gap: 16px; }
  .light-ctas .btn-gold { width: min(100%, 340px); }
  .mast { grid-template-columns: 1fr; }
  .mast-meta { display: none; }
  .strap { justify-content: center; text-align: center; }
  .strap { flex-wrap: wrap; gap: 4px 14px; }
  .cover-grid { grid-template-columns: 1fr; padding-top: 44px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div { margin-right: 0; padding: 20px 16px 22px 0; border-right: 0; border-bottom: 1px solid var(--hair); }
  .facts > div:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--hair); margin-right: 16px; }
  .facts > div:nth-child(n+3) { border-bottom: 0; }
  .seal { width: 112px; height: 112px; top: -54px; }
  .seal b { width: 62px; height: 62px; font-size: 1.7rem; }
  .dish summary { grid-template-columns: 2.2em minmax(0, 1fr) auto 22px; }
  .dd { display: none; }
  .dish-body { grid-template-columns: 1fr; padding-left: 0; }
  .note, .dish-book { grid-column: 1; }
  .insert-in { grid-template-columns: 1fr; }
  .stickers { grid-row: 3; height: 170px; }
  .insert-book { grid-column: 1; justify-self: stretch; justify-content: center; }
  .insert-word { font-size: 44vw; margin-bottom: -10vw; }
  .steps { grid-template-columns: 1fr; }
  .steps li { margin-right: 0; padding-right: 0; border-right: 0; border-bottom: 1px solid var(--hair); padding-bottom: 26px; }
  .profile-grid { grid-template-columns: 1fr; }
  .monogram { width: min(100%, 420px); }
  .qa-grid { grid-template-columns: 1fr; }
  .qa-head { position: static; }
  .colophon { grid-template-columns: 1fr 1fr; }
  .book-bar { display: flex; }
  .end { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: 96px; }
}
@media (max-width: 420px) {
  body { font-size: 16px; }
  .colophon { grid-template-columns: 1fr; }
  .s2 { left: 140px; font-size: .86rem; }
  .s3 { left: 120px; top: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .light { height: auto; }
  .light-stage { position: relative; }
  .js .rv { opacity: 1; transform: none; }
  .ln > span, .mast-word span { transform: none; }
}

/* ==================================================================== her colours
   Light blue, yellow and pink: Angie's favourites, and the palette of an Andean
   weaving. The page goes night → day → sunset instead of black → black. */
:root { --sky: #9FD3F0; --sky-deep: #4E7FB8; --sun-y: #FFD45C; --pink: #F7A8C8; --pink-deep: #D9568E; --plum: #2A0A1F; --twilight: #1E2B55; }

/* woven trim: a blue thread, a pink stepped motif, a yellow thread */
.andes { height: 14px; opacity: 1; filter: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 1.5h48' stroke='%234E7FB8' stroke-width='1'/%3E%3Cpath d='M0 11h6V8h6V5h6V3.5h6V5h6v3h6v3h12' fill='none' stroke='%23D9568E' stroke-width='1.2'/%3E%3Cpath d='M0 12.8h48' stroke='%23E8B520' stroke-width='1'/%3E%3C/svg%3E") repeat-x left center / 48px 14px; }
.card::before { opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 1.5h48' stroke='%234E7FB8' stroke-width='1'/%3E%3Cpath d='M0 11h6V8h6V5h6V3.5h6V5h6v3h6v3h12' fill='none' stroke='%23D9568E' stroke-width='1.2'/%3E%3Cpath d='M0 12.8h48' stroke='%23E8B520' stroke-width='1'/%3E%3C/svg%3E") repeat-x left center / 48px 14px; }
.seal b.inti { color: #E8A410; box-shadow: 0 0 30px rgba(255, 212, 92, .55); }

/* the menu sits in morning sun */
.menu { background: radial-gradient(70vmax 50vmax at 92% 0%, rgba(255, 212, 92, .38), transparent 62%), radial-gradient(50vmax 40vmax at 0% 100%, rgba(247, 168, 200, .22), transparent 60%), #F6EEDC; }
.card { background: rgba(255, 253, 247, .55); }

/* the insert: her pink */
.insert { background: var(--pink); }
.insert::before { background: radial-gradient(circle, #FFE7A0 0%, rgba(255, 212, 92, .55) 32%, transparent 64%); }
.s2 { background: var(--sky); }
.s3 { background: #FFF6E6; }

/* results: light blue sky, a blush of pink */
.results { background: radial-gradient(60vmax 50vmax at 100% 0%, rgba(159, 211, 240, .55), transparent 62%), radial-gradient(50vmax 40vmax at 0% 100%, rgba(247, 168, 200, .3), transparent 60%), #F1F6F8; }
.slider { background: rgba(255, 255, 255, .55); }
.sl-a { background: var(--pink-deep); }

/* the sun sets behind her window */
.profile-grid { position: relative; }
.profile-grid > * { position: relative; z-index: 1; }
.profile-grid::before { content: ""; position: absolute; z-index: 0; pointer-events: none; left: -6%; top: -14%; width: 52%; aspect-ratio: 1;
  background: radial-gradient(circle at 50% 42%, rgba(255, 236, 170, .95) 0%, rgba(255, 212, 92, .75) 14%, rgba(247, 168, 200, .55) 34%, rgba(159, 211, 240, .35) 52%, transparent 70%);
  filter: blur(6px); animation: sunset-breathe 9s ease-in-out infinite; }
@keyframes sunset-breathe { 50% { transform: scale(1.06); opacity: .88; } }
.portrait { box-shadow: 0 0 0 1px rgba(255, 212, 92, .35), 0 0 80px -10px rgba(255, 190, 110, .55), 0 50px 90px -60px rgba(80, 20, 20, .7); }

/* back page: twilight */
.back { background: linear-gradient(180deg, #0B1028 0%, var(--twilight) 55%, #3B4E8F 100%); }
.back-room { background: radial-gradient(44vmax 44vmax at var(--bx, 60%) var(--by, 40%), rgba(255, 200, 140, .16), transparent 70%); }
.colophon { border-top-color: rgba(239, 230, 218, .22); }

/* the end: sunset on the water */
.end { position: relative; overflow: hidden; color: rgba(42, 10, 31, .8);
  background:
    radial-gradient(60vmax 34vmax at 50% 118%, #FFF1B8 0%, #FFD45C 16%, rgba(255, 170, 110, .85) 34%, transparent 64%),
    linear-gradient(180deg, #3B4E8F 0%, #8E7BC4 30%, #E99BC2 64%, #FFC77A 100%); }
.end::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 7px); mix-blend-mode: soft-light; }
.end .wrap { position: relative; z-index: 1; }
.end-nav a { color: var(--plum); }
.end-nav a:hover { color: #8A1C3C; }
.end .legal { color: rgba(42, 10, 31, .78); }
.end-row { border-top-color: rgba(42, 10, 31, .2); color: rgba(42, 10, 31, .75); }
.credit { color: rgba(42, 10, 31, .75); }
.credit a { color: var(--plum); border-bottom-color: rgba(42, 10, 31, .35); }
.credit a:hover { color: #8A1C3C; border-color: #8A1C3C; }

@media (max-width: 900px) { .profile-grid::before { left: -10%; top: -6%; width: 110%; } }

/* descenders (the g of "glow.") sit below the line box: extend the painted text area to cover them */
.lw > span { padding-bottom: .5em; }
.lw-base { margin-bottom: -.5em; padding-left: .4em; margin-left: -.4em; padding-right: .35em; margin-right: -.35em; }  /* and the w's ball terminal right of it */  /* the g's loop swings left of its box */
.lw-lit, .lw-halo { bottom: -.5em; left: -.4em; right: -.35em; padding-left: .48em; }
/* every layer of the word starts its text at the same point */
.lw > span { text-align: left; }

/* Every layer of the word gets the same generous box on all four sides, so no letter
   part (the g's loop, the w's ball, an overhanging italic stroke) is ever clipped.
   The text inside each layer starts at exactly the same point. */
.lw > span { text-align: left; }
.lw-base { padding: .25em .5em .55em .5em; margin: -.25em -.5em -.55em -.5em; }
.lw-lit, .lw-halo { top: -.25em; right: -.5em; bottom: -.55em; left: -.5em; padding: .25em .5em .55em .58em; }

/* ==================================================================== something for the light to hit
   A wall carrying a woven pattern in her colours, seen only where the light falls,
   a dark polished floor the word stands on, and dust in the beams (edition.js). */
.light-wall { position: absolute; top: 0; left: 0; right: 0; bottom: calc(100% - var(--floor, 62%)); z-index: -1; pointer-events: none; opacity: .8;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke-width='1.4'%3E%3Cpath d='M0 24h12v-8h12v-8h12v-8h24v8h12v8h12v8h12' stroke='%23F7A8C8' stroke-opacity='.55'/%3E%3Cpath d='M0 72h12v-8h12v-8h12v-8h24v8h12v8h12v8h12' stroke='%239FD3F0' stroke-opacity='.5'/%3E%3Cpath d='M48 30l10 10-10 10-10-10z' stroke='%23FFD45C' stroke-opacity='.55'/%3E%3Cpath d='M0 48h30M66 48h30' stroke='%23FFD45C' stroke-opacity='.25'/%3E%3C/g%3E%3C/svg%3E") center / 96px 96px,
    radial-gradient(120vmax 90vmax at 50% 30%, #1a1210, #0a0706 70%);
  -webkit-mask-image: radial-gradient(34vmax 30vmax at var(--vx, 50%) var(--vy, 45%), #000 0%, rgba(0,0,0,.55) 35%, transparent 75%);
          mask-image: radial-gradient(34vmax 30vmax at var(--vx, 50%) var(--vy, 45%), #000 0%, rgba(0,0,0,.55) 35%, transparent 75%); }
.light-room { z-index: -2; }
.light-floor { position: absolute; left: 0; right: 0; bottom: 0; top: var(--floor, 62%); z-index: 0; pointer-events: none;
  background:
    radial-gradient(40vmax 9vmax at var(--vx, 50%) 0%, var(--g-pool, rgba(255, 196, 120, .30)), var(--g-pool2, rgba(224, 121, 74, .10)) 45%, transparent 75%),
    linear-gradient(180deg, rgba(255, 220, 170, .10) 0, rgba(255, 220, 170, 0) 1px, rgba(10, 6, 5, .55) 1px, #050302 70%);
  border-top: 1px solid rgba(255, 214, 160, .14); }
/* the word's reflection in the polished floor (WebKit/Blink) */
.lit-word .lw { -webkit-box-reflect: below -.48em linear-gradient(transparent 52%, rgba(255, 255, 255, .22)); }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) { .dust { display: none; } }

/* the wallpaper on the whole wall: always faintly there, lit up where the light falls */
.light-wall { -webkit-mask-image: none; mask-image: none; opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke-width='1.4'%3E%3Cpath d='M0 24h12v-8h12v-8h12v-8h24v8h12v8h12v8h12' stroke='%23F7A8C8' stroke-opacity='.55'/%3E%3Cpath d='M0 72h12v-8h12v-8h12v-8h24v8h12v8h12v8h12' stroke='%239FD3F0' stroke-opacity='.5'/%3E%3Cpath d='M48 30l10 10-10 10-10-10z' stroke='%23FFD45C' stroke-opacity='.55'/%3E%3Cpath d='M0 48h30M66 48h30' stroke='%23FFD45C' stroke-opacity='.25'/%3E%3C/g%3E%3C/svg%3E") center / 96px 96px, radial-gradient(120vmax 90vmax at 50% 30%, #1a1210, #0a0706 70%); }
.light-wall::before { content: ""; position: absolute; inset: 0; background: rgba(10, 7, 6, .74); }
.light-wall::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke-width='1.4'%3E%3Cpath d='M0 24h12v-8h12v-8h12v-8h24v8h12v8h12v8h12' stroke='%23F7A8C8' stroke-opacity='.55'/%3E%3Cpath d='M0 72h12v-8h12v-8h12v-8h24v8h12v8h12v8h12' stroke='%239FD3F0' stroke-opacity='.5'/%3E%3Cpath d='M48 30l10 10-10 10-10-10z' stroke='%23FFD45C' stroke-opacity='.55'/%3E%3Cpath d='M0 48h30M66 48h30' stroke='%23FFD45C' stroke-opacity='.25'/%3E%3C/g%3E%3C/svg%3E") center / 96px 96px;
  -webkit-mask-image: radial-gradient(34vmax 30vmax at var(--vx, 50%) var(--vy, 45%), #000 0%, rgba(0,0,0,.5) 35%, transparent 75%);
          mask-image: radial-gradient(34vmax 30vmax at var(--vx, 50%) var(--vy, 45%), #000 0%, rgba(0,0,0,.5) 35%, transparent 75%); }

/* the wallpaper runs the full height of the opening; the floor is just a line,
   a faint shade and the light pooling on it, so the pattern shows all the way down */
.light-wall { bottom: 0; }
.light-floor { background:
    radial-gradient(40vmax 9vmax at var(--vx, 50%) 0%, var(--g-pool, rgba(255, 196, 120, .30)), var(--g-pool2, rgba(224, 121, 74, .10)) 45%, transparent 75%),
    linear-gradient(180deg, rgba(10, 6, 5, .18) 0%, rgba(10, 6, 5, .32) 100%); }