/* =====================================================================================
   P-RIÓDICO · THE APP
   Concepto P News, made into an app. The place is the house white; on it lies newsprint, a breath
   warmer, printed in one ink (#1C1B1D, never #000). Each screen shows a little; everything else is
   one tap away, on a sheet that rises over the page and on further sheets that slide in over it,
   each with its way back. Nothing scrolls sideways.
   Type: Instrument Serif for the nameplate, heads and decks; Bodoni Moda for every reading line;
   CP Catalogue for figures and its small capitals for every label. One curve, nothing loops.
   ===================================================================================== */

:root{
  color-scheme:light;
  font-synthesis:none;
  --ink:#1C1B1D;
  --ink-2:rgba(28,27,29,.74);
  --ink-3:rgba(28,27,29,.54);
  --ink-4:rgba(28,27,29,.30);
  --white:#FFFFFF;
  --sheet:#F4F4F1;
  --tone:#E9E9E5;
  --rule:rgba(28,27,29,.18);
  --rule-2:rgba(28,27,29,.62);
  --display:'Instrument Serif','Bodoni Moda',Didot,'Bodoni 72',Georgia,serif;
  --serif:'Bodoni Moda','Bodoni 72',Didot,'Bodoni MT',Georgia,serif;
  --num:'CP Catalogue','CP Catalogue Fallback','EB Garamond',Garamond,'Times New Roman',serif;
  --settle:cubic-bezier(.18,.8,.24,1);
  --breath:cubic-bezier(.55,0,.25,1);
  --touch:.2s; --slow:.46s; --slower:.8s;
  --gap:clamp(20px, 2.4vw, 32px);
  --w:min(1180px, 100%);
  --read:18px; --read-lh:1.56;
  --top:calc(60px + env(safe-area-inset-top, 0px));
  --tabs:0px;
  --fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23a)' opacity='0.045'/%3E%3C/svg%3E");
  --scr-dots:radial-gradient(circle at 50% 50%, var(--ink) 0 .9px, transparent 1.25px) 0 0 / 3px 3px;
  --scr-flat:linear-gradient(rgba(28,27,29,.38), rgba(28,27,29,.38));
  --scr-hatch:repeating-linear-gradient(135deg, var(--ink) 0 .8px, transparent .8px 2.6px);
  --scr-vert:repeating-linear-gradient(90deg, var(--ink) 0 .8px, transparent .8px 2.6px);
  --scr-horz:repeating-linear-gradient(0deg, var(--ink) 0 .8px, transparent .8px 2.6px);
}
@media (max-width:760px){
  :root{ --read:17px; --read-lh:1.52; --top:calc(52px + env(safe-area-inset-top, 0px)); --tabs:calc(54px + env(safe-area-inset-bottom, 0px)); }
}

*, *::before, *::after{ box-sizing:border-box; }
html{ background:var(--white); -webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body{ margin:0; background:var(--white); color:var(--ink); font-family:var(--serif); font-size:16px; line-height:1.45; min-height:100vh;
  font-variant-numeric:oldstyle-nums proportional-nums; font-kerning:normal; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote, dl, dd{ margin:0; padding:0; }
ul, ol{ list-style:none; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:inherit; }
::selection{ background:rgba(28,27,29,.16); }
:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
[hidden]{ display:none !important; }

/* ---------- the voices ---------- */
.sc, .kick, .label, .meta{ font-family:var(--num); font-variant-caps:all-small-caps; font-variant-numeric:oldstyle-nums proportional-nums; }
.kick{ letter-spacing:.13em; font-size:14px; line-height:1.3; color:var(--ink-2); }
.kick b{ font-weight:500; color:var(--ink); }
.label{ letter-spacing:.16em; font-size:14px; line-height:1.3; color:var(--ink); font-weight:500; }
.meta{ letter-spacing:.11em; font-size:13.5px; line-height:1.35; color:var(--ink-3); }
.meta > * + *::before{ content:"·"; margin:0 .55em; color:var(--ink-4); }
.head{ font-family:var(--display); font-weight:400; color:var(--ink); letter-spacing:-.006em; text-wrap:balance; -webkit-hyphens:manual; hyphens:manual; }
.head-xxl{ font-size:clamp(44px, 6.2vw, 96px); line-height:.92; letter-spacing:-.018em; }
.head-xl{ font-size:clamp(38px, 4.6vw, 68px); line-height:.95; letter-spacing:-.014em; }
.head-l{ font-size:clamp(30px, 3vw, 42px); line-height:1; }
.head-m{ font-size:clamp(24px, 2vw, 30px); line-height:1.04; }
.head-s{ font-size:clamp(20px, 1.5vw, 23px); line-height:1.1; }
.deck{ font-family:var(--display); font-style:italic; font-size:clamp(19px, 1.5vw, 21px); line-height:1.26; color:var(--ink-2); text-wrap:pretty; }
.deck-l{ font-size:clamp(21px, 1.9vw, 26px); line-height:1.22; max-width:30em; }
.voice{ font-family:var(--display); font-style:italic; font-size:19px; line-height:1.3; color:var(--ink-2); text-wrap:pretty; }
.title-h{ font-family:var(--display); font-weight:400; font-size:clamp(40px, 4.4vw, 64px); line-height:.94; letter-spacing:-.012em; text-wrap:balance; }
.part-h{ font-family:var(--display); font-weight:400; font-size:clamp(28px, 2.6vw, 36px); line-height:1; letter-spacing:-.008em; text-wrap:balance; }

/* reading text: a measure of about 64 characters, Bodoni at its text size, old-style figures, no widows;
   justified and hyphenated where the column is wide enough to take it, ragged on a phone */
.read{ font-family:var(--serif); font-size:var(--read); line-height:var(--read-lh); max-width:34em; color:var(--ink);
  font-optical-sizing:auto; font-feature-settings:"kern", "liga"; text-wrap:pretty; orphans:2; widows:2;
  text-align:justify; text-justify:inter-word; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:7 3 3; hyphenate-limit-lines:2; }
.read p + p{ text-indent:1.2em; }
.read-first > p:first-child::first-letter{ float:left; font-family:var(--display); font-size:3.9em; line-height:.8; margin:.06em .08em 0 -.02em; }
@media (max-width:760px){ .read{ text-align:left; -webkit-hyphens:manual; hyphens:manual; } }
.quote{ font-family:var(--display); font-size:clamp(22px, 2vw, 27px); line-height:1.18; text-wrap:pretty; hanging-punctuation:first; }
.quote::before{ content:"«"; } .quote::after{ content:"»"; }
:lang(en) .quote::before, .quote:lang(en)::before{ content:"“"; } :lang(en) .quote::after, .quote:lang(en)::after{ content:"”"; }

/* ---------- the printed lean ---------- */
.ll{ display:flex; gap:2px; height:4px; width:min(100%, var(--llw, 9em)); }
.ll > i{ display:block; flex:var(--n) 1 0; min-width:3px; }
[data-s="left"]{ background:var(--scr-dots); }
[data-s="center"], [data-s="neutral"]{ background:var(--scr-flat); }
[data-s="right"]{ background:var(--scr-hatch); }
[data-s="critical"]{ background:var(--scr-vert); }
[data-s="aligned"]{ background:var(--scr-horz); }
[data-s="unrated"]{ background:none; box-shadow:inset 0 0 0 1px var(--ink-4); }
.ll-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:12px; }
.ll-row .meta{ margin-top:0; }
.ll-row .ll{ flex:0 0 auto; }

.meter{ display:grid; gap:9px; }
.meter-h{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.meter-bar{ display:flex; gap:3px; height:12px; }
.meter-bar > i{ display:block; flex:var(--n) 1 0; min-width:4px; }
.meter-key{ display:flex; flex-wrap:wrap; gap:6px 18px; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.1em; font-size:14px; color:var(--ink-2); }
.meter-key > span{ display:inline-flex; align-items:center; gap:7px; }
.meter-key i{ display:inline-block; width:16px; height:8px; }
.meter-key .n{ color:var(--ink); font-variant-numeric:lining-nums; }

/* ---------- the bar on top, the tabs below (a phone) ---------- */
.top{ position:fixed; inset:0 0 auto; z-index:30; height:var(--top); padding:env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color var(--touch) linear; }
.is-scrolled .top{ border-bottom-color:var(--rule); }
.top-in{ width:var(--w); height:100%; margin:0 auto; display:flex; align-items:center; gap:clamp(14px, 2.2vw, 32px); padding:0 clamp(0px, 2vw, 24px); }
.mark{ font-family:var(--display); font-size:25px; line-height:1; letter-spacing:-.01em; white-space:nowrap; margin-right:auto; }
.tabs{ display:flex; gap:clamp(14px, 2vw, 28px); }
.tab{ position:relative; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.14em; font-size:15px; color:var(--ink-3); padding:14px 0; white-space:nowrap;
  transition:color var(--touch) var(--settle); }
.tab:hover, .tab[aria-current="page"]{ color:var(--ink); }
.tab[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:8px; height:1px; background:var(--ink); }
.top-me{ display:flex; align-items:center; gap:clamp(14px, 2vw, 24px); }
.me-w{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.14em; font-size:15px; color:var(--ink); white-space:nowrap; padding:14px 0; }
.lang{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.12em; font-size:14px; color:var(--ink-3); padding:14px 0; white-space:nowrap; }
.lang b{ font-weight:400; color:var(--ink); }
@media (max-width:760px){
  .top .tabs{ display:none; }
  .mark{ font-size:23px; }
  .tabbar{ position:fixed; inset:auto 0 0; z-index:30; height:var(--tabs); padding:0 max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px));
    background:rgba(244,244,241,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--rule);
    display:grid; grid-template-columns:repeat(5, 1fr); }
  .tabbar .tab{ display:flex; align-items:center; justify-content:center; padding:0 0 2px; min-width:0; font-size:13px; letter-spacing:.07em; overflow:hidden; }
  .tabbar .tab[aria-current="page"]::after{ top:-1px; bottom:auto; left:22%; right:22%; }
  .top-me .me-w{ max-width:9.5em; overflow:hidden; text-overflow:ellipsis; }
}
@media (min-width:761px){ .tabbar{ display:none; } }

