/* =========================================================
   Self-hosted fonts (offline-ready)
   ========================================================= */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/newsreader-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/newsreader-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/newsreader-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/newsreader-latin-400-italic.woff2") format("woff2");}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/newsreader-latin-500-italic.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");}

/* =========================================================
   BFEX — Bureau de Finance & d'Échanges
   Design system : "Ledger vert bouteille + laiton"
   ========================================================= */

:root{
  /* Palette */
  --forest:   #0E2A22;
  --forest-2: #123A2D;
  --forest-3: #0A201A;
  --bone:     #F4F1E8;
  --bone-2:   #ECE6D7;
  --ink:      #142019;
  --ink-soft: #3A463F;
  --brass:    #C9A24B;
  --brass-d:  #A6812F;
  --sage:     #5E7368;
  --sage-2:   #8C9A92;
  --up:       #2F8159;
  --down:     #C25A45;
  --line:     rgba(20,32,25,.14);
  --line-d:   rgba(244,241,232,.16);

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  /* Scale */
  --step--1: clamp(.78rem,.74rem + .2vw,.86rem);
  --step-0:  clamp(1rem,.96rem + .2vw,1.075rem);
  --step-1:  clamp(1.2rem,1.1rem + .5vw,1.4rem);
  --step-2:  clamp(1.5rem,1.3rem + 1vw,1.95rem);
  --step-3:  clamp(2rem,1.6rem + 2vw,3rem);
  --step-4:  clamp(2.7rem,2rem + 3.6vw,5rem);
  --step-5:  clamp(3.4rem,2.2rem + 5.5vw,7rem);

  --wrap: 1200px;
  --gutter: clamp(1.1rem,4vw,2.5rem);
  --radius: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--brass); color:var(--forest-3); }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.012em;
  margin:0;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

/* eyebrow / mono labels */
.eyebrow{
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  color:var(--sage);
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--brass);
  flex:none;
}
.on-dark .eyebrow,.eyebrow.light{ color:var(--brass); }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--forest); --fg:var(--bone);
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:600; font-size:var(--step--1);
  letter-spacing:.02em;
  padding:.85em 1.5em;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bg);
  border-radius:100px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn .arr{ transition:transform .25s ease; }
.btn:hover .arr{ transform:translateX(4px); }
.btn--brass{ --bg:var(--brass); --fg:var(--forest-3); border-color:var(--brass); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line); }
.on-dark .btn--ghost{ --fg:var(--bone); border-color:var(--line-d); }
.btn--ghost:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.on-dark .btn--ghost:hover{ background:var(--bone); color:var(--forest-3); border-color:var(--bone); }

/* =========================================================
   Ticker tape
   ========================================================= */
