/* /changelog: the visual "What's new" issue (backend/core/whats_new.py _issue_html).
   Every rule is under .wnx, so it can only restyle the issue markup. Colours are the app's own
   tokens, so the page follows the dark/light toggle; the screenshots stay dark, they are the app. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/instrument-serif-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/static/fonts/instrument-serif-400-italic.woff2) format('woff2')}

.wnx{--wnx-serif:'Instrument Serif',Georgia,'Times New Roman',serif;--wnx-ease:cubic-bezier(.2,.7,.2,1);color:var(--text)}
.wnx em{font-style:italic;color:var(--gold-light)}
[data-theme="light"] .wnx em{color:#8a6a0e}

.wnx-hero{padding:8px 0 40px}
.wnx-hero :is(h1,h2){font:400 clamp(48px,8vw,104px)/.95 var(--wnx-serif);letter-spacing:-.02em;margin:0;text-wrap:balance}
.wnx-lede{font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.6;color:var(--dim);max-width:52ch;margin:24px 0 0}
.wnx-meta{margin:16px 0 0;font-size:.85rem;color:var(--muted)}

.wnx-feat{border-top:1px solid var(--border);padding:clamp(40px,6vw,80px) 0}
.wnx-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(24px,3vw,40px)}
.wnx-head h2{font:400 clamp(32px,4.2vw,56px)/1.03 var(--wnx-serif);letter-spacing:-.015em;margin:0;text-wrap:balance}
.wnx-head p{margin:0;color:var(--dim);font-size:1rem;line-height:1.65;max-width:56ch}
@media(max-width:820px){.wnx-head{grid-template-columns:1fr}}

.wnx-shot-label{font:400 clamp(26px,3vw,36px)/1.1 var(--wnx-serif);margin:clamp(28px,4vw,44px) 0 16px}
.wnx-shot{margin:0;border:1px solid var(--border2);border-radius:14px;overflow:hidden;background:var(--s1);box-shadow:0 50px 100px -50px rgba(0,0,0,.9)}
.wnx-shot img{display:block;width:100%;height:auto}
.wnx-path{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--s2);font-size:.8rem;color:var(--muted)}
.wnx-path span{margin-right:6px}
.wnx-path b{font-weight:600;color:var(--text);background:rgba(255,255,255,.06);padding:3px 9px;border-radius:7px}
[data-theme="light"] .wnx-path b{background:rgba(0,0,0,.06)}
.wnx-path b.hit{background:var(--gold);color:#0d0f14}
.wnx-path i{font-style:normal;opacity:.6}

.wnx-points{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px 28px}
.wnx-points li{display:grid;grid-template-columns:26px 1fr;gap:12px;border-top:1px solid var(--border2);padding-top:14px}
.wnx-tag{width:26px;height:26px;border-radius:50%;background:var(--gold);color:#0d0f14;font:700 .75rem/26px system-ui,sans-serif;text-align:center}
.wnx-tag.wnx-dot{background:none;color:var(--gold);font-size:1rem}
.wnx-tag.wnx-dot::before{content:"\2726"}
.wnx-points h4{margin:2px 0 4px;font-size:.95rem;font-weight:600}
.wnx-points p{margin:0;color:var(--dim);font-size:.9rem;line-height:1.55}

.wnx-pair{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.wnx-pair .wnx-points{grid-template-columns:1fr;margin:0}
@media(max-width:760px){.wnx-pair{grid-template-columns:1fr}.wnx-pair .wnx-shot{max-width:340px}}

.wnx-also ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,72px)}
.wnx-also li{border-top:1px solid var(--border);padding:20px 0}
.wnx-also h3{margin:0 0 4px;font-size:1.05rem}
.wnx-also p{margin:0 0 8px;color:var(--dim);font-size:.95rem;line-height:1.6;max-width:48ch}
.wnx-where{display:inline-flex;flex-wrap:wrap;gap:6px;font-size:.8rem}
.wnx-where b{font-weight:600;background:rgba(255,255,255,.06);padding:3px 9px;border-radius:7px}
[data-theme="light"] .wnx-where b{background:rgba(0,0,0,.06)}
.wnx-where b+b::before{content:"\203A";margin-right:6px;opacity:.5;font-weight:400}
@media(max-width:700px){.wnx-also ul{grid-template-columns:1fr}}

.wnx-catch{border-top:1px solid var(--border);padding:clamp(56px,8vw,112px) 0 clamp(24px,4vw,48px);text-align:center;position:relative;isolation:isolate}
.wnx-catch::before{content:"";position:absolute;left:50%;top:50%;width:min(80vw,760px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(212,175,55,.14),transparent 70%);z-index:-1}
.wnx-catch h2{font:400 clamp(40px,6vw,80px)/1 var(--wnx-serif);margin:0 auto;max-width:14ch;text-wrap:balance;letter-spacing:-.015em}
.wnx-catch p{color:var(--dim);margin:20px auto 0;max-width:44ch}
.wnx-btn{display:inline-block;margin-top:28px;background:var(--gold);color:#0d0f14;font-weight:600;text-decoration:none;padding:12px 26px;border-radius:10px;transition:transform .2s var(--wnx-ease),opacity .2s}
.wnx-btn:hover{transform:translateY(-1px);opacity:.92}
.wnx a:focus-visible,.wnx-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* An issue's own page (/changelog/<slug>, whats_new.py issue_page_html): breadcrumb, the lead
   picture with its two buttons and the in-page index, feature links, and the archive links. */
