.article-page{background:var(--paper)}.article-hero{padding:clamp(90px,10vw,150px) var(--pad) clamp(55px,7vw,95px)}.article-hero-inner{width:min(100%,var(--max));margin:auto}.article-kicker{margin-bottom:26px;color:var(--violet);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.article-hero h1{max-width:1180px;margin-bottom:34px;font-size:clamp(50px,7.5vw,118px)}.article-deck{max-width:850px;margin:0;font-size:clamp(18px,2vw,26px);line-height:1.45}.article-meta{display:flex;flex-wrap:wrap;gap:20px;margin-top:36px;padding-top:19px;border-top:1px solid var(--line);color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.article-cover{width:min(calc(100% - 2*var(--pad)),var(--max));margin:0 auto clamp(65px,8vw,115px);border:2px solid var(--ink);border-radius:34px;box-shadow:10px 10px 0 var(--violet);overflow:hidden}.article-cover img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}.article-layout{width:min(calc(100% - 2*var(--pad)),1200px);display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(45px,8vw,120px);margin:0 auto clamp(80px,9vw,140px)}.article-aside{position:sticky;top:105px;align-self:start;padding:22px;border:2px solid var(--ink);border-radius:20px;background:var(--lime);box-shadow:5px 5px 0 var(--ink)}.article-aside strong{display:block;margin-bottom:16px;font-size:10px;text-transform:uppercase}.article-aside ol{display:grid;gap:12px;margin:0;padding:0;list-style:none}.article-aside a{font-size:11px;line-height:1.35}.article-aside a:hover{text-decoration:underline}.article-body{max-width:800px}.article-body h2{margin:78px 0 24px;font-size:clamp(34px,4.3vw,62px)}.article-body h2:first-child{margin-top:0}.article-body h3{margin:42px 0 15px;font-size:26px}.article-body p,.article-body li{font-size:16px;line-height:1.75}.article-body ul,.article-body ol{display:grid;gap:10px;padding-left:24px}.article-note{margin:40px 0;padding:28px;border:2px solid var(--ink);border-radius:20px;background:var(--yellow);box-shadow:5px 5px 0 var(--ink)}.article-note strong{display:block;margin-bottom:8px}.article-note p{margin:0}.article-figure{margin:55px 0}.article-figure img{width:100%;height:auto;display:block;border:2px solid var(--ink);border-radius:24px}.article-figure figcaption{margin-top:12px;color:var(--muted);font-size:11px;line-height:1.5}.rule-card{display:grid;grid-template-columns:60% 30% 10%;min-height:110px;margin:35px 0;border:2px solid var(--ink);border-radius:20px;overflow:hidden}.rule-card span{display:grid;place-items:center;border-right:2px solid var(--ink);font-weight:800}.rule-card span:last-child{border-right:0}.rule-card span:nth-child(1){background:#f0ebe1}.rule-card span:nth-child(2){background:#839a7a}.rule-card span:nth-child(3){background:#ef704f}.palette-recipes{display:grid;gap:14px;margin:36px 0}.palette-recipe{display:grid;grid-template-columns:repeat(5,1fr) minmax(170px,1.2fr);align-items:center;min-height:74px;border:2px solid var(--ink);border-radius:16px;overflow:hidden}.palette-recipe i{height:100%;min-height:74px;background:var(--tone)}.palette-recipe strong{padding:14px;font-size:11px}.article-checklist{margin:30px 0;padding:0!important;border-top:1px solid var(--ink);list-style:none}.article-checklist li{position:relative;padding:16px 8px 16px 30px;border-bottom:1px solid var(--line)}.article-checklist li:before{content:"✓";position:absolute;left:3px;color:var(--violet);font-weight:900}.article-cta{width:min(calc(100% - 2*var(--pad)),var(--max));display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;margin:0 auto clamp(70px,8vw,120px);padding:clamp(30px,5vw,60px);border:2px solid var(--ink);border-radius:30px;background:var(--lavender);box-shadow:8px 8px 0 var(--ink)}.article-cta h2{margin:0;font-size:clamp(34px,4vw,58px)}.article-cta p{margin:12px 0 0}.article-cta .button{background:var(--ink);color:#fff}
@media(max-width:900px){.article-layout{grid-template-columns:1fr}.article-aside{position:static}.article-cta{grid-template-columns:1fr}.palette-recipe{grid-template-columns:repeat(5,1fr)}.palette-recipe strong{grid-column:1/-1}.article-cover{border-radius:24px}}
@media(max-width:720px){.article-hero h1{font-size:clamp(45px,13vw,66px)}.article-body p,.article-body li{font-size:15px}.article-note{padding:22px}.rule-card{grid-template-columns:6fr 3fr 1fr}.palette-recipe i{min-height:55px}.article-cta{border-radius:22px;box-shadow:5px 5px 0 var(--ink)}}