/* ============================================================
   Henrique Cecci — folha de estilo
   Paleta: grafite #2B2B2B, ambar #E08A1E, fundo branco.
   Tipos: IBM Plex Sans Condensed (titulos), Serif (texto),
   Mono (dados e legendas).
   ============================================================ */

:root{
  --ink:#2B2B2B;
  --amber:#E08A1E;
  --paper:#FFFFFF;
  --grey:#8A8681;
  --rule:#E3E0DA;
  --wash:#F7F5F2;
  --display:"IBM Plex Sans Condensed",system-ui,sans-serif;
  --body:"IBM Plex Serif",Georgia,serif;
  --util:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:920px;margin:0 auto;padding:0 24px}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.eyebrow{font-family:var(--util);font-size:11px;letter-spacing:.14em;
         text-transform:uppercase;color:var(--grey)}
.eyebrow.dim{color:#8A8681}
.mono{font-family:var(--util);font-size:12px}
.lede{font-size:18.5px;max-width:60ch}
.more{margin-top:20px;font-family:var(--util);font-size:12px}
.more a{color:var(--grey);text-decoration:none;border-bottom:1px solid var(--rule)}
.more a:hover{color:var(--ink);border-bottom-color:var(--amber)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);position:sticky;top:0;
          background:var(--paper);z-index:20}
.masthead .wrap{display:flex;align-items:baseline;justify-content:space-between;
                gap:16px;padding-top:14px;padding-bottom:14px}
.wordmark{font-family:var(--display);font-weight:700;font-size:19px;
          letter-spacing:-.01em;text-decoration:none}