.tape{
  background:var(--forest-3);
  color:var(--bone);
  border-bottom:1px solid var(--line-d);
  overflow:hidden;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.04em;
}
.tape__track{
  display:inline-flex;
  white-space:nowrap;
  padding-block:.5rem;
  animation:scroll-tape 38s linear infinite;
  will-change:transform;
}
.tape:hover .tape__track{ animation-play-state:paused; }
.tape__item{ padding-inline:1.4rem; display:inline-flex; gap:.55rem; align-items:center; }
.tape__item b{ font-weight:600; letter-spacing:.06em; }
.tape__up{ color:#7fd0a4; }
.tape__down{ color:#e89a87; }
@keyframes scroll-tape{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .tape__track{ animation:none; } }

/* =========================================================
   Header / nav
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--bone) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; height:72px;
}
.brand{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.55rem;
  letter-spacing:-.02em;
  text-decoration:none;
  color:var(--ink);
  display:inline-flex; align-items:baseline; gap:.05em;
}
.brand span{ color:var(--brass); }
.brand small{
  font-family:var(--mono); font-size:.5rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--sage); margin-left:.55rem;
  transform:translateY(-.3em);
}
.nav__links{ display:flex; align-items:center; gap:.4rem; list-style:none; margin:0; padding:0; }
.nav__links a{
  text-decoration:none; color:var(--ink-soft);
  font-size:.92rem; font-weight:500;
  padding:.55em .9em; border-radius:8px;
  transition:color .2s ease, background .2s ease;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--ink); background:var(--bone-2); }
.nav__cta{ display:flex; align-items:center; gap:.8rem; }
.nav__burger{
  display:none; background:none; border:0; cursor:pointer;
  width:42px;height:42px; padding:0; color:var(--ink);
}
.nav__burger svg{ width:26px;height:26px; }

@media (max-width:900px){
  .nav__links{
    position:fixed; inset:0 0 0 30%;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:.4rem; padding:2rem;
    background:var(--forest); 
    transform:translateX(100%); transition:transform .35s cubic-bezier(.7,0,.2,1);
  }
  .nav__links a{ color:var(--bone); font-size:1.4rem; font-family:var(--serif); }
  .nav__links a:hover{ background:var(--forest-2); color:var(--brass); }
  body.menu-open .nav__links{ transform:translateX(0); }
  .nav__burger{ display:inline-flex; align-items:center; justify-content:center; z-index:70; }
  body.menu-open .nav__burger{ color:var(--bone); }
  .nav__cta .btn{ display:none; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  background:var(--forest);
  color:var(--bone);
  overflow:hidden;
  isolation:isolate;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(201,162,75,.16), transparent 55%),
    radial-gradient(100% 120% at 0% 100%, rgba(47,129,89,.18), transparent 50%);
}
.hero__grid{ position:absolute; inset:0; z-index:-1; opacity:.5; }
.hero__inner{ padding-block:clamp(3.5rem,8vw,7rem); position:relative; }
.hero__lead{ max-width:62rem; }
.hero h1{
  font-size:var(--step-5);
  font-weight:500;
  margin-top:1.4rem;
  letter-spacing:-.022em;
}
.hero h1 em{ font-style:italic; color:var(--brass); }
.hero__sub{
  margin-top:1.6rem; max-width:40rem;
  font-size:var(--step-1);
  color:rgba(244,241,232,.82);
  line-height:1.5;
}
.hero__actions{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:1rem; }
.hero__stats{
  margin-top:clamp(2.8rem,6vw,4.5rem);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line-d);
  border:1px solid var(--line-d); border-radius:var(--radius); overflow:hidden;
}
.stat{ background:var(--forest); padding:1.6rem 1.5rem; }
.stat__num{ font-family:var(--mono); font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:600; color:var(--bone); line-height:1; }
.stat__num span{ color:var(--brass); }
.stat__lbl{ margin-top:.6rem; font-size:.82rem; color:var(--sage-2); letter-spacing:.02em; }
@media (max-width:680px){ .hero__stats{ grid-template-columns:1fr; } }

/* =========================================================
   Section scaffolding
   ========================================================= */
.band{ padding-block:clamp(3.5rem,7vw,6rem); }
.band--bone2{ background:var(--bone-2); }
.band--forest{ background:var(--forest); color:var(--bone); }
.band__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; margin-bottom:2.6rem;
}
.band__head h2{ font-size:var(--step-3); max-width:18ch; margin-top:.7rem; }
.band__head p{ max-width:34ch; color:var(--ink-soft); margin:.3rem 0 0; }
.band--forest .band__head p{ color:rgba(244,241,232,.72); }
.link-more{
  font-family:var(--mono); font-size:var(--step--1); letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--brass); padding-bottom:.25em;
  transition:gap .2s; display:inline-flex; gap:.5em; align-items:center;
}
.band--forest .link-more{ color:var(--bone); }
.link-more:hover{ color:var(--brass-d); }

/* =========================================================
   Article cards / feed
   ========================================================= */
.feed{ display:grid; gap:1.6rem; }
.feed--lede{ grid-template-columns:1.15fr 1fr; }
.feed--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .feed--lede,.feed--3{ grid-template-columns:1fr; } }

.card{
  position:relative;
  background:var(--bone);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s;
}
.band--bone2 .card{ background:var(--bone); }
.card:hover{ transform:translateY(-5px); box-shadow:0 22px 48px -28px rgba(20,32,25,.45); border-color:var(--brass); }
.card__art{ aspect-ratio:16/10; position:relative; overflow:hidden; }
.card__art svg{ width:100%; height:100%; display:block; }
.card__num{
  position:absolute; top:14px; left:16px; z-index:2;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.12em;
  color:var(--bone); background:rgba(10,32,26,.55); padding:.35em .7em;
  border-radius:100px; backdrop-filter:blur(4px);
}
.card__body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.card__cat{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-d); font-weight:500;
}
.card h3{ font-size:var(--step-1); line-height:1.12; letter-spacing:-.01em; }
.card--lede h3{ font-size:var(--step-2); }
.card__dek{ color:var(--ink-soft); font-size:.95rem; margin:0; }
.card__meta{
  margin-top:auto; display:flex; gap:1rem; align-items:center;
  font-family:var(--mono); font-size:.74rem; color:var(--sage); letter-spacing:.04em;
  padding-top:.4rem; border-top:1px solid var(--line);
}

/* =========================================================
   "Méthode" feature
   ========================================================= */
.method{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:900px){ .method{ grid-template-columns:1fr; } }
.method__list{ list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:1.4rem; }
.method__list li{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; }
.method__n{ font-family:var(--mono); font-size:.85rem; color:var(--brass); padding-top:.2rem; }
.method__list h4{ font-family:var(--sans); font-weight:700; font-size:1.05rem; margin:0 0 .25rem; }
.method__list p{ margin:0; color:var(--ink-soft); font-size:.95rem; }
.method__viz{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--forest); }
.method__viz svg{ width:100%; height:100%; display:block; }

/* =========================================================
   Resources / partners (lien contextuel)
   ========================================================= */
