/* TODAY IN AI, THE PAPER EDITION (W21, 4 Oct 2026, Victor: "needs more love!!! maybe start by changing background to
   light mode as default?"). Benchmarked in research/today-news-ux-2026-10-04.md: Drudge's one loud lead over flat
   columns, Techmeme's source on every line, the FT's warm paper instead of white, a dated masthead like a newspaper.
   One opaque sheet: nothing behind it shows through (Victor on the see-through Try card). Ink on paper by default;
   the dark edition is the same sheet in night colours, chosen per browser (data-paper, set inline in #today).
   Type: a serif only for the nameplate; Jost for the lead; Arial-family bold for the dense list; Plex for the meta.
   The five innovators appear only as small accents: the rule under the nameplate and a square by each column name. */

html[data-paper="light"]{
  --p-bg:#f7f4ec; --p-sheet:#fffdf8; --p-ink:#16161a; --p-ink2:#38373d; --p-mute:#67666d; --p-rule:#dcd5c5; --p-rule2:#16161a;
  --p-hover:#efe9dc; --p-veil:rgba(36,32,24,.42); --p-shadow:0 1px 0 rgba(22,22,26,.04),0 18px 40px -28px rgba(22,22,26,.35);
  --c-y:#d9a400; --c-o:#e2491a; --c-b:#1f5fd6; --c-g:#178a4a; --c-p:#7a3fc4; --p-btn:#16161a; --p-btn-ink:#fffdf8;
}
html[data-paper="dark"]{
  --p-bg:#0e1023; --p-sheet:#15182f; --p-ink:#eeeae0; --p-ink2:#cfccc3; --p-mute:#a3a1ad; --p-rule:#2b2e4a; --p-rule2:#eeeae0;
  --p-hover:#171a33; --p-veil:rgba(2,3,12,.8); --p-shadow:0 18px 40px -28px rgba(0,0,0,.8);
  --c-y:#f5ce34; --c-o:#ff7a4a; --c-b:#6b9bff; --c-g:#3ed283; --c-p:#b58cf0; --p-btn:#eeeae0; --p-btn-ink:#0e1023;
}
html[data-paper]{
  --p-head:"Helvetica Neue",Helvetica,Arial,sans-serif; --p-lead:"Jost","Futura","Avenir Next",-apple-system,sans-serif;
  --p-meta:"IBM Plex Sans",-apple-system,system-ui,sans-serif; --p-plate:Gelasio,Georgia,"Times New Roman",serif;
}

/* the sheet: opaque, edge to edge between the bar and the foot of the screen */
html[data-paper] #today{background:var(--p-bg);color:var(--p-ink);min-height:calc(100vh - 64px);padding:28px 0 64px;
  transition:background-color .25s ease,color .25s ease}
html[data-paper][data-view="today"] #today,html[data-paper][data-view="try"] #today{margin-top:-20px}
html[data-paper][data-view="today"],html[data-paper][data-view="try"]{background:var(--p-bg)}
html[data-paper][data-view="today"] body,html[data-paper][data-view="try"] body{background:var(--p-bg)}
html[data-paper] #today .wrap{max-width:1180px}
@media (min-width:960px){html[data-paper] #today .wrap > *{max-width:none}}
html[data-paper] #today ::selection{background:rgba(31,95,214,.18);color:inherit}
html[data-paper] #today :focus-visible{outline:2px solid var(--c-b);outline-offset:3px}

/* the masthead: date line, nameplate, the edition's size, the five-colour rule */
html[data-paper] #today .mast{display:block;border:0;padding:0;text-align:center}
html[data-paper] #today .mast-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;
  padding-bottom:12px;border-bottom:1px solid var(--p-rule);font:500 12.5px/1.3 var(--p-meta);color:var(--p-mute);text-align:left}
html[data-paper] #today #today-date{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
html[data-paper] #today .mast-top span{font:500 12.5px/1.3 var(--p-meta);color:var(--p-mute)}
html[data-paper] #today .paper-t span{font:600 12.5px/1 var(--p-meta);color:var(--p-ink)}
html[data-paper] #today .dchip{padding:0;border:0;border-radius:0;background:none;color:var(--p-ink);font:600 13px/1.3 var(--p-meta);letter-spacing:0}
html[data-paper] #today .mast .wx{margin-left:auto;font:500 12.5px var(--p-meta);color:var(--p-mute)}
html[data-paper] #today .paper-t{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 11px;border-radius:999px;
  border:1px solid var(--p-rule);background:var(--p-sheet);color:var(--p-ink);font:600 12.5px var(--p-meta);cursor:pointer;
  transition:border-color .2s,background-color .2s}
