/* kzb.homes — 1927 job-printing style (v1.1.0)
 *
 * Tokens and components mirror the printed guest manual and guest card
 * (~/Documents/business/kzbhomes/docs/GUEST-CARD.html). One difference by design:
 * the print pieces rely on cream stock and paint no background; on the web we
 * must paint the ground ourselves, so ivory is the page background here.
 *
 * Mobile-first: the double-rule frame tightens and the three-cell foot stacks
 * on phones; body copy never drops below 16px.
 */

:root{
  --paper:#F4EBD3;   /* ivory — the "cream stock" */
  --ink:#231C14;     /* warm black — first press run */
  --red:#8A2B1C;     /* oxblood — second run */
  --soft:#6B5C48;
  --rule:#C3B69A;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Libre Baskerville",Georgia,"Times New Roman",serif;
  font-size:16px;
  line-height:1.75;
}
a{color:inherit}

/* ---- the sheet: double-rule frame, 3px outer / 1px inner ---- */
.sheet{max-width:52rem;margin:0 auto;padding:14px 12px 28px}
.frame{border:3px solid var(--ink);padding:5px}
.inner{border:1px solid var(--ink);padding:22px 18px 18px;display:flex;flex-direction:column}

/* ---- running head ---- */
.head{text-align:center;border-bottom:1px solid var(--ink);padding-bottom:12px}
.head p,.head h1{margin:0}
.est{font-family:Jost,system-ui,sans-serif;font-size:.72rem;font-weight:500;letter-spacing:.38em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.nm{font-family:Limelight,Georgia,serif;font-weight:400;font-size:2rem;letter-spacing:.05em;line-height:1.1}
.pl{font-family:Jost,system-ui,sans-serif;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin-top:8px}
.no{font-family:Jost,system-ui,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin-top:10px}

/* ---- rule · diamond · rule divider ---- */
.dvd{display:flex;align-items:center;gap:12px;margin:14px 0}
.dvd::before,.dvd::after{content:"";flex:1;height:1px;background:var(--ink)}
.dvd i{width:9px;height:9px;background:var(--red);transform:rotate(45deg);flex:none}

/* ---- section titles ---- */
.title{text-align:center;margin:26px 0 4px}
.title h2{font-family:Limelight,Georgia,serif;font-weight:400;font-size:1.7rem;letter-spacing:.09em;margin:0;color:var(--red);text-wrap:balance}
.title p{font-style:italic;color:var(--soft);margin:10px auto 0;max-width:58ch}
.welcome .title{margin-top:18px}

/* ---- prose ---- */
.prose{max-width:64ch;margin:8px auto 0;font-size:1.0625rem;line-height:1.85}
.prose p{margin:0 0 1em}
.prose .drop::first-letter{font-family:Limelight,Georgia,serif;font-size:2.6em;float:left;line-height:.85;padding:.08em .12em 0 0;color:var(--red)}

/* ---- Roman-numeral items ---- */
.items{list-style:none;margin:10px auto 0;padding:0;max-width:62ch}
.items li{display:grid;grid-template-columns:2rem 1fr;gap:0 10px;margin:0 0 18px}
.items .num{font-family:Limelight,Georgia,serif;color:var(--red);text-align:right;line-height:1.7}
.items .txt{line-height:1.8}
.items .txt b.h{font-family:Jost,system-ui,sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:2px;color:var(--ink)}

/* ---- buttons: letterspaced caps, ink rule; oxblood variant for the plate ---- */
.cta{text-align:center;margin:6px 0 0}
.btn{
  display:inline-block;
  font-family:Jost,system-ui,sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border:1px solid var(--ink);padding:12px 22px;
  transition:background .15s,color .15s;
}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper);outline:none}
.btn-red{color:var(--red);border-color:var(--red)}
.btn-red:hover,.btn-red:focus-visible{background:var(--red);color:var(--paper)}

/* ---- the oxblood plate ---- */
.plate{border:2px solid var(--red);padding:20px 22px;max-width:62ch;margin:30px auto 0;text-align:center}
.plate p{margin:0}
.plate .l{font-family:Jost,system-ui,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.plate .h{font-family:Limelight,Georgia,serif;font-size:1.35rem;letter-spacing:.03em;line-height:1.3;overflow-wrap:anywhere}
.plate .n{margin-top:10px;color:var(--soft);line-height:1.75}
.plate .cta{margin-top:16px}

.cent{font-style:italic;color:var(--soft);text-align:center;margin:26px 0 8px}
.mgmt{font-family:Limelight,Georgia,serif;font-size:.95rem;letter-spacing:.09em;text-align:center;margin:0 0 6px}

/* ---- foot: three cells, stacks on phones ---- */
.foot{margin-top:22px;border-top:1px solid var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:10px;text-align:center}
.foot > div{font-family:Jost,system-ui,sans-serif;font-size:.85rem;letter-spacing:.08em;color:var(--soft);line-height:1.6}
.foot .fl{display:block;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);margin-bottom:2px}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ---- wider than a phone: breathe like the printed sheet ---- */
@media (min-width:600px){
  .sheet{padding:36px 24px 48px}
  .frame{padding:6px}
  .inner{padding:34px 44px 26px}
  .nm{font-size:2.4rem}
  .title h2{font-size:2rem}
  .foot{flex-direction:row;justify-content:space-between;gap:12px}
  .foot > div{flex:1}
}