/* ---------- the screens ---------- */
.app{ padding:calc(var(--top) + clamp(12px, 2.5vw, 28px)) max(16px, env(safe-area-inset-right, 0px)) calc(var(--tabs) + clamp(48px, 8vh, 96px)) max(16px, env(safe-area-inset-left, 0px)); }
.view{ width:var(--w); margin:0 auto; }
.view.is-in{ animation:view-in var(--slow) var(--settle) both; }
@keyframes view-in{ from{ opacity:0; transform:translateY(6px); } }
.wait{ font-family:var(--display); font-style:italic; font-size:22px; color:var(--ink-3); padding:20vh 0; text-align:center; }

/* newsprint: the front page and every screen lie on it */
.sheet{ position:relative; isolation:isolate; background:var(--sheet); padding:clamp(22px, 4vw, 56px);
  box-shadow:0 1px 3px rgba(28,27,29,.06), 0 34px 64px -40px rgba(28,27,29,.30); }
.sheet::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background-image:var(--fibre); background-size:220px 220px; mix-blend-mode:multiply; }
.sheet + .sheet{ margin-top:clamp(28px, 5vh, 56px); }
@media (max-width:760px){ .sheet{ margin:0 -16px; padding:22px 18px 28px; box-shadow:none; } .sheet + .sheet{ margin-top:12px; } }

/* the nameplate and its line */
.mast{ text-align:center; }
.over{ letter-spacing:.2em; font-size:14px; color:var(--ink-2); }
.name{ font-family:var(--display); font-weight:400; font-size:clamp(66px, 12vw, 172px); line-height:.86; letter-spacing:-.016em; white-space:nowrap; margin-top:8px; }
.dateline{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px 1.4em; margin-top:clamp(14px, 2vw, 22px); padding:9px 0 10px;
  border-top:3px double var(--ink); border-bottom:1px solid var(--rule-2); letter-spacing:.13em; font-size:14.5px; color:var(--ink); }
.dateline .sample{ color:var(--ink-3); }

/* a part of a screen and its head */
.part{ margin-top:clamp(40px, 6vw, 72px); }
.part-top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-bottom:12px; margin-bottom:clamp(16px, 2vw, 24px); border-bottom:1px solid var(--rule-2); }
.part-top .more{ white-space:nowrap; }
.more{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.13em; font-size:14.5px; color:var(--ink); }
.more::after{ content:" ›"; font-family:var(--display); font-variant-caps:normal; letter-spacing:0; font-size:1.25em; }

/* ---------- a story, as a card: the whole card is the way in ---------- */
.card{ display:block; position:relative; color:inherit; }
.card .head{ transition:opacity var(--touch) var(--settle); }
@media (hover:hover){ .card:hover .head{ opacity:.72; } }
.card:active{ opacity:.8; }
.card .kick{ margin-bottom:8px; }
.card .deck{ margin-top:10px; }
.card .clamp{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.card .meta{ margin-top:10px; }
.card-row{ padding:16px 0; border-top:1px solid var(--rule); }
.card-row:first-child{ border-top:0; padding-top:0; }

/* the front: the lead across four columns, the next ones beside it */
.front-top{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:var(--gap); margin-top:clamp(24px, 3.4vw, 44px); }
.front-top > .side-list{ border-left:1px solid var(--rule); padding-left:var(--gap); }
.lead .head{ margin-top:2px; }
.lead .still{ margin-top:clamp(18px, 2vw, 26px); }
.rings{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gap); }
.rings > div + div{ border-left:1px solid var(--rule); padding-left:var(--gap); }
.ring-h{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.ring-h .letter{ font-family:var(--display); font-size:34px; line-height:.8; }
.ring-h .part-h{ font-size:28px; }
.ring-list{ margin-top:4px; }
.ring-list .card{ padding:12px 0; border-top:1px solid var(--rule); }
.ring-list .head{ font-size:19px; line-height:1.12; }
@media (max-width:1000px){
  .front-top{ grid-template-columns:1fr; }
  .front-top > .side-list{ border-left:0; padding-left:0; border-top:1px solid var(--rule-2); padding-top:18px; }
  .rings{ grid-template-columns:1fr; gap:36px; }
  .rings > div + div{ border-left:0; padding-left:0; }
}

/* a still, screened like the paper's pictures; video plays only inside a story, when chosen */
.still{ position:relative; overflow:hidden; background:var(--tone); aspect-ratio:var(--ar, 16 / 9); max-width:100%; }
.still canvas, .still img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity var(--slower) var(--settle); }
.still canvas.is-in{ opacity:1; }
.still.css-screen img{ opacity:1; filter:grayscale(1) contrast(1.06) brightness(1.04); mix-blend-mode:multiply; }
.still.css-screen::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(244,244,241,.0) 0 .6px, rgba(244,244,241,.55) 1.4px) 0 0 / 3px 3px; pointer-events:none; }
.still.is-held{ background:var(--tone) var(--scr-dots); background-blend-mode:multiply; opacity:.9; }
.still.is-held::before{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(233,233,229,.86), rgba(233,233,229,.86)); }
.still .on{ position:absolute; left:12px; bottom:10px; z-index:2; display:flex; align-items:center; gap:10px; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.14em; font-size:14px; color:var(--ink); background:var(--sheet); padding:5px 10px 6px; }
.still .on::before{ content:""; width:18px; height:1px; background:var(--ink); }
.still iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4; }
.plate{ display:block; width:100%; cursor:pointer; }

