/* Spirituality Media home: light paper, one navy band for the hero, the book as the only picture.
   Tokens are the site's own (books page, 24 Oct 2026) plus the logo gold. */
:root{
  --paper:#ffffff; --paper-2:oklch(0.975 0.008 86);
  --navy:oklch(0.21 0.06 262); --navy-deep:oklch(0.155 0.045 262);
  --ink:oklch(0.2 0.03 262); --ink-2:oklch(0.4 0.025 262); --ink-3:oklch(0.56 0.02 262);
  --cream:oklch(0.94 0.028 86); --cream-2:oklch(0.84 0.03 84); --cream-3:oklch(0.71 0.028 82);
  --accent:oklch(0.68 0.16 58); --accent-ink:oklch(0.16 0.035 262);
  --gold:#D7A84B;
  --line:oklch(0.2 0.03 262 / 0.12); --line-dark:oklch(0.94 0.028 86 / 0.14);
  --f-display:"Cormorant Garamond","EB Garamond","Iowan Old Style",Georgia,serif;
  --f-body:"EB Garamond","Iowan Old Style",Georgia,serif;
  --f-ui:"Jost","Avenir Next","Segoe UI",sans-serif;
  --maxw:1180px; --gutter:clamp(20px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:clamp(17px,1.05vw + 12px,19px);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,5.6vw,4.6rem);letter-spacing:-.01em}
h2{font-size:clamp(2rem,3.6vw,3rem)}
h3{font-size:1.5rem}
h1 em,h2 em{font-style:italic;font-weight:400}
p{margin:0;max-width:60ch}
.eyebrow{font-family:var(--f-ui);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.eyebrow.dim{color:var(--ink-3)}
.ui{font-family:var(--f-ui)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-ui);font-size:14px;letter-spacing:.02em;font-weight:500;text-decoration:none;border-radius:999px;padding:14px 26px;white-space:nowrap;transition:transform .2s ease,background .2s ease}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-link{padding:14px 0;border-bottom:1px solid currentColor;border-radius:0;gap:6px}
.btn-link::after{content:"→"}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* header, the site's one shell */
.sm-top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.sm-in{min-height:68px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px}
.sm-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--f-ui);font-size:13.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.sm-brand img{width:28px;height:28px;flex:none}
.sm-nav{display:flex;gap:28px;font-family:var(--f-ui);font-size:13.5px;letter-spacing:.06em}
.sm-nav a{text-decoration:none;color:var(--ink-2);position:relative;padding:4px 0;white-space:nowrap;transition:color .3s}
.sm-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .4s cubic-bezier(0.16,1,0.3,1)}
.sm-nav a:hover,.sm-nav a[aria-current]{color:var(--ink)}
.sm-nav a:hover::after,.sm-nav a[aria-current]::after{right:0}
.sm-top__r{display:flex;align-items:center;gap:20px;font-family:var(--f-ui);font-size:13.5px;letter-spacing:.06em;white-space:nowrap}
.sm-top__r a{text-decoration:none;color:var(--ink-2);transition:color .3s}
.sm-top__r a:hover{color:var(--ink)}
@media (max-width:1020px){.sm-nav{gap:20px}.sm-in{column-gap:20px}}
/* One header geometry above the phone layout: the landing's container (/assets/shell.css), and a right-hand zone
   as wide as its Order button, left empty here, so the mark and the menu sit exactly where they do on /hermetica. */
@media (min-width:801px){.sm-top .wrap.sm-in{max-width:none;width:min(1180px,100% - 2*clamp(16px,4vw,48px));padding-inline:0}}
@media (min-width:1060px){.sm-top__r{min-width:154px;justify-content:flex-end}}
@media (max-width:800px){.sm-in{padding-block:12px;gap:10px 16px}.sm-brand{font-size:12px;letter-spacing:.14em;gap:10px}.sm-top__r{gap:14px}.sm-nav{order:3;width:100%;justify-content:space-between;gap:12px;font-size:12.5px;letter-spacing:.02em}}

