/* True Roots of Life: site styles. Colours are the book's C9 set, type is Bogart with Alegreya labels.
   Layout reads the .site container, so the same CSS also renders inside the options kit frames. */
:root{
  --deep:#3A3B2A; --mid:#77744C; --light:#D9D4C5; --paper:#FAF9F5; --ink:#2A2A20; --black:#000000;
  --pink:#E8D3CD;
  --serif:'Bogart', Georgia, 'Times New Roman', serif;
  --lab:'Alegreya TR', Georgia, serif;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-io:cubic-bezier(.8,0,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.6 var(--serif); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--mid); outline-offset:3px; }
.nw{ white-space:nowrap; }
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--paper); color:var(--ink); padding:10px 14px; }
.skip:focus{ top:12px; }

.site{ container-type:inline-size; overflow-x:clip; }
h1,h2,h3,.s-say,.s-lab,.nl-sub,.sub{ text-wrap:balance; }
p,li,dd{ text-wrap:pretty; }

/* primitives */
.s-ttl{ font-family:var(--serif); font-style:italic; font-weight:200; letter-spacing:-.01em; line-height:1.02; margin:0; }
.s-say{ font-family:var(--serif); font-style:italic; font-weight:400; line-height:1.19; margin:0; }
.s-lab{ font:700 11px/1.3 var(--lab); letter-spacing:.16em; text-transform:uppercase; }
.s-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; background:var(--paper); color:var(--ink); text-decoration:none; font:italic 400 17px/1 var(--serif); border:1px solid var(--paper); transition:background .35s var(--ease), color .35s var(--ease), border-color .35s; }
.s-btn:hover{ background:var(--light); border-color:var(--light); }
.s-btn.dark{ background:var(--deep); color:var(--paper); border-color:var(--deep); }
.s-btn.dark:hover{ background:var(--ink); border-color:var(--ink); }
.s-link{ color:inherit; text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px; font-style:italic; }
.s-link:hover{ text-decoration-thickness:2px; }
.s-logo{ display:block; aspect-ratio:1245/1269; height:auto; color:currentColor; }
.ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
picture.ph > img{ width:100%; height:100%; object-fit:cover; }

/* header bar */
.bar{ position:absolute; z-index:5; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:3cqw 5.5cqw; color:var(--paper); }
.bar .s-logo{ width:clamp(44px,4.6cqw,72px); }
.bar.static{ position:relative; }

