/* Harley's Handmade — shared styling for the interior pages.
   The board is always at the top: you pulled back off it and it's
   receding above you. Same materials as the homepage, calmer. */

:root{--ink:#1A1209;--espresso:#2D1F12;--walnut:#4A2E1D;--oak:#8B6342;
      --saddle:#B08456;--parchment:#F1E6CC;--linen:#FAF4E6;--blueprint:#0E3050}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--linen);color:var(--espresso);font-family:Lora,Georgia,serif;font-size:18px;
     line-height:1.62;-webkit-font-smoothing:antialiased;padding-bottom:58px}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:800;line-height:1.04;letter-spacing:-.022em;
         font-variation-settings:'SOFT' 16,'WONK' 1}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.15em;text-transform:uppercase}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.narrow{max-width:760px}

/* ---------- the board, receding above you ---------- */
.top{position:relative;background:#160e06;overflow:hidden}
.top .board{position:absolute;inset:0;background:url(img/gate.webp) center/cover;opacity:.9;
  filter:brightness(.6) saturate(.9)}
.top .fade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,11,4,.62) 0%,rgba(18,11,4,.5) 30%,rgba(18,11,4,.72) 62%,var(--linen) 99%)}
.top .inner{position:relative;z-index:2;padding:clamp(78px,13vh,132px) 0 clamp(30px,5vh,56px)}
.back{display:inline-flex;align-items:center;gap:9px;font-size:10px;color:rgba(246,236,216,.82);
  text-decoration:none;border-bottom:1px solid rgba(246,236,216,.35);padding-bottom:4px;
  font-family:'IBM Plex Mono',monospace;letter-spacing:.15em;text-transform:uppercase}
.back:hover{color:#fff;border-color:#fff}
.top h1{margin-top:24px;font-size:clamp(34px,6vw,72px);color:#F6ECD8;
  font-variation-settings:'opsz' 144,'SOFT' 12,'WONK' 1;text-shadow:0 2px 4px rgba(8,4,1,.9),0 4px 30px rgba(8,4,1,.9)}
.top .lede{margin-top:14px;max-width:54ch;color:#F2E7D0;font-size:clamp(15px,1.7vw,19px);
  text-shadow:0 1px 3px rgba(8,4,1,.98),0 3px 20px rgba(8,4,1,.95)}

/* ---------- body furniture ---------- */
section{padding:clamp(38px,6vw,74px) 0}
.eyebrow{display:flex;align-items:center;gap:13px;font-size:10px;color:var(--oak);margin-bottom:16px;
  font-family:'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase}
.eyebrow::after{content:"";flex:1;height:1px;background:rgba(74,46,29,.22)}
h2{font-size:clamp(26px,3.7vw,44px);margin-bottom:15px}
h3{font-size:clamp(19px,2vw,23px);margin-bottom:8px}
p{max-width:64ch;color:rgba(45,31,18,.85)}
p+p{margin-top:13px}
b{color:var(--espresso)}
.band{background:var(--parchment);border-top:1px solid rgba(74,46,29,.16);
      border-bottom:1px solid rgba(74,46,29,.16)}
.rule{border-top:1px solid rgba(74,46,29,.16)}

/* pull-quote */
.pull{margin:clamp(26px,4vw,44px) 0;padding-left:clamp(18px,2.4vw,30px);
  border-left:3px solid var(--saddle)}
.pull p{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(20px,2.6vw,30px);
  line-height:1.28;color:var(--walnut);max-width:26ch;font-variation-settings:'SOFT' 20,'WONK' 1}

/* steps */
.steps{display:grid;gap:0;margin-top:clamp(22px,3vw,34px)}
.step{display:grid;grid-template-columns:74px 1fr;gap:clamp(16px,2.4vw,28px);
  padding:clamp(20px,2.6vw,30px) 0;border-top:1px solid rgba(74,46,29,.18)}
.step:last-child{border-bottom:1px solid rgba(74,46,29,.18)}
.step .no{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--saddle);padding-top:6px;
  letter-spacing:.14em}

/* term tiles */
.terms{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.8vw,20px);
  margin-top:clamp(22px,3vw,32px)}
.tm{border:1px solid rgba(74,46,29,.26);padding:clamp(16px,2.2vw,24px);background:rgba(255,255,255,.5)}
.tm .k{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;color:var(--oak);
  text-transform:uppercase}
.tm .v{font-family:Fraunces;font-weight:800;font-size:clamp(22px,2.6vw,30px);margin-top:5px}
.tm p{font-size:14.5px;margin-top:7px;color:rgba(45,31,18,.8)}
.tm.warn{border-color:rgba(74,46,29,.6);background:rgba(176,132,86,.18)}

.note{margin-top:24px;padding:17px 19px;border:1px solid rgba(74,46,29,.3);
  background:rgba(176,132,86,.14);font-size:15.5px;color:rgba(45,31,18,.92);max-width:64ch}

/* plates */
.plates{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);margin-top:clamp(22px,3vw,34px)}
.plates img{width:100%;border:1px solid rgba(74,46,29,.3);box-shadow:0 10px 24px rgba(8,4,1,.2)}
.cap{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;color:var(--oak);
  text-transform:uppercase;margin-top:9px}

/* figure */
.fig{margin-top:clamp(22px,3vw,34px);border:1px solid rgba(74,46,29,.22)}
.fig img{width:100%}

/* CTA */
.cta{text-align:center}
.cta p{margin:0 auto}
.acts{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.acts a{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding:14px 22px}
.acts .p{background:var(--walnut);color:var(--linen)}
.acts .p:hover{background:var(--espresso)}
.acts .s{border:1px solid rgba(74,46,29,.45)}
.acts .s:hover{background:rgba(74,46,29,.08)}

/* pinned contact */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(74,46,29,.35)}
.callbar a{padding:14px;text-align:center;text-decoration:none;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.callbar .c1{background:var(--walnut);color:var(--linen)}
.callbar .c2{background:var(--parchment);color:var(--espresso)}

@media(max-width:820px){
  .terms,.plates{grid-template-columns:1fr}
  .step{grid-template-columns:52px 1fr}
}