/* ==========================================================================
   Relics of War — shared stylesheet
   Jack Melton Editorial & Design Standard: Navy · Gold · Parchment · Rust
   ========================================================================== */
:root{
  --navy:#1a2436;
  --navy-deep:#0f1620;
  --gold:#c19a3e;
  --gold-bright:#d9b552;
  --parchment:#f4ecd8;
  --parchment-soft:#efe6cf;
  --rust:#8f3a1f;
  --ink:#22201a;
  --muted:#6b6455;
  --line:rgba(143,58,31,.16);
  --shadow:0 14px 34px rgba(26,36,54,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Crimson Text',Georgia,serif;
  color:var(--ink);
  background:var(--parchment);
  font-size:19px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:'Cinzel',serif;letter-spacing:.02em;line-height:1.2}
a{color:var(--rust);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.narrow{max-width:820px}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(15,22,32,.95);
  backdrop-filter:blur(6px);border-bottom:1px solid rgba(193,154,62,.35)}
.navbar{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font-family:'Cinzel Decorative',serif;font-weight:700;color:var(--parchment);
  font-size:1.3rem;letter-spacing:.06em}
.brand:hover{text-decoration:none}
.brand .mark{color:var(--gold)}
nav.links a{color:var(--parchment-soft);font-family:'Cinzel',serif;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;margin-left:1.9rem}
nav.links a:hover{color:var(--gold-bright);text-decoration:none}
@media(max-width:760px){nav.links a{margin-left:1.1rem;font-size:.68rem}.brand{font-size:1.05rem}}

/* ---------- Buttons ---------- */
.cta{display:inline-flex;align-items:center;gap:.6rem;background:var(--gold);
  color:var(--navy-deep);font-family:'Cinzel',serif;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:.8rem;padding:.95rem 2rem;border-radius:2px;
  border:none;cursor:pointer;transition:background .2s,transform .2s}
.cta:hover{background:var(--gold-bright);text-decoration:none;transform:translateY(-2px)}
.cta.ghost{background:transparent;color:var(--gold-bright);border:1px solid var(--gold)}
.cta.ghost:hover{background:rgba(193,154,62,.12)}
.cta.dark{background:var(--navy);color:var(--parchment)}
.cta.dark:hover{background:var(--navy-deep)}

/* ---------- Decorative rule ---------- */
.rule{width:120px;height:2px;background:var(--gold);margin:1.8rem auto;position:relative}
.rule::before,.rule::after{content:"";position:absolute;top:-3px;width:8px;height:8px;
  background:var(--gold);transform:rotate(45deg)}
.rule::before{left:-14px}.rule::after{right:-14px}
.eyebrow{font-family:'Cinzel',serif;letter-spacing:.28em;text-transform:uppercase;
  font-size:.72rem;color:var(--rust)}

/* ---------- Hero ---------- */
.hero{position:relative;color:var(--parchment);text-align:center;
  background:linear-gradient(rgba(15,22,32,.84),rgba(15,22,32,.92)),
    radial-gradient(circle at 20% 20%,rgba(193,154,62,.18),transparent 55%),var(--navy-deep);
  padding:clamp(4rem,10vw,7rem) 0;border-bottom:3px solid var(--gold)}
.hero .eyebrow{color:var(--gold-bright)}
.hero h1{font-size:clamp(2.3rem,6vw,4rem);color:var(--parchment);text-shadow:0 2px 20px rgba(0,0,0,.4)}
.hero h1 .amp{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;
  color:var(--gold-bright);text-transform:none}
.hero .lede{font-family:'Playfair Display',serif;font-size:clamp(1.1rem,2.4vw,1.4rem);
  font-style:italic;color:var(--parchment-soft);max-width:680px;margin:0 auto 2.2rem}

/* ---------- Sections ---------- */
section{padding:clamp(3rem,7vw,5.5rem) 0}
.section-head{text-align:center;margin-bottom:2.6rem}
.section-head h2{font-size:clamp(1.8rem,4vw,2.5rem);color:var(--navy)}
.section-head p{color:var(--muted);max-width:640px;margin:1rem auto 0;font-size:1.1rem}
.alt{background:var(--parchment-soft)}

/* ---------- Category grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.grid,.grid.two{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);
  padding:1.9rem 1.7rem;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);text-decoration:none}
.card .num{font-family:'Cinzel Decorative',serif;color:var(--gold);font-size:1.2rem;
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--gold);border-radius:50%;margin-bottom:1.1rem}
.card h3{font-size:1.14rem;color:var(--navy);margin-bottom:.5rem}
.card p{color:var(--muted);font-size:1rem;flex:1}
.card .go{margin-top:1rem;font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rust)}

/* ---------- Article / guide ---------- */
.breadcrumb{font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:1.4rem 0 0}
.breadcrumb a{color:var(--rust)}
article{padding:2rem 0 4rem}
article h1{font-size:clamp(2rem,4.5vw,3rem);color:var(--navy);margin:.6rem 0 1rem}
article .standfirst{font-family:'Playfair Display',serif;font-style:italic;font-size:1.28rem;
  color:#39342a;margin-bottom:2rem}
article h2{font-size:1.6rem;color:var(--navy);margin:2.6rem 0 1rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--line)}
article h3{font-size:1.2rem;color:var(--rust);margin:1.8rem 0 .6rem}
article p{margin-bottom:1.1rem}
article ul,article ol{margin:0 0 1.2rem 1.3rem}
article li{margin-bottom:.5rem}
article strong{color:var(--navy)}

/* Quick-ID summary box */
.quickid{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);
  padding:1.6rem 1.8rem;margin:2rem 0;box-shadow:var(--shadow)}
