/* Hareth / Soulstronomy --------------------------------------------------
   Brand-facing pages carry the full dark Hareth aesthetic (locked spec).
   Document surfaces (.doc) invert to vellum, per the application rule:
   anything that reads like a working page sits on light ground.
   Single committed visual world -- every colour is painted explicitly so the
   page holds on any host background.
   ---------------------------------------------------------------------- */

:root{
  --ink:#1C1917;          /* deep warm charcoal, brand primary */
  --ink-deep:#141210;     /* ground */
  --ink-raised:#221E1A;   /* panels */
  --ink-edge:#2E2924;
  --vellum:#F5F0E8;       /* aged paper */
  --vellum-dim:#E4DCCB;
  --gold:#C48E3B;         /* cover gold: warmer, for type on dark */
  --gold-deep:#B8960C;    /* aged gold: interiors, on light ground */
  --forest:#2D4A3E;       /* old leather binding green */
  --forest-lit:#5C8A74;   /* forest, legible on dark */
  --paper-text:#1C1917;
  --text:#EBE4D8;
  --text-dim:#AFA495;
  --rule:rgba(196,142,59,.26);
  --rule-soft:rgba(235,228,216,.12);

  --display:"Cormorant Garamond",Cormorant,Garamond,"Times New Roman",serif;
  --body:"EB Garamond","Cormorant Garamond",Garamond,Georgia,serif;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink-deep);
  color:var(--text);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.72;
  font-feature-settings:"liga" 1,"onum" 1;
}

img,svg{max-width:100%}

::selection{background:rgba(196,142,59,.3);color:#fff}

a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:#DCAE63}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* --- layout ----------------------------------------------------------- */

.wrap{width:100%;max-width:64rem;margin-inline:auto;padding-inline:20px}
.measure{max-width:34rem}
.measure-wide{max-width:44rem}

section{padding-block:clamp(3rem,7vw,5.5rem)}
section.tight{padding-block:clamp(2rem,4vw,3rem)}

/* --- masthead --------------------------------------------------------- */

.masthead{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:rgba(20,18,16,.93);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.masthead-in{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.4rem;
  padding-block:.75rem;
}
.brandmark{
  font-family:var(--display);font-weight:600;font-size:.95rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--vellum);
  text-decoration:none;white-space:nowrap;
}
.brandmark:hover{color:var(--gold)}
.brandmark .of{color:var(--text-dim);letter-spacing:.14em}
nav.site{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;margin-left:auto}
nav.site a{
  font-family:var(--display);font-weight:500;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);
  text-decoration:none;padding-block:.2rem;
}
nav.site a:hover{color:var(--gold)}
nav.site a[aria-current="page"]{color:var(--vellum);border-bottom:1px solid var(--gold)}

/* --- type ------------------------------------------------------------- */

.eyebrow{
  font-family:var(--display);font-weight:600;font-size:.74rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1.1rem;
}
.eyebrow.forest{color:var(--forest-lit)}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;text-wrap:balance;margin:0}
h1{font-size:clamp(2.4rem,7vw,3.9rem);line-height:1.04;letter-spacing:-.005em}
h2{font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.14;margin-bottom:.9rem}
h3{font-size:1.24rem;line-height:1.24;margin-bottom:.4rem}
h4{font-size:.98rem;letter-spacing:.02em}

.sub{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.15rem,2.6vw,1.55rem);line-height:1.4;
  color:var(--gold);margin:.9rem 0 0;
}
.lede{font-size:1.16rem;line-height:1.66;color:var(--text)}
p{margin:0 0 1.1rem}
p:last-child{margin-bottom:0}
.dim{color:var(--text-dim)}
.small{font-size:.92rem;line-height:1.6}

.dropcap::first-letter{
  float:left;font-family:var(--display);font-weight:600;
  font-size:3.5em;line-height:.8;color:var(--gold);
  padding-right:.07em;padding-top:.06em;
}

.stack{display:flex;flex-direction:column;gap:1.4rem}
.stack-sm{display:flex;flex-direction:column;gap:.6rem}

/* --- rules ------------------------------------------------------------ */

.rule{border:0;height:1px;background:var(--rule);margin:0}
.rule-lozenge{
  display:flex;align-items:center;gap:.9rem;color:var(--rule);margin-block:2.4rem;
}
.rule-lozenge::before,.rule-lozenge::after{content:"";flex:1;height:1px;background:var(--rule)}
.rule-lozenge span{
  width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:none;
}

/* --- hero ------------------------------------------------------------- */

