/* ============================================================
   Borenstein Caterers — Concept A: The 1946 Line
   midnight navy / archival cream / polished brass / one fresh green
   ============================================================ */
:root{
  --navy:#0B1B2E;
  --navy-deep:#071120;
  --navy-line:#1C3049;
  --cream:#F2E9D5;
  --cream-dim:rgba(242,233,213,.62);
  --cream-faint:rgba(242,233,213,.28);
  --brass:#C29B57;
  --brass-bright:#E0BC77;
  --green:#3FC172;
  --green-deep:#1E7A46;
  --ink:#16222F;
  --ink-soft:rgba(22,34,47,.68);
  --serif:"Frank Ruhl Libre",Georgia,serif;
  --grot:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--navy);
  color:var(--cream);
  font-family:var(--grot);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

::selection{background:var(--brass);color:var(--navy-deep)}

h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.08}

.eyebrow{
  font-family:var(--grot);font-size:12px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--brass);
}

/* ---------- top bar ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  transition:background .35s ease,box-shadow .35s ease;
}
.topbar.scrolled{background:rgba(7,17,32,.9);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(194,155,87,.25)}
.topbar-in{
  max-width:1180px;margin:0 auto;padding:16px clamp(20px,4vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;white-space:nowrap}
.brand b{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.02em;color:var(--cream)}
.brand span{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
@media(max-width:680px){
  .brand b{font-size:16px}
  .brand span{display:none}
  .topbar-in{padding-top:12px;padding-bottom:12px}
}
.topbar-right{display:flex;align-items:center;gap:22px}
.topbar-tel{font-size:14px;letter-spacing:.04em;color:var(--cream-dim);text-decoration:none}
.topbar-tel:hover{color:var(--cream)}
.btn{
  display:inline-block;font-family:var(--grot);font-weight:500;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:13px 26px;border:1px solid var(--brass);color:var(--navy-deep);
  background:var(--brass);transition:background .25s,color .25s,border-color .25s;
}
.btn:hover{background:var(--brass-bright);border-color:var(--brass-bright)}
.btn.ghost{background:transparent;color:var(--brass)}
.btn.ghost:hover{background:rgba(194,155,87,.12);color:var(--brass-bright)}
.btn.small{padding:9px 18px;font-size:12.5px}
@media(max-width:680px){.topbar-tel{display:none}}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% -10%,#16304e 0%,rgba(11,27,46,0) 55%),
    linear-gradient(180deg,#0D2036 0%,var(--navy) 55%,var(--navy-deep) 100%);
}
.hero-in{position:relative;z-index:2;padding-top:120px;width:100%}
.hero h1{
  font-size:clamp(44px,7.4vw,104px);font-weight:900;color:var(--cream);
  max-width:11em;letter-spacing:-.01em;
}
.hero h1 em{font-style:italic;font-weight:700;color:var(--brass-bright)}
.hero-dek{
  max-width:36em;margin-top:22px;color:var(--cream-dim);
  font-size:clamp(15.5px,1.35vw,18px);
}
.hero-dek strong{color:var(--cream);font-weight:500}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 0}
.hero-reveal{opacity:0;transform:translateY(22px);animation:heroUp .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-reveal.d1{animation-delay:.12s}.hero-reveal.d2{animation-delay:.24s}.hero-reveal.d3{animation-delay:.36s}
@keyframes heroUp{to{opacity:1;transform:none}}

/* hero runway strip — pure CSS */
.hero-runway{
  position:relative;z-index:1;margin-top:clamp(40px,6vh,70px);height:132px;
  border-top:1.5px solid rgba(194,155,87,.45);
  border-bottom:1.5px solid rgba(194,155,87,.45);
  background:linear-gradient(180deg,rgba(242,233,213,.03),rgba(242,233,213,0));
}
.hr-center{
  position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;
  background:repeating-linear-gradient(90deg,rgba(242,233,213,.3) 0 34px,transparent 34px 60px);
  animation:taxi 2.4s linear infinite;
}
@keyframes taxi{to{background-position:-60px 0}}
.hr-num{
  position:absolute;left:clamp(20px,4vw,48px);top:50%;transform:translateY(-50%);
  font-family:var(--grot);font-weight:700;font-size:26px;color:var(--brass);
  letter-spacing:.14em;display:flex;gap:14px;align-items:center;
  background:var(--navy-deep);padding:6px 16px;
}
.hr-num i{font-style:normal;width:1px;height:26px;background:rgba(194,155,87,.5)}
.hr-label{
  position:absolute;right:clamp(20px,4vw,48px);bottom:10px;
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-faint);
}
@media(max-width:680px){.hero-runway{height:96px}.hr-num{font-size:19px;padding:4px 12px}.hr-num i{height:19px}.hr-label{display:none}}
@media (prefers-reduced-motion:reduce){
  .hr-center{animation:none}
  .hero-reveal{animation:none;opacity:1;transform:none}
}