.res{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media (max-width:760px){ .res{ grid-template-columns:1fr; } }
.res__card{
  border:1px solid var(--line-d); border-radius:var(--radius);
  padding:1.7rem 1.6rem; background:var(--forest-2);
  text-decoration:none; color:var(--bone); display:flex; flex-direction:column; gap:.6rem;
  transition:transform .3s ease, border-color .3s;
}
.res__card:hover{ transform:translateY(-4px); border-color:var(--brass); }
.res__k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); }
.res__card h4{ font-family:var(--serif); font-weight:500; font-size:1.3rem; }
.res__card p{ margin:0; color:rgba(244,241,232,.74); font-size:.92rem; }
.res__card .arr{ margin-top:.5rem; font-family:var(--mono); font-size:.8rem; color:var(--brass); }

/* =========================================================
   Newsletter
   ========================================================= */
.news{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media (max-width:820px){ .news{ grid-template-columns:1fr; } }
.news h2{ font-size:var(--step-3); }
.news__form{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.4rem; }
.news__form input{
  flex:1 1 240px; min-width:0;
  font-family:var(--sans); font-size:1rem;
  padding:.95em 1.1em; border-radius:100px;
  border:1px solid var(--line); background:var(--bone); color:var(--ink);
}
.news__form input:focus-visible{ outline:2px solid var(--brass); outline-offset:1px; }
.news__note{ font-size:.8rem; color:var(--sage); margin-top:.9rem; }

/* =========================================================
   Article (post) layout
   ========================================================= */
.post{ padding-block:clamp(2.5rem,5vw,4rem); }
.post__head{ max-width:48rem; margin-inline:auto; text-align:center; }
.post__head h1{ font-size:var(--step-4); margin-top:1.2rem; line-height:1.04; }
.post__meta{
  margin-top:1.6rem; display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:.78rem; color:var(--sage); letter-spacing:.05em;
}
.post__hero{
  max-width:1000px; margin:2.6rem auto 0; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--forest); aspect-ratio:16/7;
}
.post__hero svg{ width:100%; height:100%; }
.prose{ max-width:44rem; margin:3rem auto 0; font-size:1.12rem; line-height:1.78; }
.prose > * + *{ margin-top:1.4rem; }
.prose h2{ font-size:var(--step-2); margin-top:2.8rem; }
.prose h3{ font-size:var(--step-1); margin-top:2rem; font-weight:600; }
.prose p{ color:#23302a; }
.prose a{ color:var(--brass-d); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--forest); }
.prose strong{ font-weight:700; }
.prose ul,.prose ol{ padding-left:1.3rem; }
.prose li{ margin-top:.5rem; }
.prose blockquote{
  border-left:3px solid var(--brass); margin:2rem 0; padding:.4rem 0 .4rem 1.4rem;
  font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--forest);
}
.prose figure.pull{
  margin:2.2rem 0; padding:1.5rem 1.6rem; background:var(--bone-2);
  border-radius:var(--radius); border:1px solid var(--line);
}
.prose figure.pull .k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-d); }
.prose figcaption{ font-size:.85rem; color:var(--sage); font-family:var(--mono); }
.post__foot{
  max-width:44rem; margin:3rem auto 0; padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sage); }

/* page header (interior) */
.phead{ background:var(--forest); color:var(--bone); padding-block:clamp(2.6rem,6vw,4.5rem); }
.phead h1{ font-size:var(--step-4); margin-top:1rem; }
.phead p{ max-width:48ch; color:rgba(244,241,232,.78); margin-top:1rem; }

/* =========================================================
   Footer
   ========================================================= */
.foot{ background:var(--forest-3); color:var(--bone); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.foot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.4rem; }
@media (max-width:820px){ .foot__top{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:520px){ .foot__top{ grid-template-columns:1fr; } }
.foot .brand{ color:var(--bone); }
.foot__about{ max-width:34ch; color:rgba(244,241,232,.66); font-size:.92rem; margin-top:1rem; }
.foot h5{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin:0 0 1rem; font-weight:500; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot a{ color:rgba(244,241,232,.78); text-decoration:none; font-size:.92rem; transition:color .2s; }
.foot a:hover{ color:var(--brass); }
.foot__bar{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line-d);
  display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap;
  font-family:var(--mono); font-size:.74rem; color:var(--sage-2); letter-spacing:.03em;
}

/* =========================================================
   Reveal animation
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; border-radius:3px; }

/* =========================================================
   AWWWARDS LAYER — preloader, cursor, grain, marquee,
   split-text, progress, giant footer
   ========================================================= */

/* ----- Film grain ----- */
body::after{
  content:""; position:fixed; inset:-50%; z-index:9990; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.045;
  animation:grain 7s steps(8) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); } 12%{ transform:translate(-3%,2%); }
  25%{ transform:translate(2%,-4%); } 37%{ transform:translate(-4%,-2%); }
  50%{ transform:translate(3%,3%); } 62%{ transform:translate(-2%,4%); }
  75%{ transform:translate(4%,-3%); } 87%{ transform:translate(-3%,-3%); }
}
@media (prefers-reduced-motion:reduce){ body::after{ animation:none; } }

/* ----- Scroll progress ----- */
.progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  z-index:9999; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--brass),var(--brass-d));
}