/* hero */
.hero{background:var(--navy-deep);color:var(--cream);position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 18% 20%,oklch(0.26 0.07 264 / .9),transparent 65%);z-index:-1}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;padding-block:clamp(56px,8vw,112px)}
.hero h1{color:var(--cream)}
.hero .lead{font-size:clamp(1.15rem,1.4vw,1.35rem);color:var(--cream-2);margin-top:26px;max-width:34ch}
.hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:38px}
.hero .btn-link{color:var(--cream)}
.hero .ed{margin-top:52px;display:flex;align-items:center;gap:14px;font-family:var(--f-ui);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-3)}
.hero .ed::before{content:"";width:40px;height:1px;background:var(--accent)}
.hero .ed b{color:var(--cream);font-weight:500}
.stage{position:relative;display:grid;place-items:center;min-height:420px}
.stage .ring{position:absolute;inset:0;margin:auto;width:min(92%,540px);aspect-ratio:1;max-width:100%;color:var(--gold);opacity:.55}
.stage .book{position:relative;width:min(62%,330px);height:auto;filter:drop-shadow(0 40px 60px oklch(0.08 0.03 262 / .7))}
.stage .spine{position:absolute;right:-52px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:center;font-family:var(--f-ui);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-3);white-space:nowrap}
@media (max-width:860px){.hero-in{grid-template-columns:1fr;gap:28px}.stage{min-height:0;order:-1;padding-top:10px}.stage .book{width:min(54%,260px)}.stage .spine{display:none}.hero .ed{margin-top:36px}}

