/* ---- Article ---- */
.post-head{ padding-top:clamp(20px,3vw,36px); }
.post-title{ font-size:clamp(2.1rem,1.3rem+3.4vw,4rem); font-weight:540; line-height:1.04; margin:18px 0 22px; }
.post-standfirst{ max-width:60ch; }
.byline{ display:flex; align-items:center; gap:14px; margin-top:clamp(24px,3vw,34px); }
.byline-avatar,.author-avatar{ width:46px; height:46px; border-radius:50%; background:var(--saddle); color:var(--paper); display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:.95rem; flex-shrink:0; }
.byline-name{ display:block; font-weight:700; font-size:.92rem; }
.byline-meta{ display:block; font-size:.82rem; color:var(--muted); margin-top:2px; }

.post-hero{ margin:clamp(20px,3vw,34px) 0 clamp(30px,4vw,52px); }
.post-hero figcaption{ font-family:var(--serif); font-style:italic; color:var(--muted); font-size:.95rem; margin-top:12px; max-width:70ch; }

.post-body{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; padding-bottom:clamp(40px,6vw,80px); }

/* TOC */
.toc{ position:sticky; top:92px; }
.toc-label{ font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:14px; }
.toc nav{ display:flex; flex-direction:column; border-left:1px solid var(--rule); }
.toc a{ font-size:.86rem; color:var(--muted); padding:7px 0 7px 16px; margin-left:-1px; border-left:2px solid transparent; transition:color .2s, border-color .2s; line-height:1.3; }
.toc a:hover{ color:var(--ink); }
.toc a[aria-current="true"]{ color:var(--saddle); border-left-color:var(--saddle); font-weight:600; }
@media (max-width:920px){ .post-body{ grid-template-columns:1fr; } .toc{ position:static; padding:18px 20px; background:var(--card); border:1px solid var(--rule); border-radius:8px; } .toc nav{ border-left:none; flex-flow:row wrap; gap:4px 18px; } .toc a{ border-left:none; padding-left:0; } .toc a[aria-current="true"]{ border-left:none; } }

/* Prose */
.prose{ font-size:1.075rem; line-height:1.72; color:var(--ink-2); max-width:72ch; }
.prose > p{ margin-bottom:1.25em; }
.prose h2{ font-family:var(--serif); font-weight:540; font-size:clamp(1.6rem,1.2rem+1.4vw,2.3rem); line-height:1.12; letter-spacing:-.01em; color:var(--ink); margin:1.8em 0 .6em; scroll-margin-top:92px; }
.prose h3{ font-family:var(--serif); font-weight:560; font-size:1.3rem; color:var(--ink); margin-bottom:.4em; }
.prose em{ font-style:italic; }
.prose strong{ font-weight:700; color:var(--ink); }
.prose a{ color:var(--saddle); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* takeaways */
.takeaways{ background:var(--card); border:1px solid var(--rule); border-left:4px solid var(--saddle); border-radius:8px; padding:clamp(22px,3vw,32px); margin-bottom:clamp(28px,4vw,40px); }
.takeaways-title{ font-family:var(--serif) !important; font-size:1.15rem !important; margin:0 0 14px !important; color:var(--ink) !important; letter-spacing:.01em; }
.takeaways ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.takeaways li{ position:relative; padding-left:28px; font-size:.98rem; line-height:1.5; }
.takeaways li::before{ content:""; position:absolute; left:0; top:7px; width:12px; height:12px; border-radius:50%; border:3px solid var(--ochre); }

/* idea blocks */
.idea{ display:grid; grid-template-columns:200px 1fr; gap:clamp(20px,3vw,32px); align-items:start; margin:clamp(26px,3vw,38px) 0; padding-bottom:clamp(26px,3vw,38px); border-bottom:1px solid var(--rule-soft); }
.idea-media{ position:sticky; top:92px; }
.idea-num{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre-deep); display:block; margin-bottom:6px; }
.idea-copy h3{ margin-top:0; }
.idea-copy p{ margin-bottom:.7em; }
.idea-note{ font-size:.92rem; color:var(--muted); background:var(--paper-2); border-radius:6px; padding:10px 14px; }
.idea-note strong{ color:var(--saddle); }
@media (max-width:560px){ .idea{ grid-template-columns:1fr; } .idea-media{ position:static; max-width:240px; } }