/* ---------- section scaffolding ---------- */
section{position:relative}
.sec-head{margin-bottom:clamp(30px,4vw,52px)}
.sec-head h2{font-size:clamp(30px,4vw,52px);color:var(--cream);max-width:16em}
.sec-head .eyebrow{display:block;margin-bottom:14px}

.rev{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* ============================================================
   THE TIMELINE RUNWAY (signature)
   ============================================================ */
.tl-wrap{height:480vh;position:relative;background:var(--navy-deep)}
.tl-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
}
.tl-head{padding:calc(70px + 2vh) clamp(20px,4vw,48px) 0;max-width:1180px;margin:0 auto;width:100%}
.tl-kicker{display:flex;align-items:center;gap:14px}
.tl-kicker .eyebrow{white-space:nowrap}
@media(max-width:880px){
  .tl-kicker .eyebrow{white-space:normal;font-size:10.5px;letter-spacing:.2em}
  .tl-kicker-rule{display:none}
}
.tl-kicker-rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(194,155,87,.5),transparent)}

.tl-body{
  flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);
  gap:clamp(20px,4vw,60px);align-items:center;
  max-width:1180px;margin:0 auto;width:100%;
  padding:0 clamp(20px,4vw,48px);min-height:0;
}
.tl-text{position:relative;min-height:290px}
.tl-era{
  position:absolute;inset:0;opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;
}
.tl-era.on{opacity:1;transform:none;pointer-events:auto}

.tl-stamp{
  font-family:var(--grot);font-weight:700;
  font-size:clamp(15px,1.5vw,19px);letter-spacing:.22em;
  color:var(--brass);border:2px solid currentColor;border-radius:3px;
  display:inline-block;align-self:flex-start;padding:6px 16px 5px;margin-bottom:20px;
  transform:rotate(-2.5deg);position:relative;
  box-shadow:0 0 0 1px rgba(0,0,0,.15) inset;
}
.tl-era.on .tl-stamp{animation:stampIn .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stampIn{
  0%{opacity:0;transform:rotate(-2.5deg) scale(1.7)}
  62%{opacity:1;transform:rotate(-2.5deg) scale(.94)}
  100%{opacity:1;transform:rotate(-2.5deg) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .tl-era.on .tl-stamp{animation:none}
  .tl-era{transition:opacity .2s linear;transform:none}
  .tl-photo figure{transition:opacity .2s linear}
}
.tl-era h3{font-size:clamp(26px,3.1vw,44px);color:var(--cream);margin-bottom:16px;max-width:13em}
.tl-era p{color:var(--cream-dim);max-width:34em;font-size:clamp(14.5px,1.15vw,16.5px)}
.tl-era p + p{margin-top:12px}
.tl-era .tl-fact{
  margin-top:18px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);
}
.tl-stat{display:flex;align-items:baseline;gap:6px;margin-top:16px}
.tl-stat b{
  font-family:var(--grot);font-weight:700;font-size:clamp(30px,3vw,44px);
  letter-spacing:-.02em;color:var(--brass-bright);font-variant-numeric:tabular-nums;line-height:1;
}
.tl-stat span{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-dim)}
.tl-era.era-now .tl-stamp{color:var(--green)}
.tl-era.era-now .tl-fact{color:var(--green)}
.tl-era.era-now h3 em{font-style:normal;color:var(--green);border-bottom:3px solid var(--green)}
.tl-quote{font-family:var(--serif);font-style:italic;color:var(--cream);font-size:clamp(15px,1.25vw,18px)}