/* on screen: a grid of stills, never a strip */
.reels{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--gap); }
.reels .card .head{ font-size:18px; line-height:1.15; margin-top:10px; }
@media (max-width:1000px){ .reels{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; } }

/* P-ositive, set small on the front */
.pos-teaser{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:var(--gap); align-items:start; }
.pos-name{ font-family:var(--display); font-size:clamp(48px, 6vw, 84px); line-height:.86; letter-spacing:-.016em; }
@media (max-width:760px){ .pos-teaser{ grid-template-columns:1fr; } }

.foot{ margin-top:clamp(40px, 6vw, 72px); padding-top:16px; border-top:3px double var(--ink); display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:var(--gap); align-items:start; }
.foot .voice{ max-width:34em; }
.foot .acts{ display:grid; gap:12px; justify-items:start; }
@media (max-width:760px){ .foot{ grid-template-columns:1fr; } }

/* a section's own screen */
.sec-h{ display:flex; align-items:flex-end; gap:16px; padding-bottom:14px; border-bottom:3px double var(--ink); }
.sec-h .letter{ font-family:var(--display); font-size:clamp(64px, 9vw, 120px); line-height:.78; }
.sec-h .meta{ margin-left:auto; text-align:right; }
.sec-lead{ display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:var(--gap); align-items:start; margin-top:clamp(22px, 3vw, 36px); }
.sec-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:var(--gap); margin-top:clamp(28px, 4vw, 48px); border-top:1px solid var(--rule-2); }
.sec-grid .card{ padding:18px 0 22px; border-bottom:1px solid var(--rule); }
@media (max-width:1000px){ .sec-lead{ grid-template-columns:1fr; } .sec-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:760px){ .sec-grid{ grid-template-columns:1fr; } }

/* a list of ways further in: a word, a count, the way */
.doors{ border-top:1px solid var(--rule-2); }
.door{ display:grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:center; gap:14px; width:100%; padding:16px 2px; border-bottom:1px solid var(--rule); color:inherit; }
.door .t{ font-family:var(--display); font-size:22px; line-height:1.12; }
.door .s{ display:block; font-family:var(--display); font-style:italic; font-size:17px; line-height:1.25; color:var(--ink-3); margin-top:3px; text-wrap:pretty; }
.door .n{ font-family:var(--num); font-variant-numeric:lining-nums; font-size:17px; color:var(--ink-2); }
.door .go{ font-family:var(--display); font-size:26px; line-height:1; color:var(--ink-2); transition:transform var(--touch) var(--settle); }
@media (hover:hover){ .door:hover .go{ transform:translateX(3px); color:var(--ink); } }
.door:active{ background:rgba(28,27,29,.03); }
.door.is-quiet{ pointer-events:none; }
.door.is-quiet .t{ color:var(--ink-3); }

/* chips that choose, wrapping on to a second line, never scrolling */
.chips{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.chip{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.13em; font-size:15px; color:var(--ink-3); padding:6px 0; border-bottom:1px solid transparent; }
.chip .n{ margin-left:6px; font-variant-numeric:lining-nums; }
.chip[aria-pressed="true"]{ color:var(--ink); border-bottom-color:var(--ink); }

/* buttons: a word and its rule, never a box; the one strong act is a block of ink */
.btn{ display:inline-flex; align-items:center; gap:12px; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.14em; font-size:15.5px;
  color:var(--sheet); background:var(--ink); padding:12px 20px 13px; transition:opacity var(--touch) var(--settle); }
.btn:disabled{ opacity:.4; cursor:default; }
.btn-l{ display:inline-flex; align-items:center; gap:10px; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.14em; font-size:15.5px; color:var(--ink);
  padding:8px 0; border-bottom:1px solid var(--ink); }
a.ext::after{ content:" ↗"; font-family:var(--display); font-variant-caps:normal; }

/* ---------- the sheets: a story rises over the page; further in, sheets slide over it ---------- */
.sheets{ position:fixed; inset:0; z-index:50; }
.sheets[hidden]{ display:none; }
.veil{ position:absolute; inset:0; background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity var(--slow) var(--settle); }
.sheets.is-open .veil{ opacity:1; }
.stack{ position:absolute; left:50%; top:clamp(12px, 3vh, 32px); bottom:0; width:min(980px, calc(100% - 48px)); transform:translateX(-50%) translateY(28px); opacity:0;
  transition:transform var(--slower) var(--settle), opacity var(--slow) var(--settle); overflow:hidden;
  background:var(--sheet); box-shadow:0 2px 6px rgba(28,27,29,.06), 0 40px 90px -30px rgba(28,27,29,.34); }
.stack::before{ content:""; position:absolute; inset:0; z-index:9; pointer-events:none; background-image:var(--fibre); background-size:220px 220px; mix-blend-mode:multiply; }
.sheets.is-open .stack{ transform:translateX(-50%); opacity:1; }
@media (max-width:760px){
  .stack{ left:0; top:0; width:100%; transform:translateY(100%); opacity:1; box-shadow:none; }
  .sheets.is-open .stack{ transform:none; }
}
.pane{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--sheet);
  transition:transform var(--slower) var(--settle), opacity var(--slow) var(--settle); will-change:transform; }
.pane.is-under{ transform:translateX(-18%); opacity:0; pointer-events:none; }
.pane.is-coming{ transform:translateX(100%); }
.pane.is-going{ transform:translateX(100%); }
.pane.is-walk-l{ transform:translateX(-6%); opacity:0; }
.pane.is-walk-r{ transform:translateX(6%); opacity:0; }
@media (min-width:761px){ .pane.is-coming, .pane.is-going{ transform:translateX(56px); opacity:0; } .pane.is-under{ transform:translateX(-40px); } }
.pane-bar{ flex:0 0 auto; display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:12px;
  height:calc(54px + env(safe-area-inset-top, 0px)); padding:env(safe-area-inset-top, 0px) max(18px, env(safe-area-inset-right, 0px)) 0 max(18px, env(safe-area-inset-left, 0px));
  border-bottom:1px solid transparent; transition:border-color var(--touch) linear; position:relative; z-index:2; }
