/* ------------------------------------------------------------------
   Margret Miller ... shared tokens, base type and the components that
   appear on every page (buttons, footer, legal pages, thank-you page).

   Palette A: sage and linen, terracotta CTA. Chosen so nothing is
   shared with the Frank Miller site (cream #F2EBD4 + oxblood #8C1D1D)
   or the Angus Douglas site (the same cream with Elias Yoder's
   oxblood #7A1F0E). Margaret's paper is cooler and greyer, her rules
   are green rather than brown, and her only hot colour is terracotta,
   which is on the buttons and nowhere else.

   landing.css sits on top of this file for index.html and
   checkout.html. Everything else needs only this one.
------------------------------------------------------------------ */
:root{
  --paper:#F4F1E8;        /* linen, the page */
  --tile:#E9E5D6;         /* oat, alternating bands and cards */
  --deep:#D9D6C4;         /* one step down, for wells */
  --ink:#22271F;          /* text, dark bands */
  --ink-deep:#171B15;     /* footer, one below --ink */
  --ink-soft:#3E4539;     /* body copy on paper */
  --ink-mute:#6E7566;     /* captions, small print */
  --line:#CBC9B4;         /* hairline separators */
  --line-strong:#8B9180;  /* the boxes, which have to read as boxes */
  --sage:#5E7355;         /* rules, ticks, eyebrows */
  --sage-dark:#41513B;    /* the header bar */
  --accent:#9C5B3C;       /* terracotta. Buttons and prices only. */
  --accent-dark:#7A4429;
  --accent-lift:#D9A183;  /* the accent on a dark band */
  /* The FREE badge is a green of its own so it reads as a giveaway and
     not as a second call to action. Held apart from --sage on purpose:
     a palette change must not quietly take the badge with it. */
  --free-green:#3F7A4E;

  --display:"Bitter",Georgia,"Times New Roman",serif;
  --ui:"Karla",system-ui,-apple-system,Segoe UI,sans-serif;
  --body:"Karla",system-ui,-apple-system,Segoe UI,sans-serif;

  --container:1080px;
  --gutter:1.5rem;
}

*{box-sizing:border-box}
html{font-size:18px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
section[id]{scroll-margin-top:1.5rem}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;margin:0 0 .55rem;letter-spacing:-.01em}
h1{font-size:3rem;line-height:1.04}
h2{font-size:2.15rem}
h3{font-size:1.25rem}
h4{font-size:1.05rem}
p{margin:0 0 1rem;max-width:48ch}
a{color:var(--accent);text-underline-offset:.22em;text-decoration-thickness:.08em}
a:hover{color:var(--accent-dark)}
b,strong{font-weight:700}
:focus-visible{outline:3px solid var(--sage);outline-offset:3px}
img{max-width:100%}

.wrap{width:min(var(--container),92vw);margin-inline:auto}
.narrow{width:min(680px,92vw);margin-inline:auto}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);padding:1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}

/* ---------- header bar ---------- */
.top{background:var(--sage-dark);padding:1.15rem 0}
.brand{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:.86rem;color:var(--paper);text-decoration:none;
}
.brand:hover{color:#CFD8C6}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:60px;padding:.85rem 1.9rem;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;
  text-align:center;text-decoration:none;border-radius:3px;cursor:pointer;
  border:2px solid var(--accent);background:var(--accent);color:#FFF8F2;
  transition:background .16s ease,border-color .16s ease;
}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#FFF8F2}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.4rem}