/* photo card */
.tl-photo{position:relative;aspect-ratio:4/3;min-height:0;align-self:center;max-height:52svh;width:100%}
.tl-photo figure{
  position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s ease;
  border:1px solid rgba(194,155,87,.35);background:var(--navy-deep);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.tl-photo figure.on{opacity:1}
.tl-photo img{width:100%;height:100%;object-fit:cover}
.tl-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:10px 16px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);
  background:linear-gradient(180deg,transparent,rgba(7,17,32,.92));
}
.ph-1946 img{filter:grayscale(1) contrast(1.06)}
.ph-1970 img{filter:sepia(.55) saturate(.65) contrast(1.02)}
.ph-scale img{filter:saturate(.72)}
.ph-now img{filter:none}
.tl-photo figure.ph-now{border-color:rgba(63,193,114,.6)}

/* runway strip */
.tl-runway{position:relative;height:190px;flex-shrink:0;user-select:none}
.tl-runway svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.rw-edge{stroke:rgba(194,155,87,.35);stroke-width:1.5}
.rw-center{stroke:rgba(242,233,213,.22);stroke-width:3;stroke-dasharray:30 24}
.rw-passed{stroke:var(--brass);stroke-width:3;stroke-dasharray:30 24;transition:stroke .4s}
.rw-passed.now{stroke:var(--green)}
.rw-gate{stroke:rgba(242,233,213,.3);stroke-width:1.5}
.rw-years{position:absolute;inset:0;pointer-events:none}
.rw-year{
  position:absolute;top:12px;transform:translateX(-50%);
  font-family:var(--grot);font-weight:500;font-size:13px;letter-spacing:.22em;
  color:var(--cream-faint);transition:color .4s;white-space:nowrap;
}
.rw-year.hit{color:var(--brass)}
.rw-year.hit.now{color:var(--green)}
.rw-tag{
  position:absolute;left:0;bottom:8px;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-faint);
  padding-left:clamp(20px,4vw,48px);
}
@media(max-width:880px){.rw-year{font-size:11px;letter-spacing:.16em}.rw-tag{display:none}}
.rw-plane{fill:var(--cream);filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.rw-plane.now{fill:#EAF7EE}
.rw-glow{fill:rgba(224,188,119,.28);filter:blur(6px)}
.rw-label{font-family:var(--grot);font-size:10.5px;letter-spacing:.3em;fill:var(--cream-faint)}

/* progress hint */
.tl-hint{
  position:absolute;right:clamp(20px,4vw,48px);top:calc(70px + 2vh);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--cream-faint);
}

@media(max-width:880px){
  .tl-body{grid-template-columns:1fr;gap:14px;align-content:start;padding-top:12px}
  .tl-text{min-height:0;height:auto;order:2}
  .tl-era{position:absolute;inset:0}
  .tl-text{min-height:238px}
  .tl-era h3{font-size:22px;margin-bottom:10px}
  .tl-era p{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .tl-stat{margin-top:10px}
  .tl-stat b{font-size:26px}
  .tl-era .tl-fact{margin-top:10px;font-size:11px}
  .tl-era p + p{display:none}
  .tl-stamp{margin-bottom:12px;font-size:13px;padding:4px 12px}
  .tl-photo{order:1;max-height:30svh;aspect-ratio:16/9;width:100%}
  .tl-runway{height:120px}
  .tl-hint{display:none}
  .tl-head{padding-top:calc(64px + 1vh)}
}

/* no-JS fallback: unstick and show everything */
.no-js .tl-wrap{height:auto}
.no-js .tl-stage{position:static;height:auto}
.no-js .tl-era{position:static;opacity:1;transform:none;margin:40px 0}
.no-js .tl-text{min-height:0}
.no-js .tl-photo figure{position:static;opacity:1;margin-bottom:20px}
.no-js .tl-runway{display:none}

/* ============================================================
   cream stats band
   ============================================================ */
.stats{background:var(--cream);color:var(--ink);padding:clamp(70px,9vw,120px) 0}
.stats .eyebrow{color:#8A6A30}
.stats h2{color:var(--ink);font-size:clamp(28px,3.6vw,46px);max-width:18em}
.stat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:clamp(36px,5vw,64px);border-top:1px solid rgba(22,34,47,.25);
}
.stat{padding:30px clamp(14px,2vw,28px) 6px;border-left:1px solid rgba(22,34,47,.18)}
.stat:first-child{border-left:none;padding-left:0}
.stat b{
  display:block;font-family:var(--grot);font-weight:700;
  font-size:clamp(34px,4.4vw,62px);letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1;
}
.stat b sup{font-size:.45em;color:var(--brass);top:-.7em;position:relative}
.stat span{display:block;margin-top:12px;font-size:13.5px;letter-spacing:.05em;color:var(--ink-soft);max-width:16em}
@media(max-width:880px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .stat{border-left:none;padding-left:0;border-top:1px solid rgba(22,34,47,.14)}
  .stat:nth-child(-n+2){border-top:none}
  .stat:nth-child(even){padding-left:22px;border-left:1px solid rgba(22,34,47,.18)}
}

/* ============================================================
   fresh payoff
   ============================================================ */
.fresh{background:var(--cream);color:var(--ink);padding:0 0 clamp(80px,10vw,130px)}
.fresh-grid{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.fresh-photo{position:relative}
.fresh-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid rgba(30,122,70,.35)}
.fresh-photo::after{
  content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--green);
  z-index:-1;
}
.fresh-badge{
  position:absolute;top:18px;left:18px;background:var(--green);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  padding:8px 14px;
}
.fresh .eyebrow{color:var(--green-deep)}
.fresh h2{color:var(--ink);font-size:clamp(30px,3.8vw,50px);margin:14px 0 20px}
.fresh h2 em{font-style:italic;color:var(--green-deep)}
.fresh-quote{
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,21px);
  line-height:1.5;color:var(--ink);border-left:3px solid var(--green);
  padding-left:22px;margin:26px 0;
}
.fresh-quote small{display:block;font-family:var(--grot);font-style:normal;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px}
.fresh p{color:var(--ink-soft);max-width:34em}
.fresh-points{list-style:none;margin:26px 0 0;display:grid;gap:14px}
.fresh-points li{display:flex;gap:14px;align-items:flex-start;color:var(--ink);font-size:15.5px}
.fresh-points li b{font-weight:600}
.fresh-points .tick{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;margin-top:1px;
  background:var(--green);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;
}
.cert-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.cert{
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(22,34,47,.35);padding:8px 14px;color:var(--ink);
}
@media(max-width:880px){
  .fresh-grid{grid-template-columns:1fr}
  .fresh-photo{max-width:420px}
}

