/* SacredAstra: Your Astrology Blueprint, in the colours of the book.

   The book's palette and pictures, made into a website rather than a copy of
   its pages: white and her lavender, near-black navy to read, one blue for
   the italic that lifts a heading, her planets, orbits and sparkles, her
   watercolour discs and icons, real pages from a sample book, and the
   cover's night kept for the last word. The faces are the book's own:
   Cormorant Garamond for display, EB Garamond to read. */

@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --paper: #ffffff;
  --mist: #f8f6fc;
  --lavender: #f1ebf6;
  --lavender-2: #e9e1f4;
  --rule: #d6d2ee;
  --ring: #c9c3ea;
  --ink: #1d2148;
  --title: #121534;
  --navy: #1a1e70;
  --blue: #2a30c2;
  --muted: #4b4f8a;
  --soft: #6a6eaf;
  --night: #0a0e16;
  --night-2: #101629;
  --cover-ink: #f6f2ff;
  --cover-soft: #e3dcf5;
  --cover-dim: #d9d2ee;
  --error: #b0243f;
  --rose: #c0617a;
  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  /* the planets' and signs' own symbols, from the system: no book face has them */
  --symbols: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "DejaVu Sans", sans-serif;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --page-shadow: 0 1px 2px rgba(18, 21, 52, .08), 0 30px 60px -30px rgba(18, 21, 52, .45);
  --wrap: 1180px;
  --gutter: 40px;
  --mast: 92px;
  interpolate-size: allow-keywords;
}

/* ---- the page ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--mast) + 12px); overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 19px/1.6 var(--serif);
  font-kerning: normal; font-variant-ligatures: common-ligatures; font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
body:has(dialog[open]) { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 400; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p { text-wrap: pretty; }
::selection { background: var(--lavender-2); color: var(--title); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--navy); color: #fff; }
.skip:focus { top: 12px; }
main { position: relative; isolation: isolate; padding-top: var(--mast); }
/* every page but the first opens under a wash of her lavender */
main::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 460px; pointer-events: none;
  background: linear-gradient(180deg, var(--lavender), rgba(241, 235, 246, 0)); }
.is-landing main { padding-top: 0; }
.is-landing main::before { content: none; }

/* ---- small parts ------------------------------------------------------- */
.star { width: 14px; height: 20px; flex: none; color: currentColor; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font: 500 13px/1 var(--serif); letter-spacing: .36em; text-transform: uppercase; white-space: nowrap; }
.brand span { margin-right: -.36em; }
.tag { font: 600 12px/1.3 var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.h { font: 600 14px/1.3 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.h::after { content: ""; display: block; width: 30px; border-top: 1.5px solid var(--blue); margin-top: 12px; }

/* a page title: the title, a short blue rule, the blue italic line */
.tb .t { font: 500 clamp(42px, 5.1vw, 70px)/1.02 var(--display); letter-spacing: -.012em; color: var(--title); text-wrap: balance; }
.tb .t em { font-style: italic; color: var(--blue); }
.tb .rule { display: block; width: 48px; border-top: 1.5px solid var(--blue); margin: 24px 0 18px; }
.tb .dek { font: italic 500 clamp(21px, 1.9vw, 26px)/1.28 var(--display); color: var(--blue); max-width: 34ch; text-wrap: balance; }

/* a number on her lavender watercolour disc */
.num { flex: none; display: inline-grid; place-items: center; width: 56px; height: 56px;
  background: url("img/disc.webp") center / contain no-repeat;
  font: 500 24px/1 var(--display); color: var(--title); font-variant-numeric: lining-nums; }

/* her lavender quote panel */
.quote { display: flex; align-items: center; gap: 22px; padding: 26px 36px 26px 30px; border-radius: 20px; background: var(--lavender); }
.quote .star { color: var(--navy); width: 12px; height: 17px; }
.quote p { font: italic 500 clamp(21px, 1.8vw, 25px)/1.32 var(--display); color: var(--title); text-wrap: balance; }

/* her icons on their watercolour discs */
.disc { flex: none; display: grid; place-items: center; width: 52px; height: 52px; }
.disc img { width: 100%; height: auto; }

/* an open and close mark, for every summary on the site */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary > i { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--lavender);
  transition: background-color .35s var(--ease); }
summary > i::before, summary > i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; margin: -.75px 0 0 -7px;
  border-top: 1.5px solid var(--navy); transition: transform .5s var(--ease); }
summary > i::after { transform: rotate(90deg); }
details[open] > summary > i::after { transform: rotate(0deg); }
summary:hover > i { background: var(--lavender-2); }
/* where the browser can, an answer opens and closes smoothly */
details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
details[open]::details-content { block-size: auto; }

/* ---- buttons: her navy, her blue under the pointer ------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 14px 30px;
  background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 999px;
  font: 500 17.5px/1 var(--serif); letter-spacing: .01em; white-space: nowrap;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease), box-shadow .5s var(--ease); }
.btn span[aria-hidden] { font-size: 18px; transition: transform .4s var(--ease); }
.btn:hover { background: var(--blue); border-color: var(--blue); box-shadow: 0 16px 34px -16px rgba(42, 48, 194, .65); transform: translateY(-1px); }
.btn:hover span[aria-hidden] { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline-offset: 3px; border-radius: 999px; }
.btn-light { background: #fff; color: var(--title); border-color: #fff; }
.btn-light:hover { background: var(--lavender); border-color: var(--lavender); color: var(--title); box-shadow: 0 16px 40px -18px rgba(214, 198, 255, .55); }
.btn-sm { min-height: 44px; padding: 10px 20px; font-size: 15.5px; }
.btn-wide, .btn-block { width: 100%; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.mast-cta .narrow { display: none; }
.link { display: inline-flex; gap: 8px; align-items: center; color: var(--blue); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.link:hover { color: var(--navy); }
.round { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--rule); border-radius: 50%;
  font-size: 19px; color: var(--navy); background: #fff; transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease); }
.round:hover { border-color: var(--blue); background: var(--lavender); }
.round:active { transform: scale(.95); }
.round:focus-visible { border-radius: 50%; }
.round:disabled { opacity: .35; cursor: default; background: #fff; border-color: var(--rule); transform: none; }

/* ---- the header: one floating bar ------------------------------------------ */
.mast { position: fixed; z-index: 40; inset: 14px 0 auto; pointer-events: none; }
.mast-row { position: relative; pointer-events: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  width: min(var(--wrap), 100% - 2 * var(--gutter)); height: 64px; margin-inline: auto; padding: 0 9px 0 24px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(214, 210, 238, .85); border-radius: 999px;
  -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px);
  box-shadow: 0 12px 32px -24px rgba(18, 21, 52, .3);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.mast.is-raised .mast-row { background: rgba(255, 255, 255, .94); box-shadow: 0 20px 44px -26px rgba(18, 21, 52, .45); }
.mast .brand { justify-self: start; color: var(--navy); }
.mast .brand:focus-visible, .nav a:focus-visible { border-radius: 999px; }
.nav { display: flex; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 16.5px; color: var(--ink);
  transition: background-color .35s var(--ease), color .35s var(--ease); }
.nav a:hover { background: var(--lavender); color: var(--navy); }
.nav a[aria-current] { background: var(--lavender); color: var(--blue); }
.mast-cta { justify-self: end; }
.menu { display: none; }

