:root{
  --accent:#F65A2A; --accent2:#E84917; --yellow:#FFD42F; --link:#C0390F;
  --ink:#3B1A17; --ink2:#6F5A53; --ink3:#8A746C;
  --paper:#FDFBF9; --fill:#FBF1EA; --white:#FFFFFF; --border:#EFE5DE;
  --sans:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --sx: clamp(1.25rem, 5vw, 4rem);
  --grad:radial-gradient(135% 120% at 72% -10%, #FFC24D 0%, #F8842F 34%, #F2541B 64%, #E5431A 100%);
}
*{box-sizing:border-box}
.grain{display:none}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:1.05rem; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
::selection{background:var(--yellow); color:var(--ink)}
a{color:var(--link)}
img{max-width:100%; display:block}
h1,h2{letter-spacing:-.02em; line-height:1.08}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 10px 0; font-weight:600}
.skip:focus{left:0}

.nav{position:sticky; top:0; z-index:50; background:rgba(253,251,249,.86); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--border)}
.nav__in{display:flex; align-items:center; gap:1rem; min-height:64px; max-width:760px; margin-inline:auto; padding-inline:var(--sx)}
.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; font-weight:800; font-size:1.2rem; letter-spacing:-.02em; color:var(--ink)}
.brand__tile{width:30px; height:30px; border-radius:9px; background:var(--accent); display:grid; place-items:center}
.brand__tile img{width:20px; height:20px; filter:brightness(0) invert(1)}
.nav__back{margin-left:auto; font-weight:600; font-size:.9rem; color:var(--ink2); text-decoration:none}
.nav__back:hover{color:var(--link)}

.article{max-width:760px; margin-inline:auto; padding:clamp(2.5rem,6vw,4.5rem) var(--sx) clamp(3rem,7vw,5rem)}
.article__eyebrow{font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--link); margin:0 0 1rem}
.article h1{font-weight:800; font-size:clamp(2.4rem,1.8rem+3vw,3.8rem); margin:0}
.article__updated{font-size:.85rem; color:var(--ink3); margin:.9rem 0 0; font-weight:500}
.article__lede{font-size:1.2rem; color:var(--ink2); margin:1.8rem 0 0; max-width:54ch}
.article section{margin-top:2.4rem}
.article h2{font-weight:700; font-size:1.4rem; margin:0 0 .5rem}
.article p{color:var(--ink2); margin:0 0 1rem}
.article ul{color:var(--ink2); margin:0 0 1rem; padding-left:1.2rem}
.article li{margin:.3rem 0}
.article__rule{border:0; border-top:1px solid var(--border); margin:2.6rem 0 0}
.article__colophon{font-size:.85rem; color:var(--ink3); margin-top:1.6rem; text-align:center}

.footer{background:var(--ink); color:rgba(255,255,255,.72)}
.footer__in{max-width:760px; margin-inline:auto; padding-inline:var(--sx); padding-block:2.6rem; display:grid; gap:1.1rem}
.footer__brand{display:flex; align-items:center; gap:.55rem; font-weight:800; font-size:1.2rem; color:#fff}
.footer__brand .brand__tile{background:#fff} .footer__brand .brand__tile img{filter:none; width:20px; height:20px}
.footer__meta{display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; font-size:.82rem; color:rgba(255,255,255,.6); align-items:center}
.footer__meta a{color:var(--yellow); text-decoration:none}
.footer__meta a:hover{text-decoration:underline}
.footer__meta .sep{opacity:.3}

:focus-visible{outline:2px solid var(--link); outline-offset:3px; border-radius:6px}