.quickid h3{margin-top:0;color:var(--navy);font-family:'Cinzel',serif;font-size:1.05rem;
  letter-spacing:.08em;text-transform:uppercase}
.quickid dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;margin-top:.8rem}
.quickid dt{font-weight:600;color:var(--rust);font-family:'Cinzel',serif;font-size:.82rem;
  letter-spacing:.04em;text-transform:uppercase;padding-top:.15rem}
.quickid dd{margin:0}

/* Real vs fake — the moat callout */
.authbox{background:linear-gradient(135deg,#241a12,#0f1620);color:var(--parchment);
  border:1px solid rgba(193,154,62,.4);border-radius:3px;padding:2rem 2.1rem;margin:2.4rem 0;
  box-shadow:var(--shadow)}
.authbox h2{color:var(--gold-bright);border:none;margin-top:0}
.authbox h3{color:var(--gold-bright)}
.authbox strong{color:#fff}
.authbox .tell{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:.9rem}
.authbox .tell .flag{font-family:'Cinzel Decorative',serif;color:var(--gold);flex:none;
  border:1px solid var(--gold);border-radius:50%;width:26px;height:26px;display:flex;
  align-items:center;justify-content:center;font-size:.8rem;margin-top:.15rem}
.authbox a{color:var(--gold-bright)}

/* Photo placeholder frames (Jack swaps in real images) */
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin:1.6rem 0}
figure.plate{background:#fff;border:1px solid var(--line);padding:.9rem;box-shadow:var(--shadow)}
figure.plate .ph{aspect-ratio:4/3;background:
  repeating-linear-gradient(45deg,#efe6cf,#efe6cf 12px,#e7dcc0 12px,#e7dcc0 24px);
  border:1px dashed var(--gold);display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;text-align:center;padding:1rem}
figure.plate img{aspect-ratio:4/3;object-fit:cover}
figure.plate figcaption{font-size:.92rem;color:var(--muted);margin-top:.7rem;font-style:italic}

/* FAQ */
.faq{margin-top:1rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:2px;
  padding:1rem 1.3rem;margin-bottom:.8rem}
.faq summary{font-family:'Cinzel',serif;font-size:1rem;color:var(--navy);cursor:pointer;
  letter-spacing:.02em}
.faq summary::marker{color:var(--gold)}
.faq details[open] summary{color:var(--rust);margin-bottom:.7rem}

/* Inline submit CTA band */
.submitband{background:var(--navy);color:var(--parchment);text-align:center;
  border-top:3px solid var(--gold);border-bottom:3px solid var(--gold)}
.submitband h2{color:var(--parchment);border:none}
.submitband p{color:var(--parchment-soft);max-width:560px;margin:1rem auto 1.8rem}

/* Editor note (only Jack sees; subtle) */
.edit-note{background:#fff8e6;border:1px dashed var(--gold);color:#6b5a26;
  font-size:.9rem;padding:.7rem 1rem;margin:1rem 0;border-radius:2px}

/* ---------- Forms ---------- */
.formcard{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);
  padding:2.2rem;box-shadow:var(--shadow);max-width:720px;margin:0 auto}
.field{margin-bottom:1.3rem}
.field label{display:block;font-family:'Cinzel',serif;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);margin-bottom:.4rem}
.field input,.field textarea,.field select{width:100%;padding:.8rem 1rem;border:1px solid var(--line);
  border-radius:2px;font-family:'Crimson Text',serif;font-size:1rem;background:var(--parchment)}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:.85rem;color:var(--muted);margin-top:.35rem}

/* ---------- Footer ---------- */
footer.site{background:var(--navy-deep);color:var(--parchment-soft);padding:3rem 0 2rem;
  border-top:3px solid var(--gold);text-align:center}
footer .brand{display:inline-block;margin-bottom:1rem}
footer .meta{font-size:.95rem;line-height:1.8}
footer .meta a{color:var(--gold-bright)}
footer .fine{margin-top:1.5rem;font-size:.78rem;color:rgba(244,236,216,.45);
  font-family:'Cinzel',serif;letter-spacing:.08em}
.badge{display:inline-block;margin-bottom:1.6rem;font-family:'Cinzel',serif;letter-spacing:.2em;
  text-transform:uppercase;font-size:.7rem;color:var(--gold-bright);
  border:1px solid rgba(193,154,62,.4);padding:.4rem 1rem;border-radius:2px}