/* ============================================================
   who we serve
   ============================================================ */
.serve{background:var(--navy);padding:clamp(80px,10vw,130px) 0}
.serve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--navy-line);border:1px solid var(--navy-line)}
.serve-cell{background:var(--navy);padding:clamp(24px,2.6vw,36px);transition:background .3s}
.serve-cell:hover{background:#0F2439}
.serve-cell svg{width:34px;height:34px;stroke:var(--brass);fill:none;stroke-width:1.5;margin-bottom:18px}
.serve-cell h3{font-size:20px;color:var(--cream);margin-bottom:10px}
.serve-cell p{font-size:14.5px;color:var(--cream-dim)}
.serve-note{margin-top:26px;font-size:13.5px;color:var(--cream-faint);max-width:44em}
@media(max-width:880px){.serve-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.serve-grid{grid-template-columns:1fr}}

/* wide kitchen photo band */
.kitchen-band{position:relative;height:clamp(300px,48vw,520px);overflow:hidden}
.kitchen-band img{width:100%;height:100%;object-fit:cover}
.kitchen-band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,17,32,.55),rgba(7,17,32,0) 40%,rgba(7,17,32,.65) 100%);
}
.kitchen-cap{
  position:absolute;left:0;right:0;bottom:26px;z-index:2;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);
}

/* ============================================================
   RFP
   ============================================================ */
