/* Local design study: the existing hero frame and Most Read, coordinated. */
html[data-theme=newsprint][data-live=banner] #tick{border-bottom:0}
html[data-theme=newsprint] #hero{border:6px solid var(--fg);border-radius:12px;margin:14px 0 0;background:#fff}
html[data-theme=newsprint] #hero .ht{padding:26px 30px;gap:12px}
html[data-theme=newsprint] #hero #hk{font-size:20px;letter-spacing:.04em}
html[data-theme=newsprint] #hero .hp{font-size:clamp(22px,2.6vw,32px);line-height:1.16}
html[data-theme=newsprint] #hero #hm{letter-spacing:.05em}
html[data-theme=newsprint] #hero .acts{margin-top:8px}
html[data-theme=newsprint] #hero #hb{border-radius:6px;padding:10px 14px}
html[data-theme=newsprint] #hc{border-left:1px solid #c8c8c0}
html[data-theme=newsprint] #mr{margin:16px 42px 22px;padding:16px 20px 9px;border:1px solid #202020;border-radius:12px;background:#fff}
html[data-theme=newsprint] #mr .mrh{align-items:center;gap:10px;padding-bottom:12px;margin-bottom:2px;border-bottom:1px solid #d8d8d2}
html[data-theme=newsprint] #mr h2{font-size:24px}
html[data-theme=newsprint] #mr .mrm{font-size:12px;letter-spacing:.04em}
html[data-theme=newsprint] #mr ol{gap:0 24px}
html[data-theme=newsprint] #mr li{padding:14px 0 16px;column-gap:12px}
html[data-theme=newsprint] #mr .mrn{font-size:32px}
html[data-theme=newsprint] #mr .mrb{bottom:6px}
html[data-theme=newsprint] #grid{border-top:0}
@media(max-width:820px){html[data-theme=newsprint] #hero .ht{padding:20px}html[data-theme=newsprint] #hc{border:0;border-bottom:1px solid #c8c8c0}html[data-theme=newsprint] #mr{margin:16px 0 20px;padding:14px}html[data-theme=newsprint] #mr .mrh{align-items:flex-start}html[data-theme=newsprint] #mr .mrm{margin-left:auto}html[data-theme=newsprint] #mr li{padding:12px 0 16px}}
/* Join the two pieces into a single feature with a continuous outer edge. */
@media(min-width:821px){
html[data-theme=newsprint] #hero{border-bottom:0;border-radius:14px 14px 0 0}
html[data-theme=newsprint] #mr{position:relative;margin:0 42px 22px;padding:20px 24px 12px;border:6px solid var(--fg);border-top:0;border-radius:0 0 14px 14px;background:#fff}
html[data-theme=newsprint] #mr:before{content:"";position:absolute;top:0;left:24px;right:24px;border-top:1px solid #c8c8c0}
html[data-theme=newsprint] #mr .mrh{padding-top:0}
}
@media(max-width:820px){
html[data-theme=newsprint] #hero{border-bottom:0;border-radius:14px 14px 0 0}
html[data-theme=newsprint] #mr{position:relative;margin:0 0 20px;padding:18px 14px 10px;border:6px solid var(--fg);border-top:0;border-radius:0 0 14px 14px}
html[data-theme=newsprint] #mr:before{content:"";position:absolute;top:0;left:14px;right:14px;border-top:1px solid #c8c8c0}
}

/* Heavier shared frame for the connected feature. */
html[data-theme=newsprint] #hero{border-width:10px}
html[data-theme=newsprint] #mr{border-width:10px}
/* Round arrow face; pin the actual hit target while the pointer is over it. */
html[data-theme=newsprint] #hw .hf{background:#171717;border-radius:50%;width:38px;height:38px;margin-top:-19px}
html[data-theme=newsprint] #hw .hf::before{border-width:9px 11px;margin:-9px 0 0 -5px}
html[data-theme=newsprint] #hw #hprev::before{border-left-width:0;margin-left:-6px}
html[data-theme=newsprint] #hw #hnext::before{border-right-width:0;margin-left:-4px}
html[data-theme=newsprint] #hw .hf.hf-held{position:fixed;left:var(--hf-x);right:auto;top:var(--hf-y);margin-top:0}

/* A: the current masthead with a crisp red rule and an ink-black frame. */
html[data-theme=newsprint] #mast{padding:16px 0 10px}
html[data-theme=newsprint] #mast:before,html[data-theme=newsprint] #mast:after{border-top:2px solid #171717}
html[data-theme=newsprint] #brand{border-bottom:5px solid #c8102e}
html[data-theme=newsprint] #tag{color:#4e4e4e;letter-spacing:.26em}
html[data-theme=newsprint] #hero,html[data-theme=newsprint] #mr{border-color:#171717}

@font-face{font-family:EditionMono;src:url('/fonts/IBMPlexMono-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
.edition-dateline{display:none}
html[data-theme=newsprint] #bar #ws{display:none}
html[data-theme=newsprint] #bar .edition-dateline{display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px 14px;margin-left:auto;color:#555;font:500 11px/1.3 EditionMono,'Courier New',monospace;letter-spacing:.035em;text-transform:uppercase}
html[data-theme=newsprint] .edition-dateline .edition-dot{color:#c8102e;font-size:12px}
@media(max-width:700px){html[data-theme=newsprint] #bar .edition-dateline{width:100%;justify-content:flex-start;margin-left:0;font-size:10px;gap:5px 9px}}
/* Single rules tie the lower page together without changing the ads or buttons. */
html[data-theme=newsprint] #more:before,html[data-theme=newsprint] #more:after{border-top:2px solid var(--fg)}
html[data-theme=newsprint] #sponsor-invite{border-top:2px solid var(--fg)}
html[data-theme=newsprint] footer{border-top:2px solid var(--fg)}
html[data-theme=newsprint] #sponsor-invite{border:1px solid var(--fg);border-radius:16px;padding:26px 28px;margin-top:28px}
@media(max-width:700px){html[data-theme=newsprint] #sponsor-invite{padding:22px 20px}}

html[data-theme=newsprint][data-live=banner] #lv{font-size:clamp(30px,5.1vw,64px)}
/* Keep the hovered arrow fixed even when its normal ID-specific position rules apply. */
html[data-theme=newsprint] #hw #hprev.hf-held,html[data-theme=newsprint] #hw #hnext.hf-held{position:fixed;left:var(--hf-x);right:auto;top:var(--hf-y);margin-top:0}
/* Selected Newsroom option C. */
html[data-theme=newsprint] #brand{font-size:clamp(32px,9vw,108px)}
html[data-theme=newsprint] #mast{gap:24px;justify-content:center}
html[data-theme=newsprint] #mast:before,html[data-theme=newsprint] #mast:after{max-width:70px}
html[data-theme=newsprint] #bar .edition-dateline{font-size:10px;letter-spacing:.01em;color:#666}
html[data-theme=newsprint] #verde-top{margin-bottom:10px}
html[data-theme=newsprint] #hero,html[data-theme=newsprint] #mr{border-width:9px}
/* The same live clock and snapshot count in all three rooms. */
html:is([data-theme=dark],[data-theme=terminal]) #bar #ws{display:none}
html:is([data-theme=dark],[data-theme=terminal]) #bar .edition-dateline{display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px 14px;margin-left:auto;color:var(--mu);font:500 11px/1.3 EditionMono,'Courier New',monospace;letter-spacing:.035em;text-transform:uppercase}
html:is([data-theme=dark],[data-theme=terminal]) .edition-dateline .edition-dot{color:var(--text-accent);font-size:12px}
/* Connected Night Shift feature, keeping dark colors and original control behavior. */
html[data-theme=dark] #hero{border:9px solid #33485a;border-bottom:0;border-radius:14px 14px 0 0;margin:14px 0 0;background:var(--cd)}
html[data-theme=dark] #hero .ht{padding:26px 30px;gap:12px}
html[data-theme=dark] #hero #hk{font-size:20px;letter-spacing:.04em}
html[data-theme=dark] #hero .hp{font-size:clamp(22px,2.6vw,32px);line-height:1.16}
html[data-theme=dark] #hc{border-left:1px solid #435766}
html[data-theme=dark] #mr{position:relative;margin:0 42px 22px;padding:20px 24px 12px;border:9px solid #33485a;border-top:0;border-radius:0 0 14px 14px;background:var(--cd)}
html[data-theme=dark] #mr:before{content:"";position:absolute;top:0;left:24px;right:24px;border-top:1px solid #435766}
html[data-theme=dark] #mr .mrh{align-items:center;gap:10px;padding:0 0 12px;margin-bottom:2px;border-bottom:1px solid #435766}
html[data-theme=dark] #mr h2{font-size:24px}
html[data-theme=dark] #mr ol{gap:0 24px}
html[data-theme=dark] #mr li{padding:14px 0 16px;column-gap:12px}
html[data-theme=dark] #mr .mrn{font-size:32px}
html[data-theme=dark] #grid{border-top:0}
html[data-theme=dark] #mast{justify-content:center}
@media(max-width:820px){html[data-theme=dark] #hero .ht{padding:20px}html[data-theme=dark] #hc{border:0;border-bottom:1px solid #435766}html[data-theme=dark] #mr{margin:0 0 20px;padding:18px 14px 10px}html[data-theme=dark] #mr:before{left:14px;right:14px}html[data-theme=dark] #mr li{padding:12px 0 16px}}
@media(max-width:700px){html:is([data-theme=dark],[data-theme=terminal]) #bar .edition-dateline{width:100%;justify-content:flex-start;margin-left:0;font-size:10px;gap:5px 9px}}
/* Night Shift LED board: one solid base for depth. */
html[data-theme=dark][data-theme=dark] #lk{box-shadow:inset 0 2px 7px #000,inset 0 -3px 6px #0008,0 6px 0 #05080d,0 10px 14px #0008}

/* Dimensional LED housing and Newsroom-style carousel navigation. */
html[data-theme=dark][data-theme=dark] #lk{border-color:#101923;box-shadow:inset 0 2px 8px #000,inset 0 -5px 8px #0009,0 3px 0 #202d38,0 7px 0 #0b1119,0 10px 0 #05080d,0 16px 20px #0009}
html[data-theme=dark] #hw .hf{background:#171717;color:#fff;border-radius:50%;width:38px;height:38px;margin-top:-19px}
html[data-theme=dark] #hw .hf::before{border-width:9px 11px;margin:-9px 0 0 -5px}
html[data-theme=dark] #hw #hprev::before{border-left-width:0;margin-left:-6px}
html[data-theme=dark] #hw #hnext::before{border-right-width:0;margin-left:-4px}
html[data-theme=dark] #hw #hprev.hf-held,html[data-theme=dark] #hw #hnext.hf-held{position:fixed;left:var(--hf-x);right:auto;top:var(--hf-y);margin-top:0}
/* Owner-selected Night Shift crawl: recessed blue-gray bezel. */
html[data-theme=dark][data-theme=dark] #lk{border:6px solid #1c2834;border-radius:14px;box-shadow:inset 0 3px 12px #000,inset 0 -4px 9px #000c,0 8px 0 #0c131c,0 15px 20px #000a}
/* Matching carousel arrows in Arcade and the Sleep Chamber. */
html[data-theme=terminal] #hw .hf{background:#171717;color:#fff;border-radius:50%;width:38px;height:38px;margin-top:-19px}
html[data-theme=terminal] #hw .hf::before{border-width:9px 11px;margin:-9px 0 0 -5px}
html[data-theme=terminal] #hw #hprev::before{border-left-width:0;margin-left:-6px}
html[data-theme=terminal] #hw #hnext::before{border-right-width:0;margin-left:-4px}
html[data-theme=terminal] #hw #hprev.hf-held,html[data-theme=terminal] #hw #hnext.hf-held{position:fixed;left:var(--hf-x);right:auto;top:var(--hf-y);margin-top:0}
/* Exact prior Night Shift board frame from the existing stylesheet. */
html[data-theme=dark][data-theme=dark] #lk{border:3px solid #170B0A;border-radius:12px;box-shadow:inset 0 2px 7px #000,inset 0 -1px 0 #6D302A,0 1px 0 #49332F,0 4px 12px #0003}
/* Neutral dimensional housing for the Night Shift and Sleep Chamber LED boards. */
html[data-theme=dark][data-theme=dark] #lk,html[data-theme=terminal][data-calm] #lk{border-color:#111820;box-shadow:inset 0 2px 7px #000,inset 0 -2px 4px #080c10,0 3px 0 #252d35,0 6px 0 #11171d,0 10px 14px #0008}
/* Recessed screen: depth comes from soft interior shade, with no outer rim. */
html[data-theme=dark][data-theme=dark] #lk,html[data-theme=terminal][data-calm] #lk{border:0;border-radius:10px;box-shadow:inset 0 5px 12px #000b,inset 0 -4px 10px #0009,inset 5px 0 12px #0007,inset -5px 0 12px #0007}
/* Sleep Chamber: restore the original shallow LED housing, with edges matched to each room. */
html[data-theme=terminal][data-calm] #lk{border:3px solid color-mix(in srgb,var(--bg) 70%,#080b0e);border-radius:12px;box-shadow:inset 0 2px 7px #000,inset 0 -1px 0 color-mix(in srgb,var(--bg) 68%,#7b8388),0 1px 0 color-mix(in srgb,var(--bg) 76%,#90979a),0 4px 12px #0003}
/* Local preview: soften the paper and use less vertical space on desktop. */
html[data-theme=newsprint]{--bg:#f2f2ef;--cd:#f9f9f6}
html[data-theme=newsprint] #hero,html[data-theme=newsprint] #mr{background:#f9f9f6}
@media(min-width:821px){
html[data-theme=newsprint] #mast{padding-top:4px;padding-bottom:0}
html[data-theme=newsprint] #brand{font-size:clamp(32px,8.2vw,96px)}
html[data-theme=newsprint] #tag{margin:4px 0 0}
html[data-theme=newsprint] #verde-top{margin-top:8px;margin-bottom:6px}
html[data-theme=newsprint][data-live=banner] #tick{padding-top:5px;padding-bottom:6px}
html[data-theme=newsprint][data-live=banner] #lv{font-size:clamp(28px,4.1vw,48px)}
html[data-theme=newsprint] #hero{margin-top:8px}
html[data-theme=newsprint] #hero .ht{padding:16px 22px;gap:7px}
html[data-theme=newsprint] #hero .hp{font-size:clamp(20px,2.2vw,27px);line-height:1.15}
html[data-theme=newsprint] #hc{max-height:280px}
html[data-theme=newsprint] #mr{padding-top:14px;padding-bottom:8px}
html[data-theme=newsprint] #mr .mrh{padding-bottom:7px}
html[data-theme=newsprint] #mr li{padding-top:9px;padding-bottom:12px}
}
/* Soften the headline hover and keyboard-focus highlight without changing its hit area. */
html:is([data-theme=newsprint],[data-theme=dark],[data-theme=terminal]) .sl li:not(.grp):not(.mr):not(.dl):is(:hover,:has(>a:focus-visible)){border-radius:6px}

/* Publisher names stay quiet until hovered or keyboard-focused. */
#mr a.src{color:var(--mu);font:11px var(--m);text-decoration:none;justify-self:start}#mr a.src:hover,#mr a.src:focus-visible{color:var(--text-accent);text-decoration:underline}
html[data-theme=terminal][data-tpal=arcade] #mr a.src{font:500 11px 'IBM Plex Mono',var(--px)}