/* Shared visual case-study system, introduced with the approved Peni page. */
:is(.peni-story, .visual-story) { --ps-ink:#252725; --ps-muted:#575c58; --ps-line:#ccd0c7; --ps-accent:#e1efdc; background:var(--paper,#f4f4f0); color:var(--ps-ink); }
:is(.peni-story, .visual-story) [hidden] { display:none !important; }
:is(.peni-story, .visual-story) .site-header { height:auto; min-height:76px; }
:is(.peni-story, .visual-story) .site-header-inner { min-height:76px; height:auto; gap:1rem; padding-block:.65rem; }
:is(.peni-story, .visual-story) .site-nav { display:flex; gap:1.5rem; flex-wrap:wrap; }
:is(.peni-story, .visual-story) .site-nav a { font-size:.8125rem; }
:is(.peni-story, .visual-story) :is(a,button,summary):focus-visible { outline:2px solid currentColor; outline-offset:5px; }
:where(.peni-story, .visual-story) button { font:inherit; color:inherit; }
.ps-width { width:min(1200px,calc(100% - 80px)); margin-inline:auto; }
.ps-hero { display:flex; gap:72px; align-items:flex-end; padding-block:76px 52px; }
.ps-hero-copy { flex:1; min-width:0; }
.ps-kicker { font-size:.75rem; line-height:1.6; color:var(--ps-muted); margin-bottom:20px; }
.ps-hero h1 { font-family:var(--font-mono,'Spline Sans Mono',monospace); text-transform:none; font-size:1.125rem; line-height:1.5; letter-spacing:0; margin:0; }
.ps-hero h1 span { display:block; margin-top:22px; font-family:'Sofia Sans Condensed',sans-serif; font-size:clamp(4rem,6.6vw,6.25rem); line-height:.98; letter-spacing:-.025em; font-weight:800; }
.ps-lede { font-size:1.0625rem; line-height:1.7; max-width:52ch; margin-top:26px; }
.ps-link { display:inline-flex; align-items:center; justify-content:space-between; min-height:44px; gap:36px; margin-top:24px; text-decoration:none; border-bottom:1px solid var(--ps-ink); font-size:.875rem; }
.ps-link span { transition:transform .25s; }.ps-link:hover span { transform:translate(3px,-3px); }
.ps-meta { flex:0 0 235px; display:flex; flex-direction:column; gap:24px; margin:0 0 4px; }
.ps-meta dt { font-size:.6875rem; color:var(--ps-muted); margin-bottom:6px; }
.ps-meta dd { font-size:.8125rem; line-height:1.7; margin:0; }
.ps-cover { margin-block:0 100px; }
.ps-cover>button { display:block; position:relative; width:100%; padding:0; border:0; border-radius:28px; overflow:hidden; background:#e4dccc; cursor:pointer; }
.ps-cover picture,.ps-cover img { display:block; width:100%; height:auto; }
.ps-cover img { transition:transform .8s cubic-bezier(.22,1,.36,1); }
.ps-cover button:hover img { transform:scale(1.018); }
.ps-cover-label { position:absolute; bottom:22px; right:22px; padding:12px 18px; display:flex; gap:22px; border:1px solid #ffffff9c; background:#f4f4f0d9; backdrop-filter:blur(12px); border-radius:999px; font-size:.75rem; }
.ps-layout { display:flex; align-items:flex-start; gap:56px; }
.ps-index { flex:0 0 160px; position:sticky; top:112px; }
.ps-index nav { display:flex; flex-direction:column; }
.ps-index p { font-size:.6875rem; margin:0 0 18px; color:var(--ps-muted); }
.ps-index a { display:flex; align-items:center; min-height:44px; padding:8px 0 8px 12px; font-size:.75rem; line-height:1.5; border-left:2px solid var(--ps-line); color:var(--ps-muted); text-decoration:none; }
.ps-index a:hover,.ps-index a[aria-current] { border-color:var(--ps-ink); color:var(--ps-ink); }
.ps-article { flex:1; min-width:0; }
.ps-section { padding:0 0 112px; scroll-margin-top:120px; }
.ps-section h2 { font-family:'Sofia Sans Condensed',sans-serif; font-weight:800; font-size:clamp(2.65rem,3.8vw,3.8rem); line-height:1.04; text-transform:none; letter-spacing:-.02em; margin:0 0 24px; }
.ps-section>p:not(.ps-kicker):not(.ps-small):not(.ps-reflection) { font-size:1rem; line-height:1.85; margin-bottom:18px; max-width:70ch; }
.ps-section h3 { font-family:'Sofia Sans Condensed',sans-serif; text-transform:none; font-size:1.65rem; line-height:1.15; letter-spacing:0; }
.ps-section .ps-kicker { margin-bottom:14px; }
.ps-figure { margin:30px 0 0; min-width:0; }
.ps-enlarge { display:block; position:relative; padding:0; border:0; width:100%; border-radius:22px; overflow:hidden; background:#e7e8e1; cursor:zoom-in; }
.ps-enlarge img { display:block; width:100%; height:auto; }
.ps-enlarge>span { position:absolute; right:14px; bottom:14px; width:38px; height:38px; display:grid; place-items:center; border:1px solid #ffffffaa; border-radius:50%; background:#f4f4f0ce; backdrop-filter:blur(10px); font-size:1.125rem; transition:transform .3s; }
.ps-enlarge:hover>span { transform:rotate(10deg); }
.ps-figure figcaption,.ps-small { font-size:.75rem; line-height:1.75; color:var(--ps-muted); margin-top:12px; }
.ps-principles { display:flex; gap:24px; margin-top:32px; }
.ps-principles>div { flex:1; padding-top:18px; border-top:1px solid var(--ps-line); }
.ps-principles span { display:block; font-size:.6875rem; color:var(--ps-muted); margin-bottom:10px; }
.ps-principles p { font-size:.8125rem; line-height:1.8; margin-top:10px; }
.ps-iteration-notes { list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
.ps-iteration-notes li { font-size:.875rem; line-height:1.8; padding:0 0 18px; border-bottom:1px solid var(--ps-line); }
.ps-callout { display:flex; gap:20px; align-items:flex-start; padding:24px 28px; border-left:2px solid var(--ps-ink); background:#e7ebdf; border-radius:0 18px 18px 0; margin-top:30px; }
.ps-callout span { font-size:1.5rem; }.ps-callout p { font-size:.875rem; line-height:1.85; }
.ps-walkthrough { margin-top:30px; background:#e5e8df; padding:12px; border:1px solid #d7dbd2; border-radius:26px; }
.ps-replay-stage { border-radius:17px; overflow:hidden; }
.ps-shot { margin:0; }.ps-shot img { width:100%; height:auto; display:block; }
.ps-shot figcaption { padding:12px; font-size:.75rem; }
.ps-walkthrough.is-ready .ps-replay-stage { aspect-ratio:var(--ps-replay-ratio, 1265 / 889); background:#f4f4f0; }
.ps-walkthrough.is-ready .ps-shot figcaption { display:none; }
.ps-walkthrough.is-ready .ps-shot img { aspect-ratio:var(--ps-replay-ratio, 1265 / 889); object-fit:contain; }
.ps-walkthrough.is-ready .ps-shot.is-active { animation:ps-shot-in .6s cubic-bezier(.22,1,.36,1); }
.ps-replay-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:12px; }
.ps-step-buttons { display:flex; flex-wrap:wrap; gap:5px; }
.ps-step-buttons button,.ps-play,.ps-button { min-height:44px; border:1px solid #bfc7b7; padding:9px 14px; border-radius:999px; background:transparent; cursor:pointer; font-size:.75rem; line-height:1.5; }
.ps-step-buttons button[aria-pressed="true"],.ps-button { background:var(--ps-ink); color:var(--paper); border-color:var(--ps-ink); }
.ps-play { background:var(--paper); }.ps-replay-caption { padding:0 7px 4px; margin-top:12px; font-size:.75rem; line-height:1.7; min-height:2.7em; }
.ps-live { margin-top:28px; border:1px solid var(--ps-line); border-radius:20px; padding:24px; }
.ps-live-intro { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:14px; }
.ps-live-intro p { font-size:.8125rem; line-height:1.7; margin-top:8px; }
.ps-live-frame { display:block; width:100%; height:640px; border:1px solid var(--ps-line); border-radius:12px; margin:20px 0; background:white; }
.ps-device-note { display:flex; gap:38px; align-items:center; margin-top:44px; }.ps-device-note .ps-figure { flex:0 0 34%; margin:0; }.ps-device-note .ps-figure img { width:100%; }.ps-device-note>div { flex:1; }.ps-device-note p { font-size:.9375rem; line-height:1.8; margin-top:16px; }
.ps-outcomes { display:flex; gap:24px; margin:34px 0 18px; }.ps-outcomes>div { flex:1; border-top:1px solid var(--ps-line); padding-top:24px; }.ps-outcomes strong { display:block; font-family:'Sofia Sans Condensed',sans-serif; font-size:5.5rem; font-weight:800; line-height:1; margin-bottom:15px; }.ps-outcomes p { font-size:.8125rem; line-height:1.7; margin-top:8px; }
.ps-details { margin-top:25px; padding:18px 0; border-block:1px solid var(--ps-line); }.ps-details summary { cursor:pointer; min-height:44px; display:list-item; font-size:.875rem; line-height:1.7; padding-block:10px; }.ps-details p { padding:15px 0; font-size:.875rem; line-height:1.85; }
.ps-next-list { list-style:none; padding:0; margin:32px 0; display:flex; flex-direction:column; gap:24px; }.ps-next-list li { display:flex; gap:24px; border-top:1px solid var(--ps-line); padding-top:24px; }.ps-next-list span { font-size:.75rem; min-width:24px; }.ps-next-list p { font-size:.875rem; line-height:1.8; margin-top:12px; }
.ps-reflection { font-family:'Sofia Sans Condensed',sans-serif; font-size:2.9rem; line-height:1.1; padding-top:36px; }
.ps-ending { display:flex; justify-content:space-between; align-items:center; gap:36px; padding-block:40px 64px; border-top:1px solid var(--ps-line); }.ps-next-project { text-decoration:none; }.ps-next-project>span { display:block; font-size:.75rem; margin-bottom:8px; color:var(--ps-muted); }.ps-next-project strong { font-family:'Sofia Sans Condensed',sans-serif; font-size:2.75rem; }
.ps-footer { display:flex; justify-content:space-between; gap:20px; padding-block:22px 36px; border-top:1px solid var(--ps-line); font-size:.75rem; line-height:1.8; }
/* The content is visible by default; JavaScript opts individual items into reveals. */
.ps-reveal-pending { opacity:0; transform:translateY(28px); filter:blur(6px); }
.ps-reveal-pending.ps-reveal-visible { opacity:1; transform:translateY(0); filter:blur(0); transition:opacity 1.18s cubic-bezier(.22,1,.36,1),transform 1.18s cubic-bezier(.22,1,.36,1),filter 1.28s cubic-bezier(.22,1,.36,1); transition-delay:var(--ps-delay,0ms); }
.ps-lightbox { border:1px solid var(--ps-line); border-radius:24px; background:var(--paper); color:var(--ps-ink); width:min(1260px,calc(100% - 24px)); max-height:94dvh; padding:20px; overflow:auto; }
.ps-lightbox::backdrop { background:#111810b8; backdrop-filter:blur(12px); }
.ps-lightbox-bar { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:16px; }.ps-lightbox-bar p { font-size:.8125rem; }.ps-lightbox-bar button { min-height:44px; min-width:44px; border:1px solid var(--ps-line); border-radius:999px; background:transparent; cursor:pointer; }.ps-lightbox img { width:100%; height:auto; border-radius:12px; }.ps-lightbox a { display:inline-flex; min-height:44px; align-items:center; font-size:.75rem; }
@keyframes ps-shot-in { from { opacity:.3; filter:blur(4px); transform:translateY(8px); } to { opacity:1;filter:blur(0);transform:none; } }
@media(max-width:959px) { .ps-width { width:calc(100% - 40px); }.ps-hero { gap:32px; padding-top:46px; }.ps-meta { flex-basis:190px; }.ps-layout { display:block; }.ps-index { position:static; margin-bottom:44px; }.ps-index nav { flex-direction:row; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding-block:8px 14px; }.ps-index p { display:none; }.ps-index a { flex:none; border:1px solid var(--ps-line); border-radius:999px; padding:10px 15px; }.ps-section { padding-bottom:76px; }.ps-cover { margin-bottom:42px; } }
@media(max-width:699px) { :is(.peni-story, .visual-story) .site-header-inner { flex-wrap:wrap; }:is(.peni-story, .visual-story) .brand { font-size:1.5rem; }:is(.peni-story, .visual-story) .site-nav { gap:14px; width:auto; }:is(.peni-story, .visual-story) .site-nav a { font-size:.75rem; }:is(.peni-story, .visual-story) .site-nav>a:last-child { display:none; }.ps-hero { display:block; padding:36px 0 32px; }.ps-hero h1 span { font-size:3.1rem; }.ps-kicker { font-size:.6875rem; }.ps-lede { font-size:.9375rem; }.ps-meta { margin-top:34px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px 18px; }.ps-meta dd { font-size:.75rem; }.ps-cover>button { border-radius:20px; }.ps-cover-label { bottom:16px; right:16px; font-size:.6875rem; }.ps-section h2 { font-size:2.8rem; }.ps-section>p:not(.ps-kicker):not(.ps-small):not(.ps-reflection) { font-size:.9375rem; line-height:1.8; }.ps-figure { margin-top:24px; }.ps-enlarge { border-radius:16px; }.ps-principles { flex-direction:column; gap:20px; }.ps-principles>div { display:block; }.ps-principles p { max-width:40ch; }.ps-walkthrough { padding:8px; border-radius:18px; }.ps-replay-stage { border-radius:11px; }.ps-step-buttons button { padding:8px 10px; font-size:.6875rem; }.ps-replay-caption { font-size:.6875rem; }.ps-live { padding:18px; }.ps-live-intro { display:block; }.ps-live-intro button { margin-top:16px; }.ps-live-frame { height:560px; }.ps-device-note { gap:22px; }.ps-device-note .ps-figure { flex-basis:40%; }.ps-device-note p { font-size:.8125rem; }.ps-device-note h3 { font-size:1.5rem; }.ps-outcomes { flex-wrap:wrap; gap:20px; }.ps-outcomes>div { flex:1 1 130px; }.ps-outcomes strong { font-size:4.5rem; }.ps-outcomes h3 { font-size:1.5rem; }.ps-ending { align-items:flex-start; flex-direction:column; gap:26px; padding-bottom:36px; }.ps-next-project strong { font-size:2.5rem; }.ps-footer { flex-direction:column; }.ps-section { scroll-margin-top:110px; }.ps-callout { padding:18px; gap:14px; }.ps-reflection { font-size:2.3rem; }.ps-lightbox { padding:12px; border-radius:18px; } }
@media(max-width:374px) { .ps-hero h1 span { font-size:3.1rem; }.ps-device-note { display:block; }.ps-device-note .ps-figure { max-width:200px; margin:0 auto 22px; } }
@media(prefers-reduced-motion:reduce) { .ps-reveal-pending { opacity:1; transform:none; filter:none; }.ps-reveal-pending.ps-reveal-visible,.ps-shot,.ps-cover img,.ps-enlarge>span,.ps-link span { transition:none!important;animation:none!important; }.ps-cover button:hover img { transform:none; } }
/* Relative text growth can exceed a fixed mobile column. Let content wrap. */
.ps-meta>div,.ps-next-list li>div { min-width:0; }
.ps-meta dt { overflow-wrap:break-word; }
/* Matched source screens: each wireframe keeps its real capture's proportions. */
.ps-fidelity-pair { margin-top:40px; }
.ps-fidelity-pair>h3 { margin-bottom:16px; }
.ps-fidelity-row { display:flex; align-items:flex-start; gap:20px; }
.ps-fidelity-row>.ps-figure { flex:1; min-width:0; margin-top:0; }
.ps-fidelity-row .ps-enlarge { border:1px solid var(--ps-line); }
.ps-fidelity-row figcaption { margin-top:12px; }
.ps-fidelity-row img { background:#fafaf7; }
.ps-fidelity-row--portrait { max-width:680px; margin-inline:auto; }
@media(max-width:699px) { .ps-fidelity-row.ps-fidelity-row--portrait { flex-direction:row; gap:14px; } }
@media(max-width:699px) { .ps-fidelity-row { flex-direction:column; gap:22px; }.ps-fidelity-row>.ps-figure { width:100%; }.ps-fidelity-pair { margin-top:32px; } }
:is(.peni-story, .visual-story) :is(h1,h2,h3,p,a,button,dd,summary) { overflow-wrap:break-word; }
@media(min-width:700px) { .ps-hero-copy,.ps-section { container-type:inline-size; } }
@container(max-width:28rem) { .ps-principles,.ps-device-note { flex-direction:column; }.ps-device-note .ps-figure { width:min(230px,100%);flex-basis:auto; }.ps-hero h1 span { font-size:3rem; } }