/* ————————————————————————————————————————————
   Stoop & Lintel — a brownstone brokerage, Brooklyn
   Palette: limestone, oxblood, sandstone, forest door, brass, leaf
   Type: Fraunces (display) · Alegreya Sans (text)
   ———————————————————————————————————————————— */

:root{
  --limestone:#F2E9D8;
  --limestone-2:#EADDC3;
  --limestone-3:#E0CFAE;
  --oxblood:#54261A;
  --oxblood-deep:#3E1B12;
  --sandstone:#B4784A;
  --sandstone-2:#96562F;
  --sandstone-3:#7C4526;
  --forest:#24402E;
  --forest-deep:#1A3022;
  --brass:#A8823C;
  --brass-bright:#C9A45B;
  --leaf:#C96F2E;
  --ink:#3B2216;
  --paper-shadow:0 1px 2px rgba(62,27,18,.08), 0 12px 40px -12px rgba(62,27,18,.28);
  --serif:"Fraunces", Georgia, serif;
  --sans:"Alegreya Sans", "Gill Sans", system-ui, sans-serif;
  --measure:34em;
  --gutter:clamp(1.25rem, 4vw, 4rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  background:var(--limestone);
  color:var(--oxblood);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:2px}
::selection{background:var(--brass-bright);color:var(--oxblood-deep)}

h1,h2,h3{font-family:var(--serif);font-weight:560;line-height:1.04;letter-spacing:-0.01em;text-wrap:balance}

.eyebrow{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sandstone-2);
}

/* ——— masthead ——— */
.masthead{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--limestone) 88%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--oxblood) 18%, transparent);
}
.mast-inner{
  max-width:82rem;margin:0 auto;
  padding:.8rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{
  font-family:var(--serif);
  font-size:1.45rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;display:flex;align-items:baseline;gap:.4rem;white-space:nowrap;
}
.brand .amp{color:var(--leaf);font-style:italic;font-weight:400;font-size:1.2em;transform:translateY(.06em)}
.brand-sub{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--sandstone-2);margin-left:.55rem}
.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.8rem)}
.nav a{
  text-decoration:none;font-weight:500;font-size:.95rem;color:var(--oxblood);
  border-bottom:2px solid transparent;padding-bottom:2px;
  transition:border-color .18s ease;
}
.nav a:hover{border-bottom-color:var(--brass)}
.nav .knock-link{
  background:var(--forest);color:var(--limestone);
  padding:.5rem 1.05rem;border-radius:999px;border-bottom:none;
  font-weight:700;letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px rgba(242,233,216,.25);
  transition:background .18s ease, transform .18s ease;
}
.nav .knock-link:hover{background:var(--forest-deep);transform:translateY(-1px)}
@media (max-width:760px){
  .nav a:not(.knock-link){display:none}
  .brand-sub{display:none}
}

/* ——— hero ——— */
.hero{position:relative}
.hero-media{
  position:relative;height:min(78vh, 46rem);min-height:26rem;overflow:hidden;
}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(62,27,18,.18) 0%, rgba(62,27,18,0) 32%, rgba(62,27,18,.42) 100%);
}
.hero-issue{
  position:absolute;top:1.1rem;left:0;right:0;z-index:2;
  display:flex;justify-content:center;
}
.hero-issue span{
  font-size:.75rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--limestone);
  background:color-mix(in srgb, var(--oxblood-deep) 55%, transparent);
  padding:.45rem 1.1rem;border-radius:999px;
  border:1px solid rgba(242,233,216,.35);
  backdrop-filter:blur(4px);
  text-align:center;
}
@media (max-width:480px){
  .hero-issue span{font-size:.62rem;letter-spacing:.18em;padding:.4rem .9rem}
}
.hero-panel{
  position:relative;z-index:3;
  max-width:82rem;margin:0 auto;
  padding:0 var(--gutter);
}
.hero-card{
  background:var(--limestone);
  margin-top:clamp(-11rem, -16vw, -6.5rem);
  padding:clamp(1.6rem,3.5vw,3.2rem) clamp(1.4rem,4vw,3.6rem) clamp(1.8rem,3vw,2.6rem);
  max-width:56rem;
  box-shadow:var(--paper-shadow);
  border-top:5px solid var(--forest);
  position:relative;
}
.hero-card .eyebrow{display:block;margin-bottom:1rem}
.hero-card h1{
  font-size:clamp(2.4rem, 5.6vw, 4.4rem);
  font-weight:520;
}
.hero-card h1 em{
  font-style:italic;font-weight:420;color:var(--sandstone-2);
}
.hero-card p{max-width:var(--measure);margin-top:1.3rem;font-size:1.1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-weight:700;font-size:1rem;text-decoration:none;
  padding:.85rem 1.6rem;border-radius:999px;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-forest{background:var(--forest);color:var(--limestone);box-shadow:inset 0 0 0 1px rgba(242,233,216,.22)}
.btn-forest:hover{background:var(--forest-deep);transform:translateY(-2px)}
.btn-ghost{color:var(--oxblood);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--oxblood) 35%, transparent)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--brass);transform:translateY(-2px)}
.btn svg{flex:none}
.hero-caption{
  max-width:82rem;margin:0 auto;padding:1rem var(--gutter) 0;
  display:flex;justify-content:flex-end;
}

