/* Disafter News: the home page at /news and one page per edition.
   Same tokens and typefaces as the site's landing page, laid out as a
   broadsheet: masthead, a lead story, the rest in columns. */
:root{
  --bg:#EDEAF2; --surface:#FBFAFD; --ink:#1C1526; --ink-soft:#5F5673; --ink-faint:#8B819E;
  --line:#D3CBE0; --accent:#6D3FBF; --accent-soft:#EDE4FB; --gold:#8F6B18; --sunken:#E9E5F1;
  --shadow:0 2px 4px rgba(28,21,38,.05), 0 12px 32px rgba(28,21,38,.10);
  --c-video-games:#2E6FB8; --c-stock-market:#2C7350; --c-technology:#6D3FBF;
  --c-world-news:#A8432F; --c-movies:#8F6B18;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#120E1A; --surface:#1C1628; --ink:#EFE9F6; --ink-soft:#A79CBC; --ink-faint:#7C7191;
    --line:#332942; --accent:#B48CF7; --accent-soft:#291F44; --gold:#E2BA5F; --sunken:#171223;
    --shadow:0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
    --c-video-games:#7FB2EE; --c-stock-market:#5DC694; --c-technology:#B48CF7;
    --c-world-news:#EE8B74; --c-movies:#E2BA5F;
  }
}
:root[data-theme="dark"]{
  --bg:#120E1A; --surface:#1C1628; --ink:#EFE9F6; --ink-soft:#A79CBC; --ink-faint:#7C7191;
  --line:#332942; --accent:#B48CF7; --accent-soft:#291F44; --gold:#E2BA5F; --sunken:#171223;
  --shadow:0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
  --c-video-games:#7FB2EE; --c-stock-market:#5DC694; --c-technology:#B48CF7;
  --c-world-news:#EE8B74; --c-movies:#E2BA5F;
}

html{
  scrollbar-color: color-mix(in oklab, var(--accent) 45%, var(--line)) var(--sunken);
  scrollbar-gutter: stable;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Spectral",Georgia,serif; padding:2.2rem 1rem 2rem;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.hdr-actions{position:fixed; top:1rem; right:1rem; z-index:5}
.themebtn{
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--ink-faint);
  background:var(--bg); border:1px solid var(--line); border-radius:999px;
  padding:.26rem .5rem; min-width:1.9rem; cursor:pointer; line-height:1;
}
.themebtn:hover{color:var(--ink); border-color:var(--ink-soft)}

.nw{max-width:62rem; margin:0 auto}

/* Masthead */
.nw-mast{text-align:center; border-bottom:3px double var(--line); padding-bottom:1rem; margin-bottom:1.1rem}
.nw-kicker{
  margin:0; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold);
}
.nw-title{
  font-family:"Cinzel",Georgia,serif; font-weight:700; margin:.3rem 0 .2rem;
  font-size:clamp(2.1rem,8vw,3.6rem); line-height:1.05; letter-spacing:.02em;
}
.nw-title a{color:inherit; text-decoration:none}
.nw-dateline{
  margin:.4rem 0 0; font-family:"IBM Plex Mono",monospace; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.nw-dateline a{color:inherit}

/* Section jump links */
.nw-sections{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.4rem;
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:1rem; margin-bottom:1.4rem; border-bottom:1px solid var(--line);
}
.nw-sections a{color:var(--ink-soft); text-decoration:none; padding-bottom:.3rem; border-bottom:2px solid transparent}
.nw-sections a:hover{color:var(--accent)}
.nw-sections a[aria-current]{color:var(--ink); border-bottom-color:var(--gold)}

/* Moving between the front page, a section and an edition swaps what is
   under the section links in place: the masthead and the links hold still
   and the rest cross-fades. Browsers without cross-document view
   transitions simply load the page. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
}
.nw-mast{view-transition-name:nw-mast}
.nw-sections{view-transition-name:nw-sections}

/* Stories */
.nw-story{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:1.25rem 1.4rem 1.1rem; box-shadow:var(--shadow); scroll-margin-top:1rem;
  display:flex; flex-direction:column;
}
.nw-cat{
  margin:0; font-family:"IBM Plex Mono",monospace; font-size:.64rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.nw-cat-video-games{color:var(--c-video-games)}
.nw-cat-stock-market{color:var(--c-stock-market)}
.nw-cat-technology{color:var(--c-technology)}
.nw-cat-world-news{color:var(--c-world-news)}
.nw-cat-movies{color:var(--c-movies)}
.nw-head{font-family:"Spectral",Georgia,serif; font-weight:600; line-height:1.25; margin:.45rem 0 .55rem; font-size:1.22rem}
.nw-sum{margin:0; line-height:1.65; color:var(--ink); flex:1}
.nw-src{margin:.9rem 0 0; font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.04em}
.nw-src a{text-decoration:none}
.nw-src a:hover{text-decoration:underline}

.nw-lead{padding:1.6rem 1.8rem 1.4rem; border-top:4px solid var(--gold)}
.nw-lead .nw-head{font-size:clamp(1.5rem,4.2vw,2.1rem); line-height:1.18}
.nw-lead .nw-sum{font-size:1.1rem; line-height:1.7; max-width:46rem}

.nw-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr)); gap:1rem; margin-top:1rem}

.nw-empty{text-align:center; font-style:italic; color:var(--ink-soft); padding:2rem 0}

/* Section rules on the home page */
.nw-rule{
  display:flex; align-items:center; gap:1rem; margin:2.8rem 0 1.2rem;
  font-family:"Cinzel",Georgia,serif; font-weight:600; font-size:1.1rem; letter-spacing:.06em;
}
.nw-rule::before, .nw-rule::after{content:""; flex:1; border-top:1px solid var(--line)}