/* ---- 1 the hero: her lavender sky, the book with pages fanned behind it ----- */
.hero { position: relative; isolation: isolate; overflow: clip; text-align: center;
  padding: calc(var(--mast) + clamp(40px, 6vw, 84px)) 0 clamp(56px, 6vw, 88px);
  background: linear-gradient(180deg, #ebe3f4 0%, var(--lavender) 34%, #f8f5fb 72%, var(--paper) 100%); }
.hero-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sky-planet { position: absolute; right: 0; top: clamp(40px, 7vw, 110px); height: min(84%, 1000px); width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0), #000 14%, #000 84%, rgba(0, 0, 0, 0));
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0), #000 14%, #000 84%, rgba(0, 0, 0, 0)); }
.sky-corner { position: absolute; left: 0; top: 0; width: min(440px, 31vw); height: auto; transform: scaleX(-1); }
.sky-spark { position: absolute; height: auto; }
.hero-copy { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero-tag { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 15px; border: 1px solid rgba(201, 195, 234, .95); border-radius: 999px;
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-tag .star { width: 9px; height: 13px; color: var(--navy); }
.hero-title { margin-top: 26px; font: 500 clamp(50px, 7.2vw, 100px)/.98 var(--display); letter-spacing: -.018em; color: var(--title); text-wrap: balance; }
.hero-title em { font-style: italic; color: var(--blue); }
.hero-sub { margin-top: 26px; max-width: 30em; font-size: clamp(19px, 1.5vw, 21.5px); line-height: 1.55; color: var(--muted); text-wrap: balance; }
.hero-sub-2 { margin-top: 12px; font: italic 500 clamp(21px, 1.8vw, 25px)/1.3 var(--display); color: var(--blue); }
.hero-buy { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 36px; }
.hero-price { display: flex; align-items: baseline; gap: 10px; }
.hero-price b { font: 500 30px/1 var(--display); color: var(--title); }
.hero-price span { font-size: 15.5px; color: var(--muted); }

/* the fan: the cover in front, four of the book's pages behind it */
.fan { --w: clamp(150px, 21vw, 292px); --c: clamp(196px, 25.5vw, 356px);
  position: relative; max-width: 1240px; height: calc(var(--c) * 1.25 + 24px); margin: clamp(52px, 6vw, 84px) auto 0;
  transform: perspective(1800px) rotateX(calc(var(--py, 0) * -2.5deg)) rotateY(calc(var(--px, 0) * 3.5deg)); transition: transform 1.2s var(--ease); }
.fan::before { content: ""; position: absolute; left: 50%; top: -18%; width: calc(var(--c) * 3.2); aspect-ratio: 1.7; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, 0)); }
.fan::after { content: ""; position: absolute; left: 50%; bottom: 24px; width: calc(var(--c) * 2.8); height: 70px; translate: -50% 50%;
  background: radial-gradient(closest-side, rgba(18, 21, 52, .2), rgba(18, 21, 52, 0)); }
.fan-page, .fan-cover { position: absolute; left: 50%; bottom: 24px; }
.fan-page { z-index: 1; width: var(--w); height: auto; margin-left: calc(var(--w) / -2); background: #fff; border-radius: 2px;
  box-shadow: var(--page-shadow); transform-origin: 50% 135%; transition: transform 1.1s var(--ease); }
.fan-1 { transform: translateX(-118%) rotate(-13deg); }
.fan-2 { z-index: 2; transform: translateX(-64%) rotate(-6deg); }
.fan-3 { z-index: 2; transform: translateX(64%) rotate(6deg); }
.fan-4 { transform: translateX(118%) rotate(13deg); }
.fan-cover { z-index: 5; width: var(--c); margin-left: calc(var(--c) / -2); }
.fan-cover .bookcover { max-width: none; }
.hero:hover .fan-1 { transform: translateX(-126%) rotate(-15deg); }
.hero:hover .fan-2 { transform: translateX(-70%) rotate(-7deg); }
.hero:hover .fan-3 { transform: translateX(70%) rotate(7deg); }
.hero:hover .fan-4 { transform: translateX(126%) rotate(15deg); }

/* ---- 2 four facts ------------------------------------------------------------ */
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 28px; border-block: 1px solid var(--rule); }
.facts-row li { display: flex; align-items: center; justify-content: center; gap: 16px; padding-inline: 18px; }
.facts-row li + li { border-left: 1px solid var(--rule); }
.facts-row p { display: flex; flex-direction: column; gap: 3px; }
.facts-row b { font: 500 23px/1.1 var(--display); color: var(--title); white-space: nowrap; }
.facts-row span { font-size: 15.5px; line-height: 1.3; color: var(--muted); }

/* ---- the sections ------------------------------------------------------------- */
.block { position: relative; overflow-x: clip; padding-block: clamp(80px, 8.6vw, 124px); }
/* her lavender comes in and goes out softly, never at an edge */
.block-lav { background: linear-gradient(180deg, var(--paper), var(--lavender) 140px, var(--lavender) calc(100% - 140px), var(--paper)); }
.head { max-width: 760px; }
.head .tag + h2 { margin-top: 18px; }
.head h2, .yours-text h2 { font: 500 clamp(40px, 4.8vw, 66px)/1.02 var(--display); letter-spacing: -.012em; color: var(--title); text-wrap: balance; }
.head h2 em, .yours-text h2 em { font-style: italic; color: var(--blue); }
.head-center { margin-inline: auto; text-align: center; }
.head-lede { margin: 22px auto 0; max-width: 34em; font-size: 20px; line-height: 1.6; color: var(--muted); text-wrap: balance; }
.head-line { display: block; margin-bottom: 8px; font: italic 500 clamp(22px, 2vw, 26px)/1.3 var(--display); color: var(--blue); }

/* ---- 3 what is inside: one tile for each part ------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(330px, auto); grid-auto-flow: dense; gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.tile { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px;
  background: var(--paper); border: 1px solid var(--rule);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 30%), rgba(42, 48, 194, .07), rgba(42, 48, 194, 0) 62%); }
.tile:hover { transform: translateY(-3px); border-color: var(--ring); box-shadow: 0 34px 60px -40px rgba(18, 21, 52, .4); }
.tile:hover::before { opacity: 1; }
.tile.lav { background: var(--lavender); border-color: var(--lavender); }
.tile.lav:hover { border-color: var(--ring); }
.tile-wide { grid-column: span 2; }
.tile-tall { grid-row: span 2; }
.tile-art { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 36px 32px 8px; }
.tile-text { position: relative; margin-top: auto; padding: 18px 32px 30px; }
.tile-text h3 { font: 500 clamp(26px, 2.3vw, 31px)/1.1 var(--display); color: var(--title); text-wrap: balance; }
.tile-text p { margin-top: 8px; max-width: 30em; font-size: 17px; line-height: 1.5; color: var(--muted); }

/* Sun, Moon and Rising: the sample's three signs, drawn as the book draws them */
.three { gap: clamp(10px, 3vw, 44px); }
.three figure { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.three .sign { width: clamp(118px, 11.5vw, 150px); height: auto; aspect-ratio: 1; object-fit: contain; transition: transform .8s var(--ease); }
.three figcaption { font: italic 500 23px/1.15 var(--display); color: var(--title); }
.three figcaption b { display: block; margin-bottom: 6px; font: 600 11px/1.3 var(--serif); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.tile:hover .three figure:nth-child(1) .sign { transform: translateY(-6px); }
.tile:hover .three figure:nth-child(2) .sign { transform: translateY(-6px); transition-delay: .06s; }
.tile:hover .three figure:nth-child(3) .sign { transform: translateY(-6px); transition-delay: .12s; }

/* the chart: the sample's own wheel, turning a little under the pointer */
.chart { padding: 28px 18px 0; }
.wheel { width: min(100%, 440px); height: auto; aspect-ratio: 1; transition: transform 2.4s var(--ease); }
.tile:hover .wheel { transform: rotate(10deg); }

/* a house: a real page leaning out of the tile */
.peek { flex: 1 1 236px; min-height: 236px; align-items: flex-start; justify-content: flex-end; padding: 34px 0 0; overflow: hidden; }
.peek img { width: 74%; height: auto; margin-right: -4%; border-radius: 2px; background: #fff; box-shadow: var(--page-shadow);
  transform: rotate(4deg); transform-origin: 0 0; transition: transform .9s var(--ease); }
.tile:hover .peek img { transform: rotate(2deg) translateY(-6px); }
.peek-left { justify-content: flex-start; }
.peek-left img { margin: 0 0 0 -4%; transform: rotate(-4deg); transform-origin: 100% 0; }
.tile:hover .peek-left img { transform: rotate(-2deg) translateY(-6px); }

/* turning points: her planets in their orbits */
.cycles { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; align-content: center; align-items: end; gap: clamp(10px, 2vw, 26px); }
.cycles figure { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 14.5px; line-height: 1.3; color: var(--muted); }
.cycles img { width: clamp(64px, 6.6vw, 86px); height: auto; transition: transform 1s var(--ease); }
.cycles figcaption b { display: block; margin-bottom: 2px; font: 500 20px/1.1 var(--display); color: var(--title); }
.tile:hover .cycles img { transform: rotate(-8deg); }

/* colours and crystals: her watercolour swatches, the crystal photographs */
.palette { flex-direction: column; gap: 26px; }
.swatches { display: flex; gap: clamp(8px, 1.4vw, 18px); }
.swatches img { width: clamp(52px, 5.4vw, 72px); height: auto; transition: transform .7s var(--ease); }
.tile:hover .swatches img:nth-child(odd) { transform: translateY(-5px); }
.stones { display: flex; align-items: center; gap: clamp(10px, 2.2vw, 30px); }
.stones img { width: auto; height: clamp(40px, 4.2vw, 56px); }

/* every page of the book, behind one line */
.every-page { margin-top: 20px; border: 1px solid var(--rule); border-radius: 28px; background: var(--paper); transition: border-color .4s var(--ease); }
.every-page:hover { border-color: var(--ring); }
.every-page summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 14px 18px 14px 32px;
  border-radius: 28px; font: 500 25px/1.2 var(--display); color: var(--title); }
.every-page summary:focus-visible { outline-offset: -3px; border-radius: 28px; }
.every-page-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 36px; padding: 4px 32px 30px; }
.every-page-list .tag { padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.every-page-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0edf8; font-size: 16px; line-height: 1.35; }
.every-page-list b { flex: none; font: 500 17px/1 var(--display); color: var(--blue); }
.every-page-last { grid-column: 1 / -1; display: flex; justify-content: center; gap: 12px; padding-top: 8px; font-size: 16px; color: var(--muted); }
.every-page-last b { font: 500 17px/1.3 var(--display); color: var(--blue); }