/* H4 hero */
.hero{ position:relative; height:min(56.25cqw, 100svh); min-height:560px; overflow:hidden; color:var(--paper); background:var(--ink); }
.hero .ph{ transform-origin:60% 40%; }
.hero-ttl{ position:absolute; z-index:4; left:7cqw; top:14cqw; right:7cqw; }
.hero-ttl .s-ttl{ font-size:clamp(40px,7.4cqw,132px); white-space:nowrap; }
.hero-by{ margin:clamp(10px,1.2cqw,20px) 0 0; font-size:clamp(17px,1.7cqw,26px); }
/* the entrance dims the photo with an overlay: a brightness filter on a full-bleed photo repaints every frame on a phone */
.hero::after{ content:""; position:absolute; inset:0; z-index:3; background:#000; opacity:0; pointer-events:none; }
.ln{ display:block; overflow:hidden; padding-bottom:.08em; }
.ln > span{ display:block; }
.hero.play .ph{ animation:settle 2.6s var(--ease) both; }
.hero.play::after{ animation:dim 2.6s var(--ease) both; }
.hero.play .ln > span{ animation:rise 1s var(--ease) both; animation-delay:calc(var(--i,0) * .16s + .25s); }
.hero.play .hero-by, .hero.play .bar{ animation:blurin 1.2s var(--ease) both; animation-delay:.9s; }
@keyframes settle{ from{ transform:scale(1.14); } to{ transform:none; } }
@keyframes dim{ from{ opacity:.4; } to{ opacity:0; } }
@keyframes rise{ from{ transform:translateY(105%); } to{ transform:none; } }
@keyframes blurin{ from{ opacity:0; filter:blur(10px); transform:translateY(-.3em); } to{ opacity:1; filter:none; transform:none; } }
@keyframes fadein{ from{ opacity:0; transform:translateY(-.3em); } to{ opacity:1; transform:none; } }
@container (max-width:600px){
  .hero{ height:min(780px, 100svh); }
  .bar{ padding:22px 20px; }
  .hero-ttl{ left:20px; right:20px; top:96px; }
  .hero-ttl .s-ttl{ font-size:clamp(34px,11.6cqw,64px); }
  .hero-by{ margin-top:12px; font-size:17px; }
}

/* B1 pinned sayings. The wipe is two transforms moving against each other (the GPU runs it) in place of an animated
   clip-path, and svh keeps the pin inside the part of a phone screen the browser bars never cover. */
.b1{ --sh:min(100vh, 900px); height:calc(var(--sh) * 3); background:var(--black); overflow:clip; }
@supports (height:100svh){ .b1{ --sh:min(100svh, 900px); } }
.b1-pin{ position:sticky; top:0; height:var(--sh); overflow:hidden; }
.b1-sl{ position:absolute; inset:0; overflow:hidden; transform:translate3d(0,100%,0); transition:transform 1.1s var(--ease-io); }
.b1-in{ position:absolute; inset:0; transform:translate3d(0,-100%,0); transition:transform 1.1s var(--ease-io); }
.b1-sl.on, .b1-sl.past, .b1-sl.on > .b1-in, .b1-sl.past > .b1-in{ transform:none; }
.b1-sl .ph{ transform:scale(1.12); transition:transform 2.4s var(--ease); }
.b1-sl.on .ph{ transform:scale(1); }
.b1-q{ position:absolute; left:7cqw; top:9cqw; color:var(--paper); max-width:min(64cqw, 22ch); font-size:clamp(28px,3.9cqw,58px); opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease) .55s, transform 1.2s var(--ease) .55s; }
.b1-q.low{ top:auto; bottom:12cqw; }
.b1-sl.on .b1-q{ opacity:1; transform:none; }
.b1-lab{ position:absolute; left:7cqw; bottom:6cqw; color:var(--light); z-index:2; }
.b1-dots{ position:absolute; right:5cqw; top:50%; transform:translateY(-50%); display:grid; gap:10px; z-index:3; }
.b1-dots i{ display:block; width:2px; height:28px; background:rgba(250,249,245,.35); transition:background .4s; }
.b1-dots i.on{ background:var(--paper); }
@container (max-width:600px){
  .b1-q, .b1-q.low{ left:20px; right:20px; top:auto; bottom:84px; max-width:none; font-size:clamp(26px,7.6cqw,34px); }
  .b1-lab{ left:20px; bottom:40px; } .b1-dots{ right:14px; }
}