/* ----- Preloader ----- */
.loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--forest-3); color:var(--bone);
  display:flex; align-items:center; justify-content:center;
  transition:clip-path .9s cubic-bezier(.85,0,.15,1);
  clip-path:inset(0 0 0 0);
}
.loader.done{ clip-path:inset(0 0 100% 0); pointer-events:none; }
.loader__in{ text-align:center; }
.loader__brand{
  font-family:var(--serif); font-size:clamp(2.4rem,6vw,4.5rem); font-weight:500;
  letter-spacing:-.02em; overflow:hidden;
}
.loader__brand span{ display:inline-block; transform:translateY(110%); animation:rise .9s cubic-bezier(.2,.7,.2,1) .15s forwards; }
.loader__brand em{ color:var(--brass); font-style:normal; }
.loader__pct{
  margin-top:1rem; font-family:var(--mono); font-size:.9rem; letter-spacing:.3em;
  color:var(--sage-2);
}
@keyframes rise{ to{ transform:translateY(0); } }
body.loading{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .loader{ display:none; } }

/* ----- Custom cursor ----- */
@media (hover:hover) and (pointer:fine){
  .cursor-dot,.cursor-ring{
    position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
    border-radius:50%; transform:translate(-50%,-50%);
  }
  .cursor-dot{ width:7px; height:7px; background:var(--brass); }
  .cursor-ring{
    width:38px; height:38px; border:1.5px solid color-mix(in srgb,var(--brass) 75%, transparent);
    transition:width .3s ease, height .3s ease, background .3s ease, border-color .3s ease;
  }
  .cursor-ring.is-link{
    width:64px; height:64px;
    background:color-mix(in srgb,var(--brass) 18%, transparent);
    border-color:var(--brass);
  }
  .cursor-ring.is-link::after{
    content:""; 
  }
}
@media (prefers-reduced-motion:reduce){ .cursor-dot,.cursor-ring{ display:none; } }

/* ----- Split-line hero reveal ----- */
.split .ln{ display:block; overflow:hidden; }
.split .ln > span{
  display:inline-block; transform:translateY(115%) rotate(2deg);
  transform-origin:0 100%;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.split.go .ln > span{ transform:translateY(0) rotate(0); }
.split .ln:nth-child(2) > span{ transition-delay:.1s; }
.split .ln:nth-child(3) > span{ transition-delay:.2s; }
@media (prefers-reduced-motion:reduce){ .split .ln > span{ transform:none; transition:none; } }

/* ----- Hero chart line draw ----- */
.draw-line{
  stroke-dasharray:1600; stroke-dashoffset:1600;
  animation:draw 2.6s cubic-bezier(.4,0,.2,1) 1.1s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.hero__grid{ will-change:transform; }
@media (prefers-reduced-motion:reduce){ .draw-line{ animation:none; stroke-dashoffset:0; } }

/* ----- Marquee ----- */
.marq{
  background:var(--bone); border-block:1px solid var(--line);
  overflow:hidden; padding-block:1.1rem;
  user-select:none;
}
.marq__track{
  display:inline-flex; white-space:nowrap; gap:0;
  animation:marq 30s linear infinite;
  will-change:transform;
}
.marq__item{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.6rem,6vw,5rem); line-height:1;
  letter-spacing:-.02em; padding-inline:1.6rem;
  display:inline-flex; align-items:center; gap:3.2rem;
  color:var(--ink);
}
.marq__item .o{
  color:transparent;
  -webkit-text-stroke:1.2px var(--ink);
}
.marq__item .dot{
  width:.55em; height:.55em; border-radius:50%;
  background:var(--brass); flex:none;
}
@keyframes marq{ to{ transform:translateX(-50%); } }
.marq:hover .marq__track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .marq__track{ animation:none; } }

