/* ───────────────────────────────────────────────
   République de Valcour — Codex / Archive officielle
   Atlas-archive aesthetic: parchment, inscriptional
   caps, red & gold rules. Île Noire = anthracite.
   ─────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Marcellus+SC&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap");

:root{
  --paper:#efe7d5;
  --paper-2:#e7dcc4;
  --paper-edge:#d8cbac;
  --ink:#241d14;
  --ink-soft:#473c2c;
  --ink-faint:#6c6049;
  --rule:rgba(36,29,20,.20);
  --rule-soft:rgba(36,29,20,.10);

  --red-h:25;            /* tweakable hue */
  --red:oklch(0.52 0.16 var(--red-h));
  --red-deep:oklch(0.42 0.15 var(--red-h));
  --gold:#9a7b3f;
  --gold-soft:#b9985326;

  --ink-dark:#0f0f11;       /* Île Noire surfaces */
  --anthracite:#26262b;
  --anthracite-2:#1a1a1e;
  --cream:#d7d1c4;
  --cream-faint:#8d887d;
  --steel:#9aa0a6;

  --serif:"EB Garamond",Georgia,serif;
  --inscr:"Marcellus",Georgia,serif;
  --inscr-sc:"Marcellus SC","Marcellus",Georgia,serif;

  --measure:64ch;
  --gut:clamp(20px,5vw,80px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(17px,1.15vw,21px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Parchment grain + vignette layered on body */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,250,238,.55), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(70,55,30,.16), transparent 55%);
  mix-blend-mode:multiply;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-grain="off"] body::after{display:none;}

.wrap{position:relative;z-index:1;}

/* ── Type helpers ── */
.eyebrow{
  font-family:var(--inscr-sc);
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--red);margin:0;
}
.kicker{
  font-family:var(--inscr-sc);
  font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ink-faint);
}
h1,h2,h3{font-family:var(--inscr);font-weight:400;margin:0;line-height:1.04;}
p{margin:0 0 1.1em;max-width:var(--measure);}
a{color:inherit;}

/* Ornamental centered rule with a lozenge */
.rule{
  display:flex;align-items:center;justify-content:center;gap:14px;
  color:var(--red);margin:0 auto;
}
.rule::before,.rule::after{
  content:"";height:1px;width:min(120px,18vw);
  background:linear-gradient(90deg,transparent,var(--rule),transparent);
}
.rule i{width:7px;height:7px;transform:rotate(45deg);background:var(--red);display:block;}

/* ── Section scaffolding ── */
section{padding:clamp(70px,9vw,140px) var(--gut);position:relative;}
.sec-head{text-align:center;max-width:760px;margin:0 auto clamp(40px,5vw,72px);}
.sec-head .eyebrow{margin-bottom:18px;}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:.4em;}
.sec-head p{margin:0 auto;color:var(--ink-soft);}
.sec-num{
  position:absolute;top:clamp(28px,5vw,52px);left:var(--gut);
  font-family:var(--inscr-sc);font-size:.66rem;letter-spacing:.3em;
  color:var(--ink-faint);
}
.alt{background:var(--paper-2);}
.alt::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--rule-soft);}

