/* ============================================================ */
/*  TOKENS                                                       */
/* ============================================================ */
:root{
  --paper:#f1ebdb;
  --paper-2:#ebe3cd;
  --paper-deep:#dcd2b8;
  --ink:#231b14;
  --ink-2:#5a4a3a;
  --ink-3:#8a7a66;
  --line:#231b14;
  --line-soft:rgba(35,27,20,.18);
  --accent:#8a2a23;      /* oxblood */
  --accent-deep:#6a1f1a;
  --mustard:#e4c878;
  --mustard-deep:#c9a958;
  --note:#f4e08a;
  --shadow-card:0 1px 0 rgba(35,27,20,.06), 6px 8px 0 rgba(35,27,20,.08);
  --shadow-deep:0 2px 0 rgba(35,27,20,.06), 10px 14px 30px rgba(35,27,20,.14);

  --serif: "Montserrat", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --hand: "Caveat", cursive;

  /* Fluid spacing: scales from 360px viewport to 1440px design */
  --gutter-x: clamp(20px, 4.2vw, 60px);
  --gutter-y: clamp(48px, 5.5vw, 80px);
  --gap-md:   clamp(24px, 3.5vw, 48px);
  --gap-lg:   clamp(36px, 5vw, 64px);

  /* Fluid type */
  --t-display: clamp(38px, 6.6vw, 100px);
  --t-h2:      clamp(34px, 4.8vw, 72px);
  --t-h2-sm:   clamp(28px, 3.8vw, 56px);
  --t-h3:      clamp(22px, 2.2vw, 30px);
  --t-h4:      clamp(20px, 1.9vw, 26px);
  --t-quote:   clamp(28px, 3.8vw, 56px);
  --t-num:     clamp(48px, 6.2vw, 88px);
  --t-body:    clamp(15px, 0.4vw + 13.5px, 17px);
  --t-small:   clamp(13px, 0.25vw + 12px, 15px);
  --t-mono:    clamp(10px, 0.1vw + 9.6px, 11.5px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#dcd6c6;
  font-family:var(--serif);
  color:var(--ink);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

::selection{background:var(--mustard);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============================================================ */
/*  PAGE FRAME + PAPER GRAIN                                     */
/* ============================================================ */
.page{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  background:var(--paper);
  position:relative;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(138,42,35,.018) 0, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(228,200,120,.025) 0, transparent 45%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.137  0 0 0 0 0.106  0 0 0 0 0.078  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  box-shadow: 0 30px 80px rgba(35,27,20,.15);
}

.folio{
  position:absolute;top:0;right:-6px;bottom:0;width:24px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.folio span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:6px;
  color:rgba(35,27,20,.42);
  writing-mode:vertical-rl;transform:rotate(180deg);
  white-space:nowrap;text-transform:uppercase;
}
@media (max-width: 1100px){ .folio{display:none} }

/* ============================================================ */
/*  PRIMITIVES                                                   */
/* ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1.5px solid var(--ink);padding:13px 22px;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(13.5px, 0.3vw + 12.5px, 15px);
  background:transparent;color:var(--ink);
  transition:background .18s, color .18s, transform .12s, box-shadow .18s;
  letter-spacing:.1px;cursor:pointer;position:relative;
}
.btn:hover{background:var(--ink);color:var(--paper);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(0,0);box-shadow:none}
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.dark:hover{background:var(--accent);border-color:var(--accent);color:var(--paper);box-shadow:3px 3px 0 var(--accent-deep)}
.btn.accent{background:var(--mustard);border-color:var(--ink)}
.btn.accent:hover{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--mustard-deep)}
.btn .arr{display:inline-block;transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  border:1.5px solid var(--ink);padding:5px 12px;border-radius:30px;
  font-family:var(--serif);font-style:italic;font-size:12.5px;background:transparent;
}
.pill.dark{background:var(--ink);color:var(--paper)}
.pill.accent{background:var(--mustard);border-color:var(--ink)}

.tag{
  font-family:var(--mono);font-size:10px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--ink-2);font-weight:500;
}

.highlight{
  background:var(--mustard);padding:0 8px;display:inline-block;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ============================================================ */
/*  NAV                                                          */
/* ============================================================ */
.nav{
  display:flex;align-items:center;gap:clamp(16px, 2.5vw, 36px);
  padding:22px var(--gutter-x);
  border-bottom:1.5px solid var(--ink);
  background:rgba(241,235,219,.6);
  backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:50;
}
.logo{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(22px, 2.1vw + 6px, 30px);
  letter-spacing:-1.5px;line-height:1;color:var(--ink);flex-shrink:0;
}
.logo small{
  font-family:var(--mono);font-size:9px;font-weight:400;
  display:block;letter-spacing:3px;margin-top:3px;color:var(--ink-2);
}
.navlinks{display:flex;gap:clamp(16px, 2vw, 30px);align-items:center;flex-wrap:wrap}
.navlinks a{
  font-family:var(--serif);font-style:italic;font-size:clamp(13px, 0.4vw + 11.5px, 15px);
  color:var(--ink-2);position:relative;padding:4px 0;transition:color .15s;white-space:nowrap;
}
.navlinks a:hover{color:var(--ink)}
.navlinks a.cur{color:var(--ink)}
.navlinks a.cur::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--ink)}
.navlinks a:not(.cur)::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.navlinks a:hover::after{transform:scaleX(1)}

.nav-right{margin-left:auto;display:flex;gap:12px;align-items:center;flex-shrink:0}
.lang{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--ink-2)}
.lang b{color:var(--ink);font-weight:500}