/* sections */
section{padding-block:clamp(64px,8vw,112px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 40px;margin-bottom:clamp(32px,4vw,56px)}
.sec-head .meta{font-family:var(--f-ui);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}

/* first edition */
.edition{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:start}
.edition .num{font-family:var(--f-display);font-size:1.1rem;color:var(--accent);letter-spacing:.08em;margin-bottom:12px}
.edition h2{font-size:clamp(2.4rem,4.4vw,3.6rem)}
.edition .desc{margin-top:22px;color:var(--ink-2)}
.inside{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;font-size:.98rem}
.inside li{padding-left:18px;position:relative;color:var(--ink-2)}
.inside li::before{content:"·";position:absolute;left:4px;color:var(--accent)}
.edition .cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:36px}
.spec{border:1px solid var(--line);border-radius:4px;padding:26px 28px;background:var(--paper-2);font-family:var(--f-ui);font-size:14px}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:12px 24px;margin:0}
.spec dt{color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;padding-top:2px}
.spec dd{margin:0;color:var(--ink)}
.spec .price{display:flex;align-items:baseline;gap:12px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.spec .price b{font-family:var(--f-display);font-size:2.2rem;font-weight:400;line-height:1}
.spec .price span{color:var(--ink-3)}
.spec .price s{font-family:var(--f-display);font-size:1.4rem;line-height:1;color:var(--ink-3)}
.cover{margin-top:18px;display:flex;align-items:center;gap:18px;color:var(--ink-2);font-size:14px}
.cover img{width:72px;height:auto;flex:none;filter:drop-shadow(0 8px 14px oklch(0.2 0.03 262 / .25))}
@media (max-width:860px){.edition{grid-template-columns:1fr}.inside{grid-template-columns:1fr}}

/* our editions: the three books on one shelf, quieter than the featured block above */
.editions{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);scroll-margin-top:72px}
.shelf{padding-block:4px}
.books{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(7,auto);column-gap:clamp(14px,2vw,28px);row-gap:0}
/* one card = 7 shared rows: cover / number / title / description / binding / price / button */
.bk{grid-row:span 7;display:grid;grid-template-rows:subgrid;row-gap:0;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:clamp(24px,2.6vw,36px) clamp(16px,2vw,28px) clamp(22px,2.4vw,30px);text-align:center}
.bk-cover{grid-row:1;display:flex;justify-content:center;align-items:flex-end;margin-bottom:26px;text-decoration:none}
.bk-cover img{width:min(60%,200px);height:auto;filter:drop-shadow(0 22px 26px oklch(0.2 0.03 262 / .22)) drop-shadow(0 4px 6px oklch(0.2 0.03 262 / .12));transition:transform .4s cubic-bezier(0.16,1,0.3,1)}
a.bk-cover:hover img{transform:translateY(-3px)}
.bk-num{grid-row:2;margin:0 auto 8px;font-family:var(--f-display);font-size:1rem;letter-spacing:.1em;color:var(--accent)}
.bk h3{grid-row:3;font-size:clamp(1.4rem,1.9vw,1.7rem)}
.bk h3 .sub{display:block;margin-top:8px;font-family:var(--f-ui);font-size:11px;font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);line-height:1.4}
.bk-desc{grid-row:4;margin:12px auto 0;max-width:34ch;color:var(--ink-2);font-size:.98rem;line-height:1.5}
.bk-bind{grid-row:5;max-width:none;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-family:var(--f-ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.bk-price{grid-row:6;max-width:none;margin:14px 0 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 10px}
.bk-price s{font-family:var(--f-display);font-size:1.15rem;line-height:1;color:var(--ink-3)}
.bk-price b{font-family:var(--f-display);font-size:1.8rem;font-weight:400;line-height:1;color:var(--ink)}
.bk-price span{font-family:var(--f-ui);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.bk > .btn{grid-row:7;justify-self:center;align-self:end;margin-top:22px}
/* same box as .btn: 1px border + 1px less padding */
.btn-soon{padding:13px 25px;background:transparent;color:var(--ink-3);border:1px solid var(--line);border-color:color-mix(in oklch,var(--ink-3) 45%,transparent);cursor:default;user-select:none}
.btn-soon:hover{transform:none}
.editions .note{margin-top:24px;color:var(--ink-3);font-size:.95rem}
/* without subgrid: equal-height cards, binding, price and button pinned to the bottom */
@supports not (grid-template-rows:subgrid){
  .books{grid-template-rows:none}
  .bk{grid-row:auto;grid-template-rows:auto auto auto 1fr auto auto auto}
}
/* phones: one scroll-snap row, full-bleed inside the section, 16px gutters, next card peeking */
@media (max-width:720px){
  .editions{overflow-x:clip}
  .shelf{margin-left:calc(-1 * max(var(--gutter),env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(var(--gutter),env(safe-area-inset-right,0px)));overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none}
  .shelf::-webkit-scrollbar{display:none}
  .shelf:focus-visible{outline-offset:-2px}
  .books{width:max-content;grid-template-columns:repeat(3,min(76vw,340px));column-gap:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .bk{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){
  .bk-cover img{transition:none}
  a.bk-cover:hover img{transform:none}
  .shelf{scroll-behavior:auto}
}

/* letter */
.letter-card{background:var(--navy);color:var(--cream);border-radius:6px;padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.letter-card::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;border:1px solid oklch(0.94 0.028 86 / .14)}
.letter-card .eyebrow{color:var(--gold)}
.letter-card h2{color:var(--cream)}
.letter-card p{color:var(--cream-2);margin-top:18px}
.form{display:flex;gap:10px;flex-wrap:wrap}
.form input{flex:1 1 220px;min-width:0;height:50px;border:1px solid oklch(0.94 0.028 86 / .3);background:oklch(0.94 0.028 86 / .06);color:var(--cream);border-radius:999px;padding:0 20px;font-family:var(--f-ui);font-size:15px}
.form input::placeholder{color:var(--cream-3)}
.form button{height:50px;border:0;cursor:pointer}
.form .small{flex-basis:100%;font-family:var(--f-ui);font-size:12px;letter-spacing:.06em;color:var(--cream-3);margin-top:4px}
@media (max-width:860px){.letter-card{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.about .device{width:130px;margin-bottom:28px;opacity:.9}
.about p+p{margin-top:16px}
.about .why{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.about .why li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.about .why .r{font-family:var(--f-display);color:var(--accent);font-size:1.1rem;letter-spacing:.1em;padding-top:4px}
.about .why h3{font-size:1.35rem;margin-bottom:6px}
.about .why p{color:var(--ink-2);font-size:.98rem}
@media (max-width:860px){.about{grid-template-columns:1fr}}

/* footer, the site's shell */
.sm-foot{border-top:1px solid var(--line);background:var(--paper-2);padding:48px 0 36px;font-family:var(--f-ui);font-size:14px;color:var(--ink-2)}
.sm-foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.sm-foot .sm-brand{margin-bottom:12px}
.sm-foot h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:500}
.sm-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sm-foot a{text-decoration:none;color:var(--ink-2)}
.sm-foot a:hover{color:var(--ink)}
.sm-foot .follow{color:var(--ink)}
.sm-foot .bar{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:12px;letter-spacing:.06em;color:var(--ink-3)}
@media (max-width:860px){.sm-foot-in{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.sm-foot-in{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

.soc[data-astro-cid-qss4mvwn]{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-left:-4px}.soc__i[data-astro-cid-qss4mvwn]{display:inline-flex;padding:4px;cursor:default;border-radius:4px;outline-offset:2px}.soc__note[data-astro-cid-qss4mvwn]{flex-basis:100%;padding-left:4px;font-size:12px;letter-spacing:.04em;opacity:0;transition:opacity .15s}.soc[data-astro-cid-qss4mvwn]:has(.soc__i:hover,.soc__i:focus) .soc__note[data-astro-cid-qss4mvwn]{opacity:1}