/* ---------- footer ---------- */
.foot{background:var(--ink-deep);color:#9AA093;padding:2.4rem 0;font-size:.9rem;margin-top:0}
.foot a{color:#D3D8CB}
.foot a:hover{color:#fff}
.foot-in{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;align-items:center}
.foot-in nav a{margin-right:1.1rem}
.foot-note{color:#6F7568;font-size:.8rem;margin:1.2rem 0 0;max-width:none}

/* ---------- generic page bands ---------- */
.band{padding:3.6rem 0}
.band.tile{background:var(--tile);border-block:1px solid var(--line)}
.band.ink{background:var(--ink);color:var(--paper)}
.band.ink h1,.band.ink h2,.band.ink h3,.band.ink h4{color:#fff}
.band.ink p{color:#C5CBBD}
.eyebrow{
  display:flex;align-items:center;gap:.9rem;margin:0 0 .9rem;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:.62rem;color:var(--sage);
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.band.ink .eyebrow{color:#9BAD91}
.band.ink .eyebrow::after{background:#3A4136}

/* ---------- legal / long-form pages ---------- */
.doc{padding:2.8rem 0 3.6rem}
.doc h1{font-size:2.3rem;margin-bottom:.4rem}
.doc .updated{font-family:var(--ui);text-transform:uppercase;letter-spacing:.14em;font-size:.6rem;
  font-weight:700;color:var(--ink-mute);margin:0 0 2rem}
.doc h2{font-size:1.25rem;margin:2.2rem 0 .5rem}
.doc p,.doc li{color:var(--ink-soft);max-width:66ch}
.doc ul{padding-left:1.2rem;margin:0 0 1rem}
.doc li{margin-bottom:.4rem}
.doc .backlink{font-family:var(--ui);text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;
  font-weight:700;color:var(--ink-mute);text-decoration:none;display:inline-block;margin-bottom:1.6rem}
.doc .backlink:hover{color:var(--accent)}
.callout{
  background:var(--tile);border:1px solid var(--line);border-left:4px solid var(--sage);
  border-radius:3px;padding:1.1rem 1.2rem;margin:1.6rem 0;
}
.callout strong{display:block;font-family:var(--display);font-size:1.05rem;margin-bottom:.3rem;color:var(--ink)}
.callout p:last-child{margin-bottom:0}

/* ---------- thank-you page ---------- */
/* Numbered rows. The number is the order to read them in, and it matches the
   numbering in the delivery email so a buyer reading both sees one list. */
.dl-no{
  flex:0 0 1.7rem;width:1.7rem;height:1.7rem;box-sizing:border-box;border-radius:50%;
  background:var(--accent);color:#FFF8F2;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:700;font-size:.8rem;margin-right:.7rem;
}
.dl-meta{
  display:block;font-family:var(--ui);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.56rem;color:#8E9487;margin-top:.3rem;
}
.dl-audio .dl-no{background:var(--free-green)}

.sec{padding:2.6rem 0}
.sec + .sec{border-top:1px solid var(--line)}
.sec-downloads{background:var(--ink);color:var(--paper);padding:2rem 0 2.4rem}
.dl-head{font-size:2rem;color:#fff;margin:0 0 .35rem}
.dl-emailed{
  color:#C5CBBD;font-size:.94rem;margin:0 0 1.2rem;max-width:52ch;
  padding-left:.8rem;border-left:3px solid var(--sage);
}
.dl-list{list-style:none;margin:0;padding:0}
.dl-list li{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.85rem 0;border-bottom:1px solid #3A4136;
}
.dl-list li:last-child{border-bottom:0}
.dl-title{display:flex;align-items:flex-start;font-family:var(--display);font-weight:700;font-size:1.05rem;color:#fff;line-height:1.25;flex:1 1 14rem}
/* :not(.dl-no) matters. The number badge is also a direct span child, and
   without the exclusion it inherits flex:1 1 auto and stretches from a
   circle into an oval on any row with a short title. */
.dl-title > span:not(.dl-no){flex:1 1 auto;min-width:0}
.dl-sub{display:block;font-family:var(--body);font-weight:400;font-size:.82rem;color:#9AA093;margin-top:.15rem}
.dl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex:none;
  min-height:52px;min-width:11rem;padding:.6rem 1.4rem;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;
  text-decoration:none;border-radius:3px;
  background:var(--accent);border:2px solid var(--accent);color:#FFF8F2;
}
.dl-btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#FFF8F2}
.dl-ico{width:1.05rem;height:1.05rem;flex:none}
.free-pill{
  display:inline-block;background:var(--free-green);color:#fff;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.52rem;padding:.12rem .45rem;border-radius:2px;margin-right:.45rem;vertical-align:.18em;
}
/* Secondary: everything in one zip, under the individual buttons. */
.dl-all-wrap{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid #3A4136}
.dl-all{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:50px;padding:.55rem 1.4rem;
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;
  text-decoration:none;border-radius:3px;
  background:transparent;border:2px solid #6E7566;color:#E3E7DC;
}
.dl-all:hover{background:#2C3229;border-color:#9AA093;color:#fff}
.dl-all-ico{width:1rem;height:1rem;flex:none}
.dl-all-sub{color:#8E9487;font-size:.8rem;margin:.55rem 0 0;max-width:46ch}
.dl-warning{
  margin-top:1.2rem;padding:.85rem 1rem;border:2px dashed var(--accent-lift);
  color:var(--accent-lift);font-family:var(--ui);font-size:.8rem;border-radius:3px;
}
.proof-block{
  background:var(--tile);border:1px solid var(--line);border-left:4px solid var(--sage);
  border-radius:3px;padding:1.2rem 1.3rem;
}
.proof-block strong{display:block;font-family:var(--display);font-size:1.1rem;margin-bottom:.35rem}
.proof-block p:last-child{margin-bottom:0}
.signoff{
  font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.4;color:var(--ink);
  border-left:4px solid var(--accent);padding-left:1rem;margin:1.8rem 0 0;max-width:34ch;
}
.band.ink .signoff,.sec-downloads .signoff{color:#fff;border-left-color:var(--accent-lift)}

@media (max-width:900px){
  h1{font-size:2.3rem}
  h2{font-size:1.75rem}
  .band{padding:2.6rem 0}
}
@media (max-width:560px){
  html{font-size:17px}
  .btn{width:100%}
  .dl-list li{flex-direction:column;align-items:stretch;gap:.6rem}
  .dl-btn{width:100%}
  .dl-all{width:100%}
  .foot-in{flex-direction:column;align-items:flex-start;gap:.8rem}
  /* On a 390px screen every line above the first Download button is a line
     the buyer has to read past to reach the thing they came for, so the
     heading and the padding above it both come down. Measured: first button
     lands at roughly 340px, which puts two of the three on screen. */
  .sec-downloads{padding:1.3rem 0 1.9rem}
  .dl-head{font-size:1.6rem}
  .dl-emailed{font-size:.88rem;margin-bottom:1rem}
}