/* Quill & Compass — search-intent landing pages.
   Built on the SHARED tokens in tokens.css (cut paper / woodcut / parchment):
   parchment grounds, iron-gall ink figures, rubric red, gold. tokens.css must be
   the FIRST stylesheet each of these four pages loads — without it every var()
   below is undefined, the whole declaration is dropped, and the page renders as a
   white sheet of Times New Roman. (That is exactly what happened once.)
   Framing/ornament comes from decor.css; section rhythm from sections.css.
   No new design tokens. Depth is flat shapes + hard offset shadows only —
   no glows, no blurred text-shadows, no drop-shadow halos.
   Mobile-first; reduced-motion respected. */

/* ============================================================
   Landing hero — the same sheet of paper the rest of the site
   stands on (no three.js on these pages; the d20 is a
   line-drawing, not a physics engine)
   ============================================================ */
.lp-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(7.5rem,18vh,11rem) 0 clamp(3rem,8vh,5rem);
  /* identical recipe to styles.css body: paper colour, grain, plate grid, press
     vignette. Deliberately the same values, not an approximation — a landing page
     sitting on a subtly different parchment reads as a printing error. */
  background-color:var(--paper-300);
  background-image:
    url('./assets/parchment-grain.svg'),
    url('./assets/parchment-grid.svg'),
    radial-gradient(120% 80% at 50% -10%, rgba(216,184,120,0) 40%, rgba(74,51,32,.10) 100%);
  background-size:220px 220px, 128px 128px, cover;
  background-repeat:repeat,repeat,no-repeat;
  background-blend-mode:soft-light,multiply,normal;
}
.lp-hero-inner{
  position:relative;z-index:2;
  width:min(64rem,92vw);
  margin-inline:auto;
}
.lp-eyebrow{
  font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.42em;
  font-size:.72rem;color:var(--rubric-deep);margin:0 0 .85rem;
}
.lp-h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.2rem,5.6vw,4rem);line-height:1.02;
  margin:0 0 1rem;color:var(--ink-900);max-width:18ch;
}
.lp-h1 em{font-style:normal;color:var(--rubric)}
.lp-lede{
  font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.55;color:var(--ink-soft);
  margin:0 0 1.5rem;max-width:36rem;
}
.lp-cta-row{display:flex;align-items:center;gap:1.15rem;flex-wrap:wrap;margin:0 0 1.3rem}
a.btn-gold{display:inline-block;text-decoration:none;text-align:center}
.lp-cta-alt{color:var(--ink-soft);font-size:.92rem;text-decoration:none;border-bottom:1px solid rgba(74,51,32,.3);padding-bottom:.1rem;transition:.2s}
.lp-cta-alt:hover{color:var(--rubric-deep);border-color:var(--rubric-deep)}
.lp-cta-alt:focus-visible{outline:2px solid var(--rubric-deep);outline-offset:3px}
.lp-hook{
  margin:0;max-width:34rem;
  border-left:2px solid rgba(74,51,32,.45);
  padding-left:.95rem;
  color:var(--ink-soft);font-size:.95rem;line-height:1.55;
}
.lp-hook strong{color:var(--ink-900);font-weight:600}

/* the resting die — line-art kin of the hero d20, dozing on the right */
.lp-die{
  position:absolute;z-index:1;pointer-events:none;
  right:clamp(-3rem,4vw,7rem);top:50%;
  width:clamp(15rem,32vw,24rem);
  transform:translateY(-50%) rotate(8deg);
  color:var(--gold);opacity:.34;
  animation:lpDieDrift 11s ease-in-out infinite alternate;
}
.lp-die svg{display:block;width:100%;height:auto}
.lp-die .d20-num{font-family:var(--font-display);fill:var(--gold);opacity:.85}
@keyframes lpDieDrift{
  from{transform:translateY(-52%) rotate(7deg)}
  to{transform:translateY(-48%) rotate(9.5deg)}
}
@media (max-width:900px){
  .lp-die{right:-34%;opacity:.13}
}

/* ============================================================
   Stance strip — the one promise every page repeats
   ============================================================ */
.lp-stance{
  position:relative;
  width:min(46rem,92vw);
  margin-inline:auto;
  padding-block:clamp(2rem,6vh,3.4rem);
  text-align:center;
}
.lp-stance-card{padding:clamp(1.7rem,4.5vw,2.8rem) clamp(1.2rem,4vw,2.6rem)}
.lp-stance-line{
  font-family:var(--font-body);font-weight:700;
  font-size:clamp(1.15rem,2.7vw,1.6rem);line-height:1.32;
  color:var(--ink-900);margin:0 0 .95rem;
}
.lp-stance-note{
  color:var(--ink-soft);font-size:.97rem;line-height:1.65;
  margin:0 auto;max-width:52ch;
}

/* ============================================================
   Comparison table (Foundry page) — parchment ledger manners
   ============================================================ */
.lp-compare-wrap{overflow-x:auto;margin:0 0 1.2rem;-webkit-overflow-scrolling:touch}
.lp-compare{width:100%;border-collapse:collapse;min-width:37rem;font-size:.95rem}
.lp-compare caption{
  caption-side:top;text-align:left;
  color:var(--ink-soft);font-size:.82rem;padding:0 0 .6rem;
}
.lp-compare th{
  font-family:var(--font-body);text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;font-weight:700;color:var(--ink-700);text-align:left;
  padding:.7rem .9rem;border-bottom:1px solid rgba(74,51,32,.35);
}
.lp-compare td{
  padding:.9rem .9rem;border-bottom:1px solid rgba(74,51,32,.12);
  color:var(--ink-soft);vertical-align:top;line-height:1.5;
}
.lp-compare td:first-child{
  font-family:var(--font-body);font-weight:700;font-size:.84rem;letter-spacing:.05em;
  color:var(--ink-900);font-weight:600;white-space:nowrap;padding-right:1.2rem;
}
.lp-compare td.qc{color:var(--ink-900);background:rgba(74,51,32,.05)}
.lp-compare tr:last-child td{border-bottom:0}

/* ============================================================
   Numbered steps (migration page) — gilded roman numerals
   ============================================================ */
.lp-steps{list-style:none;counter-reset:lpstep;margin:0 0 1rem;padding:0;display:grid;gap:clamp(1rem,2.5vw,1.5rem)}
.lp-steps li{
  counter-increment:lpstep;
  display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;align-items:start;
}
.lp-steps li::before{
  content:counter(lpstep,upper-roman);
  font-family:var(--font-rubric);font-weight:700;
  color:var(--rubric-deep);font-size:1.45rem;line-height:1.15;
  text-align:right;padding-top:.1rem;
}
.lp-steps h3{
  /* was --font-display at 1.06rem (16.96px) — under the face's 1.6rem floor */
  font-family:var(--font-body);font-weight:700;font-size:1.06rem;
  color:var(--ink-900);margin:0 0 .35rem;letter-spacing:.02em;
}
.lp-steps p{margin:0;color:var(--ink-soft);line-height:1.6;font-size:.97rem}

/* screen-reader-only utility (kin of workshop.css .qcw-vis-hidden) */
.qc-vis-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .lp-die{animation:none}
}