/* Uses the same cover, facts, index, reading scale and section spacing as the published cases. */
.portfolio-story{--story-border:var(--va-border-subtle,#ffffff1c)}
.portfolio-case-preview{display:flex;flex-direction:column;padding-block:64px;gap:32px}
.portfolio-case-preview>.ds-evidence{width:100%}
.portfolio-case-preview .story-hero-art{position:relative;height:480px;overflow:hidden;width:100%;background:#121010}
.portfolio-case-preview .story-architecture{width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:grayscale(1);opacity:.55}
.story-hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#121010 0%,transparent 42%),linear-gradient(0deg,#121010,transparent 70%)}
.story-red-plane{position:absolute;inset:0;background:linear-gradient(110deg,#4b000faa,#d90034bb);clip-path:polygon(50% 0,60% 0,45% 100%,35% 100%);z-index:1}
.story-glyph{position:absolute;width:120px;height:120px;object-fit:contain;left:40%;top:25%;z-index:2}
.story-art-caption{position:absolute;right:40px;bottom:40px;z-index:3;font:500 12px/2 'IBM Plex Mono',monospace;letter-spacing:2px;color:var(--muted)}
.story-number{font:500 12px/1.6 'IBM Plex Mono',monospace;color:var(--lime)}
.story-principles,.story-flow,.story-build-loop,.story-eval-flow{list-style:none;padding:0;margin:0;display:grid;gap:32px;grid-template-columns:repeat(3,minmax(0,1fr))}
.story-principles li,.story-flow li,.story-build-loop li{border-top:1px solid var(--story-border);padding-top:24px;display:flex;flex-direction:column;gap:20px;min-width:0}
.story-principles h3,.story-flow h3{margin-bottom:12px}
.story-flow,.story-build-loop,.story-eval-flow{grid-template-columns:repeat(4,minmax(0,1fr))}
.story-build-loop span{font:12px 'IBM Plex Mono',monospace;color:var(--lime)}
.story-specimen{padding:32px;border:1px solid var(--story-border);border-radius:12px;background:linear-gradient(135deg,#34303144,#12101066)}
.story-gestures{display:grid;margin:32px 0}
.story-gestures>div{display:flex}
.story-gestures img{width:48px;height:48px;object-fit:contain;flex:none}
.story-ask-intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.story-ask-demo{padding:28px;border:1px solid var(--lime);border-radius:8px;background:transparent}
.story-ask-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.story-ask-brand strong{font-size:24px;font-weight:500}
.story-ask-brand>span{font:11px 'IBM Plex Mono',monospace;border:1px solid var(--story-border);padding:4px 8px;border-radius:4px;color:var(--muted)}
.story-ask-demo blockquote{font:300 28px/1.4 Raleway,sans-serif;margin:20px 0 28px}
.story-link{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--lime);color:var(--lime);min-height:48px;text-align:left;font:500 14px/1.5 'Roboto Flex',sans-serif;max-width:100%}
.story-link img{transform:rotate(90deg);flex:none;object-fit:contain}
.story-ask-demo button{width:100%}.story-ask-status:empty{display:none}.story-ask-status{margin-top:16px}
.story-ask-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.story-card-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.story-ask-principles h3{margin:0}
.story-eval{display:flex;flex-direction:column;gap:28px;border-top:1px solid var(--story-border);padding-top:40px}
.story-eval h3{margin:0}.story-eval>p:not(.eyebrow){max-width:88ch}
.story-eval-flow li{display:flex;flex-direction:column;gap:20px;min-width:0}
.story-eval-flow h3{font-size:21px;margin-bottom:16px}
.story-eval-flow .story-number{background:var(--lime);color:#121010;width:40px;height:40px;display:grid;place-items:center}
.ds-editorial .story-caption{font-size:15px;line-height:1.6;color:var(--muted)}
.story-decisions{list-style:none;padding:0;margin:0}
.story-decisions li{display:grid;grid-template-columns:48px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--story-border)}
.story-decisions li>div{display:grid;grid-template-columns:1fr 1.5fr;gap:40px}
.story-decisions h3{margin:0}
.story-ending{background:none}
.story-ending>p:not(.eyebrow){max-width:88ch}
.story-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
@media(max-width:760px){
.portfolio-case-preview .story-hero-art{height:280px}.story-glyph{width:80px;height:80px;left:calc(50% - 40px);top:64px}.story-art-caption{display:none}
.story-principles,.story-flow,.story-ask-intro,.story-ask-principles,.story-eval-flow,.story-related{grid-template-columns:1fr;gap:24px}
.story-build-loop{grid-template-columns:1fr 1fr;gap:24px}.story-specimen,.story-ask-demo{padding:24px}
.story-eval-flow li{display:grid;grid-template-columns:40px 1fr;gap:20px}.story-eval-flow h3{font-size:21px}
.story-decisions li{grid-template-columns:24px 1fr;gap:16px}.story-decisions li>div{grid-template-columns:1fr;gap:16px}
.story-link{font-size:15px}.story-eval{gap:24px;padding-top:32px}
}
/* Concept narrative: criteria, original geometry and applications. */
.story-north-star{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.story-north-star article{display:flex;flex-direction:column}
.story-principle-heading{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.story-principle-heading h3{margin:0}
.story-principle-heading img{margin-left:auto;flex:none}
.story-north-star h4{font-size:23px;font-weight:500;line-height:1.4;margin:0 0 14px}
.story-north-star p{font-size:18px;color:var(--muted);line-height:1.65}
.story-criterion{margin-top:auto;padding-top:28px}
.story-criterion>span{display:block;font:500 11px/1.5 'IBM Plex Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:var(--lime);margin-bottom:12px}
.story-criterion p{font-size:16px;color:var(--paper);border-left:2px solid #343031;padding-left:18px}
.story-signature{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:48px 0 0;padding:48px 24px;border-block:1px solid var(--story-border)}
.story-signature figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:24px}
.story-signature img{width:120px;height:120px;object-fit:contain}
.story-signature figcaption{font:500 12px/1.5 'IBM Plex Mono',monospace;color:var(--muted);letter-spacing:1.5px}
.story-gestures{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.story-gestures>div{flex-direction:column;align-items:flex-start;gap:20px}
.story-gestures p{max-width:180px;font-size:17px;line-height:1.5}
.story-subsection{display:flex;flex-direction:column;gap:28px;margin-top:0}
.story-subsection>h3{margin:0;max-width:880px}
.story-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px;margin-top:36px}
.story-swatch{display:block;height:104px;border:1px solid #ffffff26}
.story-colors article>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:18px;align-items:baseline}
.story-colors h4{font-size:20px;font-weight:500;margin:0}
.story-colors code{font:11px/1.5 'IBM Plex Mono',monospace;color:var(--muted)}
.story-colors h5{font-size:16px;font-weight:500;margin:16px 0 8px}
.story-colors p{font-size:16px;line-height:1.6;color:var(--muted);max-width:340px}
.story-type-specimens{margin-top:36px}
.story-type-specimens article{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;border-top:1px solid var(--story-border);padding:32px 0}
.story-type-specimens .story-type-sample{font:800 clamp(32px,4vw,56px)/1.2 'Roboto Flex',sans-serif;margin-top:24px;letter-spacing:-1px}
.story-type-specimens article:nth-child(2) .story-type-sample{font-family:Raleway,sans-serif;font-weight:300;font-size:clamp(28px,3.5vw,48px)}
.story-type-specimens article:nth-child(3) .story-type-sample{font:500 clamp(18px,2vw,27px)/1.5 'IBM Plex Mono',monospace;letter-spacing:1px}
.story-type-specimens h4{font-size:21px;font-weight:500;margin:0 0 12px}
.story-type-specimens article>div:last-child>p{font-size:17px;line-height:1.65;color:var(--muted)}
.story-art-study{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px}
.story-art-study figure{margin:0;min-width:0}
.story-art-panel{position:relative;aspect-ratio:568/490;overflow:hidden;background:#343031;margin-top:20px}
.story-art-panel>img{width:100%;height:100%;object-fit:cover;display:block}
.story-art-treated>img{filter:grayscale(1);object-position:60% 50%}
.story-art-planes{position:absolute;inset:0;width:100%;height:100%;display:block}
.story-art-study figcaption{font-size:15px;color:var(--muted);line-height:1.6;margin-top:16px;max-width:440px}
.story-art-rule{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:48px;border-top:1px solid var(--story-border);padding-top:32px}
.story-art-rule h3{font:300 32px/1.25 Raleway,sans-serif}
.story-art-rule>p{font-size:18px;line-height:1.7;color:var(--muted)}
.story-system-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:40px 0 0}
.story-system-steps li{border-top:1px solid var(--lime);padding-top:24px}
.story-system-steps h3{font-size:24px;margin:20px 0}
.story-system-steps li>p:last-child{font-size:17px;line-height:1.65;color:var(--muted)}
.story-grids{display:grid;grid-template-columns:2fr 1fr;gap:32px;margin:36px 0}
.story-grids figure{margin:0;min-width:0}
.story-grids figcaption{font:500 11px/1.5 'IBM Plex Mono',monospace;letter-spacing:1px;color:var(--muted);margin-bottom:16px;text-transform:uppercase}
.story-grid-diagram{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:8px;height:160px;border-block:1px solid #ffffff26;padding-block:12px}
.story-grid-diagram span{background:#c8ff0017;border-inline:1px solid #c8ff0033}
.story-governance{display:flex;gap:24px;border-top:1px solid var(--story-border);padding-top:32px;margin-top:48px;align-items:flex-start}
.story-governance img{flex:none}
.story-governance p{font-size:18px;line-height:1.7;color:var(--muted);max-width:820px}
@media(max-width:760px){
.story-north-star{grid-template-columns:1fr;gap:24px;margin-top:0}
.story-principle-heading h3{font-size:23px}.story-north-star h4{font-size:21px}.story-north-star p{font-size:17px}.story-criterion{padding-top:24px}.story-criterion p{font-size:16px}
.story-signature{margin-top:32px;padding:32px 0}.story-signature img{width:88px;height:88px}.story-signature figcaption{font-size:10px}
.story-gestures{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}.story-gestures p{font-size:16px}.story-gestures img{width:40px;height:40px}
.story-subsection{gap:24px;margin-top:0}.story-subsection>h3{font-size:23px}
.story-colors{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;margin-top:28px}.story-swatch{height:80px}.story-colors h4{font-size:18px}.story-colors h5{font-size:16px}.story-colors p{font-size:15px}.story-colors article>div{display:grid;gap:6px}
.story-type-specimens article{grid-template-columns:1fr;gap:24px;padding:28px 0}.story-type-specimens .story-type-sample{font-size:44px;margin-top:16px}.story-type-specimens article:nth-child(2) .story-type-sample{font-size:34px}.story-type-specimens article:nth-child(3) .story-type-sample{font-size:19px}.story-type-specimens h4{font-size:20px}.story-type-specimens article>div:last-child>p{font-size:17px}
.story-art-study{grid-template-columns:1fr;gap:32px;margin-top:32px}.story-art-panel{margin-top:16px}.story-art-rule{grid-template-columns:1fr;gap:24px;margin-top:32px}.story-art-rule h3{font-size:28px}.story-art-rule>p{font-size:17px}
.story-system-steps{grid-template-columns:1fr;gap:28px;margin-top:32px}.story-system-steps h3{font-size:23px;margin:16px 0}
.story-grids{gap:20px;grid-template-columns:1.8fr 1fr}.story-grid-diagram{gap:4px;height:112px}.story-grids figcaption{font-size:10px;letter-spacing:0}
.story-governance{gap:16px;margin-top:32px}.story-governance img{width:24px;height:24px}.story-governance p{font-size:17px}
}