/* The Starmates, v2 — the shared frame for every page.
   Two grounds, one object. By day the page is warm paper with night-blue ink; by night it is the sky.
   The reading itself (a sheet of A4 paper, gold marks) looks the same in both: it is the thing being sold.
   One accent, gold, taken from the sun and from the documents; it marks, it never carries text on paper. */

:root{
  /* type */
  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --ui:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  --figures:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --t-hero:clamp(46px,7.6vw,112px);
  --t-h2:clamp(34px,4.4vw,60px);
  --t-lead:clamp(20px,.7vw + 16px,25px);
  --t-body:clamp(17px,.25vw + 16px,19px);
  --t-small:15px;

  /* space */
  --gut:clamp(16px,4vw,48px);
  --wide:1240px;
  --sec:clamp(96px,13vw,200px);

  /* day: paper ground, night-blue ink */
  --bg:#EDE7DB; --fg:#1B1E2B; --muted:#4F4C52;
  --sheet:#FBF8F2; --sheet-2:#F4EFE5; --sheet-fg:#1B1E2B; --sheet-muted:#55525A;
  --band:#171A29; --band-fg:#F2EDE3; --band-muted:#BDBACB;
  --gold:#B8893A; --gold-fg:#7A5716; --gold-on-band:#E1B862;
  --line:rgba(27,30,43,.18);
  --btn:#1B1E2B; --btn-fg:#F7F3EC; --btn-hover:#B8893A; --btn-hover-fg:#171A29;
  --chip:rgba(27,30,43,.07);
  --lift:0 1px 2px rgba(40,30,20,.08),0 18px 40px -18px rgba(40,30,20,.35);
  --logo:#1B1E2B;
  /* home page orbit */
  --card:#1B1E2B; --card-line:#F3EEE3; --on-accent:#171614; --shade:rgba(23,22,20,.24);
  --orbit:rgba(27,30,43,.22); --glow:rgba(255,255,255,0); --logo-shadow:rgba(0,0,0,0);
  --moon-glow:rgba(120,114,100,.22); --sun:#E7AE3C; --sun-halo:rgba(231,174,60,.25);
  color-scheme:light;
}
:root[data-sky="moon"]{
  --bg:#0B0C12; --fg:#F2EDE3; --muted:#B4B1BF;
  --sheet:#F5F1E8; --sheet-2:#ECE6DA; --sheet-fg:#1B1E2B; --sheet-muted:#55525A;
  --band:#F2ECE0; --band-fg:#171A29; --band-muted:#4F4C55;
  --gold:#D8AE5E; --gold-fg:#7A5716; --gold-on-band:#7A5716;
  --line:rgba(242,237,227,.2);
  --btn:#F2EDE3; --btn-fg:#11131D; --btn-hover:#D8AE5E; --btn-hover-fg:#11131D;
  --chip:rgba(242,237,227,.09);
  --lift:0 1px 2px rgba(0,0,0,.4),0 22px 48px -18px rgba(0,0,0,.75);
  --logo:#F2EDE3;
  --card:#23263A; --card-line:#F3EEE3; --shade:rgba(0,0,0,.5);
  --orbit:rgba(242,237,227,.24); --glow:rgba(243,238,227,.05); --logo-shadow:rgba(0,0,0,.35);
  --moon-glow:rgba(196,210,255,.2); --sun:#DC761C; --sun-halo:rgba(220,118,28,.2);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--ui);font-size:var(--t-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;transition:background-color .5s ease,color .5s ease}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
[hidden]{display:none!important}
::selection{background:var(--gold);color:#171A29}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:4px;box-shadow:0 0 0 5px var(--bg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* night sky: only shown in the moon version */
.sky-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:0;pointer-events:none;transition:opacity .9s ease}
:root[data-sky="moon"] .sky-canvas{opacity:1}

/* ---------- buttons: one shape, fully round; ink at rest, gold under the cursor ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:12px 26px;border-radius:999px;
  background:var(--btn);color:var(--btn-fg);font-weight:500;font-size:17px;line-height:1.2;text-decoration:none;white-space:nowrap;
  transition:background-color .25s ease,color .25s ease,transform .18s cubic-bezier(.2,.7,.2,1)}
.btn:hover{background:var(--btn-hover);color:var(--btn-hover-fg)}
.btn:active{transform:scale(.97)}
.btn.quiet{background:var(--chip);color:var(--fg)}
.btn.quiet:hover{background:var(--btn-hover);color:var(--btn-hover-fg)}
.btn .arr{display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){ .btn:hover .arr{transform:translate(2px,-2px)} }
.btn .arr.down{transform:none}
@media (hover:hover) and (pointer:fine){ .btn:hover .arr.down{transform:translateY(2px)} }

/* ---------- the top bar: a plain row, not a floating pill ---------- */
.bar{position:fixed;z-index:700;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) var(--gut) 10px;color:var(--fg);
  background:color-mix(in srgb,var(--bg) 0%,transparent);transition:transform .3s cubic-bezier(.23,1,.32,1),background-color .25s ease}
