/* Portfolio editorial system. Rules: docs/design-system/editorial.md */
.internal-frame{
 --case-media-radius:20px;
 --case-caption-size:13px;
 --case-caption-leading:1.6;
 --case-copy-leading:1.75;
}
.internal-frame figure.case-media{border:1px solid var(--line);border-radius:var(--case-media-radius);overflow:hidden;min-width:0}
.internal-frame figure.case-media>img,
.internal-frame figure.case-media>a,
.internal-frame figure.case-media>.visual-evidence-frame{display:block;margin:0;border:0;border-radius:0}
.internal-frame figure.case-media>img,
.internal-frame figure.case-media>a>img{display:block;width:100%;height:auto}
.internal-frame figure.case-media>figcaption{
 box-sizing:border-box;width:100%;max-width:none;margin:0;
 padding:14px 18px;border-top:1px solid var(--line);
 color:var(--ink-soft);font-size:var(--case-caption-size);line-height:var(--case-caption-leading);
 text-align:left;background:transparent;
}
.internal-frame figure.case-media>figcaption p{margin:0;color:inherit;font-size:inherit;line-height:inherit}
.internal-frame figure.case-media>figcaption h3{margin:0 0 8px;font-size:18px;line-height:1.35;color:var(--ink);font-weight:500}
.internal-frame .visual-reading-link,
.internal-frame .visual-reading-link:visited{
 display:inline-block;margin-top:8px;color:var(--accent);font-size:14px;line-height:1.6;
 text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
}
.internal-frame .visual-reading-link:hover{text-decoration-thickness:2px}
.internal-frame .visual-reading-link:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:2px}
.internal-frame .case-block-label h2{line-height:1.2}
.internal-frame .case-block-content>p{line-height:var(--case-copy-leading)}
.internal-frame .case-subblock h3,
.internal-frame .visual-story-copy h3{color:var(--accent);font-size:21px;font-weight:500;line-height:1.35}
@media(min-width:901px){
 .internal-frame .case-block-inner{align-items:first baseline}
 .internal-frame .case-block-label .num{position:absolute;top:-28px;left:0;margin:0}
 .internal-frame .visual-summary .visual-heading{position:relative}
 .internal-frame .visual-summary .visual-heading>.section-label{position:absolute;top:-28px;left:0;margin:0}
 .internal-frame .case-block-label h2{line-height:28px}
 .internal-frame .case-block-content>p{line-height:28px}
 .internal-frame .visual-summary>.container{align-items:first baseline}
 .internal-frame .visual-summary .visual-heading h2,
 .internal-frame .visual-summary-copy>p{line-height:28px}
}
@media(max-width:640px){
 .internal-frame figure.case-media>figcaption{padding:12px 14px}
}

/* Keep narrative media in the text column and bound sticky labels to the section. */
.internal-frame .case-narrative-story .visual-story-copy,
.internal-frame .case-narrative-story .visual-system-details>p{width:auto;max-width:none;margin-left:0;margin-right:0}
.internal-frame .case-narrative-story .visual-decision{display:block;margin:0 0 48px}
.internal-frame .case-narrative-story .visual-decision:last-child{margin-bottom:0}
.internal-frame .case-narrative-story .visual-evidence{width:100%;margin:24px 0 32px}
.internal-frame .case-narrative-story .visual-system-details{margin-top:32px}
@media(min-width:901px){
 .internal-frame .case-block-label{position:sticky;top:110px;align-self:start}
 .internal-frame .case-block-content{min-width:0}
}
@media(max-width:900px){.internal-frame .case-block-label{position:static}}

/* Editorial pull quote / framing question; prompts keep their own disclosure style. */
.internal-frame .pull-quote{
 box-sizing:border-box;max-width:26ch;margin:40px 0;padding:0 0 0 28px;
 border:0;border-left:2px solid var(--accent);border-radius:0;
 background:transparent;box-shadow:none;color:var(--ink);
 font-family:inherit;font-size:clamp(22px,3vw,32px);font-weight:400;
 font-style:normal;line-height:1.25;letter-spacing:-.02em;
}
.internal-frame .pull-quote p{margin:0;font:inherit;color:inherit}
.internal-frame .pull-quote cite{display:block;margin-top:16px;font-size:13px;line-height:1.6;letter-spacing:normal;font-style:normal;color:var(--ink-soft)}
@media(max-width:640px){.internal-frame .pull-quote{padding-left:20px;margin:28px 0}}