@media (min-width:761px){ .pane-bar{ height:58px; padding:0 clamp(22px, 4vw, 48px); } }
.pane.is-scrolled .pane-bar{ border-bottom-color:var(--rule); }
.pb-back{ justify-self:start; display:inline-flex; align-items:center; gap:8px; max-width:100%; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.13em; font-size:15px; color:var(--ink); padding:12px 0; }
.pb-back::before{ content:"‹"; font-family:var(--display); font-variant-caps:normal; font-size:28px; line-height:.6; letter-spacing:0; margin-top:-2px; }
.pb-back span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pb-title{ justify-self:center; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.16em; font-size:14px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40vw; }
.pb-close{ justify-self:end; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.13em; font-size:15px; color:var(--ink-2); padding:12px 0; }
.pane-body{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:clamp(10px, 2vw, 18px) max(18px, env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); }
@media (min-width:761px){ .pane-body{ padding:clamp(12px, 2vw, 20px) clamp(22px, 5vw, 64px) 72px; } }
.pane-body > * + *{ margin-top:clamp(26px, 3.4vw, 40px); }
.pane-body .wait{ padding:16vh 0; }
.is-sheet, .is-sheet body{ overflow:hidden; }

/* the story, opened */
.st-head .kick{ margin-bottom:10px; }
.st-head .deck{ margin-top:14px; }
.st-head .meta{ margin-top:14px; }
.st-cov{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--gap); padding-top:18px; border-top:1px solid var(--rule-2); }
.st-cov.one{ grid-template-columns:minmax(0, 1fr); max-width:560px; }
.st-blind{ margin-top:12px; font-family:var(--display); font-style:italic; font-size:19px; line-height:1.3; }
@media (max-width:760px){ .st-cov{ grid-template-columns:1fr; } }
.known{ padding:16px 0 0; border-top:1px solid var(--rule-2); }
.known .read{ margin-top:8px; }
.known .label + .read{ margin-top:10px; }
.backed{ margin-top:10px; }

/* the three sides on the story: equal columns, always left, center, right */
.sides{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gap); border-top:1px solid var(--rule-2); padding-top:16px; }
.sides > * + *{ border-left:1px solid var(--rule); padding-left:var(--gap); }
.side-card{ display:flex; flex-direction:column; gap:10px; color:inherit; }
.side-card .side-h{ display:flex; align-items:center; gap:10px; }
.side-card .side-h i{ width:18px; height:9px; flex:0 0 auto; }
.side-card .quote{ font-size:21px; }
.side-card .by{ color:var(--ink-3); }
.side-card .more{ margin-top:auto; padding-top:6px; }
.side-card.is-none .quote{ color:var(--ink-3); font-style:italic; }
.side-card.is-none .quote::before, .side-card.is-none .quote::after{ content:none; }
@media (max-width:760px){ .sides{ grid-template-columns:1fr; gap:0; } .sides > *{ padding:16px 0 !important; border-left:0 !important; border-bottom:1px solid var(--rule); } .sides > :first-child{ padding-top:0 !important; } }

/* a side opened: every outlet's headline, attributed */
.heads{ border-top:1px solid var(--rule-2); }
.heads li{ padding:16px 0 18px; border-bottom:1px solid var(--rule); display:grid; gap:8px; }
.heads .quote{ font-size:clamp(21px, 2vw, 25px); }
.heads .row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; }
.heads .who{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.13em; font-size:15px; color:var(--ink); }
.note{ font-family:var(--display); font-style:italic; font-size:18px; color:var(--ink-3); }

/* the coverage, outlet by outlet */
.cov li{ border-bottom:1px solid var(--rule); }
.cov .row-in{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px 16px; padding:14px 0 16px; color:inherit; width:100%; }
.cov .o{ display:flex; align-items:center; gap:10px; }
.cov .o i{ width:14px; height:8px; flex:0 0 auto; }
.cov .o b{ font-family:var(--display); font-weight:400; font-size:21px; line-height:1.1; }
.cov .d{ font-family:var(--num); font-variant-numeric:lining-nums; font-size:15px; color:var(--ink-3); white-space:nowrap; }
.cov .h{ grid-column:1 / -1; font-family:var(--serif); font-size:16.5px; line-height:1.4; color:var(--ink-2); text-wrap:pretty; }
.cov .m{ grid-column:1 / -1; }

/* documents, figures and charts */
.doc{ padding:18px 0 20px; border-bottom:1px solid var(--rule); }
.doc:first-child{ border-top:1px solid var(--rule-2); }
.doc .t{ font-family:var(--display); font-weight:400; font-size:23px; line-height:1.14; margin-top:6px; text-wrap:balance; }
.doc .s{ margin-top:10px; }
.tally{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-top:16px; }
.tally b{ display:block; font-family:var(--num); font-weight:400; font-variant-numeric:lining-nums; font-size:clamp(40px, 5vw, 60px); line-height:.9; }
.tally span{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.12em; font-size:14px; color:var(--ink-2); }
.tally .prev{ display:block; color:var(--ink-3); margin-top:4px; }
.chart{ margin-top:14px; max-width:520px; }
.chart svg{ width:100%; height:auto; overflow:visible; }
.chart text{ font-family:var(--num); font-size:10px; fill:var(--ink-2); font-variant-numeric:lining-nums; }

/* Memory: then and now */
.mem{ padding:20px 0 24px; border-bottom:1px solid var(--rule); }
.mem:first-child{ border-top:1px solid var(--rule-2); }
.mem-h{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 16px; }
.mem-h .head{ font-size:clamp(24px, 2.2vw, 30px); }
.mem-pair{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--gap); margin-top:16px; }
.mem-pair > div + div{ border-left:1px solid var(--rule); padding-left:var(--gap); }
.mem-pair .quote{ font-size:clamp(20px, 1.8vw, 23px); margin-top:8px; }
.mem-pair .src{ margin-top:10px; }
.mem .read{ margin-top:16px; font-size:16.5px; color:var(--ink-2); }
@media (max-width:760px){ .mem-pair{ grid-template-columns:1fr; } .mem-pair > div + div{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:16px; } }

/* an outlet */
.scale{ display:inline-flex; gap:4px; vertical-align:middle; margin-left:10px; }
.scale i{ width:16px; height:8px; box-shadow:inset 0 0 0 1px var(--ink-4); }
.scale i.on{ background:var(--ink); box-shadow:none; }
.facts-l{ border-top:1px solid var(--rule-2); }
.facts-l > div{ display:grid; grid-template-columns:9.5em minmax(0, 1fr); gap:16px; padding:13px 0; border-bottom:1px solid var(--rule); align-items:baseline; }
.facts-l dt{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.13em; font-size:14.5px; color:var(--ink-2); }
.facts-l dd{ font-family:var(--display); font-size:21px; line-height:1.2; }
@media (max-width:520px){ .facts-l > div{ grid-template-columns:1fr; gap:4px; } }
.draft{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.13em; font-size:14px; color:var(--ink-3); }

/* the walk from story to story, at the foot of a story */
.walk{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); gap:16px; align-items:start; padding-top:16px; border-top:3px double var(--ink); }
.walk a{ display:grid; gap:4px; color:inherit; }
.walk a:last-child{ text-align:right; }
.walk .label{ color:var(--ink-3); }
.walk .head{ font-size:19px; line-height:1.12; }
.walk .at{ font-family:var(--num); font-variant-numeric:lining-nums; font-size:15px; color:var(--ink-3); padding-top:2px; }
@media (max-width:760px){ .walk .head{ font-size:17px; } }