.bar.solid{background:var(--bg)}
.bar.away{transform:translateY(-100%)}
.lead-group{display:flex;align-items:center;gap:6px;min-width:0}
.brand{display:flex;align-items:center;text-decoration:none;padding:4px}
.brand .mark{display:block;height:34px;width:auto;fill:currentColor;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){ .brand:hover .mark{transform:rotate(-6deg) scale(1.06)} }
.links{display:flex;align-items:center;gap:4px}
.links .nav{display:flex;gap:2px;margin-right:8px}
.links .nav a{padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:500;font-size:16px;transition:background-color .2s ease}
.links .nav a:hover{background:var(--chip)}
.links .nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:.35em}
.links .cta{min-height:44px;padding:10px 20px;font-size:16px}
@media (max-width:900px){ .links .nav{display:none} }

/* the sun / moon switch */
.links .sky{position:relative;flex:none;width:58px;height:44px;margin-inline:4px;border-radius:999px}
.links .sky::before{content:"";position:absolute;inset:7px 2px;border-radius:999px;background:var(--chip)}
.links .sky::after{content:"";position:absolute;top:12px;left:7px;width:20px;height:20px;border-radius:50%;
  background:var(--sun);box-shadow:0 0 0 3px var(--sun-halo);transition:transform .28s cubic-bezier(.23,1,.32,1),background-color .28s ease,box-shadow .28s ease} /* taste-skill-ignore: drawn sun and moon of the switch */
:root[data-sky="moon"] .links .sky::after{transform:translateX(24px);background:transparent;box-shadow:inset -7px -3px 0 0 var(--fg)} /* taste-skill-ignore: drawn sun and moon of the switch */

/* the menu button and the menu */
.menu-btn{position:relative;flex:none;width:44px;height:44px;border-radius:999px;display:grid;place-content:center;gap:5px;transition:background-color .2s ease}
.menu-btn:hover{background:var(--chip)}
.menu-btn i{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
.menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{position:absolute;top:calc(100% + 6px);left:var(--gut);width:min(380px,calc(100vw - 2 * var(--gut)));display:flex;flex-direction:column;
  padding:12px;border-radius:22px;background:var(--sheet);color:var(--sheet-fg);box-shadow:var(--lift); /* taste-skill-ignore: the open menu floats */
  max-height:calc(100dvh - 90px);overflow-y:auto;transform-origin:top left;animation:menuIn .22s cubic-bezier(.23,1,.32,1)}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.menu > a,.menu .menu-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:10px 16px;border-radius:14px;
  text-decoration:none;text-align:left;font-family:var(--display);font-variation-settings:"SOFT" 100;font-size:25px;line-height:1.1;letter-spacing:-.01em;
  transition:background-color .2s ease}
.menu > a:hover,.menu .menu-sub:hover{background:var(--sheet-2)}
.menu .menu-sub b{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);
  transition:transform .3s ease;opacity:.6}
.menu .menu-sub[aria-expanded="true"] b{transform:rotate(-135deg) translate(-2px,-2px)}
.menu-list{padding:2px 6px 8px 16px}
.menu-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 12px;border-radius:12px;text-decoration:none;font-size:17px;font-weight:500}
.menu-list a small{font-family:var(--figures);font-size:17px;color:var(--sheet-muted);font-variant-numeric:lining-nums tabular-nums}
.menu-list a:hover{background:var(--sheet-2)}
.menu-list a[aria-current="page"]{background:var(--sheet-2)}

@media (prefers-reduced-motion:reduce){
  body,.btn,.sky-canvas,.links .sky::after,.bar,.menu,.menu-btn i{transition:none;animation:none}
}

/* ---------- the drawn starfish on cards (home orbit, pricing, next reading) ---------- */
.art .cut{stroke:var(--card)}
.art .cutf{fill:var(--card);stroke:var(--card)}

/* footer contact line */
.contact{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.todo{display:inline-block;padding:3px 10px;border-radius:999px;font-size:var(--t-small);background:var(--chip);color:var(--muted)}