/* The portfolio supplies the reading experience; embedded product UI keeps its identity. */
html:root[data-theme="light"]{--paper:var(--portfolio-paper);--paper2:var(--portfolio-surface);--sunk:#e9e8e1;--ink:var(--portfolio-ink);--ink2:var(--portfolio-muted);--ink3:var(--portfolio-muted);--rule:var(--portfolio-rule);--rule2:var(--portfolio-rule);--blue:var(--portfolio-accent);--display:var(--portfolio-sans);--body:var(--portfolio-sans);--mono:var(--portfolio-sans);color-scheme:light}
.portfolio-case{font:17px/1.7 var(--portfolio-sans);overflow-x:clip}
.portfolio-case .sheet{max-width:var(--portfolio-width);padding-inline:var(--portfolio-gutter)}
.portfolio-case .site-head{border:0}.portfolio-case .site-head .sheet{min-height:96px;gap:32px;position:relative}
.portfolio-case .site-head .sheet:after{content:'';position:absolute;bottom:0;left:var(--portfolio-gutter);right:var(--portfolio-gutter);border-bottom:1px solid var(--rule)}
.portfolio-case .mark{font-size:21px;font-weight:600;letter-spacing:-.04em;gap:12px;line-height:1.15;color:var(--ink)}
.portfolio-case .mark img{width:40px;height:40px}.portfolio-case .nav{gap:28px;margin-left:auto}
.portfolio-case .nav a{font-size:14px;padding:12px 0;font-weight:400;color:var(--ink)}
.portfolio-case a{color:var(--blue)}.portfolio-case p{max-width:720px;margin:0 0 24px}
.portfolio-case strong{background:none;font-weight:600}.portfolio-case em{color:inherit}
.portfolio-case h1,.portfolio-case h2,.portfolio-case h3{font-family:var(--portfolio-sans);font-weight:500;text-wrap:pretty}
.portfolio-case h1{font-size:clamp(40px,5.2vw,68px);line-height:1.06;letter-spacing:-.055em;max-width:1000px}
.portfolio-case h2{font-size:clamp(28px,3vw,38px);line-height:1.16;letter-spacing:-.035em;max-width:800px;margin:0 0 24px}
.portfolio-case h3{font-size:22px;line-height:1.3;letter-spacing:-.025em;margin:0 0 14px}
.portfolio-case .hero{padding:56px 0 64px}.portfolio-case .hero h1{margin:16px 0 28px}
.portfolio-case .hero h1 .q{font:italic 400 1.06em/1.06 var(--portfolio-serif);color:var(--blue)}
.portfolio-case .lede{font:400 20px/1.6 var(--portfolio-sans);color:var(--muted);max-width:720px}
.portfolio-case .eyebrow,.portfolio-case .note,.portfolio-case figcaption,.portfolio-case .tag,.portfolio-case .stat .u,.portfolio-case .tb dt,.portfolio-case .tb dd,.portfolio-case .prob dt,.portfolio-case .callout,.portfolio-case .step h3{font-family:var(--portfolio-sans);letter-spacing:0;text-transform:none}
.portfolio-case .eyebrow{font-size:13px;line-height:1.5;margin-bottom:20px}
.portfolio-case .tagline{gap:12px 24px;margin-bottom:32px}.portfolio-case .tag{font-size:13px;border:0;padding:0;color:var(--muted);background:none;border-radius:0}
.portfolio-case section.band{padding-block:64px}.portfolio-case .callout{font-size:13px;line-height:1.5;color:var(--muted);gap:8px;margin-bottom:20px}
.portfolio-case .callout .dot{border:0;border-radius:0;width:auto;height:auto;font:inherit;color:var(--blue)}.portfolio-case .callout .rule{display:none}
.portfolio-case .grid{gap:32px}.portfolio-case .grid p,.portfolio-case .take p,.portfolio-case .prob dd,.portfolio-case .panel p{font-size:16px;line-height:1.7}
.portfolio-case .step h3{font-size:16px;line-height:1.4;color:var(--ink);padding-top:16px}
.portfolio-case .prob dt,.portfolio-case .tb dt{font-size:12px;margin-bottom:8px}.portfolio-case .prob dd{margin-bottom:16px}
.portfolio-case .panel{border:0;padding:28px 32px;margin-top:32px;background:var(--paper2)}
.portfolio-case .wide{margin-top:32px}.portfolio-case figcaption{font-size:13px;line-height:1.6;margin-top:14px;max-width:840px;color:var(--muted)}
.portfolio-case .shot{border-color:var(--rule);border-radius:8px}.portfolio-case .dim{max-width:720px;margin-top:32px}
.portfolio-case .stat .n{font-weight:500;font-size:48px}.portfolio-case .stat .u{font-size:13px;line-height:1.5}
.portfolio-case .take li::before{font:400 13px/1.5 var(--portfolio-sans);letter-spacing:0}.portfolio-case .take{gap:32px}
.portfolio-case th{font:500 13px/1.5 var(--portfolio-sans);letter-spacing:0;text-transform:none}
.portfolio-case td{font:400 16px/1.65 var(--portfolio-sans);padding:20px 24px 20px 0}.portfolio-case td .did{font-size:16px}
.portfolio-case .rev,.portfolio-case table.meas td.num{font-family:var(--portfolio-sans)}
.portfolio-case .titleblock{border-top:1px solid var(--rule);padding:32px 0;margin-top:48px}
.portfolio-case .tb{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px}.portfolio-case .tb dd{font-size:14px;line-height:1.6}
.portfolio-case .next{border-top:1px solid var(--rule);margin-top:56px;gap:32px}.portfolio-case .next a{padding:24px 0;color:var(--ink)}
.portfolio-case .next a span{font:400 13px/1.5 var(--portfolio-sans);margin-bottom:8px}.portfolio-case .next a b{font-weight:500;font-size:24px;letter-spacing:-.03em}
.portfolio-case .lockbox{max-width:680px;border:1px solid var(--rule);background:var(--paper2);padding:32px;margin:40px 0}
.portfolio-case .lockbox h2{font-size:26px}.portfolio-case .lockbox p{font-size:16px}.portfolio-case .lockbox label{font:400 14px/1.6 var(--portfolio-sans)}
.portfolio-case .lockbox input{font:400 17px/1.5 var(--portfolio-sans);min-height:48px;background:white;color:var(--ink);border:1px solid #bfc1b7;border-radius:4px}
.portfolio-case .lockbox button{font:400 14px/1.5 var(--portfolio-sans);min-height:48px;background:var(--ink);color:white;border-radius:4px}
/* A useful, consistent chapter control replaces decorative micro-navigation. */
.case-tools{position:sticky;top:0;z-index:20;background:#faf9f6f5;backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.case-tools-inner{max-width:var(--portfolio-width);padding:12px var(--portfolio-gutter);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px}
.case-tools a{font-size:13px;text-decoration:none;color:var(--portfolio-ink)}
.case-jump{display:flex;align-items:center;gap:12px;font:400 13px/1.5 var(--portfolio-sans);color:var(--muted);min-width:0}
.case-jump select{font:400 13px/1.5 var(--portfolio-sans);max-width:360px;width:100%;min-height:40px;background:transparent;border:1px solid var(--rule);border-radius:4px;padding:8px 28px 8px 12px;color:var(--ink)}
/* Crossclear's narrative uses the portfolio type; its embedded examples retain their own colours. */
.portfolio-case .cc{--paper:var(--portfolio-paper);--ink:var(--portfolio-ink);--ink-2:var(--portfolio-muted);--ink-3:var(--portfolio-muted);--display:var(--portfolio-sans);--mono:var(--portfolio-sans);--read:720px;--wide:1192px;font-family:var(--portfolio-sans)}
.portfolio-case .cc .page{max-width:var(--portfolio-width);margin:auto;padding:0 var(--portfolio-gutter) 64px}
.portfolio-case .cc .masthead{display:none}.portfolio-case .cc .wide{max-width:none;margin-top:0}.portfolio-case .cc .col{max-width:720px;margin-left:0;margin-right:auto}
.portfolio-case .cc .hero{padding:56px 0 64px;grid-template-columns:7fr 5fr;gap:32px;align-items:start}
.portfolio-case .cc .hero-shot{max-width:245px;align-self:center}.portfolio-case .cc h1{font-size:clamp(40px,5.2vw,68px);font-weight:500;line-height:1.06;letter-spacing:-.055em}
.portfolio-case .cc h1 span{font:italic 400 1.06em/1.06 var(--portfolio-serif);color:var(--portfolio-accent)}
.portfolio-case .cc h2{font-size:clamp(28px,3vw,38px);font-weight:500;line-height:1.16;letter-spacing:-.035em;margin-bottom:24px}
.portfolio-case .cc h3{font-size:22px;font-weight:500}.portfolio-case .cc p{font-size:17px;line-height:1.7}.portfolio-case .cc .lede{font-size:20px;font-weight:400;line-height:1.6;max-width:640px}
.portfolio-case .cc strong{font-weight:600}.portfolio-case .cc a{font-weight:500;color:var(--portfolio-accent)}
.portfolio-case .cc .when-tag,.portfolio-case .cc .label{font:400 13px/1.5 var(--portfolio-sans);letter-spacing:0;color:var(--portfolio-muted);margin-bottom:16px}
.portfolio-case .cc section{padding-top:64px}.portfolio-case .cc .facts{gap:20px 24px}.portfolio-case .cc .facts dt{font-size:12px;letter-spacing:0;text-transform:none}.portfolio-case .cc .facts dd{font-size:14px;font-weight:400;line-height:1.6}
.portfolio-case .cc figcaption{font:400 13px/1.6 var(--portfolio-sans);max-width:840px;margin-top:14px}
/* PeopleCloud previously carried a second full site inside the password gate. */
.portfolio-case .pc{--paper:var(--portfolio-paper);--ink:var(--portfolio-ink);--muted:var(--portfolio-muted);--line:var(--portfolio-rule);font-family:var(--portfolio-sans);background:var(--portfolio-paper)}
.portfolio-case .pc .site-header,.portfolio-case .pc .chapter-nav,.portfolio-case .pc .reading-progress,.portfolio-case .pc .footer{display:none}
.portfolio-case .pc .wrap{width:100%;max-width:var(--portfolio-width);padding-inline:var(--portfolio-gutter);margin-inline:auto}
.portfolio-case .pc .hero{background:var(--portfolio-paper);color:var(--portfolio-ink);padding:56px 0 0}
.portfolio-case .pc .hero-top{grid-template-columns:7fr 5fr;gap:32px}.portfolio-case .pc .hero h1{font-size:clamp(40px,5.2vw,68px);font-weight:500;line-height:1.06;letter-spacing:-.055em;margin:16px 0 28px}
.portfolio-case .pc .hero-copy{font-size:20px;line-height:1.6;color:var(--portfolio-muted);max-width:620px}
.portfolio-case .pc .hero-image{height:430px;border-radius:8px;transform:none;border:1px solid var(--rule);box-shadow:none}
.portfolio-case .pc .hero .eyebrow{color:var(--portfolio-muted)}
.portfolio-case .pc .hero-bottom{margin-top:40px;padding:28px 0 48px;border-color:var(--rule);grid-template-columns:repeat(3,minmax(0,1fr))}
.portfolio-case .pc .hero-bottom dt{font-size:12px;letter-spacing:0;text-transform:none;color:var(--portfolio-muted)}.portfolio-case .pc .hero-bottom dd{font-size:14px}
.portfolio-case .pc h2{font-size:clamp(28px,3vw,38px);line-height:1.16;font-weight:500;letter-spacing:-.035em}
.portfolio-case .pc h3{font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.025em}
.portfolio-case .pc h4{font-size:18px;font-weight:500}.portfolio-case .pc p{font-size:17px;line-height:1.7}
.portfolio-case .pc .eyebrow,.portfolio-case .pc small{font:400 13px/1.5 var(--portfolio-sans);letter-spacing:0;text-transform:none}
.portfolio-case .pc .chapter{padding:64px 0;border-color:var(--rule)}
.portfolio-case .pc .chapter-head{grid-template-columns:1fr 1fr;gap:32px;margin-bottom:40px}
.portfolio-case .pc .chapter-number{display:none}.portfolio-case .pc .chapter-intro{padding-top:0}
.portfolio-case .pc .chapter-head .eyebrow{color:var(--portfolio-muted);margin-bottom:16px}
.portfolio-case .pc .two-col,.portfolio-case .pc .feature-head,.portfolio-case .pc .decisions,.portfolio-case .pc .mobile-layout{gap:32px}
.portfolio-case .pc .feature{padding-bottom:0;margin-top:64px}.portfolio-case .pc .feature:first-of-type{margin-top:0}
.portfolio-case .pc .feature-head{margin-bottom:28px}.portfolio-case .pc .tag{border:0;background:none;border-radius:0;color:var(--portfolio-muted);padding:0;margin-bottom:16px;font-size:13px;letter-spacing:0}
.portfolio-case .pc .note,.portfolio-case .pc .visual figcaption,.portfolio-case .pc .visual figcaption .sub{font-size:13px;font-weight:400;line-height:1.6}
.portfolio-case .pc .decisions h4{color:var(--portfolio-ink)}.portfolio-case .pc .decisions p{font-size:16px}
.portfolio-case .pc .dark-band{margin:48px 0;background:var(--portfolio-surface);color:var(--portfolio-ink);padding:32px;border-radius:8px}
.portfolio-case .pc .dark-band .wrap{width:100%;padding:0}.portfolio-case .pc .dark-band p,.portfolio-case .pc .dark-band .note,.portfolio-case .pc .dark-band h4,.portfolio-case .pc .workload-list p{color:var(--portfolio-muted)}
.portfolio-case .pc .dark-band .eyebrow{color:var(--portfolio-muted)}.portfolio-case .pc .reflection{background:var(--portfolio-surface);color:var(--portfolio-ink)}
.portfolio-case .pc .reflection p,.portfolio-case .pc .reflection .eyebrow,.portfolio-case .pc .reflection .chapter-intro{color:var(--portfolio-muted)}
.portfolio-case .pc .reflection .process,.portfolio-case .pc .reflection .process article+article{border-color:var(--rule)}
.portfolio-case .pc .context{max-width:none}.portfolio-case .pc .process p{font-size:16px}.portfolio-case .pc .quote{border-left:2px solid var(--portfolio-accent);padding-left:24px}.portfolio-case .pc .quote p{font-size:23px;line-height:1.5}
.portfolio-case .pc .image-button{border-radius:8px}.portfolio-case .pc .image-button:after{background:var(--portfolio-ink);font-size:12px}
/* The supplied Zenyhome WIP, with its original story and figure order. */
.zeny-case>.hero,.zeny-case>.zeny-content,.zeny-case>.zeny-footer{max-width:var(--portfolio-width);margin:auto;padding-inline:var(--portfolio-gutter)}
.zeny-case>.hero{padding-block:56px 32px}.zeny-case .subtitle{font-size:clamp(28px,3.2vw,42px);line-height:1.15;letter-spacing:-.035em;max-width:850px;color:var(--blue);font-family:var(--portfolio-serif);font-style:italic}
.zeny-case .meta{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:850px;margin:32px 0}.zeny-case .meta dt{font-size:12px;color:var(--muted);margin-bottom:8px}.zeny-case .meta dd{font-size:14px;line-height:1.6;margin:0}
.zeny-case .case-stage{font-size:13px;color:var(--muted);padding-top:24px;border-top:1px solid var(--rule)}
.zeny-case>.zeny-content{padding-top:24px;padding-bottom:64px}.zeny-case .intro-text{font-size:20px;line-height:1.6}.zeny-case .chapter{padding:64px 0 0;margin-top:64px;border-top:1px solid var(--rule)}
.zeny-case figure{margin:32px 0}.zeny-case figure img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--rule)}
.zeny-case blockquote{margin:32px 0;padding-left:24px;border-left:2px solid var(--blue)}.zeny-case blockquote p{font-size:24px;letter-spacing:-.02em}
.zeny-case .image-notes{margin-top:48px;border-top:1px solid var(--rule);padding-top:24px}.zeny-case summary{font-size:14px;cursor:pointer}.zeny-case .image-notes p{font-size:14px;margin-top:20px;color:var(--muted)}
.zeny-case>.zeny-footer{padding-block:32px;display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--rule);font-size:14px}
@media(max-width:900px){
 .portfolio-case .pc .hero-top{grid-template-columns:1fr 1fr}.portfolio-case .pc .hero-image{height:380px}
 .portfolio-case .cc .hero{grid-template-columns:1.3fr .7fr}.portfolio-case .pc .chapter-head{grid-template-columns:1fr;gap:24px}.portfolio-case .pc .chapter-intro{grid-column:auto}
 .portfolio-case .tb{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 .portfolio-case{font-size:16px}.portfolio-case .site-head .sheet{min-height:80px;flex-wrap:nowrap;gap:20px;padding-block:18px}.portfolio-case .mark{font-size:19px}.portfolio-case .mark img{width:36px;height:36px}
 .portfolio-case .nav{width:auto;gap:18px}.portfolio-case .nav a{font-size:13px}
 .case-tools-inner{padding-block:10px;gap:12px;min-height:60px}.case-tools a{font-size:12px;white-space:nowrap}.case-jump>span{display:none}.case-jump select{max-width:210px;font-size:12px}
 .portfolio-case .hero,.portfolio-case .cc .hero{padding:40px 0}.portfolio-case .hero h1{margin-top:12px}.portfolio-case h1,.portfolio-case .cc h1,.portfolio-case .pc .hero h1{font-size:clamp(38px,8.5vw,56px)}
 .portfolio-case .lede,.portfolio-case .cc .lede,.portfolio-case .pc .hero-copy,.zeny-case .intro-text{font-size:18px}
 .portfolio-case section.band{padding-block:40px}.portfolio-case .grid{gap:24px}.portfolio-case .g2,.portfolio-case .g3,.portfolio-case .g4,.portfolio-case .ba{grid-template-columns:1fr}
 .portfolio-case .tagline{gap:8px 20px}.portfolio-case .tag{font-size:12px}.portfolio-case .panel{padding:24px}.portfolio-case .lockbox{padding:24px}
 .portfolio-case .cc .hero{grid-template-columns:1fr;gap:32px}.portfolio-case .cc .hero-shot{max-width:220px}.portfolio-case .cc section{padding-top:48px}
 .portfolio-case .cc .annot{grid-template-columns:1fr}.portfolio-case .cc .grid3,.portfolio-case .cc .grid4{grid-template-columns:1fr 1fr}
 .portfolio-case .cc p{font-size:16px}.portfolio-case .cc .pains{grid-template-columns:1fr}.portfolio-case .cc .pains div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
 .portfolio-case .pc .hero{padding-top:40px}.portfolio-case .pc .hero-top{grid-template-columns:1fr;gap:32px}.portfolio-case .pc .hero-image{height:340px}.portfolio-case .pc .hero-bottom{grid-template-columns:1fr 1fr;gap:24px}
 .portfolio-case .pc .chapter{padding:48px 0}.portfolio-case .pc .chapter-head{gap:24px;margin-bottom:32px}.portfolio-case .pc .chapter-intro{grid-column:auto}
 .portfolio-case .pc p{font-size:16px}.portfolio-case .pc .dark-band{padding:24px;margin:32px 0}.portfolio-case .pc .process{grid-template-columns:1fr}.portfolio-case .pc .two-col,.portfolio-case .pc .feature-head,.portfolio-case .pc .decisions{grid-template-columns:1fr;gap:24px}
 .zeny-case>.hero{padding-top:40px}.zeny-case .meta{grid-template-columns:1fr;gap:20px}.zeny-case .chapter{margin-top:40px;padding-top:40px}.zeny-case>.zeny-footer{flex-direction:column;gap:16px}
}
@media(max-width:390px){
 .portfolio-case .site-head .sheet{flex-wrap:wrap;gap:8px}.portfolio-case .nav{margin-left:0;width:100%;justify-content:start;gap:24px}
 .case-jump select{max-width:175px}.case-tools a{font-size:11px}.portfolio-case .cc .pair{grid-template-columns:1fr}.portfolio-case .tb{gap:20px}.portfolio-case .pc .dark-band{padding:20px}
}
@media(prefers-reduced-motion:reduce){.portfolio-case *{scroll-behavior:auto!important}}
.portfolio-case .pc .reflection .process p,.portfolio-case .pc .reflection .note,.portfolio-case .pc .dark-band .feature-head p,.portfolio-case .pc .dark-band .decisions p{color:var(--portfolio-muted)}
.case-jump>span{white-space:nowrap}
.portfolio-case .pc .reflection .note[style]{color:var(--portfolio-muted)!important}
.portfolio-case h1[tabindex="-1"]:focus{outline:none}
.portfolio-case .zeny-case>.hero{padding-inline:var(--portfolio-gutter)}