/* Scroll story on the home page (light, in tone with the cream site). story.js writes --p (0..1) for each episode
   while it plays; without JS or with reduced motion --p stays 1, so every episode shows its end state. */
.story { --gutter: max(16px, 4vw); position: relative; z-index: 1; }
.ep { --p: 1; position: relative; }
.story.live .ep { height: 220vh; }
.ep-stick { position: relative; min-height: 100vh; overflow: hidden; display: grid; align-items: center;
  grid-template-columns: minmax(320px, 33%) 1fr; gap: 3vw; padding: 56px calc(var(--gutter) + 90px) 48px var(--gutter); background: var(--cream); }
.story.live .ep-stick { position: sticky; top: 0; height: 100vh; height: 100svh; }  /* svh: the visible height in Safari, with its bars */
.story.live .ep4 { height: auto; }  /* the letter plays by itself (story.js): no pin, nothing to scroll through */
.story.live .ep4 .ep-stick { position: relative; }
.plate, .plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate { z-index: 0; }
.ep-stick::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;  /* a clean column for the text */
  background: linear-gradient(90deg, rgba(248, 243, 234, .94) 0, rgba(248, 243, 234, .82) 26%, rgba(248, 243, 234, 0) 44%); }
.ep3 .ep-stick::after { background: radial-gradient(ellipse 48% 52% at 50% 50%, rgba(248, 243, 234, .9), rgba(248, 243, 234, 0)); }
.ep-text, .ep-art, .ep-center { position: relative; z-index: 1; }
.ep-text h2 { font: 800 clamp(36px, 3.7vw, 60px)/1.04 var(--head); color: var(--teal-ink); letter-spacing: -.02em; margin: 0 0 18px; }
.ep-sub { font: 500 clamp(18px, 1.7vw, 26px)/1.35 var(--head); color: var(--ink); margin: 0 0 22px; max-width: 30ch; }
.ep-text .model { font-size: 15px; padding: 8px 14px; }
.dots { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0;
  display: grid; gap: 34px; z-index: 2; }
.dots li { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gold-line); background: var(--paper); }
.dots li.on { background: var(--gold); border-color: var(--gold); font: 600 14px var(--head); color: var(--teal-ink); white-space: nowrap; text-indent: -58px; line-height: 9px; }
.ep-art { position: relative; height: min(64vh, 600px); }
.scroll-hint { position: absolute; z-index: 2; left: var(--gutter); bottom: 26px; margin: 0; text-align: left;
  font: 600 13px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); opacity: calc(.85 - var(--p) * 8); }
.story:not(.live) .scroll-hint { display: none; }
.scroll-hint i { display: block; width: 2px; height: 26px; margin: 8px 0 0 18px; background: linear-gradient(var(--gold), transparent); animation: hint 1.6s ease-in-out infinite; }
@keyframes hint { 50% { transform: translateY(6px); } }

/* 1 — the sheets lie in a glowing pile on the table, rise, stand up and line up along a gold arc, numbered */
.ep1 { --pile-y: 34vh; --pile-x: 105%; --step-x: 82%; --step-y: 3vh; }  /* the pile: where sheet 1 lies, and how far each next one is from its place */
.ep1 .ep-art { perspective: 1400px; }
.wave { position: absolute; left: -6%; right: -4%; top: 0; width: 110%; height: 78%; overflow: visible; }
.wave path { fill: none; stroke: url(#wg); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(240, 196, 100, .9));
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .25) * 2, 1)); }
.sheet { --a: clamp(0, (var(--p) - .04 - var(--i) * .06) * 2.2, 1); position: absolute; margin: 0; width: 22%; left: calc(var(--i) * 18%);
  top: calc(2% + var(--i) * 7%); background: var(--paper); border-radius: 6px; transform-origin: 50% 100%;
  box-shadow: 0 0 calc((1 - var(--a)) * 46px) rgba(245, 205, 110, calc(.9 - var(--a) * .9)), 0 30px 50px -18px rgba(70, 50, 20, .35), 0 4px 10px rgba(70, 50, 20, .12);
  transform: translate(calc((1 - var(--a)) * (var(--pile-x) - var(--i) * var(--step-x) + var(--jx))), calc((1 - var(--a)) * (var(--pile-y) - var(--i) * var(--step-y))))
    rotateX(calc((1 - var(--a)) * 62deg + var(--a) * 4deg)) rotateY(calc(var(--a) * -16deg)) rotate(calc((1 - var(--a)) * var(--r0) + var(--a) * var(--rz)))
    scale(calc(.86 + var(--a) * .14)); }
.sheet.s1 { --jx: -20%; --r0: -24deg; --rz: -3deg; } .sheet.s2 { --jx: 25%; --r0: 14deg; --rz: -1deg; } .sheet.s3 { --jx: -35%; --r0: 34deg; --rz: 1deg; }
.sheet.s4 { --jx: 10%; --r0: -10deg; --rz: 2deg; } .sheet.s5 { --jx: 40%; --r0: 22deg; --rz: 3deg; }
.sheet img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 6px; }
.sheet b { position: absolute; top: -22px; left: 50%; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; display: grid; place-items: center;
  font: 800 21px var(--head); color: #fff; background: radial-gradient(circle at 35% 30%, #f0cc7a, var(--gold) 70%);
  box-shadow: 0 0 0 4px rgba(255, 240, 200, .75), 0 0 18px rgba(240, 196, 100, .8), var(--shadow); transform: scale(clamp(0, (var(--a) - .7) * 4, 1)); }

/* 2 — a bright gold beam goes down the bill; behind it every name turns into a teal lock token */
.ep2 .plate img { filter: sepia(.4) saturate(1.3) hue-rotate(-10deg) brightness(1.05); }
.ep2 .ep-art { display: grid; place-items: center; perspective: 1600px; }
.bill { position: relative; width: min(720px, 100%); background: var(--paper); border-radius: 12px; padding: 34px 40px; overflow: hidden;
  box-shadow: 0 40px 70px -24px rgba(70, 50, 20, .4), 0 6px 16px rgba(70, 50, 20, .12); font-size: 16px;
  transform: rotateY(-9deg) rotateX(5deg) rotate(-1.5deg); --b: clamp(0, (var(--p) - .1) * 1.4, 1); }
.bill-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 16px; }
.bill-head b { font: 800 26px var(--head); color: var(--teal-ink); }
.bill-head span { color: var(--muted); font-size: 15px; flex: 1; }
.bill-head em { font: 800 14px var(--head); color: var(--red); border: 2px solid var(--red); border-radius: 4px; padding: 1px 7px; font-style: normal; opacity: .7; transform: rotate(-6deg); }
.bill-ids { margin: 0 0 18px; display: grid; gap: 10px; }
.bill-ids div { --t: clamp(0, (var(--b) - var(--r) * .17 - .12) * 8, 1); display: grid; grid-template-columns: 170px 1fr; align-items: center; min-height: 34px; }
.bill-ids dt { color: var(--muted); font-size: 15px; }
.bill-ids dd { margin: 0; display: grid; }
.bill-ids dd > * { grid-area: 1 / 1; align-self: center; }
.bill-ids .real { font-weight: 600; opacity: calc(1 - var(--t)); filter: blur(calc(var(--t) * 4px)); }
.bill-ids .tok { justify-self: start; font: 700 15px var(--head); color: #fff; background: linear-gradient(180deg, #17867c, var(--teal-dark));
  border-radius: 8px; padding: 6px 14px; box-shadow: 0 6px 14px rgba(13, 95, 89, .28); opacity: var(--t); transform: scale(calc(.85 + var(--t) * .15)); }
