/* The Starmates, v2 — the reading pages, Gift and Prices.
   The idea: the page is the reading. The parts a parent asks about are shown as the reading's own paper:
   its contents page, its cover with their child's name on it, its sample pages, and the order slip with the price.
   Everything else is type on the ground, set large. Sections are told apart by space and by a change of field,
   never by lines, outlines or shadows at rest. */

.page{position:relative;z-index:1;overflow-x:clip}
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut)}
section{scroll-margin-top:84px}

/* type */
h1{font-family:var(--display);font-weight:360;font-variation-settings:"SOFT" 100,"opsz" 144;font-size:var(--t-hero);
  line-height:.96;letter-spacing:-.03em;text-wrap:balance}
h2{font-family:var(--display);font-weight:380;font-variation-settings:"SOFT" 100,"opsz" 120;font-size:var(--t-h2);
  line-height:1.02;letter-spacing:-.022em;text-wrap:balance}
h1 em,h2 em{font-style:normal}
h3{font-family:var(--display);font-weight:420;font-variation-settings:"SOFT" 100,"opsz" 48;font-size:clamp(23px,1vw + 17px,30px);
  line-height:1.14;letter-spacing:-.01em;text-wrap:balance}
.lead{font-size:var(--t-lead);line-height:1.42;text-wrap:pretty}
.note{font-size:var(--t-small);color:var(--muted);line-height:1.45}
p{text-wrap:pretty}
.measure{max-width:36em}
.hl{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:.22em}
.hl a,a.hl{text-decoration-color:var(--gold)}

/* ---------- 1. the opening: title and the hook on the left, the starfish floating on the right ---------- */
.hero{position:relative;padding-top:clamp(104px,14vh,150px);padding-bottom:clamp(64px,8vw,120px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero-txt{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px);min-width:0}
.hero-txt .sub{font-family:var(--display);font-variation-settings:"SOFT" 100;font-size:clamp(21px,1.1vw + 15px,30px);line-height:1.2;
  letter-spacing:-.01em;margin-top:-4px;max-width:20em}
.hero-txt .lead{max-width:29em}
.hero-txt .two{max-width:34em}
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--t-small);color:var(--muted)}
.facts li{display:flex;align-items:center;gap:8px}
.facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.incl-line{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;max-width:36em;padding:16px 18px;border-radius:16px;
  background:var(--band);color:var(--band-fg);font-size:17px;line-height:1.45}
.incl-line svg{width:22px;height:22px;margin-top:1px;color:var(--gold-on-band)}
.incl-line a{color:inherit;text-decoration-color:var(--gold-on-band)}
.incl-line .hl{text-decoration-color:var(--gold-on-band)}

/* the floating photographed starfish (or stones, for Gift), in front of one planet cut by the edge of the screen */
.hero-art{position:relative;display:grid;place-items:center;min-width:0;aspect-ratio:1}
.hero-art .planet{position:absolute;width:100%;max-width:none;right:-36%;top:-4%;opacity:var(--planet-o,.9);pointer-events:none;user-select:none;
  animation:spin 420s linear infinite}
:root[data-sky="moon"]{--planet-o:.85}
.floater{position:relative;z-index:1;width:min(100%,560px);display:grid;place-items:center}
.floater img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 34px 28px rgba(30,20,40,.3));animation:drift 9s ease-in-out infinite} /* taste-skill-ignore: the photographed starfish floats; its shadow is the floor */
.floater.gift img{animation-name:bob}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hero-art{order:-1;width:min(84%,420px);justify-self:center;margin-bottom:-8px;aspect-ratio:1}
  .hero-art .planet{width:86%;right:-26%;top:4%}
}

/* ---------- 2. why this one: each claim on its own row, the line from the reading set large ---------- */
.why{padding-block:var(--sec) 0}
.why h2{max-width:13em}
.claims{margin-top:clamp(44px,6vw,88px);display:flex;flex-direction:column;gap:clamp(48px,6vw,96px)}
.claims li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:16px clamp(24px,5vw,80px);align-items:start}
.claims h3{padding-top:.25em}
.claims .say{display:flex;flex-direction:column;gap:16px;min-width:0}
.claims blockquote{font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 72;font-weight:340;font-size:clamp(24px,1vw + 19px,34px);
  line-height:1.2;letter-spacing:-.012em;text-wrap:balance;max-width:27em}
.claims blockquote::before{content:"";display:block;width:34px;height:34px;margin-bottom:14px;background:var(--gold);
  -webkit-mask:var(--fish) center/contain no-repeat;mask:var(--fish) center/contain no-repeat}
.claims .say p{max-width:36em;color:var(--muted)}
@media (max-width:760px){ .claims li{grid-template-columns:minmax(0,1fr)} .claims h3{padding-top:0} }

/* questions parents bring us: a run of real questions, each with its short answer, on a field of its own */
.asks{margin-top:var(--sec);padding-block:clamp(64px,8vw,120px);background:var(--sheet-2);color:var(--sheet-fg)}
:root[data-sky="moon"] .asks{background:#151827;color:var(--fg)}
.asks h2{max-width:14em}
.asks ul{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,64px) clamp(24px,4vw,56px)}
.asks q{display:block;font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:380;font-size:clamp(23px,.8vw + 18px,29px);line-height:1.18;
  letter-spacing:-.01em;quotes:"“" "”";text-wrap:balance}
.asks p{margin-top:12px;color:var(--sheet-muted);font-size:17px}
:root[data-sky="moon"] .asks p{color:var(--muted)}
.asks li:nth-child(3n+2){padding-top:clamp(0px,3vw,40px)}
@media (max-width:900px){ .asks ul{grid-template-columns:repeat(2,minmax(0,1fr))} .asks li:nth-child(3n+2){padding-top:0} }
@media (max-width:600px){ .asks ul{grid-template-columns:minmax(0,1fr)} }

