/* Shared editorial rhythm, using the portfolio's existing color and type system. */
.story-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(24px,5vw,72px);border-top:1px solid var(--line);padding:32px 0;margin:24px 0}
.story-intro p,.story-execution p,.story-after-work p,.story-credits p,.story-note p{max-width:68ch;font-size:clamp(18px,1.5vw,20px);line-height:1.65}
.story-direction h3,.story-after-work h3{font-size:clamp(24px,3vw,42px);line-height:1.1;letter-spacing:-.035em;margin:12px 0 20px}
.story-intro .eyebrow{margin-top:0}
.story-anchor{display:block;scroll-margin-top:12px}
.story-intro>.story-anchor{position:absolute}
#brief,#decision,.story-execution,.story-after-work,.story-credits,.story-note{scroll-margin-top:12px}
.story-credits,.story-note{border-top:1px solid var(--line);padding-top:24px}
.story-note .log-list{max-width:75ch}
@media(max-width:720px){.story-intro{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px 0}.story-direction{border-top:1px solid var(--line);padding-top:24px}}

/* Label + reading-column contract for every public case-study brief.
   Place content explicitly: a third child or a legacy anchor must never
   send prose back into the metadata column. Preserve DOM/reading order. */
html .editorial-design[data-story-refinement] .brief {
 position:relative;
 display:grid;
 grid-template-columns:minmax(0,16rem) minmax(0,1fr);
 column-gap:clamp(24px,3vw,48px);
 row-gap:16px;
 align-items:start;
}
html .editorial-design[data-story-refinement] .brief > .eyebrow {
 grid-column:1;
 grid-row:1;
 min-width:0;
 max-width:100%;
}
html .editorial-design[data-story-refinement] .brief > :not(.eyebrow):not(.story-anchor) {
 grid-column:2;
 min-width:0;
}
html .editorial-design[data-story-refinement] .brief > .story-anchor {
 position:absolute;
 inset-block-start:0;
 inset-inline-start:0;
 width:0;
 height:0;
}
html .editorial-design[data-story-refinement] .brief > :is(h3,p,ul,ol) {
 margin-block:0;
}
html .editorial-design[data-story-refinement] .brief > :is(p,ul,ol) {
 max-width:68ch;
}
@media(max-width:900px) {
 html .editorial-design[data-story-refinement] .brief {
  grid-template-columns:minmax(0,1fr);
 }
 html .editorial-design[data-story-refinement] .brief > .eyebrow,
 html .editorial-design[data-story-refinement] .brief > :not(.eyebrow):not(.story-anchor) {
  grid-column:1;
 }
}