:root{
  --night:#1D2340; --dusk:#2F3C7A; --horizon:#5A6EB6; --sun:#F6C772;
  --mist:#F3F5F9; --ink:#1D2340; --muted:#4A5170; --rule:#D5DBE8; --link:#2A3F9E; --paper:#FFFFFF;
  --serif:"Young Serif", Georgia, "Times New Roman", serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mist);color:var(--ink);font-family:var(--sans);font-size:1.125rem;line-height:1.65}
img{max-width:100%;height:auto}
.wrap{width:min(100% - 2.5rem, 64rem);margin-inline:auto}
.wrap > *{max-width:42rem}
.wrap--wide{width:min(100% - 2.5rem, 64rem);margin-inline:auto}
a{color:var(--link);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{text-decoration-thickness:.16em}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:2px}
.sky :focus-visible{outline-color:#fff}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--ink);padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}

/* Sky header: the one memorable element */
.sky{position:relative;overflow:hidden;color:#F5F7FF;background:linear-gradient(180deg,var(--night) 0%,var(--dusk) 60%,var(--horizon) 100%)}
.sky a{color:inherit}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1.1rem;font-size:1rem;position:relative;z-index:2}
.topbar--home{justify-content:flex-end}
.brand{font-family:var(--serif);font-size:1.3rem;text-decoration:none}
.nav a{margin-left:1.4rem}
.hero{padding-block:2.5rem 10rem;position:relative;z-index:2}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.7rem,7.5vw,4.75rem);line-height:1.04;margin:0 0 1rem;letter-spacing:-.01em}
.hero p{max-width:28rem;font-size:1.2rem;color:#DCE2F7;margin:0}
.sun{position:absolute;right:max(1.5rem,8vw);bottom:0;width:clamp(130px,24vw,230px);aspect-ratio:1;border-radius:50%;background:var(--sun);box-shadow:0 0 90px 24px rgba(246,199,114,.35);transform:translateY(62%);animation:rise 2.4s cubic-bezier(.2,.7,.2,1) .2s forwards;z-index:1}
@keyframes rise{to{transform:translateY(34%)}}
.sky--slim{padding-bottom:1.5rem}
.sky--slim .sun{width:64px;right:max(1.25rem,6vw);animation:none;transform:translateY(55%);box-shadow:0 0 36px 8px rgba(246,199,114,.3)}
@media (prefers-reduced-motion:reduce){
  .sun{animation:none;transform:translateY(34%)}
  .sky--slim .sun{transform:translateY(55%)}
}

main{padding-block:3rem 4.5rem}
.lead{font-size:1.25rem;line-height:1.6;margin:0 0 .5rem}
h2{font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.2;margin:2.75rem 0 .75rem}
h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.25;margin:1.75rem 0 .4rem}
p{margin:0 0 1.1rem}

.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-top:1px solid var(--rule);padding-block:1.5rem}
.post-list li:last-child{border-bottom:1px solid var(--rule)}
.post-list .title{font-family:var(--serif);font-size:1.5rem;line-height:1.25;color:var(--ink);text-decoration:none}
.post-list .title:hover{text-decoration:underline}
.post-list p{margin:.4rem 0 .5rem;color:var(--muted)}
.meta{color:var(--muted);font-size:.95rem;margin:0}
.article .meta{margin-bottom:1.4rem}
.topics{margin:0}
.topics dt{font-family:var(--serif);font-size:1.2rem;margin-top:1.1rem}
.topics dd{margin:.15rem 0 0;color:var(--muted)}

.article h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5.2vw,2.95rem);line-height:1.12;margin:0 0 .6rem;letter-spacing:-.005em}
.article ul,.article ol{padding-left:1.3rem;margin:0 0 1.1rem}
.article li{margin:.45rem 0}
.note{border-left:4px solid var(--sun);background:var(--paper);padding:.9rem 1.1rem;font-size:1rem;color:var(--muted);margin:1.5rem 0}
.table-wrap{overflow-x:auto;margin:1.25rem 0 1.5rem}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:1rem}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-weight:700;border-bottom:2px solid var(--ink)}
tbody th{border-bottom:1px solid var(--rule)}
.pick{border:1px solid var(--rule);background:var(--paper);padding:1.25rem 1.4rem;margin:1.5rem 0;border-radius:6px}
.pick h3{margin:0 0 .6rem}
.pick p{margin:0 0 .5rem}
.buy{display:inline-block;margin-top:.4rem;font-weight:700}
.disclosure-line{font-size:1.3rem;font-family:var(--serif);margin:1.25rem 0}

footer{border-top:1px solid var(--rule);padding-block:2rem 3rem;font-size:.95rem;color:var(--muted)}
footer nav{margin-bottom:.8rem}
footer nav a{margin-right:1.25rem}
footer p{margin:0 0 .4rem}