/* S1b parts index, one line each */
.parts{ background:var(--paper); padding:7cqw 0 6cqw; }
.oi{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(42,42,32,.2); }
.oi li{ position:relative; border-bottom:1px solid rgba(42,42,32,.2); padding:0 7cqw; overflow:hidden; }
.oi-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3cqw; min-height:9cqw; position:relative; z-index:2; }
.oi .nm{ font:italic 200 var(--oi-size, clamp(34px,7.6cqw,132px))/1.06 var(--serif); letter-spacing:-.02em; color:var(--ink); white-space:nowrap; transition:transform .7s var(--ease), color .5s; }
.oi .sub{ font:italic 400 clamp(16px,1.5cqw,22px)/1.3 var(--serif); color:var(--deep); text-align:right; width:16em; opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.oi .ph2{ position:absolute; z-index:1; top:0; bottom:0; right:0; width:46%; margin:0; clip-path:inset(0 0 0 100%); transition:clip-path .8s var(--ease-io); }
.oi .ph2 img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); transition:transform 1.4s var(--ease); }
.oi li.on .ph2{ clip-path:inset(0 0 0 0); }
.oi li.on .ph2 img{ transform:scale(1); }
.oi li.on .nm{ transform:translateX(1.4cqw); color:var(--deep); }
.oi li.on .sub{ opacity:1; transform:none; color:var(--paper); }
.parts-foot{ padding:3.4cqw 7cqw 0; display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.parts-foot .s-lab{ color:var(--deep); }
@container (max-width:600px){
  .parts{ padding:52px 0 44px; } .oi li{ padding:0 20px; }
  .oi-row{ grid-template-columns:1fr; min-height:0; padding:18px 0 12px; gap:6px; }
  .oi .sub{ opacity:1; transform:none; text-align:left; width:auto; color:var(--deep)!important; }
  .oi .ph2{ position:relative; width:auto; aspect-ratio:3/1; clip-path:none; margin:0 0 18px; }
  .oi .ph2 img{ transform:none; }
  .oi li.on .nm{ transform:none; }
  .parts-foot{ padding:32px 20px 0; }
  /* no hover on a phone, so each part arrives as it scrolls in */
  .oi.rv .nm, .oi.rv .sub{ transition:opacity .9s var(--ease), transform 1s var(--ease); }
  .oi.rv .sub{ transition-delay:.08s; }
  .oi.rv .ph2{ overflow:hidden; }
  .oi.rv .ph2 img{ transition:opacity 1.1s var(--ease) .12s, transform 1.6s var(--ease) .12s; }
  .oi.rv li:not(.seen) .nm, .oi.rv li:not(.seen) .sub{ opacity:0; transform:translateY(18px); }
  .oi.rv li:not(.seen) .ph2 img{ opacity:0; transform:scale(1.1); }
}

/* M4 photos */
.m4{ background:var(--paper); padding:8cqw 7cqw; display:grid; grid-template-columns:1.25fr 1fr; gap:4cqw; align-items:start; }
.m4-a{ grid-row:span 2; aspect-ratio:4/5; }
.m4-b{ aspect-ratio:1; margin-top:12cqw; }
/* the same GPU wipe as B1; the drift is a scroll-driven CSS animation, so no script chases the scroll.
   overflow:clip, not hidden: hidden makes each frame its own scroller and the drift would never move. */
.wp{ position:relative; overflow:clip; transform:translate3d(0,100%,0); }
.wp-in{ position:absolute; inset:0; overflow:clip; transform:translate3d(0,-100%,0); }
.wp picture{ position:absolute; left:0; right:0; top:-9%; height:118%; }
.wp img{ width:100%; height:100%; object-fit:cover; transform:scale(1.15); transition:transform 1.6s var(--ease); }
.m4.play .wp{ animation:wipe-o 1.3s var(--ease-io) both; animation-delay:calc(var(--i) * .18s); }
.m4.play .wp-in{ animation:wipe-i 1.3s var(--ease-io) both; animation-delay:calc(var(--i) * .18s); }
.m4.play .wp img, .m4.done .wp img{ transform:none; }
.m4.done .wp, .m4.done .wp-in{ transform:none; }
@keyframes wipe-o{ from{ transform:translate3d(0,100%,0); } to{ transform:none; } }
@keyframes wipe-i{ from{ transform:translate3d(0,-100%,0); } to{ transform:none; } }
@supports (animation-timeline: view()){
  .wp picture{ animation:drift linear both; animation-timeline:view(); }
  .m4-b picture{ animation-name:drift-b; }
}
@keyframes drift{ from{ transform:translateY(-7%); } to{ transform:translateY(7%); } }
@keyframes drift-b{ from{ transform:translateY(-5%); } to{ transform:translateY(5%); } }
.m4-cap{ grid-column:2; align-self:end; }
.m4-cap .s-say{ font-size:clamp(22px,2.4cqw,34px); color:var(--deep); }
.m4-cap .s-lab{ color:var(--deep); display:block; margin-top:14px; }
@container (max-width:600px){ .m4{ grid-template-columns:1fr; padding:48px 20px; } .m4-a{ grid-row:auto; } .m4-b{ margin-top:0; width:70%; justify-self:end; } .m4-cap{ grid-column:1; } }

/* B2 night page */
.b2{ background:var(--black); color:var(--paper); padding:12cqw 9cqw 10cqw; }
.b2 .s-say{ font-size:clamp(28px,3.6cqw,56px); max-width:24ch; }
.b2 .w{ display:inline-block; }
.b2.pre .w{ opacity:0; filter:blur(12px); transform:translateY(-.35em); }
.b2.play .w{ animation:wordin 1s var(--ease) both; animation-delay:calc(var(--i) * 55ms); }
@keyframes wordin{ 0%{ opacity:0; filter:blur(12px); transform:translateY(-.35em); } 55%{ opacity:.6; filter:blur(3px); transform:translateY(.06em); } 100%{ opacity:1; filter:none; transform:none; } }
.b2-foot{ margin-top:6cqw; display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap; }
.b2-foot .s-lab{ color:var(--light); }
@container (max-width:600px){ .b2{ padding:64px 20px 44px; } .b2 .s-say{ font-size:28px; } .b2-foot{ margin-top:40px; } }

/* newsletter forms (Klaviyo client API) */
.nl-form{ width:100%; }
.nl-lab{ display:block; font-size:15px; margin-bottom:8px; }
.nl-row{ display:flex; align-items:stretch; border-bottom:1px solid currentColor; }
.nl-row input{ flex:1; min-width:0; background:transparent; border:0; color:inherit; font:400 20px/1.2 var(--serif); padding:12px 0; }
.nl-row input::placeholder{ color:currentColor; opacity:.45; }
.nl-row input:focus{ outline:none; }
.nl-row:focus-within{ border-bottom-width:2px; margin-bottom:-1px; }
.nl-row button{ background:transparent; border:0; font:italic 400 19px/1 var(--serif); padding:0 0 0 18px; color:inherit; white-space:nowrap; }
.nl-row button:hover{ text-decoration:underline; text-underline-offset:.3em; }
.nl-msg{ min-height:1.5em; margin:12px 0 0; font-style:italic; font-size:16px; }
.nl-msg:empty{ margin:0; min-height:0; }
.nl-msg.err::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; margin:0 9px 2px 0; vertical-align:middle; }
.nl-row.err{ border-bottom-width:2px; border-bottom-style:dashed; margin-bottom:-1px; }
.nl-form.sending button{ opacity:.5; cursor:progress; }
.nl-form.done .nl-row, .nl-form.done .nl-lab{ display:none; }
.nl-form.done .nl-msg{ font-size:clamp(20px,2cqw,26px); margin-top:0; }
.nl-sub{ margin:0 0 30px; }
.n2{ display:grid; grid-template-columns:1fr 1fr; min-height:min(64cqw, 640px); background:var(--paper); scroll-margin-top:20px; }
.n2-ph{ position:relative; min-height:300px; }
.n2-tx{ padding:8cqw 7cqw; display:flex; flex-direction:column; justify-content:center; }
.n2 .s-ttl{ font-size:clamp(36px,4.4cqw,68px); margin-bottom:16px; }
.n2 .nl-sub{ color:var(--deep); }
@container (max-width:600px){ .n2{ grid-template-columns:1fr; } .n2-ph{ min-height:260px; } .n2-tx{ padding:44px 20px 52px; } }