/* Hamburger (hidden by default; shown on narrow viewports) */
.menu-toggle{
  display:none;width:38px;height:38px;border:1.5px solid var(--ink);
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
  background:transparent;cursor:pointer;
}
.menu-toggle span{display:block;width:18px;height:1.8px;background:var(--ink);transition:transform .25s}

/* ============================================================ */
/*  HERO                                                         */
/* ============================================================ */
.hero{
  padding:clamp(36px, 4.5vw, 60px) var(--gutter-x) clamp(48px, 5vw, 70px);
  display:grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 380px);
  gap:clamp(28px, 4vw, 60px);
  align-items:start;border-bottom:1.5px solid var(--ink);position:relative;
}
.hero-left{min-width:0;display:flex;flex-direction:column}
.kicker{
  font-family:var(--mono);font-size:clamp(9.5px, 0.2vw + 9px, 11px);
  letter-spacing:clamp(2px, 0.15vw + 1.6px, 3.5px);
  color:var(--ink-2);text-transform:uppercase;
  margin-bottom:clamp(20px, 2.5vw + 8px, 34px);
  display:flex;align-items:center;gap:14px;
}
.kicker::before{content:"";flex:0 0 clamp(20px, 2.5vw, 36px);height:1.5px;background:var(--ink-2)}
.kicker::after{content:"";flex:1;height:1.5px;background:var(--ink-2)}

.headline{
  font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:var(--t-display);
  line-height:.92;letter-spacing:-.03em;
  margin:0 0 clamp(22px, 2.5vw, 36px);
  hyphens:none;-webkit-hyphens:none;word-break:keep-all;
}
.headline .hl{display:block;white-space:normal}
/* Generic .hl line-marker — works on any heading using <span class="hl"> */
.hl{display:block;white-space:normal}
.headline em{
  font-style:italic;background:var(--mustard);
  padding:0 .14em .04em;display:inline-block;
  transform:rotate(-1.2deg);
  box-shadow:2px 3px 0 rgba(35,27,20,.08);
}
.headline em:nth-of-type(2){transform:rotate(1deg)}
.headline .amp{
  font-family:var(--serif);font-style:italic;color:var(--accent);
  font-weight:400;font-size:.92em;
}

.hero-subline{
  font-family:var(--serif);font-size:clamp(15.5px, 0.6vw + 12.5px, 18.5px);
  line-height:1.55;color:var(--ink);
  max-width:54ch;margin-bottom:clamp(22px, 2.5vw, 32px);font-weight:400;
}
.hero-subline em{font-style:italic;color:var(--accent);font-weight:600;background:none}

.hero-ctas{display:flex;gap:10px;flex-wrap:wrap}

/* RIGHT COLUMN — cover photo + stats stacked beneath */
.hero-right{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(40px, 5vw, 56px);
  position:relative;padding-top:6px;
  min-width:0;
}
.cover-wrap{
  position:relative;
  width:100%;
  max-width:340px;
  aspect-ratio: 3 / 3.85;
  transform:rotate(2deg);
  align-self:flex-end;
}
.cover-photo{
  width:100%;height:100%;
  border:1.5px solid var(--ink);
  background:var(--paper-2);
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;position:relative;
}
.cover-photo image-slot{
  flex:1;width:100%;
  --is-bg:#d7cdaf;
  --is-fg:#8a7a66;
  --is-border:none;
}
.cover-cap{
  background:var(--paper);
  border-top:1.5px solid var(--ink);
  padding:10px 14px 12px;
  font-family:var(--serif);font-style:italic;font-size:12.5px;
  color:var(--ink);line-height:1.35;
}
.cover-cap small{
  display:block;font-family:var(--mono);font-style:normal;
  font-size:9px;letter-spacing:1.5px;color:var(--ink-2);
  margin-top:4px;text-transform:uppercase;
}

