/* ============================================================================
   La Editorial — editorial.roahost.com
   A broadsheet newspaper. Own identity (NOT the CROA template); coherent only
   through the shared CROA red. Black ink on newsprint, red as the single accent.
   ============================================================================ */

:root{
  --paper:#f7f3ea;          /* warm newsprint */
  --paper-2:#f1ebdd;
  --ink:#1a1a1a;            /* near-black body */
  --ink-soft:#33312c;
  --muted:#6b665c;
  --red:#6e1f2c;            /* CROA wine */
  --red-lite:#8a2a3a;
  --rule:#cdc4b0;           /* hairline */
  --rule-ink:#1a1a1a;       /* heavy rule */
  --maxw:1200px;
  --col-gap:34px;
  --serif:"PT Serif", Georgia, "Times New Roman", serif;
  --display:"Playfair Display", Georgia, serif;
  --black:"UnifrakturCook","Playfair Display",serif;
  --sans:"Oswald", "Arial Narrow", system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100% }
body{
  background:var(--paper);
  /* faint newsprint texture */
  background-image:radial-gradient(rgba(0,0,0,.015) 1px, transparent 1px);
  background-size:3px 3px;
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--red);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}

/* ---- kicker / meta (condensed sans) ---- */
.kicker,.folio,.byline,.sec-label,.meta,.nav a,.tag{
  font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.12em}

/* ============================ MASTHEAD ============================ */
.masthead{padding:22px 0 0}
.mast-top{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--rule);padding-bottom:8px}
.mast-top .ear{display:flex;align-items:center;gap:9px}
.mast-top .ear img{height:26px;width:auto;opacity:.9}
.mast-title{text-align:center;padding:14px 0 6px}
.mast-title h1{
  font-family:var(--black);font-weight:700;color:var(--red);
  font-size:clamp(3.2rem,11vw,7rem);line-height:.9;letter-spacing:.01em}
.mast-sub{text-align:center;font-family:var(--sans);font-weight:400;text-transform:uppercase;
  letter-spacing:.34em;font-size:.72rem;color:var(--ink-soft);margin-top:2px}
/* double rule under masthead */
.mast-rule{border:0;border-top:3px solid var(--ink);margin-top:14px}
.mast-rule.thin{border-top:1px solid var(--ink);margin-top:3px}
/* folio dateline bar */
.folio{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;text-align:center;
  font-size:.68rem;letter-spacing:.14em;color:var(--muted);padding:8px 0;border-bottom:1px solid var(--rule)}
.folio .r{color:var(--red)}

/* ---- nav (section jumps) ---- */
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 26px;padding:10px 0;border-bottom:1px solid var(--rule)}
.nav a{font-size:.72rem;color:var(--ink-soft);text-decoration:none;transition:color .15s}
.nav a:hover{color:var(--red)}

/* ============================ FRONT PAGE ============================ */
main{padding:26px 0 60px}
.sec-label{display:flex;align-items:center;gap:14px;color:var(--red);font-size:.82rem;margin:38px 0 16px}
.sec-label::before,.sec-label::after{content:"";flex:1;height:2px;background:var(--red);opacity:.85}
.sec-label span{white-space:nowrap}

/* Lead story */
.lead{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--col-gap);align-items:start;
  padding-bottom:26px;border-bottom:2px solid var(--ink)}
.lead .kicker{color:var(--red);font-size:.74rem;margin-bottom:8px}
.lead h2{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,5.2vw,4rem);
  line-height:1.02;letter-spacing:-.01em;margin-bottom:12px}
.lead .dek{font-family:var(--display);font-style:italic;font-weight:400;font-size:1.35rem;
  color:var(--ink-soft);line-height:1.32;margin-bottom:14px}
.lead .byline{font-size:.7rem;color:var(--muted);margin-bottom:14px}
.lead .body{font-size:1.02rem;columns:2;column-gap:26px;column-rule:1px solid var(--rule);text-align:justify;hyphens:auto}
.lead .body p{margin-bottom:12px}
.lead .body p:first-of-type::first-letter{
  font-family:var(--display);font-weight:900;color:var(--red);
  float:left;font-size:4.2rem;line-height:.72;padding:6px 10px 0 0}
.lead aside{border-left:1px solid var(--rule);padding-left:22px}
.lead aside .body{font-size:.98rem;text-align:justify;hyphens:auto}