/* ——— captions & folios ——— */
.caption{
  font-size:.85rem;line-height:1.5;color:var(--sandstone-2);
  max-width:24em;
}
.caption b{color:var(--oxblood);font-weight:700}
.folio{
  display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;
}
.folio::after{content:"";flex:1;height:1px;background:color-mix(in srgb, var(--brass) 55%, transparent)}
.folio .eyebrow{color:var(--oxblood)}
.folio .num{
  font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--brass);
}

/* ——— manifesto ——— */
.manifesto{
  max-width:82rem;margin:0 auto;
  padding:clamp(3.5rem,7vw,6.5rem) var(--gutter) clamp(3rem,6vw,5rem);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.manifesto-lede{
  font-family:var(--serif);
  font-size:clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight:420;line-height:1.38;letter-spacing:0;
  max-width:26em;
}
.manifesto-lede::first-letter{
  font-size:3.1em;font-weight:600;float:left;line-height:.82;
  padding:.06em .12em 0 0;color:var(--sandstone-2);
}
.manifesto-aside{border-left:3px solid var(--brass);padding-left:1.4rem;margin-top:.5rem}
.manifesto-aside p{font-size:.98rem;max-width:26em}
.manifesto-aside .eyebrow{display:block;margin-bottom:.7rem}
.manifesto-facts{list-style:none;margin-top:1.2rem;display:grid;gap:.55rem}
.manifesto-facts li{display:flex;gap:.7rem;font-size:.95rem;align-items:baseline}
.manifesto-facts li::before{content:"—";color:var(--leaf);font-weight:700}
@media (max-width:860px){
  .manifesto{grid-template-columns:1fr}
}

/* ——— the walk (signature) ——— */
.walk{
  position:relative;
  background:linear-gradient(180deg, #F5E7CB 0%, #EFDDBB 46%, var(--limestone-2) 100%);
  border-top:1px solid color-mix(in srgb, var(--oxblood) 14%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--oxblood) 14%, transparent);
  overflow:hidden;
}
.walk-head{
  position:absolute;top:0;left:0;right:0;z-index:10;
  max-width:82rem;margin:0 auto;
  padding:clamp(1.6rem,3.5vw,3rem) var(--gutter) 0;
  pointer-events:none;
}
.walk-head h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.walk-head .eyebrow{display:block;margin-bottom:.7rem}
.walk-hint{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:.8rem;
  font-size:.9rem;font-weight:600;color:var(--sandstone-2);
}
.walk-hint svg{animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@media (prefers-reduced-motion: reduce){ .walk-hint svg{animation:none} }

.street-viewport{
  position:relative;height:100vh;height:100svh;min-height:34rem;max-height:56rem;
  overflow:hidden;
}
.leaves{position:absolute;inset:0;z-index:9;pointer-events:none}
.leaf{position:absolute;top:0;width:16px;height:auto;opacity:0}
@media (prefers-reduced-motion: no-preference){
  .leaf{animation:fall 12s linear infinite}
  @keyframes fall{
    0%{opacity:0;transform:translate3d(0,-4vh,0) rotate(0deg)}
    6%{opacity:.9}
    25%{transform:translate3d(-32px,22vh,0) rotate(85deg)}
    50%{transform:translate3d(22px,48vh,0) rotate(170deg)}
    75%{transform:translate3d(-38px,72vh,0) rotate(250deg)}
    96%{opacity:.9}
    100%{opacity:0;transform:translate3d(12px,96vh,0) rotate(330deg)}
  }
}
.street-layer{position:absolute;bottom:0;left:0;display:flex;align-items:flex-end;will-change:transform}
.street-bg{bottom:17%;opacity:.5;filter:saturate(.7)}
.street-bg svg{display:block}
.street-mid{
  padding:0 6vw;gap:clamp(1.2rem,2.5vw,2.6rem);
  bottom:0;
  align-items:flex-end;
}
.street-fg{bottom:-6px;pointer-events:none}
.street-ground{
  position:absolute;left:0;right:0;bottom:0;height:15.5%;
  background:
    linear-gradient(180deg, #C7A379 0 18%, #BE9868 18% 22%, #B18A5C 22% 100%);
}
.street-ground::after{
  content:"";position:absolute;left:0;right:0;top:18%;height:1px;
  background:rgba(62,27,18,.18);
}

.lot{display:flex;flex-direction:column;align-items:center;flex:none;position:relative;padding-bottom:clamp(96px, 13.5vh, 128px)}
.lot .house{width:clamp(225px, 22vw, 305px);height:auto}
.lot:nth-child(odd) .house{width:clamp(235px, 23vw, 320px)}
.plaque{
  margin-top:.9rem;
  background:var(--limestone);
  border:1px solid color-mix(in srgb, var(--oxblood) 25%, transparent);
  border-top:4px solid var(--brass);
  box-shadow:0 6px 18px -8px rgba(62,27,18,.35);
  padding:.8rem 1rem .75rem;
  width:min(240px, 90%);
  transition:transform .25s ease, box-shadow .25s ease;
}
.lot:hover .plaque{transform:translateY(-4px);box-shadow:0 14px 26px -10px rgba(62,27,18,.4)}
.plaque .addr{font-family:var(--serif);font-weight:640;font-size:1.06rem;line-height:1.15}
.plaque .hood{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--forest);margin-top:.25rem}
.plaque .specs{display:flex;gap:.6rem;font-size:.82rem;color:var(--sandstone-2);margin-top:.45rem;flex-wrap:wrap}
.plaque .specs b{color:var(--oxblood)}
.plaque .note{font-size:.82rem;font-style:italic;font-family:var(--serif);margin-top:.4rem;color:var(--sandstone-3)}

.photo-lot{flex:none;position:relative;display:flex;flex-direction:column;align-items:center;padding-bottom:clamp(120px, 16vh, 152px)}
.photo-lot figure{
  width:clamp(230px, 23vw, 320px);
  background:var(--limestone);
  padding:.7rem .7rem .9rem;
  box-shadow:var(--paper-shadow);
  transform:rotate(-1.2deg);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.photo-lot:hover figure{transform:rotate(0deg) translateY(-4px)}
.photo-lot:last-of-type figure{transform:rotate(1deg)}
.photo-lot img{aspect-ratio:3/4;object-fit:cover}
.photo-lot figcaption{font-size:.8rem;margin-top:.6rem;color:var(--sandstone-2);font-style:italic;font-family:var(--serif)}

/* lit windows on hover */
.house .win{transition:fill .35s ease}
.lot:hover .house .win{fill:#F4C874}

/* street progress */
.walk-progress{
  position:absolute;left:0;right:0;bottom:1.1rem;z-index:11;
  display:flex;justify-content:center;pointer-events:none;
}
.walk-progress-inner{
  display:flex;align-items:center;gap:.8rem;
  background:color-mix(in srgb, var(--oxblood-deep) 82%, transparent);
  color:var(--limestone);
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem 1rem;border-radius:999px;
}
.walk-progress-bar{width:110px;height:4px;background:rgba(242,233,216,.25);border-radius:2px;overflow:hidden}
.walk-progress-bar i{display:block;height:100%;width:0;background:var(--brass-bright)}

/* static fallback (reduced motion / no JS) */
.walk.static .street-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-color:var(--brass) transparent;display:flex;align-items:flex-end}
.walk.static .street-bg,.walk.static .street-fg{display:none}
.walk.static .street-mid{position:relative;bottom:auto}
.walk.static .walk-progress{display:none}

/* ——— spreads ——— */
.spread{
  max-width:82rem;margin:0 auto;
  padding:clamp(3.5rem,7vw,6.5rem) var(--gutter);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.spread--flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.spread--flip .spread-media{order:-1}
.spread-media{position:relative}
.spread-media img{width:100%;box-shadow:var(--paper-shadow)}
.spread-media .caption{margin-top:.9rem}
.spread-text h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:1.1rem}
.spread-text p{max-width:var(--measure)}
.spread-text p + p{margin-top:1rem}
.pull{
  font-family:var(--serif);font-style:italic;font-weight:480;
  font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.35;
  color:var(--sandstone-2);
  border-left:3px solid var(--leaf);
  padding-left:1.2rem;margin-top:1.6rem;max-width:24em;
}
@media (max-width:860px){
  .spread,.spread--flip{grid-template-columns:1fr}
  .spread--flip .spread-media{order:0}
}

/* ——— ledger ——— */
.ledger{
  background:var(--oxblood-deep);color:var(--limestone);
  padding:clamp(3.5rem,7vw,6rem) 0;
}
.ledger-inner{max-width:82rem;margin:0 auto;padding:0 var(--gutter)}
.ledger .folio::after{background:color-mix(in srgb, var(--brass-bright) 60%, transparent)}
.ledger .folio .eyebrow{color:var(--brass-bright)}
.ledger h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:.6rem;color:var(--limestone)}
.ledger-note{color:color-mix(in srgb, var(--limestone) 72%, transparent);max-width:38em;margin-bottom:2.2rem}
.ledger-table{width:100%;border-collapse:collapse}
.ledger-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ledger-table th{
  text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-bright);padding:.6rem .9rem .6rem 0;
  border-bottom:1px solid color-mix(in srgb, var(--limestone) 30%, transparent);
}
.ledger-table td{
  padding:1.05rem .9rem 1.05rem 0;vertical-align:top;
  border-bottom:1px solid color-mix(in srgb, var(--limestone) 16%, transparent);
}
.ledger-table .hood-name{font-family:var(--serif);font-size:1.25rem;font-weight:560;white-space:nowrap}
.ledger-table .num-col{font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger-table .know{font-style:italic;font-family:var(--serif);color:color-mix(in srgb, var(--limestone) 80%, transparent)}
.ledger-scroll{overflow-x:auto}
@media (max-width:700px){
  .ledger-table{min-width:40rem}
}

/* ——— process ——— */
.process{max-width:82rem;margin:0 auto;padding:clamp(3.5rem,7vw,6.5rem) var(--gutter)}
.process h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-bottom:.7rem}
.process-note{max-width:38em;color:var(--sandstone-2);margin-bottom:2.4rem}
.process ol{
  list-style:none;counter-reset:step;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.5vw,2rem);
}
.process li{
  counter-increment:step;
  border-top:2px solid var(--oxblood);
  padding-top:1.1rem;position:relative;
}
.process li::before{
  content:counter(step, decimal-leading-zero);
  font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--brass);
  position:absolute;top:-.75rem;right:0;background:var(--limestone);padding-left:.6rem;
}
.process h3{font-size:1.35rem;margin-bottom:.5rem}
.process .when{font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--forest);display:block;margin-bottom:.55rem}
.process p{font-size:.95rem}
@media (max-width:960px){ .process ol{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .process ol{grid-template-columns:1fr} }

/* ——— knock (cta) ——— */
.knock{
  background:var(--forest-deep);
  color:var(--limestone);
  position:relative;overflow:hidden;
}
.knock-inner{
  max-width:82rem;margin:0 auto;
  padding:clamp(4rem,8vw,7rem) var(--gutter);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.knock .eyebrow{color:var(--brass-bright);display:block;margin-bottom:1rem}
.knock h2{font-size:clamp(2.2rem,4.5vw,3.6rem);color:var(--limestone)}
.knock p{max-width:32em;margin-top:1.2rem;color:color-mix(in srgb, var(--limestone) 85%, transparent)}
.knock .btn-brass{
  background:var(--brass-bright);color:var(--oxblood-deep);margin-top:1.8rem;
}
.knock .btn-brass:hover{background:#DDBA71;transform:translateY(-2px)}
.knock-door{display:flex;justify-content:center}
.knock-door svg{width:min(230px,60vw);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.knock-small{margin-top:1.4rem;font-size:.85rem;color:color-mix(in srgb, var(--limestone) 60%, transparent)}
@media (max-width:860px){
  .knock-inner{grid-template-columns:1fr}
  .knock-door{order:-1}
  .knock-door svg{width:min(170px,45vw)}
}

/* ——— footer ——— */
.footer{
  background:var(--oxblood-deep);color:color-mix(in srgb, var(--limestone) 80%, transparent);
  border-top:4px solid var(--brass);
}
.footer-inner{
  max-width:82rem;margin:0 auto;padding:clamp(2.5rem,5vw,4rem) var(--gutter);
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;
}
.footer .brand{color:var(--limestone);font-size:1.6rem}
.footer p{font-size:.92rem;max-width:26em;margin-top:.8rem}
.footer h3{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-bright);margin-bottom:.9rem}
.footer ul{list-style:none;display:grid;gap:.5rem;font-size:.95rem}
.footer a{text-decoration:none;border-bottom:1px solid color-mix(in srgb, var(--limestone) 25%, transparent);padding-bottom:1px}
.footer a:hover{border-bottom-color:var(--brass-bright);color:var(--limestone)}
.footer-colophon{
  max-width:82rem;margin:0 auto;padding:0 var(--gutter) 2rem;
  font-size:.8rem;color:color-mix(in srgb, var(--limestone) 50%, transparent);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
@media (max-width:760px){
  .footer-inner{grid-template-columns:1fr;gap:1.8rem}
}

/* ——— page-load sequence ——— */
@media (prefers-reduced-motion: no-preference){
  .rise{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  .rise-1{animation-delay:.12s}.rise-2{animation-delay:.26s}.rise-3{animation-delay:.4s}.rise-4{animation-delay:.55s}
  @keyframes rise{to{opacity:1;transform:none}}
  .hero-media img{animation:settle 2.4s cubic-bezier(.2,.6,.2,1) forwards;transform:scale(1.05)}
  @keyframes settle{to{transform:scale(1)}}
}

/* ——— guide page ——— */
.guide-main{max-width:52rem;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) var(--gutter) 4rem}
.guide-main > * + *{margin-top:1.15rem}
.guide-main h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:.4rem}
.guide-main h2{font-size:clamp(1.5rem,3vw,2rem);margin-top:3rem;padding-top:1.4rem;border-top:2px solid var(--oxblood)}
.guide-main h3{font-size:1.15rem;margin-top:1.6rem}
.guide-main p,.guide-main li{max-width:38em}
.guide-main ol,.guide-main ul{padding-left:1.3rem;display:grid;gap:.55rem}
.guide-back{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;font-size:.95rem;color:var(--sandstone-2)}
.guide-back:hover{color:var(--oxblood)}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.9rem;margin-top:1.4rem}
.swatch{border:1px solid color-mix(in srgb, var(--oxblood) 20%, transparent);background:var(--limestone)}
.swatch i{display:block;height:74px}
.swatch figcaption{padding:.55rem .7rem;font-size:.8rem;line-height:1.35}
.swatch figcaption b{display:block;font-size:.85rem}
.swatch code{font-size:.75rem;color:var(--sandstone-2)}
.guide-main pre{
  background:var(--oxblood-deep);color:#F0DDB8;
  padding:1.1rem 1.3rem;overflow-x:auto;font-size:.82rem;line-height:1.55;
  border-left:4px solid var(--brass);
  max-width:100%;
}
.guide-main code{font-family:ui-monospace,"SF Mono",Menlo,monospace}
.guide-main p code, .guide-main li code{background:var(--limestone-2);padding:.08em .35em;font-size:.85em}
.type-specimen{display:grid;gap:.4rem;margin-top:1rem;border-left:3px solid var(--brass);padding-left:1.2rem}
.type-specimen .spec-serif{font-family:var(--serif);font-size:1.7rem;font-weight:560}
.type-specimen .spec-sans{font-size:1rem}
.pass-list{list-style:none;padding-left:0 !important}
.pass-list li{border-top:1px solid color-mix(in srgb, var(--oxblood) 22%, transparent);padding-top:.8rem}
.pass-list b{font-family:var(--serif);font-size:1.05rem}