.bill-lines { width: 100%; border-collapse: collapse; }
.bill-lines td { padding: 7px 0; border-top: 1px dashed var(--line); }
.bill-lines td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.beam { position: absolute; left: -10%; right: -10%; height: 150px; top: calc(var(--b) * 118% - 90px); pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(180deg, transparent, rgba(240, 190, 80, .28) 30%, rgba(232, 170, 50, .62) 49%, rgba(232, 170, 50, .62) 51%, rgba(240, 190, 80, .28) 70%, transparent);
  opacity: calc(1 - clamp(0, (var(--b) - .92) * 12, 1)); }
.beam::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; mix-blend-mode: normal;
  background: linear-gradient(90deg, transparent, #fff8e0 20%, #fff 50%, #fff8e0 80%, transparent); box-shadow: 0 0 18px 6px rgba(255, 220, 140, .9); }

/* 3 — the sum counts up, then the three reasons */
.ep3 .ep-stick { grid-template-columns: 1fr; text-align: center; padding-left: calc(var(--gutter) + 90px); }
.ep-center { display: grid; justify-items: center; }
.ep3 .ep-sub { margin: 0; max-width: none; font-size: clamp(20px, 2vw, 30px); color: var(--teal-ink); }
.big { font: 800 clamp(96px, 13vw, 210px)/1.05 var(--head); letter-spacing: -.03em; margin: 4px 0 26px; padding: 0 .05em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #2bb0a2 0%, #13807a 45%, #0b4f4a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 0 rgba(11, 79, 74, .12)) drop-shadow(0 0 42px rgba(236, 188, 90, .6));
  transform: scale(calc(.9 + clamp(0, var(--p) * 2, 1) * .1)); }
.cards { list-style: none; margin: 0 0 22px; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.cards li { --a: clamp(0, (var(--p) - .5 - var(--i) * .1) * 6, 1); display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--gold-line);
  border-radius: 16px; box-shadow: 0 18px 34px -14px rgba(150, 105, 25, .35); padding: 14px 22px 14px 14px; font: 700 18px var(--head); color: var(--teal-ink);
  opacity: var(--a); transform: translateY(calc((1 - var(--a)) * 30px)); }
.cards .ic { width: 40px; height: 40px; padding: 8px; border-radius: 50%; color: #9a6f1e; background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-line); flex: none; }
.ep-note { color: #48595a; font-size: 14px; margin: 0; opacity: clamp(0, (var(--p) - .8) * 6, 1); }

/* 4 — the letter types itself, the pen signs, then the envelope and the buttons */
.ep4 .ep-art { display: grid; place-items: center start; }
.letter-wrap { position: relative; width: min(520px, 100%); }
.letter-paper { position: relative; background: var(--paper); border-radius: 8px; padding: 32px 36px 26px;
  box-shadow: 0 36px 60px -22px rgba(70, 50, 20, .38), 0 5px 14px rgba(70, 50, 20, .1); transform: rotate(-1.5deg); font-size: 15px; line-height: 1.55; }
.lp-to { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.letter-paper h3 { font: 800 22px var(--head); color: var(--teal-ink); margin: 0 0 12px; }
.lp-body { margin: 0 0 14px; white-space: pre-line; min-height: 9.5em; }
.lp-sign { margin: 0; }
.sig { display: block; width: 210px; height: 60px; margin: 2px 0 0 -6px; }
.sig path { fill: none; stroke: #1f3f8a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .55) * 4.5, 1)); }
.lp-name { margin: 0; font-weight: 600; }
.envelope { position: absolute; z-index: -1; right: -168px; bottom: 26px; width: 240px; height: 150px; border-radius: 8px; background: #fbf6ec;
  box-shadow: 0 24px 40px -16px rgba(70, 50, 20, .35); --a: clamp(0, (var(--p) - .82) * 7, 1); opacity: var(--a); transform: translate(calc((1 - var(--a)) * -60px), calc((1 - var(--a)) * 30px)) rotate(7deg); }
.envelope::before { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, transparent 49%, var(--line) 50%, transparent 51%), linear-gradient(25deg, transparent 49%, var(--line) 50%, transparent 51%); }
.envelope::after { content: ""; position: absolute; left: 50%; top: 48%; width: 30px; height: 30px; margin: -15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e7bf67, var(--gold) 70%); }
.ep-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 0; --a: clamp(0, (var(--p) - .82) * 7, 1); opacity: var(--a); transform: translateY(calc((1 - var(--a)) * 16px)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* phones: text on top, the picture below; pins are shorter */
@media (max-width: 760px) {
  .story.live .ep { height: 190vh; height: 190svh; } .story.live .ep4 { height: auto; }
  .ep-stick, .ep3 .ep-stick { grid-template-columns: 1fr; align-content: start; gap: 16px; padding: 60px 16px 20px; }  /* room for Safari's floating bar */
  .ep-stick::after { background: linear-gradient(180deg, rgba(248, 243, 234, .95) 0, rgba(248, 243, 234, .86) 34%, rgba(248, 243, 234, 0) 58%); }
  .ep-text h2 { font-size: 32px; margin-bottom: 10px; }
  .ep-sub { font-size: 18px; margin-bottom: 14px; }
  .ep-ctas { flex-wrap: wrap; gap: 8px; } .ep-ctas .btn { width: auto; flex: 0 0 auto; min-height: 44px; padding: 0 18px; font-size: 15px; }  /* both buttons whole on a phone */
  .dots { display: none; }
  .ep1 { --pile-y: 21vh; --pile-x: 90%; --step-x: 47%; --step-y: 4.7vh; }
  .ep1 .plate img { object-position: 18% 100%; }
  .ep4 .plate img { object-position: 85% 50%; }
  .ep-art { height: 52vh; }
  .sheet { width: 36%; left: calc(var(--i) * 17%); top: calc(10% + var(--i) * 9%); }
  .sheet b { width: 34px; height: 34px; margin-left: -17px; top: -16px; font-size: 17px; }
  .bill { padding: 18px; font-size: 14px; transform: rotate(-1.5deg); } .bill-head b { font-size: 20px; } .bill-head span { font-size: 12px; }
  .bill-ids div { grid-template-columns: 110px 1fr; } .bill-ids .tok { font-size: 13px; padding: 4px 10px; } .bill-lines tr:nth-child(n + 4) { display: none; }
  .ep3 .ep-stick { align-content: center; }
  .big { font-size: clamp(60px, 19vw, 110px); }
  .cards { gap: 10px; } .cards li { font-size: 16px; padding: 10px 16px 10px 10px; } .cards .ic { width: 34px; height: 34px; padding: 6px; }
  .ep-note { padding: 0 8px; }
  .letter-paper { padding: 14px 16px; font-size: 13px; line-height: 1.45; } .letter-paper h3 { font-size: 17px; margin-bottom: 6px; }
  .lp-to { display: none; } .lp-body { min-height: 0; margin-bottom: 8px; } .sig { width: 170px; height: 46px; }  /* letter, pen and buttons in one phone screen */
  .ep4 .ep-stick { gap: 12px; }
  .envelope { width: 120px; height: 76px; right: -14px; bottom: -40px; }
  .scroll-hint { bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .story .ep { --p: 1 !important; height: auto !important; } .story .ep-stick { position: relative !important; height: auto !important; } }

/* 1+ — the real photo with the boxes SAM 3.1 drew; each sheet leaves its box and lines up */
.receipt-line { margin: 16px 0 0; font: 500 15px/1.4 var(--head); color: var(--muted); }
.receipt-line b { color: var(--teal-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.receipt-line span { display: block; font-size: 13px; }
.ep1 .stage { height: auto; width: 100%; aspect-ratio: var(--ar); align-self: center; }
.photo { position: absolute; left: 0; margin: 0; border-radius: 8px; background: #f1ece2; box-shadow: 0 30px 60px -20px rgba(70, 50, 20, .45), 0 4px 12px rgba(70, 50, 20, .15);
  --f: clamp(0, var(--p) * 4, 1); transform-origin: 50% 100%;  /* lies on the table, stands up before the sheets leave it */
  transform: perspective(1100px) rotateX(calc((1 - var(--f)) * 34deg)) rotate(calc(-2deg - (1 - var(--f)) * 4deg)) scale(calc(.94 + var(--f) * .06)); opacity: calc(1 - clamp(0, (var(--p) - .85) * 3, .45)); }
.photo img, .photo svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; }
.photo img { object-fit: cover; }
.photo rect { fill: rgba(240, 196, 100, .08); stroke: #e0a93a; stroke-width: 22; stroke-dasharray: 1; filter: drop-shadow(0 0 14px rgba(240, 190, 80, .9));
  stroke-dashoffset: calc(1 - clamp(0, (var(--p) - var(--i) * .04) * 5, 1)); }
.photo-cap { position: absolute; left: 0; width: 44%; top: calc(8% + 78.4% + 14px); margin: 0; text-align: center; font: 700 13px var(--head); color: var(--teal-ink);
  background: rgba(255, 253, 249, .9); border-radius: 999px; padding: 4px 10px; box-sizing: border-box; }  /* flat, never tilted with the photo */
.sheet2 { --a: clamp(0, (var(--p) - .25 - var(--i) * .07) * 2.6, 1); position: absolute; margin: 0; background: var(--paper); border-radius: 5px;
  left: calc(var(--x0) + (48% + var(--i) * 10% - var(--x0)) * var(--a)); top: calc(var(--y0) + (4% + var(--i) * 10% - var(--y0)) * var(--a));
  width: calc(var(--w0) + (17% - var(--w0)) * var(--a)); opacity: clamp(0, var(--a) * 8, 1);
  box-shadow: 0 0 calc((1 - var(--a)) * 30px) rgba(245, 205, 110, .9), 0 30px 50px -18px rgba(70, 50, 20, calc(var(--a) * .35));
  transform: perspective(1200px) rotateY(calc(var(--a) * -14deg)) rotate(calc(var(--a) * (var(--i) * 1.5deg - 2deg))); }
.sheet2 img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 5px; }
.sheet2 b { position: absolute; top: -20px; left: 50%; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; display: grid; place-items: center;
  font: 800 19px var(--head); color: #fff; background: radial-gradient(circle at 35% 30%, #f0cc7a, var(--gold) 70%);
  box-shadow: 0 0 0 4px rgba(255, 240, 200, .75), 0 0 18px rgba(240, 196, 100, .8); transform: scale(clamp(0, (var(--a) - .6) * 3, 1)); }

/* 2+ — what the model got: the request text, word for word, slides in beside the bill */
.ep2 .ep-art { position: relative; }
.sent { position: absolute; right: -3%; bottom: -4%; width: min(440px, 64%); background: rgba(255, 253, 249, .97); border: 1px solid var(--teal-line); border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(13, 61, 58, .45); padding: 16px 18px 12px; --s: clamp(0, (var(--p) - .62) * 4, 1);
  opacity: var(--s); transform: translateX(calc((1 - var(--s)) * 60px)); }
.sent-h { margin: 0 0 8px; font: 700 14px var(--head); color: var(--teal-ink); }
.sent pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: #34413f; max-height: 13.5em; overflow: hidden; }
.sent mark { background: var(--teal); color: #fff; border-radius: 4px; padding: 0 3px; }
.sent-f { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.sent-f.short { display: none; }
@media (max-width: 760px) {
  .ep1 .stage { aspect-ratio: var(--ar); }
  .photo-cap { font-size: 11px; width: 70%; padding: 3px 8px; }
  .photo { opacity: 1; } .photo rect { stroke-width: 34; fill: rgba(240, 196, 100, .14); }
  .sheet2 b { width: 28px; height: 28px; margin-left: -14px; top: -12px; font-size: 14px; }
  .receipt-line { margin-top: 10px; font-size: 14px; }
  .ep2 .ep-art { height: auto; display: grid; gap: 12px; }  /* the request sits under the bill, never over it */
  .sent { position: relative; right: auto; bottom: auto; width: auto; padding: 12px; background: var(--paper); transform: translateY(calc((1 - var(--s)) * 20px)); }
  .sent pre { max-height: 4.5em; font-size: 11px; } .sent-f { font-size: 11px; }
  .ep2 .bill-lines { display: none; }
  .ep2 .ep-text .model { display: none; } .ep2 .ep-sub { margin-bottom: 4px; }
  .ep2 .bill-ids div { grid-template-columns: 124px 1fr; min-height: 26px; } .ep2 .bill-ids dt { font-size: 13px; } .ep2 .bill-head { padding-bottom: 8px; margin-bottom: 8px; }
  .sent-f.long { display: none; } .sent-f.short { display: block; }  /* on a phone the names and tokens are the point; the panel needs the room */ .ep2 .bill-ids { gap: 4px; margin-bottom: 10px; } .ep2 .bill-ids div { min-height: 30px; } .ep2 .ep-stick { gap: 12px; }
}

/* the try block after the story */
.story-try { position: relative; z-index: 1; padding: 72px var(--gutter) 56px; background: var(--cream); display: grid; justify-items: center; text-align: center; }
.story-try h2 { font: 800 clamp(30px, 3vw, 46px)/1.1 var(--head); color: var(--teal-ink); margin: 0 0 26px; }
.story-try ol { list-style: none; counter-reset: s; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1120px; text-align: left; }
.story-try li { counter-increment: s; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 22px 22px 22px 70px; position: relative; font-size: 15px; line-height: 1.5; }
.story-try li::before { content: counter(s); position: absolute; left: 20px; top: 20px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font: 800 17px var(--head); color: #fff; background: radial-gradient(circle at 35% 30%, #f0cc7a, var(--gold) 70%); }
.story-try .note { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { .story-try { padding: 48px 16px 36px; } .story-try ol { grid-template-columns: 1fr; } }

/* a slight tilt after the pointer, desktop only (story.js sets --tx, --ty, --m) */
.story.tilt .ep-art { perspective: 1400px; }
.story.tilt .sheet2, .story.tilt .bill, .story.tilt .letter-paper, .story.tilt .photo {
  rotate: calc(var(--ty, 0) * -1) calc(var(--tx, 0) + .0001) 0 calc(var(--m, 0) * 6deg); translate: calc(var(--tx, 0) * 6px) calc(var(--ty, 0) * 4px);
  transition: rotate .25s ease-out, translate .25s ease-out; }
@media (max-width: 380px) { .ep2 .bill-head span { display: none; } .ep2 .ep-text h2 { font-size: 29px; } .sent pre { max-height: 3em; } }
.ep-kicker { margin: 0 0 16px; font: 700 15px/1.4 var(--head); color: var(--teal-dark); max-width: 34ch; }  /* what the product is, before the story starts */
@media (max-width: 760px) { .ep-kicker { font-size: 13px; margin-bottom: 8px; } }
.home-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 40px 0 18px; padding: 24px 28px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }  /* one way in after the story */
.home-strip p { margin: 0; max-width: 56ch; font-size: 17px; line-height: 1.45; }
.home-strip .cta { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .home-strip { padding: 18px 16px; } .home-strip .cta .btn { width: 100%; } }
@media (max-width: 380px) { .letter-paper { font-size: 12.5px; } .ep4 .ep-sub { margin-bottom: 8px; } }

/* 0 — what happened: the first screen, the voice helper first */
.ep0 { position: relative; min-height: calc(100vh - 110px); min-height: calc(100svh - 110px); display: grid; align-items: start; padding: clamp(24px, 8vh, 96px) var(--gutter) 48px; overflow: hidden; background: var(--cream); }
.ep0::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(248, 243, 234, .9) 0, rgba(248, 243, 234, .62) 34%, rgba(248, 243, 234, 0) 54%); }
.ep0-in { position: relative; z-index: 1; width: min(47vw, 780px); display: grid; gap: 14px; justify-items: start; animation: ep0-in .7s ease both; }
@keyframes ep0-in { from { opacity: 0; transform: translateY(14px); } }
.ep0 .ep-kicker { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.3vw, 20px); color: var(--teal-ink); }
.ep0 h1 { margin: 0; font: 800 clamp(48px, 5.9vw, 104px)/1 var(--head); letter-spacing: -.025em; color: var(--teal); white-space: nowrap; }
.vox-big { width: 100%; box-sizing: border-box; padding: 20px 22px; background: rgba(255, 253, 249, .62); backdrop-filter: blur(16px) saturate(1.1); border: 1px solid rgba(255, 255, 255, .8); border-radius: 22px; box-shadow: 0 24px 60px -24px rgba(120, 90, 30, .4); }
.vox-big .vox-row { flex-wrap: nowrap; gap: 20px; margin: 0; }
.vox-big .vox-mic { width: 92px; height: 92px; box-shadow: 0 0 0 8px rgba(106, 196, 186, .35), 0 12px 26px rgba(15, 111, 104, .35); }
.vox-big .vox-mic svg { width: 40px; height: 40px; }
.vox-main { flex: 1; min-width: 0; display: grid; gap: 8px; }
.vox-big .vox-mic:disabled { background: var(--teal); box-shadow: 0 0 0 8px rgba(106, 196, 186, .35); opacity: .8; }
.vox-big .vox-wave { height: 56px; gap: 3px; flex: none; overflow: hidden; } .vox-big .vox-wave i { flex: 0 0 2.5px; min-width: 0; height: 7px; }
.vox-big.idle .vox-wave i { animation: vox-idle 1.5s ease-in-out infinite; animation-delay: calc(var(--i) * -71ms); }
@keyframes vox-idle { 50% { transform: scaleY(calc(1.4 + 3.6 * (.5 + .5 * sin(var(--i) * 1.7rad)))); } }
.vox-demo { min-height: 1.4em; margin: 0; font: 500 clamp(17px, 1.45vw, 22px)/1.35 var(--head); color: #2a3a3a; }
.vox-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .vox-big .vox-sample { margin: 0; }
.vox-big .vox-status:empty, .vox-big .vox-out:empty { display: none; }
.ep0 .chips-ctx { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.ep0 .chips-ctx a { padding: 9px 15px; font: 500 15px/1 var(--head); text-decoration: none; color: #31403f; background: rgba(255, 253, 249, .78); border: 1px solid var(--line); border-radius: 999px; transition: background .2s, color .2s; }
.ep0 .chips-ctx a.on, .ep0 .chips-ctx a:hover { color: #fff; background: var(--teal); border-color: var(--teal); }
.ep0-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 0; } .ep0-cta .btn { min-width: 220px; justify-content: center; }
.ep0 .scroll-hint { left: 50%; bottom: 18px; transform: translateX(-50%); opacity: .85; text-align: center; } .ep0 .scroll-hint i { margin: 8px auto 0; }

/* the feed of calls in the corner of each episode */
.mfeed { position: absolute; z-index: 3; left: var(--gutter); bottom: 26px; width: 240px; padding: 12px 14px; background: rgba(255, 253, 249, .72); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .8); border-radius: 16px; box-shadow: 0 16px 40px -18px rgba(120, 90, 30, .45); }
.mfeed b { display: flex; justify-content: space-between; align-items: baseline; font: 700 14px var(--head); color: var(--teal-ink); margin-bottom: 6px; } .mfeed b span { font: 500 11px var(--head); color: var(--muted); }
.mfeed p { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 13px; color: #3b4849; }
.mfeed i { flex: 0 0 9px; height: 9px; border-radius: 50%; background: #a9b0ae; } .mfeed .done i { background: var(--green); }
.mfeed .now i { background: var(--teal); animation: mf 1.2s ease-in-out infinite; } @keyframes mf { 50% { box-shadow: 0 0 0 5px rgba(15, 111, 104, .22); } }
.ep1 .ep-text, .ep2 .ep-text, .ep-wonder .ep-text { padding-bottom: 150px; }
.ep-spark .ep-stick { align-items: start; } .ep-spark .ep-text { z-index: 50; padding-top: 2vh; } .ep-spark .ep-text h2 { font-size: clamp(36px, 4.2vw, 68px); }

/* 3 — Muse Spark: the sheets fan out into an arc on the table, a gold thread joins the two lines */
.ep-spark .ep-stick::after, .ep-wonder .ep-stick::after { background: linear-gradient(90deg, rgba(248, 243, 234, .9) 0, rgba(248, 243, 234, .66) 24%, rgba(248, 243, 234, 0) 42%); }
.arc { position: absolute; inset: 0; z-index: 1; perspective: 1800px; pointer-events: none; }
.arc-sheet { --a: calc(var(--i) / (var(--n) - 1) * 180deg); --t: clamp(0, (var(--p) - .06 - var(--i) * .018) * 3, 1); --x: calc(50% - 39% * cos(var(--a)) * (.34 + .66 * (1 - sin(var(--a))))); --y: calc(83% - 31% * sin(var(--a)));
  --s: calc(1 - .66 * sin(var(--a))); position: absolute; margin: 0; width: clamp(92px, 11.5vw, 190px); left: calc(50% + (var(--x) - 50%) * var(--t)); top: calc(90% + (var(--y) - 90%) * var(--t));
  background: var(--paper); border-radius: 5px; box-shadow: 0 26px 34px -16px rgba(70, 50, 20, .5), 0 3px 8px rgba(70, 50, 20, .15);
  transform: translate(-50%, -100%) scale(calc(var(--s) * (.55 + .45 * var(--t)))) rotateY(calc(cos(var(--a)) * 26deg * var(--t))) rotateZ(calc((var(--i) - 6) * -1.4deg * (1 - var(--t)))); transform-origin: 50% 100%; }
.arc-sheet img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 5px; }
.arc-sheet b { position: absolute; top: -14px; left: -10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 16px var(--head); color: #fff; background: radial-gradient(circle at 35% 30%, #f0cc7a, var(--gold) 70%); box-shadow: 0 0 0 3px rgba(255, 240, 200, .75), 0 6px 12px rgba(120, 90, 30, .3); transform: scale(clamp(0, (var(--t) - .6) * 3, 1)); }
.arc-sheet .hl { position: absolute; left: 6%; right: 6%; top: 34%; height: 9%; border-radius: 3px; background: rgba(255, 207, 92, .62); box-shadow: 0 0 0 1.5px #ffcf5c, 0 0 16px rgba(255, 190, 70, .95); opacity: clamp(0, (var(--p) - .55) * 8, 1); }
.thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 45; }  /* story.js draws the path from line to line */
.thread path { fill: none; stroke: #fff1bd; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 2px #ffd566) drop-shadow(0 0 7px #ffb92e) drop-shadow(0 0 16px rgba(255, 170, 40, .9)); stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .6) * 3.4, 1)); }
.link-card { --c: clamp(0, (var(--p) - .72) * 6, 1); position: absolute; z-index: 46; left: 60%; top: 62%; width: min(300px, 22vw); padding: 14px 18px; background: rgba(255, 250, 238, .92); backdrop-filter: blur(10px); border: 1.5px solid #f3d58b; border-radius: 14px; box-shadow: 0 0 28px rgba(240, 196, 100, .55); opacity: var(--c); transform: translate(-50%, -50%) scale(calc(.9 + var(--c) * .1)); }
.link-card b { display: block; font: 700 clamp(15px, 1.25vw, 19px)/1.25 var(--head); color: var(--teal-ink); } .link-card span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }

/* 4 — Muse Wonder: the lens goes over the real quote, then each finding gets its mark */
.review { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rcards { position: absolute; right: calc(var(--gutter) + 56px); top: 14%; width: min(58vw, 860px); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; perspective: 1400px; }
.rcards li { --c: clamp(0, (var(--p) - .3 - var(--i) * .1) * 6, 1); position: relative; min-height: 190px; padding: 16px; background: rgba(255, 253, 249, .66); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .85); border-radius: 16px; box-shadow: 0 22px 44px -22px rgba(120, 90, 30, .55); opacity: calc(.25 + var(--c) * .75); transform: translateY(calc((1 - var(--c)) * 22px)) rotateY(calc(-8deg + var(--i) * 1deg)); }
.rcards b { display: block; font: 700 clamp(15px, 1.25vw, 19px)/1.25 var(--head); color: var(--teal-ink); } .rcards small { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.rcards em { display: block; width: 30px; height: 30px; margin-bottom: 12px; border-radius: 50%; background: var(--green); position: relative; transform: scale(var(--c)); }
.rcards em::after { content: ""; position: absolute; left: 11px; top: 6px; width: 7px; height: 13px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); }
.rcards .worth { background: rgba(255, 253, 249, .78); } .rcards .worth em { background: var(--gold-2); } .rcards .worth em::after { left: 13.5px; top: 6px; width: 3px; height: 11px; border: 0; background: #fff; transform: none; border-radius: 2px; box-shadow: 0 14px 0 -0.4px #fff; }
.policy { position: absolute; z-index: 0; right: calc(var(--gutter) + 200px); bottom: -3%; width: min(50vw, 720px); height: 58%; padding: 24px 40px; box-sizing: border-box; background: var(--paper); border-radius: 6px; box-shadow: 0 30px 60px -24px rgba(70, 50, 20, .55); transform: perspective(1500px) rotateX(24deg) rotateZ(-6deg); transform-origin: 50% 100%; transform-style: preserve-3d; overflow: visible; }
.policy::before, .policy::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #f6f1e6; border-radius: 6px; box-shadow: 0 10px 22px -12px rgba(70, 50, 20, .4); transform: translate(8px, -8px) rotate(1.4deg); }
.policy::after { background: #fbf7ee; transform: translate(-7px, -5px) rotate(-1.1deg); }
.p-org { margin: 0; font: 500 15px Georgia, serif; color: #48554f; } .p-title { margin: 4px 0 12px; font: 700 22px Georgia, serif; color: #2a3a3a; }
.p-lines { display: grid; gap: 7px; margin: 0 0 12px; } .p-lines i { display: block; height: 6px; border-radius: 3px; background: #e3e2db; }
.p-quote { margin: 0 0 12px; font: 500 16px/1.45 Georgia, serif; color: #2a3a3a; } .p-quote mark { background: rgba(240, 196, 100, calc(clamp(0, (var(--p) - .12) * 4, 1) * .55)); color: inherit; padding: 1px 3px; border-radius: 3px; }
.lens { --m: clamp(0, (var(--p) - .05) * 1.6, 1); position: absolute; left: calc(2% + var(--m) * 26%); top: 16%; width: 270px; height: 270px; display: grid; place-items: center; padding: 26px; box-sizing: border-box; border-radius: 50%; border: 10px solid #c9992f; box-shadow: inset 0 0 0 2px #f0cc7a, inset 0 0 26px rgba(255, 255, 255, .8), 0 22px 38px -10px rgba(70, 50, 20, .6); background: radial-gradient(circle at 34% 28%, #fffef9, #fbf6ea 70%); font: 500 17px/1.32 Georgia, serif; color: #2a3a3a; text-align: center; }
.lens mark { background: rgba(240, 196, 100, .6); color: inherit; padding: 1px 3px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lens::after { content: ""; position: absolute; left: 92%; top: 84%; width: 190px; height: 24px; border-radius: 12px; background: linear-gradient(90deg, #c9992f 0 18%, #0f6f68 18%); transform: rotate(32deg); transform-origin: 0 50%; box-shadow: 0 10px 18px -8px rgba(70, 50, 20, .6); }
@media (max-width: 760px) {
  .ep0 { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 20px 16px 72px; } .ep0-in { width: 100%; grid-template-columns: minmax(0, 1fr); } .ep0 h1 { font-size: clamp(34px, 11vw, 56px); } .ep0::after { background: linear-gradient(180deg, rgba(248, 243, 234, .92) 0, rgba(248, 243, 234, .8) 66%, rgba(248, 243, 234, .3) 100%); }
  .ep0 .plate img { object-position: 78% 50%; } .vox-big { padding: 14px; } .vox-big .vox-mic { width: 66px; height: 66px; } .vox-big .vox-mic svg { width: 30px; height: 30px; } .vox-big .vox-row { gap: 14px; } .vox-big .vox-wave { height: 38px; }
  .ep0-cta .btn { min-width: 0; flex: 1 1 140px; padding: 0 12px; white-space: nowrap; } .ep0 .scroll-hint { display: none; }
  .mfeed { display: none; } .ep1 .ep-text, .ep2 .ep-text, .ep-spark .ep-text, .ep-wonder .ep-text { padding-bottom: 0; }
  .ep-spark .ep-stick, .ep-wonder .ep-stick { min-height: 100svh; } .arc { top: 26%; } .arc-sheet { width: 26vw; --x: calc(50% - 33% * cos(var(--a)) * (.34 + .66 * (1 - sin(var(--a))))); --y: calc(74% - 26% * sin(var(--a))); } .arc-sheet b { width: 24px; height: 24px; font-size: 12px; }
  .link-card { width: 74vw; }
  .rcards { position: absolute; left: 16px; right: 16px; top: 34%; width: auto; grid-auto-flow: row; gap: 8px; } .rcards li { min-height: 0; display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; padding: 10px 12px; } .rcards em { grid-row: span 2; width: 24px; height: 24px; margin: 0; } .rcards em::after { left: 8px; top: 4px; }
  .policy { display: none; }
}

/* a sheet of the arc, at every width */
.as-n { position: absolute; left: -.55em; top: -.75em; width: 2em; height: 2em; display: grid; place-items: center; font: 800 1.15em/1 var(--head); color: #fff; background: radial-gradient(circle at 36% 30%, #eec877, #bd8a2c 72%); border-radius: 50%; box-shadow: 0 0 0 .12em rgba(255, 240, 200, .85), 0 .3em .6em rgba(120, 90, 30, .4); transform: scale(clamp(0, (var(--t) - .55) * 3, 1)); z-index: 2; }
.arc-sheet.lh { padding-left: 2.3em; } .as-org { margin: .4em 0 0; font: 600 1.02em/1.15 var(--head); color: #2d3d3c; } .as-kind { margin: .25em 0 0; font-size: .78em; color: #5f6c6d; }
.as-rows { list-style: none; margin: .7em 0 0; padding: 0; display: grid; gap: .42em; } .as-rows li { display: flex; align-items: center; gap: .5em; min-height: 1.1em; padding: .1em .3em; font-size: .88em; border-radius: .18em; } .as-rows code { font: 500 1em var(--mono, ui-monospace, Menlo, monospace); color: #39474a; } .as-rows i { flex: 1; height: .5em; border-radius: .2em; background: #dcd8cd; }
.as-rows li.hl { background: rgba(255, 207, 92, calc(clamp(0, (var(--p) - .55) * 8, 1) * .62)); box-shadow: 0 0 0 .1em rgba(255, 207, 92, calc(clamp(0, (var(--p) - .55) * 8, 1))), 0 0 1em rgba(255, 190, 70, calc(clamp(0, (var(--p) - .55) * 8, 1) * .9)); }
.arc-sheet .hl { position: static; opacity: 1; height: auto; }

/* ======= the approved frames V1, S3W, W4W, measured in vw on a 16:9 screen ======= */
.as-stamp { position: absolute; right: 6%; bottom: 6%; padding: .1em .4em; font: 800 1.15em/1.1 var(--head); letter-spacing: .04em; color: rgba(214, 72, 66, .72); border: .11em solid rgba(214, 72, 66, .62); border-radius: .16em; transform: rotate(-17deg); }
@media (min-width: 761px) {
  /* V1 */
  .ep0 { min-height: 100vh; min-height: 100svh; padding: 10.6vw 0 0 5.3vw; align-items: start; }
  .ep0::after { background: linear-gradient(90deg, rgba(250, 245, 236, .86) 0, rgba(250, 245, 236, .6) 30%, rgba(250, 245, 236, 0) 47%); }
  .ep0 .plate img { object-position: 100% 60%; }
  .ep0-in { width: 42vw; gap: 0; }
  .ep0 .ep-kicker { font: 700 1.5vw/1.28 var(--head); color: #173232; max-width: 33vw; margin: 0 0 1.55vw; }
  .ep0 h1 { font-size: 5.46vw; color: #0f6b63; margin: 0 0 .9vw; letter-spacing: -.03em; }
  .vox-big { width: 41.4vw; padding: 1.5vw 1.8vw 1.25vw; border-radius: 1.9vw; background: rgba(255, 252, 245, .56); backdrop-filter: blur(14px) saturate(1.15); border: 1.5px solid rgba(255, 255, 255, .82); box-shadow: 0 1.6vw 3.4vw -1.8vw rgba(120, 90, 30, .5); }
  .vox-big .vox-row { gap: 1.9vw; align-items: center; }
  .vox-big .vox-mic, .vox-big .vox-mic:disabled { width: 7vw; height: 7vw; opacity: 1; background: radial-gradient(circle at 42% 34%, #1b8f85, #0c6a62 72%); box-shadow: 0 0 0 .55vw rgba(146, 214, 205, .55), 0 0 0 .62vw rgba(255, 255, 255, .7), 0 1.1vw 2vw -.4vw rgba(15, 111, 104, .55); }
  .vox-big .vox-mic svg { width: 3.1vw; height: 3.1vw; }
  .vox-main { gap: .7vw; border-left: 2px solid rgba(201, 162, 74, .55); padding-left: 1vw; }
  .vox-big .vox-wave { height: 5vw; gap: .17vw; overflow: visible; } .vox-big .vox-wave i { flex: 0 0 .2vw; height: calc(var(--h) * 1%); min-height: 3px; background: #d6a547; border-radius: 1px; transform: scaleY(calc(1 + var(--lvl) * .4)); }
  .vox-big.idle .vox-wave i { animation: vox-idle2 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -53ms); } @keyframes vox-idle2 { 50% { transform: scaleY(.72); } }
  .vox-demo { font: 500 1.4vw/1.3 var(--head); color: #233; min-height: 1.4em; white-space: nowrap; }
  .vox-foot { margin-top: .4vw; gap: .7vw; } .vox-chip { padding: .55vw 1vw; font: 500 .98vw/1 var(--head); color: #6b4f19; background: rgba(251, 241, 220, .85); border-radius: 999px; }
  .vox-big .vox-lang span { padding: .4vw .75vw; font-size: .86vw; background: rgba(255, 255, 255, .5); }
  .ep0 .vox-note { width: 41vw; margin: .55vw 0 0 .3vw; font-size: clamp(11px, .8vw, 14px); color: #4d5a58; }
  .ep0 .chips-ctx { gap: .5vw; margin: .9vw 0 0; flex-wrap: nowrap; } .ep0 .chips-ctx a { padding: .95vw 1.15vw; font-size: 1.02vw; white-space: nowrap; background: rgba(255, 252, 245, .78); border-color: rgba(255, 255, 255, .85); }
  .ep0 .chips-ctx a.on { box-shadow: 0 0 0 .14vw #fff, 0 0 0 .26vw #0f6b63; background: #0f6b63; }
  .ep0-cta { gap: 1.35vw; margin: 1.3vw 0 0; } .ep0-cta .btn { width: 18.6vw; min-width: 0; min-height: 3.8vw; font-size: 1.32vw; border-radius: 1.3vw; } .ep0-cta .btn.ghost { background: rgba(255, 252, 245, .72); border: 1.5px solid #0f6b63; color: #0f6b63; }
  .ep0 .scroll-hint { left: 50%; bottom: 1.2vw; letter-spacing: 0; text-transform: none; font-size: 1.05vw; } .ep0 .scroll-hint i { width: .5vw; height: .5vw; margin: .2vw auto 0; background: none; border: solid #173232; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); animation: none; }
  /* S3W */
  .ep-spark .plate img { object-position: 50% 62%; }
  .ep-spark .ep-stick, .ep-wonder .ep-stick { display: block; padding: 0; }
  .ep-spark .ep-stick::after, .ep-wonder .ep-stick::after { background: linear-gradient(90deg, rgba(250, 245, 236, .72) 0, rgba(250, 245, 236, .42) 24%, rgba(250, 245, 236, 0) 40%); }
  .ep-spark .ep-text { position: absolute; left: 3.6vw; top: 8.9vw; width: 24vw; padding: 0; z-index: 2; }
  .ep-spark .ep-text h2 { font-size: 4.5vw; line-height: 1; letter-spacing: -.03em; color: #0d5f59; margin: 0 0 .9vw; }
  .ep-spark .ep-sub, .ep-wonder .ep-sub { font: 500 1.6vw/1.24 var(--head); color: #173232; max-width: none; margin: 0 0 1.1vw; }
  .ep-chip { display: inline-flex; align-items: center; gap: .55vw; padding: .85vw 1.2vw; font: 600 1.22vw/1 var(--head); color: #0d4f4a; background: rgba(205, 233, 227, .92); border-radius: 999px; } .ep-chip svg { width: 1.4vw; height: 1.4vw; } .ep-chip.plain { background: rgba(228, 241, 238, .92); margin-right: .5vw; } .ep-chip.gold { color: #7a5a1c; background: rgba(251, 241, 220, .92); } .ep-chip.gold svg { color: #d6a547; }
  .arc-sheet { --t: clamp(0, (var(--p) - .06 - var(--i) * .018) * 3, 1); --a: 0deg; position: absolute; margin: 0; box-sizing: border-box; width: calc(var(--w) * 1vw); height: calc(var(--w) * var(--ar) * 1vw); left: calc((50 + (var(--x) - 50) * var(--t)) * 1%); top: auto; bottom: calc(100% - (92 + (var(--b) - 92) * var(--t)) * 1%); font-size: calc(var(--w) * .095vw); padding: 1.15em .9em .9em; background: linear-gradient(170deg, #fffdf8, #f6f1e6); border-radius: .28em; box-shadow: 0 1.2em 1.6em -.7em rgba(70, 50, 20, .55), 0 .2em .5em rgba(70, 50, 20, .16); overflow: visible; transform: translateX(-50%) perspective(60em) rotateY(calc(var(--ry) * var(--t))) rotateZ(calc(var(--rz) * var(--t) + (var(--i) - 6) * -1.6deg * (1 - var(--t)))) scale(calc(.5 + .5 * var(--t))); transform-origin: 50% 100%; }
  .link-card { width: 18vw; padding: 1vw 1.5vw; border-radius: 1.1vw; background: rgba(255, 249, 234, .86); border: 1.5px solid #fbe3a4; box-shadow: 0 0 1.6vw rgba(255, 200, 90, .65); } .link-card b { font: 500 1.28vw/1.22 var(--head); color: #15302f; } .link-card span { font-size: 1.02vw; color: #4d5a58; }
  .thread { z-index: 45; }
  .mfeed { left: 3.6vw; bottom: 2.2vw; width: 19vw; padding: .9vw 1.05vw; border-radius: 1.2vw; background: rgba(250, 245, 236, .66); } .mfeed b { font-size: 1vw; } .mfeed b span { font-size: .72vw; } .mfeed p { white-space: nowrap; font-size: .92vw; margin-top: .42vw; gap: .55vw; } .mfeed i { flex-basis: .72vw; height: .72vw; }
  .dots { right: 4.4vw; top: 33%; gap: 1.9vw; } .dots::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: rgba(201, 162, 74, .6); } .dots li { position: relative; width: .55vw; height: .55vw; border: 0; background: #c9a24a; } .dots li.on { width: 1.05vw; height: 1.05vw; margin-left: -.25vw; box-shadow: 0 0 0 .28vw rgba(255, 255, 255, .7); text-indent: 0; line-height: 1; } .dots li.on { color: transparent; }
  .ep-stick .dots li.on::after { content: attr(data-l); }
  /* W4W */
  .ep-wonder .plate img { object-position: 50% 70%; }
  .ep-wonder .ep-text { position: absolute; left: 4.2vw; top: 11.2vw; width: 38vw; padding: 0; z-index: 2; }
  .ep-wonder .ep-text h2 { font-size: 4.95vw; line-height: 1.02; letter-spacing: -.03em; color: #0d5f59; margin: 0 0 1.1vw; }
  .review { position: absolute; inset: 0; z-index: 1; }
  .rcards { right: auto; left: 42.9vw; top: 12.2vw; width: 51.8vw; gap: .78vw; align-items: start; perspective: 90vw; }
  .rcards li { --c: clamp(0, (var(--p) - .28 - var(--i) * .1) * 6, 1); min-height: 16.9vw; padding: 1.15vw; border-radius: 1.2vw; background: rgba(255, 252, 245, .46); backdrop-filter: blur(9px) saturate(1.1); border: 1.5px solid rgba(255, 255, 255, .8); box-shadow: 0 1.4vw 2.6vw -1.5vw rgba(120, 90, 30, .6), inset 0 0 1.2vw rgba(255, 255, 255, .45); opacity: calc(.2 + var(--c) * .8); transform: translateY(calc(var(--i) * 1.05vw + (1 - var(--c)) * 2.4vw)) rotateZ(calc(.8deg + var(--i) * .5deg)) rotateY(-9deg); }
  .rcards em { width: 2vw; height: 2vw; margin-bottom: .9vw; } .rcards em::after { left: 34%; top: 18%; width: 22%; height: 40%; }
  .rcards b { font: 500 1.26vw/1.22 var(--head); color: #15302f; } .rcards small { margin-top: .4vw; font-size: .98vw; }
  .rc-doc { position: relative; margin-top: .8vw; padding: .6vw .7vw; min-height: 5.6vw; font-size: .82vw; background: rgba(255, 255, 255, .42); border-radius: .5vw; } .rc-doc p { margin: 0 0 .35vw; font: 500 .88vw/1.1 Georgia, serif; color: #48554f; } .rc-doc span:not(.as-stamp) { display: flex; align-items: center; gap: .4vw; margin-top: .3vw; } .rc-doc code { font-size: .8vw; color: #4a5757; } .rc-doc i { flex: 1; height: .32vw; border-radius: .2vw; background: #d9d5ca; } .rc-doc .as-stamp { font-size: .84vw; right: 5%; bottom: 7%; }
  .rcards .worth { background: rgba(255, 252, 245, .34); } .rcards .worth b { color: #4d5a58; }
  .ep-wonder { --u: max(1vw, 1.7778vh); }
  .policy { display: block; position: absolute; left: 50%; top: 55.8%; right: auto; bottom: auto; width: calc(31 * var(--u)); height: calc(6 * var(--u)); padding: 0; background: none; box-shadow: none; transform: rotate(10deg) skewX(-14deg); transform-origin: 0 0; }
  .policy::before, .policy::after { display: none; }
  .p-org { margin: 0; font: 500 calc(1.05 * var(--u))/1.2 Georgia, serif; color: #48554f; } .p-title { margin: calc(.25 * var(--u)) 0 0; font: 700 calc(1.62 * var(--u))/1.2 Georgia, serif; color: #233; } .policy .as-stamp { font-size: var(--u); right: calc(1.8 * var(--u)); bottom: calc(1.4 * var(--u)); }
  .lens { --m: clamp(0, (var(--p) - .06) * 1.8, 1); position: absolute; left: calc(50% + -8.1 * var(--u)); top: 61.5%; width: calc(51.4 * var(--u)); aspect-ratio: 860 / 351; right: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: translate(calc((1 - var(--m)) * 9vw), calc((1 - var(--m)) * 5vw)); }
  .lens::after { display: none; } .lens img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .lens-q { position: absolute; left: 7.4%; top: 15%; width: 37%; height: 60%; display: grid; place-items: center; text-align: center; font: 500 calc(1.14 * var(--u))/1.3 Georgia, serif; color: #233; transform: rotate(8.6deg) skewX(-6deg); }
  .lens-q mark { background: rgba(255, 214, 110, calc(clamp(0, (var(--p) - .1) * 3, 1) * .68)); color: inherit; padding: .05em .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}
@media (min-width: 761px) { .ep-stick .dots li.on::after { position: absolute; left: 1.5vw; top: 50%; transform: translateY(-50%); font: 600 .9vw/1 var(--head); color: #2d3d3c; white-space: nowrap; } }
@media (max-width: 760px) {
  .arc { top: 22%; } .arc-sheet { --t: clamp(0, (var(--p) - .06 - var(--i) * .018) * 3, 1); box-sizing: border-box; width: calc(var(--w) * 2vw); height: calc(var(--w) * var(--ar) * 2vw); left: calc((50 + (var(--x) - 50) * .92 * var(--t)) * 1%); top: auto; bottom: calc(100% - (92 + (var(--b) - 92) * var(--t)) * 1%); font-size: calc(var(--w) * .19vw); padding: 1.1em .8em .8em; background: linear-gradient(170deg, #fffdf8, #f6f1e6); border-radius: .28em; box-shadow: 0 1em 1.4em -.6em rgba(70, 50, 20, .55); transform: translateX(-50%) rotateZ(calc(var(--rz) * var(--t))) scale(calc(.55 + .45 * var(--t))); }
  .arc-sheet.lh { padding-left: 1.6em; } .as-n { width: 1.7em; height: 1.7em; } .as-rows { margin-top: .4em; }
  .link-card { padding: 10px 14px; } .link-card b { font-size: 15px; } .link-card span { font-size: 13px; }
  .rc-doc { display: none; } .lens, .policy { display: none; } .as-stamp { font-size: .9em; }
}
@media (max-width: 760px) { .ep-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font: 600 14px/1 var(--head); color: #0d4f4a; background: rgba(205, 233, 227, .92); border-radius: 999px; } .ep-chip svg { width: 15px; height: 15px; } .ep-chip.gold { color: #7a5a1c; background: rgba(251, 241, 220, .92); } }
@media (min-width: 761px) { html.larger .ep-spark .ep-text h2 { font-size: 4.5vw; } html.larger .ep-wonder .ep-text h2 { font-size: 4.95vw; } html.larger .ep-spark .ep-sub, html.larger .ep-wonder .ep-sub { font-size: 1.8vw; } }
@media (max-width: 760px) {
  .ep-spark .ep-stick::after, .ep-wonder .ep-stick::after { background: linear-gradient(180deg, rgba(248, 243, 234, .94) 0, rgba(248, 243, 234, .84) 32%, rgba(248, 243, 234, 0) 52%); }
  .arc-sheet { left: calc((50 + (var(--x) - 50) * .8 * var(--t)) * 1%); }
  .ep-wonder { --u: 2.9vw; }
  .rcards { top: 31%; }
  .lens { display: block; position: absolute; left: -3vw; bottom: 12vh; width: 150vw; aspect-ratio: 860 / 351; right: auto; top: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .lens::after { display: none; } .lens img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .lens-q { position: absolute; left: 7.4%; top: 15%; width: 37%; height: 60%; display: grid; place-items: center; text-align: center; font: 500 3.4vw/1.3 Georgia, serif; color: #233; }
  .lens-q mark { background: rgba(255, 214, 110, .68); color: inherit; padding: .05em .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
}
.lens-q small { display: block; margin-top: .55em; font: 500 .7em/1.25 var(--head); color: #4d5a58; }
/* the arc and the review cards keep clear of the window edge and the scene dots */
@media (min-width: 761px) { .arc { left: -1.4vw; right: 1.4vw; } .ep-wonder .rcards { transform: translateX(-1.6vw); } }
.ep-sub.after { margin-top: -4px; margin-bottom: 18px; }