/* ---------- forms: one question at a time ---------- */
.q-step{ min-height:52vh; display:flex; flex-direction:column; }
.q-n{ display:flex; align-items:center; gap:12px; }
.q-n .bar{ flex:1 1 auto; height:1px; background:var(--rule); position:relative; }
.q-n .bar i{ position:absolute; inset:0 auto 0 0; background:var(--ink); width:calc(var(--p) * 1%); transition:width var(--slow) var(--settle); }
.q-h{ font-family:var(--display); font-weight:400; font-size:clamp(34px, 4vw, 52px); line-height:1; letter-spacing:-.01em; margin-top:clamp(28px, 5vh, 56px); text-wrap:balance; }
.q-t{ margin-top:12px; }
.q-body{ margin-top:clamp(22px, 4vh, 36px); }
.q-acts{ margin-top:auto; padding-top:32px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.field{ display:grid; gap:8px; max-width:30em; }
.field-l{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.13em; font-size:14.5px; color:var(--ink-2); }
.in{ width:100%; font-family:var(--display); font-size:clamp(24px, 2.6vw, 30px); line-height:1.2; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--ink); padding:8px 0 10px; border-radius:0; }
.in::placeholder{ color:var(--ink-4); }
.in:focus{ outline:none; border-bottom-width:2px; padding-bottom:9px; }
.choices{ border:0; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(12em, 1fr)); gap:0 var(--gap); max-width:40em; }
.choice{ display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--rule); cursor:pointer; font-family:var(--display); font-size:22px; line-height:1.1; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice .mk{ width:16px; height:16px; flex:0 0 auto; box-shadow:inset 0 0 0 1px var(--ink-2); transition:background var(--touch) var(--settle); }
.choice input[type=radio] + .mk{ border-radius:50%; }
.choice input:checked + .mk{ background:var(--ink); box-shadow:inset 0 0 0 1px var(--ink), inset 0 0 0 3px var(--sheet); }
.choice input:focus-visible + .mk{ outline:1px solid var(--ink); outline-offset:3px; }
.sugg{ display:grid; max-width:30em; }
.sugg button{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--rule); font-family:var(--display); font-size:21px; }
.sugg small{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.1em; font-size:14px; color:var(--ink-3); white-space:nowrap; }
.picked{ margin-top:14px; font-family:var(--display); font-size:24px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.picked small{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.1em; font-size:14px; color:var(--ink-3); }
.said{ font-family:var(--display); font-style:italic; font-size:18px; color:var(--ink); min-height:1.3em; }

/* ---------- you ---------- */
.pf-name{ font-family:var(--display); font-weight:400; font-size:clamp(64px, 10vw, 150px); line-height:.84; letter-spacing:-.02em; text-wrap:balance; }
.pf-role{ margin-top:16px; }
.pf-nums{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gap); padding-top:16px; border-top:3px double var(--ink); }
.pf-nums b{ display:block; font-family:var(--num); font-weight:400; font-variant-numeric:lining-nums; font-size:clamp(46px, 6vw, 80px); line-height:.9; }
.pf-nums span{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.13em; font-size:14.5px; color:var(--ink-2); }
.bars li{ display:grid; grid-template-columns:minmax(0, 9em) minmax(0, 1fr) 3.2em; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--rule); }
.bars .l{ font-family:var(--display); font-size:19px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bars .b{ height:6px; background:linear-gradient(90deg, var(--ink) calc(var(--v) * 1%), transparent 0); box-shadow:inset 0 -1px 0 var(--rule); }
.bars .v{ font-family:var(--num); font-variant-numeric:lining-nums; font-size:15px; text-align:right; color:var(--ink-2); }
@media (max-width:520px){ .bars li{ grid-template-columns:minmax(0, 1fr) 3em; } .bars .b{ grid-column:1 / -1; grid-row:2; } }

/* ---------- P-ositive ---------- */
.pos-mast{ text-align:center; padding-bottom:16px; border-bottom:3px double var(--ink); }
.pos-mast .name{ font-size:clamp(64px, 11vw, 150px); }
.pos-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:var(--gap); border-top:1px solid var(--rule-2); }
.pos-grid .card{ padding:18px 0 22px; border-bottom:1px solid var(--rule); }
.pos-fig{ display:flex; align-items:baseline; gap:12px; margin-top:12px; }
.pos-fig b{ font-family:var(--num); font-weight:400; font-variant-numeric:lining-nums; font-size:34px; line-height:1; }
.pos-fig span{ font-family:var(--display); font-style:italic; font-size:17px; line-height:1.25; color:var(--ink-2); }
@media (max-width:1000px){ .pos-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:760px){ .pos-grid{ grid-template-columns:1fr; } }

/* ---------- the press, before the paper ---------- */
.press{ position:fixed; inset:0; z-index:100; background:#FFFFFF; transition:opacity .5s var(--settle); }
.press canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .6s var(--settle); }
.press.is-on canvas{ opacity:1; }
.press.is-gone{ opacity:0; pointer-events:none; }
.press-foot{ position:absolute; left:0; right:0; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); text-align:center; z-index:2;
  font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.16em; font-size:13.5px; color:var(--ink-3); }
.is-pressing body{ overflow:hidden; }

/* ---------- arrival ---------- */
.arrive{ animation:arrive var(--slower) var(--settle) both; }
.arrive-2{ animation-delay:70ms; } .arrive-3{ animation-delay:140ms; }
@keyframes arrive{ from{ opacity:0; transform:translateY(6px); filter:blur(3px); } }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* =====================================================================================
   ROUND TWO: the small spacings, the Hoy switch, the Newscast, Sigue pasando, where a story is told from
   ===================================================================================== */
.mt-xs{ margin-top:6px; } .mt-s{ margin-top:10px; } .mt-m{ margin-top:clamp(16px, 2vw, 22px); } .mt-l{ margin-top:clamp(28px, 4vw, 44px); }
.mt{ margin-top:14px; } .mb{ margin-bottom:14px; }
.card .mb{ margin-bottom:14px; }
.still-w{ margin-top:clamp(18px, 2vw, 26px); }
figure > figcaption{ margin-top:10px; }
.name .bl{ display:inline-block; width:0; height:0; vertical-align:baseline; }
.name-s{ font-size:clamp(54px, 10vw, 140px); white-space:normal; text-wrap:balance; line-height:.9; }
.heads a.h{ display:block; color:inherit; }
@media (hover:hover){ .heads a.h:hover .quote{ opacity:.72; } }
.pos-lead{ display:block; padding:clamp(22px, 3vw, 34px) 0; border-bottom:1px solid var(--rule-2); text-align:center; }
.pos-lead .deck{ margin:14px auto 0; }

/* the plain words: what happened, why it matters, what comes next; a word explained where it is used */
dl.short{ display:grid; gap:16px; margin-top:12px; }
dl.short > div{ display:grid; grid-template-columns:9.5em minmax(0, 1fr); gap:6px 18px; }
dl.short dt{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.13em; font-size:14.5px; color:var(--ink-2); padding-top:3px; }
@media (max-width:620px){ dl.short > div{ grid-template-columns:1fr; } }
details.word{ margin-top:14px; border-top:1px solid var(--rule); padding-top:12px; }
details.word summary{ cursor:pointer; list-style:none; font-family:var(--display); font-style:italic; font-size:19px; color:var(--ink); }
details.word summary::-webkit-details-marker{ display:none; }
details.word summary::after{ content:" +"; font-style:normal; color:var(--ink-3); }
details.word[open] summary::after{ content:" −"; }
details.word .read{ margin-top:8px; }
i.sw{ display:inline-block; width:22px; height:10px; margin-right:10px; vertical-align:middle; }
ul.key{ display:grid; gap:8px; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.12em; font-size:15px; }