/* ----- Nav link underline draw ----- */
.nav__links a{ position:relative; }
.nav__links a::after{
  content:""; position:absolute; left:.9em; right:.9em; bottom:.35em;
  height:1.5px; background:var(--brass);
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{
  transform:scaleX(1); transform-origin:0 50%;
}
@media (max-width:900px){ .nav__links a::after{ display:none; } }

/* ----- Card image zoom + sweep ----- */
.card__art svg{ transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__art svg{ transform:scale(1.06); }
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(201,162,75,.14) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .9s ease;
}
.card:hover::after{ transform:translateX(120%); }

/* ----- Stat tiles hover ----- */
.stat{ transition:background .4s ease; }
.stat:hover{ background:var(--forest-2); }

/* ----- Reveal variants ----- */
[data-reveal="left"]{ transform:translateX(-34px); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal].in{ transform:none; }

/* ----- Giant footer wordmark ----- */
.foot__mark{
  display:block; text-align:center;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(5rem,17vw,16rem); line-height:.85;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(244,241,232,.22);
  margin:0 0 clamp(2rem,5vw,3.5rem);
  transition:color .6s ease, -webkit-text-stroke .6s ease;
  cursor:default;
}
.foot__mark em{ font-style:normal; }
.foot__mark:hover{
  color:rgba(201,162,75,.92);
  -webkit-text-stroke:1.5px transparent;
}

/* ----- Big section index numbers ----- */
.band__head{ position:relative; }
.band__idx{
  position:absolute; right:0; top:-.4em;
  font-family:var(--serif); font-size:clamp(4rem,9vw,8rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(20,32,25,.18);
  pointer-events:none; user-select:none;
}
.band--forest .band__idx,.on-dark .band__idx{ -webkit-text-stroke:1px rgba(244,241,232,.16); }
@media (max-width:760px){ .band__idx{ display:none; } }

/* ----- Magnetic btn (JS adds transform) ----- */
.btn{ will-change:transform; }

/* ----- Edito drop cap ----- */
.edito-prose > p:first-of-type::first-letter{
  font-family:var(--serif); float:left;
  font-size:4.2em; line-height:.78; padding:.06em .12em 0 0;
  color:var(--brass-d); font-weight:500;
}

/* =========================================================
   V3 — IMMERSIVE LAYER (homepage scrollytelling)
   ========================================================= */

body.home{ background:var(--forest-3); }

/* Fixed nav over hero, switches on scroll */
body.home .nav{
  position:fixed; left:0; right:0; top:0;
  background:transparent; border-bottom-color:transparent;
  backdrop-filter:none;
  transition:background .45s ease, border-color .45s ease;
}
body.home .nav .brand,
body.home .nav .nav__links a,
body.home .nav .nav__burger{ color:var(--bone); transition:color .45s ease; }
body.home .nav .nav__links a:hover,
body.home .nav .nav__links a[aria-current="page"]{ background:rgba(244,241,232,.08); color:var(--bone); }
body.home .nav .brand small{ color:rgba(244,241,232,.5); }
body.home .nav.scrolled{
  background:color-mix(in srgb,var(--forest-3) 86%, transparent);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line-d);
}
body.home .tape{ display:none; }

/* ---------- HERO XXL ---------- */
.vhero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--forest-3); color:var(--bone);
  overflow:hidden; isolation:isolate;
  padding-top:clamp(90px,10vh,130px);
  padding-bottom:clamp(3rem,7vh,5.5rem);
}
.vhero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(110% 80% at 80% 0%, rgba(201,162,75,.13), transparent 55%),
    radial-gradient(90% 110% at 0% 100%, rgba(47,129,89,.16), transparent 55%);
}
.vhero__chart{ position:absolute; inset:0; z-index:-1; opacity:.6; will-change:transform; }
.vhero__inner{ position:relative; }
.vhero__eyebrow{ margin-bottom:clamp(1rem,2.5vw,2rem); }
.vhero__title{
  font-family:var(--serif); font-weight:500;
  line-height:.92; letter-spacing:-.035em;
  font-size:clamp(3.6rem,12.5vw,11.5rem);
  margin:0;
}
.vhero__title .vln{ display:block; overflow:hidden; }
.vhero__title .vln > span{
  display:inline-block;
  transform:translateY(112%) skewY(4deg);
  transform-origin:0 100%;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}
body.ready .vhero__title .vln > span{ transform:none; }
.vhero__title .vln:nth-child(2) > span{ transition-delay:.09s; }
.vhero__title .vln:nth-child(3) > span{ transition-delay:.18s; }
.vhero__title .out{
  color:transparent;
  -webkit-text-stroke:1.5px var(--bone);
}
.vhero__title .it{ font-style:italic; color:var(--brass); }
.vhero__title .ind{ padding-left:clamp(2rem,10vw,9rem); }
@media (prefers-reduced-motion:reduce){
  .vhero__title .vln > span{ transform:none !important; transition:none; }
}

.vhero__row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2.5rem; margin-top:clamp(1.8rem,4vw,3.2rem);
  border-top:1px solid var(--line-d);
  padding-top:clamp(1.2rem,2.5vw,2rem);
  flex-wrap:wrap;
}
.vhero__sub{ max-width:36rem; font-size:var(--step-1); line-height:1.5; color:rgba(244,241,232,.8); margin:0; }
.vhero__meta{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sage-2); display:grid; gap:.5rem; text-align:right;
}
@media (max-width:760px){ .vhero__meta{ text-align:left; } }
.vhero__scroll{
  position:absolute; right:var(--gutter); bottom:clamp(1.5rem,3vw,3rem);
  display:none;
}

/* ---------- Velocity marquee ---------- */
.vmarq{
  background:var(--forest-3); color:var(--bone);
  border-block:1px solid var(--line-d);
  overflow:hidden; padding-block:clamp(1rem,2vw,1.6rem);
  user-select:none;
}
.vmarq__track{
  display:inline-flex; white-space:nowrap; will-change:transform;
}
.vmarq__item{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(3rem,8vw,7rem); line-height:1; letter-spacing:-.025em;
  padding-inline:2rem; display:inline-flex; align-items:center; gap:4rem;
}
.vmarq__item .o{ color:transparent; -webkit-text-stroke:1.4px rgba(244,241,232,.8); }
.vmarq__item .dot{ width:.5em; height:.5em; border-radius:50%; background:var(--brass); flex:none; }

