/* Nadie Lo Dijo — design system.
   Tokens and measurements come from design/project/Nadie Lo Dijo - Mockups.dc.html.
   Section 3 (artboards 3a-3d) defines the public layout; sections 1-2 define the
   states and the subscriber screens. */

/* ---------- fonts ---------- */
@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif-4-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif-4-400-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-400-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-600-latin.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-600-latin-ext.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-500-latin.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens ---------- */
:root{
  --ink:#141414; --page:#F7F5F0; --surface:#FFFFFF; --secondary:#5C5A55;
  --body:#3B3934; --hairline:#D9D5CC; --hairline-soft:#E2DED5; --band:#EDEAE5;
  --accent:#B42318; --disabled:#8C8A85; --hover:#F1EFE9; --slot:#E4E0D7;
  --skeleton:#EFECE4;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --ink:#EDEAE3; --page:#121110; --surface:#1C1A18; --secondary:#A39F96;
    --body:#C3BFB6; --hairline:#3F3B35; --hairline-soft:#34302B; --band:#1C1A18;
    --accent:#E5484D; --disabled:#5D5952; --hover:#232120; --slot:#232120;
    --skeleton:#232120; color-scheme:dark;
  }
}
:root[data-tema="oscuro"]{
  --ink:#EDEAE3; --page:#121110; --surface:#1C1A18; --secondary:#A39F96;
  --body:#C3BFB6; --hairline:#3F3B35; --hairline-soft:#34302B; --band:#1C1A18;
  --accent:#E5484D; --disabled:#5D5952; --hover:#232120; --slot:#232120;
  --skeleton:#232120; color-scheme:dark;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0; font-weight:400; font-family:var(--serif)}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}
hr{border:0; border-top:1px solid var(--hairline); margin:0}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; z-index:20; background:var(--surface);
  padding:10px 14px; border:1px solid var(--ink)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- shell ---------- */
.rule-top{border-top:3px solid var(--ink)}
.wrap{max-width:1200px; margin:0 auto; padding:0 14px}
@media (min-width:768px){.wrap{padding:0 24px}}
@media (min-width:1024px){.wrap{padding:0 32px}}

.dateline{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  min-height:40px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--secondary);
  border-bottom:1px solid var(--hairline);
}
.dateline .sep{color:var(--hairline)}
.dateline .right{margin-left:auto; display:flex; align-items:center; gap:10px}
/* On a phone the dateline keeps the date and the tally; the freshness note
   and the right-hand group get their own line so it never runs to three. */
.dateline .upd,.dateline .sep{display:none}
.dateline .right{flex-basis:100%; justify-content:flex-end; padding-bottom:6px}
@media (min-width:768px){
  .dateline{font-size:11.5px}
  .dateline .upd{display:contents}
  .dateline .sep{display:inline}
  .dateline .right{flex-basis:auto; padding-bottom:0}
}

.masthead{display:flex; align-items:flex-end; gap:22px; padding:20px 0 16px}
.wordmark{font-family:var(--serif); font-size:27px; line-height:.92;
  letter-spacing:-.028em; color:var(--ink)}
.wordmark:hover{text-decoration:none}
.lema{display:none}
@media (min-width:768px){
  .masthead{padding:28px 0 20px}
  .wordmark{font-size:40px}
  .lema{display:block; max-width:320px; padding-left:22px;
    border-left:1px solid var(--hairline); font-size:12.5px; line-height:1.5;
    color:var(--secondary)}
}
@media (min-width:1024px){.wordmark{font-size:48px}}

.nav{
  display:flex; align-items:center; gap:16px; min-height:44px;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  overflow-x:auto; scrollbar-width:none; font-size:14px; letter-spacing:.02em;
}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap; padding:4px 0; color:var(--secondary)}
.nav a.on{color:var(--ink); font-weight:600}
.nav .count{color:var(--accent); font-size:14px; margin-left:4px}
.nav .right{margin-left:auto; display:flex; align-items:center; gap:14px}
@media (min-width:1024px){.nav{min-height:46px; gap:26px}}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 14px; border:1px solid var(--ink);
  border-radius:2px; background:transparent; cursor:pointer;
  font-size:13px; transition:background 120ms ease, border-color 120ms ease;
}
.btn:hover{background:var(--hover); text-decoration:none}
.btn-fill{background:var(--ink); color:var(--page); border-color:var(--ink)}
.btn-fill:hover{background:var(--ink); opacity:.9}
.btn-sm{min-height:32px; padding:0 10px; font-size:12px}
.btn[disabled],.btn[aria-disabled="true"]{color:var(--disabled);
  border-color:var(--hairline); cursor:not-allowed; background:transparent}

.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--secondary)}
.kicker-red{color:var(--accent)}
.meta{font-size:13px; color:var(--secondary)}
.dline{font-family:var(--sans); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--secondary); font-weight:400}
.serif{font-family:var(--serif)}
.red{color:var(--accent)}

/* ---------- dots ---------- */
.dots{display:inline-flex; align-items:center; gap:2.5px; vertical-align:middle}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ink)}
.dot.off{background:transparent; border:1.5px solid var(--accent)}
@media (min-width:1024px){.dots{gap:4px}.dot{width:8px;height:8px}}