/* ───────── HERO ───────── */
.hero{
  min-height:100vh;display:grid;align-content:center;
  padding:clamp(60px,8vw,90px) var(--gut);position:relative;overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.hero-frame{
  position:absolute;inset:clamp(18px,2.4vw,34px);pointer-events:none;
  border:1px solid var(--rule);
}
.hero-frame::before{
  content:"";position:absolute;inset:6px;border:1px solid var(--rule-soft);
}
.hero-inner{position:relative;display:grid;gap:clamp(20px,3vw,36px);width:100%;}
.hero-kicker{justify-self:center;}
.hero-title{
  font-family:var(--inscr);
  font-size:clamp(2.6rem,8.5vw,7rem);letter-spacing:.02em;line-height:.98;
  text-wrap:balance;
}
.hero-title .amp{color:var(--red);}
.hero-sub{
  font-style:italic;color:var(--ink-soft);
  font-size:clamp(1.05rem,2.2vw,1.7rem);
}
.hero-lede{color:var(--ink-soft);max-width:54ch;}
.hero-blason{display:block;}
.hero-blason img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 18px 34px rgba(40,30,15,.26));}
.hero-flag img{width:100%;height:auto;display:block;
  background:#fcf9f1;padding:16px;border:1px solid var(--paper-edge);
  box-shadow:0 16px 36px rgba(40,30,15,.18),inset 0 0 0 4px #fff;}
.hero-emblems{display:flex;gap:clamp(16px,3vw,34px);align-items:center;}
.hero-emblems img{height:clamp(40px,6vw,72px);width:auto;
  filter:drop-shadow(0 6px 14px rgba(40,30,15,.18));}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,46px);
  font-family:var(--inscr-sc);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-faint);
}
.hero-meta b{display:block;color:var(--ink);font-size:.86rem;letter-spacing:.16em;margin-top:5px;}
.scroll-cue{
  position:absolute;bottom:clamp(26px,4vw,46px);left:50%;transform:translateX(-50%);
  font-family:var(--inscr-sc);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-cue span{display:block;width:1px;height:34px;background:linear-gradient(var(--red),transparent);animation:cue 2.4s var(--ease,ease) infinite;}
@keyframes cue{0%{opacity:.2;transform:scaleY(.4);transform-origin:top;}50%{opacity:1;transform:scaleY(1);}100%{opacity:.2;transform:scaleY(.4);transform-origin:bottom;}}

/* Variant A — SCEAU (centered, symmetric) */
[data-hero="seal"] .hero-inner{justify-items:center;text-align:center;max-width:880px;margin:0 auto;}
[data-hero="seal"] .hero-artcol{order:-1;justify-items:center;}
[data-hero="seal"] .hero-blason{width:clamp(150px,18vw,220px);}
[data-hero="seal"] .hero-flag,[data-hero="seal"] .hero-emblems{display:none;}

/* Variant B — ATLAS (two-column) */
[data-hero="atlas"] .hero-inner{
  grid-template-columns:1.2fr .8fr;align-items:center;
  column-gap:clamp(30px,6vw,90px);max-width:1240px;margin:0 auto;text-align:left;
}
[data-hero="atlas"] .hero-kicker{justify-self:start;}
[data-hero="atlas"] .hero-textcol{grid-column:1;display:grid;gap:clamp(18px,2.6vw,30px);}
[data-hero="atlas"] .hero-artcol{grid-column:2;display:grid;gap:24px;justify-items:center;}
[data-hero="atlas"] .hero-blason{width:clamp(180px,20vw,280px);}
[data-hero="atlas"] .hero-flag{display:none;}
[data-hero="atlas"] .hero-emblems{display:none;}

/* Variant C — FRONTISPICE (emblems flank big title) */
[data-hero="frontispiece"] .hero-inner{justify-items:center;text-align:center;max-width:1000px;margin:0 auto;}
[data-hero="frontispiece"] .hero-emblems{order:-1;}
[data-hero="frontispiece"] .hero-blason{width:clamp(110px,12vw,150px);}
[data-hero="frontispiece"] .hero-flag{display:none;}
[data-hero="frontispiece"] .hero-lede{display:none;}

/* ───────── INTRO ───────── */
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,6vw,86px);align-items:center;max-width:1180px;margin:0 auto;}
.lede{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.5;color:var(--ink-soft);}
.dropcap::first-letter{
  font-family:var(--inscr);float:left;font-size:3.4em;line-height:.72;
  padding:.06em .12em 0 0;color:var(--red);
}
.map-plate{
  position:relative;border:1px solid var(--rule);background:var(--paper);
  padding:14px;box-shadow:0 18px 40px rgba(40,30,15,.14);
}
.map-plate image-slot{display:block;width:100%;height:clamp(280px,34vw,420px);}
.map-cap{display:flex;justify-content:space-between;margin-top:10px;
  font-family:var(--inscr-sc);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);}