.wnx-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 28px;font-size:.85rem;color:var(--muted)}
.wnx-crumb a{color:var(--dim);text-decoration:none}
.wnx-crumb a:hover{color:var(--text)}
.wnx-crumb i{font-style:normal;opacity:.6}
.wnx-crumb span{color:var(--text)}

.wnx-lead{position:relative;isolation:isolate;margin-top:clamp(28px,4vw,44px)}
.wnx-lead::before{content:"";position:absolute;left:50%;top:38%;width:100%;aspect-ratio:1.6;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(212,175,55,.13),transparent 72%);z-index:-1;pointer-events:none}
.wnx-actions{display:flex;flex-wrap:wrap;gap:12px}
.wnx-actions .wnx-btn{margin-top:0}
.wnx .wnx-btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border2)}
.wnx .wnx-btn-ghost:hover{border-color:var(--gold);opacity:1}
.wnx-lead-shot{margin:clamp(24px,3vw,36px) 0 0;border:1px solid var(--border2);border-radius:14px;overflow:hidden;background:var(--s1);box-shadow:0 60px 120px -50px rgba(0,0,0,.9)}
.wnx-lead-shot img{display:block;width:100%;height:auto}
.wnx-index{margin-top:clamp(24px,3vw,40px)}
.wnx-index ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 clamp(16px,3vw,40px)}
.wnx-index a{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;padding:16px 0;border-top:1px solid var(--border);color:var(--text);text-decoration:none;font-size:1rem;line-height:1.35;transition:border-color .2s}
.wnx-index a:hover{border-top-color:var(--gold)}
.wnx-index b{font:400 1.5rem/1 var(--wnx-serif);color:var(--gold-light)}
[data-theme="light"] .wnx-index b{color:#8a6a0e}

.wnx-link{display:inline-block;margin-top:14px;color:var(--gold-light);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
[data-theme="light"] .wnx-link{color:#8a6a0e}
.wnx-link::after{content:" \2192"}
.wnx-link:hover{opacity:.85}

.wnx-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:clamp(32px,5vw,56px) 0 0}
.wnx-more a{display:block;border:1px solid var(--border);border-radius:12px;padding:16px;color:var(--text);text-decoration:none;font-weight:600;transition:border-color .2s}
.wnx-more a:hover{border-color:var(--gold)}
.wnx-more span{display:block;font-size:.8rem;font-weight:400;color:var(--muted);margin-bottom:4px}
.wnx-more a:focus-visible,.wnx-crumb a:focus-visible,.wnx-index a:focus-visible,.wnx-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media(prefers-reduced-motion:no-preference){
  @keyframes wnx-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .wnx-lead-shot{animation:wnx-rise .8s var(--wnx-ease) both}
}
.wnx-crumb{margin-top:24px}
.wnx-wide+.wnx-wide,.wnx-wide+.wnx-shot-label,.wnx-wide+.wnx-pair,.wnx-pair+.wnx-wide{margin-top:clamp(36px,5vw,64px)}