/* HomeschoolSam — shared site styles
   Palette & type carried over from the budget template so the whole brand feels like one hand made it. */

:root{
  --paper:#FAF6EC;
  --paper-dim:#F1E9D8;
  --cream:#FAF1EA;
  --ink:#2C2A28;
  --muted:#6E665C;
  --rose:#B24A32;
  --rose-tint:#F1DCD4;
  --sage:#5C6E5A;
  --sage-tint:#E1E7DD;
  --gold:#D9A441;
  --gold-tint:#F8ECD3;
  --line:#E3DAC5;
  --max:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Karla', sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:600;
  line-height:1.15;
  margin:0 0 .4em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.1rem,4.5vw,3.4rem); font-weight:500;}
h2{font-size:clamp(1.5rem,3vw,2rem);}
h3{font-size:1.15rem; font-weight:600;}
p{margin:0 0 1em; max-width:62ch;}
a{color:var(--rose); text-decoration-thickness:1.5px; text-underline-offset:3px;}
a.plain{color:inherit; text-decoration:none;}
.mono{font-family:'IBM Plex Mono',monospace;}

img{max-width:100%; display:block;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
.wrap-narrow{max-width:720px; margin:0 auto; padding:0 28px;}

/* ---------- signature device: angled tab header, from the budget template ---------- */
.tab{
  display:inline-block;
  background:var(--sage);
  color:var(--paper);
  padding:8px 22px 8px 18px;
  clip-path:polygon(0 0,100% 0,92% 100%,0% 100%);
  font-family:'Karla',sans-serif;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.02em;
}
.tab.rose{background:var(--rose);}
.tab.gold{background:var(--gold);}

/* ---------- stitched margin, from the budget template ---------- */
.stitched{
  position:relative;
  padding-left:26px;
}
.stitched::before{
  content:"";
  position:absolute;
  left:8px; top:2px; bottom:2px;
  border-left:1.5px dashed #CFC2AC;
}

/* ---------- nav ---------- */
.site-nav{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:20;
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
  flex-wrap:wrap; gap:14px;
}
.brand{
  font-family:'Fraunces',serif; font-size:1.3rem; font-weight:600;
  text-decoration:none; color:var(--ink);
}
.brand em{font-style:italic; color:var(--rose);}
.nav-links{display:flex; gap:26px; flex-wrap:wrap; list-style:none; margin:0; padding:0;}
.nav-links a{
  color:var(--ink); text-decoration:none; font-size:.95rem;
  padding-bottom:3px; border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a.active{border-bottom-color:var(--rose);}
.nav-cta{
  background:var(--ink); color:var(--paper); padding:9px 18px;
  text-decoration:none; font-size:.9rem; border-radius:2px;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--rose);}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:12px 26px; border-radius:2px;
  text-decoration:none; font-size:.95rem; font-weight:600;
  border:1.5px solid var(--ink); color:var(--ink);
}
.btn:hover{background:var(--ink); color:var(--paper);}
.btn-solid{background:var(--rose); border-color:var(--rose); color:var(--cream);}
.btn-solid:hover{background:#96402c; border-color:#96402c; color:var(--cream);}
.btn-sage{background:var(--sage); border-color:var(--sage); color:var(--paper);}
.btn-sage:hover{background:#697c60; border-color:#697c60;}

/* ---------- cards ---------- */
.card{
  background:var(--paper); border:1px solid var(--line);
  padding:26px; border-radius:2px;
}
.card.tint-rose{background:var(--rose-tint); border-color:#E4C9C7;}
.card.tint-sage{background:var(--sage-tint); border-color:#D3DCC6;}
.card.tint-gold{background:var(--gold-tint); border-color:#E9D6A6;}

/* ---------- hero ---------- */
.hero{padding:64px 0 56px; border-bottom:1px solid var(--line);}
.hero .kicker{
  font-family:'Fraunces',serif; font-style:italic; font-size:1rem; color:var(--muted);
  margin-bottom:14px; display:block;
}
.hero-grid{
  display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center;
}
.hero-photo img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px;
  box-shadow:10px 10px 0 var(--gold-tint);
}
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-photo{max-width:220px; margin:0 auto;}
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line); margin-top:70px;
  padding:36px 0; color:var(--muted); font-size:.9rem;
}
.site-footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; align-items:center;}
.site-footer a{color:var(--muted);}

section{padding:56px 0;}
section.tinted{background:var(--paper-dim);}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:760px){
  .grid-2, .grid-3{grid-template-columns:1fr;}
  .site-nav .wrap{flex-direction:column; align-items:flex-start;}
  .nav-links{gap:16px;}
}

/* ---------- code/coupon chip ---------- */
.chip{
  display:inline-block; background:var(--gold-tint); border:1px dashed var(--gold);
  padding:3px 10px; font-family:'IBM Plex Mono',monospace; font-size:.85rem;
  border-radius:2px; color:#8a6a24;
}

/* ---------- fallback link if a post embed doesn't render ---------- */
.post-fallback-link{
  display:flex; align-items:center; justify-content:center;
  min-height:220px; text-align:center; padding:20px;
  border:1px dashed var(--line); border-radius:2px;
  color:var(--rose); text-decoration:none; font-weight:600;
  background:var(--paper-dim);
}

/* ---------- photo band, used on the Audit page ---------- */
.audit-photo-band{
  max-height:420px; overflow:hidden; border-bottom:1px solid var(--line);
}
.audit-photo-band img{
  width:100%; height:420px; object-fit:cover; object-position:center 30%;
}
@media (max-width:760px){
  .audit-photo-band{max-height:260px;}
  .audit-photo-band img{height:260px;}
}