/* ───────── DEUX ÎLES diptych ───────── */
.diptych{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:1240px;margin:0 auto;border:1px solid var(--rule);}
.isle{padding:clamp(34px,4vw,58px);display:grid;gap:18px;align-content:start;}
.isle .tag{font-family:var(--inscr-sc);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;}
.isle h3{font-size:clamp(1.7rem,3vw,2.5rem);}
.isle .stat{font-family:var(--inscr);font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:var(--red);}
.isle p{color:var(--ink-soft);}
.isle--gv{background:var(--paper);}
.isle--gv .tag{color:var(--red);}
.isle--in{background:var(--ink-dark);color:var(--cream);border-left:1px solid var(--rule);}
.isle--in .tag{color:var(--steel);}
.isle--in h3{color:#fff;}
.isle--in .stat{color:var(--steel);}
.isle--in p{color:var(--cream-faint);}
.isle--in .martial{color:#c9504e;}

/* ───────── DRAPEAUX & BLASONS ───────── */
.flags{display:grid;gap:clamp(28px,4vw,48px);max-width:1180px;margin:0 auto;}
.flagcard{
  display:grid;grid-template-columns:minmax(180px,300px) 1fr;
  gap:clamp(28px,4vw,56px);align-items:center;
  border:1px solid var(--rule);padding:clamp(26px,3.4vw,48px);background:var(--paper);
}
.flagcard.rev{grid-template-columns:1fr minmax(180px,300px);}
.flagcard.rev .flagart{order:2;}
.flagart{display:grid;gap:16px;justify-items:center;}
.flagart img{width:100%;max-width:300px;height:auto;display:block;
  background:#fcf9f1;padding:14px;border:1px solid var(--paper-edge);
  box-shadow:0 14px 30px rgba(40,30,15,.16),inset 0 0 0 4px #fff;}
.flagart img.crest{background:none;padding:0;border:none;box-shadow:none;max-width:230px;
  filter:drop-shadow(0 14px 30px rgba(40,30,15,.24));}
.flagcard--dark .flagart img.crest{
  background:radial-gradient(125% 125% at 50% 30%,#55555f,#3a3a42);
  padding:22px;border:1px solid rgba(184,150,80,.42);
  box-shadow:0 18px 36px rgba(0,0,0,.55);filter:none;max-width:260px;}
.flagart .pair{display:flex;gap:18px;}
.flagart .pair img{width:auto;height:clamp(46px,6vw,70px);max-width:none;padding:9px;box-shadow:0 6px 16px rgba(40,30,15,.14),inset 0 0 0 3px #fff;}
.flagtext h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:.5em;}
.flagtext .eyebrow{margin-bottom:14px;}
.symbol{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-top:8px;}
.symbol dt{font-family:var(--inscr-sc);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);padding-top:.35em;}
.symbol dd{margin:0 0 .6em;color:var(--ink-soft);font-size:.94em;}
.flagcard--dark{background:var(--ink-dark);color:var(--cream);border-color:#33333a;}
.flagcard--dark .flagtext h3{color:#fff;}
.flagcard--dark .eyebrow,.flagcard--dark .symbol dt{color:var(--steel);}
.flagcard--dark .flagtext p,.flagcard--dark .symbol dd{color:var(--cream-faint);}

/* ───────── PROFIL data grid ───────── */
.profil{max-width:1120px;margin:0 auto;border-top:1px solid var(--rule);border-left:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(4,1fr);}
.fact{padding:clamp(22px,2.6vw,34px);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.fact dt{font-family:var(--inscr-sc);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;}
.fact dd{margin:0;font-family:var(--inscr);font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.1;color:var(--ink);}
.fact dd small{display:block;font-family:var(--serif);font-size:.6em;color:var(--ink-faint);margin-top:6px;letter-spacing:0;}
.fact.span2{grid-column:span 2;}

/* ───────── VILLES ───────── */
.cities{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px);max-width:1180px;margin:0 auto;}
.city{border:1px solid var(--rule);background:var(--paper);padding:clamp(26px,3vw,40px);display:grid;gap:14px;align-content:start;}
.city .rank{font-family:var(--inscr-sc);font-size:.64rem;letter-spacing:.3em;color:var(--red);text-transform:uppercase;}
.city h3{font-size:clamp(1.5rem,2.6vw,2rem);}
.city .pop{font-family:var(--inscr);font-size:clamp(1.7rem,3vw,2.3rem);color:var(--ink);line-height:1;}
.city .pop small{font-family:var(--serif);font-size:.42em;color:var(--ink-faint);letter-spacing:.04em;display:block;margin-top:6px;}
.city p{color:var(--ink-soft);font-size:.96em;margin:0;}

/* ───────── HISTOIRE timeline ───────── */
.timeline{max-width:880px;margin:0 auto;position:relative;padding-left:clamp(46px,6vw,72px);}
.timeline::before{content:"";position:absolute;left:clamp(12px,2vw,22px);top:6px;bottom:6px;width:1px;background:linear-gradient(var(--red),var(--rule) 30%,var(--rule) 70%,var(--red));}
.tl{position:relative;padding:0 0 clamp(38px,4.6vw,60px);}
.tl:last-child{padding-bottom:0;}
.tl::before{content:"";position:absolute;left:calc(-1*clamp(46px,6vw,72px) + clamp(12px,2vw,22px) - 6px);top:.35em;
  width:13px;height:13px;transform:rotate(45deg);background:var(--paper);border:1.5px solid var(--red);}
.tl .yr{font-family:var(--inscr);font-size:clamp(1.4rem,2.6vw,2rem);color:var(--red);line-height:1;}
.tl h3{font-size:clamp(1.15rem,2vw,1.5rem);margin:.25em 0 .4em;}
.tl p{color:var(--ink-soft);margin-bottom:0;}
.tl.dark .yr{color:var(--ink-soft);}
.tl.dark::before{border-color:var(--ink-soft);}

/* ───────── CULTURE ───────── */
.culture{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start;}
.culture .lede{margin:0;}
.names{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
.names span{font-family:var(--inscr);border:1px solid var(--rule);padding:8px 18px;font-size:1.05rem;background:var(--paper);}

/* ───────── FOOTER ───────── */
.foot{padding:clamp(50px,6vw,90px) var(--gut);text-align:center;background:var(--ink-dark);color:var(--cream);}
.foot .rule::before,.foot .rule::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);}
.foot .rule i{background:var(--steel);}
.foot h3{font-size:clamp(1.4rem,3vw,2rem);color:#fff;margin:22px 0 10px;}
.foot p{color:var(--cream-faint);margin:0 auto;}
.foot .blz{height:170px;width:auto;margin:0 auto;display:block;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.55));}

/* reveal on scroll */
.rise{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease,cubic-bezier(.2,.8,.2,1)),transform .9s var(--ease,cubic-bezier(.2,.8,.2,1));}
.rise.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none;}.scroll-cue span{animation:none;}}

/* ───────── responsive ───────── */
@media (max-width:880px){
  [data-hero="atlas"] .hero-inner{grid-template-columns:1fr;text-align:center;}
  [data-hero="atlas"] .hero-kicker{justify-self:center;}
  [data-hero="atlas"] .hero-textcol,[data-hero="atlas"] .hero-artcol{grid-column:1;justify-items:center;}
  .intro-grid,.culture{grid-template-columns:1fr;}
  .diptych{grid-template-columns:1fr;}
  .isle--in{border-left:none;border-top:1px solid var(--rule);}
  .flagcard,.flagcard.rev{grid-template-columns:1fr;}
  .flagcard.rev .flagart{order:0;}
  .profil{grid-template-columns:repeat(2,1fr);}
  .cities{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .profil{grid-template-columns:1fr;}
  .fact.span2{grid-column:span 1;}
}