/* ---------- Horizontal dossiers ---------- */
.hwrap{ position:relative; height:480vh; background:var(--bone); }
.hpin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.hhead{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding:calc(72px + 1.5rem) var(--gutter) 0;
  pointer-events:none;
}
.hcount{ font-family:var(--mono); font-size:.85rem; letter-spacing:.2em; color:var(--sage); }
.hcount b{ color:var(--ink); font-weight:600; }
.hbar{ width:160px; height:2px; background:var(--line); position:relative; overflow:hidden; }
.hbar i{ position:absolute; inset:0; background:var(--brass); transform-origin:0 50%; transform:scaleX(0); }
.htrack{
  display:flex; align-items:center; gap:clamp(1.5rem,3vw,3rem);
  padding-inline:var(--gutter);
  will-change:transform;
}
.hintro{ flex:0 0 auto; width:min(34rem,80vw); }
.hintro h2{ font-size:clamp(2.6rem,5.5vw,4.6rem); letter-spacing:-.025em; line-height:1; }
.hintro p{ color:var(--ink-soft); max-width:30rem; margin-top:1.2rem; }
.hcard{
  flex:0 0 auto;
  width:min(46rem,78vw);
  text-decoration:none; color:inherit;
  display:grid; grid-template-rows:auto auto;
  gap:1.2rem;
  position:relative;
}
.hcard__art{
  aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--forest);
  position:relative;
}
.hcard__art svg{ width:100%; height:100%; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.hcard:hover .hcard__art svg{ transform:scale(1.07); }
.hcard__n{
  position:absolute; top:1rem; left:1.1rem;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em;
  color:var(--bone); background:rgba(10,32,26,.55); padding:.4em .8em; border-radius:100px;
  backdrop-filter:blur(4px);
}
.hcard__body{ display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:start; }
.hcard__cat{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-d); }
.hcard h3{
  font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.08; letter-spacing:-.015em; margin-top:.4rem;
  transition:color .3s;
}
.hcard:hover h3{ color:var(--brass-d); }
.hcard__meta{ font-family:var(--mono); font-size:.74rem; color:var(--sage); white-space:nowrap; padding-top:1.7rem; }
.hend{ flex:0 0 auto; width:30vw; display:flex; align-items:center; }

@media (max-width:900px), (prefers-reduced-motion:reduce){
  .hwrap{ height:auto; }
  .hpin{ position:static; height:auto; overflow:visible; padding-block:3.5rem 2rem; }
  .hhead{ position:static; padding:0 var(--gutter) 1.5rem; }
  .htrack{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);
    padding:0 var(--gutter) 1rem var(--gutter);
    transform:none !important;
  }
  .hintro{ width:min(30rem,86vw); }
  .hcard{ width:min(40rem,86vw); }
  .hcard,.hintro{ scroll-snap-align:start; }
  .hend{ display:none; }
}

/* ---------- Manifesto word reveal ---------- */
.manif{
  background:var(--bone); 
  padding-block:clamp(5rem,12vw,10rem);
}
.manif__txt{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.8rem,4.4vw,3.8rem);
  line-height:1.22; letter-spacing:-.02em;
  max-width:62rem;
}
.manif__txt .w{ opacity:.13; transition:opacity .35s linear; }
.manif__txt .w.on{ opacity:1; }
.manif__txt .acc{ font-style:italic; color:var(--brass-d); }
.manif__sig{
  margin-top:2.5rem; font-family:var(--mono); font-size:.78rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--sage);
}
@media (prefers-reduced-motion:reduce){ .manif__txt .w{ opacity:1; } }

/* ---------- Stats XXL ---------- */
.bigstats{
  background:var(--forest); color:var(--bone);
  padding-block:clamp(4rem,9vw,7rem);
}
.bigstats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
@media (max-width:820px){ .bigstats__grid{ grid-template-columns:1fr; gap:3rem; } }
.bigstat{ border-top:1px solid var(--line-d); padding-top:1.4rem; }
.bigstat__num{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(4rem,9vw,8rem); line-height:.95; letter-spacing:-.03em;
}
.bigstat__num em{ font-style:normal; color:var(--brass); }
.bigstat__lbl{ margin-top:.9rem; color:rgba(244,241,232,.7); max-width:24ch; }

/* ---------- Édito v3 ---------- */
.vedito{ background:var(--bone); padding-block:clamp(4rem,9vw,7rem); }
.vedito__grid{ display:grid; grid-template-columns:1fr 1.7fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
@media (max-width:900px){ .vedito__grid{ grid-template-columns:1fr; } }
.vedito__sticky{ position:sticky; top:110px; }
.vedito__sticky h2{ font-size:clamp(2rem,3.6vw,3.2rem); line-height:1.05; letter-spacing:-.02em; margin-top:.8rem; max-width:14ch; }
.vedito .edito-prose{ columns:1 !important; font-size:1.1rem !important; }
.vedito .edito-prose p{ margin-top:1.3rem; }

/* ---------- Newsletter CTA XXL ---------- */
.vcta{
  background:var(--forest-3); color:var(--bone);
  padding-block:clamp(5rem,11vw,9rem);
  text-align:center;
}
.vcta h2{
  font-size:clamp(2.6rem,7vw,6rem); letter-spacing:-.028em; line-height:1;
  max-width:16ch; margin-inline:auto;
}
.vcta h2 em{ font-style:italic; color:var(--brass); }
.vcta .news__form{ justify-content:center; margin-top:2.4rem; max-width:34rem; margin-inline:auto; }
.vcta .news__form input{ background:var(--forest-2); border-color:var(--line-d); color:var(--bone); }
.vcta .news__note{ color:var(--sage-2); }

/* =========================================================
   V4 — CINEMATIC LAYER (WebGL aurora + sheets + HUD)
   ========================================================= */

#gl{
  position:fixed; inset:0; z-index:-2;
  width:100vw; height:100vh; display:block;
  pointer-events:none;
}