html[data-paper] #today .paper-t:hover{border-color:var(--p-ink)}
html[data-paper] #today .paper-t svg{width:15px;height:15px}
html[data-paper="light"] #today .paper-t .i-sun,html[data-paper="dark"] #today .paper-t .i-moon{display:none}
html[data-paper] #today .mast h2{margin:22px 0 0;font:400 clamp(44px,7.4vw,84px)/1 var(--p-plate);letter-spacing:-.015em;color:var(--p-ink)}
html[data-paper] #today .mast-k{display:block;margin-top:12px;font:500 13.5px/1.45 var(--p-meta);letter-spacing:0;text-transform:none;color:var(--p-ink2)}
html[data-paper] #today #today-n{color:var(--p-mute)}
html[data-paper] #today .mast-rule{display:block;height:4px;margin-top:18px;
  background:linear-gradient(90deg,var(--c-y) 0 20%,var(--c-o) 20% 40%,var(--c-b) 40% 60%,var(--c-g) 60% 80%,var(--c-p) 80%)}
html[data-paper] #today .mast-rule::after{content:"";display:block;height:1px;margin-top:6px;background:var(--p-rule2)}

/* the lead: the only loud thing on the page */
html[data-paper] #today .lead{display:block;margin:34px 0 6px;padding:0 0 30px;text-align:center;color:var(--p-ink);
  text-decoration:none;border-bottom:1px solid var(--p-rule)}
html[data-paper] #today .lead-k{display:inline-block;font:600 11.5px/1 var(--p-meta);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--c-o)}
html[data-paper] #today .lead b{display:block;max-width:980px;margin:14px auto 0;font:600 clamp(31px,4.6vw,58px)/1.06 var(--p-lead);letter-spacing:-.018em;text-wrap:balance}
html[data-paper] #today .lead:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
html[data-paper] #today .lead-d{display:block;max-width:62ch;margin:14px auto 0;font:400 17px/1.55 var(--p-meta);color:var(--p-ink2)}
html[data-paper] #today .lead-d[hidden]{display:none}
html[data-paper] #today .lead small{display:block;margin-top:16px;font:500 13.5px/1.4 var(--p-meta);color:var(--p-mute)}
html[data-paper] #today .lead small span{font:inherit;letter-spacing:0}
html[data-paper] #today .lead small .src{color:var(--p-ink);font-weight:600}
html[data-paper] #today .lead small .go{margin-left:10px;color:var(--c-b);font-weight:600;white-space:nowrap}

/* the three columns: Drudge's flat list with Techmeme's source on every line, ruled like a page */
html[data-paper] #today .cols3{gap:0;margin-top:26px}
html[data-paper] #today .cols3 > section{padding:0 26px;border-left:1px solid var(--p-rule);min-width:0}
html[data-paper] #today .cols3 > section:first-child{padding-left:0;border-left:0}
html[data-paper] #today .cols3 > section:last-child{padding-right:0}
html[data-paper] #today .cols3 h3,html[data-paper] .focus-clone.cols3 h3{display:flex;align-items:center;gap:9px;padding:0 0 10px;margin:0;
  border-bottom:2px solid var(--p-rule2);font:600 12px/1 var(--p-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--p-ink)}
html[data-paper] #today .cols3 h3::before{content:"";width:9px;height:9px;flex:none;background:var(--cc)}
html[data-paper] #today [data-c="industry"]{--cc:var(--c-g)}
html[data-paper] #today [data-c="policy"]{--cc:var(--c-p)}
html[data-paper] #today [data-c="labs"]{--cc:var(--c-b)}
html[data-paper] #today .cols3 li{counter-increment:none}
html[data-paper] :is(#today .cols3,.focus-clone.cols3) a{display:block;padding:12px 0 13px;border-bottom:1px solid var(--p-rule);color:var(--p-ink);
  text-decoration:none;font:700 16px/1.32 var(--p-head);letter-spacing:-.003em}