/* Prompt proof cards stack with the narrative at tablet widths. */
@media(max-width:900px){
 .internal-frame .prompt-proof-card{grid-template-columns:minmax(0,1fr);padding:20px}
 .internal-frame .prompt-proof-card> :is(.prompt-proof-meta,.prompt-proof-result,.prompt-proof-copy,.prompt-proof-visual,.case-prompt-disclosure){grid-column:1;grid-row:auto;min-width:0}
 .internal-frame .prompt-proof-card>.prompt-proof-meta{grid-row:1}
 .internal-frame .prompt-proof-card>.prompt-proof-result{grid-row:2}
 .internal-frame .prompt-proof-card>.prompt-proof-visual{grid-row:3}
 .internal-frame .prompt-proof-card>.case-prompt-disclosure{grid-row:4}
 .internal-frame .prompt-proof-card>.prompt-proof-copy+.prompt-proof-visual{grid-row:2}
}

/* Remove the legacy eyebrow spacer: the heading starts with the first copy line. */
@media(min-width:901px){
 body.internal-frame .case-block-label{padding-top:0}
 body.internal-frame .case-block-label .num{top:-28px;line-height:14px}
}

/* Nested browser screenshots share the outer figure boundary and caption. */
body.internal-frame figure.case-media>.mockup-browser{
 margin:0;padding:0;border:0;border-radius:0;background:transparent;
}
body.internal-frame figure.case-media>.mockup-browser>.mockup-browser-screen{
 border:0;border-radius:0;max-height:none;height:auto;aspect-ratio:auto;
}
body.internal-frame figure.case-media>.mockup-browser>.mockup-browser-screen>img{
 width:100%;height:auto;max-height:none;object-fit:contain;
}

/* The outer gallery figure owns the radius; keep the image-caption seam straight. */
.internal-frame figure.case-media>.product-gallery-stage{border:0;border-radius:0;margin:0}

/* Gallery arrows share the primary action treatment used by home case rails. */
.internal-frame .product-gallery-arrows button{background:var(--accent);border-color:var(--accent);color:#fff;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.internal-frame .product-gallery-arrows button:disabled{opacity:.35;cursor:default}
.internal-frame .product-gallery-arrows button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(hover:hover){
 .internal-frame .product-gallery-arrows button:not(:disabled):hover{background:#AC3804;border-color:#AC3804;color:#fff}
}
.internal-frame .product-gallery-arrows button:not(:disabled):active{background:#AC3804;border-color:#AC3804;color:#fff}
@media(prefers-reduced-motion:reduce){.internal-frame .product-gallery-arrows button{transition:none}}

/* Shared type scale for editorial cases; hero and prototype UIs keep their own roles. */
.internal-frame .case-block-label h2,
.internal-frame .visual-summary .visual-heading h2{font-size:var(--type-section-size);line-height:var(--type-section-leading);font-weight:var(--type-heading-weight)}
.internal-frame .case-subblock h3,
.internal-frame .visual-story-copy h3{font-size:var(--type-subtitle-size);line-height:var(--type-subtitle-leading);font-weight:var(--type-heading-weight)}
.internal-frame figure.case-media>figcaption h3{font-size:var(--type-caption-title-size);line-height:var(--type-caption-title-leading);font-weight:var(--type-heading-weight)}

/* Gallery navigation follows the home rail: status left, primary arrows right. */
.internal-frame .product-gallery-toolbar{display:flex;justify-content:space-between;align-items:center}
.internal-frame .product-gallery-toolbar [data-gallery-status]{order:0}
.internal-frame .product-gallery-toolbar .product-gallery-arrows{order:1;margin-left:auto}

/* Primary case actions follow the orange action standard. */
.internal-frame .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
@media(hover:hover){.internal-frame .btn-primary:hover{background:#AC3804;border-color:#AC3804;color:#fff}}
.internal-frame .btn-primary:active{background:#AC3804;border-color:#AC3804;color:#fff}

/* All editorial side labels follow the same section-bounded sticky contract. */
@media(min-width:901px){
 body.internal-frame .case-block-inner>.case-block-label,
 body.internal-frame .case-block-inner:has(>.case-card-grid,>.case-card-section)>.case-block-label{position:sticky;top:110px;align-self:start}
}
@media(max-width:900px){
 body.internal-frame .case-block-inner>.case-block-label,
 body.internal-frame .case-block-inner:has(>.case-card-grid,>.case-card-section)>.case-block-label{position:static;top:auto}
}