.wrap{max-width:900px; margin:0 auto; padding:0 28px;}

/* ON-THIS-PAGE SIDE RAIL (light) */
.toc_rail{position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:15; display:flex; flex-direction:column; align-items:flex-end; gap:13px; opacity:0; pointer-events:none; transition:opacity .3s ease;}
.toc_rail.visible{opacity:1; pointer-events:auto;}
@media (max-width:1150px){ .toc_rail{display:none;} }
.toc_dot_link{position:relative; display:block; padding:6px; margin:-6px; line-height:0;}
.toc_dot{display:block; width:8px; height:8px; border-radius:50%; background:var(--line); border:1px solid var(--line);}
.toc_dot_link:hover .toc_dot, .toc_dot_link:focus .toc_dot{background:var(--accent-dim); border-color:var(--accent-dim); transform:scale(1.3);}
.toc_dot_link.active .toc_dot{background:var(--accent); border-color:var(--accent); transform:scale(1.3);}
.toc_label{position:absolute; right:20px; top:50%; transform:translateY(-50%); white-space:nowrap; background:var(--ink); color:#fff; font-size:.7rem; font-weight:600; letter-spacing:.02em; padding:5px 10px; border-radius:4px; opacity:0; pointer-events:none; transition:opacity .15s;}
.toc_dot_link:hover .toc_label, .toc_dot_link:focus .toc_label{opacity:1;}
.toc_dot_link.active .toc_label{background:var(--accent);}

.back{padding:22px 0 0; font-size:.86rem;}
.back a{color:var(--ink-faint); text-decoration:none; font-weight:500;}
.back a:hover{color:var(--ink-boost);}

.top{padding:26px 0 10px;}
.eyebrow{font-size:.82rem; color:var(--ink-boost); letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px; font-weight:600;}
.context{font-size:.9rem; color:var(--ink-faint); margin-bottom:26px;}

.summary{font-size:1.12rem; color:var(--ink); max-width:62ch; margin:0 0 34px; line-height:1.6;}
.summary b{color:var(--ink); font-weight:600;}

.top-img{border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:36px; box-shadow:0 4px 18px rgba(30,25,15,.06);}
.top-img img{width:100%; display:block;}

.highlights{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:30px 0; margin-bottom:36px;}
.highlights h2{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin:0 0 16px;}
.highlights ul{margin:0; padding-left:1.15em;}
.highlights li{margin-bottom:12px; font-size:.98rem; color:var(--ink); line-height:1.55;}
.highlights li::marker{color:var(--ink-boost);}
.highlights li:last-child{margin-bottom:0;}

.links{display:flex; gap:22px; flex-wrap:wrap; margin-bottom:44px; font-size:.88rem;}
.links a{color:var(--ink-boost); text-decoration:none; font-weight:600;}
.links a:hover{text-decoration:underline;}

/* GALLERY ROW */
.gallery{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:56px;}
.gallery figure{margin:0;}
.thumb{display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:var(--bg-raise); cursor:pointer; box-shadow:0 2px 8px rgba(30,25,15,.05); transition:transform .12s, box-shadow .12s;}
.thumb:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(30,25,15,.1);}
.thumb img{width:100%; height:116px; object-fit:cover; object-position:top; display:block;}
.gallery figcaption{font-size:.72rem; color:var(--ink-faint); margin-top:7px; line-height:1.35;}
@media(max-width:760px){ .gallery{grid-template-columns:repeat(2, 1fr);} }

/* EXPANDABLE SECTIONS */
.sections{margin-bottom:20px;}
details.section{border-top:1px solid var(--line);}
details.section:last-of-type{border-bottom:1px solid var(--line);}
details.section summary{list-style:none; cursor:pointer; padding:26px 0; display:block;}
details.section summary::-webkit-details-marker{display:none;}
.sec-head{display:flex; align-items:baseline; gap:16px;}
.sec-num{font-size:1.15rem; font-weight:600; color:var(--ink-faint); flex-shrink:0; width:28px;}
.sec-title{font-size:1.15rem; font-weight:600; margin:0; flex:1; letter-spacing:-.005em;}
.sec-summary{color:var(--ink); font-size:.96rem; margin:12px 0 0 44px; max-width:60ch; line-height:1.6;}
.sec-summary p{margin:0 0 10px;}
.sec-summary p:last-child{margin-bottom:0;}

/* Fixed-position "Read more / Read less" affordance — lives inside
   <summary>, so it never moves when the section expands below it. */
.view-toggle{display:flex; align-items:center; gap:9px; margin:16px 0 0 44px; font-size:.92rem; font-weight:700; color:var(--ink-boost);}
.vt-label::before{content:"Read more";}
details.section[open] .vt-label::before{content:"Read less";}
/* CSS-drawn triangle instead of a text glyph — renders crisp and
   consistent at any size, unlike a small Unicode arrow character. */
.vt-chevron{
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid var(--ink-boost);
  transition:transform .2s;
}
details.section[open] .vt-chevron{transform:rotate(180deg);}

.sec-full{margin:0 0 34px 76px; max-width:64ch;}
.sec-full h3{font-size:1rem; font-weight:600; margin:24px 0 10px;}
.sec-full h3:first-child{margin-top:4px;}
.sec-full p{font-size:.96rem; color:var(--ink); margin:0 0 14px; line-height:1.65;}
.sec-full p b{color:var(--ink); font-weight:600;}
.sec-full ul{margin:0 0 16px; padding-left:1.2em;}
.sec-full li{color:var(--ink); font-size:.95rem; margin-bottom:8px; line-height:1.55;}
.sec-full li b{color:var(--ink); font-weight:600;}

.sec-images{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px;}
.sec-images figure{margin:0;}
.sec-images .thumb{width:100%;}
.sec-images .thumb img{width:100%; height:228px; object-fit:cover; object-position:top;}
@media(max-width:560px){ .sec-images{grid-template-columns:1fr;} }
.sec-images figcaption{font-size:.78rem; color:var(--ink-faint); margin-top:8px; line-height:1.4;}

/* WHAT THIS DEMONSTRATES — fixed white card, not collapsible */
.outcome{background:var(--bg-raise); border:1px solid var(--line); border-radius:10px; padding:34px 36px; margin:44px 0 30px;}
.outcome h2{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin:0 0 14px;}
.outcome p{font-size:1rem; color:var(--ink); margin:0 0 14px; max-width:62ch; line-height:1.65;}
.outcome p:last-child{margin-bottom:0;}
.outcome p b{color:var(--ink); font-weight:600;}

.end-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; padding:10px 0 60px;}
.end-actions a{display:inline-block; font-size:.88rem; font-weight:600; padding:12px 22px; border-radius:6px; text-decoration:none;}
.end-actions a.primary{background:var(--accent); color:#fff;}
.end-actions a.secondary{background:var(--bg-raise); color:var(--ink); border:1px solid var(--line);}
.end-actions a.secondary:hover{border-color:var(--accent-dim);}