.wordmark span{color:var(--amber)}
.masthead nav{display:flex;gap:20px}
.masthead nav a{font-family:var(--util);font-size:12px;color:var(--grey);
                text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.masthead nav a:hover{color:var(--ink);border-bottom-color:var(--amber)}

/* ---------- hero ---------- */
.hero{padding:76px 0 40px}
.hero h1{font-family:var(--display);font-weight:700;
         font-size:clamp(34px,6.2vw,62px);line-height:1.02;
         letter-spacing:-.02em;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .stand{font-size:19px;max-width:56ch;margin-top:26px;color:#4A4744}
.vantage{display:flex;flex-wrap:wrap;margin-top:34px;border-top:1px solid var(--rule)}
.vantage div{flex:1 1 190px;padding:14px 18px 14px 0;border-right:1px solid var(--rule)}
.vantage div:last-child{border-right:0}
.vantage strong{display:block;font-family:var(--display);font-weight:600;font-size:15px}
.vantage span{font-family:var(--util);font-size:11.5px;color:var(--grey)}

/* ---------- streak ---------- */
.streak{padding:44px 0 52px}
.streak-head{display:flex;justify-content:space-between;align-items:baseline;
             gap:12px;margin-bottom:14px;flex-wrap:wrap}
.bars{display:flex;align-items:flex-end;gap:3px;height:76px;
      padding-bottom:9px;border-bottom:1px solid var(--ink)}
.bars a{flex:1 1 auto;height:34px;background:var(--rule);border-radius:1px 1px 0 0;
        transition:background .18s ease,height .18s ease}
.bars a.thesis{background:var(--ink);height:52px}
.bars a.now{background:var(--amber);height:67px}
.bars a:hover{background:var(--amber)}
.streak-key{display:flex;gap:20px;flex-wrap:wrap;margin-top:11px;
            font-family:var(--util);font-size:11px;color:var(--grey)}
.streak-key b{display:inline-block;width:9px;height:9px;margin-right:6px}

/* ---------- sections ---------- */
section{padding:52px 0;border-top:1px solid var(--rule)}
section.topline{border-top:1px solid var(--ink)}
section.first,article.first{padding:56px 0;border-top:0}
h1.art{font-family:var(--display);font-weight:700;font-size:clamp(30px,5vw,46px);
       line-height:1.05;letter-spacing:-.02em;margin:8px 0 16px;max-width:20ch}
h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,3.4vw,32px);
   letter-spacing:-.01em;margin:8px 0 20px}
a.plain{text-decoration:none}
a.plain:hover{color:var(--amber)}

/* ---------- prose ---------- */
.prose{max-width:66ch}
.prose p{margin-bottom:16px}
.prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.prose a:hover{border-bottom-color:var(--amber)}
.prose h2.sec{font-size:21px;margin:34px 0 14px}
.prose .pull{font-family:var(--display);font-weight:600;font-size:22px;
             line-height:1.25;margin:26px 0;letter-spacing:-.005em;
             padding-left:18px;border-left:2px solid var(--amber)}
.prose figure{margin:26px 0;border:1px solid var(--rule);padding:20px}
.prose figcaption{font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:16px}
.prose img{max-width:100%;height:auto;display:block}
ol.signals{list-style:none;counter-reset:sig;margin:0 0 20px}
ol.signals li{counter-increment:sig;padding:13px 0 13px 34px;
              border-bottom:1px solid var(--rule);position:relative;font-size:15.5px}
ol.signals li::before{content:counter(sig);position:absolute;left:0;top:14px;
                      font-family:var(--util);font-size:11px;color:var(--amber)}

.tagline{margin-bottom:26px;display:flex;gap:8px;flex-wrap:wrap}
.tagline a{font-family:var(--util);font-size:11px;color:var(--grey);
           text-decoration:none;border:1px solid var(--rule);
           border-radius:999px;padding:3px 11px}
.tagline a:hover{color:var(--ink);border-color:var(--amber)}

/* ---------- pager ---------- */
.pager{display:flex;justify-content:space-between;gap:20px;margin-top:48px;
       padding-top:22px;border-top:1px solid var(--rule)}
.pager a{flex:1;text-decoration:none;font-size:15px;max-width:44%}
.pager a.r{text-align:right}
.pager a span{display:block;font-family:var(--util);font-size:11px;
              color:var(--amber);margin-bottom:4px}
.pager a:hover{color:var(--amber)}

/* ---------- archive ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.filters a{font-family:var(--util);font-size:11.5px;padding:6px 13px;
           color:var(--grey);text-decoration:none;
           border:1px solid var(--rule);border-radius:999px}
.filters a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.arch{width:100%;border-collapse:collapse}
.arch tr{border-bottom:1px solid var(--rule)}
.arch td{padding:14px 10px 14px 0;vertical-align:top;font-size:15.5px}
.arch td:first-child{font-family:var(--util);font-size:11.5px;color:var(--amber);
                     width:54px;white-space:nowrap;padding-top:17px}
.arch td:last-child{font-family:var(--util);font-size:11px;color:var(--grey);
                    text-align:right;white-space:nowrap;padding-top:17px}
.arch a{text-decoration:none;border-bottom:1px solid var(--rule)}
.arch a:hover{border-bottom-color:var(--amber)}
.arch .sum{display:block;font-size:13.5px;color:var(--grey);margin-top:4px;max-width:60ch}

/* ---------- ledger ---------- */
.ledger{width:100%;border-collapse:collapse;font-size:15px}
.ledger th{font-family:var(--util);font-size:10.5px;letter-spacing:.1em;
           text-transform:uppercase;color:var(--grey);text-align:left;
           padding:0 10px 9px 0;border-bottom:1px solid var(--ink);font-weight:500}
.ledger td{padding:12px 10px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.mark{font-family:var(--util);font-size:11px;letter-spacing:.06em}
.mark.correct{color:#2F6B3F}
.mark.wrong{color:#A33A2A}
.mark.open{color:var(--grey)}

/* ---------- subscribe ---------- */
.sub{background:var(--ink);color:#F2F0EC;padding:38px 32px}
.sub h2{color:#FFF;margin-top:0}
.sub p{max-width:52ch;color:#C9C5BF}
.form{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.form input{flex:1 1 250px;padding:12px 14px;border:1px solid #4A4744;
            background:#232322;color:#F2F0EC;font-family:var(--util);font-size:13px}
.form input::placeholder{color:#7E7A75}
.form button{padding:12px 22px;background:var(--amber);color:#1F1F1E;border:0;
             font-family:var(--display);font-weight:700;font-size:14px;cursor:pointer}
.note{font-family:var(--util);font-size:11px;color:#8A8681;margin-top:14px}

/* ---------- speaking ---------- */
.topics{list-style:none;margin-top:18px}
.topics li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.topics li span{font-family:var(--util);font-size:11px;color:var(--amber);margin-right:12px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--ink);padding:34px 0 60px;margin-top:14px}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
      font-family:var(--util);font-size:11.5px;color:var(--grey)}
.foot a{color:var(--grey)}
.disclaimer{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);
            font-family:var(--util);font-size:11px;color:var(--grey);
            max-width:62ch;line-height:1.6}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .masthead nav{gap:14px}
  .masthead .wrap{flex-wrap:wrap}
  .hero{padding:52px 0 30px}
  .bars{height:58px}
  .bars a{height:26px}
  .bars a.thesis{height:40px}
  .bars a.now{height:51px}
  .pager{flex-direction:column;gap:18px}
  .pager a,.pager a.r{max-width:100%;text-align:left}
  .arch td:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
}