.washi{
  position:absolute;top:-14px;right:14%;
  width:30%;max-width:96px;height:26px;
  background:linear-gradient(180deg, rgba(228,200,120,.55) 0%, rgba(228,200,120,.7) 100%);
  border-left:1px dashed rgba(35,27,20,.25);
  border-right:1px dashed rgba(35,27,20,.25);
  transform:rotate(-5deg);
  box-shadow:0 2px 3px rgba(35,27,20,.08);
}
.washi-2{
  position:absolute;bottom:18%;left:-12px;
  width:20%;max-width:62px;height:18px;
  background:rgba(244,224,138,.7);
  transform:rotate(8deg);
  box-shadow:0 2px 3px rgba(35,27,20,.06);
}

.seal{
  position:absolute;left:-12%;bottom:-9%;z-index:4;
  width:clamp(96px, 9vw, 128px);
  aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #a13830 0%, var(--accent) 45%, var(--accent-deep) 100%);
  color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-11deg);
  box-shadow:
    inset 0 -3px 8px rgba(0,0,0,.25),
    inset 0 2px 4px rgba(255,255,255,.12),
    4px 5px 0 rgba(35,27,20,.18),
    0 10px 24px rgba(138,42,35,.25);
}
.seal::before{content:"";position:absolute;inset:8px;border:1.5px dashed rgba(241,235,219,.45);border-radius:50%}
.seal::after{content:"";position:absolute;inset:14px;border:1px solid rgba(241,235,219,.18);border-radius:50%}
.seal-inner{
  text-align:center;font-family:var(--serif);font-style:italic;
  font-weight:900;font-size:clamp(11px, 0.9vw, 14px);
  line-height:1.1;letter-spacing:-.3px;
  padding:0 12px;position:relative;z-index:1;
}
.seal-inner b{
  display:block;font-size:clamp(22px, 1.9vw + 8px, 30px);
  letter-spacing:-1.2px;line-height:1;
}
.seal-inner small{
  display:block;font-family:var(--mono);font-style:normal;
  font-weight:400;font-size:clamp(6.5px, 0.4vw + 5px, 7.5px);
  letter-spacing:1.2px;margin-top:6px;opacity:.85;text-transform:uppercase;
}

/* HERO STATS — magazine-style rail under the cover */
.hero-stats{
  width:100%;
  display:flex;flex-direction:column;
  border-top:1.5px solid var(--ink);
}
.hero-stats .stat{
  display:grid;grid-template-columns: clamp(70px, 8vw, 110px) 1fr;
  align-items:baseline;gap:14px;
  padding:14px 0 12px;
  border-bottom:1px dashed rgba(35,27,20,.3);
}
.hero-stats .stat:last-child{border-bottom:0;padding-bottom:0}
.hero-stats .stat b{
  font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:clamp(26px, 2vw + 14px, 38px);
  letter-spacing:-1.4px;line-height:1;color:var(--ink);
}
.hero-stats .stat b small{
  font-size:.55em;letter-spacing:-1px;color:var(--ink-2);font-style:italic;
}
.hero-stats .stat span{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(12px, 0.3vw + 10.5px, 13.5px);
  color:var(--ink-2);line-height:1.4;
}

/* ============================================================ */
/*  RIBBON                                                       */
/* ============================================================ */
.ribbon{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:clamp(12px, 1.5vw, 24px);
  padding:14px var(--gutter-x);background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:clamp(10px, 0.25vw + 9px, 11.5px);
  letter-spacing:clamp(1.5px, 0.15vw + 1px, 2.5px);
  text-transform:uppercase;
}
.ribbon span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ribbon .arr{color:var(--mustard);font-style:normal}

