/* ============================================================
   AVXLab · Market Intelligence — Design System
   Publicação editorial (web + PDF) · Inteligência de Mercado
   ============================================================ */

/* ---------- Fontes ---------- */
@font-face{
  font-family:"Gilmer";
  src:url("fonts/GilmerLight.otf") format("opentype");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gilmer";
  src:url("fonts/GilmerRegular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gilmer";
  src:url("fonts/GilmerMedium.otf") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gilmer";
  src:url("fonts/GilmerBold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gilmer";
  src:url("fonts/GilmerHeavy.otf") format("opentype");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Sabon";
  src:url("fonts/SabonNextLT.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Sabon";
  src:url("fonts/SabonNextLTItalic.ttf") format("truetype");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Sabon";
  src:url("fonts/SabonNextLTBold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Surfaces */
  --ink:        #0A0907;       /* fundo principal (preto quente) */
  --ink-soft:   #141210;       /* obsidiana mais clara (cards) */
  --ink-deep:   #050402;       /* void */
  --paper:      #E9DCBE;       /* bege mancha de texto (MASTER) */
  --paper-soft: #F1E7CD;       /* bege lifted */
  --paper-deep: #D4C39C;       /* bege mais escuro (callouts) */

  /* Tipo */
  --fg-ink:     #0A0907;       /* texto sobre bege */
  --fg-paper:   #E9DCBE;       /* texto sobre preto */
  --fg-dim:     #9D9484;       /* texto esmaecido sobre preto */
  --fg-dim-ink: #4A4034;       /* texto esmaecido sobre bege */

  /* Acentos */
  --teal:         #4A7D7A;      /* verde-água escuro (signature) */
  --teal-soft:    #6FA5A0;
  --teal-glow:    #8FCFC8;
  --teal-deep:    #2A4A48;
  --signal:       #E32213;      /* vermelho sangue */
  --signal-deep:  #A81909;
  --signal-glow:  #FF4A3A;

  /* Data viz — paleta para linhas finas (ref. Data Viz / Graph) */
  --dv-1:  #E32213;   /* signal */
  --dv-2:  #F0A030;   /* âmbar */
  --dv-3:  #E8D37A;   /* palha */
  --dv-4:  #8FCFC8;   /* teal glow */
  --dv-5:  #4A7D7A;   /* teal */
  --dv-6:  #8A6FD1;   /* lavanda */
  --dv-7:  #D9C7A0;   /* bege frio */

  /* Hairlines */
  --hair:          rgba(233,220,190,.14);
  --hair-strong:   rgba(233,220,190,.32);
  --hair-ink:      rgba(10,9,7,.16);
  --hair-ink-strong: rgba(10,9,7,.36);

  /* Tipografia — escala editorial (desktop) */
  --t-display: clamp(56px, 7.2vw, 104px);
  --t-chapter: clamp(44px, 5.4vw, 80px);
  --t-h1:      clamp(32px, 3.6vw, 52px);
  --t-h2:      clamp(22px, 2.2vw, 30px);
  --t-lead:    clamp(17px, 1.4vw, 20px);
  --t-body:    clamp(14px, 1.02vw, 15.5px);
  --t-small:   12.5px;
  --t-meta:    11px;
  --t-foot:    10.5px;
  --t-stat:    clamp(72px, 10vw, 148px);
  --t-stat-s:  clamp(44px, 5.4vw, 72px);

  /* Letter-spacing */
  --ls-eyebrow: .22em;
  --ls-meta:    .12em;
  --ls-mono:    .04em;

  /* Ritmo */
  --gap:  clamp(14px, 1.4vw, 22px);
  --gut:  clamp(22px, 3.2vw, 56px);
  --pad:  clamp(28px, 4.2vw, 72px);

  /* Motion */
  --dur:   220ms;
  --ease:  cubic-bezier(.2,.6,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--ink); color:var(--fg-paper)}
body{
  font-family:"Sabon","Source Serif 4",Georgia,serif;
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga","onum","pnum";
}

/* ---------- Texto ---------- */
.sans{font-family:"Gilmer",ui-sans-serif,system-ui,sans-serif}
.serif{font-family:"Sabon",Georgia,serif}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:var(--ls-mono)}

.eyebrow{
  font-family:"Gilmer",sans-serif;
  font-weight:500;
  font-size:var(--t-meta);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
}
.meta{
  font-family:"Gilmer",sans-serif;
  font-weight:400;
  font-size:var(--t-meta);
  letter-spacing:var(--ls-meta);
  text-transform:uppercase;
  color:var(--fg-dim);
}
.meta--ink{color:var(--fg-dim-ink)}

h1,h2,h3,h4{font-family:"Gilmer",sans-serif; font-weight:300; margin:0; line-height:1.05; letter-spacing:-.01em}
p{margin:0 0 1em}

/* ---------- Layout primitives ---------- */
.spread{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
  width:100%;
}
.page{
  position:relative;
  padding:var(--pad);
  min-height:100vh;
  overflow:hidden;
}
.page--ink  {background:var(--ink);  color:var(--fg-paper)}
.page--paper{background:var(--paper); color:var(--fg-ink)}

@media (max-width:900px){
  .spread{grid-template-columns:1fr}
  .page{min-height:auto}
}

/* ---------- Rules / hairlines ---------- */
.rule      {height:1px; background:var(--hair); border:0; margin:var(--gap) 0}
.rule--ink {height:1px; background:var(--hair-ink); border:0; margin:var(--gap) 0}
.rule--teal{height:1px; background:var(--teal); border:0; margin:var(--gap) 0}
.rule--sig {height:1.5px; background:var(--signal); border:0; margin:var(--gap) 0}

/* ---------- Diagonal signature (vermelho) ---------- */
.diag-red{
  position:absolute; inset:0; pointer-events:none;
  overflow:hidden;
}
.diag-red::after{
  content:""; position:absolute;
  right:-1px; bottom:-2px;
  width:60%; height:160%;
  background:linear-gradient(to bottom right, transparent 49.7%, var(--signal) 49.85%, var(--signal) 50.15%, transparent 50.3%);
  transform:rotate(0deg);
}

/* ---------- Logo AvX (traço) ---------- */
.logo-mark{
  display:inline-block;
  color:currentColor;
}
.logo-mark svg{display:block; width:100%; height:100%}

/* ---------- Links ---------- */
a{color:inherit; text-decoration:underline; text-decoration-thickness:.5px; text-underline-offset:3px}
a:hover{color:var(--signal)}

/* ---------- Util ---------- */
.stack-xs>*+*{margin-top:8px}
.stack-s>*+*{margin-top:14px}
.stack-m>*+*{margin-top:22px}
.stack-l>*+*{margin-top:36px}
.stack-xl>*+*{margin-top:56px}

.grow{flex:1}
.row{display:flex; align-items:center; gap:var(--gap)}
.row--between{justify-content:space-between}
.col{display:flex; flex-direction:column}

/* ---------- Number / pull-stat ---------- */
.stat{
  font-family:"Gilmer",sans-serif;
  font-weight:300;
  font-size:var(--t-stat);
  line-height:.92;
  letter-spacing:-.02em;
  color:var(--fg-paper);
}
.stat--s{font-size:var(--t-stat-s)}
.stat--red{color:var(--signal)}
.stat__unit{
  font-family:"Gilmer",sans-serif;
  font-weight:400;
  font-size:.28em;
  letter-spacing:.02em;
  vertical-align:top;
  margin-left:.1em;
  color:var(--fg-dim);
}
.stat__cap{
  font-family:"Gilmer",sans-serif;
  font-weight:500;
  font-size:12px;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--fg-dim);
  margin-top:10px;
}

/* ---------- Mancha de texto (body no bege) ---------- */
.body-text{
  font-family:"Sabon",Georgia,serif;
  font-size:var(--t-body);
  line-height:1.62;
  color:var(--fg-ink);
  max-width:58ch;
  text-wrap:pretty;
  hyphens:auto;
}
.body-text p + p{margin-top:.8em; text-indent:1.4em}
.body-text p:first-of-type{text-indent:0}
.body-text .lead{
  font-family:"Gilmer",sans-serif;
  font-weight:300;
  font-size:var(--t-lead);
  line-height:1.42;
  color:var(--fg-ink);
  margin-bottom:1.4em;
  text-indent:0;
}
.body-text em{font-style:italic}
.body-text strong{font-weight:700; font-family:"Gilmer",sans-serif; font-size:.94em; letter-spacing:.01em}

/* Drop-cap opcional */
.body-text .dropcap::first-letter{
  font-family:"Gilmer",sans-serif;
  font-weight:300;
  float:left;
  font-size:4.6em;
  line-height:.82;
  padding:.06em .14em 0 0;
  color:var(--signal);
}

/* ---------- References (pequeno, denso, tipo bibliografia) ---------- */
.refs{
  font-family:"Gilmer",sans-serif;
  font-weight:400;
  font-size:10px;
  line-height:1.5;
  color:var(--fg-dim);
  columns:2;
  column-gap:28px;
  column-rule:1px solid var(--hair);
}
.refs--ink{color:var(--fg-dim-ink); column-rule:1px solid var(--hair-ink)}
.refs li{
  break-inside:avoid;
  padding:6px 0;
  border-top:1px solid currentColor;
  border-color:var(--hair);
  list-style:none;
  margin:0;
}
.refs--ink li{border-color:var(--hair-ink)}
.refs ol{padding:0; margin:0}
.refs .ref-n{
  display:inline-block;
  min-width:1.4em;
  color:var(--signal);
  font-weight:500;
}
.refs .ref-src{color:inherit; opacity:.9}
.refs .ref-url{
  display:block;
  word-break:break-all;
  font-size:9px;
  opacity:.65;
  margin-top:2px;
}

/* ---------- Top bar (running) ---------- */
.running{
  position:absolute; top:0; left:0; right:0;
  padding:16px var(--pad);
  display:flex; justify-content:space-between; align-items:center;
  pointer-events:none;
}
.running > *{pointer-events:auto}

/* ---------- Bottom bar (folio) ---------- */
.folio{
  position:absolute; bottom:0; left:0; right:0;
  padding:16px var(--pad);
  display:flex; justify-content:space-between; align-items:baseline;
}

/* ---------- Keyword stack (página par) ---------- */
.kw-stack{
  font-family:"Gilmer",sans-serif;
  font-weight:300;
  font-size:clamp(28px,3.2vw,46px);
  line-height:1.18;
  letter-spacing:-.005em;
  color:var(--fg-paper);
}
.kw-stack li{list-style:none; padding:0; margin:0}
.kw-stack .kw-dim{color:var(--fg-dim); opacity:.55}

/* ---------- Chapter number ---------- */
.chap-num{
  font-family:"Gilmer",sans-serif;
  font-weight:300;
  font-size:var(--t-chapter);
  line-height:.9;
  letter-spacing:-.02em;
  color:var(--fg-paper);
}
.chap-num .dot{color:var(--signal)}
.chap-title{
  font-family:"Gilmer",sans-serif;
  font-weight:300;
  font-size:clamp(36px,4.4vw,68px);
  line-height:.96;
  letter-spacing:-.015em;
  color:var(--fg-paper);
}

/* ---------- Cards (obsidian + paper) ---------- */
.card{
  border:1px solid var(--hair);
  border-radius:2px;
  padding:22px 24px;
}
.card--ink{background:var(--ink-soft); color:var(--fg-paper)}
.card--paper{background:var(--paper-soft); color:var(--fg-ink); border-color:var(--hair-ink)}

/* ---------- Scroll ---------- */
html{scroll-behavior:smooth}
::selection{background:var(--signal); color:var(--paper)}