:root{
  --ground:#FFF8EC; --card:#FFFFFF; --ink:#1A1033; --soft:#4A4060; --line:#1A1033;
  --lemon:#FFE14D; --tang:#FF7A3D; --pink:#FF5FA2; --blue:#3D5AFE; --mint:#3DDC97; --lilac:#C9B6FF;
  --steal:#E3FAEE; --skip:#FFE4F0;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  --hand:"Kalam","Segoe Print","Bradley Hand",cursive;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ground:#15102A; --card:#221A3D; --ink:#FFF4E0; --soft:#CFC6E6; --line:#FFF4E0; --steal:#1E3A30; --skip:#3D1E33; color-scheme:dark}}
:root[data-theme="dark"]{--ground:#15102A; --card:#221A3D; --ink:#FFF4E0; --soft:#CFC6E6; --line:#FFF4E0; --steal:#1E3A30; --skip:#3D1E33; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.6}
a{color:inherit; text-decoration-thickness:2px; text-underline-offset:3px}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--display); font-weight:800; letter-spacing:-.025em; line-height:1.05; margin:0; text-wrap:balance}
p{margin:0}
.wrap{max-width:72rem; margin:0 auto; padding-inline:max(16px, env(safe-area-inset-left, 0px))}
.narrow{max-width:47.5rem; margin:0 auto; padding-inline:16px}
.label{display:inline-block; align-self:flex-start; font-family:var(--mono); font-size:.75rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; background:var(--ink); color:var(--ground); padding:.25rem .75rem; border-radius:999px}
.pill{font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; border:2px solid #1A1033; color:#1A1033; padding:.15rem .6rem; border-radius:999px; background:var(--lemon)}

/* header */
header{position:sticky; top:0; z-index:50; background:var(--ground); border-bottom:3px solid var(--line)}
header .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; padding-block:.75rem}
.wordmark{font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--ink); text-decoration:none; letter-spacing:-.03em}
.wordmark span{position:relative; z-index:0; display:inline-block; color:#1A1033; padding:0 .14em}
.wordmark span::before{content:""; position:absolute; inset:.1em -.02em .02em; background:var(--pink); border-radius:.2em; transform:rotate(-2.5deg); z-index:-1}
nav{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.navlink{font-family:var(--display); font-weight:700; font-size:.92rem; text-decoration:none; padding:.4rem .75rem; border-radius:999px; border:2px solid transparent; white-space:nowrap}
.navlink:hover,.navlink.on{background:var(--lemon); color:#1A1033; border-color:var(--line)}
.navcta{font-family:var(--display); font-weight:800; font-size:.92rem; color:#1A1033; background:var(--pink); text-decoration:none; padding:.45rem 1rem; border-radius:999px; border:2px solid #1A1033; box-shadow:3px 3px 0 #1A1033; white-space:nowrap}

/* blog home */
.intro{padding-block:4rem 2.5rem; display:flex; flex-direction:column; gap:1.25rem}
.intro h1{font-size:clamp(2.6rem, 7vw, 5.2rem); max-width:56rem}
.hi{position:relative; z-index:0; display:inline-block; white-space:nowrap; color:#1A1033; padding:0 .12em}
.hi::before{content:""; position:absolute; inset:.1em -.06em .02em; background:var(--pink); border-radius:14px; transform:rotate(-2deg); z-index:-1}
.intro p{font-size:1.3rem; color:var(--soft); max-width:40rem}
.feature{display:flex; flex-wrap:wrap; text-decoration:none; color:#1A1033; background:#FFFFFF; border:3px solid #1A1033; border-radius:24px; box-shadow:8px 8px 0 #1A1033; overflow:hidden; margin-bottom:3.5rem; transition:transform .15s, box-shadow .15s}
.feature:hover{transform:translate(-3px,-3px); box-shadow:11px 11px 0 #1A1033}
.art{flex:1 1 26rem; min-height:22rem; background:var(--blue); position:relative; overflow:hidden; padding:4rem 1.75rem 2rem; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.1rem; align-content:center}
.art .big{position:absolute; right:-.9rem; bottom:-2.5rem; font-family:var(--display); font-weight:800; font-size:13.75rem; line-height:1; color:#5C76FF}
.art .dot{position:absolute; border-radius:50%; border:3px solid #1A1033}
.stack{position:relative; display:flex; flex-direction:column; gap:.6rem}
.stack.l{transform:rotate(-2deg)} .stack.r{transform:rotate(2deg); margin-top:1.75rem}
.sticker{align-self:flex-start; font-family:var(--hand); font-weight:700; font-size:1.7rem; line-height:1.2; border:3px solid #1A1033; border-radius:14px; padding:.3rem 1rem; box-shadow:4px 4px 0 #1A1033}
.chipline{background:#FFFFFF; border:2px solid #1A1033; border-radius:10px; padding:.45rem .75rem; font-size:.95rem; font-weight:700}
.feature .new{position:absolute; left:1.25rem; top:1.25rem}
.feature .txt{flex:1 1 26rem; padding:2.25rem; display:flex; flex-direction:column; gap:.9rem}
.feature .kicker{font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:#4A4060}
.feature h2{font-size:clamp(1.8rem, 3.2vw, 2.4rem)}
.feature p{font-size:1.1rem; color:#4A4060}
.meta{font-size:.95rem; color:#4A4060}
.btnlike{align-self:flex-start; font-family:var(--display); font-weight:800; font-size:1rem; background:var(--pink); border:2px solid #1A1033; border-radius:999px; padding:.6rem 1.25rem; box-shadow:3px 3px 0 #1A1033}
.upnext{display:flex; flex-direction:column; gap:1.25rem; padding-bottom:4rem}
.upnext h2{font-size:1.9rem}
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(18rem, 1fr)); gap:1.5rem}
.card{border:3px solid #1A1033; border-radius:22px; padding:1.75rem; display:flex; flex-direction:column; gap:.75rem; box-shadow:5px 5px 0 #1A1033; color:#1A1033}
.card h3{font-size:1.6rem; line-height:1.1}
.card .kicker{font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase}

/* post */
.posthead{background:var(--blue); color:#FFFFFF; border-bottom:3px solid #1A1033}
.posthead .narrow{padding-block:4rem 3.5rem; display:flex; flex-direction:column; gap:1.25rem}
.posthead h1{font-size:clamp(2.3rem, 6vw, 3.9rem); line-height:1.03}
.pills{display:flex; flex-wrap:wrap; gap:.6rem}
.pills .pill:last-child{background:#FFFFFF}
.byline{display:flex; align-items:center; gap:.75rem; font-size:1rem}
.face{flex:none; width:2.75rem; height:2.75rem; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.25rem; color:#1A1033; background:var(--pink); border:3px solid #1A1033}
article.narrow{padding-block:3.5rem; display:flex; flex-direction:column; gap:1.4rem; font-size:1.19rem; line-height:1.7}
.explain{background:var(--card); border:3px solid #1A1033; border-radius:20px; padding:1.5rem 1.75rem; box-shadow:5px 5px 0 #1A1033; display:flex; flex-direction:column; gap:.65rem; font-size:1.06rem; line-height:1.6}
.explain .tab{align-self:flex-start; font-family:var(--hand); font-weight:700; font-size:1.4rem; background:var(--lemon); color:#1A1033; padding:.1rem .75rem; border-radius:8px; transform:rotate(-1.5deg)}
.sec{margin-top:1.5rem; font-size:2.5rem; line-height:1}
.sec span{display:inline-block; border:3px solid #1A1033; border-radius:14px; padding:.25rem 1rem; box-shadow:4px 4px 0 #1A1033; color:#1A1033}
.sec.steal span{background:var(--mint); transform:rotate(-1.5deg)}
.sec.skip span{background:var(--pink); transform:rotate(1.5deg)}
.points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem}
.points li{border:3px solid #1A1033; border-radius:18px; padding:1.35rem 1.6rem; display:flex; flex-direction:column; gap:.5rem; font-size:1.1rem}
.points.steal li{background:var(--steal)} .points.skip li{background:var(--skip)}
.points strong{font-family:var(--display); font-size:1.45rem; line-height:1.2}
.pull{align-self:center; max-width:35rem; margin:1rem 0; font-family:var(--hand); font-weight:700; font-size:1.9rem; line-height:1.3; text-align:center}
.monday{background:var(--lemon); color:#1A1033; border:3px solid #1A1033; border-radius:22px; padding:1.75rem; box-shadow:6px 6px 0 #1A1033; display:flex; flex-direction:column; gap:.75rem; font-size:1.1rem}
.receipt{background:var(--card); border:3px dashed var(--line); border-radius:22px; padding:1.75rem; display:flex; flex-direction:column; gap:.75rem; font-size:1.1rem}
.monday h2,.receipt h2{font-size:1.9rem}
.next{font-style:italic; color:var(--soft)}

/* subscribe */
.sub{background:var(--lilac); color:#1A1033; border-block:3px solid #1A1033}
.sub .inner{padding-block:3.5rem; display:flex; flex-wrap:wrap; gap:1.5rem 2rem; align-items:center; justify-content:space-between}
.sub .copy{flex:1 1 24rem; display:flex; flex-direction:column; gap:.6rem}
.sub h2{font-size:clamp(1.8rem, 3.6vw, 2.5rem)}
.sub p{font-size:1.05rem; color:#2E2547}
.join{flex:1 1 22rem; display:flex; flex-wrap:wrap; gap:.75rem}
.join input[type=email]{flex:1 1 14rem; min-width:0; font:inherit; font-size:1rem; padding:.85rem 1.1rem; border:3px solid #1A1033; background:#FFFFFF; color:#1A1033; border-radius:999px}
.btn{font-family:var(--display); font-weight:800; font-size:1.05rem; padding:.85rem 1.4rem; border:3px solid #1A1033; border-radius:999px; background:var(--pink); color:#1A1033; cursor:pointer; box-shadow:4px 4px 0 #1A1033}
.btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 #1A1033}
.msg{flex-basis:100%; font-size:.95rem}
.msg.ok{font-weight:700}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.cta{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; padding-block:2.5rem}
.cta a{font-family:var(--display); font-weight:800; text-decoration:none; padding:.6rem 1.25rem; border-radius:999px; background:var(--mint); color:#1A1033; border:2px solid #1A1033; box-shadow:3px 3px 0 #1A1033}

footer .wrap{padding-block:2rem 3rem; font-size:.9rem; color:var(--soft); display:flex; flex-direction:column; gap:.4rem}

@media (max-width:600px){
  .intro{padding-block:2.5rem 2rem}
  .art{grid-template-columns:1fr; padding-top:3.75rem}
  .stack.r{margin-top:.5rem}
  .feature .txt{padding:1.5rem}
  .sec{font-size:2rem}
  .pull{font-size:1.55rem}
}
@media (prefers-reduced-motion: reduce){.feature{transition:none}}

/* phone: calmer */
@media (max-width:600px){
  .navlink, .navlink.on{border-color:transparent; padding:.35rem .5rem; font-size:.88rem}
  .navlink.on{background:var(--lemon)}
  .navcta{font-size:.82rem; padding:.35rem .8rem; box-shadow:2px 2px 0 #1A1033}
  nav{flex-wrap:nowrap; overflow-x:auto; width:100%; scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  .feature, .explain, .monday, .card{box-shadow:3px 3px 0 #1A1033}
  .stack.l, .stack.r, .sec.steal span, .sec.skip span, .explain .tab{transform:none}
  .art .big, .art .dot{display:none}
  .intro h1{font-size:2.4rem}
}

/* footer guide links */
.footguides{display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-bottom:.6rem}