/* S1d footer */
.foot{ background:var(--black); color:var(--paper); padding:8cqw 7cqw 3cqw; }
.foot-say{ font:italic 200 clamp(38px,6.4cqw,110px)/1.04 var(--serif); letter-spacing:-.015em; margin:0 0 5.5cqw; max-width:16ch; }
.foot-base{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4cqw; align-items:end; border-top:1px solid rgba(250,249,245,.18); padding-top:3cqw; }
.foot-base .s-logo{ width:clamp(96px,10cqw,150px); }
.foot-parts{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 22px; color:var(--light); font-style:italic; }
.foot-url{ color:var(--light); font-size:15px; text-align:right; margin:0; }
@container (max-width:600px){
  .foot{ padding:56px 20px 28px; } .foot-say{ margin-bottom:44px; }
  .foot-base{ grid-template-columns:1fr; gap:22px; padding-top:26px; } .foot-url{ text-align:left; }
}

/* book page (P3 at night, coming soon) */
.bp{ background:var(--black); color:var(--paper); }
.bp-g{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:5cqw; align-items:center; padding:2cqw 7cqw 7cqw; }
.mock{ position:relative; aspect-ratio:3/2; overflow:hidden; background:#D9D4C5; }
.mock picture{ position:absolute; inset:0; opacity:0; transition:opacity 2.4s var(--ease); }
.mock picture.on{ opacity:1; }
.mock img{ width:100%; height:100%; object-fit:cover; }
.soon{ display:inline-block; color:var(--light); margin-bottom:18px; }
.bp .s-ttl{ font-size:clamp(40px,4.6cqw,76px); }
.bp-by{ margin:10px 0 0; font-size:19px; }
.bp-parts{ margin:22px 0 26px; max-width:46ch; color:var(--light); }
.specs{ margin:0; display:grid; border-top:1px solid rgba(250,249,245,.2); }
.specs div{ display:grid; grid-template-columns:7.5em 1fr; gap:16px; padding:13px 0; border-bottom:1px solid rgba(250,249,245,.2); }
.specs dt{ font:700 11px/1.9 var(--lab); letter-spacing:.16em; text-transform:uppercase; color:var(--light); }
.specs dd{ margin:0; }
.notify{ margin-top:34px; scroll-margin-top:30px; }
.notify h2{ font:italic 400 clamp(24px,2.4cqw,34px)/1.2 var(--serif); margin:0 0 14px; }
@container (max-width:700px){ .bp-g{ grid-template-columns:1fr; padding:8px 20px 48px; gap:34px; } }

/* B3 strip of pages */
.b3{ background:var(--paper); color:var(--ink); padding:8cqw 0 7cqw; }
.b3-h{ display:flex; justify-content:space-between; align-items:end; gap:20px; padding:0 7cqw; margin-bottom:3.4cqw; }
.b3-h .s-ttl{ font-size:clamp(36px,4.6cqw,72px); }
.b3-arr{ display:flex; gap:8px; }
.b3-arr button{ width:48px; height:48px; border:1px solid rgba(42,42,32,.35); background:transparent; color:var(--ink); font-size:20px; line-height:1; }
.b3-arr button:disabled{ opacity:.3; cursor:default; }
.strip{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 7cqw 8px; scroll-padding:0 7cqw; scrollbar-width:none; cursor:grab; }
.strip::-webkit-scrollbar{ display:none; }
.strip.drag{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.pg{ flex:0 0 34cqw; aspect-ratio:1; position:relative; scroll-snap-align:start; overflow:hidden; container-type:inline-size; }
.pg .ph{ pointer-events:none; }
.pg .s-say{ position:absolute; left:8cqi; right:8cqi; bottom:9cqi; color:var(--paper); font-size:7.4cqi; }
.pg.night{ background:var(--deep); } .pg.black{ background:var(--black); }
.pg.night .s-say, .pg.black .s-say{ top:12cqi; bottom:auto; font-size:7.8cqi; }
.pg.paper{ background:var(--light); color:var(--ink); }
.pg.paper .s-say{ color:var(--ink); top:12cqi; bottom:auto; }
.pg .s-lab{ position:absolute; left:8cqi; right:8cqi; bottom:8cqi; color:var(--light); font-size:max(10px,2.4cqi); }
.pg.paper .s-lab{ color:var(--deep); }
.pg.photo .s-lab{ top:8cqi; bottom:auto; }
@container (max-width:600px){ .pg{ flex-basis:80cqw; } .b3{ padding:56px 0 44px; } .b3-h{ padding:0 20px; margin-bottom:24px; } .strip{ padding:0 20px 8px; scroll-padding:0 20px; gap:12px; } .b3-arr{ display:none; } }

/* 404 */
.nf{ min-height:100svh; background:var(--black); color:var(--paper); display:grid; align-content:center; justify-items:start; gap:26px; padding:8cqw 7cqw; }
.nf .s-logo{ width:90px; }
.nf .s-ttl{ font-size:clamp(44px,7cqw,110px); }

/* tree-ring cursor (fine pointers only) and click marks */
html.trc .site, html.trc .site *{ cursor:none; }
html.trc input, html.trc textarea{ cursor:text!important; }
.trc-cur{ position:fixed; z-index:9000; top:0; left:0; width:30px; height:30px; margin:-15px 0 0 -15px; pointer-events:none; color:var(--deep); opacity:0; transition:opacity .25s, color .3s; }
.trc-cur.vis{ opacity:1; }
.trc-cur.light{ color:var(--paper); }
.trc-cur svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.trc-cur path{ fill:none; stroke:currentColor; stroke-width:1.1; vector-effect:non-scaling-stroke; transform-origin:15px 15px; transition:transform .45s var(--ease), opacity .3s; }
.trc-cur.big path{ transform:scale(1.9); }
.trc-cur.big path:nth-child(odd){ opacity:.55; }
.ck-layer{ position:fixed; inset:0; z-index:8999; pointer-events:none; overflow:hidden; }
.ck{ position:absolute; top:0; left:0; pointer-events:none; color:var(--deep); }
.ck.light{ color:var(--paper); }
.ck svg{ position:absolute; left:-120px; top:-120px; overflow:visible; }

/* page turn overlay */
.turn{ position:fixed; inset:0; z-index:9500; width:100vw; height:100vh; pointer-events:none; }

/* reduced motion: finished states, no effects */
@media (prefers-reduced-motion: reduce){
  .hero.play .ph, .hero.play::after, .hero.play .ln > span, .hero.play .hero-by, .hero.play .bar{ animation:none!important; }
  .b1-sl, .b1-in, .b1-q, .b1-sl .ph{ transition:opacity .01s!important; transform:none!important; }
  .b1-sl{ opacity:0; } .b1-sl.on{ opacity:1; } .b1-q{ opacity:1; }
  .b2 .w{ animation:none!important; opacity:1!important; filter:none!important; transform:none!important; }
  .wp, .wp-in, .wp picture{ animation:none!important; transform:none!important; } .wp img{ transform:none!important; transition:none; }
  .oi .ph2, .oi .ph2 img, .oi .nm, .oi .sub, .mock picture{ transition:none!important; }
}
html.rm .hero.play .ph, html.rm .hero.play::after, html.rm .hero.play .ln > span, html.rm .hero.play .hero-by, html.rm .hero.play .bar{ animation:none!important; }
html.rm .b2 .w{ animation:none!important; opacity:1!important; filter:none!important; transform:none!important; }
html.rm .wp, html.rm .wp-in, html.rm .wp picture{ animation:none!important; transform:none!important; } html.rm .wp img{ transform:none!important; }
html.rm .b1-sl, html.rm .b1-in{ transform:none; transition:none; } html.rm .b1-sl{ opacity:0; } html.rm .b1-sl.on{ opacity:1; } html.rm .b1-q{ opacity:1; transform:none; transition:none; }

/* ---------- round 4 ---------- */
/* CR4 / CR5: a small dot, CR5 with one faint trailing ring */
.trc-cur .dot{ position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:currentColor; transition:transform .35s var(--ease), opacity .3s; }
.trc-cur.big .dot{ transform:scale(2.3); opacity:.8; }
.trc-cur path.faint{ opacity:.42; }
.trc-cur.has-dot.big path{ transform:scale(1.35); }

/* things that wipe up into place once */
[data-wipe]{ clip-path:inset(14% 0 0 0); opacity:0; transform:translateY(28px); transition:clip-path 1.2s var(--ease-io), opacity .9s var(--ease), transform 1.2s var(--ease); }
[data-wipe].in{ clip-path:inset(0 0 0 0); opacity:1; transform:none; }
html.rm [data-wipe]{ clip-path:none; opacity:1; transform:none; transition:none; }

/* P4 book story: the closed book opens into a spread as you scroll */
.story{ position:relative; height:280vh; background:#424330; color:var(--paper); }
.st-pin{ position:sticky; top:0; height:100vh; overflow:hidden; }
.st-a, .st-b{ position:absolute; inset:0; will-change:opacity, transform; }
.st-a img, .st-b img{ width:100%; height:100%; object-fit:cover; }
.st-b{ opacity:0; }
.st-cap{ position:absolute; z-index:3; left:7cqw; bottom:6cqw; right:7cqw; display:flex; justify-content:space-between; align-items:end; gap:20px; }
.st-cap .s-ttl{ font-size:clamp(36px,5cqw,88px); }
.st-cap p{ margin:0; font-size:clamp(17px,1.6cqw,24px); }
.walk{ background:var(--black); color:var(--paper); padding:9cqw 5cqw 6cqw; }
.spw{ margin:0 auto 7cqw; max-width:1600px; }
.spw img{ width:100%; height:auto; box-shadow:0 2cqw 4cqw rgba(0,0,0,.5); }
.spw figcaption{ margin-top:16px; color:var(--light); display:flex; justify-content:space-between; gap:20px; }
.walk-say{ font-size:clamp(28px,4cqw,64px); max-width:22ch; margin:0 0 8cqw 4cqw; color:var(--paper); }
.walk-say.r{ margin-left:auto; margin-right:4cqw; text-align:right; }
.fin{ background:#2C2D20; }
.fin .mock{ background:#424330; }
@container (max-width:600px){
  .story{ height:auto; }
  .st-pin{ position:static; height:auto; display:flex; flex-direction:column; }
  .st-pin .bar{ position:relative; order:-2; }
  .st-cap{ position:static; order:-1; display:block; padding:4px 20px 26px; }
  .st-cap p{ margin-top:10px; }
  .st-a, .st-b{ position:relative; inset:auto; aspect-ratio:3/2; opacity:1!important; transform:none!important; }
  .walk{ padding:56px 12px 40px; } .spw{ margin-bottom:48px; } .walk-say, .walk-say.r{ margin:0 8px 56px; text-align:left; }
}

/* P5 inside the book: the seven parts as chapters */
.p5-top{ background:var(--paper); color:var(--ink); padding:0 0 6cqw; }
.p5-top .bar{ color:var(--ink); }
.p5-head{ padding:10cqw 7cqw 0; }
.p5-head .s-ttl{ font-size:clamp(44px,8cqw,150px); }
.p5-head p{ margin:14px 0 0; font-size:clamp(17px,1.6cqw,24px); }
.chaps{ list-style:none; margin:0; padding:0 7cqw 4cqw; background:var(--paper); color:var(--ink); }
.chap{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr); gap:4cqw; align-items:center; padding:5cqw 0; border-top:1px solid rgba(42,42,32,.2); }
.chap:nth-child(even){ grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr); }
.chap:nth-child(even) .ch-tx{ order:2; }
.ch-n{ font:italic 200 clamp(28px,3cqw,48px)/1 var(--serif); color:var(--mid); display:block; margin-bottom:10px; }
.ch-tx h2{ font:italic 200 clamp(40px,5.6cqw,100px)/1 var(--serif); letter-spacing:-.015em; margin:0 0 14px; white-space:nowrap; }
.ch-tx p{ margin:0 0 18px; font:italic 400 clamp(18px,1.6cqw,24px)/1.35 var(--serif); color:var(--deep); }
.ch-tx .s-lab{ color:var(--deep); }
.chap figure{ margin:0; }
.chap img{ width:100%; height:auto; box-shadow:0 1.6cqw 3cqw rgba(42,42,32,.25); }
@container (max-width:700px){ .chap, .chap:nth-child(even){ grid-template-columns:1fr; gap:22px; padding:40px 0; } .chap:nth-child(even) .ch-tx{ order:0; } .chaps{ padding:0 20px 30px; } .p5-head{ padding:30px 20px 0; } .ch-tx h2{ white-space:normal; } }

/* P6 type-led: the specs are the layout */
.p6{ background:var(--black); color:var(--paper); padding:0 0 4cqw; }
.p6-head{ padding:6cqw 7cqw 4cqw; display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap; }
.p6-head .s-ttl{ font-size:clamp(34px,4.4cqw,72px); }
.t6{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:3cqw; padding:2cqw 7cqw 2.6cqw; border-top:1px solid rgba(250,249,245,.16); }
.t6 .big{ font:italic 200 clamp(64px,15cqw,300px)/.86 var(--serif); letter-spacing:-.035em; white-space:nowrap; }
.t6 .s-lab{ color:var(--light); text-align:right; padding-bottom:1.6cqw; }
.p6-band{ margin:4cqw 0 0; }
.p6-band img{ width:100%; height:auto; display:block; }
.p6-fin{ background:#2C2D20; color:var(--paper); padding:8cqw 7cqw; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:6cqw; align-items:end; }
.p6-fin .big{ font:italic 200 clamp(56px,8cqw,150px)/.9 var(--serif); letter-spacing:-.03em; margin:0; }
@container (max-width:600px){ .t6{ grid-template-columns:1fr; gap:8px; padding:18px 20px 22px; } .t6 .s-lab{ text-align:left; padding:0; } .p6-head{ padding:30px 20px 20px; } .p6-fin{ grid-template-columns:1fr; padding:56px 20px; gap:30px; } }

/* ---------- phones and tablets: no animated blur and no clip-path wipes (both repaint every frame) ---------- */
@media (hover:none){
  .hero.play .hero-by, .hero.play .bar{ animation-name:fadein; }
  .b2.pre .w{ filter:none; }
  .b2.play .w{ animation-name:wordin-m; }
  [data-wipe]{ clip-path:none; transition:opacity .9s var(--ease), transform 1.2s var(--ease); }
}
@keyframes wordin-m{ from{ opacity:0; transform:translateY(-.35em); } to{ opacity:1; transform:none; } }