.rfp{background:var(--navy-deep);padding:clamp(90px,11vw,150px) 0}
.rfp-card{
  border:1px solid rgba(194,155,87,.45);padding:clamp(34px,5vw,70px);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);
  background:
    radial-gradient(90% 120% at 0% 0%,rgba(194,155,87,.08),transparent 60%),
    var(--navy);
  position:relative;
}
.rfp-card::before{
  content:"EST. 1946";position:absolute;top:-11px;left:clamp(30px,5vw,66px);
  background:var(--navy-deep);padding:0 14px;font-size:12px;font-weight:700;
  letter-spacing:.3em;color:var(--brass);
}
.rfp h2{font-size:clamp(30px,3.8vw,50px);color:var(--cream);margin:10px 0 18px}
.rfp p{color:var(--cream-dim);max-width:30em}
.rfp-ctas{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px}
.rfp-facts{display:grid;gap:0;align-content:center}
.rfp-fact{padding:18px 0;border-top:1px solid rgba(194,155,87,.25)}
.rfp-fact:first-child{border-top:none}
.rfp-fact span{display:block;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);margin-bottom:6px}
.rfp-fact b{font-weight:500;font-size:16.5px;color:var(--cream)}
.rfp-fact a{text-decoration:none;color:var(--cream)}
.rfp-fact a:hover{color:var(--brass-bright)}
@media(max-width:880px){.rfp-card{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--navy-deep);border-top:1px solid rgba(194,155,87,.22);padding:40px 0 34px}
.foot-in{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:flex-start}
.foot-brand b{font-family:var(--serif);font-size:17px;color:var(--cream)}
.foot-brand p{font-size:12.5px;color:var(--cream-faint);margin-top:6px;max-width:30em}
.foot-meta{font-size:12.5px;color:var(--cream-faint);text-align:right;line-height:2}
.foot-meta a{color:var(--cream-dim)}
.foot-meta a:hover{color:var(--brass-bright)}
.foot-concept{
  margin-top:26px;padding-top:18px;border-top:1px solid rgba(242,233,213,.08);
  font-size:11.5px;letter-spacing:.06em;color:rgba(242,233,213,.34);
}
@media(max-width:680px){.foot-meta{text-align:left}}

/* ============================================================
   GUIDE PAGE
   ============================================================ */
.guide-main{padding:120px 0 80px}
.guide-main .hero-dek{margin-top:18px}
.guide-section{margin-top:clamp(50px,7vw,84px);border-top:1px solid rgba(194,155,87,.25);padding-top:34px}
.guide-section h2{font-size:clamp(24px,2.6vw,34px);color:var(--cream);margin-bottom:18px}
.guide-section p{color:var(--cream-dim);max-width:46em;margin-bottom:14px}
.guide-section strong{color:var(--cream);font-weight:500}
.guide-section code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;color:var(--brass-bright)}
.guide-section pre{
  background:var(--navy-deep);border:1px solid rgba(194,155,87,.3);
  padding:22px 24px;overflow-x:auto;margin:20px 0;
  font-size:13.5px;line-height:1.65;color:var(--cream);
}
.guide-section pre code{color:var(--cream)}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-top:24px}
.swatch-chip{height:64px;border:1px solid rgba(242,233,213,.15);margin-bottom:10px}
.swatch p{font-size:13.5px;color:var(--cream);margin:0}
.swatch p span{display:block;font-size:12px;color:var(--cream-faint);margin-top:3px}
.type-specimen{border:1px solid rgba(194,155,87,.3);padding:26px;margin-top:20px}
.spec-serif{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);color:var(--cream);line-height:1.25;margin:0}
.spec-grot{font-family:var(--grot);font-weight:500;letter-spacing:.16em;font-size:clamp(13px,1.4vw,16px);color:var(--brass);margin:26px 0 0}
.type-specimen small{display:block;font-size:13px;color:var(--cream-faint);margin-top:8px;max-width:44em}
.pass-list,.recipe{list-style:none;counter-reset:n;display:grid;gap:18px;margin-top:20px}
.pass-list li,.recipe li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline}
.pass-tag{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy-deep);background:var(--brass);padding:4px 10px;white-space:nowrap;
}
.pass-list p,.recipe p{margin:0}
.recipe li{counter-increment:n}
.recipe li::before{
  content:counter(n,decimal-leading-zero);font-family:var(--grot);font-weight:700;
  color:var(--brass);font-size:15px;
}
.guide-footer{margin-top:70px;border-top:1px solid rgba(194,155,87,.25);padding-top:24px;font-size:13.5px;color:var(--cream-faint)}
.guide-footer a{color:var(--cream-dim)}