/* Recent editions */
.nw-recent{columns:2 22rem; column-gap:2rem}
.nw-recent .nw-rule{column-span:all}
.nw-day{break-inside:avoid; margin:0 0 1.5rem}
.nw-day h3{font-family:"Spectral",Georgia,serif; font-weight:600; font-size:1.02rem; margin:0 0 .45rem}
.nw-day h3 a{color:var(--ink); text-decoration:none}
.nw-day h3 a:hover{color:var(--accent)}
.nw-day ul{list-style:none; margin:0; padding:0 0 0 .8rem; border-left:2px solid var(--line)}
.nw-day li{margin:.3rem 0; line-height:1.45}
.nw-day li a{color:var(--ink-soft); text-decoration:none}
.nw-day li a:hover{color:var(--accent); text-decoration:underline}
.nw-day .nw-cat{display:block; font-size:.58rem}
.nw-quiet{font-style:italic; color:var(--ink-faint)}

/* Archive */
.nw-month{margin:0 0 1rem}
.nw-month h3{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .4rem}
.nw-month p{margin:0; display:flex; flex-wrap:wrap; gap:.35rem}
.nw-month a{
  display:inline-block; min-width:2.2rem; text-align:center; padding:.25rem .4rem;
  font-family:"IBM Plex Mono",monospace; font-size:.75rem; text-decoration:none;
  border:1px solid var(--line); border-radius:6px; background:var(--surface);
}
.nw-month a:hover{border-color:var(--accent)}

/* A section's headline list: one closed panel per day, opened in place */
.nw-section .nw-rule{margin-top:.6rem}
.nw-range{
  margin:-.6rem 0 1.4rem; text-align:center; font-family:"IBM Plex Mono",monospace;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
}
.nw-list{display:flex; flex-direction:column; gap:.6rem; max-width:48rem; margin:0 auto}
.nw-item{
  --cat:var(--accent);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--cat);
  border-radius:8px; scroll-margin-top:1rem;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.nw-item-video-games{--cat:var(--c-video-games)}
.nw-item-stock-market{--cat:var(--c-stock-market)}
.nw-item-technology{--cat:var(--c-technology)}
.nw-item-world-news{--cat:var(--c-world-news)}
.nw-item-movies{--cat:var(--c-movies)}
.nw-item > summary{
  display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:start;
  padding:.8rem 1.1rem; cursor:pointer; list-style:none; border-radius:8px;
}
.nw-item > summary::-webkit-details-marker{display:none}
.nw-item:hover{border-color:color-mix(in oklab, var(--cat) 45%, var(--line)); border-left-color:var(--cat)}
.nw-item[open]{box-shadow:var(--shadow)}
.nw-item-head{font-weight:600; font-size:1.06rem; line-height:1.35; transition:font-size .2s ease}
.nw-item[open] .nw-item-head{font-size:1.24rem}
.nw-item-date{
  font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap; padding-top:.3rem;
}
.nw-item-date::after{content:"+"; display:inline-block; width:1ch; margin-left:.7rem; color:var(--cat); font-size:.8rem}
.nw-item[open] .nw-item-date::after{content:"−"}
.nw-item-body{margin:0 1.1rem; padding:.85rem 0 1rem; border-top:1px solid var(--line)}
.nw-item-body .nw-src{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1rem}
.nw-item-ed{color:var(--ink-soft)}
@supports (interpolate-size:allow-keywords){
  @media (prefers-reduced-motion: no-preference){
    .nw-item{interpolate-size:allow-keywords}
    .nw-item::details-content{
      block-size:0; overflow:clip;
      transition:block-size .25s ease, content-visibility .25s allow-discrete;
    }
    .nw-item[open]::details-content{block-size:auto}
  }
}
.nw-section .nw-pager{max-width:48rem; margin-left:auto; margin-right:auto}
.nw-pagenums{display:flex; gap:.3rem; justify-content:center; flex-wrap:wrap}
.nw-pagenums > *{min-width:1.8rem; padding:.2rem .35rem; text-align:center; border-radius:6px}
.nw-pagenums a{border:1px solid var(--line); background:var(--surface)}
.nw-pager .nw-pagenums a:hover{border-color:var(--accent); text-decoration:none}
.nw-pagenums [aria-current]{border:1px solid var(--gold); color:var(--ink)}
.nw-pagenums .nw-gap{min-width:0; padding:.2rem 0; color:var(--ink-faint)}

/* Edition pager */
.nw-pager{
  display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center;
  margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
}
.nw-pager a{text-decoration:none}
.nw-pager a:hover{text-decoration:underline}
.nw-pager > :last-child{text-align:right}

.nw-foot{
  max-width:62rem; margin:3rem auto 0; text-align:center;
  font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.06em; color:var(--ink-faint);
}
.nw-foot .tg-sitelinks{margin-top:.55rem; padding-top:0}

@media (max-width:34rem){
  body{padding-top:3rem}
  .nw-story{padding:1.1rem 1.1rem 1rem}
  .nw-lead{padding:1.3rem 1.2rem 1.2rem}
  .nw-pager{font-size:.64rem}
  .nw-item > summary{padding:.75rem .9rem; gap:.7rem}
  .nw-item-body{margin:0 .9rem}
  .nw-item-head{font-size:1rem}
  .nw-item[open] .nw-item-head{font-size:1.12rem}
  .nw-item-date::after{margin-left:.45rem}
  .nw-section .nw-pager{grid-template-columns:1fr 1fr; row-gap:.9rem}
  .nw-section .nw-pagenums{grid-column:1 / -1; grid-row:1}
  .nw-pagenums > *{min-width:1.6rem}
}