/* callout */
.callout{ background:var(--paper-2); border:1px solid var(--rule); border-radius:8px; padding:clamp(18px,2.5vw,26px); margin:1.6em 0; }
.callout-tip{ background:#F2EAD9; }
.callout-tag{ display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--sage); padding:.35em .8em; border-radius:100px; margin-bottom:12px; }
.callout-tip .callout-tag{ background:var(--ochre-deep); }
.callout p{ margin:0; font-size:.98rem; }

/* pullquote */
.pullquote{ margin:1.8em 0; padding:0 0 0 clamp(20px,3vw,32px); border-left:3px solid var(--saddle); }
.pullquote p{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,1rem+1.2vw,1.9rem); line-height:1.32; color:var(--ink); margin:0; }

/* tick list */
.tick-list{ list-style:none; padding:0; margin:1em 0 1.4em; display:flex; flex-direction:column; gap:10px; }
.tick-list li{ position:relative; padding-left:30px; }
.tick-list li::before{ content:""; position:absolute; left:0; top:.55em; width:14px; height:8px; border-left:2px solid var(--saddle); border-bottom:2px solid var(--saddle); transform:rotate(-45deg); }

/* mini grid (outfits) */
.mini-grid{ margin:1.2em 0 1.6em; gap:24px; }
.mini p{ font-size:.92rem; color:var(--muted); margin-top:12px; line-height:1.5; }
.mini strong{ color:var(--ink); }

/* spec table */
.table-wrap{ overflow-x:auto; margin:1.2em 0 1.6em; border:1px solid var(--rule); border-radius:8px; }
.spec{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:520px; }
.spec th{ text-align:left; background:var(--paper-2); font-weight:700; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); padding:14px 16px; }
.spec td{ padding:14px 16px; border-top:1px solid var(--rule-soft); color:var(--ink-2); }
.spec tbody tr:nth-child(even){ background:rgba(30,26,22,.025); }
.spec td:first-child{ font-weight:600; color:var(--ink); }

/* faq */
.faq{ margin:1em 0 1.6em; border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{ list-style:none; cursor:pointer; padding:18px 36px 18px 0; position:relative; font-family:var(--serif); font-size:1.15rem; font-weight:540; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:1.5rem; color:var(--saddle); font-family:var(--sans); line-height:1; transition:transform .2s; }
.faq details[open] summary::after{ content:"–"; }
.faq details[open] summary{ color:var(--saddle); }
.faq p{ margin:0 0 20px; font-size:.98rem; color:var(--ink-2); max-width:66ch; }

/* author bio */
.author-bio{ display:flex; gap:18px; align-items:flex-start; margin-top:clamp(36px,4vw,52px); padding-top:clamp(28px,3vw,36px); border-top:1px solid var(--rule); }
.author-bio .author-avatar{ width:60px; height:60px; font-size:1.15rem; }
.author-name{ font-family:var(--serif) !important; font-size:1.4rem !important; margin:6px 0 8px !important; }
.author-bio p{ color:var(--muted); font-size:.96rem; line-height:1.6; margin:0; max-width:60ch; }

/* shared cta + sr-only (article scope) */
.cta-band{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:clamp(28px,4vw,56px); }
.cta-band-title{ font-size:clamp(1.6rem,1.1rem+2vw,2.7rem); font-weight:540; margin:12px 0 14px; line-height:1.06; }
.cta-band-copy p{ color:var(--muted); max-width:46ch; }
.cta-form{ display:flex; gap:10px; flex-wrap:wrap; }
.cta-form input{ flex:1; min-width:200px; padding:.9em 1.1em; border-radius:100px; border:1px solid var(--rule); background:var(--paper); font-family:inherit; font-size:.95rem; color:var(--ink); }
.cta-form input:focus{ outline:2px solid var(--saddle); outline-offset:1px; }
@media (max-width:760px){ .cta-band{ grid-template-columns:1fr; } }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }