:root{
  --ink:#0D1428;
  --ink-soft:#18213C;
  --ink-square:#222C4F;
  --paper:#E9E4D6;
  --paper-deep:#D6CFBB;
  --brass:#C79B3F;
  --carmine:#8E2434;
  --text-dark:#1B2137;
  --text-mute:#5A6076;
  --text-on-ink:#DCD8CB;
  --text-on-ink-mute:#8E97B4;
  --measure:64ch;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--text-dark);
  font-family:"Karla",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.scroll-progress{position:fixed;left:0;top:0;z-index:110;width:100%;height:3px;background:transparent;pointer-events:none}
.scroll-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--carmine),var(--brass));box-shadow:0 0 12px rgba(199,155,63,.65)}
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:100;background:var(--brass);color:#101526;padding:.75rem 1rem;font-weight:700;text-decoration:none}
.skip-link:focus{top:1rem}
h1,h2,h3,.display{
  font-family:"Bodoni Moda",Georgia,serif;
  font-weight:500;
  line-height:1.02;
  letter-spacing:-0.015em;
  margin:0;
}
p{margin:0 0 1.1rem}
a{color:inherit}
img{max-width:100%;display:block}

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

.wrap{
  width:min(1120px,92vw);
  margin-inline:auto;
}

/* ---------- masthead ---------- */
.masthead{
  position:relative;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.4rem 0 0;
}
.mast-links{display:flex;align-items:center;gap:1.2rem}
.mast-link{color:var(--text-on-ink);font-size:.9rem;text-decoration:none;opacity:.8}
.mast-link:hover{opacity:1;color:#fff}
.mark{
  display:inline-block;
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:1.15rem;
  line-height:1.05;
  letter-spacing:0.02em;
  color:var(--text-on-ink);
  text-decoration:none;
}
.mark .mark-c{color:var(--brass)}
.mark-sub{
  /* the rest of the book title, same line, same serif, one notch
     smaller and lighter so the wordmark still reads first */
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:.82em;
  font-weight:400;
  letter-spacing:0.01em;
  color:var(--text-on-ink);
}
.mark:hover .mark-sub{color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:"Karla",sans-serif;
  font-size:0.98rem;
  font-weight:600;
  letter-spacing:0.01em;
  padding:0.85rem 1.6rem;
  border:1px solid transparent;
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{
  background:var(--brass);
  color:#14192B;
}
.btn-primary:hover{background:#D9AE52}
.btn-ghost{
  background:transparent;
  color:var(--text-on-ink);
  border-color:rgba(199,155,63,.55);
}
.btn-ghost:hover{border-color:var(--brass);color:#fff}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--text-on-ink);
  overflow:hidden;
  padding-bottom:0;
}
.hero:before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(circle at 22% 35%,rgba(142,36,52,.22),transparent 27%),
    radial-gradient(circle at 78% 30%,rgba(199,155,63,.13),transparent 25%),
    radial-gradient(circle at 58% 78%,rgba(64,86,150,.15),transparent 30%);
  filter:blur(18px);
  animation:nebula-drift 20s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero-board{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.028) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.028) 75%),
    linear-gradient(45deg,rgba(255,255,255,.028) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.028) 75%);
  background-size:140px 140px;
  background-position:0 0,70px 70px;
  pointer-events:none;
  animation:board-drift 32s linear infinite;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 92%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 92%);
}
.hero-stars{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
@keyframes board-drift{to{background-position:140px 70px,210px 140px}}
@keyframes nebula-drift{
  0%{transform:translate3d(-2%,-1%,0) scale(1)}
  100%{transform:translate3d(3%,2%,0) scale(1.08)}
}
.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:3.5rem;
  align-items:center;
  padding:5rem 0 5.5rem;
}
.eyebrow{
  font-size:.88rem;
  color:var(--brass);
  letter-spacing:.06em;
  margin:0 0 1.4rem;
}
h1.title{
  /* AstroChess: stays on one line at every width. The clamp is sized so
     eleven characters of Bodoni fit the hero column without wrapping.

     Bodoni is a didone, so its hairlines are extremely thin. At display
     size the thin diagonal of the A all but vanished against the dark
     ground. The stroke thickens every stroke by the same fraction of the
     font size, which brings the hairline back without flattening the
     contrast that gives the face its character. In em, so it scales. */
  font-size:clamp(2.5rem,8.6vw,7rem);
  font-weight:700;
  line-height:.92;
  letter-spacing:-0.035em;
  color:#F4F0E6;
  white-space:nowrap;
  -webkit-text-stroke:0.011em currentColor;
  paint-order:stroke fill;
}
h1.title .title-colon{color:var(--brass)}
h1.title em{
  font-style:normal;
  color:var(--brass);
}
.sub{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(1.35rem,2.9vw,2.05rem);
  font-weight:400;
  line-height:1.22;
  letter-spacing:-0.005em;
  color:#EDE8DA;
  max-width:19ch;
  margin:1.1rem 0 .6rem;
}
.byline{
  color:var(--text-on-ink-mute);
  font-size:.95rem;
  margin-bottom:2.2rem;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero-meta{
  margin-top:2.2rem;
  font-size:.82rem;
  color:var(--text-on-ink-mute);
  line-height:1.8;
}
.proof-row{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.15rem}
.proof-pill{border:1px solid rgba(199,155,63,.28);background:rgba(255,255,255,.035);padding:.42rem .65rem;color:#C7CDE1;font-size:.76rem;line-height:1.2}

/* ---------- book cover ---------- */
.cover-stage{
  display:flex;
  justify-content:center;
  align-items:center;
  perspective:1150px;
}
.cover-img{
  width:min(430px,90%);
  height:auto;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1));
  transform-origin:50% 50%;
  filter:drop-shadow(var(--sx,0px) var(--sy,34px) 55px rgba(0,0,0,.65));
  will-change:transform;
}

