/* Direction 01 — The DIY Edit. Article styles stay separate from the archive. */
.diy-article-page { background:#fbefe1; }
.diy-article-shell { max-width:1480px; margin:auto; padding:0 68px 72px; }
.article-breadcrumb { display:flex; flex-wrap:wrap; gap:8px; padding:24px 0; font-size:13px; line-height:1.5; }
.article-breadcrumb a:hover { text-decoration:underline; }
.article-breadcrumb [aria-current] { color:#655e56; }
.article-heading { padding:14px 0 24px; }
.article-kicker { display:flex; align-items:center; gap:26px; font-family:'Wicked Broom',serif; text-transform:uppercase; font-size:34px; line-height:1; margin:0 0 16px; }
.article-kicker img { width:36px; height:auto; transform:rotate(12deg); }
.article-heading h1 { max-width:23ch; font-size:clamp(38px,4.45vw,68px); font-weight:800; text-transform:uppercase; letter-spacing:-.04em; line-height:1.02; margin:0; text-wrap:balance; }
.article-deck { font-size:21px; line-height:1.5; margin:20px 0 24px; max-width:70ch; }
.article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:18px 26px; font-size:13px; font-weight:600; }
.article-category { background:#ffc629; padding:10px 15px; text-transform:uppercase; font-size:12px; }
.article-project { border-left:1px solid #2a252240; padding-left:24px; }
.article-project small { display:block; font-size:11px; font-weight:400; margin-top:4px; }
.article-share { display:flex; align-items:center; gap:8px; margin-left:auto; }
.article-share > span { text-transform:uppercase; font-size:11px; margin-right:6px; }
.article-share button { display:grid; place-items:center; width:44px; height:44px; border:1px solid transparent; border-radius:50%; }
.article-share svg { width:21px; height:21px; }
.article-share button:hover { background:#ffc629; }
.article-share-status { font-size:13px; margin-top:12px; }
.article-share-status:empty { display:none; }
.article-cover { margin:0; }
.article-cover img { width:100%; aspect-ratio:1200/628; object-fit:cover; }
.article-columns { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:52px; margin-top:20px; padding-top:36px; }
.article-prose { min-width:0; }
.article-step { margin:0 0 34px; }
.article-step h2 { display:flex; align-items:baseline; gap:15px; font-size:26px; font-weight:800; text-transform:uppercase; letter-spacing:-.025em; line-height:1.2; scroll-margin-top:28px; }
.article-step h2 > span { display:grid; place-items:center; align-self:center; flex-shrink:0; border-radius:50%; width:42px; height:42px; background:#ffc629; font-size:25px; }
.article-step p { font-size:19px; line-height:1.75; margin-top:13px; max-width:64ch; }
.article-step a, .article-deck a { font-weight:700; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.2em; transition:background-color .15s; }
.article-step a:hover, .article-deck a:hover { background:#ffc629; }
.article-step.numbered p { padding-left:57px; }
.article-sidebar { border-left:1px solid #2a252255; padding-left:32px; }
.article-sidebar h2 { font-size:22px; font-weight:800; line-height:1.2; letter-spacing:-.025em; text-transform:uppercase; margin-bottom:20px; }
.article-sidebar nav ol { list-style:decimal; padding-left:20px; font-size:16px; line-height:1.5; }
.article-sidebar nav li { padding:0 0 12px 3px; }
.article-sidebar nav a:hover { text-decoration:underline; text-underline-offset:4px; }
.article-sidebar section { border-top:1px solid #2a252255; margin-top:26px; padding-top:26px; }
.article-supplies ul { list-style:none; padding:0; }
.article-supplies li { margin:0 0 13px; }
.article-supplies label { display:flex; align-items:flex-start; gap:12px; font-size:16px; line-height:1.55; cursor:pointer; }
.article-supplies input { appearance:auto; width:18px; height:18px; margin-top:4px; flex-shrink:0; accent-color:#2a2522; }
.article-supplies input:checked + span { text-decoration:line-through; color:#6b6258; }
.article-store > img { width:90px; height:auto; opacity:.12; margin:0 0 28px; }
.article-store p { font-size:16px; line-height:1.6; }
.article-store a { display:flex; justify-content:space-between; align-items:center; gap:12px; background:#2a2522; color:white; text-transform:uppercase; font-weight:700; font-size:13px; padding:18px; margin:20px 0 10px; }
.article-store a:hover { background:#ffc629; color:#2a2522; }
.article-store small { font-size:12px; }
.article-tip { display:flex; gap:18px; background:#ffdf7a; padding:24px; margin:30px 0; }
.article-tip > span { font-size:32px; line-height:1; }
.article-tip h2 { font-size:19px; font-weight:800; text-transform:uppercase; }
.article-tip p { font-size:17px; line-height:1.6; margin-top:8px; }
.article-end { border-top:1px solid #2a252255; padding-top:24px; font-size:17px; line-height:1.6; }
.article-end a { display:inline-block; margin-top:20px; font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.article-related { border-top:1px solid #2a252280; margin-top:52px; padding-top:28px; }
.article-related > div { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.article-related h2 { font-size:27px; font-weight:800; text-transform:uppercase; letter-spacing:-.03em; }
.article-related > div a { font-size:14px; }
.article-related ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; list-style:none; padding:0; }
.article-related img { width:100%; aspect-ratio:2; object-fit:cover; }
.article-related h3 { font-size:20px; font-weight:700; line-height:1.3; margin-top:16px; }
.article-related p { font-size:15px; line-height:1.65; margin-top:8px; }
.article-related a:hover h3,.article-related > div a:hover { text-decoration:underline; text-underline-offset:4px; }
.diy-article-shell :is(a,button,input):focus-visible { outline:2px solid #2a2522; outline-offset:4px; }
@media(max-width:1100px) {
 .diy-article-shell { padding:0 32px 56px; }
 .article-columns { grid-template-columns:minmax(0,1fr) 260px; gap:28px; }
 .article-sidebar { padding-left:24px; }
 .article-share { margin-left:0; }
 .article-step p { font-size:18px; }
}
@media(max-width:760px) {
 .diy-article-shell { padding:0 22px 44px; }
 .article-breadcrumb { font-size:12px; padding:20px 0; }
 .article-heading { padding-top:10px; }
 .article-kicker { font-size:29px; }
 .article-heading h1 { font-size:clamp(32px,7.8vw,50px); text-wrap:wrap; }
 .article-deck { font-size:18px; margin:16px 0 20px; }
 .article-meta { gap:12px 18px; font-size:12px; }
 .article-project { border:0; padding:0; }
 .article-share { width:100%; }
 .article-columns { display:flex; flex-direction:column; gap:30px; padding-top:28px; }
 .article-sidebar { border-left:0; border-top:1px solid #2a252255; padding:28px 0 0; }
 .article-step h2 { font-size:23px; }
 .article-step h2 > span { width:36px; height:36px; font-size:21px; }
 .article-step.numbered p { padding-left:0; }
 .article-tip { padding:20px; }
 .article-related > div { align-items:flex-start; flex-direction:column; }
 .article-related ul { grid-template-columns:1fr; gap:30px; }
 .article-related img { aspect-ratio:2; }
}