/* ============================================================
   QUILL & CLOVE — quillandclove.com
   Palette: bark #2A1B10 · paper #F6F1E6 · leaf #1E5240
            gold #C98A1B · mail-red #B5432F · mail-blue #2E4E79
   Type:    Young Serif (display) · Albert Sans (body) ·
            IBM Plex Mono (parcel labels)
   ============================================================ */

:root{
  --bark:#2A1B10;
  --bark-soft:#3A2818;
  --paper:#F6F1E6;
  --paper-deep:#EFE7D6;
  --ink:#241811;
  --leaf:#1E5240;
  --leaf-dark:#173F31;
  --gold:#C98A1B;
  --mail-red:#B5432F;
  --mail-blue:#2E4E79;
  --line:rgba(42,27,16,.22);
  --radius:10px;
  --measure:64ch;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Albert Sans",system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-size:1.0625rem;
}
img{max-width:100%;display:block}
a{color:var(--leaf)}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

/* ---------- airmail hatch (signature element) ---------- */
.airmail{
  height:12px;
  background:repeating-linear-gradient(
    -45deg,
    var(--mail-red) 0 14px,
    var(--paper) 14px 26px,
    var(--mail-blue) 26px 40px,
    var(--paper) 40px 52px
  );
}

/* ---------- header ---------- */
header.site{
  background:var(--bark);
  color:var(--paper);
}
.nav{
  max-width:1100px;margin:0 auto;padding:1.1rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;
}
.wordmark{
  font-family:"Young Serif",serif;
  font-size:1.45rem;letter-spacing:.01em;
  color:var(--paper);text-decoration:none;
}
.wordmark span{color:var(--gold)}
.nav ul{display:flex;gap:1.4rem;list-style:none;flex-wrap:wrap}
.nav a.navlink{
  color:var(--paper);text-decoration:none;font-size:.95rem;
  border-bottom:2px solid transparent;padding-bottom:2px;
}
.nav a.navlink:hover,.nav a.navlink[aria-current="page"]{border-bottom-color:var(--gold)}

/* ---------- hero ---------- */
.hero{
  background:var(--bark);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.hero-inner{
  max-width:1100px;margin:0 auto;
  padding:4.5rem 1.5rem 5rem;
  display:grid;grid-template-columns:1.4fr .6fr;gap:2rem;align-items:center;
}
.hero h1{
  font-family:"Young Serif",serif;
  font-weight:400;
  font-size:clamp(2.3rem,5.2vw,4rem);
  line-height:1.12;
}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p.lede{
  margin-top:1.2rem;max-width:46ch;font-size:1.15rem;color:#EADFCB;
}
.hero .cta-row{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}

.btn{
  display:inline-block;text-decoration:none;font-weight:600;
  padding:.85rem 1.6rem;border-radius:999px;border:2px solid transparent;
  font-size:1rem;cursor:pointer;transition:transform .15s ease,background .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--bark)}
.btn-ghost{border-color:var(--paper);color:var(--paper)}
.btn-leaf{background:var(--leaf);color:var(--paper)}
.btn-leaf:hover{background:var(--leaf-dark)}

/* postmark stamp */
.postmark{justify-self:center;transform:rotate(-8deg)}
.postmark svg{width:190px;height:190px}

/* ---------- section scaffolding ---------- */
section.band{padding:4rem 1.5rem}
.wrap{max-width:1100px;margin:0 auto}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mail-red);
}
h2.title{
  font-family:"Young Serif",serif;font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.4rem);
  margin:.4rem 0 1rem;
}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:1rem}

/* ---------- story strip ---------- */
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.story-card h3{
  font-family:"Young Serif",serif;font-weight:400;font-size:1.25rem;margin-bottom:.5rem;
}
.story-card p{font-size:.98rem}