/* ---------- zodiac rank strip ---------- */
/* The zodiac characters default to emoji presentation, which overrides
   any colour we set. U+FE0E after each one forces text presentation, and
   this font stack keeps the browser out of its emoji font. */
.rank{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  border-top:1px solid rgba(199,155,63,.28);
}
.rank-sq{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:clamp(86px,7.5vw,118px);
  padding:0;
  margin:0;
  border:0;
  cursor:pointer;
  font-family:"Karla",sans-serif;
  background:#101832;
  color:var(--brass);
  transition:background-color .22s ease,color .22s ease;
}
.rank-sq:nth-child(odd){background:var(--ink-square)}
.rank-sq .rg{
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols","Apple Symbols","Arial Unicode MS","Symbola",serif;
  font-variant-emoji:text;
  font-size:clamp(1.45rem,2.5vw,2.05rem);
  line-height:1;
  transition:transform .22s ease;
  animation:glyphIn .55s cubic-bezier(.2,.7,.3,1) var(--d) backwards;
}
.rank-sq .rn{
  font-size:.66rem;
  letter-spacing:.07em;
  color:var(--text-on-ink-mute);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .22s ease,transform .22s ease,color .22s ease;
}
.rank-sq:hover,.rank-sq:focus-visible{background:var(--brass);color:#14192B}
.rank-sq:hover .rn,.rank-sq:focus-visible .rn{opacity:1;transform:none;color:#2E2716}
.rank-sq:hover .rg,.rank-sq:focus-visible .rg{transform:scale(1.14)}
.rank-sq.is-active{background:var(--brass);color:#14192B}
.rank-sq.is-active .rn{opacity:1;transform:none;color:#2E2716}
@keyframes glyphIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- idea in numbers ---------- */
.numbers-band{background:#F3EFE4;border-bottom:1px solid var(--paper-deep)}
.numbers{display:grid;grid-template-columns:repeat(3,1fr)}
.number{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;padding:2rem 4vw;border-right:1px solid var(--paper-deep)}
.number:last-child{border-right:0}
.number strong{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(2.5rem,5vw,4.2rem);line-height:.8;color:var(--carmine);font-weight:500}
.number span{max-width:14ch;font-size:.86rem;line-height:1.35;color:var(--text-mute);text-transform:uppercase;letter-spacing:.055em}

/* ---------- sections ---------- */
section{padding:5.5rem 0}
.section-head{max-width:var(--measure);margin-bottom:2.8rem}
.section-head h2{font-size:clamp(2rem,4.4vw,3rem)}
.section-head p{
  margin-top:1.1rem;
  color:var(--text-mute);
  font-size:1.05rem;
}

/* ---------- inside / twelve signs ---------- */
.signs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--paper-deep);
}
.sign{
  position:relative;
  aspect-ratio:1/1;
  border:0;
  margin:0;
  padding:1.2rem;
  font-family:"Karla",sans-serif;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--paper);
  color:var(--text-dark);
  transition:background-color .2s ease;
}
.sign:nth-child(8n+2),
.sign:nth-child(8n+4),
.sign:nth-child(8n+5),
.sign:nth-child(8n+7){background:var(--paper-deep)}
.sign:hover{background:#C9C1AA}
.sign[aria-expanded="true"]{background:var(--carmine)!important;color:#fff}
.sign[aria-expanded="true"] .glyph,.sign[aria-expanded="true"] .dates,.sign[aria-expanded="true"] .hint{color:#fff}
.sign .glyph{font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols","Apple Symbols","Arial Unicode MS","Symbola",serif;font-variant-emoji:text;font-size:2.1rem;line-height:1;color:var(--carmine)}
.sign .name{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:1.35rem;
  margin-top:auto;
}
.sign .dates{font-size:.76rem;color:var(--text-mute)}
.sign .hint{
  position:absolute;
  top:1rem;right:1.1rem;
  font-size:.72rem;
  color:var(--text-mute);
}
.sign[aria-expanded="true"]{background:var(--ink);color:var(--text-on-ink)}
.sign[aria-expanded="true"] .glyph{color:var(--brass)}
.sign[aria-expanded="true"] .dates,
.sign[aria-expanded="true"] .hint{color:var(--text-on-ink-mute)}

.readout{
  border:1px solid var(--paper-deep);
  border-top:0;
  padding:2rem 1.6rem;
  background:#F1ECDF;
  min-height:120px;
}

/* ---------- transformation ---------- */
.method{background:var(--ink);color:var(--text-on-ink);position:relative;overflow:hidden}
.method:before{content:"♞";position:absolute;right:-.04em;bottom:-.28em;font-family:Georgia,serif;font-size:min(46vw,34rem);line-height:1;color:rgba(199,155,63,.045);pointer-events:none}
.method .section-head h2{color:#F4F0E6}
.method .section-head p{color:var(--text-on-ink-mute)}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(199,155,63,.28);position:relative}
.method-card{padding:2rem 2rem 1rem 0;margin-right:2rem;border-right:1px solid rgba(199,155,63,.18)}
.method-card:last-child{border-right:0;margin-right:0}
.method-card .step{display:block;color:var(--brass);font-family:"Bodoni Moda",Georgia,serif;font-size:1.15rem;margin-bottom:2rem}
.method-card h3{font-size:1.65rem;color:#F4F0E6;margin-bottom:.8rem}
.method-card p{color:var(--text-on-ink-mute);font-size:.95rem}
/* ---------- sign finder and matchup ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.finder{
  border:1px solid var(--paper-deep);
  border-bottom:0;
  background:#F1ECDF;
  padding:1.6rem;
}
.finder-q{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:1.35rem;
  margin:0 0 .9rem;
}
.finder-controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.finder select{
  font-family:"Karla",sans-serif;
  font-size:1rem;
  padding:.72rem .8rem;
  min-width:8.5rem;
  background:var(--paper);
  border:1px solid var(--paper-deep);
  border-radius:2px;
  color:var(--text-dark);
}
.finder select:focus{border-color:var(--brass);outline:none}
.finder-alt{margin:.9rem 0 0;font-size:.85rem;color:var(--text-mute)}

.sign{position:relative}
.sign.is-found::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid var(--brass);
  pointer-events:none;
}

.readout .r-chapter{
  display:block;
  margin-top:1.2rem;
  font-size:.86rem;
  color:var(--text-mute);
}
.readout .r-chapter a{color:var(--carmine);font-weight:600}

.matchup{
  border:1px solid var(--paper-deep);
  border-top:0;
  background:var(--ink);
  color:var(--text-on-ink);
  padding:1.8rem 1.6rem;
}
.matchup-q{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:1.3rem;
  color:#F4F0E6;
  margin:0 0 1.1rem;
}
.opponents{
  /* a full rank of the board, flush with the twelve squares above it,
     rather than a huddle of small buttons on the left */
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:0;
  margin-inline:-1.6rem;
  border-block:1px solid rgba(199,155,63,.28);
}
.opponents button{
  aspect-ratio:1/1;
  width:100%;
  height:auto;
  padding:0;
  margin:0;
  border:0;
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Noto Sans Symbols","Apple Symbols","Arial Unicode MS","Symbola",serif;
  font-variant-emoji:text;
  font-size:clamp(1rem,1.9vw,1.5rem);
  color:var(--brass);
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
.opponents button:nth-child(odd){background:var(--ink-square)}
.opponents button:nth-child(even){background:#101832}
.opponents button:hover{background:#2A3765;color:#fff}
.opponents button[aria-pressed="true"]{background:var(--brass);color:#14192B}
.matchup-out:not(:empty){
  margin-top:1.5rem;
  padding-top:1.4rem;
  border-top:1px solid rgba(199,155,63,.28);
}
.matchup-out .m-head{
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols","Symbola","Bodoni Moda",Georgia,serif;
  font-variant-emoji:text;
  font-size:1.45rem;
  color:#F4F0E6;
  margin-bottom:.7rem;
}
.matchup-out p{color:var(--text-on-ink-mute);max-width:var(--measure);margin-bottom:0}
.matchup-out .m-verdict{color:var(--brass);margin-top:.7rem}

.readout .r-name{
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols","Symbola","Bodoni Moda",Georgia,serif;
  font-variant-emoji:text;
  font-size:1.5rem;
  margin-bottom:.5rem;
}
.readout p{max-width:var(--measure);margin-bottom:0;color:var(--text-dark)}
.readout .r-empty{color:var(--text-mute)}

/* ---------- who it is for ---------- */
.for-band{background:var(--ink);color:var(--text-on-ink)}
.for-band h2{color:#F4F0E6}
.for-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.6rem;
  margin-top:2.6rem;
}
.for-grid h3{font-size:1.35rem;color:#F4F0E6;margin-bottom:.7rem}
.for-grid p{color:var(--text-on-ink-mute);font-size:.98rem;margin:0}
.for-grid .pc{font-size:1.6rem;color:var(--brass);display:block;margin-bottom:.9rem}

/* ---------- buy ---------- */
.buy-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
  align-items:start;
}
.price{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:3.4rem;
  line-height:1;
  margin-bottom:.3rem;
}
.price small{font-size:1rem;font-family:"Karla",sans-serif;color:var(--text-mute)}
.buy-list{list-style:none;padding:0;margin:1.6rem 0 0}
.buy-list li{
  padding:.6rem 0 .6rem 1.6rem;
  position:relative;
  border-bottom:1px solid var(--paper-deep);
  font-size:.98rem;
}
.buy-list li::before{
  content:"\265F";
  position:absolute;left:0;top:.55rem;
  color:var(--carmine);
}
.paypal-panel{
  background:#F1ECDF;
  border:1px solid var(--paper-deep);
  padding:2rem;
}
.paypal-panel h3{font-size:1.4rem;margin-bottom:.4rem}
.paypal-note{font-size:.85rem;color:var(--text-mute);margin-bottom:1.4rem}
[id^="paypal-container"]{min-height:56px}
.order-assurance{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--paper-deep)}
.order-assurance div{font-size:.76rem;line-height:1.35;color:var(--text-mute)}
.order-assurance strong{display:block;color:var(--text-dark);font-size:.82rem}
.paypal-fallback{
  font-size:.9rem;
  color:var(--carmine);
  border:1px dashed var(--carmine);
  padding:1rem;
}
.secure{
  margin-top:1.2rem;
  font-size:.8rem;
  color:var(--text-mute);
}

/* ---------- author ---------- */
.author-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:3.5rem;
  align-items:start;
}
.author-kicker{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.5rem}
.author-kicker span{font-size:.76rem;text-transform:uppercase;letter-spacing:.055em;color:var(--carmine);border:1px solid #C9C1AA;padding:.35rem .55rem}
.portrait{
  aspect-ratio:4/5;
  background:var(--ink);
  border:1px solid var(--paper-deep);
  display:grid;
  place-items:center;
  color:var(--brass);
  font-size:3rem;
  overflow:hidden;
}
.portrait img{width:100%;height:100%;object-fit:cover}
.author-grid blockquote{
  margin:2rem 0 0;
  padding-left:1.4rem;
  border-left:3px solid var(--brass);
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:1.3rem;
  line-height:1.4;
  color:var(--text-dark);
}

/* ---------- bulk form ---------- */
.bulk{background:var(--ink);color:var(--text-on-ink)}
.bulk h2{color:#F4F0E6}
.bulk p{color:var(--text-on-ink-mute)}
.rights-note{font-size:.88rem;max-width:60ch;border-left:2px solid var(--brass);padding-left:1rem}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
  margin-top:2rem;
  max-width:760px;
}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1 / -1}
label{font-size:.85rem;color:var(--text-on-ink-mute)}
input,textarea,select{
  font-family:"Karla",sans-serif;
  font-size:1rem;
  padding:.75rem .85rem;
  background:#111A33;
  border:1px solid #2C3757;
  border-radius:2px;
  color:#F0ECE0;
}
input:focus,textarea:focus,select:focus{border-color:var(--brass);outline:none}
textarea{min-height:120px;resize:vertical}

/* ---------- footer ---------- */
footer{
  background:#090F1E;
  color:var(--text-on-ink-mute);
  padding:3rem 0;
  font-size:.86rem;
}
.foot-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
footer a{color:var(--brass);text-decoration:none}
footer a:hover{text-decoration:underline}
.mobile-order{display:none}

/* ---------- entrance ---------- */
.reveal{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards}
.reveal:nth-child(1){animation-delay:.05s}
.d1{animation-delay:.12s}
.d2{animation-delay:.22s}
.d3{animation-delay:.32s}
.d4{animation-delay:.42s}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{animation:none;opacity:1;transform:none}
  *{transition:none !important}
  .hero:before,.hero-board{animation:none}
  .rank-sq .rg{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .masthead{padding-top:1rem}
  .hero-inner{grid-template-columns:1fr;gap:2.5rem;padding:3rem 0 4rem}
  .cover-stage{order:-1}
  .cover{transform:none;width:min(260px,64%)}
  .signs{grid-template-columns:repeat(2,1fr)}
  .finder select{flex:1 1 8rem;min-width:0}
  .finder-controls .btn{flex:1 1 100%}
  .opponents button{width:2.6rem;height:2.6rem;font-size:1.1rem}
  .for-grid{grid-template-columns:1fr;gap:2rem}
  .buy-grid,.author-grid{grid-template-columns:1fr;gap:2.4rem}
  .form-grid{grid-template-columns:1fr}
  .rank{grid-template-columns:repeat(6,1fr)}
  .numbers{grid-template-columns:1fr}
  .number{border-right:0;border-bottom:1px solid var(--paper-deep);padding:1.25rem 4vw}
  .number:last-child{border-bottom:0}
  .method-grid{grid-template-columns:1fr}
  .method-card{border-right:0;border-bottom:1px solid rgba(199,155,63,.18);margin-right:0;padding:1.7rem 0}
  .method-card:last-child{border-bottom:0}
  .method-card .step{margin-bottom:.8rem}
  section{padding:4rem 0}
  .order-assurance{grid-template-columns:1fr}
}
@media (max-width:600px){
  .mobile-order{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 4vw;background:rgba(13,20,40,.96);color:#fff;border-top:1px solid rgba(199,155,63,.45);backdrop-filter:blur(10px)}
  .mobile-order span{font-family:"Bodoni Moda",Georgia,serif;font-size:1.05rem}
  .mobile-order .btn{padding:.65rem 1rem}
  footer{padding-bottom:6rem}
}

/* =========================================================
   SUB PAGES
   Everything below styles the pages generated by build.py.
   The home page does not use any of it.
   ========================================================= */
.subhead{background:var(--ink);border-bottom:1px solid rgba(199,155,63,.22)}
.subhead .masthead{padding:1.1rem 0}
.mast-link.is-here{opacity:1;color:var(--brass)}

.crumbs{font-size:.82rem;color:var(--text-on-ink-mute);margin-bottom:1.6rem}
.crumbs a{color:var(--brass);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs i{margin:0 .5rem;font-style:normal;opacity:.45}

.page-hero,.sign-hero{background:var(--ink);color:var(--text-on-ink);padding:3rem 0 3.4rem}
.page-hero h1,.sign-hero h1{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(2.1rem,5vw,3.4rem);
  line-height:1.02;
  color:#F4F0E6;
}
.page-hero .deck,.sign-hero .deck{
  margin:1.1rem 0 0;
  max-width:58ch;
  font-size:1.06rem;
  color:var(--text-on-ink-mute);
}
.sign-hero-inner{display:flex;align-items:center;gap:1.8rem}
.sign-hero-glyph{
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols","Symbola",serif;
  font-variant-emoji:text;
  font-size:clamp(3.2rem,8vw,5.4rem);
  line-height:1;
  color:var(--brass);
  flex:0 0 auto;
}

.prose-wrap{padding:3.6rem 0}
.prose{max-width:66ch}
.prose h2{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(1.5rem,3vw,2.05rem);
  margin:2.6rem 0 .9rem;
}
.prose h2:first-child{margin-top:0}
.prose p{font-size:1.05rem;line-height:1.72}
.prose blockquote{
  margin:2rem 0;
  padding-left:1.3rem;
  border-left:3px solid var(--brass);
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:1.25rem;
  line-height:1.4;
}
.prose a{color:var(--carmine);font-weight:600}
.author-inline{width:min(300px,60%);border:1px solid var(--paper-deep);margin-bottom:1.5rem}

.matchups{background:#F1ECDF;border-block:1px solid var(--paper-deep);padding:3.4rem 0}
.matchups h2{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(1.5rem,3vw,2.05rem);margin-bottom:1.8rem}
.matchup-card{border-top:1px solid var(--paper-deep);padding:1.4rem 0}
.matchup-card h3{font-family:"Bodoni Moda",Georgia,serif;font-size:1.3rem;margin-bottom:.5rem}
.matchup-card h3 a{color:var(--text-dark);text-decoration:none}
.matchup-card h3 a:hover{color:var(--carmine)}
.matchup-card p{max-width:64ch;margin-bottom:.4rem}
.matchup-card .verdict{color:var(--text-mute);font-size:.95rem;margin-bottom:0}
.all-signs{margin:1.8rem 0 0}
.all-signs a{color:var(--carmine);font-weight:600}

.faq-section{padding:3.4rem 0}
.faq-section h2{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(1.5rem,3vw,2.05rem);margin-bottom:1.4rem}
.qa{border-bottom:1px solid var(--paper-deep);padding:.95rem 0}
.qa summary{cursor:pointer;font-weight:600;font-size:1.02rem}
.qa summary::marker{color:var(--brass)}
.qa p{margin:.8rem 0 .2rem;max-width:66ch;color:var(--text-mute)}
.qa a{color:var(--carmine);font-weight:600}

.sign-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--paper-deep)}
.sign-card{
  display:flex;flex-direction:column;gap:.3rem;
  padding:1.5rem 1.3rem;
  min-height:12rem;
  text-decoration:none;color:var(--text-dark);
  background:var(--paper);
  transition:background-color .2s ease;
}
.sign-card:nth-child(8n+2),.sign-card:nth-child(8n+4),
.sign-card:nth-child(8n+5),.sign-card:nth-child(8n+7){background:var(--paper-deep)}
.sign-card:hover{background:var(--ink);color:var(--text-on-ink)}
.sc-glyph{
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols","Symbola",serif;
  font-variant-emoji:text;font-size:1.9rem;line-height:1;color:var(--carmine);
}
.sign-card:hover .sc-glyph{color:var(--brass)}
.sc-name{font-family:"Bodoni Moda",Georgia,serif;font-size:1.4rem;margin-top:.4rem}
.sc-dates{font-size:.76rem;color:var(--text-mute)}
.sign-card:hover .sc-dates{color:var(--text-on-ink-mute)}
.sc-line{font-size:.88rem;margin-top:auto;line-height:1.4}

.cta-band{background:var(--ink);color:var(--text-on-ink);padding:3.6rem 0}
.cta-inner{display:grid;grid-template-columns:220px 1fr;gap:2.6rem;align-items:center}
.cta-inner img{width:100%;height:auto;filter:drop-shadow(0 20px 36px rgba(0,0,0,.6))}
.cta-inner h2{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(1.6rem,3.4vw,2.3rem);color:#F4F0E6}
.cta-inner p{color:var(--text-on-ink-mute);max-width:56ch;margin-top:.9rem}
.cta-price{font-family:"Bodoni Moda",Georgia,serif;font-size:1.9rem;color:var(--brass);margin:1.2rem 0 1.4rem}
.cta-price span{font-family:"Karla",sans-serif;font-size:.85rem;color:var(--text-on-ink-mute)}
.cta-inner .btn{margin-right:.6rem}

.related{padding:2.6rem 0 4rem}
.rel-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:1rem}
.rel-grid a{
  display:block;padding:1.2rem;text-decoration:none;
  border:1px solid var(--paper-deep);color:var(--text-dark);
  font-family:"Bodoni Moda",Georgia,serif;font-size:1.2rem;
  transition:border-color .2s ease,background-color .2s ease;
}
.rel-grid a:hover{border-color:var(--brass);background:#F1ECDF}
.rel-grid span{
  display:block;font-family:"Karla",sans-serif;font-size:.72rem;
  letter-spacing:.07em;color:var(--text-mute);margin-bottom:.35rem;
}
.rel-next{text-align:right}
.foot-mark{font-family:"Bodoni Moda",Georgia,serif;font-size:1.2rem;color:#E9E4D6}

@media (max-width:900px){
  .sign-grid{grid-template-columns:repeat(2,1fr)}
  .cta-inner{grid-template-columns:1fr;gap:1.8rem}
  .cta-inner img{width:min(190px,50%)}
  .rel-grid{grid-template-columns:1fr}
  .rel-next{text-align:left}
  .sign-hero-inner{gap:1.1rem}
}

/* ---------- what the book adds that the page does not ---------- */
.holdback{background:var(--ink);color:var(--text-on-ink);padding:3.4rem 0;border-top:1px solid rgba(199,155,63,.28)}
.holdback h2{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(1.5rem,3.2vw,2.2rem);
  color:#F4F0E6;max-width:24ch;line-height:1.08;
}
.holdback p{color:var(--text-on-ink-mute);max-width:64ch;margin-top:1.2rem}
.holdback-cta{margin-top:1.8rem}

@media (max-width:480px){
  /* the masthead stacks here: wordmark and subtitle on the first row,
     a full width order button on the second */
  .masthead .mast-links{flex:1 1 100%}
  .masthead .mast-links .btn{width:100%;text-align:center}
}

/* ---------- masthead: a real menu, never a vanishing one ---------- */
.mast-toggle{
  display:none;
  font-family:"Karla",sans-serif;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.02em;
  padding:.55rem .85rem;
  background:transparent;
  color:var(--text-on-ink);
  border:1px solid rgba(199,155,63,.5);
  border-radius:2px;
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.mast-toggle:hover{border-color:var(--brass);color:#fff}

@media (max-width:1100px){
  /* the full title needs the width, so the links move behind a button
     instead of disappearing */
  .mast-toggle{display:inline-block}
  .mast-links{
    flex:1 1 100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-top:.9rem;
    padding-top:.2rem;
    border-top:1px solid rgba(199,155,63,.22);
  }
  .mast-links.is-open{display:flex}
  .mast-link{
    display:block;
    font-size:1rem;
    opacity:1;
    padding:.85rem 0;
    border-bottom:1px solid rgba(199,155,63,.14);
  }
  .mast-links .btn{margin:1rem 0 .4rem;width:100%;text-align:center}
}
@media (max-width:420px){
  .mark{font-size:.98rem}
}

/* ---------- the opponent rank ---------- */
.opponents-hint{
  margin:.8rem 0 0;
  font-size:.8rem;
  color:var(--text-on-ink-mute);
}

/* ---------- method section: a proper two column head ---------- */
.method-head{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:4rem;
  align-items:start;
  margin-bottom:3.2rem;
}
.method-head h2{
  font-size:clamp(2rem,4.4vw,3rem);
  color:#F4F0E6;
  max-width:16ch;
}
.method-aside{padding-top:.4rem}
.method-aside blockquote{
  margin:0;
  padding-left:1.3rem;
  border-left:3px solid var(--brass);
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(1.25rem,2.3vw,1.6rem);
  line-height:1.28;
  color:#F4F0E6;
}
.method-attr{
  margin:.7rem 0 1.6rem 1.3rem;
  font-size:.78rem;
  letter-spacing:.05em;
  color:var(--brass);
}
.method-aside > p:last-child{
  color:var(--text-on-ink-mute);
  font-size:1rem;
  max-width:46ch;
  margin:0;
}

/* ---------- buy column: fill it with what the money buys ---------- */
.inside-panel{
  margin-top:2.4rem;
  border:1px solid var(--paper-deep);
  background:#F1ECDF;
  padding:1.6rem;
}
.inside-panel h3{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:1.35rem;
  margin-bottom:1.1rem;
}
.inside-list{margin:0}
.inside-list > div{
  display:grid;
  grid-template-columns:4.2rem 1fr;
  gap:1rem;
  align-items:baseline;
  padding:.75rem 0;
  border-top:1px solid var(--paper-deep);
}
.inside-list > div:first-child{border-top:0;padding-top:0}
.inside-list dt{
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:2rem;
  line-height:1;
  color:var(--carmine);
}
.inside-list dd{margin:0;font-size:.92rem;line-height:1.45;color:var(--text-mute)}

.buy-trust{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.9rem 1.4rem;
  margin-top:1.8rem;
  padding-top:1.4rem;
  border-top:1px solid var(--paper-deep);
}
.buy-trust div{font-size:.85rem;color:var(--text-dark);line-height:1.35}
.buy-trust span{
  display:block;
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--text-mute);
  margin-bottom:.15rem;
}

@media (max-width:900px){
  .method-head{grid-template-columns:1fr;gap:1.8rem;margin-bottom:2.4rem}
  .method-head h2{max-width:none}
  .opponents{grid-template-columns:repeat(6,1fr)}
  .buy-trust{grid-template-columns:1fr}
}