.hero{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 70% 60% at 50% 38%,rgba(196,142,59,.09),transparent 70%);
}
.hero .geometry{
  position:absolute;z-index:-2;top:50%;left:50%;
  width:min(780px,142%);aspect-ratio:1;transform:translate(-50%,-50%);
  opacity:.5;pointer-events:none;
}
.hero-in{position:relative;padding-block:clamp(4rem,12vw,7.5rem);text-align:center}
.wordmark{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.5rem,10.5vw,5.4rem);line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--vellum);
  margin:0;text-indent:.16em;
}
.wordmark.gold{color:var(--gold)}
.presents{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:.95rem;letter-spacing:.08em;color:var(--text-dim);
  margin:1.5rem 0 0;
}
.hero-in .lede{margin-inline:auto;margin-top:1.8rem;max-width:34rem}

/* --- feature panel ---------------------------------------------------- */

.panel{
  background:var(--ink-raised);border:1px solid var(--ink-edge);
  border-top:2px solid var(--gold);padding:clamp(1.5rem,4vw,2.4rem);
}
.panel-forest{border-top-color:var(--forest-lit)}

/* --- vellum document surface ------------------------------------------ */

.doc{
  background:var(--vellum);color:var(--paper-text);
  padding:clamp(1.6rem,4.5vw,2.6rem);
  box-shadow:0 1px 0 var(--vellum-dim) inset,0 18px 40px -28px rgba(0,0,0,.8);
}
.doc h2,.doc h3,.doc h4{color:var(--ink)}
.doc .eyebrow{color:var(--gold-deep)}
.doc a{color:#8a6f08}
.doc .dim{color:#5E564A}
.doc hr.rule{background:rgba(184,150,12,.32)}
.doc .contents{columns:2;column-gap:2.2rem;column-rule:1px solid rgba(184,150,12,.25)}
@media (max-width:640px){.doc .contents{columns:1}}

/* --- grids ------------------------------------------------------------ */

.grid{display:grid;gap:1px;background:var(--ink-edge);border:1px solid var(--ink-edge)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.cell{background:var(--ink-raised);padding:1.4rem 1.5rem}
.cell .n{
  font-family:var(--display);font-weight:600;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:.7rem;
}

/* --- product cards ---------------------------------------------------- */

.products{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.card{
  display:flex;flex-direction:column;gap:.75rem;
  background:var(--ink-raised);border:1px solid var(--ink-edge);
  border-left:2px solid var(--gold);padding:1.5rem 1.6rem;
}
.card.print{border-left-color:var(--forest-lit)}
.card h3{margin:0}
.card .kicker{
  font-family:var(--display);font-weight:600;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);
}
.card .blurb{font-size:.95rem;line-height:1.6;color:var(--text-dim);flex:1}
.card .foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin-top:.3rem}

.price{
  font-family:var(--display);font-weight:600;font-size:1.32rem;
  color:var(--vellum);font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:.01em;
}
.price-note{font-size:.84rem;color:var(--text-dim);letter-spacing:.02em}

/* --- buttons ---------------------------------------------------------- */

.buy{
  display:inline-block;font-family:var(--display);font-weight:600;
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--gold);color:#17130D;
  padding:.68rem 1.5rem;border:1px solid var(--gold);border-radius:1px;
  text-decoration:none;transition:background .15s ease,color .15s ease;
}
.buy:hover{background:#D6A252;color:#17130D}
.buy--quiet{
  background:transparent;color:var(--gold);border-color:var(--rule);
}
.buy--quiet:hover{background:rgba(196,142,59,.1);color:var(--gold)}
.doc .buy{background:var(--gold-deep);border-color:var(--gold-deep);color:#FFFBF0}
.doc .buy:hover{background:#9c7f0a;color:#FFFBF0}
.buyrow{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

.pending{
  font-family:var(--display);font-weight:600;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--forest-lit);
  border:1px dashed rgba(92,138,116,.5);padding:.6rem 1.1rem;border-radius:1px;
  display:inline-block;
}

/* --- the spine diagram ------------------------------------------------ */

.spine-layout{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:start}
@media (min-width:860px){.spine-layout{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}}
.spine-figure{
  background:var(--ink);border:1px solid var(--ink-edge);
  padding:1.2rem .6rem;display:flex;justify-content:center;
}
.spine-figure svg{width:100%;height:auto;max-width:22rem}

.axis-key{display:flex;flex-direction:column;gap:.55rem;margin:1.3rem 0 0}
.axis-key div{display:flex;gap:.6rem;align-items:baseline;font-size:.93rem}
.axis-key .swatch{
  width:9px;height:9px;flex:none;margin-top:.45rem;border-radius:50%;
}
.axis-key .swatch.constraint{background:var(--forest-lit)}
.axis-key .swatch.capacity{background:var(--gold)}
.axis-key b{font-family:var(--display);font-weight:600;letter-spacing:.02em}

.gates{display:grid;gap:1px;background:var(--ink-edge);border:1px solid var(--ink-edge)}
.gate{background:var(--ink-raised);padding:1.3rem 1.5rem}
.gate .label{
  font-family:var(--display);font-weight:600;font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.gate .nodes{
  list-style:none;margin:.7rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;
}
.gate .nodes li{
  font-family:var(--display);font-size:1.06rem;font-weight:500;color:var(--vellum);
  display:flex;align-items:baseline;gap:.42rem;
}
.gate .nodes li::before{
  content:"";width:7px;height:7px;flex:none;transform:rotate(45deg);
  background:var(--gold);
}
.gate .nodes li.constraint::before{background:var(--forest-lit)}
.gate.pivot{border-left:2px solid var(--gold)}

/* node / gate descriptors ---------------------------------------------- */

.node{display:block;padding-left:.9rem;border-left:1px solid var(--rule)}
.node b{
  font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--vellum);
  letter-spacing:.01em;
}
.node i{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:.95rem;color:var(--gold);
}
.node span{display:block;font-size:.9rem;line-height:1.55;color:var(--text-dim)}

.axisblock{margin-bottom:1.2rem}
.axisblock:last-child{margin-bottom:0}
.axisblock .axname{
  font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:.01em;
}
.axisblock.constraint .axname{color:var(--forest-lit)}
.axisblock.capacity .axname{color:var(--gold)}
.axisblock.constraint .node{border-left-color:rgba(92,138,116,.45)}
.axisblock.capacity .node{border-left-color:rgba(196,142,59,.4)}
.axisblock .stack-sm,.axisblock .node+.node{margin-top:.6rem}

ol.asks{
  list-style:none;counter-reset:ask;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.55rem;
}
ol.asks li{
  counter-increment:ask;position:relative;padding-left:1.7rem;
  font-size:.96rem;line-height:1.5;color:var(--vellum);
}
ol.asks li::before{
  content:counter(ask);position:absolute;left:0;top:0;
  font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--gold);
}
ol.asks li span{
  font-family:var(--display);font-style:italic;color:var(--gold);font-size:.92rem;
}

/* --- volume list ------------------------------------------------------ */

.volumes{display:grid;gap:1px;background:var(--ink-edge);border:1px solid var(--ink-edge)}
.vol{
  background:var(--ink-raised);padding:1.15rem 1.4rem;
  display:grid;gap:.15rem 1.2rem;align-items:baseline;
  grid-template-columns:3.4rem minmax(0,1fr) auto;
}
.vol .roman{
  font-family:var(--display);font-weight:600;font-size:1.05rem;
  letter-spacing:.1em;color:var(--gold);font-variant-numeric:lining-nums;
}
.vol .title{font-family:var(--display);font-weight:600;font-size:1.16rem;color:var(--vellum)}
.vol .where{
  grid-column:2;font-size:.9rem;line-height:1.55;color:var(--text-dim);
  letter-spacing:.01em;max-width:34rem;padding-top:.15rem;
}
.vol .buyside{grid-column:3;grid-row:1 / span 2;display:flex;align-items:center;gap:.9rem}
.vol .price{font-size:1.1rem}
@media (max-width:560px){
  .vol{grid-template-columns:3.4rem minmax(0,1fr)}
  .vol .buyside{grid-column:1 / -1;grid-row:auto;margin-top:.6rem}
}

/* --- detail page header ----------------------------------------------- */

.detail-head{display:grid;gap:1.6rem}
@media (min-width:820px){
  .detail-head{grid-template-columns:minmax(0,1fr) minmax(0,15rem);align-items:start;gap:3rem}
}
.buybox{
  background:var(--ink-raised);border:1px solid var(--ink-edge);
  border-top:2px solid var(--gold);padding:1.4rem 1.5rem;
  display:flex;flex-direction:column;gap:.9rem;
}
.buybox .price{font-size:1.9rem;display:block}
.buybox dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;font-size:.9rem}
.buybox dt{color:var(--text-dim);letter-spacing:.02em}
.buybox dd{margin:0;color:var(--vellum);font-variant-numeric:tabular-nums}

/* --- spec table ------------------------------------------------------- */

.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.6rem .9rem;border-bottom:1px solid rgba(184,150,12,.22)}
th{
  font-family:var(--display);font-weight:600;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);
}
td{font-variant-numeric:tabular-nums}

/* --- footer ----------------------------------------------------------- */

footer.site{
  border-top:1px solid var(--rule);background:var(--ink);
  padding-block:2.8rem calc(2.8rem + env(safe-area-inset-bottom,0px));
  margin-top:1rem;
}
footer.site .cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
footer.site h4{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.8rem;
}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
footer.site a{color:var(--text-dim);text-decoration:none;font-size:.94rem}
footer.site a:hover{color:var(--gold);text-decoration:underline}
footer.site .colophon{
  margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--rule-soft);
  font-size:.86rem;color:var(--text-dim);display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}