:root{
  --bg:#eee6d8;
  --bg-2:#e7dfd0;
  --ink:#1e1b16;
  --ink-soft:#44403a;
  --ink-dim:#7a7366;
  --accent:#c47a67;       /* warm terracotta for subtitles */
  --sage:#8a9480;
  --card:#f3ecdd;
  --card-hi:#faf4e6;
  --stroke:#d8cfbd;
  --play:#1a1713;
  --play-ring:rgba(26,23,19,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased}
body{min-height:100vh;padding:0 clamp(16px,4vw,48px) 80px}

/* subtle paper grain */
.grain{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
}

/* HERO */
.hero{max-width:980px;margin:0 auto;padding:90px 16px 60px;text-align:center}
.eyebrow{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:15px;color:var(--ink-soft);letter-spacing:.02em}
.eyebrow span{color:var(--ink-dim);margin:0 .5em}
.hero h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(56px,9vw,108px);line-height:1;letter-spacing:-.02em;margin:18px 0 22px}
.hero h1 em{font-style:italic;color:var(--sage);font-weight:400}
.rule{width:1px;height:36px;background:var(--ink);margin:6px auto 26px;opacity:.75}
.lede{max-width:560px;margin:0 auto;color:var(--ink-soft);font-size:17px;line-height:1.6}

/* DECK */
.deck{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:18px}

/* CARD */
.card{
  position:relative;
  display:grid;
  grid-template-columns:140px 1fr auto;
  align-items:center;
  gap:32px;
  background:linear-gradient(180deg,var(--card-hi),var(--card));
  border-radius:12px;
  padding:34px 36px 34px 44px;
  box-shadow:0 1px 0 rgba(0,0,0,.03), 0 20px 40px -28px rgba(0,0,0,.18);
  transition:transform .25s ease, box-shadow .25s ease, background .3s;
  overflow:hidden;
}
.card:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(0,0,0,.03), 0 30px 50px -28px rgba(0,0,0,.26)}

.accent{position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);opacity:.55;transition:opacity .3s, background .3s}
.card[data-state="playing"] .accent{opacity:1}
.card[data-state="playing"]{background:linear-gradient(180deg,#fbf5e8,#f3ecdd)}

/* day / number */
.num-col{text-align:center}
.num{font-family:'Fraunces',serif;font-weight:400;font-size:64px;line-height:1;color:var(--ink);letter-spacing:-.02em}
.day{font-family:'Fraunces',serif;font-style:italic;font-size:14px;color:var(--ink-dim);margin-top:8px;letter-spacing:.04em}

/* meta */
.meta{min-width:0}
.title{font-family:'Fraunces',serif;font-weight:500;font-size:28px;letter-spacing:-.01em;line-height:1.15;color:var(--ink)}
.sub{font-family:'Fraunces',serif;font-style:italic;color:var(--accent);margin-top:6px;font-size:15px}
.desc{color:var(--ink-soft);margin-top:10px;font-size:15px;max-width:58ch}
.timebar{position:relative;height:2px;background:rgba(26,23,19,.10);border-radius:2px;margin-top:16px;overflow:hidden;opacity:0;transition:opacity .3s}
.timebar .fill{position:absolute;inset:0 auto 0 0;width:0%;background:var(--ink);border-radius:2px}
.time{font-family:'Fraunces',serif;font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-dim);margin-top:8px;opacity:0;transition:opacity .3s}
.time .dim{color:var(--ink-dim);opacity:.7}
.card[data-state="playing"] .timebar,
.card[data-state="playing"] .time,
.card[data-state="paused"] .timebar,
.card[data-state="paused"] .time{opacity:1}

/* PLAY BUTTON */
.play{
  position:relative;
  width:82px;height:82px;
  background:var(--play);color:#fff;
  border:none;border-radius:50%;
  cursor:pointer;
  display:grid;place-items:center;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 12px 24px -14px rgba(0,0,0,.55);
}
.play:hover{transform:scale(1.04)}
.play:active{transform:scale(.98)}
.play .viz{
  position:absolute;inset:-46px;         /* extends beyond the pill */
  width:calc(100% + 92px);height:calc(100% + 92px);
  pointer-events:none;opacity:0;transition:opacity .4s ease;
}
.card[data-state="playing"] .play .viz,
.card[data-state="paused"]  .play .viz{opacity:1}
.play .icon{width:30px;height:30px;fill:currentColor;position:relative;z-index:1}
.ico-pause{display:none}
.card[data-state="playing"] .ico-play{display:none}
.card[data-state="playing"] .ico-pause{display:block}

/* FOOTER */
.foot{max-width:980px;margin:70px auto 0;text-align:center;color:var(--ink-dim);font-size:13px}
.foot .credit{margin-top:6px}
.foot .credit a{color:var(--ink-soft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.foot .credit a:hover{color:var(--ink)}
.foot .dim{opacity:.7;margin-top:4px;font-family:'Fraunces',serif;font-style:italic}

/* MOBILE */
@media (max-width:720px){
  .hero{padding:56px 8px 40px}
  .card{grid-template-columns:72px 1fr auto;gap:16px;padding:22px 18px 22px 22px}
  .num{font-size:40px}
  .day{font-size:12px}
  .title{font-size:21px}
  .desc{font-size:14px}
  .play{width:64px;height:64px}
  .play .icon{width:24px;height:24px}
}