/* Story grid (teasers) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.story{padding:20px 24px;border-right:1px solid var(--rule)}
.story:last-child{border-right:0}
.story .kicker{color:var(--red);font-size:.68rem;margin-bottom:7px}
.story h3{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.1;margin-bottom:8px}
.story h3 a{text-decoration:none}
.story h3 a:hover{color:var(--red)}
.story .dek{font-family:var(--display);font-style:italic;color:var(--ink-soft);font-size:1.02rem;margin-bottom:8px;line-height:1.3}
.story p{font-size:.96rem;text-align:justify;hyphens:auto}
.story .byline{font-size:.66rem;color:var(--muted);margin-top:10px}
.story .more{font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:var(--red);text-decoration:none;display:inline-block;margin-top:8px}
.story .more:hover{text-decoration:underline}

/* Opinion / two-up rows */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule)}
.row2 .story:first-child{border-right:1px solid var(--rule)}

/* ============================ FOLLOW BOX ============================ */
.follow{border:2px solid var(--ink);padding:26px 28px;margin:44px 0 0;text-align:center;background:var(--paper-2)}
.follow .k{color:var(--red);font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem}
.follow h3{font-family:var(--display);font-weight:900;font-size:1.9rem;margin:6px 0 4px}
.follow p{color:var(--ink-soft);font-size:1rem;max-width:52ch;margin:0 auto 16px}
.follow form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.follow input{font-family:var(--serif);font-size:1rem;padding:11px 14px;border:1px solid var(--ink);background:#fff;min-width:260px}
.follow button{font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:.8rem;
  padding:11px 22px;background:var(--red);color:#fff;border:1px solid var(--red);cursor:pointer;transition:background .15s}
.follow button:hover{background:var(--red-lite)}
.follow .ok{color:var(--red);font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;margin-top:10px;display:none}
.follow.done .ok{display:block}

/* ============================ ARTICLE PAGE ============================ */
.article{max-width:760px;margin:0 auto;padding:8px 0 40px}
.article .kicker{color:var(--red);font-size:.76rem;text-align:center;display:block;margin-bottom:12px}
.article h1{font-family:var(--display);font-weight:900;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;text-align:center;margin-bottom:14px}
.article .dek{font-family:var(--display);font-style:italic;font-size:1.4rem;color:var(--ink-soft);text-align:center;line-height:1.34;margin-bottom:16px}
.article .byline{text-align:center;font-size:.72rem;color:var(--muted);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:10px 0;margin-bottom:26px}
.article .body{font-size:1.12rem;line-height:1.66;text-align:justify;hyphens:auto}
.article .body p{margin-bottom:16px}
.article .body p:first-of-type::first-letter{font-family:var(--display);font-weight:900;color:var(--red);float:left;font-size:4.6rem;line-height:.72;padding:8px 12px 0 0}
.article .body h2{font-family:var(--display);font-weight:700;font-size:1.7rem;margin:26px 0 10px}
.article .body blockquote{border-left:3px solid var(--red);padding:4px 0 4px 20px;margin:20px 0;font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--red)}
.article .back{font-family:var(--sans);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--red);text-decoration:none;display:inline-block;margin-bottom:20px}
.article .end{text-align:center;color:var(--red);font-size:1.4rem;margin:24px 0}

/* ============================ FOOTER ============================ */
footer{border-top:3px solid var(--ink);margin-top:50px;padding:26px 0 40px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
.foot .mark{display:flex;align-items:center;gap:12px}
.foot .mark img{height:40px;width:auto}
.foot .mark b{font-family:var(--black);color:var(--red);font-size:1.5rem;font-weight:700}
.foot .aviso{max-width:640px;font-size:.74rem;color:var(--muted);line-height:1.6}
.foot .aviso strong{color:var(--ink)}
.copy{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;color:var(--muted);margin-top:18px;text-align:center}

/* ============================ RESPONSIVE ============================ */
@media(max-width:900px){
  .lead{grid-template-columns:1fr}
  .lead .body{columns:1}
  .lead aside{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:16px}
  .grid{grid-template-columns:1fr}
  .story{border-right:0;border-bottom:1px solid var(--rule)}
  .row2{grid-template-columns:1fr}
  .row2 .story:first-child{border-right:0}
}
@media(max-width:560px){
  body{font-size:17px}
  .mast-top .ear span{display:none}
}