:root {
  --ink: #11100f;
  --paper: #f1ece3;
  --muted: #aaa39a;
  --red: #e2261f;
  --red-dark: #7f1110;
  --line: rgba(241, 236, 227, 0.2);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 85% 8%, rgba(226, 38, 31, 0.13), transparent 28rem),
    var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.wrap { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 20; background: var(--paper); color: var(--ink); padding: 10px 14px; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(18px);
  background: rgba(17, 16, 15, 0.88);
  border-bottom: 1px solid var(--line);
}
.masthead-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: baseline; gap: 7px; text-decoration: none; letter-spacing: -0.06em; font-weight: 900; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.brand-slash { color: var(--red); }
.brand small { letter-spacing: 0; font-size: 0.66rem; color: var(--muted); font-weight: 700; }
nav { display: flex; gap: 22px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; }
nav a { text-decoration: none; color: #d0cac1; }
nav a:hover, nav a:focus { color: #fff; }

.hero { display: grid; grid-template-columns: 1.25fr 0.75fr; min-height: 72vh; border-bottom: 1px solid var(--line); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 72px 6vw 72px max(20px, calc((100vw - var(--max)) / 2)); }
.kicker, .section-kicker { color: var(--red); text-transform: uppercase; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; }
.hero h1 { margin: 20px 0 22px; max-width: 760px; font-size: clamp(3.3rem, 8vw, 7.6rem); line-height: 0.84; letter-spacing: -0.075em; text-transform: uppercase; }
.hero h1 em { color: var(--red); font-style: normal; }
.deck { max-width: 690px; color: #d5cfc6; font-family: Georgia, serif; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.55; }
.edition-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 30px; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; }
.edition-meta strong { color: var(--paper); }
.hero-photo { position: relative; overflow: hidden; min-height: 540px; background: var(--red-dark); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 46%; filter: grayscale(1) contrast(1.13); mix-blend-mode: luminosity; }
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(226,38,31,.62), transparent 48%, rgba(17,16,15,.7)); mix-blend-mode: multiply; }
.hero-photo::after { content: "MARTÍN PRATO"; position: absolute; z-index: 2; right: 18px; bottom: 18px; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 900; letter-spacing: .12em; font-size: .75rem; }