/* ---------- 3. what's inside: the reading's own contents page, on paper with a cut top and bottom ---------- */
.inside{padding-top:var(--sec)}
.inside .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.inside .intro{display:flex;flex-direction:column;gap:18px}
.inside .intro p{max-width:26em;color:var(--muted)}
.contents{position:relative;padding:clamp(40px,5vw,64px) clamp(20px,3.6vw,52px);background:var(--sheet);color:var(--sheet-fg);
  -webkit-mask:linear-gradient(#000,#000) 0 12px/100% calc(100% - 24px) no-repeat, /* taste-skill-ignore: mask that cuts the paper edge, not a fill */
    radial-gradient(circle at 10px 12px,#000 9.5px,transparent 10px) 0 0/20px 12px repeat-x, /* taste-skill-ignore: mask that cuts the paper edge, not a fill */
    radial-gradient(circle at 10px 0,#000 9.5px,transparent 10px) 0 100%/20px 12px repeat-x; /* taste-skill-ignore: mask that cuts the paper edge, not a fill */
  mask:linear-gradient(#000,#000) 0 12px/100% calc(100% - 24px) no-repeat, /* taste-skill-ignore: mask that cuts the paper edge, not a fill */
    radial-gradient(circle at 10px 12px,#000 9.5px,transparent 10px) 0 0/20px 12px repeat-x, /* taste-skill-ignore: mask that cuts the paper edge, not a fill */
    radial-gradient(circle at 10px 0,#000 9.5px,transparent 10px) 0 100%/20px 12px repeat-x} /* taste-skill-ignore: mask that cuts the paper edge, not a fill */
.contents .top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(20px,3vw,36px)}
.contents .top b{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:400;font-size:clamp(26px,2vw + 14px,38px);letter-spacing:-.015em}
.contents .top .wm{width:132px;line-height:0;color:var(--sheet-fg)}
.contents .top .wm svg{width:100%;height:auto;fill:currentColor}
.contents details{border-radius:12px;transition:background-color .25s ease}
.contents details + details{margin-top:2px}
.contents summary{display:grid;grid-template-columns:auto minmax(16px,1fr) auto 20px;align-items:baseline;gap:10px;min-height:52px;padding:12px 10px;cursor:pointer;
  list-style:none;border-radius:12px}
.contents summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){ .contents summary:hover{background:var(--sheet-2)} }
.contents .t{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:420;font-size:clamp(20px,.6vw + 16px,25px);line-height:1.15}
.contents .lead-dots{align-self:end;margin-bottom:.42em;height:4px;background:radial-gradient(circle,var(--gold) 1.6px,transparent 2px) 0 50%/9px 4px repeat-x;opacity:.9} /* taste-skill-ignore: dot leader of round dots, as on a printed menu */
.contents .v{font-size:15px;color:var(--sheet-muted);text-align:right;white-space:nowrap}
.contents summary::after{content:"";width:9px;height:9px;justify-self:center;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .3s ease;align-self:center}
.contents details[open] > summary::after{transform:rotate(-135deg) translate(-2px,-1px)}
.contents details[open]{background:var(--sheet-2)}
.contents details p{padding:0 10px 18px;max-width:38em;font-size:17px;line-height:1.55;color:var(--sheet-fg)}
.contents details p em{font-family:var(--display);font-variation-settings:"SOFT" 100;font-style:italic}
.contents .plus .t::before{content:"+ ";color:var(--gold-fg)}
@media (max-width:900px){ .inside .wrap{grid-template-columns:minmax(0,1fr)} .inside .intro{position:static} }
@media (max-width:520px){
  .contents summary{grid-template-columns:minmax(0,1fr) 20px;gap:2px 10px}
  .contents .lead-dots{display:none}
  .contents .v{grid-column:1;grid-row:2;text-align:left;white-space:normal}
  .contents summary::after{grid-column:2;grid-row:1}
}

/* ---------- 4. take a look: their own cover, made live, then the sample pages ---------- */
.look{padding-top:var(--sec)}
.look .wrap > h2{max-width:12em}
.maker{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:center}
.a4{position:relative;aspect-ratio:210/297;background:var(--sheet);color:var(--sheet-fg);overflow:hidden}
.cover{display:flex;flex-direction:column;align-items:center;text-align:center;padding:9% 9% 8%;container-type:inline-size;transform:rotate(-1.5deg)}
.cover .wm{width:42%;line-height:0}
.cover .wm svg{width:100%;height:auto;fill:var(--sheet-fg)}
.cover .fish{width:30%;margin-top:auto;color:var(--gold)}
.cover .fish svg{display:block;width:100%;height:auto}
.cover .kind{margin-top:6cqw;font-size:4.2cqw;color:var(--sheet-muted)}
.cover .name{margin-top:1.5cqw;font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 144;font-weight:360;font-size:13cqw;line-height:.95;
  letter-spacing:-.03em;overflow-wrap:anywhere;transition:opacity .25s ease}
.cover .born{margin-top:4cqw;font-size:3.9cqw;line-height:1.4;color:var(--sheet-fg)}
.cover .cal{margin-top:auto;padding-top:5cqw;font-size:3.5cqw;line-height:1.4;color:var(--sheet-muted)}
.cover .cal b{color:var(--gold-fg);font-weight:500}
.cover .sign{color:var(--gold-fg)}
.maker form{display:flex;flex-direction:column;gap:20px;max-width:30em}
.maker form h3{font-size:clamp(25px,1.2vw + 17px,34px)}
.field{display:flex;flex-direction:column;gap:8px;font-weight:500;font-size:16px}
.field input,.field select{font:inherit;font-weight:400;font-size:18px;min-height:52px;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);
  background:var(--sheet);color:var(--sheet-fg);transition:border-color .2s ease,box-shadow .2s ease}
.field input:focus,.field select:focus{outline:none;border-color:var(--sheet-fg);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 28%,transparent)} /* taste-skill-ignore: focus ring */
.field small{font-weight:400;color:var(--muted)}
.maker .note{max-width:34em}

/* the sample pages: a row you drag or swipe, each sheet straightens as you point at it */
.samples{margin-top:clamp(56px,7vw,104px)}
.samples .row{display:flex;gap:clamp(16px,2.4vw,32px);overflow-x:auto;scroll-snap-type:x mandatory;padding:20px var(--gut) 34px;
  margin-inline:calc(-1 * var(--gut));scroll-padding-inline:var(--gut);scrollbar-width:none}
.samples .row::-webkit-scrollbar{display:none}
.samples figure{flex:0 0 clamp(200px,20vw,250px);scroll-snap-align:start;display:flex;flex-direction:column;gap:14px}
.samples .a4{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14%;text-align:center;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.samples figure:nth-child(odd) .a4{transform:rotate(-1.4deg)}
.samples figure:nth-child(even) .a4{transform:rotate(1.2deg) translateY(8px)}
@media (hover:hover) and (pointer:fine){ .samples figure:hover .a4{transform:rotate(0) translateY(-8px)} }
.samples .a4 b{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:400;font-size:22px;line-height:1.12}
.samples .a4 span{font-size:14px;color:var(--sheet-muted)}
.samples .a4 svg{width:34%;color:var(--gold)}
.samples figcaption{font-size:var(--t-small);color:var(--muted);line-height:1.4}
.samples .bar-p{height:5px;border-radius:5px;background:var(--chip);margin-top:4px;overflow:hidden}
.samples .bar-p i{display:block;height:100%;width:30%;background:var(--fg);border-radius:5px;transition:transform .15s linear;transform-origin:left}
@media (max-width:900px){ .maker{grid-template-columns:minmax(0,1fr)} .maker .a4{width:min(88%,380px);justify-self:center} }
@media (max-width:760px){ .samples figure{flex-basis:62%} }

/* ---------- 5. how it works: three moments on one field ---------- */
.how{margin-top:var(--sec);padding-block:clamp(64px,8vw,120px);background:#F7F2E8;color:var(--sheet-fg)}
:root[data-sky="moon"] .how{background:#151827;color:var(--fg)}
.how ol{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.how ol.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.how li{display:flex;flex-direction:column;gap:10px;min-width:0}
.how li:nth-child(2){margin-top:clamp(0px,4vw,56px)}
.how li:nth-child(4){margin-top:clamp(0px,4vw,56px)}
.how .when{font-family:var(--display);font-variation-settings:"SOFT" 100;font-style:italic;font-weight:360;font-size:clamp(40px,3vw + 20px,64px);line-height:1;color:var(--gold-fg)}
:root[data-sky="moon"] .how .when{color:var(--gold)}
.how p{color:var(--sheet-muted);font-size:17px}
:root[data-sky="moon"] .how p{color:var(--muted)}
@media (max-width:900px){ .how ol.four{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){
  .how ol,.how ol.four{grid-template-columns:minmax(0,1fr)}
  .how li:nth-child(n){margin-top:0}
}

/* ---------- 6. the price: an order slip with a tear-off stub ---------- */
.price{padding-top:var(--sec)}
.slip{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--sheet);color:var(--sheet-fg);
  -webkit-mask:radial-gradient(circle at 41.6667% 0,transparent 16px,#000 16.5px) 0 0/100% 51% no-repeat,radial-gradient(circle at 41.6667% 100%,transparent 16px,#000 16.5px) 0 100%/100% 51% no-repeat; /* taste-skill-ignore: mask that cuts the paper edge, not a fill */
  mask:radial-gradient(circle at 41.6667% 0,transparent 16px,#000 16.5px) 0 0/100% 51% no-repeat,radial-gradient(circle at 41.6667% 100%,transparent 16px,#000 16.5px) 0 100%/100% 51% no-repeat} /* taste-skill-ignore: mask that cuts the paper edge, not a fill */
.slip .stub{display:flex;flex-direction:column;gap:16px;padding:clamp(28px,4vw,56px);background:var(--sheet-2);min-width:0;border-right:4px dotted rgba(27,30,43,.28)}
.slip .stub .for{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:420;font-size:clamp(25px,1vw + 18px,32px);line-height:1.1;letter-spacing:-.01em}
.num{font-family:var(--figures);font-variation-settings:"opsz" 72;font-weight:380;font-variant-numeric:lining-nums;font-size:clamp(88px,10vw,148px);
  line-height:.82;letter-spacing:-.04em;display:flex;align-items:flex-start;gap:.04em}
.num sup{font-size:.36em;line-height:1;margin-top:.12em;letter-spacing:0}
.num .paren{font-family:var(--ui);font-size:15px;letter-spacing:0;line-height:1.3;font-weight:500;color:var(--gold-fg);max-width:10em;margin:.6em 0 0 .6em}
.slip .per{font-size:var(--t-small);color:var(--sheet-muted)}
.slip .body{display:flex;flex-direction:column;gap:22px;padding:clamp(28px,4vw,56px);min-width:0}
.slip .body h3{font-size:clamp(22px,.8vw + 17px,27px)}
.incl{display:flex;flex-direction:column;gap:12px}
.incl li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:17px;line-height:1.4}
.incl svg{width:20px;height:20px;margin-top:2px;color:var(--gold)}
.incl li.sub{display:block;padding-left:34px;margin-top:-6px;color:var(--sheet-muted);font-size:15.5px}
.slip .fine{font-size:var(--t-small);color:var(--sheet-muted);max-width:36em}
.slip .acts .btn.quiet{background:var(--sheet);color:var(--sheet-fg)}
.slip .acts .btn.quiet:hover{background:var(--gold);color:#171A29}
.wait-note{font-size:var(--t-small);color:var(--sheet-muted)}
@media (max-width:820px){
  .slip{grid-template-columns:minmax(0,1fr);
    -webkit-mask:radial-gradient(circle at 0 var(--cut-y,50%),transparent 16px,#000 16.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% var(--cut-y,50%),transparent 16px,#000 16.5px) 100% 0/51% 100% no-repeat; /* taste-skill-ignore: mask that cuts the paper edge, not a fill */
    mask:radial-gradient(circle at 0 var(--cut-y,50%),transparent 16px,#000 16.5px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% var(--cut-y,50%),transparent 16px,#000 16.5px) 100% 0/51% 100% no-repeat} /* taste-skill-ignore: mask that cuts the paper edge, not a fill */
  .slip .stub{border-right:0;border-bottom:4px dotted rgba(27,30,43,.28)}
}

/* ---------- 7. what next: a band of the other ground, with the next reading's card and a planet at its edge ---------- */
.next{position:relative;margin-top:var(--sec);background:var(--band);color:var(--band-fg);overflow:hidden}
.next .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px);align-items:center;
  padding-block:clamp(72px,9vw,140px)}
.next .card{width:min(100%,300px);aspect-ratio:4/3;border-radius:10px;background:var(--gold-on-band);color:var(--band);transform:rotate(-4deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){ .next:hover .card{transform:rotate(-1deg) translateY(-6px)} }
.next .card svg{display:block;width:100%;height:100%}
.next .card .cutf{fill:var(--gold-on-band);stroke:var(--gold-on-band)}
.next .txt{display:flex;flex-direction:column;gap:20px;min-width:0}
.next .txt > p:not(.lead){color:var(--band-muted);max-width:36em}
.next .lead{max-width:30em}
.next .btn{background:var(--band-fg);color:var(--band)}
.next .btn:hover{background:var(--gold-on-band);color:var(--band)}
.next .planet{position:absolute;z-index:0;width:min(40vw,560px);left:-9vw;top:50%;translate:0 -50%;opacity:.9;pointer-events:none;animation:spin 520s linear infinite reverse}
.next .incl-line{background:color-mix(in srgb,var(--band-fg) 8%,transparent)}
@media (max-width:820px){
  .next .wrap{grid-template-columns:minmax(0,1fr)}
  .next .card{width:min(70%,260px)}
  .next .planet{width:76vw;left:-30vw;top:40px;translate:none;opacity:.85}
}

/* ---------- the footer: the name built large, then the plain facts ---------- */
.foot{position:relative;z-index:1;padding-top:clamp(72px,9vw,140px);padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.bigmark{line-height:0;color:var(--logo)}
.bigmark svg{display:block;width:100%;height:auto;fill:currentColor}
.foot-grid{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px clamp(16px,2vw,28px);font-size:16px}
.foot-grid nav{grid-column:span 3;display:flex;flex-direction:column;gap:4px}
.foot-grid nav a{text-decoration:none;padding:4px 0}
.foot-grid nav a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.foot-grid .contact-col{grid-column:span 6;display:flex;flex-direction:column;gap:14px}
.foot-grid .contact-col a{font-family:var(--display);font-variation-settings:"SOFT" 100;font-size:clamp(22px,1vw + 16px,30px);text-decoration-color:var(--gold)}
.foot-grid .disclaimer{color:var(--muted);font-size:var(--t-small);max-width:40em}
.foot .legal{margin-top:36px;font-size:var(--t-small);color:var(--muted)}
@media (max-width:760px){
  .foot-grid nav{grid-column:span 6}
  .foot-grid .contact-col{grid-column:1/-1}
  .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* ---------- the buy bar: phones only, once the opening's button has gone ---------- */
.buybar{position:fixed;z-index:650;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between; /* taste-skill-ignore: a sticky bar that floats over the page */
  gap:12px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--band);color:var(--band-fg);box-shadow:0 14px 30px -10px rgba(0,0,0,.45); /* taste-skill-ignore: sticky bar floats over the page */
  transform:translateY(140%);transition:transform .3s cubic-bezier(.23,1,.32,1)}
.buybar.on{transform:none}
.buybar span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.buybar b{font-family:var(--figures);font-size:22px;font-weight:420;font-variant-numeric:lining-nums}
.buybar small{font-size:14px;color:var(--band-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .btn{background:var(--gold-on-band);color:var(--band);min-height:46px;padding:10px 20px;font-size:16px}
@media (min-width:821px){ .buybar{display:none} }

/* ---------- the waitlist sheet: slides up from the bottom on a phone, a centred card on a computer ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:900;display:grid;align-items:end;justify-items:center}
.sheet-wrap .scrim{position:absolute;inset:0;background:rgba(9,10,18,.55);opacity:0;transition:opacity .28s ease}
.sheet-wrap.open .scrim{opacity:1}
.wl{position:relative;width:min(100%,560px);max-height:calc(100dvh - 24px);overflow-y:auto;padding:28px var(--gut) calc(24px + env(safe-area-inset-bottom,0px));
  border-radius:26px 26px 0 0;background:var(--sheet);color:var(--sheet-fg);transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1)}
.sheet-wrap.open .wl{transform:none}
@media (min-width:700px){ .sheet-wrap{align-items:center} .wl{border-radius:26px;padding:40px;transform:translateY(24px) scale(.98);opacity:0;transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
  .sheet-wrap.open .wl{transform:none;opacity:1} }
.wl .x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sheet-2)}
.wl .x svg{width:16px;height:16px}
.wl form,.wl .done{display:flex;flex-direction:column;gap:18px}
.wl h2{font-size:clamp(32px,4vw,44px);padding-right:44px}
.wl p{color:var(--sheet-muted);font-size:17px}
.wl .field input,.wl .field select{border-color:rgba(27,30,43,.2)}
.wl fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.wl legend{font-weight:500;font-size:16px;margin-bottom:8px;width:100%}
.wl .opt{position:relative}
.wl .opt input{position:absolute;opacity:0;inset:0}
.wl .opt span{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:999px;background:var(--sheet-2);font-weight:500;transition:background-color .2s ease,color .2s ease}
.wl .opt input:checked + span{background:var(--sheet-fg);color:var(--sheet)}
.wl .opt input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.wl .err{color:#A3341C;font-weight:500;font-size:15px}
.wl .btn{align-self:stretch;min-height:54px;font-size:18px;background:var(--sheet-fg);color:var(--sheet)}
.wl .btn:hover{background:var(--gold);color:#171A29}
.wl .fine{font-size:14.5px}
body.locked{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .sheet-wrap .scrim,.wl,.buybar{transition:none} }

/* ---------- entrances (only when the script runs; content is visible without it) ---------- */
.rise-ready [data-rise] > *{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.23,1,.32,1),transform .55s cubic-bezier(.23,1,.32,1)}
.rise-ready [data-rise] > .in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .floater img,.hero-art .planet,.next .planet{animation:none}
  .rise-ready [data-rise] > *{opacity:1;transform:none;transition:none}
}

/* the starfish as a mask, for the gold marks */
:root{--fish:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.66 9.39Q12.29 6.68 16.29 2.89Q15.50 6.93 14.54 10.26L14.54 10.26Q17.63 10.98 22.47 13.61Q18.38 14.10 14.91 14.22L14.91 14.22Q15.19 17.38 14.18 22.80Q12.45 19.06 11.26 15.80L11.26 15.80Q8.34 17.04 2.88 17.75Q5.90 14.96 8.63 12.82L8.63 12.82Q6.55 10.42 4.18 5.45Q7.78 7.45 10.66 9.39Z' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- what the package includes: the documents themselves, side by side on paper ---------- */
.kinds{padding-top:var(--sec)}
.kinds h2{max-width:14em}
.spread{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:clamp(18px,2.6vw,36px);align-items:start}
.doc{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3vw,44px);background:var(--sheet);color:var(--sheet-fg);min-width:0}
.doc:nth-child(odd){transform:rotate(-.6deg)}
.doc:nth-child(even){transform:rotate(.5deg);margin-top:clamp(0px,3vw,40px)}
.doc .card{width:120px;aspect-ratio:4/3;border-radius:8px;background:var(--sheet-fg);color:var(--sheet);margin-bottom:8px;transform:rotate(-3deg)}
.doc .card svg{display:block;width:100%;height:100%}
.doc .card .cutf{fill:var(--sheet-fg);stroke:var(--sheet-fg)}
.doc h3{font-size:clamp(26px,1.2vw + 18px,36px)}
.doc .v{margin-top:-8px;font-size:15px;color:var(--gold-fg);font-weight:500}
.doc p{font-size:17px;color:var(--sheet-fg)}
.doc blockquote{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:360;font-size:clamp(21px,.6vw + 17px,25px);line-height:1.25;
  padding:16px 18px;border-radius:14px;background:var(--sheet-2)}
.doc .more{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;gap:6px;font-weight:500;text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:2px}
@media (max-width:820px){ .spread{grid-template-columns:minmax(0,1fr)} .doc:nth-child(n){transform:none;margin-top:0} }

/* the cover maker with two children */
.maker .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 14px}
@media (max-width:420px){ .maker .pair{grid-template-columns:minmax(0,1fr)} }

/* on a phone the example lines and the questions become rows you swipe, one and a bit on screen at a time,
   so the page stays short and the next one always peeks in */
@media (max-width:760px){
  .claims,.asks ul{flex-direction:row;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);padding-bottom:6px}
  .claims::-webkit-scrollbar,.asks ul::-webkit-scrollbar{display:none}
  .claims > li,.asks li{flex:0 0 84%;scroll-snap-align:start}
  .claims > li{display:flex;flex-direction:column;gap:12px;padding:22px 20px;border-radius:20px;background:var(--sheet);color:var(--sheet-fg)}
  .claims > li .say p{color:var(--sheet-muted)}
  .claims blockquote{font-size:24px}
  .asks li{padding:20px;border-radius:20px;background:var(--sheet);color:var(--sheet-fg)}
  .asks li p{color:var(--sheet-muted)!important}
  :root[data-sky="moon"] .asks li{background:#1D2033;color:var(--fg)}
  :root[data-sky="moon"] .asks li p{color:var(--muted)!important}
  .swipe-hint{display:block}
}
.swipe-hint{display:none;margin-top:14px;font-size:15px;color:var(--muted)}

/* ---------- the family-shape switch above an order slip (Family Kit, Prices) ---------- */
.price-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(28px,4vw,48px);max-width:44em}
.price-head p{color:var(--muted)}
.switch{align-self:flex-start;display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--chip)}
.switch button{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 20px 8px 14px;border-radius:999px;font-weight:500;font-size:17px;
  transition:background-color .25s ease,color .25s ease}
.switch button span{display:block;width:38px;line-height:0}
.switch button svg{width:100%;height:auto;color:currentColor}
.switch button .cutf{fill:var(--bg);stroke:var(--bg)}
.switch button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.switch button[aria-pressed="true"] .cutf{fill:var(--fg);stroke:var(--fg)}
.switch button:not([aria-pressed="true"]):hover{background:var(--chip)}
.slip,.plans{transition:opacity .2s ease}
.swap{opacity:0}
.incl li small{display:block;color:var(--sheet-muted);font-size:15px}
.slip .pattern{padding:14px 16px;border-radius:14px;background:var(--sheet-2);font-size:16px}
.slip .pattern b{font-weight:600}
@media (prefers-reduced-motion:reduce){ .slip,.plans{transition:none} }

/* ---------- Gift: the choice set like a menu on paper, beside the card it makes ---------- */
.giftmaker h2{max-width:14em}
.giftmaker .intro-p{margin-top:16px;max-width:36em;color:var(--muted)}
.giftmaker .intro-p a{text-decoration-color:var(--gold)}
.gm{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:start}
.gm form{display:flex;flex-direction:column;gap:18px;min-width:0}
.menu-list-sheet{border:0;margin:0;padding:clamp(18px,2.4vw,30px);background:var(--sheet);color:var(--sheet-fg);display:flex;flex-direction:column;gap:2px}
.menu-list-sheet legend{float:left;width:100%;font-family:var(--display);font-variation-settings:"SOFT" 100;font-size:clamp(24px,1vw + 18px,32px);margin-bottom:10px;padding:0 10px}
.menu-list-sheet .item{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 12px 12px 46px;border-radius:14px;cursor:pointer;transition:background-color .2s ease}
.menu-list-sheet .item:hover{background:var(--sheet-2)}
.menu-list-sheet input{position:absolute;left:14px;top:17px;width:20px;height:20px;margin:0;accent-color:#1B1E2B}
.menu-list-sheet .item:has(input:checked){background:var(--sheet-2)}
.menu-list-sheet .row1{display:grid;grid-template-columns:auto minmax(16px,1fr) auto;gap:10px;align-items:baseline}
.menu-list-sheet b{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:420;font-size:clamp(20px,.5vw + 17px,24px)}
.menu-list-sheet em{font-style:normal;font-family:var(--figures);font-size:21px;font-variant-numeric:lining-nums;white-space:nowrap}
.menu-list-sheet small{font-size:15.5px;color:var(--sheet-muted);max-width:34em}
.lead-dots{align-self:end;margin-bottom:.42em;height:4px;background:radial-gradient(circle,var(--gold) 1.6px,transparent 2px) 0 50%/9px 4px repeat-x} /* taste-skill-ignore: dot leader of round dots, as on a printed menu */
.gm-card{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
.giftcard{aspect-ratio:1.6;background:#FBF8F2;color:#1B1E2B;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2cqw;padding:7% 8%;text-align:center;container-type:inline-size;transform:rotate(-2deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){ .gm-card:hover .giftcard{transform:rotate(0)} }
.giftcard .wm{width:34%;line-height:0}
.giftcard .wm svg{width:100%;height:auto;fill:#1B1E2B}
.giftcard .gc-art{width:13%;color:var(--gold)}
.giftcard .gc-art svg{width:100%;height:auto}
.giftcard .gc-art .cutf{fill:#FBF8F2;stroke:#FBF8F2}
.giftcard .gc-what{font-family:var(--display);font-variation-settings:"SOFT" 100;font-size:6.2cqw;line-height:1.05;letter-spacing:-.01em}
.giftcard .gc-for{font-size:3.6cqw}
.giftcard .gc-msg{font-family:var(--display);font-style:italic;font-variation-settings:"SOFT" 100;font-size:3.6cqw;color:#55525A;min-height:1.2em}
.giftcard .gc-code{font-size:2.8cqw;color:#7A5716}
.gm-buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.gm-buy .num{font-size:clamp(64px,6vw,96px)}
.gm-buy .num.words{font-family:var(--display);font-size:clamp(34px,3vw,46px);letter-spacing:-.02em;line-height:1}
.gm-buy .wait-note{flex-basis:100%;color:var(--muted)}
@media (max-width:900px){ .gm{grid-template-columns:minmax(0,1fr)} .gm-card{position:static;order:-1} }
@media (max-width:420px){ .menu-list-sheet .row1{grid-template-columns:minmax(0,1fr) auto} .menu-list-sheet .row1 .lead-dots{display:none} }

/* occasions: a printed list in two columns */
.occasions{padding-top:var(--sec)}
.occasions h2{max-width:14em}
.occ{margin-top:clamp(32px,4vw,56px);columns:2;column-gap:clamp(32px,5vw,80px)}
.occ div{break-inside:avoid;padding-block:14px}
.occ dt{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:420;font-size:clamp(22px,.6vw + 18px,27px);line-height:1.15}
.occ dd{margin-top:4px;color:var(--muted);font-size:17px;max-width:30em}
.occ .last dt{color:var(--gold-fg)}
:root[data-sky="moon"] .occ .last dt{color:var(--gold)}
.more-p{margin-top:clamp(28px,4vw,48px);color:var(--muted);max-width:44em}
.more-p a{color:var(--fg);text-decoration-color:var(--gold)}
@media (max-width:700px){ .occ{columns:1} }

/* ---------- Prices: two printed price lists, one child and two children, side by side ---------- */
.phead{padding-top:clamp(120px,16vh,180px)}
.phead h1{font-size:clamp(44px,6.4vw,96px);max-width:11em}
.phead .lead{margin-top:20px;max-width:30em;color:var(--muted)}
.pricelist{padding-top:clamp(48px,6vw,88px)}
.lists{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.plist{background:var(--sheet);color:var(--sheet-fg);padding:clamp(22px,3vw,40px)}
.plist:nth-child(2){margin-top:clamp(0px,4vw,56px)}
.plist h2{display:flex;align-items:center;gap:14px;font-size:clamp(30px,2.6vw,42px);margin-bottom:clamp(10px,1.6vw,20px)}
.plist h2 span{width:58px;line-height:0;flex:none}
.plist h2 svg{width:100%;height:auto;color:var(--gold)}
.plist h2 .cutf{fill:var(--sheet);stroke:var(--sheet)}
.pitem{display:grid;grid-template-columns:84px minmax(0,1fr);gap:18px;padding:clamp(18px,2vw,26px) 0}
.pitem + .pitem{position:relative;padding-top:calc(clamp(18px,2vw,26px) + 6px)}
.pitem + .pitem::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--sheet-2)}
.pcard{width:84px;aspect-ratio:4/3;border-radius:7px;background:var(--sheet-fg);color:var(--sheet);transform:rotate(-3deg);margin-top:4px}
.pitem:nth-child(2) .pcard{transform:rotate(2.5deg)}
.pcard svg{display:block;width:100%;height:100%}
.pcard .cutf{fill:var(--sheet-fg);stroke:var(--sheet-fg)}
.ptxt{display:flex;flex-direction:column;gap:8px;min-width:0}
.pitem .row1{display:grid;grid-template-columns:auto minmax(16px,1fr) auto;gap:12px;align-items:baseline}
.pitem h3{font-size:clamp(23px,1vw + 16px,30px)}
.pitem .pnum{font-family:var(--figures);font-variation-settings:"opsz" 72;font-weight:380;font-variant-numeric:lining-nums;font-size:clamp(34px,2.2vw + 18px,52px);line-height:.9;letter-spacing:-.03em;white-space:nowrap}
.pitem .pnum sup{font-size:.42em;vertical-align:top;position:relative;top:.18em}
.pitem .most{font-size:15px;font-weight:600;color:var(--gold-fg)}
.pitem .who{font-size:16.5px;color:var(--sheet-fg);max-width:34em}
.pitem .per{font-size:15px;color:var(--sheet-muted)}
.pitem details summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:500;list-style:none;
  text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:.3em}
.pitem details summary::-webkit-details-marker{display:none}
.pitem details summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .3s ease}
.pitem details[open] summary::after{transform:rotate(-135deg)}
.pitem details .incl{margin:6px 0 10px}
.pitem .acts{margin-top:6px}
.pitem .acts .btn{min-height:44px;padding:10px 20px;font-size:16px}
.pitem .acts .btn.quiet{background:var(--sheet-2);color:var(--sheet-fg)}
.pitem .acts .btn.quiet:hover{background:var(--gold);color:#171A29}
.fine-p{margin-top:clamp(28px,4vw,48px);max-width:46em;color:var(--muted)}
.fine-p a{color:var(--fg);text-decoration-color:var(--gold)}
@media (max-width:900px){ .lists{grid-template-columns:minmax(0,1fr)} .plist:nth-child(2){margin-top:0} }
@media (max-width:480px){
  .pitem{grid-template-columns:minmax(0,1fr)}
  .pcard{width:72px}
  .pitem .row1{grid-template-columns:minmax(0,1fr) auto}
  .pitem .row1 .lead-dots{display:none}
}

/* a planet beside a section's heading, cut by the edge of the screen; it never sits under text */
.with-planet{position:relative}
.with-planet > .side-planet{position:absolute;z-index:0;right:calc(-1 * var(--gut) - 6vw);top:-40px;width:clamp(160px,22vw,340px);pointer-events:none;user-select:none;
  animation:spin 480s linear infinite}
.with-planet > :not(.side-planet){position:relative;z-index:1}
@media (max-width:760px){ .with-planet > .side-planet{width:44vw;right:calc(-1 * var(--gut) - 8vw);top:-34px;opacity:.95} }
@media (prefers-reduced-motion:reduce){ .with-planet > .side-planet{animation:none} }
@media (max-width:760px){ .with-planet > h2{max-width:calc(100% - 96px)} }
.how{overflow:hidden}
.how .with-planet > .side-planet{width:clamp(140px,15vw,230px);top:clamp(-120px,-8vw,-60px)}

@media (max-width:760px){ .how .with-planet > .side-planet{width:36vw;right:calc(-1 * var(--gut) - 6vw);top:-40px} .how .with-planet > h2{max-width:calc(100% - 90px)} }
.phead .with-planet > .side-planet.big,.with-planet > .side-planet.big{width:clamp(220px,30vw,460px);top:-60px}
@media (max-width:760px){ .with-planet > .side-planet.big{width:46vw;top:-40px} .phead h1{max-width:calc(100% - 90px)} }
.inside h2{font-size:clamp(32px,3.2vw,50px)}
#title{font-size:clamp(42px,6vw,92px)}
@media (max-width:760px){ .occasions .with-planet > .side-planet{width:36vw;right:calc(-1 * var(--gut) - 6vw);top:-40px} }
.pricelist .fine-p{max-width:min(46em,calc(100% - 300px))}
@media (max-width:760px){ .pricelist .fine-p{max-width:calc(100% - 110px)} }
.claims{gap:clamp(40px,4.4vw,72px)}
.why{padding-top:clamp(56px,7vw,110px)}

/* Prices with the one/two children switch: one sheet, the three packages side by side; on a phone, one under another */
.plist{transition:opacity .2s ease}
.plist.single .items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.plist.single .pitem{grid-template-columns:minmax(0,1fr);align-content:start;padding:clamp(20px,2vw,28px);border-radius:18px}
.plist.single .pitem + .pitem::before{display:none}
.plist.single .pitem + .pitem{padding-top:clamp(20px,2vw,28px)}
.plist.single .pitem.mid{background:var(--sheet-2)}
.plist.single .pitem .row1{grid-template-columns:minmax(0,1fr) auto}
.plist.single .pitem .row1 .lead-dots{display:none}
.plist.single .pitem .who{min-height:4.4em}
.plist.single .pitem .acts{flex-direction:column;align-items:stretch}
.plist.single .pitem.mid .acts .btn.quiet{background:var(--sheet)}
@media (max-width:900px){
  .plist.single .items{grid-template-columns:minmax(0,1fr)}
  .plist.single .pitem{grid-template-columns:84px minmax(0,1fr)}
  .plist.single .pitem .who{min-height:0}
  .plist.single .pitem .acts{flex-direction:row;align-items:center}
}
@media (max-width:480px){ .plist.single .pitem{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){ .plist{transition:none} }
@media (max-width:760px){
  .phead .with-planet > .side-planet.big{width:38vw;top:-56px;right:calc(-1 * var(--gut) - 10vw)}
  .phead .lead{max-width:calc(100% - 64px)}
}
@media (max-width:600px){ .plist.single{padding:8px} .plist.single .pitem{padding:18px 14px} }
/* Prices: the one/two children switch sits in the middle, above the sheet */
.pricelist .price-head{align-items:center;max-width:none}
.pricelist .switch{align-self:center}

/* ---------- the three lines at the price: delivery, made to order, data ---------- */
.assure{display:grid;gap:12px;padding:18px 20px;border-radius:16px;background:var(--sheet-2);font-size:15.5px;line-height:1.45}
.assure li{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:2px 14px}
.assure b{font-weight:600;color:var(--sheet-fg)}
.assure span{color:var(--sheet-muted)}
.assure a{color:var(--sheet-fg);text-decoration-color:var(--gold)}
@media (max-width:480px){ .assure li{grid-template-columns:minmax(0,1fr)} }
.assure-wrap{margin-top:clamp(24px,3vw,36px);max-width:46em}
.assure-wrap .assure{background:var(--chip)}
.assure-wrap .assure b,.assure-wrap .assure a{color:var(--fg)}
.assure-wrap .assure span{color:var(--muted)}

/* ---------- "in plain words" under a line that uses chart terms ---------- */
.claims .say p.plain{font-size:15.5px;line-height:1.45;margin-top:-4px}
.claims .plain b{font-weight:600;color:var(--gold-fg)}
@media (min-width:761px){ :root[data-sky="moon"] .claims .plain b{color:var(--gold)} }

/* ---------- the questions: four, in two columns ---------- */
.asks ul{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1040px}
.asks li:nth-child(3n+2){padding-top:0}
.asks li:nth-child(even){padding-top:clamp(0px,3vw,40px)}
@media (max-width:900px){ .asks li:nth-child(even){padding-top:0} }

/* ---------- who makes your reading: the founder's note, and the four hands a reading passes through ---------- */
section.who{padding-top:var(--sec)}
section.who .wrap,.who-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,3vw,44px) clamp(32px,5vw,80px);align-items:start}
.who-story{display:flex;flex-direction:column;gap:20px;min-width:0}
.who-story h2{max-width:12em}
.who-story .lead{font-family:var(--display);font-variation-settings:"SOFT" 100,"opsz" 72;font-weight:340;font-size:clamp(24px,1vw + 19px,33px);line-height:1.22;letter-spacing:-.01em;max-width:24em}
.who-story p:not(.lead){max-width:36em;color:var(--muted)}
.who-story .sign{font-family:var(--display);font-style:italic;font-variation-settings:"SOFT" 100;color:var(--fg)!important;font-size:19px}
.who-steps{counter-reset:s;display:flex;flex-direction:column;gap:6px;padding:clamp(22px,3vw,36px);background:var(--sheet);color:var(--sheet-fg);transform:rotate(.6deg);margin-top:clamp(0px,4vw,64px)}
.who-steps li{counter-increment:s;display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:2px 10px;padding:12px 0;border-bottom:1px dotted rgba(27,30,43,.28)}
.who-steps li:last-child{border-bottom:0}
.who-steps li::before{content:counter(s);grid-row:span 2;font-family:var(--figures);font-size:30px;line-height:1;color:var(--gold-fg)}
.who-steps b{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:420;font-size:21px;line-height:1.2}
.who-steps span{font-size:16px;line-height:1.45;color:var(--sheet-muted)}
.who-end{grid-column:1/-1;font-family:var(--display);font-style:italic;font-variation-settings:"SOFT" 100;font-weight:340;font-size:clamp(22px,1vw + 17px,30px);color:var(--muted)}
@media (max-width:820px){ section.who .wrap,.who-grid{grid-template-columns:minmax(0,1fr)} .who-steps{transform:none;margin-top:0} }

/* ---------- plain text pages (Privacy) ---------- */
.prose{padding-block:clamp(40px,5vw,72px) 0}
.prose .wrap{max-width:820px;margin-inline:auto}
.prose h2{font-size:clamp(26px,1.4vw + 18px,36px);margin-top:clamp(36px,4vw,56px)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{margin-top:14px;max-width:40em;color:var(--fg)}
.prose a{text-decoration-color:var(--gold)}
.prose .short li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;margin-top:10px}
.prose .short li::before{content:"";width:16px;height:16px;margin-top:5px;background:var(--gold);-webkit-mask:var(--fish) center/contain no-repeat;mask:var(--fish) center/contain no-repeat}
.prose .todo{margin-left:4px}
.prose .note{margin-top:40px}

/* Grandparent & Child: the note that it is the Parent & Child reading */
.grand-note{max-width:36em;padding:16px 18px;border-radius:16px;background:var(--chip);font-size:17px;line-height:1.45}
.grand-note b{font-weight:600}
/* a switch on its own above an order slip (Parent & Child) sits in the middle */
.price-head.center{align-items:center;max-width:none}
.price-head.center .switch{align-self:center}
/* the main button on the order slip stays ink on paper in both skies (by night the default button is light, and vanished on the paper) */
.slip .acts .btn:not(.quiet){background:var(--sheet-fg);color:var(--sheet)}
.slip .acts .btn:not(.quiet):hover{background:var(--gold);color:#171A29}

/* ---------- the tilt carousel of real pages: cards tilt, sink, shrink and blur with distance from the middle;
   drag, arrows or keys; the middle page opens large on click ---------- */
.tilt-wrap{margin-top:clamp(56px,7vw,104px)}
.tilt{position:relative;overflow:hidden;height:clamp(400px,50vw,620px);perspective:1400px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;margin-inline:calc(-1 * var(--gut))}
.tilt.drag{cursor:grabbing}
.tilt .stage{position:absolute;inset:0;transform-style:preserve-3d}
.tilt .c{position:absolute;left:50%;top:50%;width:clamp(220px,29vw,370px);aspect-ratio:1100/1555;margin:0;transform:translate(-50%,-50%);will-change:transform,filter,opacity;transition:transform .55s cubic-bezier(.23,1,.32,1),filter .55s ease,opacity .55s ease;border-radius:10px;overflow:hidden;background:var(--sheet);cursor:pointer}
.tilt.drag .c{transition:none}
.tilt .c img{width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none;display:block}
.tilt .c figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 12px;font-size:14px;line-height:1.35;color:#F2EDE3;background:linear-gradient(to top,rgba(23,26,41,.92),rgba(23,26,41,0));opacity:0;transition:opacity .3s ease} /* taste-skill-ignore: a caption scrim over a picture */
.tilt .c.on figcaption{opacity:1}
.tilt .c.on::after{content:"Open";position:absolute;top:12px;right:12px;padding:6px 12px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-size:13px;font-weight:500;opacity:0;transition:opacity .25s ease}
@media (hover:hover) and (pointer:fine){ .tilt .c.on:hover::after{opacity:1} }
.tilt .tnav{position:absolute;z-index:5;top:50%;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:var(--btn);color:var(--btn-fg);display:grid;place-items:center;transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s ease,color .2s ease}
.tilt .tnav:hover{background:var(--btn-hover);color:var(--btn-hover-fg)}
.tilt .tnav:active{transform:scale(.94)}
.tilt .tnav.prev{left:var(--gut)} .tilt .tnav.next{right:var(--gut)}
.tilt .tnav svg{width:16px;height:16px}
.tdots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.tdots button{width:8px;height:8px;border-radius:50%;background:var(--chip);transition:transform .2s cubic-bezier(.23,1,.32,1),background-color .2s ease}
.tdots button[aria-current="true"]{background:var(--fg);transform:scale(1.3)}
.tnote{text-align:center;margin-top:16px;color:var(--muted);font-size:var(--t-small)}
/* the large view */
.lb{position:fixed;inset:0;z-index:900;display:grid;grid-template-rows:auto 1fr;background:rgba(11,12,18,.94);color:#F2EDE3;opacity:0;pointer-events:none;transition:opacity .2s ease}
.lb.on{opacity:1;pointer-events:auto}
.lb .top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--gut);font-size:15px}
.lb .top .cap{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .top button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 16px;border-radius:999px;background:#F2EDE3;color:#171A29;font-weight:500;font-size:15px;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.lb .top button:active{transform:scale(.96)}
.lb .view{position:relative;overflow:auto;padding:0 var(--gut) calc(24px + env(safe-area-inset-bottom,0px));display:grid;place-items:start center}
.lb .view img{display:block;width:min(100%,900px);height:auto;border-radius:8px;transform:scale(.97);transition:transform .25s cubic-bezier(.23,1,.32,1)}
.lb.on .view img{transform:none}
.lb .lnav{position:fixed;top:50%;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:#F2EDE3;color:#171A29;display:grid;place-items:center;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.lb .lnav:active{transform:scale(.94)}
.lb .lnav.prev{left:var(--gut)} .lb .lnav.next{right:var(--gut)}
.lb .lnav svg{width:16px;height:16px}
@media (max-width:700px){ .lb .lnav{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));margin-top:0} }
@media (prefers-reduced-motion:reduce){ .tilt .c,.lb,.lb .view img{transition:none} }

/* =====================================================================================
   v6 — the last round before the waitlist opens. Overrides sit here, on top of the rules above.
   ===================================================================================== */

/* ---------- "Not a score": each claim on its own sheet of paper, the quote first and large, a gold mark at the corner ---------- */
.claims{gap:clamp(18px,2.2vw,28px)}
.claims li{position:relative;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:12px clamp(24px,5vw,80px);padding:clamp(24px,3vw,40px) clamp(22px,3vw,44px);
  background:var(--sheet);color:var(--sheet-fg);border-radius:20px}
.claims li::before{content:"";position:absolute;right:clamp(18px,2.4vw,30px);top:clamp(18px,2.4vw,30px);width:26px;height:26px;background:var(--gold);opacity:.9;
  -webkit-mask:var(--fish) center/contain no-repeat;mask:var(--fish) center/contain no-repeat}
.claims h3{padding-top:0;padding-right:36px;color:var(--sheet-fg)}
.claims blockquote{font-size:clamp(23px,.9vw + 18px,32px);color:var(--sheet-fg)}
.claims blockquote::before{display:none}
.claims .say p{color:var(--sheet-muted)}
.claims .plain b{color:var(--gold-fg)}
:root[data-sky="moon"] .claims li{background:#171A2B;color:var(--fg);box-shadow:none}
:root[data-sky="moon"] .claims h3,:root[data-sky="moon"] .claims blockquote{color:var(--fg)}
:root[data-sky="moon"] .claims .say p{color:var(--muted)}
:root[data-sky="moon"] .claims .plain b{color:var(--gold)}
@media (max-width:760px){
  .claims > li{padding:22px 20px;border-radius:20px;transform:none}
  .claims > li:nth-child(n){transform:none}
  .claims li::before{right:18px;top:18px;width:22px;height:22px}
  .claims h3{padding-right:30px}
  .claims blockquote{font-size:23px}
}

/* ---------- "What you'll learn": the open chapter is the loud one; the key words inside it are gold; the "+" row is gold too ---------- */
.contents details{transition:background-color .25s ease}
.contents details[open]{background:color-mix(in srgb,var(--gold) 10%,var(--sheet-2))}
.contents details[open] > summary,.contents details[open] > summary:hover{background:transparent}
.contents details[open] > summary .t{color:var(--gold-fg)}
.contents details[open] > summary::after{opacity:.9;color:var(--gold-fg)}
.contents details p b{font-weight:600;color:var(--gold-fg)}
.contents details p{font-size:17.5px}
.contents .plus{background:color-mix(in srgb,var(--gold) 16%,var(--sheet-2));margin-top:10px}
.contents .plus .t{color:var(--gold-fg)}
.contents .plus .t::before{content:"+ ";font-weight:600}
.contents .plus .v{color:var(--gold-fg);font-weight:500}
.contents .plus[open]{background:color-mix(in srgb,var(--gold) 22%,var(--sheet-2))}

/* ---------- "Take a look at this masterpiece": the pages only, closer under the heading, whole on a phone ---------- */
.look .tilt-wrap{margin-top:clamp(24px,3.5vw,48px)}
.tilt{height:clamp(440px,50vw,720px)}
.tilt .c{width:clamp(280px,32vw,460px)}
.tilt .c figcaption{top:100%;bottom:auto;padding:12px 6px 0;background:none;color:var(--muted);text-align:center;font-size:15px}
.tilt .c{overflow:visible}
.tilt .c img{border-radius:10px}
@media (max-width:700px){
  .tilt{height:calc(68vw * 1555 / 1100 + 70px)}
  .tilt .c{width:68vw}
  .tilt .tnav{width:42px;height:42px;margin-top:-21px}
  .tilt .tnav.prev{left:8px} .tilt .tnav.next{right:8px}
}

/* ---------- "From a birth time to your inbox": three moments on one thread ---------- */
.how ol{position:relative;gap:clamp(20px,3vw,40px);padding-top:26px}
.how ol::before{content:"";position:absolute;z-index:0;left:6%;right:6%;top:12px;border-top:2px dotted color-mix(in srgb,var(--gold) 70%,transparent)}
.how li:nth-child(n){margin-top:0}
.how li{position:relative;z-index:1;padding:clamp(22px,2.6vw,34px) clamp(20px,2.4vw,30px) 0;overflow:visible}
.how li::before{content:"";position:absolute;z-index:2;left:clamp(20px,2.4vw,30px);top:-38px;width:26px;height:26px;background:var(--gold);
  -webkit-mask:var(--fish) center/contain no-repeat;mask:var(--fish) center/contain no-repeat;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.how .when{font-size:clamp(26px,1.6vw + 14px,38px);line-height:1;margin-bottom:6px}
.how li::before{left:0}
@media (min-width:701px){ .how li{padding-left:0;padding-right:clamp(12px,2vw,28px)} .how ol::before{left:13px;right:13px} }
.how .when::before{display:none}
.how h3{font-size:clamp(22px,.9vw + 16px,28px)}
@media (max-width:700px){
  .how ol{padding-top:0;padding-left:30px;gap:18px}
  .how ol::before{left:12px;right:auto;top:0;bottom:0;border-top:0;border-left:2px dotted color-mix(in srgb,var(--gold) 70%,transparent)}
  .how li::before{left:-31px;top:26px;width:26px;height:26px}
}

/* ---------- "Who makes your reading": a note on paper, in the founder's hand, beside the four hands a reading passes through ---------- */
section.who .wrap,.who-grid{align-items:start}
.who-grid{margin-top:clamp(72px,9vw,140px)}
.who-story{position:relative;padding:clamp(28px,3.4vw,48px) clamp(24px,3vw,44px) clamp(28px,3.4vw,44px);background:var(--sheet);color:var(--sheet-fg);transform:rotate(-.6deg);
  -webkit-mask:linear-gradient(#000,#000) 0 12px/100% calc(100% - 24px) no-repeat,radial-gradient(circle at 10px 12px,#000 9.5px,transparent 10px) 0 0/20px 12px repeat-x,radial-gradient(circle at 10px 0,#000 9.5px,transparent 10px) 0 100%/20px 12px repeat-x;
  mask:linear-gradient(#000,#000) 0 12px/100% calc(100% - 24px) no-repeat,radial-gradient(circle at 10px 12px,#000 9.5px,transparent 10px) 0 0/20px 12px repeat-x,radial-gradient(circle at 10px 0,#000 9.5px,transparent 10px) 0 100%/20px 12px repeat-x}
.who-story .from{display:flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--gold-fg)}
.who-story .from::before{content:"";width:18px;height:18px;background:var(--gold);-webkit-mask:var(--fish) center/contain no-repeat;mask:var(--fish) center/contain no-repeat}
.who-story h2{font-size:clamp(30px,2.6vw,44px);color:var(--sheet-fg)}
.who-story .lead{color:var(--sheet-fg);font-style:italic;font-size:clamp(23px,.9vw + 18px,31px)}
.who-story p:not(.lead){color:var(--sheet-muted)}
.who-story .sign{color:var(--sheet-fg)!important;font-size:clamp(24px,1.2vw + 16px,32px);margin-top:4px}
.who-story .sign::before{content:"— "}
.who-steps{margin-top:clamp(24px,4vw,64px)}
.who-end{margin-top:clamp(8px,1.6vw,20px)}
@media (max-width:820px){ .who-story{transform:none} }

/* ---------- what next: the reading's own card, in the colour it wears on the home page ---------- */
@media (min-width:821px){ .next .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }
.next .card{width:min(100%,380px);justify-self:center;background:var(--c,var(--gold-on-band));color:#171614;transform:rotate(-5deg);
  box-shadow:0 30px 50px -20px rgba(0,0,0,.6);animation:drift 10s ease-in-out infinite}
.next .card .cutf{fill:var(--c,var(--gold-on-band));stroke:var(--c,var(--gold-on-band))}
@media (hover:hover) and (pointer:fine){ .next:hover .card{transform:rotate(-2deg) translateY(-6px)} }
@media (max-width:820px){ .next .wrap{grid-template-columns:minmax(0,1fr)} .next .card{width:min(70%,300px);margin-bottom:12px} }
@media (prefers-reduced-motion:reduce){ .next .card{animation:none} }

/* ---------- the one / two children switch: one slip gives way to the next ---------- */
.slip,.plans{transition:opacity .28s ease,transform .28s ease,height .38s cubic-bezier(.2,.7,.2,1)}
.swap{opacity:0;transform:translateY(6px)}
.slip.sizing{overflow:hidden}

/* ---------- the questions parents bring us: on the other ground, between two paper sections ---------- */
.asks{background:var(--band);color:var(--band-fg)}
:root[data-sky="moon"] .asks{background:var(--band);color:var(--band-fg)}
.asks p,:root[data-sky="moon"] .asks p{color:var(--band-muted)}
.asks q{color:var(--band-fg)}
.asks q::before{color:var(--gold-on-band)}
@media (max-width:760px){
  .asks li,:root[data-sky="moon"] .asks li{background:color-mix(in srgb,var(--band-fg) 9%,transparent);color:var(--band-fg)}
  .asks li p,:root[data-sky="moon"] .asks li p{color:var(--band-muted)!important}
  .asks .swipe-hint{color:var(--band-muted)}
}

/* =====================================================================================
   v7 — after the audit
   ===================================================================================== */
:root{--sec:clamp(80px,10vw,150px)}
.hero{padding-bottom:clamp(48px,6vw,88px)}
/* the carousel's neighbours stay readable */
.tilt .c{filter:none!important}
.tilt .c:not(.on){filter:blur(1.5px)!important}
/* 5. the opening on a phone: image, title, one paragraph, the buttons */
@media (max-width:700px){
  .hero-txt .two{display:none}
  .hero-txt .sub{font-size:19px}
  .incl-line{padding:12px 14px;font-size:16px}
}
.open-note{margin:0;font-size:15px;line-height:1.4;color:var(--muted);max-width:30em}
.open-note b{font-weight:600;color:var(--gold-fg)}
:root[data-sky="moon"] .open-note b{color:var(--gold)}
.hero-txt .open-note{margin-top:-6px}
.phead .open-note{margin-top:14px}
/* 12 */
@media (min-width:901px){ .contents .t{white-space:nowrap} }
/* 13. the assure block across the whole slip */
.slip .assure{grid-column:1/-1;border-radius:0;padding:clamp(20px,3vw,32px) clamp(28px,4vw,56px);background:var(--sheet-2);border-top:4px dotted rgba(27,30,43,.28)}
.slip .assure li{grid-template-columns:8em minmax(0,1fr)}
@media (max-width:480px){ .slip .assure li{grid-template-columns:minmax(0,1fr)} }
/* 15. gift: For/From side by side, "(optional)" on the label line */
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:420px){ .pair{grid-template-columns:minmax(0,1fr)} }
.field > small{display:inline;margin-left:.3em}
/* 16. planets never on text */
.occasions .with-planet > .side-planet{width:clamp(160px,22vw,300px);top:-90px}
@media (max-width:760px){ .pricelist .fine-p{max-width:calc(100% - 46vw)} .occasions .with-planet > .side-planet{top:-60px} }
/* 17. the three plans line up at the buttons */
.plist.single .pitem .ptxt{display:flex;flex-direction:column;height:100%}
.plist.single .pitem .acts{margin-top:auto}
/* 18. night: the included line sits quietly */
:root[data-sky="moon"] .incl-line{background:var(--chip);color:var(--fg)}
:root[data-sky="moon"] .incl-line svg{color:var(--gold)}
:root[data-sky="moon"] .incl-line a,:root[data-sky="moon"] .incl-line .hl{text-decoration-color:var(--gold)}
/* 19. the founder's note on reading pages: one sheet, one line of how */
.who-line{grid-column:1/-1;font-size:17px;line-height:1.5;color:var(--muted);max-width:44em}
.who-line em{display:block;margin-top:8px;font-family:var(--display);font-style:italic;font-variation-settings:"SOFT" 100;font-size:clamp(21px,1vw + 16px,27px);color:var(--fg)}
section.who .wrap:has(.who-line){grid-template-columns:minmax(0,1fr);max-width:860px}
.who-story .from{font-size:16px;letter-spacing:0;text-transform:none;font-weight:500}
/* 20. the questions on a phone: a stack, not a third sideways row */
@media (max-width:760px){
  .asks ul{flex-direction:column;overflow:visible;margin-inline:0;padding-inline:0;gap:12px}
  .asks li{flex:none}
  .asks .swipe-hint{display:none}
}
/* the price anchor */
.sep{font-size:15px;color:var(--sheet-muted)}
.sep,.pitem .sep{margin-top:-6px}
/* FAQ: the same paper and the same fold as the contents page */
.faq{margin-top:var(--sec)}
.faq h2{max-width:14em}
.faq-list{margin-top:clamp(24px,3vw,40px);max-width:760px}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:center;gap:14px;min-height:56px;padding:14px 4px;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list .t{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:420;font-size:clamp(20px,.6vw + 16px,24px);line-height:1.2}
.faq-list summary::after{content:"";width:9px;height:9px;justify-self:center;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .3s ease}
.faq-list details[open] > summary::after{transform:rotate(-135deg) translate(-2px,-1px);opacity:.9}
.faq-list details[open] > summary .t{color:var(--gold-fg)}
:root[data-sky="moon"] .faq-list details[open] > summary .t{color:var(--gold)}
.faq-list details p{padding:0 4px 20px;max-width:38em;font-size:17px;line-height:1.55;color:var(--muted)}
/* the pricing toggle, seen */
.pricelist .switch{padding:6px;background:var(--sheet);box-shadow:var(--lift)}
.pricelist .switch button{min-height:52px;padding:8px 24px 8px 16px;font-size:18px}
/* skip link */
.skip{position:absolute;left:var(--gut);top:-60px;z-index:800;padding:10px 16px;border-radius:999px;background:var(--btn);color:var(--btn-fg);text-decoration:none}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}
/* carousel dots you can hit */
.tdots button{width:24px;height:24px;background:none;position:relative}
.tdots button::before{content:"";position:absolute;left:8px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--chip);transition:transform .2s cubic-bezier(.23,1,.32,1),background-color .2s ease}
.tdots button[aria-current="true"]::before{background:var(--fg);transform:scale(1.3)}
.tdots button[aria-current="true"]{transform:none}
@media (min-width:901px){ .plist.single .pitem{display:flex;flex-direction:column} .plist.single .pitem .ptxt{flex:1} .plist.single .pcard{flex:none} }

/* v7.1 */
.phead .with-planet > .side-planet.big{right:calc(-1 * var(--gut) - 14vw);top:-80px}
@media (max-width:760px){ .phead .with-planet > .side-planet.big{right:calc(-1 * var(--gut) - 16vw);top:-70px} }
.pitem{position:relative}
.plist.single .pitem .most{position:absolute;top:-14px;left:50%;translate:-50% 0;margin:0;padding:5px 14px;border-radius:999px;background:var(--sheet-fg);color:var(--sheet);font-size:13.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.plist.single .items{padding-top:14px}
@media (max-width:900px){ .plist.single .pitem .most{top:-12px} }

.occ{columns:auto;column-gap:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,80px)}
.occ .last{grid-column:1/-1;justify-self:center;text-align:center;margin-top:clamp(16px,2vw,28px)}
.occ .last dd{margin-inline:auto}
@media (max-width:700px){ .occ{grid-template-columns:minmax(0,1fr)} }
/* Prices on a phone: the figure sits on the illustration's row, flush with the right edge, large */
@media (max-width:900px){
  .plist.single .pitem .pnum{position:absolute;right:clamp(14px,2vw,28px);top:calc(clamp(18px,2vw,28px) + 36px);translate:0 -50%;font-size:52px;line-height:.9}
  .plist.single .pitem .row1{grid-template-columns:minmax(0,1fr);padding-right:0}
}
@media (max-width:600px){ .plist.single .pitem .pnum{right:14px;top:calc(18px + 36px)} }
/* the prices toggle by night: on paper, so ink on it */
.pricelist .switch button{color:var(--sheet-fg)}
.pricelist .switch button .cutf{fill:var(--sheet);stroke:var(--sheet)}
.pricelist .switch button[aria-pressed="true"]{background:var(--sheet-fg);color:var(--sheet)}
.pricelist .switch button[aria-pressed="true"] .cutf{fill:var(--sheet-fg);stroke:var(--sheet-fg)}
.pricelist .switch button:not([aria-pressed="true"]):hover{background:var(--sheet-2)}

.wl .done .mail{display:none}
.wl .done.by-mail .mail{display:block}
.wl .done.by-mail .ok{display:none}