/* ---------- badge ---------- */
.badge{display:inline-block; border:1px solid var(--hairline); border-radius:2px;
  padding:2px 6px; font-size:14px; color:var(--accent)}
.badge-none{font-size:12px; color:var(--secondary); border:0; padding:0}

/* ---------- story rows ---------- */
.lead{padding:20px 0 22px; border-bottom:1px solid var(--ink)}
.lead .kicker{margin-top:14px}
.lead h2{font-size:28px; line-height:1.08; letter-spacing:-.02em; margin:8px 0 12px}
.lead .dek{font-size:16px; line-height:1.55; color:var(--body); max-width:58ch}
.lead .row{margin-top:14px}
@media (min-width:1024px){
  .lead h2{font-size:42px; max-width:760px; margin:10px 0 14px}
  .lead .dek{font-size:18px}
}
/* Publisher thumbnails are hotlinked and sometimes refuse to load; app.js
   collapses the figure when that happens, so a slot is never an empty box. */
.slot{background:var(--slot); width:100%; aspect-ratio:16/9; max-height:232px; overflow:hidden}
.slot img{width:100%; height:100%; object-fit:cover}
@media (min-width:1024px){.slot{max-height:392px}}
.credit{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--secondary); padding-top:6px;
  display:flex; gap:14px; justify-content:space-between; align-items:flex-start}
.credit a{white-space:nowrap; flex-shrink:0}

.cols{display:grid; grid-template-columns:1fr; gap:0}
@media (min-width:768px){.cols{grid-template-columns:repeat(2,1fr); gap:0 36px}}
@media (min-width:1024px){.cols{grid-template-columns:repeat(3,1fr)}}
.col{border-right:0}
@media (min-width:768px){
  .col{padding-right:36px; border-right:1px solid var(--hairline-soft)}
  .col:last-child{padding-right:0; border-right:0}
}

.story{padding:18px 0 20px; border-bottom:1px solid var(--hairline-soft)}
.col .story:first-child{padding-top:0}
.story:last-child{border-bottom:0}
.story h3{font-size:19px; line-height:1.28; letter-spacing:-.008em}
.story h3 a:hover{text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px}
.row{display:flex; align-items:center; flex-wrap:wrap; column-gap:0; row-gap:4px;
  font-size:13px; color:var(--secondary)}
.story .row{margin-top:10px}
.row .dots{margin-right:8px}
.row > * + *::before{content:"·"; margin:0 7px; color:var(--secondary); opacity:.55}
.row > .dots + *::before,.row > .push::before{content:none}
.row .n{color:var(--ink)}
.row .push{margin-left:auto}
.story .tag,.lead .tag{color:var(--accent); font-size:13px; margin-top:8px}
@media (min-width:1024px){
  .story{padding:20px 0 22px}
  .story h3{font-size:20.5px}
}

.section-title{font-size:24px; line-height:1.2; padding:22px 0 14px; margin:0;
  letter-spacing:-.01em}
.section-title .kicker{display:block; margin-bottom:6px}
@media (min-width:1024px){.section-title{font-size:28px; padding:26px 0 18px}}
.cols .col .story:first-child{border-top:0}

.band{background:var(--ink); color:var(--page); padding:20px 0; margin-top:24px}
.band .wrap{max-width:1200px}
.band h2,.band h3{color:var(--page)}
.band .meta,.band .kicker{color:#A39F96}
.band a{color:var(--page)}

/* ---------- panels, states ---------- */
.panel{border:1px solid var(--hairline); border-radius:2px; background:var(--surface);
  padding:15px 18px 16px}
.stack{display:flex; flex-direction:column; gap:10px}
.state{padding:28px 0; border-bottom:1px solid var(--hairline)}
.state h2{font-size:20px; margin-bottom:6px}
.state p{color:var(--secondary); font-size:14.5px}
.banner{border:1px solid var(--hairline); border-left:3px solid var(--accent);
  padding:12px 14px; margin:14px 0; display:flex; gap:12px; align-items:center;
  justify-content:space-between; flex-wrap:wrap}
.skeleton{background:var(--skeleton); height:14px; border-radius:2px}
.skeleton.tall{height:22px}

/* ---------- gating ---------- */
.preview{filter:blur(4px); user-select:none; pointer-events:none}
.gate{border-top:1px solid var(--hairline); margin-top:12px; padding-top:12px}
.gate p{font-size:14.5px; color:var(--secondary)}
.gate a{text-decoration:underline}

/* ---------- forms ---------- */
label{display:block; font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--secondary); margin-bottom:6px}
input[type=text],input[type=email],input[type=date],input[type=number],select{
  width:100%; min-height:44px; padding:0 12px; font:inherit; color:var(--ink);
  background:var(--surface); border:1px solid var(--hairline); border-radius:2px;
}
input:focus,select:focus{border-color:var(--ink)}
.field{margin-bottom:14px}
.err{color:var(--accent); font-size:13px; margin-top:6px}
.ok{color:var(--secondary); font-size:13px; margin-top:6px}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--hairline)}
th{font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--secondary); font-weight:600}
.scroll-x{overflow-x:auto}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--ink); margin-top:32px; padding:18px 0 40px;
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  font-size:13px; color:var(--secondary)}
.foot .right{margin-left:auto}
.foot a:hover{text-decoration:underline}