/* where a story is told from */
.from{ padding-top:16px; border-top:1px solid var(--rule-2); }
.from-l{ display:flex; flex-wrap:wrap; gap:6px 22px; font-family:var(--display); font-size:21px; line-height:1.2; }
.from-l b{ font-weight:400; }
.from-l .n{ font-family:var(--num); font-variant-numeric:lining-nums; font-size:15px; color:var(--ink-3); margin-left:4px; }

/* Hoy: the front page and the three rings under one switch */
.rnav{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px clamp(18px, 3vw, 34px); width:var(--w); margin:0 auto clamp(14px, 2vw, 22px); }
.rnav a{ position:relative; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.14em; font-size:15px; color:var(--ink-3); padding:8px 0; white-space:nowrap; transition:color var(--touch) var(--settle); }
.rnav a:hover, .rnav a[aria-current="page"]{ color:var(--ink); }
.rnav a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:3px; height:1px; background:var(--ink); }
@media (max-width:760px){ .rnav{ justify-content:space-between; gap:2px 12px; margin-bottom:10px; } .rnav a{ font-size:14px; letter-spacing:.1em; } }

/* ---------- the Newscast: the same type, the screen lit, the paper turned to night ---------- */
.tv{ --ink:#F1F0EC; --ink-2:rgba(241,240,236,.80); --ink-3:rgba(241,240,236,.58); --ink-4:rgba(241,240,236,.30);
  --rule:rgba(241,240,236,.16); --rule-2:rgba(241,240,236,.46); --tone:#2A292C; --sheet:#1C1B1D;
  --scr-flat:linear-gradient(rgba(241,240,236,.42), rgba(241,240,236,.42));
  --scr-dots:radial-gradient(circle at 50% 50%, #F1F0EC 0 .9px, transparent 1.25px) 0 0 / 3px 3px;
  --scr-hatch:repeating-linear-gradient(135deg, #F1F0EC 0 .8px, transparent .8px 2.6px);
  --scr-vert:repeating-linear-gradient(90deg, #F1F0EC 0 .8px, transparent .8px 2.6px);
  --scr-horz:repeating-linear-gradient(0deg, #F1F0EC 0 .8px, transparent .8px 2.6px);
  background:#1C1B1D; color:var(--ink); }
.tv::before{ opacity:.5; mix-blend-mode:screen; }
.tv ::selection{ background:rgba(241,240,236,.22); }
.tv :focus-visible{ outline-color:var(--ink); }
.tv-h{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px; padding-bottom:16px; border-bottom:3px double var(--ink); }
.tv-h .voice{ max-width:32em; }
.air{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#E0473A; margin-right:9px; vertical-align:1px; animation:air 2.4s var(--breath) infinite; }
@keyframes air{ 50%{ opacity:.35; } }
.tv-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 20em); gap:var(--gap); margin-top:clamp(18px, 3vw, 30px); align-items:start; }
.tv-stage{ scroll-margin-top:calc(var(--top) + 10px); min-width:0; }
.tv-stage > * + *{ margin-top:clamp(16px, 2vw, 22px); }
.tv-slug{ color:var(--ink-3); }
.screen .still{ background:#0F0F10; }
.screen .plate .on{ color:var(--ink); }
.screen .still .on::before{ background:var(--ink); }
.screen .still.is-held{ background:#232225 radial-gradient(circle at 50% 50%, rgba(241,240,236,.5) 0 .9px, transparent 1.25px) 0 0 / 3px 3px; }
.screen .still.is-held::before{ background:linear-gradient(rgba(28,27,29,.2), rgba(28,27,29,.7)); }
/* the lower third: the note in P-riódico's words, whose broadcast it is, where that outlet leans */
.third{ display:grid; grid-template-columns:auto minmax(0, 1fr); margin-top:0 !important; background:#F4F4F1; color:#1C1B1D; }
.third .bug{ display:flex; align-items:center; justify-content:center; width:clamp(48px, 6vw, 64px); background:#1C1B1D; color:#F4F4F1; font-family:var(--display); font-size:clamp(30px, 3.4vw, 40px); line-height:1; border:1px solid #F4F4F1; }
.third-in{ padding:12px clamp(14px, 2vw, 20px) 13px; min-width:0; }
.third-h{ font-family:var(--display); font-size:clamp(22px, 2.3vw, 31px); line-height:1.06; text-wrap:balance; }
.third-s{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; margin-top:8px; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.11em; font-size:14px; color:rgba(28,27,29,.64); }
.third-s > * + *::before{ content:"·"; margin:0 .55em; color:rgba(28,27,29,.3); }
.third-s .who{ display:inline-flex; align-items:center; gap:8px; }
.third-s b{ font-weight:500; color:#1C1B1D; }
.third-s i{ width:16px; height:8px; flex:0 0 auto; --ink:#1C1B1D; }
.third-s i[data-s="left"]{ background:radial-gradient(circle at 50% 50%, #1C1B1D 0 .9px, transparent 1.25px) 0 0 / 3px 3px; }
.third-s i[data-s="center"]{ background:rgba(28,27,29,.38); }
.third-s i[data-s="right"]{ background:repeating-linear-gradient(135deg, #1C1B1D 0 .8px, transparent .8px 2.6px); }
.third-s i[data-s="unrated"]{ box-shadow:inset 0 0 0 1px rgba(28,27,29,.4); }
.said-t{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.said-t .label{ color:var(--ink-3); }
.said-t .quote{ font-size:clamp(19px, 1.7vw, 22px); color:var(--ink-2); }
.script{ padding-top:14px; border-top:1px solid var(--rule-2); }
.script .read{ color:var(--ink); }
.script .sc{ font-weight:500; letter-spacing:.1em; }
.angles{ padding-top:14px; border-top:1px solid var(--rule-2); }
.angle-sides{ display:grid; gap:18px; margin-top:16px; }
.angle .side-h{ display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--rule); }
.angle .side-h i{ width:18px; height:9px; flex:0 0 auto; }
.angle .side-h .meta{ margin-left:auto; }
.angle.is-none .label{ color:var(--ink-3); }
.angle .note{ margin-top:10px; font-size:17px; }
.angle.is-none{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; }
.angle.is-none .side-h{ border-bottom:0; padding-bottom:0; }
.angle.is-none .side-h .meta{ display:none; }
.angle.is-none .note{ margin-top:0; }
.angle ul{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 16em), 1fr)); column-gap:var(--gap); }
.clip{ display:grid; grid-template-columns:6.4em minmax(0, 1fr); gap:12px; align-items:start; width:100%; padding:12px 0; border-bottom:1px solid var(--rule); transition:opacity var(--touch) var(--settle); }
.clip .still{ aspect-ratio:16 / 9; }
.clip .kick{ display:block; }
.clip-h{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; margin-top:4px; font-family:var(--display); font-size:17px; line-height:1.18; color:var(--ink-2); }
.clip[aria-current="true"] .clip-h{ color:var(--ink); }
.clip[aria-current="true"] .still{ box-shadow:0 0 0 1px var(--ink); }
@media (hover:hover){ .clip:hover .clip-h{ color:var(--ink); } }
.tv-acts{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 22px; padding-top:16px; border-top:3px double var(--ink); }
.tv-acts .btn{ background:var(--ink); color:#1C1B1D; }
.tv-acts .next b{ font-weight:400; color:var(--ink); }
.rundown{ position:sticky; top:calc(var(--top) + 14px); max-height:calc(100vh - var(--top) - 28px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; border-left:1px solid var(--rule); padding-left:var(--gap); }
.rundown > .label{ padding-bottom:10px; border-bottom:1px solid var(--rule-2); }
.ru-b{ margin-top:16px; }
.ru-bh{ padding-bottom:4px; }
.ru{ display:grid; grid-template-columns:2.2em minmax(0, 1fr); gap:10px; width:100%; padding:11px 0 12px; border-bottom:1px solid var(--rule); transition:background var(--touch) linear; }
.ru-n{ font-family:var(--num); font-variant-numeric:lining-nums; font-size:15px; color:var(--ink-3); padding-top:3px; }
.ru-h{ display:block; font-family:var(--display); font-size:18px; line-height:1.14; color:var(--ink-2); text-wrap:balance; }
.ru-m{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:7px; }
.ru-m .meta{ min-width:0; }
.ru-m .ll{ flex:0 0 auto; }
.ru-m .meta{ font-size:13px; }
.ru[aria-current] .ru-n{ color:#E0473A; }
.ru[aria-current] .ru-h{ color:var(--ink); }
@media (hover:hover){ .ru:hover .ru-h{ color:var(--ink); } }
.tv-foot{ margin-top:clamp(32px, 5vw, 56px); padding-top:14px; border-top:1px solid var(--rule); }
.tv-foot .note{ font-size:17px; max-width:44em; }
@media (max-width:1000px){
  .tv-grid{ grid-template-columns:minmax(0, 1fr); }
  .rundown{ position:static; max-height:none; overflow:visible; border-left:0; padding-left:0; border-top:3px double var(--ink); padding-top:14px; }
}
@media (max-width:760px){
  .tv .third-s{ font-size:13px; }
  .tv-acts{ justify-content:flex-start; }
  .tv-acts .btn{ order:-1; width:100%; justify-content:center; }
}

/* ---------- Sigue pasando ---------- */
.sig-why{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--gap); }
.sig-why > div + div{ border-left:1px solid var(--rule); padding-left:var(--gap); }
@media (max-width:760px){ .sig-why{ grid-template-columns:1fr; } .sig-why > div + div{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:16px; } }
.sig-row{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gap); }
.sig-row > .card + .card{ border-left:1px solid var(--rule); padding-left:var(--gap); }
.sig-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--gap); border-top:1px solid var(--rule-2); }
.sig-grid > div{ padding:18px 0 22px; border-bottom:1px solid var(--rule); }
@media (max-width:1000px){ .sig-row{ grid-template-columns:minmax(0, 1fr); } .sig-row > .card + .card{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:16px; } }
@media (max-width:760px){ .sig-grid{ grid-template-columns:minmax(0, 1fr); } }
.sig .deck{ font-size:18px; }
.gap{ display:grid; gap:6px; margin-top:14px; max-width:22em; }
.gap p{ display:grid; grid-template-columns:10em minmax(0, 1fr) 2em; align-items:center; gap:10px; }
.gap i{ display:block; height:6px; background:linear-gradient(90deg, var(--ink) calc(var(--v) * 1%), transparent 0); box-shadow:inset 0 -1px 0 var(--rule); }
.gap b{ font-family:var(--num); font-weight:400; font-variant-numeric:lining-nums; font-size:15px; text-align:right; }
.sig-src{ margin-top:10px; }

/* ---------- the door: members only, for now ---------- */
.is-door .app{ padding-top:clamp(16px, 4vw, 48px); }
.door-sheet{ width:var(--w); margin:0 auto; }
.door-sheet .dateline .lang{ padding:0; }
.door-in{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:var(--gap); margin-top:clamp(26px, 4vw, 48px); align-items:start; }
.door-in > .door-q{ border-left:1px solid var(--rule); padding-left:var(--gap); }
.inside{ border-top:1px solid var(--rule-2); }
.inside li{ display:grid; gap:4px; padding:14px 0; border-bottom:1px solid var(--rule); }
.inside b{ font-family:var(--display); font-weight:400; font-size:24px; line-height:1.05; }
.inside span{ font-family:var(--display); font-style:italic; font-size:18px; line-height:1.28; color:var(--ink-2); }
.door-tabs{ display:flex; flex-wrap:wrap; gap:8px 24px; }
.door-q .q-step{ min-height:0; }
@media (max-width:860px){ .door-in{ grid-template-columns:minmax(0, 1fr); } .door-in > .door-q{ border-left:0; padding-left:0; border-top:3px double var(--ink); padding-top:18px; } }

/* =====================================================================================
   THE NIGHT DESK: P-riódico as a newspaper floating on the screen
   Concepto P News's ground (the dark of the press room) under one sheet of newsprint, the same stock the
   press prints (#ECEBE7), lifted off the desk by the edges of the sheets under it and a long soft shadow.
   One light from the top left, which follows the pointer a little: the ink catches it, the shadow answers.
   ===================================================================================== */
:root{
  --ground:#0B0A09; --on:#E8E4D8; --on-2:rgba(232,228,216,.74); --on-3:rgba(232,228,216,.5); --on-4:rgba(232,228,216,.22);
  --sheet:#ECEBE7; --tone:#E0DFDA;
  --lx:-.57; --ly:-.82; --sx:.57; --sy:.82;
}
html, body{ background:var(--ground); }
html{ color-scheme:dark; }
.sheet, .pane, .stack, .door-sheet{ color-scheme:light; }

/* the bar over the desk */
.top{ background:rgba(11,10,9,.82); }
.is-scrolled .top{ border-bottom-color:rgba(232,228,216,.1); }
.mark{ color:var(--on); }
.tab, .lang, .rnav a{ color:var(--on-3); }
.tab:hover, .tab[aria-current="page"], .rnav a:hover, .rnav a[aria-current="page"], .lang b, .me-w{ color:var(--on); }
.tab[aria-current="page"]::after, .rnav a[aria-current="page"]::after{ background:var(--on); }
.top :focus-visible, .rnav :focus-visible, .tabbar :focus-visible{ outline-color:var(--on); }
@media (max-width:760px){
  .tabbar{ background:rgba(11,10,9,.94); border-top-color:rgba(232,228,216,.12); }
}
.app > .wait, .view > .wait{ color:var(--on-3); }

/* the sheet: newsprint, the edges of the sheets under it, the shadow it throws on the desk */
.sheet{
  background:var(--sheet);
  box-shadow:
    inset calc(var(--lx) * -1.2px) calc(var(--ly) * -1.2px) 0 rgba(255,253,246,.7),
    inset 0 0 0 1px rgba(28,27,29,.06),
    calc(var(--sx) * 1.4px) calc(var(--sy) * 1.4px) 0 #D9D8D3,
    calc(var(--sx) * 2.8px) calc(var(--sy) * 2.8px) 0 #C9C8C3,
    calc(var(--sx) * 4.2px) calc(var(--sy) * 4.2px) 0 #B9B8B3,
    calc(var(--sx) * 8px) calc(var(--sy) * 10px + 4px) 24px rgba(0,0,0,.55),
    calc(var(--sx) * 30px) calc(var(--sy) * 38px + 10px) 70px rgba(0,0,0,.5);
  transition:box-shadow .9s var(--settle);
}
/* the stock's light: a soft sheen from where the light stands, and the fold of a Berliner sheet */
.sheet::after{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    linear-gradient(158deg, rgba(210,220,230,.16) 0%, rgba(255,252,248,.06) 28%, transparent 52%, rgba(40,36,28,.07) 100%),
    radial-gradient(110% 70% at calc(42% + var(--lx) * 18%) calc(14% + var(--ly) * 10%), rgba(255,253,248,.3), transparent 58%);
  mix-blend-mode:soft-light; }
.sheet.front, .door-sheet{ container-type:inline-size; }
.sheet.front::after, .door-sheet::after{
  background:
    linear-gradient(180deg, transparent calc(74.5cqw - 9px), rgba(28,27,29,.07) calc(74.5cqw - 1px), rgba(255,253,248,.55) 74.5cqw, rgba(28,27,29,.03) calc(74.5cqw + 2px), transparent calc(74.5cqw + 12px)),
    linear-gradient(158deg, rgba(210,220,230,.16) 0%, rgba(255,252,248,.06) 28%, transparent 52%, rgba(40,36,28,.07) 100%),
    radial-gradient(110% 70% at calc(42% + var(--lx) * 18%) calc(14% + var(--ly) * 10%), rgba(255,253,248,.3), transparent 58%); }
.sheet + .sheet{ margin-top:clamp(36px, 6vh, 72px); }
@media (max-width:760px){
  .sheet{ margin:0 -8px; box-shadow:
    inset 0 0 0 1px rgba(28,27,29,.06),
    1px 1px 0 #D9D8D3, 2px 2px 0 #C9C8C3, 3px 3px 0 #B9B8B3,
    4px 8px 20px rgba(0,0,0,.55); }
  .sheet + .sheet{ margin-top:22px; }
}

/* ink on stock: the black sits in the paper's tooth, a hair of spread, the light catching its edge */
.sheet :is(.name, .head, .title-h, .part-h, .pf-name, .q-h, .pos-name, .ring-h .letter, .sec-h .letter),
.pane :is(.head, .title-h, .part-h, .q-h){
  text-shadow:
    0 0 .55px rgba(28,27,29,.5),
    0 .4px .7px rgba(28,27,29,.22),
    calc(var(--lx) * -.45px) calc(var(--ly) * -.45px) 0 rgba(255,252,245,.55),
    calc(var(--sx) * .55px) calc(var(--sy) * .75px) 0 rgba(28,22,14,.22); }
.sheet .name{
  text-shadow:
    0 0 .85px rgba(28,27,29,.6),
    0 .55px 1px rgba(28,27,29,.32),
    calc(var(--lx) * -.65px) calc(var(--ly) * -.65px) 0 rgba(255,252,245,.65),
    calc(var(--sx) * .95px) calc(var(--sy) * 1.2px) 0 rgba(28,22,14,.3),
    calc(var(--sx) * -9px) calc(var(--sy) * 16px) 14px rgba(110,122,136,.22); }
.sheet .read, .pane .read{ text-shadow:0 0 .35px rgba(28,27,29,.35); }

/* the sheets that rise over the paper: more newsprint, over the desk's dark */
.veil{ background:rgba(11,10,9,.62); -webkit-backdrop-filter:blur(4px) saturate(.8); backdrop-filter:blur(4px) saturate(.8); }
.stack{ background:var(--sheet); box-shadow:
  1.4px 1.4px 0 #D9D8D3, 2.8px 2.8px 0 #C9C8C3, 4.2px 4.2px 0 #B9B8B3,
  8px 12px 28px rgba(0,0,0,.6), 30px 44px 90px rgba(0,0,0,.5); }
.pane{ background:var(--sheet); }

/* the Newscast is the one screen on the desk: a monitor among the papers */
.tv{ background:#141312; box-shadow:inset 0 0 0 1px rgba(232,228,216,.08), 0 0 0 1px #000, 8px 12px 30px rgba(0,0,0,.6), 30px 40px 80px rgba(0,0,0,.45); }
.tv::after{ background:radial-gradient(120% 80% at 50% 0%, rgba(232,228,216,.05), transparent 60%); mix-blend-mode:normal; }

/* the door on the desk */
.is-door .app{ min-height:100vh; }

/* ---------- the opening: the nameplate over the running press, the wire under it ---------- */
.press, .boot{ position:fixed; inset:0; z-index:100; background:var(--ground); }
.boot{ z-index:99; transition:opacity .5s var(--settle); }
.boot.is-gone{ opacity:0; pointer-events:none; }
.press-hero{ position:absolute; left:0; right:0; top:calc(14vh + env(safe-area-inset-top, 0px)); z-index:3; text-align:center; color:var(--on); pointer-events:none;
  padding:0 16px; transition:opacity 1.1s var(--settle), transform 1.6s var(--settle); }
.press.is-moving .press-hero{ opacity:0; transform:translateY(-3vh); }
.ph-over{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.24em; font-size:clamp(13px, 1.2vw, 16px); color:var(--on-2); animation:ph-in 1.2s var(--settle) .1s both; }
.ph-name{ font-family:var(--display); font-weight:400; font-size:clamp(76px, 15vw, 220px); line-height:.86; letter-spacing:-.018em; margin-top:10px;
  text-shadow:0 0 1px rgba(232,228,216,.5), 0 18px 60px rgba(0,0,0,.65); animation:ph-name 1.6s var(--settle) both; }
.ph-line{ margin-top:clamp(14px, 2vh, 22px); padding-top:10px; border-top:3px double var(--on-4); display:inline-block; font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.16em; font-size:clamp(13px, 1.1vw, 15px); color:var(--on-2); animation:ph-in 1.2s var(--settle) .35s both; }
@keyframes ph-name{ from{ opacity:0; letter-spacing:.04em; filter:blur(6px); } }
@keyframes ph-in{ from{ opacity:0; transform:translateY(8px); } }
.press-foot{ position:absolute; left:0; right:0; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); z-index:3; display:grid; justify-items:center; gap:8px; padding:0 16px; text-align:center; pointer-events:none; }
.ph-wire{ min-height:1.4em; font-family:var(--display); font-style:italic; font-size:clamp(18px, 1.6vw, 22px); color:var(--on); opacity:0; transform:translateY(6px); transition:opacity .45s var(--settle), transform .45s var(--settle); }
.ph-wire.is-in{ opacity:1; transform:none; }
.ph-wire::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#E0473A; margin-right:12px; vertical-align:2px; animation:air 1.6s var(--breath) infinite; }
.ph-skip{ font-family:var(--num); font-variant-caps:all-small-caps; letter-spacing:.16em; font-size:13px; color:var(--on-3); }
.press.is-moving .press-foot{ opacity:.85; }
.sheet .lang{ color:var(--ink-3); } .sheet .lang b{ color:var(--ink); }