/* Keep the thinking discoverable; long stories open on demand. */
.portfolio-work{--project-title-size:clamp(52px,6vw,88px)}
.portfolio-work .project-story{min-width:0;max-width:none;position:static;margin:28px 0 0;padding:24px 0 0;border-top:1px solid #8fa58e38}
.portfolio-work .project-story .story-heading{font:400 clamp(19px,1.65vw,23px)/1.65 var(--sans);letter-spacing:-.025em;color:#d4e2c8;margin:0 0 20px;max-width:28em;overflow-wrap:anywhere}
.portfolio-work .project-story p{font:400 15px/1.95 var(--sans);color:#b8c4b4;margin:0 0 19px;max-width:35em;overflow-wrap:break-word}
.portfolio-work .project-story p:last-child{margin-bottom:0}
.portfolio-work .project-story .case-credit,.portfolio-work .project-story .wide-trip-status,.portfolio-work .project-story .qa-notes-evidence{font-size:12px;line-height:1.9;color:#8fa28d}
.portfolio-work .project-story .case-credit{margin-top:24px}
.portfolio-work .project-story .wide-trip-status{margin-top:24px}

/* QA: summary and real recording first, then two equally visible ideas. */
.portfolio-work .qa-case-recording{row-gap:30px;padding-bottom:72px}
.portfolio-work .qa-case-evidence{padding-right:5%;max-width:480px}
.portfolio-work .qa-case-notes{grid-column:1/-1;grid-row:3;margin-top:4px;padding-top:26px}
.portfolio-work .qa-notes-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 7%;padding:0}
.portfolio-work .qa-notes-grid h5{font:400 18px/1.65 var(--sans);letter-spacing:-.02em;color:#ceddc4;margin:0 0 11px}
.portfolio-work .qa-notes-grid p{max-width:35em}
.portfolio-work .qa-notes-grid .qa-notes-evidence{grid-column:1/-1;max-width:80em;margin:0;padding-top:3px}

/* Each narrative gets a readable measure and a nearby, honest product window. */
.portfolio-work .case-chorus{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:7%;align-items:start;padding:70px 0 88px}
.portfolio-work .case-chorus .case-copy{display:block;min-width:0;padding:0}
.portfolio-work .case-chorus .case-copy h3{font-size:var(--project-title-size);margin-bottom:25px}
.portfolio-work .case-chorus .case-purpose{font-size:17px;line-height:1.85;max-width:31em;margin:0}
.portfolio-work .case-chorus .case-insight{font-size:clamp(23px,2.1vw,31px);margin:26px 0;color:#e2e7dc}
.portfolio-work .case-chorus .chorus-evidence{width:100%;max-width:600px;min-width:0;margin:0;justify-self:end}
.portfolio-work .case-chorus .chorus-image-open{height:clamp(300px,31vw,410px);padding:20px 18px 36px}
.portfolio-work .case-chorus .chorus-scenes{gap:15px}
.portfolio-work .case-chorus .chorus-scenes button{font-size:13px;gap:8px;line-height:1.65;min-height:52px}
.portfolio-work .case-chorus .chorus-evidence-note{display:block;margin-top:13px}
.portfolio-work .case-chorus .chorus-evidence-note p{font-size:13px;line-height:1.85}
.portfolio-work .case-chorus .chorus-evidence-note>span{display:block;margin-top:6px}
.portfolio-work .case-film .case-copy h3{font-size:var(--project-title-size)}
.portfolio-work .case-film .project-story{margin-top:4px;padding-top:24px}
.portfolio-work .case-film .project-story .story-heading{color:#d4e2c8}
.portfolio-work .case-film .project-story p{color:#b8c4b4}
.portfolio-work .case-film .project-story .case-credit{color:#8fa28d}
.portfolio-work .case-film .film-evidence{max-width:600px}
.portfolio-work .case-reel .project-story{margin-top:30px;padding-top:24px}
.portfolio-work .case-reel .project-story p{max-width:34em}
.portfolio-work .case-along{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.portfolio-work .case-along .case-copy{position:static;top:auto}
.portfolio-work .case-along .case-copy h3{font-size:var(--project-title-size)}
.portfolio-work .case-along .case-purpose{font-size:17px;line-height:1.85}
.portfolio-work .case-along .project-story{margin-top:30px}
.portfolio-work .along-evidence{position:static;min-width:0}

@media(min-width:1000px) and (min-height:760px){
 .portfolio-work .case-chorus .chorus-evidence,.portfolio-work .case-film .film-evidence{position:sticky;top:36px}
}
@media(min-width:1000px) and (min-height:900px){
 .portfolio-work .case-reel .reel-window{position:sticky;top:36px}
}
@media(max-width:1000px){
 .portfolio-work{--project-title-size:clamp(48px,6.5vw,70px)}
 .portfolio-work .case-chorus{gap:5%}
 .portfolio-work .case-chorus .chorus-scenes button{display:block;font-size:12px}
 .portfolio-work .case-chorus .chorus-scenes button>span{display:block;margin-bottom:3px}
}
@media(max-width:900px){
 .portfolio-work .case-chorus,.portfolio-work .case-film,.portfolio-work .case-reel,.portfolio-work .case-along{display:flex;flex-direction:column;gap:0;padding-block:52px 64px}
 .portfolio-work .case-chorus .case-copy,.portfolio-work .case-film .case-copy,.portfolio-work .case-along .case-copy,.portfolio-work .case-reel .reel-copy{display:contents}
 .portfolio-work :is(.case-chorus,.case-film,.case-along,.case-reel) .case-index{order:0;width:100%;margin-bottom:18px}
 .portfolio-work :is(.case-chorus,.case-film,.case-along,.case-reel) h3{order:1;width:100%;margin-bottom:22px}
 .portfolio-work :is(.case-chorus,.case-film,.case-along,.case-reel) .reel-edition{order:2}
 .portfolio-work :is(.case-chorus,.case-film,.case-along,.case-reel) .case-purpose{order:3;max-width:38em;font-size:16px;line-height:1.85}
 .portfolio-work :is(.case-chorus,.case-film,.case-along,.case-reel) .case-insight{order:4;margin:22px 0;font-size:23px}
 .portfolio-work :is(.case-chorus,.case-film,.case-along,.case-reel) .film-visit{order:5;margin:0 0 26px}
 .portfolio-work .case-chorus .chorus-evidence,.portfolio-work .case-film .film-evidence,.portfolio-work .case-reel .reel-window,.portfolio-work .case-along .along-evidence{order:6;position:static;width:100%;max-width:600px;align-self:center;margin:0}
 .portfolio-work .case-reel .reel-window{max-width:460px}
 .portfolio-work .case-reel .reel-decisions{order:7;margin:28px 0 0;width:100%}
 .portfolio-work :is(.case-chorus,.case-film,.case-along,.case-reel) .project-story{order:8;width:100%;max-width:none;margin:30px 0 0;padding-top:24px}
 .portfolio-work .project-story p{max-width:42em}
 .portfolio-work .case-chorus .chorus-image-open{height:clamp(300px,56vw,410px)}
 .portfolio-work .case-chorus .chorus-scenes button{display:flex;font-size:14px}
 .portfolio-work .case-chorus .chorus-scenes button>span{margin:0}
}
@media(max-width:720px){
 .portfolio-work{--project-title-size:clamp(45px,11vw,68px)}
 .portfolio-work .qa-case-recording{padding-bottom:52px}
 .portfolio-work .qa-case-evidence{max-width:none;padding-right:0}
 .portfolio-work .qa-case-notes{order:4;width:100%;margin-top:26px;padding-top:24px}
 .portfolio-work .qa-notes-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .portfolio-work .qa-notes-grid .qa-notes-evidence{grid-column:auto}
 .portfolio-work .project-story .story-heading{font-size:20px;margin-bottom:19px}
 .portfolio-work .project-story p{font-size:15px;line-height:1.95}
 .portfolio-work .project-story .case-credit,.portfolio-work .project-story .wide-trip-status,.portfolio-work .project-story .qa-notes-evidence{font-size:12px}
}
@media(max-width:420px){
 .portfolio-work .case-chorus .chorus-scenes{gap:12px}
 .portfolio-work .case-chorus .chorus-scenes button{display:block;font-size:13px}
 .portfolio-work .case-chorus .chorus-scenes button>span{margin-bottom:5px}
 .portfolio-work .case-chorus .chorus-image-open{height:310px;padding:16px 12px 36px}
}

/* Native disclosure keeps the complete story reachable by touch and keyboard. */
.portfolio-work .case-collection details.project-story{padding-top:0}
.portfolio-work .project-story>.story-summary{display:block;cursor:pointer;list-style:none;border:0;padding:16px 0;min-height:58px;color:#d4e2c8}
.portfolio-work .project-story>.story-summary::-webkit-details-marker{display:none}
.portfolio-work .project-story>.story-summary .story-heading{display:flex;align-items:baseline;justify-content:space-between;gap:18px;max-width:none;margin:0;font:400 clamp(16px,1.4vw,20px)/1.65 var(--sans);color:inherit}
.portfolio-work .project-story>.story-summary span{font:inherit;transform:none;transition:none}
.portfolio-work .project-story>.story-summary .story-title{min-width:0}
.portfolio-work .project-story>.story-summary .story-action{display:flex;align-items:center;flex-shrink:0;gap:8px;font:12px/1.7 var(--sans);color:#91a48a;white-space:nowrap}
.portfolio-work .project-story>.story-summary .story-symbol{font-size:18px;line-height:1}
.portfolio-work .project-story>.story-summary:hover{color:#e5efd9}
.portfolio-work .project-story>.story-summary:hover .story-action{color:#c9deb9}
.portfolio-work .project-story .story-less{display:none}
.portfolio-work .project-story[open] .story-less{display:inline}
.portfolio-work .project-story[open] .story-more{display:none}
.portfolio-work .project-story[open]>.story-summary .story-symbol{transform:rotate(45deg)}
.portfolio-work .project-story>.story-content{padding:8px 0 4px}
@media(max-width:420px){.portfolio-work .project-story>.story-summary .story-heading{gap:12px;font-size:16px}.portfolio-work .project-story>.story-summary .story-action{gap:4px;font-size:11px}}