/* ---------- shop / parcel cards ---------- */
.band-deep{background:var(--paper-deep)}
.shop-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:1.5rem;margin-top:2.2rem;
}
.parcel{
  background:var(--paper);
  border:1.5px dashed var(--bark);
  border-radius:var(--radius);
  padding:1.2rem 1.2rem 1.4rem;
  display:flex;flex-direction:column;gap:.7rem;
  position:relative;
}
.parcel .meta{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mail-blue);
  display:flex;justify-content:space-between;gap:.5rem;
  border-bottom:1px solid var(--line);padding-bottom:.55rem;
}
.parcel h3{
  font-family:"Young Serif",serif;font-weight:400;font-size:1.3rem;line-height:1.2;
}
.parcel .photo{
  aspect-ratio:4/3;border-radius:6px;
  background:
    repeating-linear-gradient(45deg,rgba(42,27,16,.06) 0 10px,transparent 10px 20px),
    var(--paper-deep);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:rgba(36,24,17,.55);
  text-align:center;padding:.5rem;
}
.parcel p.desc{font-size:.95rem;flex-grow:1}
.parcel .buy-row{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  border-top:1px solid var(--line);padding-top:.8rem;
}
.price{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:1.05rem}
.price small{display:block;font-weight:400;font-size:.7rem;color:rgba(36,24,17,.6)}
.parcel .btn{padding:.55rem 1.1rem;font-size:.9rem}
.origin-tag{
  position:absolute;top:-11px;right:14px;
  background:var(--mail-red);color:var(--paper);
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.1em;
  padding:.2rem .55rem;border-radius:3px;text-transform:uppercase;
  transform:rotate(2deg);
}

/* ---------- education band ---------- */
.band-leaf{background:var(--leaf);color:var(--paper)}
.band-leaf .eyebrow{color:var(--gold)}
.band-leaf a.btn{margin-top:1.4rem}
.compare{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2rem;
}
.compare .col{
  border:1.5px solid rgba(246,241,230,.35);border-radius:var(--radius);
  padding:1.4rem;
}
.compare h3{font-family:"Young Serif",serif;font-weight:400;margin-bottom:.6rem}
.compare ul{list-style:none}
.compare li{padding:.35rem 0;border-bottom:1px dashed rgba(246,241,230,.25);font-size:.97rem}
.compare li:last-child{border-bottom:none}

/* ---------- tracking timeline ---------- */
.track{
  margin-top:2.4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  position:relative;
}
.track::before{
  content:"";position:absolute;top:13px;left:8%;right:8%;
  border-top:2px dashed var(--mail-blue);
}
.stop{position:relative;text-align:center;padding:0 1rem}
.stop .dot{
  width:28px;height:28px;border-radius:50%;
  background:var(--paper);border:3px solid var(--mail-blue);
  margin:0 auto .8rem;position:relative;z-index:1;
}
.stop.done .dot{background:var(--mail-blue)}
.stop .mono{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mail-blue);display:block;margin-bottom:.3rem;
}
.stop p{font-size:.95rem}

/* ---------- footer ---------- */
footer.site{background:var(--bark);color:#D8CBB4;font-size:.92rem}
.foot-inner{
  max-width:1100px;margin:0 auto;padding:3rem 1.5rem;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;
}
footer.site h4{
  font-family:"Young Serif",serif;font-weight:400;color:var(--paper);margin-bottom:.7rem;
}
footer.site a{color:var(--paper)}
footer.site ul{list-style:none}
footer.site li{margin:.35rem 0}
.foot-legal{
  border-top:1px solid rgba(246,241,230,.18);
  padding:1.2rem 1.5rem;text-align:center;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.06em;
}

/* ---------- inner pages ---------- */
.page-head{background:var(--bark);color:var(--paper);padding:3.2rem 1.5rem}
.page-head h1{
  font-family:"Young Serif",serif;font-weight:400;
  font-size:clamp(2rem,4.5vw,3rem);max-width:20ch;line-height:1.15;
}
.page-body{padding:3.5rem 1.5rem}
.page-body h2{
  font-family:"Young Serif",serif;font-weight:400;font-size:1.5rem;
  margin:2.2rem 0 .7rem;
}
.page-body h2:first-child{margin-top:0}
.faq dt{
  font-weight:700;margin-top:1.6rem;font-size:1.05rem;
}
.faq dd{margin-top:.4rem;max-width:var(--measure)}
.notice{
  border:1.5px dashed var(--mail-red);border-radius:var(--radius);
  padding:1.1rem 1.3rem;margin-top:2rem;max-width:var(--measure);
  font-size:.95rem;background:var(--paper-deep);
}

/* ---------- motion & responsive ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  .btn:hover{transform:none}
}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;padding:3.2rem 1.5rem}
  .postmark{display:none}
  .story-grid,.compare{grid-template-columns:1fr}
  .track{grid-template-columns:1fr;gap:1.6rem}
  .track::before{display:none}
  .foot-inner{grid-template-columns:1fr}
}