/* When shader is live, dark sections become windows onto it */
body.has-gl.home{ background:#081C17; }
body.has-gl .vhero{ background:transparent; }
body.has-gl .vhero::before{ display:none; }
body.has-gl .vhero__chart{ opacity:.35; }
body.has-gl .vmarq{
  background:rgba(8,28,23,.30);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
body.has-gl .bigstats{ background:transparent; position:relative; }
body.has-gl .bigstats::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(80% 100% at 50% 50%, rgba(8,28,23,.55), rgba(8,28,23,.15));
}
body.has-gl .band--forest{ background:rgba(8,28,23,.38); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
body.has-gl .vcta{ background:transparent; position:relative; }
body.has-gl .vcta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 90% at 50% 60%, rgba(8,28,23,.6), rgba(8,28,23,.1));
}
body.has-gl .foot{ background:rgba(8,28,23,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
body.has-gl.home .nav.scrolled{ background:rgba(8,28,23,.55); }

/* Light "sheets" floating above the shader */
.sheet{
  position:relative; z-index:1;
  background:var(--bone);
  border-radius:clamp(22px,3vw,40px);
  margin-inline:clamp(.5rem,1.4vw,1.2rem);
  box-shadow:0 -30px 80px -40px rgba(0,0,0,.5), 0 30px 80px -40px rgba(0,0,0,.5);
}
.sheet + .sheet{ margin-top:clamp(.5rem,1.4vw,1.2rem); }
.sheet--gap{ margin-block:clamp(.6rem,1.6vw,1.4rem); }
.hpin{ background:var(--bone); border-radius:inherit; }
.sheet.manif,.sheet.vedito,.sheet.hwrap{ background:var(--bone); }

/* ---------- Fixed HUD (chapter system) ---------- */
.hud{
  position:fixed; z-index:80; inset:auto 0 0 0;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:0 var(--gutter) 1.1rem;
  pointer-events:none;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone);
  mix-blend-mode:difference;
}
.hud b{ font-weight:600; }
.hud i{ font-style:normal; opacity:.75; }
.hud__c{ display:inline-flex; gap:.9em; align-items:center; }
.hud__line{
  width:54px; height:1px; background:currentColor; opacity:.5; position:relative; overflow:hidden;
}
.hud__line i{
  position:absolute; inset:0; background:var(--brass);
  transform-origin:0 50%; transform:scaleX(0); opacity:1;
}
@media (max-width:700px){ .hud{ font-size:.6rem; letter-spacing:.16em; } .hud__l{ display:none; } }

/* hero scroll cue */
.vhero__cue{
  position:absolute; left:50%; bottom:1.2rem; transform:translateX(-50%);
  width:1px; height:54px; overflow:hidden; opacity:.7;
}
.vhero__cue::after{
  content:""; position:absolute; left:0; top:-100%;
  width:100%; height:100%;
  background:linear-gradient(to bottom, transparent, var(--brass));
  animation:cue 1.8s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cue{ to{ top:100%; } }
@media (prefers-reduced-motion:reduce){ .vhero__cue{ display:none; } }

/* =========================================================
   V5 — LUXURY LAYER (3D card cluster, curtains, quote)
   ========================================================= */

/* ---------- Hero grid with floating object ---------- */
.vhero__grid{
  display:grid; grid-template-columns:1.18fr .82fr;
  gap:clamp(2rem,4vw,4.5rem); align-items:center;
}
.vhero__grid .vhero__title{ font-size:clamp(3rem,8.4vw,7.8rem); }
.vhero__grid .vhero__title .ind{ padding-left:clamp(1.4rem,6vw,5rem); }
@media (max-width:980px){
  .vhero__grid{ grid-template-columns:1fr; }
  .vhero__grid .vhero__title{ font-size:clamp(3rem,11.5vw,7.8rem); }
}

/* ---------- Floating card cluster ---------- */
.fcluster{
  position:relative;
  perspective:1100px;
  width:min(380px,86vw);
  margin-inline:auto;
}
.fcluster__in{ position:relative; transform-style:preserve-3d; }
@media (max-width:980px){ .fcluster{ margin-top:1.5rem; } }

.fcard{
  position:relative;
  aspect-ratio:1.586; width:100%;
  border-radius:20px;
  background:
    linear-gradient(140deg,#17402F 0%,#0C2820 45%,#081C17 100%) padding-box,
    linear-gradient(140deg, rgba(201,162,75,.85), rgba(201,162,75,.08) 40%, rgba(201,162,75,.5)) border-box;
  border:1px solid transparent;
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(244,241,232,.08);
  padding:1.3rem 1.4rem;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
  animation:floaty 7s ease-in-out infinite alternate;
}
.fcard__sheen{
  position:absolute; inset:-40%;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.13) 50%, transparent 62%);
  transform:translateX(-120%) rotate(8deg);
  animation:sheen 5.5s ease-in-out 2s infinite;
  pointer-events:none;
}
@keyframes sheen{ 0%,55%{ transform:translateX(-120%) rotate(8deg);} 85%,100%{ transform:translateX(120%) rotate(8deg);} }
@keyframes floaty{ from{ transform:translateY(-7px);} to{ transform:translateY(9px);} }

.fcard__top{ display:flex; justify-content:space-between; align-items:flex-start; }
.fcard__logo{ font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--bone); letter-spacing:-.02em; }
.fcard__logo em{ color:var(--brass); font-style:normal; }
.fcard__puce{
  width:42px; height:32px; border-radius:7px;
  background:linear-gradient(135deg,#E2C277,#A6812F 60%,#D9B964);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25), inset 0 6px 10px rgba(255,255,255,.35);
  position:relative;
}
.fcard__puce::after{
  content:""; position:absolute; inset:6px 8px;
  border:1px solid rgba(0,0,0,.28); border-radius:4px;
}
.fcard__spark{ width:100%; height:44px; opacity:.95; }
.fcard__bot{
  display:flex; justify-content:space-between; align-items:flex-end;
  font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase;
}
.fcard__bot span{ font-size:.58rem; color:var(--sage-2); }
.fcard__bot b{ font-size:.72rem; color:var(--brass); font-weight:600; }

.fchip{
  position:absolute;
  background:rgba(244,241,232,.07);
  border:1px solid rgba(244,241,232,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:14px;
  padding:.75rem .95rem;
  display:grid; gap:.15rem;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.6);
  will-change:transform;
  white-space:nowrap;
}
.fchip small{ font-size:.62rem; color:var(--sage-2); font-family:var(--mono); letter-spacing:.08em; }
.fchip b{ font-family:var(--serif); font-size:1.25rem; color:var(--bone); font-weight:500; }
.fchip .up{ font-family:var(--mono); font-size:.95rem; color:#7FD0A4; font-weight:600; }
.fchip--a{ top:-14%; left:-16%; animation:floaty 6s ease-in-out .8s infinite alternate; }
.fchip--b{ bottom:-12%; right:-12%; animation:floaty 8s ease-in-out .3s infinite alternate-reverse; }
@media (max-width:980px){
  .fchip--a{ left:-4%; } .fchip--b{ right:-4%; }
}
@media (prefers-reduced-motion:reduce){
  .fcard,.fchip{ animation:none; }
  .fcard__sheen{ animation:none; display:none; }
}

/* ---------- Curtain reveals on article art ---------- */
.card__art::after, .hcard__art::after{
  content:""; position:absolute; inset:0; z-index:5;
  background:var(--bone);
  transform-origin:50% 0;
  transition:transform 1.05s cubic-bezier(.7,0,.2,1);
}
.hcard__art::after{ background:var(--bone-2); }
.card.in .card__art::after{ transform:scaleY(0); }
body.ready .hcard__art::after{ transform:scaleY(0); }
.hcard:nth-of-type(2) .hcard__art::after{ transition-delay:.08s; }
.hcard:nth-of-type(3) .hcard__art::after{ transition-delay:.16s; }
.hcard:nth-of-type(4) .hcard__art::after{ transition-delay:.24s; }
.hcard:nth-of-type(5) .hcard__art::after{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .card__art::after,.hcard__art::after{ display:none; }
}

/* ---------- Button luxe sweep ---------- */
.btn{ position:relative; overflow:hidden; }
.btn::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,.28) 50%, transparent 68%);
  transform:translateX(-130%);
  transition:transform .75s ease;
  pointer-events:none;
}
.btn:hover::before{ transform:translateX(130%); }

/* ---------- Monumental quote ---------- */
.vquote{
  position:relative;
  padding-block:clamp(5rem,12vw,10rem);
  color:var(--bone);
  text-align:center;
}
body.has-gl .vquote::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 80% at 50% 50%, rgba(8,28,23,.5), rgba(8,28,23,.05));
}
.vquote__q{
  margin:0 auto; max-width:22ch;
  font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(1.9rem,4.6vw,4rem);
  line-height:1.18; letter-spacing:-.015em;
}
.vquote__q em{ color:var(--brass); }
.vquote__mark{
  display:inline-block; color:var(--brass); font-style:normal;
  font-size:1.6em; line-height:0; vertical-align:-.12em; opacity:.9;
}
.vquote__src{
  margin-top:2rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage-2);
}

/* ---------- Spinning star in marquee ---------- */
.vmarq .star{
  display:inline-flex; color:var(--brass); font-size:.62em;
  animation:spin 9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .vmarq .star{ animation:none; } }