/* ============================================================
   Carol Lancaster — carollancaster.com
   Palette + type drawn from the RED cookbook cover.
   ============================================================ */

/* One upright variable font (wght 400–900) covers every roman weight;
   the italic is a static 500 instance. */
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:400 900; font-display:swap; src:url('/fonts/playfair-var.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:500; font-display:swap; src:url('/fonts/playfair-500-italic.woff2') format('woff2'); }

:root{
  --red:#B0302E;
  --red-deep:#8E2320;
  --red-hover:#97292A;
  --cream:#F3E8CE;
  --card:#F8F1DF;
  --panel:#EADCBB;
  --title:#7C241F;
  --text:#5B4A3F;
  --gold:#BC8A34;

  --display:'Playfair Display','Didot','Georgia',serif;
  --body:'Iowan Old Style','Palatino Linotype','Book Antiqua',Palatino,'Georgia',serif;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  font-family:var(--body);
  color:var(--cream);
  background-color:var(--red);
  background-image:
    radial-gradient(1100px 620px at 50% -12%, #C63C35 0%, rgba(198,60,53,0) 62%),
    linear-gradient(180deg, #B0302E 0%, #9C2A28 56%, #892422 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
}

.wrap{
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding:clamp(2rem,5vw,4rem) clamp(1.1rem,4vw,2rem) clamp(1.5rem,4vw,3rem);
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}

/* ---------------- Hero ---------------- */
.hero{ text-align:center; margin-bottom:clamp(2rem,5vw,3.4rem); }
.hero h1{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(2.7rem,9vw,4.9rem);
  line-height:.98;
  letter-spacing:-.01em;
  margin:0;
}
.hero .tag{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.15rem,3.4vw,1.7rem);
  margin:.85rem 0 0;
  opacity:.95;
}
.hero .lead{
  font-size:clamp(1rem,2.3vw,1.15rem);
  line-height:1.62;
  max-width:44ch;
  margin:1.15rem auto 0;
  opacity:.9;
}

/* ---------------- Cards ---------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(1.1rem,2.6vw,1.7rem);
  align-items:stretch;
}
.card{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 14px 34px rgba(58,10,8,.30), 0 2px 6px rgba(58,10,8,.18);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover,.card:focus-within{
  transform:translateY(-6px);
  box-shadow:0 22px 46px rgba(58,10,8,.38), 0 3px 8px rgba(58,10,8,.20);
}

.media{
  height:clamp(212px,26vw,286px);
  background:var(--panel);
  border-bottom:1px solid rgba(120,60,20,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.media picture,.media img{ width:100%; height:100%; display:block; }
.media img{ object-fit:cover; object-position:center 28%; }

/* Book cover: show the whole cover, floating on parchment */
.media--contain{ background:radial-gradient(120% 120% at 50% 12%, #F0E4C6 0%, var(--panel) 78%); }
.media--contain img{
  object-fit:contain;
  padding:20px 18px 16px;
  filter:drop-shadow(0 12px 20px rgba(70,20,10,.34));
}

/* Newsletter: the Yes Chronicles wordmark, floating on parchment */
.media--logo{ background:radial-gradient(120% 120% at 50% 12%, #F0E4C6 0%, var(--panel) 78%); }
.media--logo img{ object-fit:contain; object-position:center; padding:26px 24px 22px; }

/* Email: sealed-letter illustration */
.media--icon .post{
  width:min(64%,220px);
  height:auto;
  filter:drop-shadow(0 10px 16px rgba(70,20,10,.22));
}

.body{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:clamp(1.15rem,3vw,1.6rem);
  flex:1;
}
.kicker{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.7rem;
  font-weight:700;
  color:var(--gold);
  margin:0;
}
.kicker .hi{ color:var(--red); }
.title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.28rem,2.5vw,1.6rem);
  line-height:1.14;
  color:var(--title);
  margin:0;
}
.desc{
  color:var(--text);
  font-size:1rem;
  line-height:1.56;
  margin:0;
  flex:1;
}

/* ---------------- Button ---------------- */
.btn{
  align-self:flex-start;
  margin-top:.55rem;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--sans);
  font-weight:650;
  font-size:.96rem;
  color:var(--cream);
  background:var(--red);
  padding:.72em 1.2em;
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 5px 14px rgba(120,20,16,.30);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover{ background:var(--red-hover); transform:translateY(-1px); box-shadow:0 9px 20px rgba(120,20,16,.36); }
.btn:active{ transform:translateY(0); }
.btn .arrow{ transition:transform .2s ease; }
.btn:hover .arrow{ transform:translateX(3px); }

a:focus-visible,.btn:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}

/* ---------------- Why "Yes Chronicles" ---------------- */
.origin{
  text-align:center;
  max-width:40ch;
  margin:clamp(2.6rem,6vw,4rem) auto 0;
}
/* Opacities are contrast-bound: cream on the red gradient needs ≥.85 (kicker)
   and ≥.9 (body) to hold WCAG AA over the gradient's lightest band. */
.origin .kicker{ color:var(--cream); opacity:.85; }
.origin p{
  font-size:clamp(.98rem,2.2vw,1.06rem);
  line-height:1.7;
  opacity:.9;
  margin:1rem auto 0;
}

/* ---------------- Footer ---------------- */
.foot{ text-align:center; margin-top:clamp(2.2rem,5vw,3.4rem); }
.sign{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.05rem,2.6vw,1.3rem);
  margin:0;
  opacity:.95;
}
.fine{
  font-family:var(--sans);
  font-size:.82rem;
  letter-spacing:.02em;
  opacity:.66;
  margin:.5rem 0 0;
}

/* ---------------- Motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  .card:hover,.card:focus-within{ transform:none; }
  body{ background-attachment:scroll; }
}