.news { padding: 84px 0 42px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 40px; }
.section-head h2 { margin: 8px 0 0; font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: .92; letter-spacing: -.06em; text-transform: uppercase; }
.section-head p { max-width: 390px; margin: 0; color: var(--muted); line-height: 1.5; }
.stories { display: grid; grid-template-columns: repeat(12, 1fr); border-top: 1px solid var(--line); }
.story { grid-column: span 6; position: relative; padding: 42px 38px 36px 72px; border-bottom: 1px solid var(--line); }
.story:nth-child(odd) { border-right: 1px solid var(--line); }
.story:first-child { grid-column: span 12; padding-right: min(15vw, 190px); }
.story:first-child h3 { max-width: 920px; font-size: clamp(2.1rem, 5vw, 4.7rem); }
.story-no { position: absolute; left: 0; top: 47px; color: var(--red); font-weight: 900; font-size: 1.2rem; }
.story h3 { margin: 0 0 20px; font-size: clamp(1.6rem, 3vw, 2.45rem); line-height: 1.04; letter-spacing: -.035em; }
.story-body { max-width: 770px; margin: 0; color: #d8d1c8; font-family: Georgia, serif; font-size: 1.03rem; line-height: 1.68; }
.byline { margin: 22px 0 0; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
details { margin-top: 22px; }
summary { cursor: pointer; color: var(--paper); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.sources { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.sources a { color: #d8d1c8; text-underline-offset: 4px; font-size: .86rem; }
.sources a:hover { color: var(--red); }

.archive { padding: 78px 0 92px; background: var(--paper); color: var(--ink); }
.archive h2 { margin: 8px 0 32px; font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -.06em; text-transform: uppercase; }
.archive-item { display: grid; grid-template-columns: 160px 1fr auto; gap: 30px; align-items: center; padding: 26px 0; border-top: 1px solid rgba(17,16,15,.25); text-decoration: none; }
.archive-item:last-child { border-bottom: 1px solid rgba(17,16,15,.25); }
.archive-item time { color: var(--red-dark); font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
.archive-item strong { font-size: 1.2rem; }
.archive-item span { font-size: 1.5rem; color: var(--red); }
.archive-note { margin-top: 18px; color: #5f5a54; font-size: .86rem; }

footer { padding: 36px 0; border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; gap: 28px; color: var(--muted); font-size: .8rem; }
.footer-inner strong { color: var(--paper); }

.reel-page { padding: 64px 0 88px; }
.reel-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(320px, .55fr); gap: clamp(36px, 7vw, 100px); align-items: start; }
.reel-copy h1 { margin: 14px 0 24px; font-size: clamp(3rem, 8vw, 7rem); line-height: .86; letter-spacing: -.07em; text-transform: uppercase; }
.reel-copy p { color: #d8d1c8; line-height: 1.6; }
.reel-copy ul { padding-left: 20px; color: var(--muted); line-height: 1.7; }
.reel-player { width: min(100%, 430px); justify-self: center; aspect-ratio: 9 / 16; border: 1px solid rgba(241,236,227,.24); box-shadow: 0 24px 80px rgba(0,0,0,.45); background: #000; }
.reel-player video { display: block; width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 820px) {
  .wrap { width: min(calc(100% - 28px), var(--max)); }
  .masthead-inner { min-height: 62px; }
  nav a:first-child { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 70px 20px 50px; }
  .hero h1 { font-size: clamp(3.1rem, 18vw, 5.8rem); }
  .hero-photo { min-height: 400px; }
  .section-head { display: block; }
  .section-head p { margin-top: 20px; }
  .story, .story:first-child { grid-column: span 12; padding: 34px 4px 32px 46px; border-right: 0; }
  .story:first-child h3 { font-size: clamp(2rem, 10vw, 3.3rem); }
  .story:nth-child(odd) { border-right: 0; }
  .story-no { top: 38px; }
  .archive-item { grid-template-columns: 1fr auto; gap: 9px 18px; }
  .archive-item time { grid-column: 1 / -1; }
  .footer-inner { flex-direction: column; }
  .reel-grid { grid-template-columns: 1fr; }
  .reel-player { width: min(100%, 390px); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Searchable article and author pages, using the existing design. */
.story-link { text-decoration: none; }
.story-link:hover, .story-link:focus { text-decoration: underline; text-underline-offset: .12em; }
.article-page { max-width: 900px; }
.article-page h1 { font-size: clamp(2.1rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -.04em; overflow-wrap: anywhere; }
.article-back { margin-top: 36px; line-height: 1.7; }

.archive-heading { margin: 8px 0 32px; font-size: clamp(2.4rem,6vw,5rem); letter-spacing: -.06em; text-transform: uppercase; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; font-size:.75rem; letter-spacing:0; text-transform:none; }
.breadcrumbs a:first-child { display:inline; }
.article-topics { color:var(--muted); line-height:1.6; font-size:.85rem; }
.article-page > .byline { margin-bottom:24px; }
.related-news { margin-top:40px; padding-top:20px; border-top:1px solid var(--line); }
.related-news h2 { font-size:1.4rem; }
.related-news ul { padding-left:20px; line-height:1.6; }
.related-news li { margin:12px 0; }

/* Archivo: búsqueda editorial, con la paleta y tipografía de InContext. */
[hidden] { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.archive-search { min-height:75vh; }
.archive-intro { display:flex; justify-content:space-between; align-items:end; gap:48px; margin-bottom:36px; }
.archive-intro .archive-heading { margin-bottom:0; line-height:.94; }
.archive-intro > p { max-width:290px; color:#5f5a54; font-family:Georgia,serif; font-size:1.1rem; line-height:1.6; margin:0 0 3px; }
.search-dot { color:var(--red); }
#archive-search { padding:26px 28px 24px; border:1px solid #b4ada3; background:rgba(255,255,255,.24); }
#search-controls { border:0; padding:0; margin:0; min-width:0; }
.field { min-width:0; display:flex; flex-direction:column; gap:9px; }
.field label { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.field input, .field select { width:100%; min-width:0; height:48px; background:var(--paper); color:var(--ink); border:1px solid #9b9388; border-radius:0; padding:0 12px; font:inherit; font-size:1rem; color-scheme:light; }
.field input[type=date] { appearance:none; -webkit-appearance:none; }
.field input[type=date]::-webkit-date-and-time-value { text-align:left; }
.query-row { display:flex; gap:12px; align-items:end; }
.query-field { flex:1; }
.query-input { position:relative; }
.query-input input { height:56px; padding-left:44px; background:#fffcf6; }
.search-icon { position:absolute; left:17px; top:18px; width:15px; height:15px; border:2px solid #766c60; border-radius:50%; pointer-events:none; }
.search-icon::after { content:""; position:absolute; width:8px; height:2px; background:#766c60; right:-6px; bottom:-4px; transform:rotate(45deg); }
.search-submit { min-height:56px; min-width:136px; padding:0 22px; display:flex; justify-content:space-between; gap:24px; align-items:center; background:var(--red); color:var(--ink); font:inherit; font-weight:800; border:1px solid var(--red); cursor:pointer; }
.search-submit span { font-size:1.3rem; }
.search-submit:hover { background:#c91c16; color:#fff; }
.search-help { margin:11px 0 0; color:#645c52; font-size:.8rem; line-height:1.5; }
.filter-row { display:grid; grid-template-columns:1.15fr 1fr 1fr 1fr auto; align-items:end; gap:16px; margin-top:24px; }
#clear-search { align-self:end; min-height:48px; border:0; background:transparent; padding:10px 0 10px 8px; font:inherit; font-size:.83rem; color:var(--red-dark); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.archive-search :is(input,select,button,a,summary):focus-visible { outline:3px solid var(--red-dark); outline-offset:4px; }
.date-error { color:var(--red-dark); font-size:.88rem; font-weight:700; margin:14px 0 0; }
input[aria-invalid=true] { border:2px solid var(--red-dark); }
.results-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin:40px 0 22px; }
.archive-search .results-heading h2 { margin:0; font-size:.85rem; font-weight:800; letter-spacing:.1em; }
#search-status { margin:0; color:#645c52; font-size:.85rem; }
.active-filters { display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 24px; }
.active-filters span { max-width:100%; overflow-wrap:anywhere; border:1px solid #b4ada3; padding:7px 10px; font-size:.78rem; color:#5c2824; }
.search-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:44px; }
.search-result { min-width:0; padding:25px 0 28px; border-top:1px solid #b4ada3; display:flex; flex-direction:column; align-items:start; }
.result-meta { display:flex; gap:8px 14px; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.065em; font-size:.66rem; font-weight:700; color:#645c52; line-height:1.5; }
.result-meta time { color:var(--red-dark); }
.search-result h3 { margin:15px 0 14px; font-size:clamp(1.45rem,2.5vw,2rem); letter-spacing:-.035em; line-height:1.1; }
.search-result h3 a { text-decoration:none; }
.search-result h3 a:hover { text-decoration:underline; text-underline-offset:4px; }
.result-excerpt { color:#50483f; font-family:Georgia,serif; line-height:1.6; font-size:.97rem; margin:0 0 22px; }
.result-links { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; margin-top:auto; }
.result-links a { font-size:.76rem; text-underline-offset:4px; }
.result-links .read-story { font-size:.79rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; text-decoration:none; }
.read-story span { color:var(--red); padding-left:6px; font-size:1.1rem; }
.search-result mark { color:inherit; background:#f9c6aa; padding:0 .04em; box-decoration-break:clone; }
.search-empty { border-top:1px solid #b4ada3; padding:40px 0; }
.search-empty h3 { font-size:clamp(1.5rem,4vw,2.2rem); max-width:700px; letter-spacing:-.035em; margin:14px 0; }
.search-empty p { color:#645c52; line-height:1.6; }
#empty-clear { background:var(--ink); color:var(--paper); min-height:48px; border:0; padding:12px 18px; font:inherit; font-size:.85rem; cursor:pointer; }
.edition-browser { margin-top:32px; border-top:2px solid var(--ink); padding-top:22px; }
.edition-browser > summary { color:var(--ink); min-height:44px; letter-spacing:.05em; font-size:.84rem; }
.edition-browser > summary span { margin-left:12px; font-weight:400; color:#645c52; text-transform:none; letter-spacing:0; }
.archive-search .archive-item:last-child { border-bottom:0; }
.archive-cta { display:inline-flex; align-items:center; gap:30px; background:var(--ink); color:var(--paper); padding:15px 20px; min-height:48px; font-size:.9rem; font-weight:700; margin:-8px 0 28px; text-decoration:none; }
.archive-cta span { color:var(--red); font-size:1.3rem; }
.review-label { color:#645c52; font-size:.75rem; margin:0 0 16px; }
@media (max-width:1000px) {
 .filter-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #clear-search { justify-self:start; padding-left:0; }
 .archive-intro { gap:28px; }
}
@media (max-width:600px) {
 .masthead-inner { gap:12px; padding-block:12px; }
 .brand { flex-wrap:wrap; row-gap:3px; column-gap:5px; font-size:1.45rem; max-width:215px; line-height:1; }
 .brand small { flex-basis:100%; font-size:.65rem; line-height:1.4; }
 nav { gap:12px; font-size:.7rem; }
 .archive-search { padding:44px 0 56px; }
 .archive-intro { display:block; margin-bottom:28px; }
 .archive-intro .archive-heading { font-size:clamp(2.65rem,10.8vw,4rem); }
 .archive-intro > p { margin-top:20px; max-width:100%; font-size:1rem; }
 #archive-search { padding:20px 16px; }
 .query-row { flex-wrap:wrap; }
 .query-field { flex-basis:100%; }
 .search-submit { min-width:100%; min-height:48px; }
 .filter-row { column-gap:12px; row-gap:18px; margin-top:22px; }
 .filter-row .field:first-child { grid-column:1 / -1; }
 .filter-row .field:nth-child(4) { grid-column:1 / -1; }
 .field input,.field select { padding-inline:8px; }
 .search-results { grid-template-columns:1fr; }
 .results-heading { align-items:start; flex-direction:column; margin-top:30px; }
 .search-result h3 { font-size:1.65rem; }
 .result-meta { font-size:.65rem; }
 .edition-browser > summary span { display:inline-block; }
}
@media (max-width:600px) {
 .query-input input { padding-left:44px; }
 .filter-row .field:nth-child(2), .filter-row .field:nth-child(3) { grid-column:1 / -1; }
}

/* Social profiles: visible keyboard focus and comfortable touch targets. */
.social-links { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.social-links a { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; color:var(--paper); text-decoration:none; }
.social-links svg { display:block; width:20px; height:20px; }
.social-links a:hover { color:white; border-color:var(--red); background:var(--red-dark); }
.social-links a:focus-visible { outline:2px solid var(--paper); outline-offset:4px; }
.masthead-inner { flex-wrap:wrap; padding-block:12px; gap:12px 24px; }
.footer-inner { align-items:center; flex-wrap:wrap; }
@media (max-width:600px) { .masthead-inner .brand { flex-basis:100%; } .masthead-inner nav { flex:1; flex-wrap:wrap; gap:12px; } .masthead-inner .social-links { margin-left:auto; } }

.daily-story-cover { position:relative; width:min(100%,430px); aspect-ratio:9 / 16; justify-self:center; overflow:hidden; background:var(--red-dark); border:1px solid var(--line); }
.daily-story-cover > img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15); opacity:.5; }
.daily-story-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,16,15,.3),rgba(17,16,15,.8)); }
.daily-story-title { position:absolute; inset:40px 28px; z-index:1; display:flex; flex-direction:column; justify-content:space-between; }
.daily-story-title .section-kicker { color:var(--paper); font-size:.65rem; line-height:1.7; }
.daily-story-title h2 { font-size:clamp(3.5rem,8vw,5.4rem); line-height:.9; letter-spacing:-.065em; margin:32px 0; }
.daily-story-title h2 em { color:var(--red); font-style:normal; }
.daily-story-title p { margin:0; font-size:1.1rem; line-height:1.5; font-weight:700; }

/* Marca protagonista, alineada con las redes en la misma fila. */
.masthead-inner { min-height:104px; flex-wrap:nowrap; align-items:center; gap:28px; padding-block:20px; }
.masthead-inner .brand { position:relative; display:block; flex:none; max-width:none; font-size:clamp(2.2rem,4vw,3.3rem); line-height:1; white-space:nowrap; letter-spacing:-.06em; }
.masthead-inner .brand-slash { margin-inline:.06em; }
.masthead-inner .brand small { position:absolute; top:100%; left:1px; display:block; margin-top:5px; font-size:.7rem; line-height:1; letter-spacing:0; white-space:nowrap; }
.masthead-inner nav { margin-left:auto; }
.masthead-inner .social-links { margin-left:0; }
@media (max-width:600px) {
 .masthead-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:52px auto; gap:12px 8px; min-height:104px; padding-block:14px; }
 .masthead-inner .brand { grid-column:1; grid-row:1; min-width:0; flex-basis:auto; font-size:clamp(1.55rem,7vw,1.85rem); }
 .masthead-inner .brand small { font-size:.62rem; }
 .masthead-inner .social-links { grid-column:2; grid-row:1; margin:0; }
 .masthead-inner nav { grid-column:1 / -1; grid-row:2; margin:0; justify-content:flex-end; }
 .masthead-inner nav a:first-child { display:inline; }
}

/* Portada de la historia: anticipo de las cinco noticias, sin retrato del autor. */
.daily-cover-mosaic { display:flex; flex-direction:column; padding:38px 24px; background:var(--ink); }
.daily-cover-mosaic::after { display:none; }
.daily-cover-heading .section-kicker { color:var(--paper); font-size:.65rem; }
.daily-cover-heading h2 { margin:44px 0 30px; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.05; letter-spacing:-.04em; }
.daily-cover-heading h2 em { color:var(--red); font-style:normal; }
.daily-cover-thumbs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.daily-cover-thumbs > div { position:relative; grid-column:span 2; aspect-ratio:1 / 1; background:#4b4740; border:3px solid var(--paper); overflow:hidden; }
.daily-cover-thumbs > div:nth-child(4) { grid-column:2 / span 2; }
.daily-cover-thumbs > div:nth-child(5) { grid-column:4 / span 2; }
.daily-cover-thumbs svg { width:100%; height:100%; fill:#9b9385; }
.daily-cover-thumbs span { position:absolute; left:0; top:0; padding:3px 6px; background:var(--red); font-size:.7rem; font-weight:900; z-index:1; }
.daily-cover-byline { margin-top:auto; font-size:.75rem; line-height:1.5; color:var(--muted); }