/* ============================================================ */
/*  SECTION HEADER (numéro romain + label)                       */
/* ============================================================ */
.section-num{
  font-family:var(--serif);font-weight:900;
  font-size:var(--t-num);
  line-height:1;letter-spacing:-.04em;
  padding-bottom:12px;border-bottom:1.5px solid var(--ink);position:relative;
}
.section-num small{
  display:block;font-family:var(--mono);font-size:11px;color:var(--ink-2);
  margin-top:10px;letter-spacing:2.5px;font-weight:500;text-transform:uppercase;
}
.section-intro{
  margin-top:22px;font-family:var(--serif);
  font-size:clamp(14px, 0.4vw + 12.5px, 15.5px);
  line-height:1.6;color:var(--ink-2);font-style:italic;
}
.section-side-note{
  margin-top:28px;padding-left:18px;border-left:2px solid var(--accent);
  font-family:var(--hand);font-size:clamp(20px, 0.5vw + 18px, 23px);
  color:var(--accent);line-height:1.2;font-weight:600;
}
.section-side-note small{
  display:block;font-family:var(--mono);font-style:normal;font-weight:500;
  font-size:9.5px;letter-spacing:1.5px;color:var(--accent-deep);
  margin-top:8px;text-transform:uppercase;
}

/* Two-column section: side header + content */
.split{
  padding:var(--gutter-y) var(--gutter-x);
  display:grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap:var(--gap-lg);
  border-bottom:1.5px solid var(--ink);
  position:relative;
}

/* ============================================================ */
/*  II — DIAGNOSTIC FLASH (QUIZ)                                 */
/* ============================================================ */
.quiz-wrap{
  display:grid;grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(20px, 2.5vw, 32px);align-items:stretch;
}
.quiz{
  background:#fbf6e8;border:1.5px solid var(--ink);
  padding:clamp(22px, 2.2vw, 32px) clamp(22px, 2.4vw, 34px);
  display:flex;flex-direction:column;gap:18px;
  position:relative;box-shadow:var(--shadow-card);min-width:0;
}
.quiz-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.quiz-head .ttl{
  font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:clamp(22px, 1.4vw + 14px, 30px);
  letter-spacing:-.8px;line-height:1.05;
}
.quiz-head .step-counter{
  font-family:var(--mono);font-size:10.5px;letter-spacing:2px;
  color:var(--ink-2);text-transform:uppercase;white-space:nowrap;
}
.progress{height:4px;background:rgba(35,27,20,.12);position:relative;overflow:hidden}
.progress .fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--accent);
  transition:width .45s cubic-bezier(.6,0,.2,1);
}
.progress::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 0 calc(33.33% - 1px), var(--ink) calc(33.33% - 1px) 33.33%, transparent 33.33% calc(66.66% - 1px), var(--ink) calc(66.66% - 1px) 66.66%, transparent 66.66% 100%);
}
.quiz-question{
  font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(22px, 1.4vw + 14px, 30px);
  line-height:1.08;letter-spacing:-.6px;margin:6px 0 4px;
  text-wrap:balance;
}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.answer{
  border:1.5px solid var(--ink);background:var(--paper);
  padding:14px 16px;display:flex;align-items:center;gap:12px;
  font-family:var(--serif);font-size:clamp(13px, 0.3vw + 12px, 14.5px);
  cursor:pointer;text-align:left;line-height:1.3;
  transition:background .15s, transform .12s, box-shadow .15s;
}
.answer:hover{background:#fbf6e8;transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink)}
.answer.sel{background:var(--mustard);box-shadow:2px 2px 0 var(--ink);transform:translate(-1px,-1px)}
.answer .dot{
  width:14px;height:14px;border:1.5px solid var(--ink);border-radius:50%;
  flex-shrink:0;position:relative;transition:background .15s;
}
.answer.sel .dot{background:var(--ink)}
.answer.sel .dot::after{content:"";position:absolute;inset:3px;background:var(--mustard);border-radius:50%}
.quiz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:16px;flex-wrap:wrap}
.quiz-foot .meta{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;color:var(--ink-2);text-transform:uppercase}
.quiz-next:disabled{opacity:.4;cursor:not-allowed;transform:none;background:transparent;color:var(--ink);box-shadow:none}
.quiz-next:disabled:hover{background:transparent;color:var(--ink);transform:none;box-shadow:none}