/* ---- 4 a few pages, turned on a carousel ------------------------------------------- */
.deck { --dw: clamp(208px, 25vw, 340px); position: relative; margin-top: clamp(36px, 4.6vw, 60px); outline: none;
  -webkit-user-select: none; user-select: none; touch-action: pan-y; }
.deck img { -webkit-user-drag: none; }
/* without script, a strip to scroll */
.deck-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--gutter) 40px; scrollbar-width: none; }
.deck-track::-webkit-scrollbar { display: none; }
.deck-item { position: relative; flex: none; width: var(--dw); scroll-snap-align: center; }
.deck-page { display: block; width: 100%; border-radius: 2px; background: #fff; box-shadow: var(--page-shadow); }
.deck-page img { width: 100%; height: auto; border-radius: 2px; }
.deck-page:focus-visible { outline-offset: 6px; }
/* with it, a carousel: the open page in front, its neighbours turned away */
.deck.is-live .deck-track { position: relative; display: block; height: calc(var(--dw) * 1.25 + 44px); padding: 0; overflow: visible; perspective: 1600px; }
.deck.is-live .deck-item { position: absolute; left: 50%; top: 0; margin-left: calc(var(--dw) / -2);
  transition: transform .9s var(--ease), opacity .6s var(--ease); }
.deck.is-live .deck-item::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--lavender); pointer-events: none;
  opacity: var(--dim, 0); transition: opacity .6s var(--ease); }
.deck.is-live .deck-item.is-active .deck-page { cursor: zoom-in; }
.deck:focus-visible .is-active .deck-page { outline: 2px solid var(--blue); outline-offset: 6px; }
.deck-controls { display: flex; align-items: center; justify-content: center; gap: 28px; }
.deck-cap { min-width: 300px; text-align: center; font-size: 18px; color: var(--muted); }
.deck-cap b { margin-right: 8px; font: 500 24px/1 var(--display); color: var(--blue); }

/* ---- 5 a name on the cover ------------------------------------------------------- */
.yours { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
.yours-text .tag + h2 { margin-top: 18px; }
.yours-lede { margin-top: 26px; max-width: 31em; font-size: 20px; line-height: 1.64; }
.try { display: block; margin-top: 36px; max-width: 460px; }
.try-label { display: block; margin-bottom: 12px; font: 600 12px/1.3 var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
.yours-text .link { margin-top: 30px; font-size: 18px; }
.try input { width: 100%; height: 66px; padding: 0 28px; border: 1px solid var(--rule); border-radius: 999px; background: #fff;
  font: 500 26px/1 var(--display); color: var(--title); box-shadow: 0 16px 34px -26px rgba(18, 21, 52, .4);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.try input::placeholder { color: #a19dc4; font-style: italic; }
.try input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(42, 48, 194, .12), 0 16px 34px -26px rgba(18, 21, 52, .4); }
.yours-cover { position: relative; display: grid; place-items: center; padding-block: 48px; }
.yours-cover .bookcover { position: relative; z-index: 2; transform: rotate(-2.5deg); transition: transform 1s var(--ease); }
.yours-cover:hover .bookcover { transform: rotate(-1deg) translateY(-6px); }
.yours-glow { position: absolute; inset: -4% -12%; background: radial-gradient(closest-side, rgba(42, 48, 194, .13), rgba(214, 198, 255, .32) 48%, rgba(255, 255, 255, 0)); }
/* her orbit round the book, with two of its planets */
.yours-orbit { position: absolute; z-index: 1; left: 50%; top: 50%; width: 128%; max-width: none; height: auto; overflow: visible; pointer-events: none;
  translate: -50% -50%; rotate: -16deg; }
.yours-orbit ellipse { fill: none; stroke: var(--ring); stroke-width: 1.2; }
.yours-orbit circle { fill: var(--navy); }
.yours-orbit .o2 { fill: var(--soft); }

/* ---- 6 how it works ------------------------------------------------------------------ */
.steps-wrap { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.orbit-line { position: absolute; left: 0; top: 0; width: 100%; height: 96px; overflow: visible; }
.orbit-line path { stroke: var(--ring); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--ease) .15s; }
.steps-wrap.is-pending .orbit-line path { stroke-dashoffset: 1; }
.steps-row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; text-align: center; }
.steps-row li { display: flex; flex-direction: column; align-items: center; }
.disc-lg { width: 96px; height: 96px; border-radius: 50%; background: var(--paper);
  box-shadow: 0 0 0 12px var(--paper), 0 0 0 13px rgba(214, 210, 238, .55), 0 22px 40px -22px rgba(18, 21, 52, .4); }
.disc-lg img { width: 66px; }
.step-n { margin-top: 30px; font: 600 12px/1.3 var(--serif); letter-spacing: .2em; color: var(--blue); }
.steps-row h3 { margin-top: 10px; max-width: 13em; font: 500 clamp(26px, 2.4vw, 31px)/1.12 var(--display); color: var(--title); text-wrap: balance; }
.steps-row li > p:last-child { margin-top: 10px; max-width: 21em; font-size: 17.5px; line-height: 1.55; color: var(--muted); }

/* ---- 7 the price ----------------------------------------------------------------------- */
.price-card { position: relative; max-width: 820px; margin-inline: auto; padding: clamp(30px, 5vw, 56px); border-radius: 32px; background: var(--paper);
  box-shadow: 0 0 0 1px rgba(214, 210, 238, .9), 0 50px 90px -50px rgba(18, 21, 52, .42); }
.price-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 40px; padding-bottom: 30px; border-bottom: 1px solid var(--rule); }
.head + .price-card { margin-top: clamp(36px, 4vw, 52px); }
.price-name { margin-top: 12px; font: 500 clamp(34px, 3.6vw, 46px)/1.05 var(--display); color: var(--title); }
.price-num { display: flex; align-items: baseline; gap: 10px; }
.price-num b { font: 500 clamp(52px, 5.4vw, 72px)/1 var(--display); letter-spacing: -.01em; color: var(--title); }
.price-num span { font: 600 12px/1 var(--serif); letter-spacing: .18em; color: var(--muted); }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 36px; margin: 32px 0 38px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; font-size: 17.5px; line-height: 1.45; }
.checks .star { width: 10px; height: 14px; margin-top: 5px; color: var(--blue); }
.price-note { margin-top: 16px; text-align: center; font-size: 15.5px; color: var(--muted); }

/* ---- 8 questions ------------------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.faq-grid .head { position: sticky; top: calc(var(--mast) + 40px); }
.faq-grid .link { margin-top: 30px; font-size: 18px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0;
  font: 500 clamp(23px, 2.1vw, 28px)/1.22 var(--display); color: var(--title); transition: color .3s var(--ease); }
.faq summary:hover { color: var(--blue); }
.faq details p { max-width: 36em; padding: 0 64px 28px 0; font-size: 18.5px; line-height: 1.65; }

/* ---- 9 the last word: the cover's night, her planet --------------------------------------------- */
.last { padding-top: clamp(16px, 3vw, 40px); }
.last-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center;
  min-height: clamp(440px, 40vw, 560px); border-radius: 36px; background: var(--night); color: var(--cover-ink); }