html[data-paper] :is(#today .cols3,.focus-clone.cols3) a b{font-weight:700}
html[data-paper] #today .cols3 a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
html[data-paper] #today .cols3 a:visited b{color:var(--p-ink2)}
html[data-paper] :is(#today .cols3,.focus-clone.cols3) a small{display:block;margin-top:5px;font:500 12.5px/1.3 var(--p-meta);color:var(--p-mute);font-variant-numeric:tabular-nums}
html[data-paper] #today .cols3 li:first-child a{padding-top:14px}
html[data-paper] #today .cols3 li:first-child a b{font-size:18px;line-height:1.28}
html[data-paper] #today .cols3.briefs a{padding:10px 0 11px;font-size:15px}
html[data-paper] #today .today-more{margin-top:26px;padding-top:14px;border-top:1px solid var(--p-rule);font:500 12.5px/1.5 var(--p-meta);color:var(--p-mute);text-align:center}
@media (max-width:820px){
  html[data-paper] #today .cols3{gap:30px}
  html[data-paper] #today .cols3 > section{padding:0;border-left:0}
}
@media (max-width:620px){
  html[data-paper] #today{padding-top:18px}
  html[data-paper] #today .mast-top{flex-wrap:nowrap;align-items:center}
  html[data-paper] #today #today-date{flex-direction:column;gap:3px}
  html[data-paper] #today .mast .wx{display:none}
  html[data-paper] #today .paper-t{flex:none;width:36px;height:36px;padding:0;justify-content:center}
  html[data-paper] #today .paper-t span{display:none}
  html[data-paper] #today .cols3{margin-top:18px}
  html[data-paper] #today .mast h2{margin-top:18px}
  html[data-paper] #today .lead{margin-top:24px;padding-bottom:24px;text-align:left}
  html[data-paper] #today .lead-d{margin-left:0;font-size:16px}
  html[data-paper] #today .lead small .go{display:block;margin:6px 0 0}
  html[data-paper] #today .cols3 li:first-child a b{font-size:17px}
}

/* layout B, the editor's front page, on paper: the engravings print as ink (their files are black on white) */
html[data-paper] #today .front{gap:26px;margin-top:30px}
html[data-paper] #today .front[hidden]{display:none}
html[data-paper] #today .f-lead{color:var(--p-ink);padding-bottom:28px;border-bottom:1px solid var(--p-rule)}
html[data-paper] #today .f-lead .kick{font:600 11.5px/1 var(--p-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--c-o)}
html[data-paper] #today .f-lead b{margin-top:12px;font:600 clamp(30px,3.8vw,50px)/1.06 var(--p-lead);letter-spacing:-.018em}
html[data-paper] #today .f-lead small,html[data-paper] #today .fc small,html[data-paper] #today .fm small{font:500 12.5px var(--p-meta);color:var(--p-mute)}
html[data-paper] #today .f-lead .go{font:600 13.5px var(--p-meta);color:var(--c-b)}
html[data-paper] #today .fc{background:var(--p-sheet);border:1px solid var(--p-rule);border-radius:4px;color:var(--p-ink);box-shadow:none}
html[data-paper] #today .fc:hover{background:var(--p-hover);border-color:var(--p-rule)}
html[data-paper] #today .fc b{font:700 clamp(17px,1.5vw,20px)/1.28 var(--p-head);letter-spacing:-.005em}
html[data-paper] #today .fc.wide b{font:600 clamp(21px,2vw,27px)/1.18 var(--p-lead)}
html[data-paper="light"] #today .fc-art{background:var(--p-sheet)!important;box-shadow:none;border-radius:2px}
html[data-paper="light"] #today .fc-art::before,html[data-paper="light"] #today .fc-art::after{display:none}
html[data-paper="light"] #today .fc-art img{filter:none!important;mix-blend-mode:multiply!important;object-fit:contain!important}
html[data-paper="dark"] #today .fc-art{box-shadow:none;border-radius:2px}
html[data-paper] #today .fm{background:var(--p-sheet)!important;border:1px solid var(--p-rule)!important;border-radius:4px!important;color:var(--p-ink)!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-paper] #today .fm b{font:700 16.5px/1.3 var(--p-head)!important;color:var(--p-ink)!important}
html[data-paper] #today .fm-k{font:600 11px/1 var(--p-meta)!important;letter-spacing:.14em!important;color:var(--p-mute)!important}
html[data-paper] #today .fm-art{background:var(--p-hover)!important}
html[data-paper] #today .fm-art i{background:var(--p-hover)!important}

/* Try it firsthand on paper: a solid card, never see-through (overrides the glass in sky.css) */
html[data-paper] #try{background:var(--p-sheet);border:1px solid var(--p-rule);border-top:4px solid var(--c-o);border-radius:6px;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--p-shadow);color:var(--p-ink);max-width:780px;margin-left:auto;margin-right:auto}
html[data-paper] #try .try-k{font:600 11.5px/1.4 var(--p-meta);letter-spacing:.16em;color:var(--c-o)}
html[data-paper] #try .try-k span{color:var(--p-mute);letter-spacing:.02em}
html[data-paper] #try .try-h{font:600 clamp(24px,2.6vw,32px)/1.15 var(--p-lead);letter-spacing:-.012em;color:var(--p-ink)}
html[data-paper] #try .try-why,html[data-paper] #try .try-p{font:400 16px/1.6 var(--p-meta);color:var(--p-ink2)}
html[data-paper] #try .try-story{background:var(--p-bg);border:1px solid var(--p-rule);border-radius:4px}
html[data-paper] #try .try-story span{color:var(--p-mute);font-family:var(--p-meta)}
html[data-paper] #try .try-story a{font:700 17px/1.35 var(--p-head);color:var(--p-ink)}
html[data-paper] #try .try-name{font:600 14px var(--p-meta);letter-spacing:.02em;color:var(--p-ink)}
html[data-paper] #try .try-steps{font:400 16px/1.55 var(--p-meta);color:var(--p-ink)}
html[data-paper] #try .try-steps li::marker{color:var(--c-o)}
html[data-paper] #try .try-done{border-radius:6px;background:var(--p-btn);color:var(--p-btn-ink);font:600 14.5px var(--p-meta)}
html[data-paper] #try .try-done:disabled{background:var(--p-hover);color:var(--p-mute)}

/* the hover preview, in the same edition */
html[data-paper][data-view="today"] .focus-veil{background:var(--p-veil);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html[data-paper][data-view="today"] .focus-clone{background:var(--p-sheet);box-shadow:0 0 0 1px var(--p-rule),0 24px 60px -20px rgba(0,0,0,.45);color:var(--p-ink)}
html[data-paper][data-view="today"] .focus-clone .lead{text-align:left;color:var(--p-ink);text-decoration:none}
html[data-paper][data-view="today"] .focus-clone .lead b{display:block;font:600 34px/1.08 var(--p-lead)}
html[data-paper][data-view="today"] .focus-clone .lead-k,html[data-paper][data-view="today"] .focus-clone .lead small{font:600 12px var(--p-meta);font-style:normal;color:var(--p-mute)}
html[data-paper][data-view="today"] .pv{background:var(--p-sheet);border:1px solid var(--p-rule);box-shadow:0 24px 60px -20px rgba(0,0,0,.45)}
html[data-paper][data-view="today"] .pv-site{color:var(--c-o)}
html[data-paper][data-view="today"] .pv-t{font:700 15px/1.3 var(--p-head);color:var(--p-ink)}
html[data-paper][data-view="today"] .pv-d{color:var(--p-ink2)}
@media (prefers-reduced-motion:reduce){html[data-paper] #today{transition:none}}
html[data-paper] #today .wrap > #try{max-width:780px}
@media (max-width:620px){html[data-paper][data-view="try"] #try{padding:22px 20px}}
/* layout B on a phone: the wide cards stack (a later rule in site.css kept two columns and the art covered the headline) */
@media (max-width:820px){#today .f-grid .fc.wide{grid-column:auto;grid-template-columns:1fr}
  #today .f-grid .fc.wide .fc-art{height:auto;min-height:0;aspect-ratio:16/10}}

/* WIDER PAPER (4 Oct 2026, Victor: "the news is looking awesome ... fill the width more fully please"). The sheet grows
   with the screen up to 1680px, with side margins that scale; the lead headline gets more measure, the summary keeps a
   readable line length. */
html[data-paper] #today .wrap{max-width:min(1680px,100%);padding-left:clamp(20px,3.2vw,56px);padding-right:clamp(20px,3.2vw,56px)}
html[data-paper] #today .lead b{max-width:1240px}