.quiz-result{display:none;flex-direction:column;gap:14px}
.quiz.done .quiz-question,.quiz.done .answers,.quiz.done .quiz-foot{display:none}
.quiz.done .quiz-result{display:flex}
.quiz-result h3{
  font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:clamp(24px, 1.5vw + 16px, 34px);
  letter-spacing:-1.2px;line-height:1.02;
}
.quiz-result .verdict{
  font-family:var(--serif);font-size:clamp(14px, 0.4vw + 12.5px, 16px);
  line-height:1.55;color:var(--ink);font-weight:400;
}
.quiz-result .verdict em{font-style:italic;color:var(--accent);font-weight:600}
.quiz-result .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.quiz-result .restart{
  font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px;
  color:var(--ink-2);text-transform:uppercase;text-decoration:underline;
  text-underline-offset:3px;background:none;border:0;cursor:pointer;
  padding:8px 0;align-self:flex-start;
}
.quiz-result .restart:hover{color:var(--accent)}

/* SCORE PANEL (post-it) */
.score-panel{
  background:var(--note);border:1.5px solid var(--ink);
  padding:clamp(22px, 2.2vw, 32px) clamp(22px, 2vw, 30px) clamp(20px, 1.8vw, 26px);
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;transform:rotate(1.4deg);
  box-shadow:6px 8px 0 rgba(35,27,20,.10), 0 1px 0 rgba(35,27,20,.05);
  min-width:0;
}
.score-panel::before{
  content:"";position:absolute;top:-14px;left:50%;width:90px;height:22px;
  background:rgba(35,27,20,.10);transform:translateX(-50%) rotate(-3deg);
  border:1px solid rgba(35,27,20,.18);box-shadow:0 1px 2px rgba(35,27,20,.06);
}
.score-panel .lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
  color:var(--ink);text-transform:uppercase;margin-bottom:10px;font-weight:500;
}
.score-panel .big-num{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(64px, 4.5vw + 22px, 104px);
  line-height:.9;letter-spacing:-4px;color:var(--ink);
}
.score-panel.bumped .big-num{animation: pop .45s ease}
@keyframes pop { 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }
.score-panel .big-num span{font-size:.36em;color:var(--ink-2);letter-spacing:-1px}
.score-panel .scale{
  margin:18px 0 6px;height:8px;background:rgba(35,27,20,.18);position:relative;
}
.score-panel .scale .mark{
  position:absolute;top:-5px;width:2.5px;height:18px;background:var(--accent);
  transition:left .5s cubic-bezier(.6,0,.2,1);
}
.score-panel .scale .mark.avg{background:var(--ink);left:50%;height:14px;top:-3px;width:2px;opacity:.45}
.score-panel .scale .mark.ok{background:var(--ink);left:75%;height:14px;top:-3px;width:2px;opacity:.45}
.score-panel .scale-labels{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9.5px;letter-spacing:1px;color:var(--ink-2);
}
.score-panel .commentary{
  margin-top:18px;font-family:var(--hand);font-weight:600;
  font-size:clamp(20px, 0.5vw + 18px, 23px);
  line-height:1.2;color:var(--ink);
}
.score-panel .commentary small{
  display:block;font-family:var(--serif);font-style:italic;font-size:12.5px;
  color:var(--ink-2);margin-top:8px;font-weight:400;line-height:1.4;
}

/* ============================================================ */
/*  III — APPROCHE                                               */
/* ============================================================ */
.approach h2{
  font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:var(--t-h2-sm);
  line-height:.95;letter-spacing:-.035em;margin:0 0 22px;text-wrap:balance;
}
.approach .lead{
  font-family:var(--serif);
  font-size:clamp(16px, 0.5vw + 14px, 18.5px);
  line-height:1.55;color:var(--ink);font-style:italic;
  max-width:62ch;margin-bottom:clamp(28px, 3vw, 44px);font-weight:400;
}
.approach .lead em{background:var(--mustard);font-style:italic;padding:0 8px;font-weight:500}

.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  position:relative;
}
.step{
  padding:clamp(22px, 2vw, 32px) clamp(18px, 1.6vw, 26px) clamp(28px, 2.4vw, 36px);
  border-right:1.5px solid var(--ink);position:relative;cursor:default;
  transition:background .25s;min-width:0;
}
.step:last-child{border-right:0}
.step:hover{background:rgba(228,200,120,.16)}
.step .n{
  font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:clamp(40px, 3vw + 14px, 58px);
  letter-spacing:-2.5px;line-height:1;color:var(--accent);
  transition:transform .25s;
}
.step:hover .n{transform:translateX(2px)}
.step .stage-lbl{
  font-family:var(--mono);font-size:10px;letter-spacing:2.2px;
  color:var(--ink-2);text-transform:uppercase;margin:8px 0 14px;font-weight:500;
}
.step h3{
  font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:var(--t-h3);
  line-height:1;letter-spacing:-1px;margin:0 0 12px;text-wrap:balance;
}
.step p{
  font-family:var(--serif);font-size:clamp(13px, 0.3vw + 12px, 14.5px);
  line-height:1.6;margin:0;color:var(--ink-2);
}
.step .arrow{
  position:absolute;top:46px;right:-13px;z-index:2;
  width:24px;height:24px;background:var(--paper);
  border:1.5px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:600;color:var(--accent);font-size:14px;
  transition:transform .25s, background .25s;
}
.step:hover .arrow{transform:translateX(3px);background:var(--mustard)}
.step:last-child .arrow{display:none}