.last-art { position: relative; align-self: stretch; min-height: 300px; }
.last-planet { position: absolute; left: 0; top: 50%; height: 150%; width: auto; max-width: none; translate: 0 -50%;
  -webkit-mask-image: linear-gradient(90deg, #000 52%, rgba(0, 0, 0, 0) 96%); mask-image: linear-gradient(90deg, #000 52%, rgba(0, 0, 0, 0) 96%); }
.last-arc { position: absolute; left: 30%; top: 10%; height: 80%; width: auto; max-width: none; opacity: .9; }
.last-star { position: absolute; left: 70%; top: 22%; width: 46px; height: auto; }
.last-text { position: relative; padding: clamp(48px, 6vw, 88px) clamp(32px, 6vw, 88px) clamp(48px, 6vw, 88px) 0; }
.last-text h2 { font: 500 clamp(40px, 4.6vw, 64px)/1.03 var(--display); letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.last-text h2 em { font-style: italic; color: #cfc4f6; }
.last-lede { margin-top: 18px; max-width: 24em; font-size: 20px; line-height: 1.55; color: var(--cover-soft); }
.last-text .hero-buy { justify-content: flex-start; }
.last-text .hero-price b { color: #fff; }
.last-text .hero-price span { color: var(--cover-dim); }

/* ---- the foot of the site ------------------------------------------------------------------ */
.foot { margin-top: clamp(96px, 10vw, 140px); padding: 64px 0 28px; background: linear-gradient(180deg, var(--paper), var(--lavender) 150px); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, .7fr)); gap: 40px; }
.foot-brand .brand { color: var(--navy); }
.foot-brand p { margin-top: 12px; max-width: 22em; font: italic 500 22px/1.3 var(--display); color: var(--blue); }
.foot-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.foot-nav .tag { margin-bottom: 10px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 17px; color: var(--ink); }
.foot-nav a:hover, .foot-nav a[aria-current="page"] { color: var(--blue); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 56px; padding-top: 22px;
  border-top: 1px solid var(--rule); font-size: 14.5px; color: var(--muted); }

/* ---- the cover, at any size: her art, the book's positions ----------------- */
.bookcover { position: relative; width: 100%; max-width: 420px; aspect-ratio: 842 / 1052; margin: 0; overflow: hidden; container-type: inline-size;
  background: var(--night); color: var(--cover-ink); border-radius: 2px 4px 4px 2px; isolation: isolate;
  box-shadow: 1px 1px 0 #d9d1ee, 3px 3px 0 #f4effb, 5px 5px 0 var(--ring), 0 50px 80px -34px rgba(18, 21, 52, .65), 0 0 0 1px rgba(18, 21, 52, .05); }
.bookcover-lg { max-width: 440px; }
.bc-sky { position: absolute; inset: 0; z-index: -1; background: url("img/cover.webp") center / cover no-repeat; }
.bookcover::before { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 3.4%; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); pointer-events: none; }
.bc-arc1, .bc-arc2, .bc-star { position: absolute; height: auto; }
.bc-arc1 { left: 57.2%; top: -.8%; width: 42.8%; }
.bc-arc2 { left: 47.9%; top: 60.4%; width: 39%; }
.bc-star { left: 85%; top: 49.2%; width: 9.36%; }
.bc-brand { position: absolute; left: 7.6%; top: 4.9%; display: flex; flex-direction: column; align-items: center; gap: 1.78cqw;
  font: 500 1.25cqw/1 var(--serif); letter-spacing: .42em; text-transform: uppercase; }
.bc-brand .star { width: 2.7cqw; height: 3.8cqw; }
.bc-title { position: absolute; left: 7.1%; top: 30.2%; width: 66.5%; display: block; }
.bc-h { display: block; font: 400 9.26cqw/.923 var(--display); letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.bc-tag { display: block; margin-top: 3.56cqw; width: 71.5%; font: italic 500 1.9cqw/1.31 var(--display); color: var(--cover-soft); }
.bc-who { position: absolute; left: 7.36%; bottom: 16.35%; width: 39.2%; display: block; }
.bc-name { display: block; font: 500 3.56cqw/1.13 var(--display); color: #fff; overflow-wrap: anywhere; }
.bc-name.mid { font-size: 2.97cqw; }
.bc-name.long { font-size: 2.49cqw; }
.bc-born { display: block; margin-top: 1.43cqw; font: 400 1.48cqw/1.28 var(--serif); letter-spacing: .09em; color: #e8e2f7; }
.bc-born:empty { display: none; }
.bc-foot { position: absolute; left: 7.6%; right: 7.6%; top: 94.1%; display: flex; justify-content: space-between;
  font: 400 1.07cqw/1 var(--serif); letter-spacing: .3em; text-transform: uppercase; color: var(--cover-dim); }

/* ---- the page viewer ------------------------------------------------------- */
.viewer { width: min(1100px, 100% - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 28px; background: var(--mist); color: var(--ink);
  box-shadow: 0 40px 120px rgba(10, 14, 22, .45); overflow: hidden; }
.viewer::backdrop { background: rgba(18, 21, 52, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.viewer[open] { animation: open .5s var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.viewer-frame { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: min(940px, calc(100dvh - 32px)); padding: 20px 26px 22px; gap: 14px; }
.viewer-top { display: flex; justify-content: space-between; align-items: center; }
.viewer-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; min-height: 0; }
.viewer-page { height: 100%; min-height: 0; display: grid; place-items: center; }
.viewer-page img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; background: #fff; box-shadow: 0 30px 60px -30px rgba(18, 21, 52, .5); }
.viewer-cap { text-align: center; font-size: 17px; color: var(--muted); }
.viewer-cap b { font: 500 22px/1 var(--display); color: var(--navy); margin-right: 8px; }
.viewer-thumbs { display: flex; justify-content: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.viewer-thumbs button { width: 46px; border: 1px solid transparent; opacity: .6; transition: opacity .25s, border-color .25s; }
.viewer-thumbs button[aria-current="true"], .viewer-thumbs button:hover { opacity: 1; border-color: var(--blue); }
.viewer-thumbs img { width: 100%; height: auto; }

/* ---- forms: the order form and every other ---------------------------------------- */
.field { display: grid; gap: 10px; margin-top: 30px; }
.field > label, .field > .label { display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  font: 600 12px/1.3 var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
.field > label small, .field > .label small { font: 400 13px/1 var(--serif); letter-spacing: .02em; text-transform: none; color: var(--soft); }
.input, .select, .textarea { width: 100%; padding: 12px 2px 10px; border: 0; border-bottom: 1.5px solid var(--rule); border-radius: 0; background: transparent;
  font: 400 22px/1.3 var(--serif); color: var(--title); transition: border-color .3s var(--ease); }
.input::placeholder, .textarea::placeholder { color: #a19dc4; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue); }
.input[type="date"], .input[type="time"] { min-height: 52px; }
.select { appearance: none; padding-right: 30px; background: linear-gradient(45deg, transparent 50%, var(--navy) 50%) calc(100% - 14px) 55% / 6px 6px no-repeat,
  linear-gradient(-45deg, transparent 50%, var(--navy) 50%) calc(100% - 8px) 55% / 6px 6px no-repeat; }
.textarea { min-height: 120px; resize: vertical; padding: 14px 16px; border: 1.5px solid var(--rule); border-radius: 16px; font-size: 19px; line-height: 1.55; background: #fff; }
.hint { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.err { font-size: 15.5px; line-height: 1.45; color: var(--error); }
.has-error .input, .has-error .select, .has-error .textarea { border-color: var(--error); }
.check { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; font-size: 18px; line-height: 1.45; cursor: pointer; }
.check input { flex: none; appearance: none; width: 22px; height: 22px; margin: 2px 0 0; border: 1.5px solid var(--soft); border-radius: 6px; background: #fff; display: grid; place-items: center;
  transition: background-color .2s, border-color .2s; }
.check input::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.check input:checked { background: var(--navy); border-color: var(--navy); }
.check input:checked::after { opacity: 1; }
.notice { display: flex; gap: 16px; margin-top: 22px; padding: 18px 22px; border-radius: 18px; background: var(--lavender); font-size: 17px; line-height: 1.55; color: var(--ink); }
.notice .star { color: var(--navy); margin-top: 5px; width: 10px; height: 14px; }
.notice strong { font-weight: 600; color: var(--title); }
.errbox { margin-bottom: 26px; padding: 18px 22px; border: 1.5px solid var(--error); border-radius: 18px; background: #fff; color: var(--error); font-size: 17px; }
.errbox ul { margin-top: 8px; padding-left: 20px; list-style: disc; }

/* ---- every page but the first: a title, a line, the way on ---------------------------- */
.plain { padding-block: 64px 40px; }
.plain .tb { max-width: 760px; }
.plain-lede { margin-top: 30px; max-width: 34em; font-size: 21px; line-height: 1.6; }
.page { position: relative; padding-block: 96px 56px; }
.page .wrap { position: relative; }
/* her planets in the top corner of a page, reaching up behind the header */
.corner { position: absolute; top: calc(-1 * var(--mast)); right: 0; width: min(500px, 42vw); height: auto; pointer-events: none; user-select: none; }
.prose p { font-size: 21px; line-height: 1.62; max-width: 34em; }
.prose p + p { margin-top: 16px; }

/* ---- the order form, beside her cover ------------------------------------------------------ */
.order-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 96px; align-items: start; padding-block: 40px 120px; }
.back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; color: var(--muted); }
.back:hover { color: var(--blue); }
.op-title { margin-top: 26px; }
.op-title .t { font-size: clamp(46px, 5vw, 70px); }
/* The four pages as four phases of one Moon: it waxes as the form is filled.
   A page done is lit, the open one breathes a halo, the rest wait pale;
   the dashed orbit between them turns solid as each is passed. */
.steps { display: flex; align-items: center; margin: 46px 0 8px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.steps li { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; font-size: 15.5px; color: var(--soft); transition: color .5s var(--ease); }
.steps li:last-child { flex: 0 0 auto; }
.steps li::after { content: ""; flex: 1 1 12px; min-width: 12px; margin: 0 14px 0 2px; border-top: 1.5px dashed var(--ring); transition: border-color .6s var(--ease); }
.steps li:last-child::after { display: none; }
.steps li.is-done::after { border-top-style: solid; border-color: var(--blue); }
.steps li[aria-current="step"] { color: var(--title); }
.steps li.is-done { color: var(--muted); }
.steps li > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-moon { flex: none; width: 30px; height: 30px; overflow: visible; }
.step-moon-dark { fill: var(--lavender-2); }
.step-moon-lit { fill: var(--navy); opacity: 0; transition: opacity .6s var(--ease); }
.step-moon-limb { fill: none; stroke: var(--ring); stroke-width: 1; transition: stroke .6s var(--ease); }
.step-moon-halo { fill: none; stroke: var(--blue); stroke-width: .8; opacity: 0; transform-origin: 50% 50%; transform: scale(.7); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.steps li[aria-current="step"] .step-moon-lit, .steps li.is-done .step-moon-lit { opacity: 1; }
.steps li[aria-current="step"] .step-moon-limb, .steps li.is-done .step-moon-limb { stroke: var(--navy); }
.steps li[aria-current="step"] .step-moon-halo { opacity: .9; transform: scale(1.35); }
.op { position: relative; }
.step { margin: 0; padding: 0; border: 0; min-width: 0; }
.op:not(.is-stepped) .step + .step { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--rule); }
.step-h { margin-top: 36px; font: 500 clamp(30px, 3vw, 40px)/1.1 var(--display); color: var(--title); }
.step-h:focus { outline: none; }
.step-lede { margin-top: 14px; max-width: 32em; font-size: 18px; color: var(--muted); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.pair + .hint { margin-top: 12px; }
.gift, .untimed { margin-top: 6px; }
.gift .notice, .untimed .notice { margin-top: 18px; }
.place-box { position: relative; }
.place-list { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; max-height: 300px; overflow-y: auto; background: #fff;
  border: 1px solid var(--rule); border-radius: 18px; box-shadow: 0 24px 40px -22px rgba(18, 21, 52, .35); }
.place-opt { display: flex; flex-direction: column; padding: 12px 18px; cursor: pointer; border-bottom: 1px solid #efecf8; }
.place-opt b { font-weight: 500; font-size: 19px; color: var(--title); }
.place-opt span { font-size: 15px; color: var(--muted); }
.place-opt[aria-selected="true"], .place-opt:hover { background: var(--lavender); }
.place-note { padding: 14px 18px; font-size: 16px; color: var(--muted); }
.picked { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--title); }
.picked .star { color: var(--blue); width: 10px; height: 14px; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: flex; flex-direction: column; gap: 3px; min-height: 76px; padding: 14px 44px 14px 18px; border: 1px solid var(--rule); border-radius: 18px; background: #fff;
  transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.chip b { font-weight: 500; font-size: 18px; color: var(--title); }
.chip small { font-size: 15px; color: var(--muted); }
.chip span::after { content: ""; position: absolute; top: 18px; right: 18px; width: 14px; height: 14px; border: 1.5px solid var(--soft); border-radius: 50%;
  transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.chip:hover span { border-color: var(--ring); }
.chip input:checked + span { background: var(--lavender); border-color: #b9b3dc; }
.chip input:checked + span::after { background: var(--navy); border-color: var(--navy); box-shadow: inset 0 0 0 3px var(--lavender); }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 3px; }
.op-actions { display: flex; align-items: center; gap: 16px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule); }
.op-actions .btn { flex: 1 1 auto; }
.op-safe { display: flex; gap: 12px; align-items: center; margin-top: 18px; font-size: 15.5px; color: var(--muted); }
.op-safe .star { color: var(--navy); width: 9px; height: 13px; }
.op-cover { position: sticky; top: calc(var(--mast) + 32px); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.op-cover .bookcover { max-width: 400px; }
.op-cover-cap { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; }
.op-mini { display: none; }

/* ---- one last look, and after: the cover with their name, the details beside it ------------- */
.confirm { display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); gap: 96px; align-items: start; padding-block: 40px 120px; }
.confirm-cover { position: sticky; top: calc(var(--mast) + 32px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.confirm-cover .bookcover { max-width: 440px; }
.confirm-cover p { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; }
.confirm-main .tb { margin-top: 26px; }
.details { margin-top: 40px; }
.details-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.details-head .h::after { display: none; }
.details-head a { font-size: 16px; }
.details dl div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.details dt { font-size: 16px; color: var(--muted); }
.details dd { font-size: 19px; color: var(--title); overflow-wrap: anywhere; }
.pay { margin-top: 40px; padding: 30px 32px 28px; border-radius: 24px; background: var(--lavender); }
.pay-line { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.pay-line span { font: 500 24px/1.2 var(--display); color: var(--title); }
.pay-line b { font: 500 34px/1 var(--display); color: var(--title); }
.pay-line b small { font: 400 13px/1 var(--serif); letter-spacing: .14em; color: var(--muted); margin-left: 6px; }
.pay ul { margin: 18px 0 24px; }
.pay li { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; font-size: 17px; }
.pay li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); transform: translateY(-2px); }
.pay-note { margin-top: 14px; font-size: 15px; color: var(--muted); text-align: center; }
.after { padding-block: 56px 120px; }
.after-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 80px; align-items: center; }
.after-top .bookcover { max-width: 360px; justify-self: center; transform: rotate(2deg); }
.next-cards { margin-top: 72px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.next-cards li { display: flex; flex-direction: column; gap: 16px; padding: 30px 30px 32px; border: 1px solid var(--rule); border-radius: 24px; background: #fff; }
.next-cards h2 { font: 500 27px/1.15 var(--display); color: var(--title); text-wrap: balance; }
.next-cards p { font-size: 17.5px; color: var(--ink); }
.after-foot { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.after-foot p { font-size: 16px; color: var(--muted); }
.after-foot p a { color: var(--blue); border-bottom: 1px solid currentColor; }

/* ---- the legal pages: a contents box, then numbered sections ----------------------------------------- */
.doc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 80px; align-items: start; padding-block: 48px 120px; }
.doc-toc { position: sticky; top: calc(var(--mast) + 28px); padding: 26px 26px 24px; border-radius: 24px; background: var(--lavender); }
.doc-toc ol { margin-top: 16px; counter-reset: toc; }
.doc-toc li { counter-increment: toc; }
.doc-toc a { display: grid; grid-template-columns: 30px 1fr; padding: 6px 0; font-size: 16px; line-height: 1.35; color: var(--ink); }
.doc-toc a::before { content: counter(toc, decimal-leading-zero); font: 500 17px/1.3 var(--display); color: var(--blue); }
.doc-toc a:hover { color: var(--blue); }
.doc-body { max-width: 720px; }
.doc-body > section { padding: 0 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--mast) + 20px); }
.doc-body > section:last-child { border-bottom: 0; }
.doc-body h2 { display: flex; gap: 16px; align-items: baseline; font: 600 14px/1.3 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.doc-body h2 span { font: 500 22px/1 var(--display); letter-spacing: 0; color: var(--blue); }
.doc-body h2::after { content: none; }
.doc-body p, .doc-body li { font-size: 18.5px; line-height: 1.68; }
.doc-body h2 + p, .doc-body h2 + ul, .doc-body h2 + .clauses { margin-top: 18px; }
.doc-body p + p, .doc-body p + ul, .doc-body ul + p { margin-top: 12px; }
.doc-body ul { padding-left: 22px; list-style: disc; }
.doc-body li { margin-bottom: 6px; }
.doc-body li::marker { color: var(--blue); }
.doc-body a { color: var(--blue); border-bottom: 1px solid currentColor; }
.doc-body strong { font-weight: 600; color: var(--title); }
.clauses { display: grid; gap: 12px; }
.clauses p { display: grid; grid-template-columns: 46px minmax(0, 1fr); }
.clauses p > span:first-child { font: 500 17px/1.7 var(--display); color: var(--soft); font-variant-numeric: lining-nums; }
.doc-date { margin-top: 22px; font: 600 12px/1.3 var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }

/* ---- small pages: a title, a line, the way on ------------------------------------------------- */
.small-page { padding-block: 72px 120px; min-height: calc(100svh - var(--mast) - 300px); }
.small-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; margin-top: 56px; }
.letter { padding: 34px 36px 32px; border-radius: 24px; background: var(--lavender); }
.letter .h + * { margin-top: 18px; }
.mail { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0 14px; border-bottom: 1.5px solid var(--navy);
  font: 500 clamp(24px, 2.6vw, 32px)/1.2 var(--display); color: var(--title); overflow-wrap: anywhere; }
.mail:hover { color: var(--blue); border-color: var(--blue); }
.topics li { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.topics h2 { font: 500 26px/1.2 var(--display); color: var(--title); }
.topics p { margin-top: 6px; font-size: 17.5px; color: var(--ink); }
.topics a { color: var(--blue); border-bottom: 1px solid currentColor; }
.actions { display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center; margin-top: 40px; }
.fine { margin-top: 18px; font-size: 15.5px; color: var(--muted); }
.fine a { color: var(--blue); border-bottom: 1px solid currentColor; }

/* ---- the free tools: the Saturn return, the sky today, the sky of a birth --------------------------- */
.tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.tools-calc h2 { margin-top: 18px; font: 500 clamp(40px, 4.8vw, 66px)/1.02 var(--display); letter-spacing: -.012em; color: var(--title); text-wrap: balance; }
.tools-calc h2 em { font-style: italic; color: var(--blue); }
.tools-lede { margin-top: 22px; max-width: 30em; font-size: 19.5px; line-height: 1.6; color: var(--muted); }
.tools-more { margin-top: clamp(40px, 5vw, 64px); }
/* a date, in one pill with its button */
.calc-form, .sky-date { margin-top: 34px; max-width: 540px; }
.calc-label { display: block; margin-bottom: 12px; font: 600 12px/1.3 var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
.calc-row { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--rule); border-radius: 999px; background: #fff;
  box-shadow: 0 16px 34px -26px rgba(18, 21, 52, .4); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.calc-row:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(42, 48, 194, .12), 0 16px 34px -26px rgba(18, 21, 52, .4); }
.calc-row:has([aria-invalid="true"]) { border-color: var(--error); }
.calc-input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 12px 0 20px; border: 0; border-radius: 999px; background: transparent;
  font: 500 22px/1 var(--display); color: var(--title); font-variant-numeric: lining-nums; }
.calc-input:focus { outline: none; }
.calc-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.calc-row .btn { flex: none; min-height: 52px; padding-inline: 26px; }
.calc-error { margin-top: 12px; font-size: 16px; color: var(--error); }
/* the answer, or the space waiting for it */
.calc-result { display: grid; min-height: 400px; transition: opacity .3s var(--ease); }
.calc-result.is-loading { opacity: .45; }
.calc-empty { display: grid; place-content: center; justify-items: center; gap: 18px; padding: 40px; border: 1px dashed var(--ring); border-radius: 28px;
  background: rgba(255, 255, 255, .55); text-align: center; font: italic 500 25px/1.3 var(--display); color: var(--muted); }
.calc-empty img { width: 132px; height: auto; }
.calc-card { align-self: center; padding: clamp(26px, 3.4vw, 40px); border-radius: 28px; background: #fff;
  box-shadow: 0 0 0 1px rgba(214, 210, 238, .9), 0 40px 80px -48px rgba(18, 21, 52, .42); }
.calc-sun { display: flex; align-items: center; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.calc-sun img { flex: none; width: 96px; height: 96px; object-fit: contain; }
.calc-sun p { font: 500 clamp(24px, 2.2vw, 30px)/1.22 var(--display); color: var(--title); text-wrap: balance; }
.calc-sun strong { font-weight: 500; font-style: italic; color: var(--blue); }
.calc-dates { margin: 6px 0 26px; }
.calc-dates div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid #f0edf8; }
.calc-dates dt { font-size: 17px; color: var(--muted); }
.calc-dates dd { text-align: right; font: 500 24px/1.15 var(--display); color: var(--title); font-variant-numeric: lining-nums; }
.calc-dates dd span { display: block; margin-top: 5px; font: 600 11px/1.3 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.calc-card .btn { white-space: normal; text-align: center; line-height: 1.25; }
.calc-note { margin-top: 14px; text-align: center; font-size: 15.5px; color: var(--muted); }
/* the cards that lead from one tool to the next */
.tool-cards { display: grid; gap: 14px; }
.tool-cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-card { display: flex; align-items: center; gap: 18px; padding: 18px 20px 18px 18px; border: 1px solid var(--rule); border-radius: 24px; background: #fff;
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .5s var(--ease); }
.tool-card:hover { border-color: var(--ring); transform: translateY(-2px); box-shadow: 0 26px 50px -36px rgba(18, 21, 52, .45); }
.tool-card:active { transform: scale(.99); }
.tool-card:focus-visible { border-radius: 24px; }
.disc-md { width: 62px; height: 62px; }
.tool-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tool-text b { font: 500 25px/1.15 var(--display); color: var(--title); text-wrap: balance; }
.tool-text > span { font-size: 16px; line-height: 1.45; color: var(--muted); }
.tool-go { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%; color: var(--navy);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
.tool-card:hover .tool-go { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateX(2px); }

/* a tool's own page */
.tool-page { padding-block: 72px 0; }
.tool-page .corner { width: min(400px, 30vw); }
.tool-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.tool-intro .tag + .tb { margin-top: 18px; }
.tool-title .t { font-size: clamp(46px, 5.2vw, 74px); }
.tool-err { margin-top: 12px; }
.tool-result { margin-top: 6px; }
.tool-read { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 72px; margin-top: clamp(72px, 8vw, 112px); padding-top: clamp(48px, 5vw, 64px); border-top: 1px solid var(--rule); }
.tool-read h2 { font: 500 clamp(28px, 2.6vw, 34px)/1.15 var(--display); color: var(--title); }
.tool-read p { margin-top: 12px; max-width: 34em; font-size: 18.5px; line-height: 1.66; }
.tool-read p + p { margin-top: 10px; }
.credit { margin-top: 32px; }
.tool-book { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 40px; margin-top: clamp(72px, 8vw, 112px);
  padding: clamp(32px, 4.6vw, 60px); border-radius: 32px; background: var(--lavender); overflow: hidden; }
.tool-book .tag { display: inline-flex; align-items: center; gap: 10px; }
.tool-book .tag .star { width: 9px; height: 13px; }
.tool-book h2 { margin-top: 16px; font: 500 clamp(34px, 3.8vw, 52px)/1.05 var(--display); letter-spacing: -.01em; color: var(--title); text-wrap: balance; }
.tool-book h2 em { font-style: italic; color: var(--blue); }
/* each line of its two line title balanced on its own, so neither ends on one word */
.tool-book h2 > * { display: block; text-wrap: balance; }
.tool-book-text > p:not(.tag) { margin-top: 16px; max-width: 30em; font-size: 18.5px; line-height: 1.6; }
.tool-book .hero-buy { justify-content: flex-start; margin-top: 30px; }
.tool-book-pages { position: relative; display: block; align-self: stretch; min-height: 320px; }
.tool-book-pages img { position: absolute; top: 50%; width: 56%; height: auto; border-radius: 2px; background: #fff; box-shadow: var(--page-shadow); transition: transform .8s var(--ease); }
.tool-book-pages img:first-child { left: 4%; transform: translateY(-52%) rotate(-7deg); }
.tool-book-pages img:last-child { right: 4%; transform: translateY(-48%) rotate(5deg); }
.tool-book-pages:hover img:first-child { transform: translateY(-54%) translateX(-6px) rotate(-9deg); }
.tool-book-pages:hover img:last-child { transform: translateY(-50%) translateX(6px) rotate(7deg); }
.tool-book-pages:focus-visible { border-radius: 24px; }
.tool-more { margin-top: clamp(56px, 6vw, 80px); }
.tool-more > .tag { margin-bottom: 18px; }
.tool-more .tool-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* the sky today: three readings, the wheel on a plate, the planets in a table */
.sky-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.sky-when { margin-top: 16px; font-size: 16px; color: var(--muted); }
.sky-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.sky-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px 20px; border: 1px solid var(--rule); border-radius: 24px; background: #fff; text-align: center; }
.sky-card img, .sky-card .moon { width: 78px; height: 78px; object-fit: contain; }
.sky-card p { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.sky-card p > span:last-child { margin-top: auto; padding-top: 2px; }
.sky-card b { font: 500 24px/1.1 var(--display); color: var(--title); }
.sky-card p > span:last-child { font-size: 15px; line-height: 1.35; color: var(--muted); }
.moon { width: 78px; height: 78px; padding: 6px; border-radius: 50%; background: var(--lavender); }
.moon-dark { fill: var(--navy); }
.moon-lit { fill: #f6f2ff; }
.sky-retro { display: flex; gap: 12px; align-items: baseline; margin-top: 22px; font: italic 500 23px/1.35 var(--display); color: var(--title); }
.sky-retro .star { flex: none; width: 10px; height: 14px; color: var(--blue); transform: translateY(1px); }
.sky-step { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; font-size: 16.5px; }
.sky-plate { position: sticky; top: calc(var(--mast) + 24px); display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 0; }
.sky-plate-disc { width: 100%; max-width: 580px; aspect-ratio: 1; padding: 4%; border-radius: 50%;
  background: radial-gradient(closest-side, #fff 72%, var(--lavender) 100%); box-shadow: 0 0 0 1px var(--rule), 0 50px 90px -50px rgba(18, 21, 52, .4); }
.sky-plate figcaption { max-width: 30em; text-align: center; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.sky-wheel { width: 100%; height: auto; overflow: visible; }
.sky-orbit { fill: none; stroke: var(--ring); stroke-width: .8; stroke-dasharray: 2 4; }
.sky-ring { fill: none; stroke: var(--navy); stroke-width: .8; opacity: .5; }
.sky-ring-inner { opacity: .25; }
.sky-tick { stroke: var(--navy); stroke-width: .6; opacity: .4; }
.sky-tick-sign { opacity: .6; }
.sky-sign { font: 15px/1 var(--symbols); fill: var(--navy); text-anchor: middle; dominant-baseline: central; }
.sky-aspect { stroke-width: .9; opacity: .6; }
.sky-aspect-trine, .sky-aspect-sextile { stroke: var(--blue); }
.sky-aspect-square, .sky-aspect-opposition { stroke: var(--rose); }
.sky-moon-dark { fill: var(--navy); }
.sky-moon-lit { fill: #f6f2ff; }
.sky-moon-limb { fill: none; stroke: var(--navy); stroke-width: 1; }
.sky-stem { stroke: var(--navy); stroke-width: .5; opacity: .28; }
.sky-body-disc { fill: #fff; stroke: var(--navy); stroke-width: .9; }
.sky-sun-dot { fill: var(--navy); }
.sky-glyph { font: 13px/1 var(--symbols); fill: var(--navy); text-anchor: middle; dominant-baseline: central; }
.sky-rx { font: 9px/1 var(--symbols); fill: var(--rose); text-anchor: middle; }
.sky-lists { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px 72px; margin-top: clamp(64px, 7vw, 96px); }
.sky-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 17.5px; font-variant-numeric: lining-nums tabular-nums; }
.sky-table th, .sky-table td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; }
.sky-table thead th { padding-block: 8px; font: 600 11.5px/1.3 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sky-table tbody th { color: var(--title); font-weight: 500; }
.sky-table .glyph { display: inline-block; width: 1.6em; font-family: var(--symbols); color: var(--blue); }
.sky-table .is-retro td:last-child { font-style: italic; color: var(--rose); }
.sky-aspects { margin-top: 16px; }
.sky-aspects li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 17.5px; }
.sky-aspects li > span:nth-child(2) { flex: 1 1 auto; }
.sky-aspects b { font: 500 19px/1 var(--display); color: var(--blue); font-variant-numeric: lining-nums; }
.aspect-mark { flex: none; width: 22px; height: 0; border-top: 2px solid var(--blue); }
.aspect-square, .aspect-opposition { border-color: var(--rose); }
.aspect-conjunction { width: 10px; height: 10px; margin-inline: 6px; border: 0; border-radius: 50%; background: var(--navy); }
.sky-lists .fine { margin-top: 14px; }

/* the sky of a birth: the form, then the star map on its plate */
.birth-form { margin-top: 30px; max-width: 560px; }
.birth-form .actions { margin-top: 34px; }
.birth-plate .sky-plate-disc { padding: 3%; background: #fff; }
.star-map svg { width: 100%; height: auto; }
.star-map-empty { display: grid; place-items: center; background: radial-gradient(closest-side, #fff 40%, var(--lavender) 100%); }
.star-map-empty img { width: 66px; height: auto; }
.birth-cap { font: italic 500 23px/1.35 var(--display); color: var(--title); text-align: center; }
.birth-lines { display: grid; gap: 8px; margin-top: 14px; text-align: left; }
.birth-lines li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; line-height: 1.5; color: var(--ink); }
.birth-lines .star { flex: none; width: 9px; height: 13px; color: var(--blue); transform: translateY(1px); }

/* a few stars fly up where the order form is pressed; now and then one falls across her sky */
.sparks { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; pointer-events: none; }
.falling { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---- motion: nothing the page needs, all of it at rest for reduced motion ------------------------------ */
[data-rise] { --rise: 0; }
@keyframes glint { 0%, 100% { opacity: .7; transform: scale(.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.06) rotate(6deg); } }
@keyframes twinkle { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1) rotate(10deg); } }
@keyframes fan-in { from { transform: none; } }
@keyframes lift-in { from { opacity: 0; transform: translateY(30px); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes menu-link { from { opacity: 0; transform: translateY(12px); } }
@keyframes step-halo { 0%, 100% { transform: scale(1.35); opacity: .9; } 50% { transform: scale(1.6); opacity: .25; } }
@media (prefers-reduced-motion: no-preference) {
  .rise-held { opacity: 0; transform: translateY(28px); }
  .rise-held.is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--rise) * 90ms); }
  .sky-spark { animation: twinkle 5.5s ease-in-out infinite; }
  .bc-star, .last-star { animation: glint 5s ease-in-out infinite; }
  .bc-name { transition: opacity .3s var(--ease); }
  .hero-copy > * { animation: lift-in 1.1s var(--ease) backwards; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .hero-copy > :nth-child(5) { animation-delay: .32s; }
  .steps li[aria-current="step"] .step-moon-halo { animation: step-halo 2.8s ease-in-out infinite; }
  .calc-card { animation: lift-in .8s var(--ease) backwards; }
  .fan-cover { animation: lift-in 1.3s var(--ease) .25s backwards; }
  .fan-page { animation: fan-in 1.6s var(--ease) .55s backwards; }
}

/* ---- narrower screens -------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .nav a { padding: 0 12px; font-size: 16px; }
  .sky-planet { height: 66%; opacity: .85; }
  .sky-corner { width: 34vw; }
  .facts-row li { padding-inline: 12px; gap: 12px; }
  .facts-row b { font-size: 21px; }
}
@media (max-width: 980px) {
  .mast-row { grid-template-columns: 1fr auto auto; gap: 6px; padding: 0 6px 0 20px; }
  .menu { display: grid; place-content: center; gap: 6px; width: 48px; height: 48px; border-radius: 50%; color: var(--navy); transition: background-color .3s var(--ease); }
  .menu:hover { background: var(--lavender); }
  .menu:focus-visible { border-radius: 50%; }
  .menu i { display: block; width: 20px; border-top: 1.5px solid currentColor; transition: transform .45s var(--ease); }
  .menu[aria-expanded="true"] i:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu[aria-expanded="true"] i:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: none; flex-direction: column; gap: 2px; padding: 10px;
    background: rgba(255, 255, 255, .98); border: 1px solid var(--rule); border-radius: 28px; box-shadow: 0 30px 60px -30px rgba(18, 21, 52, .42); }
  .nav.is-open { display: flex; animation: menu-in .5s var(--ease); }
  .nav a { min-height: 58px; padding: 0 20px; border-radius: 20px; font: 500 27px/1 var(--display); color: var(--title); }
  .nav.is-open a { animation: menu-link .6s var(--ease) backwards; }
  .nav.is-open a:nth-child(2) { animation-delay: .05s; }
  .nav.is-open a:nth-child(3) { animation-delay: .1s; }
  .nav.is-open a:nth-child(4) { animation-delay: .15s; }
  .sky-planet { height: 52%; top: auto; bottom: 18%; opacity: .7; }
  .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .facts-row li { justify-content: flex-start; padding-inline: 20px; }
  .facts-row li:nth-child(3) { border-left: 0; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-tall { grid-row: auto; }
  .every-page-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yours { grid-template-columns: 1fr; }
  .yours-cover .bookcover { max-width: 340px; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid .head { position: static; }
  .tools, .tool-top, .sky-top { grid-template-columns: minmax(0, 1fr); }
  .calc-result { min-height: 0; }
  .calc-empty { min-height: 220px; }
  .sky-plate { position: static; }
  .sky-lists { grid-template-columns: 1fr; }
  .tool-book { grid-template-columns: 1fr; }
  .tool-book-pages { min-height: 280px; max-width: 460px; width: 100%; justify-self: center; }
  .tool-cards-row, .tool-more .tool-cards { grid-template-columns: 1fr; }
  .last-panel { grid-template-columns: 1fr; }
  .last-art { min-height: 300px; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0)); mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0)); }
  .last-planet { left: auto; right: 0; top: -60%; width: 100%; height: auto; translate: none; -webkit-mask-image: none; mask-image: none; }
  .last-arc { left: 8%; top: 6%; height: 92%; }
  .last-star { left: 30%; top: 26%; }
  .last-text { padding: 8px clamp(28px, 6vw, 56px) clamp(44px, 7vw, 64px); }
  .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .order-page, .confirm, .after-top, .doc, .small-grid { grid-template-columns: 1fr; gap: 48px; }
  .op-cover, .confirm-cover, .doc-toc { position: static; }
  .op-cover { display: none; }
  .op-mini { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
  .op-mini .bookcover { width: 128px; flex: none; box-shadow: 1px 1px 0 #d9d1ee, 2px 2px 0 #f4effb, 0 22px 34px -18px rgba(18, 21, 52, .55); }
  .op-mini p { font-size: 13px; line-height: 1.7; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .confirm-cover { order: -1; }
  .confirm-cover .bookcover { max-width: 300px; }
  .next-cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .steps-row { grid-template-columns: 1fr; gap: 56px; }
  .tool-cards-row, .tool-more .tool-cards, .tool-read { grid-template-columns: 1fr; }
  .orbit-line { display: none; }
  .checks { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  :root { --gutter: 20px; --mast: 80px; }
  body { font-size: 18px; }
  .mast { top: 10px; }
  .mast-row { height: 60px; padding-left: 18px; }
  .brand { font-size: 11.5px; gap: 10px; letter-spacing: .3em; }
  .brand span { margin-right: -.3em; }
  .mast-cta .wide { display: none; }
  .mast-cta .narrow { display: inline; }
  .btn { width: 100%; }
  .mast-cta { width: auto; }
  .hero { padding-top: calc(var(--mast) + 40px); }
  .sky-corner { width: 62vw; opacity: .9; }
  .sky-planet { height: 40%; bottom: 30%; opacity: .55; }
  .hero-title { margin-top: 22px; font-size: clamp(44px, 12.4vw, 64px); }
  .hero-sub { font-size: 18.5px; }
  .hero-buy { flex-direction: column; gap: 14px; width: 100%; }
  .hero-price { flex-wrap: wrap; justify-content: center; row-gap: 2px; text-align: center; }
  .fan { --w: 36vw; --c: 52vw; margin-top: 44px; }
  .fan-1 { transform: translateX(-104%) rotate(-12deg); }
  .fan-4 { transform: translateX(104%) rotate(12deg); }
  .facts-row { padding-block: 22px; }
  .facts-row li { padding-inline: 10px; gap: 10px; }
  .facts-row li + li { border-left: 0; }
  .facts-row li:nth-child(even) { border-left: 1px solid var(--rule); }
  .facts-row b { font-size: 19px; white-space: normal; }
  .facts-row span { font-size: 14px; }
  .disc { width: 40px; height: 40px; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; }
  .tile-wide { grid-column: auto; }
  .tile { border-radius: 24px; }
  .tile-art { padding: 30px 22px 4px; min-height: 220px; }
  .tile-text { padding: 16px 24px 26px; }
  .three .sign { width: 96px; }
  .three figcaption { font-size: 19px; }
  .peek { min-height: 250px; }
  .every-page summary { padding-left: 24px; font-size: 22px; }
  .every-page-list { grid-template-columns: 1fr; padding: 4px 24px 26px; }
  .deck { --dw: 58vw; }
  .deck-controls { gap: 14px; }
  .deck-cap { min-width: 0; flex: 1; font-size: 16px; }
  .deck-cap b { display: block; margin: 0 0 4px; }
  .try input { height: 60px; font-size: 23px; }
  .yours-cover { padding-block: 28px; }
  .yours-cover .bookcover { max-width: 280px; }
  .yours-orbit { width: 116%; }
  .price-card { border-radius: 26px; }
  .price-top { flex-direction: column; align-items: flex-start; }
  .faq summary { padding: 20px 0; font-size: 22px; }
  .faq details p { padding-right: 0; font-size: 17.5px; }
  .last-panel { border-radius: 28px; }
  .last-art { min-height: 260px; }
  .last-planet { width: 165%; top: -50%; }
  .last-arc { left: -4%; top: 4%; height: 96%; }
  .last-star { left: 22%; top: 24%; width: 36px; }
  .page { padding-block: 72px 40px; }
  .corner { width: 62vw; opacity: .7; }
  .prose p { font-size: 19px; }
  .quote { padding: 22px 22px 22px 20px; gap: 16px; }
  .foot { padding-top: 48px; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .viewer { border-radius: 20px; }
  .viewer-frame { padding: 14px 12px 16px; }
  .viewer-stage { grid-template-columns: minmax(0, 1fr); }
  .viewer-stage .round { display: none; }
  .order-page { padding-top: 20px; gap: 28px; }
  .op-mini .bookcover { width: 108px; }
  .steps { align-items: flex-start; gap: 6px; }
  .steps li, .steps li:last-child { flex: 1 1 0; flex-direction: column; gap: 8px; font-size: 13px; text-align: center; }
  .steps li::after { display: none; }
  .step-moon { width: 28px; height: 28px; }
  .yours-lede, .head-lede { font-size: 18.5px; }
  .hero-sub-2 { font-size: 21px; }
  .calc-row { flex-direction: column; align-items: stretch; padding: 8px; border-radius: 28px; }
  .calc-input { height: 52px; text-align: center; padding: 0 12px; }
  .calc-row .btn { width: 100%; }
  .calc-sun img { width: 76px; height: 76px; }
  .calc-dates dd { font-size: 21px; }
  .tool-card { padding: 16px; gap: 14px; }
  .disc-md { width: 52px; height: 52px; }
  .tool-text b { font-size: 22px; }
  .tool-go { display: none; }
  .tool-page { padding-top: 56px; }
  .sky-cards { grid-template-columns: 1fr; }
  .sky-card { flex-direction: row; justify-content: flex-start; gap: 18px; padding: 14px 18px; text-align: left; }
  .sky-card img, .sky-card .moon { width: 60px; height: 60px; }
  .sky-retro { font-size: 21px; }
  .sky-table { font-size: 16px; }
  .sky-table th, .sky-table td { padding-right: 6px; }
  .tool-book { border-radius: 26px; }
  .tool-book .hero-buy { align-items: flex-start; }
  .tool-book-pages { min-height: 230px; }
  .pair { grid-template-columns: 1fr; }
  .chips { grid-template-columns: 1fr; }
  .op-actions .round { flex: none; }
  .details dl div { grid-template-columns: 1fr; gap: 2px; }
  .pay { padding: 24px 20px; }
  .doc { padding-top: 32px; }
  .letter { padding: 26px 22px; }
}
@media (max-width: 360px) {
  .mast-row { width: calc(100% - 24px); padding-left: 16px; }
  .brand { gap: 8px; letter-spacing: .24em; }
  .brand span { margin-right: -.24em; }
  .mast-cta { padding-inline: 16px; }
  .menu { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}