/* ============================================================
   THE DIPLOMATIC — Design System (folha compartilhada)
   Base: SPEC-SITE-THE-DIPLOMATIC.md · protótipo aprovado
   ============================================================ */

/* ---------- FONTES REAIS ---------- */
@font-face{font-family:"Griffiths";src:url("assets/fonts/Griffiths-58989943/Griffiths.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Griffiths";src:url("assets/fonts/Griffiths-58989943/Griffiths Bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Luxodia";src:url("assets/fonts/Luxodia-Signature-149736603/Luxodia Signature One.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Nautica";src:url("assets/fonts/Nautica/Nautica.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Heuristica";src:url("assets/fonts/euristic/Heuristica-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Heuristica";src:url("assets/fonts/euristic/Heuristica-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Heuristica";src:url("assets/fonts/euristic/Heuristica-Bold.otf") format("opentype");font-weight:700;font-display:swap}

/* ---------- TOKENS ---------- */
:root{
  --navy:#0c1c2e; --navy-deep:#081422; --navy-2:#0a1826; --navy-soft:#13293f;
  --cream:#f8f2e8; --cream-2:#f8f2e8; --ink:#1c1710; --ink-soft:#5c5544;
  --line:#c9bda2; --line-navy:#33465c;
  --accent:#9c7b46; --accent-soft:#c0a373;
  --grey:#d8d4cb; --grey-navy:#22323f;   /* bloco cinza placeholder */
  --fd:"Griffiths",Georgia,serif; --fs:"Luxodia",cursive; --fb:"Heuristica",Georgia,serif;
  --fl:"Helvetica Neue",Arial,system-ui,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--fb);color:var(--ink);background:var(--cream);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.15;mix-blend-mode:overlay;background-image:url("assets/noise.png");background-size:240px 240px;background-repeat:repeat}
img{max-width:100%;display:block}
/* INTRO / PRELOADER */
#intro{position:fixed;inset:0;z-index:9999;background:var(--navy);display:flex;align-items:center;justify-content:center;will-change:transform}
#intro .intro-logo{width:min(460px,68vw);height:auto;opacity:0;transform:scale(.82);will-change:transform,opacity}
body.intro-active{overflow:hidden}
a{color:inherit}

/* ---------- UTIL ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 44px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 44px}
.eyebrow{font-family:var(--fl);text-transform:uppercase;letter-spacing:.32em;font-size:.68rem;color:var(--accent)}
.script{font-family:var(--fs);font-weight:400}
.display{font-family:var(--fd);font-weight:400;line-height:1.05}
.sec{padding:118px 0}
.sec.navy{background:var(--navy);color:var(--cream)}
.sec.alt{background:var(--cream-2)}
.sec.navy .eyebrow{color:var(--accent-soft)}
.rule{width:54px;height:1px;background:var(--accent);border:0;margin:22px 0}
.center{text-align:center}.center .rule{margin:22px auto}
.lead{font-size:1.3rem;color:var(--ink)}
.muted{color:var(--ink-soft)}
.navy .muted{color:#c2cedb}

/* ---------- BLOCO CINZA (placeholder de imagem) ---------- */
.ph{position:relative;background:var(--grey);border:1px solid var(--line);display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden}
.navy .ph, .ph.on-navy{background:var(--grey-navy);border-color:var(--line-navy)}
.ph .lbl{font-family:var(--fl);text-transform:uppercase;letter-spacing:.16em;font-size:.56rem;color:#8a8577;padding:12px 14px;line-height:1.4;max-width:90%}
.navy .ph .lbl, .ph.on-navy .lbl{color:#93a3b4}
.ph::after{content:"⟠";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.6rem;color:#b7b1a4;opacity:.5;z-index:1}
.navy .ph::after,.ph.on-navy::after{color:#3f5266}
/* camada interna oversized do parallax (estilo Kettmeir) */
.td-par{position:absolute;left:0;top:-14%;width:100%;height:128%;will-change:transform;z-index:0;background-color:var(--grey);background-image:linear-gradient(158deg,rgba(255,255,255,.06),rgba(0,0,0,0) 42%,rgba(0,0,0,.12))}
.navy .td-par,.on-navy .td-par{background-color:var(--grey-navy);background-image:linear-gradient(158deg,rgba(255,255,255,.05),rgba(0,0,0,0) 42%,rgba(0,0,0,.28))}
.ph > img.td-par,img.td-par{object-fit:cover;background:none}
.ph .lbl{position:relative;z-index:1}
/* slot preenchido com foto real */
.ph.has-photo::after{display:none}
.ph.has-photo .lbl{display:none}
.ph > img:not(.td-par){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* cameo: perfil NÃO-fotográfico (perfis reais sem foto disponível ou perfis fictícios) — evita rosto de IA ou de terceiro */
.ph.cameo::after{display:none}
.ph.cameo .cameo-emblem{position:absolute;inset:auto;top:44%;left:50%;transform:translate(-50%,-50%);width:auto;height:44%;max-width:58%;object-fit:contain;opacity:.3;z-index:0}
.navy .ph.cameo .cameo-emblem,.ph.cameo.on-navy .cameo-emblem{filter:brightness(0) invert(1);opacity:.5}
.ph.cameo .lbl{display:block;position:relative;z-index:1}
/* reveal de títulos linha a linha (estilo Kettmeir) */
.line-mask{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.line-inner{display:block;will-change:transform}
.sw{display:inline-block}

/* ---------- BOTÃO (cor de ação única) ---------- */
.btn{display:inline-block;font-family:var(--fl);text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;padding:6px 0;border:none;border-radius:0;color:var(--accent);text-decoration:none;background:transparent;transition:.3s;cursor:pointer}
.btn:hover{background:transparent;color:var(--ink)}
.btn.solid{background:var(--accent);color:var(--navy-deep);padding:15px 32px}
.btn.solid:hover{background:var(--accent-soft);color:var(--navy-deep)}
.navy .btn{color:var(--cream)}
.navy .btn:hover{background:transparent;color:#fff}
.navy .btn.solid{background:var(--accent);color:var(--navy-deep)}
.navy .btn.solid:hover{background:var(--accent-soft);color:var(--navy-deep)}
.textlink{font-family:var(--fl);text-transform:uppercase;letter-spacing:.18em;font-size:.64rem;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:4px;color:var(--ink)}
.navy .textlink{color:var(--cream)}
.micro{font-size:.82rem;color:var(--ink-soft);font-style:italic;margin-top:12px}
.navy .micro{color:#9fb0c2}

/* ---------- TOPLINE + NAV ---------- */
.topline{background:var(--navy-2);color:var(--cream);text-align:center;font-family:var(--fl);text-transform:uppercase;letter-spacing:.34em;font-size:.58rem;padding:8px}
header.nav{position:sticky;top:0;z-index:50;background:rgba(248,242,232,.92);backdrop-filter:blur(6px)}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 44px}
.nav a{text-decoration:none;color:var(--navy)}
.nl,.nr{display:flex;gap:25px;align-items:center;font-family:var(--fb);text-transform:uppercase;letter-spacing:.2em;font-size:.75rem}
.nr{justify-content:flex-end}
.nav a.active{color:var(--accent)}
.brand{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none}
.logo-emblem{height:48px;width:auto}
.logo-word{height:32px;width:auto;display:block}
.brandword{font-family:var(--fd);letter-spacing:.24em;font-size:.7rem;color:var(--ink)}
.lang{opacity:.55}
.join{color:var(--navy)}
.navtoggle{display:none;background:none;border:0;font-family:var(--fl);text-transform:uppercase;letter-spacing:.18em;font-size:.66rem;cursor:pointer}

/* ---------- PAGE HERO (páginas internas) ---------- */
.page-hero{padding:90px 0 60px;text-align:center}
.page-hero.navy{background:var(--navy);color:var(--cream);padding:110px 0 90px}
.page-hero h1{font-family:var(--fd);font-weight:400;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.02;margin:10px 0}
.page-hero h1.big-title{font-size:clamp(3rem,8vw,6.6rem);line-height:1.02}
.page-hero .sub{max-width:620px;margin:0 auto;color:var(--ink-soft);font-size:1.1rem}
.page-hero.navy .sub{color:#c2cedb}

/* ---------- HOME: HERO ---------- */
.hero{padding:14px 0 0}
.hero .wrap{max-width:1360px;padding:0 44px}
/* altura adaptada à tela: hero enxuto, deixando só uma fresta da faixa "Apresentado por" espiar (continuidade) */
.hero .box{position:relative;height:calc(100svh - 118px);min-height:420px;background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero .box .hero-media{position:absolute;left:0;top:-14%;width:100%;height:128%;object-fit:cover;z-index:0;will-change:transform}
.hero .box::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,34,.32) 0%,rgba(8,20,34,.12) 40%,rgba(8,20,34,.62) 100%);z-index:1}
.hero .box::after{content:"";position:absolute;bottom:14px;right:16px;font-family:var(--fl);text-transform:uppercase;letter-spacing:.14em;font-size:.54rem;color:#c9d3dd}
.hero .script{font-size:clamp(2rem,4vw,3rem);color:var(--accent);margin-bottom:2px}
.hero h1{font-family:var(--fd);font-weight:400;font-size:clamp(2.8rem,6vw,5rem);line-height:1.06;max-width:1040px;background:transparent;padding:0 26px;color:var(--cream);text-shadow:0 2px 34px rgba(0,0,0,.5);position:relative;z-index:2}

/* ---------- HOME: FEATURE ---------- */
.feat{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:center}
.feat .kicker{font-family:var(--fs);font-size:1.6rem;color:var(--accent)}
.feat-emblem{height:56px;width:auto;display:block;margin-bottom:24px}
.feat h2{font-family:var(--fd);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.16;margin-top:8px}
.feat p{color:var(--ink-soft);margin-top:20px;max-width:440px}
.feat .author{font-style:italic;color:var(--ink-soft);margin-top:16px;font-size:.9rem}
.feat .ph{aspect-ratio:4/5;max-height:82vh}

/* ---------- HOME: THE TRUTH / manifesto navy ---------- */
.truth{text-align:center;max-width:780px;margin:0 auto}
.truth .kicker{font-family:var(--fl);text-transform:uppercase;letter-spacing:.3em;font-size:.6rem;color:#8ba0b6;margin-bottom:22px}
.truth .script{font-size:clamp(2.4rem,5vw,3.6rem);color:var(--accent-soft)}
.truth h2{font-family:var(--fd);font-weight:400;font-size:clamp(2.3rem,5.2vw,4rem);margin-top:4px}
.truth p{color:#c2cedb;margin:26px auto 34px;max-width:560px;font-size:.9rem}

/* ---------- HOME: MAGAZINE ---------- */
.mag{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.mag h2{font-family:var(--fd);font-weight:400;font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.18}
.mag p{color:var(--ink-soft);margin:22px 0 30px}
.mag .imgs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mag .imgs .ph{aspect-ratio:3/4}
.big-img{aspect-ratio:16/9;min-height:460px;width:100%}
/* Imagem que abre no scroll (ref. Kettmeir) */
.openimg{position:relative}
.openimg .openimg__img{position:relative;width:min(1180px,92vw);aspect-ratio:16/9;margin:70px auto}
.openimg__marquee{display:none}
/* modo animado (JS ativo) */
.openimg.is-open .openimg__stage{height:100vh;overflow:hidden;position:relative}
.openimg.is-open .openimg__img{position:absolute;inset:0;left:50%;transform:translateX(-50%);width:100vw;height:100%;aspect-ratio:auto;margin:0}
.openimg.is-open .openimg__marquee{display:flex;position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;z-index:2;pointer-events:none;font-family:var(--fd);font-style:italic;font-size:clamp(1.8rem,3.6vw,3.6rem);letter-spacing:.02em;color:rgba(247,243,233,.92);text-shadow:0 2px 22px rgba(0,0,0,.45)}
.fullbleed-img{width:100%;height:64vh;min-height:440px;border-left:0;border-right:0}

/* ---------- Transição de página: cortina azul ---------- */
/* Transição diagonal (transversal): painel oversized rotacionado deslizando canto a canto (sup-esq -> inf-dir) */
.td-wipe{position:fixed;top:50%;left:50%;width:210vmax;height:210vmax;margin:-105vmax 0 0 -105vmax;z-index:99999;background:var(--navy);transform:rotate(-32deg) translateX(-225vmax);transition:transform .95s cubic-bezier(.62,0,.15,1);pointer-events:none;will-change:transform}
.td-wipe::after{content:"";position:absolute;inset:0;background-image:url("assets/noise.png");background-size:240px 240px;background-repeat:repeat;opacity:.06;mix-blend-mode:normal;pointer-events:none}
.td-wipe.is-cover{transform:rotate(-32deg) translateX(0)}
.td-wipe.is-open{transform:rotate(-32deg) translateX(225vmax)}
.td-wipe.no-anim{transition:none}
@media (prefers-reduced-motion: reduce){ .td-wipe{display:none!important} }

/* ---------- HOME: OUR COVERS ---------- */
.covers{text-align:center}
.covers h2{font-family:var(--fd);font-weight:400;font-size:clamp(1.8rem,3.6vw,2.6rem);margin:8px 0}
.covers .cover{max-width:560px;margin:26px auto 0;aspect-ratio:4/3}
.covers .cap{font-family:var(--fd);font-size:1.3rem;margin-top:18px}
.covers .dots{margin-top:14px;color:var(--line);letter-spacing:.4em}

/* ---------- HOME: EMBASSY NIGHT ---------- */
.embassy{display:grid;grid-template-columns:1fr .8fr;gap:54px;align-items:center}
.embassy .big{font-family:var(--fd);font-weight:400;font-size:clamp(2.6rem,6.5vw,4.8rem);line-height:1.05;letter-spacing:.06em}
.embassy .eoy{font-family:var(--fl);text-transform:uppercase;letter-spacing:.3em;font-size:.66rem;color:#8ba0b6;margin-top:18px}
.embassy .ph{aspect-ratio:1/1}
.embassy-stack{position:relative;display:flex;align-items:flex-start;min-height:80vh;padding-top:6vh}
.embassy-img{position:absolute;right:0;top:0;bottom:auto;width:70%;aspect-ratio:16/9}
.embassy-img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,20,34,.7),rgba(8,20,34,.1))}
.embassy-overlay{position:relative;z-index:2;width:72%;text-align:left}
.embassy-overlay .big{font-family:var(--fd);font-weight:400;font-size:clamp(2.8rem,6.4vw,6.4rem);line-height:1.04;letter-spacing:.03em;position:relative;z-index:2;white-space:nowrap}
.embassy-overlay .muted{max-width:370px;margin:22px 0 0}

/* ---------- HOME/PAGE: GUIA ---------- */
.guia{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.guia h2{font-family:var(--fd);font-weight:400;font-size:clamp(1.9rem,3.8vw,2.8rem)}
.guia .it{font-style:italic;color:var(--ink-soft);margin-top:8px}
.guia p{color:var(--ink-soft);margin:22px 0 28px;max-width:420px}
.guia .ph{aspect-ratio:4/3}
.guia .guia-illu{visibility:hidden}
.guia .guia-cap{font-style:italic;text-align:right;max-width:360px;margin:18px 0 0 auto;font-size:.9rem}

/* ---------- SELO DE EXCELÊNCIA (stepper) ---------- */
.selo-head{max-width:640px;margin-bottom:34px}
.selo-progress{position:relative;height:1px;background:var(--line);margin-bottom:48px}
.selo-bar{position:absolute;left:0;top:0;height:1px;background:var(--navy);width:25%;transition:width .4s ease}
.selo-viewer{display:grid;grid-template-columns:130px 1px 1fr 34%;gap:44px;align-items:start;min-height:340px}
.selo-num{font-family:var(--fd);color:var(--navy);line-height:1}
.selo-num #seloNum{font-size:3.4rem}
.selo-num .selo-tot{font-size:1rem;color:var(--ink-soft);margin-left:6px}
.selo-rule{width:1px;height:100%;min-height:240px;background:var(--line)}
.selo-body h3{font-family:var(--fd);font-weight:400;text-transform:uppercase;color:var(--navy);letter-spacing:.03em;font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:22px}
.selo-body p{color:var(--ink-soft);max-width:440px}
.selo-media{aspect-ratio:3/4}
.selo-nav{display:flex;gap:14px;margin-top:32px}
.selo-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--navy);background:transparent;color:var(--navy);cursor:pointer;font-size:1.1rem;line-height:1;transition:.25s}
.selo-arrow:hover{background:var(--navy);color:var(--cream)}

/* ---------- FORNECEDORES COM O SELO (Guia) ---------- */
.selo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.selo-card{border:1px solid rgba(28,23,16,.12);background:#fbf6ee;padding:22px 24px}
.selo-card__cat{font-family:var(--fl);text-transform:uppercase;letter-spacing:.16em;font-size:.6rem;color:var(--accent)}
.selo-card__name{font-family:var(--fd);font-size:1.2rem;color:var(--navy);margin:8px 0 12px;line-height:1.2}
.selo-card__seal{font-family:var(--fl);text-transform:uppercase;letter-spacing:.14em;font-size:.58rem;color:var(--ink-soft)}

/* ---------- COLEÇÃO 13 NAÇÕES (Edições) ---------- */
.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px}
.colcard{display:block;text-decoration:none;color:inherit}
.colcard .ph{aspect-ratio:3/4;margin-bottom:10px}
.colcard .cc-cap{font-family:var(--fl);text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;color:var(--ink-soft)}
.colcard--soon .soonbox{aspect-ratio:3/4;background:var(--navy);color:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:1.7rem;margin-bottom:10px;opacity:.5;border:1px solid var(--line-navy)}

/* ---------- NEWSLETTER ---------- */
.news{text-align:center;max-width:640px;margin:0 auto}
.news h2{font-family:var(--fd);font-weight:400;font-size:clamp(1.9rem,4vw,2.8rem)}
.news p{color:#c2cedb;margin:18px 0 30px}
.news .form{display:flex;gap:10px;max-width:470px;margin:0 auto}
.news input{flex:1;padding:15px 18px;border:1px solid var(--line-navy);background:transparent;color:var(--cream);font-family:var(--fb)}
.news input::placeholder{color:#7d8da0}
.news .small{font-size:.78rem;color:#8ba0b6;margin-top:14px}

/* ---------- GRID DE ARTIGOS / CARDS ---------- */
.filters{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 auto 54px}
.filters a{font-family:var(--fd);letter-spacing:.03em;font-size:1.5rem;line-height:1.15;padding:4px 64px;border:1px solid var(--navy);border-radius:40px;text-decoration:none;color:var(--navy);transition:.25s}
.filters a:hover{background:var(--navy);color:var(--cream)}
.filters a.on{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.form-ok{font-family:var(--fb);color:var(--ink);margin-top:16px;font-style:italic}
.navy .form-ok{color:var(--cream)}
.artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.artgrid.two{grid-template-columns:repeat(2,1fr)}
.artcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fbf6ee;border:1px solid var(--line);border-radius:3px;overflow:hidden;box-shadow:none;transition:border-color .3s ease,background .3s ease}
.artcard:hover{border-color:var(--ink);background:#fdfaf4}
.artcard .ph{aspect-ratio:4/3;margin:0;border:0}
/* capa do card: mantém o parallax, mas com zoom mais suave pra não cortar cabeça */
.artcard .td-par{top:-6%;height:112%}
.artcard .cat{display:none}
.artcard h3{font-family:var(--fd);font-weight:400;text-transform:uppercase;color:var(--navy);letter-spacing:.02em;font-size:1.2rem;line-height:1.22;margin:0 0 10px;padding:24px 24px 0}
.artcard p{color:var(--ink-soft);font-size:.9rem;margin-bottom:18px;padding:0 24px}
.artcard .meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--fl);text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;color:var(--ink-soft);margin-top:auto;padding:16px 24px}
.artcard .meta::after{content:"Ler";font-family:var(--fl);text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;background:var(--navy);color:var(--cream);padding:10px 24px;border-radius:3px;white-space:nowrap}

/* ---------- TALK CARD ---------- */
.talkgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:60px}
.talk .ph{aspect-ratio:5/4;margin-bottom:24px}
.talk .role{font-family:var(--fd);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--accent);margin-bottom:16px}
.talk h3{font-family:'Nautica',cursive;font-weight:400;font-size:2.3rem;line-height:1;margin:8px 0 14px}
.talk p{color:var(--ink-soft);font-size:.95rem;margin-bottom:20px}
/* Botão pílula = mesmo design dos chips de filtro da Revista (Griffiths itálico, contorno) */
.btn-pill{display:inline-block;font-family:var(--fd);letter-spacing:.03em;font-size:1.4rem;line-height:1.15;padding:6px 40px;border:1px solid var(--navy);border-radius:40px;text-decoration:none;color:var(--navy);background:transparent;transition:.25s}
.btn-pill .arw{display:none}
.btn-pill:hover{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.navy .btn-pill{border-color:var(--cream);color:var(--cream)}
.navy .btn-pill:hover{background:var(--cream);color:var(--navy-deep);border-color:var(--cream)}

/* ---------- FEATURE DESTAQUE (perfil grande) ---------- */
.spotlight{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:80px}
.spotlight .ph{aspect-ratio:4/5}
.spotlight .role{font-family:var(--fl);text-transform:uppercase;letter-spacing:.18em;font-size:.62rem;color:var(--accent)}
.spotlight h2{font-family:var(--fd);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.15;margin:8px 0 16px}
.spotlight p{color:var(--ink-soft)}

/* ---------- CITAÇÃO (Talks spotlight, ref. Kettmeir) ---------- */
.quote-block{display:grid;grid-template-columns:1.1fr .7fr;gap:120px;align-items:center}
.quote-text{font-family:var(--fd);font-weight:400;color:var(--navy);font-size:clamp(1.6rem,3.1vw,2.6rem);line-height:1.3}
.quote-author{font-family:var(--fd);text-transform:uppercase;color:var(--navy);letter-spacing:.06em;font-size:1.05rem;margin-top:34px}
.quote-role{font-style:italic;color:var(--accent);font-size:.95rem;margin-top:4px}
.quote-media{position:relative;aspect-ratio:4/5;background:var(--grey);overflow:hidden}
.quote-media .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;border:1px solid rgba(255,255,255,.9);background:rgba(12,28,46,.22);cursor:pointer;transition:.25s}
.quote-media .play:hover{background:rgba(12,28,46,.42)}
.quote-media .play::after{content:"";position:absolute;top:50%;left:56%;transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.quote-caption{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;background:linear-gradient(0deg,rgba(8,20,34,.82),rgba(8,20,34,0));color:#fff;display:flex;flex-direction:column;gap:3px}
.quote-caption strong{font-family:var(--fd);font-weight:400;font-size:1.05rem;letter-spacing:.02em}
.quote-caption span{font-size:.8rem;opacity:.85}

/* ---------- TEMPLATE ARTIGO ---------- */
.article{max-width:720px;margin:0 auto}
.article .cat{font-family:var(--fl);text-transform:uppercase;letter-spacing:.2em;font-size:.62rem;color:var(--accent);text-align:center;display:block}
.article h1{font-family:var(--fd);font-weight:400;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.08;text-align:center;margin:12px 0}
.article .byline{text-align:center;font-style:italic;color:var(--ink-soft);margin-bottom:30px}
.article .hero-img{aspect-ratio:16/9;margin:0 0 12px}
.article .caption{font-size:.82rem;color:var(--ink-soft);font-style:italic;text-align:center;margin-bottom:40px}
.article p{margin-bottom:22px;font-size:1.08rem}
.article .signoff{margin-top:40px;padding:20px;border:1px solid var(--line);background:var(--cream-2);font-size:.86rem;color:var(--ink-soft);font-style:italic}
.article .pull{margin:30px 0;padding:6px 0 6px 26px;border-left:3px solid var(--accent);font-family:var(--fd,Georgia,serif);font-size:1.26rem;line-height:1.5;font-style:italic;color:var(--navy)}
/* Cabeçalho de carta / timbre do artigo */
.letterhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:32px;margin-bottom:48px;text-align:left}
.lh-left{flex:1 1 320px}
.letterhead .lh-name{font-family:'Nautica',cursive;font-weight:400;font-size:clamp(2.8rem,6vw,4.4rem);line-height:.95;color:var(--navy);margin:0;text-align:left}
.lh-sub{font-family:var(--fd);font-style:italic;font-size:clamp(1.25rem,2.6vw,1.9rem);line-height:1.15;color:var(--ink-soft);margin-top:6px}
.lh-meta{font-family:var(--fl);text-transform:uppercase;letter-spacing:.2em;font-size:.62rem;color:var(--accent);margin-top:22px}
.lh-byline{font-style:italic;color:var(--ink-soft);font-size:.92rem;margin-top:8px}
.lh-right{flex:0 0 auto;padding-top:8px}
.lh-logo{height:92px;width:auto;display:block}
/* Drop cap (capitular) na 1ª letra do corpo, estilo carta */
.article>p:first-of-type::first-letter{font-family:'Nautica',cursive;font-size:3.6rem;line-height:.9;float:left;margin:-.28em .14em .12em 0;color:var(--navy)}
/* Imagem no meio do texto — o texto contorna (float) */
.letter-figure{float:left;width:264px;margin:8px 36px 20px 0}
.letter-figure .ph{aspect-ratio:auto;margin:0;background:transparent;border:0;display:block;overflow:visible}
/* imagem inteira, sem corte — vence o parallax (.td-par) das animações */
.letter-figure .ph > img{position:static!important;inset:auto!important;width:100%!important;height:auto!important;object-fit:contain!important;transform:none!important;border:1px solid var(--line);display:block}
.letter-figure figcaption{font-size:.78rem;font-style:italic;color:var(--ink-soft);margin-top:8px;text-align:left}
/* Capa da matéria — imagem inteira, sem corte de cabeça nem borda cinza */
.article-cover{margin:0 0 30px;text-align:center}
.article-cover img{position:static!important;max-width:100%;max-height:78vh;width:auto!important;height:auto!important;object-fit:contain!important;transform:none!important;display:inline-block;border:1px solid var(--line)}
.article-cover figcaption{font-size:.8rem;font-style:italic;color:var(--ink-soft);margin-top:8px;text-align:center}

/* ---------- EDIÇÕES ---------- */
.edition{display:grid;grid-template-columns:1.08fr .92fr;gap:72px;align-items:start;margin-bottom:96px}
.edition:nth-child(even){direction:rtl}
.edition:nth-child(even)>*{direction:ltr}
.edition .ph{aspect-ratio:1/1}
.edition .num{font-family:var(--fl);text-transform:uppercase;letter-spacing:.2em;font-size:.62rem;color:var(--accent)}
.edition h2{font-family:var(--fd);font-weight:400;font-size:clamp(1.9rem,3.8vw,2.8rem);margin:8px 0 8px}
.edition .status{font-style:italic;color:var(--ink-soft)}
/* Bloco "A temporada" estilo About & Task: título fantasma + label + 2 colunas */
.ghosthead{position:relative;text-align:center;height:clamp(96px,14vw,168px);display:flex;align-items:center;justify-content:center;margin-bottom:34px}
.ghosthead__wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--fd);font-style:italic;font-size:clamp(3.4rem,11vw,8.5rem);line-height:1;color:var(--ink);opacity:.09;white-space:nowrap;pointer-events:none;user-select:none}
.ghosthead__label{position:relative;z-index:1;font-family:'Nautica',cursive;text-transform:none;letter-spacing:0;font-size:clamp(1.8rem,3.4vw,2.8rem);color:var(--accent)}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:860px;margin:0 auto}
.twocol p{color:var(--ink-soft);font-size:.95rem;line-height:1.75;margin:0}
/* Lista de linhas com hover-border (ref. list rows) */
.frentes{border-top:1px solid var(--line)}
.frente{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;align-items:center;gap:44px;padding:30px 26px;border:1px solid transparent;border-bottom-color:var(--line);transition:border-color .3s,background .3s}
.frente:hover{border-color:var(--ink);background:rgba(20,20,20,.02)}
.frente__n{font-family:var(--fl);text-transform:uppercase;letter-spacing:.2em;font-size:.6rem;color:var(--accent)}
.frente__name{font-family:var(--fd);font-weight:400;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.12}
.frente__desc{color:var(--ink-soft);font-size:.98rem;max-width:560px}
/* Blocos estilo "Sarah Glass" (nome grande + parágrafo à direita + foto embaixo) */
.sarahs{max-width:1060px;margin-left:auto;margin-right:auto;text-align:left}
.sarah{position:relative;padding:66px 0}
.sarah + .sarah{border-top:1px solid var(--line)}
.sarah__name{font-family:var(--fd);font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,4.8vw,3.8rem);line-height:1;letter-spacing:.02em;color:var(--navy);margin:0;max-width:64%}
.sarah__text{width:min(50%,470px);margin:-.4em 0 0 auto;text-align:right;color:var(--ink-soft);font-size:.95rem;line-height:1.72}
.sarah__img{width:min(280px,44vw);aspect-ratio:3/4;margin:46px auto 0}
/* posições variadas das fotos: esquerda / meio / direita */
.sarah:nth-child(1) .sarah__img{margin-left:4%;margin-right:auto}
.sarah:nth-child(3) .sarah__img{margin-left:auto;margin-right:4%}
/* título "Quem está por trás" em Nautica, maior, à direita */
.sarahs-title{font-family:'Nautica',cursive;font-weight:400;font-size:clamp(2.4rem,5vw,4rem);line-height:1;color:var(--navy);text-align:right;max-width:1060px;margin:0 auto}
.edition p{color:var(--ink-soft);margin-top:16px}

/* ---------- SPECS / ESTATÍSTICAS ---------- */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:transparent;border:0;margin-top:48px;text-align:left}
.specs>div{background:transparent;padding:4px 40px;text-align:left;border-left:1px solid var(--line)}
.specs>div:first-child{border-left:0;padding-left:0}
.navy .specs>div{border-left-color:var(--line-navy)}
.specs .k{font-family:'Nautica',cursive;text-transform:none;letter-spacing:0;font-size:1.25rem;line-height:1;color:var(--ink-soft)}
/* rótulo eyebrow em Nautica (variante script) */
.eyebrow--script{font-family:'Nautica',cursive;text-transform:none;letter-spacing:0;font-size:clamp(1.6rem,3vw,2.4rem)}
.navy .specs .k{color:#9fb0c2}
.specs .v{font-family:var(--fd);font-size:clamp(2.6rem,5vw,4rem);line-height:1;margin-top:22px}
.statrow{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;margin-top:44px;padding-top:40px;border-top:1px solid var(--line)}
.statrow .n{font-family:var(--fd);font-size:2.3rem}
.statrow .l{font-family:var(--fl);text-transform:uppercase;letter-spacing:.2em;font-size:.6rem;color:var(--ink-soft);margin-top:4px}

/* ---------- SELO (etapas) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:20px}
.step{border-top:2px solid var(--accent);padding-top:18px}
.step .n{font-family:var(--fd);font-size:1.4rem;color:var(--accent)}
.step h4{font-family:var(--fd);font-weight:400;font-size:1.15rem;margin:6px 0 8px}
.step p{color:var(--ink-soft);font-size:.9rem}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.cats div{border:1px solid var(--line);padding:18px 20px;font-family:var(--fd);font-size:1.15rem}

/* ---------- EQUIPE ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:820px;margin:0 auto}
.team .ph{aspect-ratio:1/1;border-radius:50%;width:150px;margin:0 auto 16px}
.team h4{font-family:var(--fd);font-weight:400;font-size:1.3rem;text-align:center}
.team span{display:block;text-align:center;font-family:var(--fl);text-transform:uppercase;letter-spacing:.18em;font-size:.58rem;color:var(--ink-soft);margin-top:4px}

/* ---------- CONTATO ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.contact .row{margin-bottom:22px}
.contact .k{font-family:var(--fl);text-transform:uppercase;letter-spacing:.2em;font-size:.6rem;color:var(--accent);margin-bottom:6px}
.contact .v{font-family:var(--fd);font-size:1.3rem}
.contact .ph{aspect-ratio:4/3}

/* ---------- FAÇA PARTE ---------- */
.join-sec{text-align:center;max-width:640px;margin:0 auto}
.join-sec .script{font-size:clamp(2.2rem,5vw,3.4rem);color:var(--accent-soft)}
.join-sec h1{font-family:var(--fd);font-weight:400;font-size:clamp(2.8rem,7vw,5rem);margin-top:4px}
.join-sec p{color:#c2cedb;margin:24px auto 34px;font-size:1.14rem}
.steps-join{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:56px 0;text-align:left}
.steps-join .step{border-color:var(--line-navy);border-top-color:var(--accent-soft)}
.steps-join .step h4{color:var(--cream)}
.steps-join .step p{color:#9fb0c2}

/* ---------- FOOTER ---------- */
footer{background:var(--navy);color:#9fb0c2;padding:70px 0 36px}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
.fg .brand{align-items:flex-start;text-align:left}
.logo-foot{height:92px;width:auto;margin-bottom:8px}
.fg .brand p{max-width:280px;font-size:.85rem}
.fg h5{font-family:var(--fl);text-transform:uppercase;letter-spacing:.2em;font-size:.6rem;color:#8ba0b6;margin-bottom:14px}
.fg a{color:#9fb0c2;text-decoration:none;display:block;margin-bottom:8px;font-size:.88rem}
.fg a:hover{color:var(--cream)}
.fbot{margin-top:46px;padding-top:22px;border-top:1px solid var(--line-navy);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.76rem}

/* ---------- BANNER PROTÓTIPO ---------- */
.pn{background:var(--accent);color:var(--navy-deep);text-align:center;font-family:var(--fl);text-transform:uppercase;letter-spacing:.18em;font-size:.6rem;padding:9px}

/* ---------- COVER SCENE: The Truth varre cobrindo o Feature (GSAP pinned) ---------- */
/* Sem JS: base e cover são só duas seções normais empilhadas (fallback seguro). */
.cover-scene__base{padding:118px 0}
.cover-scene__cover{padding:118px 0;background:var(--navy);color:var(--cream)}
/* Com JS (.is-scene): vira um palco de 100vh, cover navy varrendo por cima. */
.is-scene .cover-scene__stage{position:relative;height:100vh;overflow:hidden}
.is-scene .cover-scene__base,.is-scene .cover-scene__cover{position:absolute;inset:0;display:flex;align-items:center;padding:0}
.is-scene .cover-scene__base>.wrap,.is-scene .cover-scene__cover>.wrap{width:100%}
.is-scene .cover-scene__cover{clip-path:inset(0 100% 0 0);will-change:clip-path}
/* Cover navy = trilho horizontal (scroll-driven) */
.is-scene .cover-scene__cover .htrack{position:relative;height:100%;width:100vw}
.is-scene .hpanel{position:absolute;inset:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 6vw}
.is-scene .hpanel--title{width:100vw}
.is-scene .hpanel--title h2{font-family:var(--fd);font-weight:400;font-size:clamp(2.8rem,6.2vw,5.6rem);line-height:1.06;letter-spacing:.03em;text-align:center;max-width:1150px;margin:0}
.hpanel--title .tline{display:block;will-change:transform,opacity}
.lines-alt .tline{display:block;will-change:transform,opacity}
.is-scene .hpanel--img{width:60vw;padding:0 4vw}
.is-scene .hpanel--img .ph{width:100%;height:74vh;aspect-ratio:auto;margin:0}
.is-scene .hpanel--text{width:100vw;gap:28px;text-align:center}
.is-scene .hpanel--text p{max-width:640px;color:var(--cream);font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.6;margin:0}
/* painel collage (imagens espalhadas + palavra central) */
.is-scene .hpanel--collage{width:100vw;padding:0}
.is-scene .collage{position:relative;width:100%;height:100%}
.is-scene .collage__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:2;pointer-events:none}
.is-scene .collage__title{font-family:var(--fd);font-weight:400;font-size:clamp(2rem,3.6vw,3.4rem);color:var(--cream);line-height:1.08}
.is-scene .collage__title .script{font-family:'Nautica',cursive;font-size:1.14em}
.is-scene .collage__sub{font-family:var(--fl);text-transform:uppercase;letter-spacing:.32em;font-size:.6rem;color:var(--accent-soft);margin-top:14px}
.is-scene .collage__img{position:absolute;margin:0}
.is-scene .collage .c1{left:4%;top:12%;width:14vw;aspect-ratio:3/4}
.is-scene .collage .c2{left:23%;top:26%;width:16vw;aspect-ratio:4/5}
.is-scene .collage .c3{right:5%;top:9%;width:19vw;aspect-ratio:4/3}
.is-scene .collage .c4{left:5%;bottom:9%;width:17vw;aspect-ratio:3/4}
.is-scene .collage .c5{left:43%;bottom:16%;width:11vw;aspect-ratio:4/5}
.is-scene .collage .c6{right:7%;bottom:7%;width:15vw;aspect-ratio:4/5}
/* Fallback sem JS: empilha */
.cover-scene__cover .htrack{display:block}
.hpanel{padding:36px 0;text-align:center}
.hpanel--title h2{font-family:var(--fd);font-weight:400;font-size:clamp(2.2rem,5vw,3.4rem);text-align:center;max-width:820px;margin:0 auto}
.hpanel--img .ph{aspect-ratio:16/9;max-width:900px;margin:0 auto}
.hpanel--text{color:var(--cream)}

/* ---------- MENU MOBILE ---------- */
.mobmenu{display:none;flex-direction:column;gap:2px;padding:12px 24px 22px;border-top:1px solid var(--line)}
.mobmenu.open{display:flex}
.mobmenu a{font-family:var(--fl);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;text-decoration:none;color:var(--navy);padding:9px 0}
@media(min-width:901px){.mobmenu{display:none!important}}

/* ---------- RESPONSIVO ---------- */
@media(max-width:900px){
  .nav-in{grid-template-columns:auto 1fr auto}
  .nl{display:none}.nr{display:none}
  .navtoggle{display:block;justify-self:end}
  .feat,.mag,.embassy,.guia,.spotlight,.quote-block,.edition,.contact{grid-template-columns:1fr;gap:34px}
  .embassy-stack{display:block;min-height:0}
  .embassy-img{position:relative;right:auto;top:auto;bottom:auto;width:100%;aspect-ratio:4/3;margin-top:28px}
  .embassy-overlay{width:100%}
  .edition:nth-child(even){direction:ltr}
  .artgrid,.artgrid.two,.talkgrid,.team,.steps,.steps-join,.cats,.twocol{grid-template-columns:1fr}
  .frente{grid-template-columns:1fr;gap:12px}
  .specs{grid-template-columns:1fr 1fr}
  .fg{grid-template-columns:1fr 1fr}
  .sec{padding:72px 0}.wrap,.wrap-narrow{padding:0 24px}
  .hero .wrap{padding:0 20px}
  .filters a{padding:6px 30px;font-size:1.2rem}
  .news .form{flex-direction:column}.news input{width:100%}
  .selo-viewer{grid-template-columns:1fr;gap:22px;min-height:0}
  .selo-rule{display:none}
  .page-hero h1.big-title{font-size:clamp(2.2rem,9vw,3.2rem)}
  .embassy-overlay .big{font-size:clamp(2.4rem,9vw,3.4rem);white-space:normal}
  .fullbleed-img{height:46vh;min-height:300px}
  .hero .box{height:auto;min-height:60vh}
}
@media(max-width:620px){
  .fg{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr 1fr}
  .page-hero h1.big-title{font-size:clamp(2rem,10vw,2.6rem)}
  .filters a{padding:6px 22px;font-size:1.05rem}
}