/* ============================================================ */
/*  IV — LES FORMATS                                             */
/* ============================================================ */
.formats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px, 2.5vw, 40px)}
.format{display:flex;flex-direction:column;gap:14px;position:relative;transition:transform .2s;min-width:0}
.format:hover{transform:translateY(-3px)}
.format .visual{
  aspect-ratio: 4/3;
  border:1.5px solid var(--ink);background:var(--paper-2);
  overflow:hidden;position:relative;box-shadow:var(--shadow-card);
}
.format .visual image-slot{width:100%;height:100%;--is-bg:#d7cdaf;--is-fg:#8a7a66;--is-border:none}
.format .cat{
  font-family:var(--mono);font-size:10.5px;letter-spacing:2.2px;
  color:var(--accent);text-transform:uppercase;font-weight:500;
}
.format h3{
  font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:clamp(22px, 1.4vw + 12px, 30px);
  line-height:.98;letter-spacing:-1.1px;margin:0;text-wrap:balance;
}
.format p{
  font-family:var(--serif);
  font-size:clamp(13.5px, 0.35vw + 12px, 14.5px);
  line-height:1.6;color:var(--ink-2);
}
.format .price{
  font-family:var(--mono);font-size:11px;color:var(--ink);
  letter-spacing:1.2px;border-top:1px dashed var(--ink);padding-top:10px;
  margin-top:auto;display:flex;justify-content:space-between;align-items:center;
  text-transform:uppercase;font-weight:500;gap:10px;
}
.format .price .go{
  color:var(--accent);transition:transform .2s;display:inline-block;font-size:13px;
}
.format:hover .price .go{transform:translateX(3px)}

/* ============================================================ */
/*  V — PULL QUOTE                                               */
/* ============================================================ */
.quote-block{
  padding:clamp(56px, 6vw, 90px) var(--gutter-x);
  border-bottom:1.5px solid var(--ink);
  display:grid;grid-template-columns:minmax(0,1fr) clamp(220px, 22vw, 320px);
  gap:clamp(32px, 4vw, 64px);align-items:center;
  background:linear-gradient(180deg, rgba(228,200,120,.08) 0%, rgba(228,200,120,.18) 100%);
  position:relative;
}
.quote-block::before{
  content:"V.";position:absolute;top:clamp(20px, 2.5vw, 36px);left:var(--gutter-x);
  font-family:var(--serif);font-weight:900;font-size:18px;letter-spacing:1px;color:var(--ink-2);
}
.quote-block blockquote{
  margin:0;font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:var(--t-quote);
  line-height:1.05;letter-spacing:-.035em;text-wrap:balance;color:var(--ink);position:relative;
}
.quote-block blockquote::before{
  content:"«";color:var(--accent);font-weight:400;font-size:1.1em;margin-right:8px;line-height:1;
}
.quote-block blockquote::after{
  content:"»";color:var(--accent);font-weight:400;font-size:1.1em;margin-left:8px;
}
.quote-block blockquote em{
  background:var(--mustard);font-style:italic;padding:0 10px 2px;
  display:inline-block;transform:rotate(-1deg);
}
.quote-block cite{display:block;font-style:normal;font-family:var(--serif)}
.quote-block cite strong{
  font-family:var(--serif);font-weight:900;font-style:normal;
  font-size:18px;color:var(--ink);letter-spacing:-.4px;
}
.quote-block cite .meta{
  display:block;font-style:italic;
  font-size:clamp(13px, 0.3vw + 12px, 14.5px);
  color:var(--ink-2);margin-top:6px;line-height:1.45;
}
.quote-block cite::before{
  content:"";display:block;width:36px;height:1.5px;background:var(--ink);margin-bottom:16px;
}

/* ============================================================ */
/*  VI — MATHILDE                                                */
/* ============================================================ */
.author{
  padding:var(--gutter-y) var(--gutter-x);
  display:grid;grid-template-columns: clamp(320px, 32vw, 440px) minmax(0,1fr);
  gap:var(--gap-lg);
  border-bottom:1.5px solid var(--ink);align-items:center;position:relative;
}
.author-photo{position:relative;aspect-ratio: 4/5;width:100%}
.author-photo .frame{
  width:100%;height:100%;border:1.5px solid var(--ink);
  background:var(--paper-2);overflow:hidden;box-shadow:var(--shadow-card);position:relative;
}
.author-photo .frame image-slot{width:100%;height:100%;--is-bg:#d7cdaf;--is-fg:#8a7a66;--is-border:none}
.author-photo .photo-cap{
  position:absolute;bottom:18px;left:18px;right:18px;
  background:var(--paper);border:1.5px solid var(--ink);
  padding:8px 12px;font-family:var(--serif);font-style:italic;font-size:12px;
  color:var(--ink);line-height:1.35;box-shadow:2px 2px 0 rgba(35,27,20,.1);
}
.author-photo .photo-cap small{
  display:block;font-family:var(--mono);font-style:normal;font-size:8.5px;
  letter-spacing:1.4px;color:var(--ink-2);margin-top:2px;text-transform:uppercase;
}

.author-body{min-width:0}
.author-body .label{
  font-family:var(--mono);font-size:11px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:22px;font-weight:500;
  display:flex;align-items:center;gap:10px;
}
.author-body .label::before{content:"";display:inline-block;width:24px;height:1.5px;background:var(--ink-2)}
.author-body h2{
  font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:var(--t-h2);
  line-height:.93;letter-spacing:-.04em;margin:0 0 28px;text-wrap:balance;
}
.author-body h2 em{font-style:italic;color:var(--accent)}
.author-body .bio p{
  font-family:var(--serif);font-size:clamp(15px, 0.4vw + 13.5px, 16.5px);
  line-height:1.65;color:var(--ink-2);margin:0 0 16px;max-width:60ch;
}
.author-body .bio p:first-child::first-letter{
  font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:clamp(46px, 3vw + 22px, 60px);
  float:left;line-height:.85;padding:6px 10px 0 0;color:var(--accent);
}
.author-body .creds{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}

/* ============================================================ */
/*  VII — FOOTER                                                 */
/* ============================================================ */
.footer{
  padding:clamp(50px, 5.5vw, 70px) var(--gutter-x) clamp(36px, 4vw, 50px);
  background:var(--ink);color:var(--paper);
  display:grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap:clamp(28px, 3.5vw, 48px);position:relative;
}
.footer::before{
  content:"VII.";position:absolute;top:clamp(20px, 2vw, 32px);right:var(--gutter-x);
  font-family:var(--serif);font-style:italic;font-weight:900;font-size:22px;color:rgba(241,235,219,.4);
}
.footer h4{
  font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:clamp(26px, 1.8vw + 14px, 38px);
  margin:0 0 16px;letter-spacing:-1.6px;line-height:1;text-wrap:balance;
}
.footer .sub{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(13px, 0.3vw + 12px, 14px);
  color:#c8c1b3;line-height:1.55;margin-bottom:22px;max-width:340px;
}
.footer .form{display:flex;max-width:380px}
.footer .form input{
  flex:1;min-width:0;background:transparent;border:1.5px solid #6a5e4d;border-right:0;
  color:var(--paper);padding:13px 16px;
  font-family:var(--serif);font-style:italic;font-size:13px;outline:none;
  transition:border-color .15s;
}
.footer .form input:focus{border-color:var(--mustard)}
.footer .form input::placeholder{color:#8a8170}
.footer .form .btn{
  border-radius:0;border-color:var(--mustard);background:var(--mustard);
  color:var(--ink);font-style:italic;font-weight:600;padding:13px 18px;
}
.footer .form .btn:hover{background:#f0d790;color:var(--ink);box-shadow:none;transform:none;border-color:var(--mustard)}

.footer .col-title{
  font-family:var(--mono);font-size:10.5px;letter-spacing:2.5px;
  text-transform:uppercase;margin-bottom:18px;color:var(--mustard);font-weight:500;
}
.footer .col a{
  display:flex;justify-content:space-between;gap:8px;
  font-family:var(--serif);font-style:italic;font-size:14px;color:#c8c1b3;
  padding:8px 0;border-bottom:1px solid rgba(241,235,219,.08);
  transition:color .15s, padding .15s;cursor:pointer;
}
.footer .col a:hover{color:var(--paper);padding-left:6px}
.footer .col a span{font-family:var(--mono);font-size:10px;color:#8a8170;letter-spacing:1px}

.colophon{
  padding:20px var(--gutter-x);background:#1a130c;color:#7a6d5e;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
}
.colophon a{color:#a89888;transition:color .15s}
.colophon a:hover{color:var(--mustard)}

/* ============================================================ */
/*  RESPONSIVE BREAKPOINTS                                       */
/*  ----------------------------------------------------------- */
/*  Most scaling is handled by clamp(). Breakpoints only handle  */
/*  GRID COLLAPSES — where 2-col layouts must stack.             */
/* ============================================================ */

/* TABLET — 1024px and below */
@media (max-width: 1024px){
  .navlinks{gap:18px}
  .navlinks a{font-size:13px}

  /* Section grids collapse to single column */
  .split{grid-template-columns:1fr;gap:32px}
  .split .section-num{font-size:clamp(48px, 8vw, 72px)}

  /* Hero stays 2-col but tighter */
  .hero{grid-template-columns: minmax(0,1fr) clamp(260px, 30vw, 340px)}

  /* Quiz stays 2 col but post-it shrinks */
  .quiz-wrap{grid-template-columns: minmax(0,1.2fr) minmax(0,1fr)}

  /* Formats: 2 col */
  .formats-grid{grid-template-columns:repeat(2, minmax(0,1fr))}

  /* Author: stays 2-col */
  .author{grid-template-columns: clamp(280px, 36vw, 380px) minmax(0,1fr)}

  /* Footer: 2x2 */
  .footer{grid-template-columns: 1fr 1fr}
  .footer > div:first-child{grid-column:1/-1}

  /* Steps: 2x2 */
  .steps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .step{border-bottom:1.5px solid var(--ink)}
  .step:nth-child(odd){border-right:1.5px solid var(--ink)}
  .step:nth-child(even){border-right:0}
  .step:nth-child(n+3){border-bottom:0}
  .step .arrow{display:none}
}

/* MOBILE — 760px and below */
@media (max-width: 760px){
  .page{box-shadow:none}

  /* Nav: hide links, show hamburger */
  .nav{padding:18px var(--gutter-x);gap:12px}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1.5px solid var(--ink);
    flex-direction:column;align-items:stretch;padding:18px var(--gutter-x);
    gap:0;}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 0;border-bottom:1px dashed var(--line-soft);font-size:16px}
  .navlinks a:last-child{border-bottom:0}
  .navlinks a:not(.cur)::after,.navlinks a.cur::after{display:none}
  .lang{display:none}
  .menu-toggle{display:inline-flex}
  .nav-right .btn{padding:9px 14px;font-size:12.5px}

  /* Hero: 1 col */
  .hero{grid-template-columns:1fr;gap:44px;padding-bottom:50px}
  .hero-right{align-items:center;width:100%}
  .cover-wrap{align-self:center;max-width:300px}
  .seal{left:-8%}
  .hero-stats .stat{grid-template-columns: 100px 1fr}

  /* Quiz: stack */
  .quiz-wrap{grid-template-columns:1fr}
  .answers{grid-template-columns:1fr}
  .quiz-foot{flex-direction:column;align-items:stretch}
  .quiz-foot .quiz-next{width:100%}
  .score-panel{transform:rotate(0)}
  .score-panel::before{display:none}

  /* Approach: 1 col */
  .steps{grid-template-columns:1fr}
  .step{border-right:0!important;border-bottom:1.5px solid var(--ink)!important}
  .step:last-child{border-bottom:0!important}

  /* Formats: 1 col */
  .formats-grid{grid-template-columns:1fr}

  /* Quote: 1 col */
  .quote-block{grid-template-columns:1fr;gap:28px}
  .quote-block::before{position:static;display:block;margin-bottom:12px}

  /* Author: 1 col */
  .author{grid-template-columns:1fr;gap:32px}
  .author-photo{max-width:420px;margin:0 auto}

  /* Footer: 1 col */
  .footer{grid-template-columns:1fr}
  .footer > div:first-child{grid-column:auto}
  .footer::before{display:none}
}

@media (max-width: 420px){
  .hero-stats .stat{grid-template-columns: 1fr;gap:4px;align-items:flex-start}
  .hero-stats .stat span{margin-top:2px}
  .hero-ctas .btn{width:100%}
  .quiz-head{flex-direction:column;align-items:flex-start;gap:8px}
}