/* ===== Voices of the Past — Sepia Theme ===== */
:root{
  --sepia-dark:#2c1810; --sepia-med:#8b6914; --sepia-light:#d4b896; --sepia-pale:#f5f1e8;
  --gold:#c9a876; --ink:#2d2d2d; --ink-dim:#666;
}
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Ubuntu,Helvetica,Arial; line-height:1.6; color:var(--ink);
  background:linear-gradient(135deg,var(--sepia-pale) 0%,#faf8f2 100%); overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Header */
header{position:sticky;top:0;z-index:100;background:rgba(245,241,232,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(139,105,20,.12)}
nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:48px;height:48px;border-radius:12px;object-fit:cover}
.brand-text h1{font-family:"Playfair Display",Georgia,serif;font-size:1.5rem;color:var(--sepia-dark);font-weight:700}
.brand-text .tagline{font-size:.9rem;color:var(--ink-dim)}
.nav-links{display:flex;gap:1.4rem;list-style:none}
.nav-link{position:relative;font-size:.95rem;text-decoration:none;color:var(--ink);font-weight:700}
.nav-link:hover{color:var(--sepia-med)}
.nav-link::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;
  background:linear-gradient(90deg,var(--sepia-med),var(--gold));transition:width .25s}
.nav-link:hover::after{width:100%}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:none;cursor:pointer;border-radius:3rem;padding:1rem 1.4rem;
  font-weight:800;text-decoration:none;font-size:1rem;transition:transform .15s, box-shadow .2s}
.btn-primary{background:linear-gradient(135deg,var(--sepia-med),var(--gold));color:#fff;box-shadow:0 4px 16px rgba(139,105,20,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(139,105,20,.4)}
.btn-secondary{background:rgba(139,105,20,.08);color:var(--sepia-dark);border:2px solid rgba(139,105,20,.2)}
.btn-secondary:hover{background:rgba(139,105,20,.16);transform:translateY(-1px)}

/* Utilities from earlier build to preserve layouts */
.grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:680px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;border-radius:22px;border:1px solid rgba(139,105,20,.12);
  background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.06);min-height:420px}
.card .cover{aspect-ratio:16/9;position:relative;overflow:hidden;background:#eee}
.card .cover img{width:100%;height:100%;object-fit:cover;display:block}
.card .body{flex:1;display:flex;flex-direction:column;gap:8px;padding:16px}
.card .body p{flex:1}
.tag{display:inline-block;background:rgba(139,105,20,.1);color:#6a5210;border-radius:999px;padding:.2rem .6rem;font-size:.8rem}

/* Story reading mode */
.story{max-width:68ch;margin:0 auto}
.story h1{font-family:"Playfair Display",Georgia,serif;font-size:2rem}
.story .meta{color:var(--ink-dim);font-size:.95rem}
.story-hero{margin:8px 0 18px; border-radius:20px; overflow:hidden; border:1px solid rgba(139,105,20,.12)}
.story-hero img{display:block;width:100%;height:auto}
.story .content p{font-size:18px; line-height:1.75; color:#2a2a2a}
.story .content p + p{margin-top:14px}
.dropcap:first-letter{float:left;font-family:"Playfair Display",Georgia,serif;font-size:3.2rem;line-height:.9;
  padding-right:8px;color:var(--sepia-med);font-weight:700}

/* Footer */
footer{background:var(--sepia-dark);color:#e9d8c3;padding:2.6rem 0 1.1rem;margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem;margin-bottom:1.4rem}
.footer h3{font-family:"Playfair Display",Georgia,serif;color:var(--gold);margin-bottom:.6rem}
.foot-links{list-style:none}
.foot-links a{color:#e9d8c3;text-decoration:none}
.foot-links a:hover{color:var(--gold)}
.foot-bottom{border-top:1px solid rgba(201,168,118,.25);padding-top:.8rem;text-align:center;opacity:.85}
@media (max-width: 980px){ .nav-links{display:none} }
\n
/* Contrast fix: outline buttons on dark CTA */
.cta .btn-secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.9)}
.cta .btn-secondary:hover{background:#fff;color:var(--sepia-dark);transform:translateY(-1px)}
\n
/* Contrast fix: outline-style buttons inside dark CTA */
.cta .btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.9)}
.cta .btn-outline:hover{background:#fff;color:var(--sepia-dark);transform:translateY(-1px)}


/* FORCE visible pill style for outline buttons on dark CTA */
.cta .btn-outline{
  display:inline-flex !important;
  align-items:center;
  gap:.5rem;
  background:transparent !important;
  color:#ffffff !important;
  border:2px solid #ffffff !important;
  border-radius:3rem !important;
  padding:1rem 1.4rem !important;
  box-shadow:none !important;
}
.cta .btn-outline:hover{
  background:#ffffff !important;
  color:var(--sepia-dark) !important;
  transform:translateY(-1px);
}


/* PayPal trust badge */
.pp-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;border:1px solid rgba(255,255,255,.55);
  border-radius:999px;padding:.35rem .6rem;color:#fff;opacity:.9}
.pp-badge img{height:14px;width:auto}
/* Light background variant */
.pp-badge.light{border-color:rgba(0,0,0,.25);color:#2c1810}
.btn-paypal{display:inline-flex;align-items:center;gap:.5rem}
.btn-paypal::before{content:"";width:18px;height:18px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M7 20l2-16h7a5 5 0 010 10H9l-1 6H7z"/></svg>') no-repeat center/contain}
.cta .pp-badge{border-color:rgba(255,255,255,.5);}

.buy-card{background:var(--sepia-pale,#f5f1e8);padding:14px;border:1px solid rgba(139,105,20,.15);border-radius:12px}