/* Sample portfolio sites, drawn as live HTML so they stay sharp at any size. Used by /portfolio and the portal mockups.
   Every sample carries a "Sample" label where it is shown, uses a fictional name and illustrated work (portfolio-art in the page).
   They follow the owner's rules for every portfolio we build (November 5, 2026; PORTFOLIOS.md "Looks"): the person's name
   leads, sized to fit the width (--fit: the name's measured width in em, in its own face); the strongest shot full bleed
   with a slow push-in; a header that blends over the picture; no viewfinder brackets or frame edges; a letterbox only as an
   opening that ends fully open; square tags and buttons, never pills. */
@font-face{font-family:"Geist Mono";src:url(geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url(big-shoulders.woff2) format("woff2");font-weight:500 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(instrument-serif.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.spx{position:relative;view-timeline:--spx block;container-type:inline-size;aspect-ratio:16/10;overflow:hidden;isolation:isolate;color:#fff;background:#111;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif} /* line-break-ok: sample site frame */
.spx-art{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.spx::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 28%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55))}
.spx-nav{display:flex;align-items:center;gap:3.2cqi;padding:3cqi 4cqi;color:#fff;mix-blend-mode:difference;font-size:1.7cqi;letter-spacing:.06em;text-transform:uppercase}
.spx-nav b{margin-right:auto;font-size:2.3cqi;letter-spacing:.04em}
.spx-nav span{opacity:.85}
.spx-hero{position:absolute;left:4cqi;right:4cqi;bottom:5cqi;display:grid;gap:1.6cqi}
.spx-hero .spx-t{order:-1}
.spx-k{margin:0;font:500 1.6cqi/1.3 "Geist Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.spx-t{margin:0;font-size:min(var(--cap,24cqi),calc(92cqi / var(--fit,6)));line-height:.86;white-space:nowrap}
/* filmmaker: condensed caps; a letterbox opens as it comes into view and ends fully open */
.spx.film .spx-nav,.spx.film .spx-t{font-family:"Big Shoulders Display","Arial Narrow",sans-serif;font-weight:800;text-transform:uppercase}
.spx.film .spx-nav{font-size:2cqi;letter-spacing:.1em}
.spx.film .spx-t{line-height:.82}
.spx-bars{display:none}
/* photographer: a quiet serif */
.spx.photo .spx-nav b,.spx.photo .spx-t{font-family:"Instrument Serif",Georgia,serif;font-weight:400;text-transform:none;letter-spacing:0}
.spx.photo .spx-nav b{font-size:3cqi}
.spx.photo .spx-t{font-style:italic;line-height:.95}
/* designer: the poster is the hero and carries the name, dark type */
.spx.design{color:#141414}
.spx.design::before{display:none}
.spx.design .spx-nav b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.01em;text-transform:none;font-size:2.6cqi}
.spx.design .spx-hero{left:auto;right:4cqi;bottom:4cqi;text-align:right}
/* consultant: paper and ink */
.spx.consult{color:#14263a}
.spx.consult::before{display:none}
.spx.consult .spx-nav b{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:2.6cqi}
.spx.consult .spx-t{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.04em}
.spx.consult .spx-k{color:#b5532a;opacity:1}
/* speaker: serif italic in the dark */
.spx.speak .spx-nav b,.spx.speak .spx-t{font-family:"Instrument Serif",Georgia,serif;font-weight:400;text-transform:none;letter-spacing:0}
.spx.speak .spx-nav b{font-size:3cqi}
.spx.speak .spx-t{line-height:.95}
/* creator: bold and bright */
.spx.creator .spx-nav b,.spx.creator .spx-t{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;text-transform:none;letter-spacing:-.03em}
.spx.creator .spx-nav b{font-size:2.6cqi}
/* on a saturated picture a difference blend turns white to its opposite colour, so the creator's header stays plain white */
.spx.creator .spx-nav{mix-blend-mode:normal;text-shadow:0 1px 8px rgba(0,0,0,.25)}

.spx-tag{position:absolute;right:2.4cqi;bottom:2.4cqi;padding:.5cqi 1.2cqi;border-radius:2px;background:rgba(10,12,18,.62);color:#f2b57e;font:700 1.3cqi/1.2 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;text-transform:uppercase}
/* Motion, only where scroll timelines exist and nobody asked for less: the shot pushes in slowly as the sample comes into
   view, and the filmmaker's letterbox opens and stays open. */
@keyframes spx-push{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes spx-open{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
 .spx-art{animation:spx-push linear both;animation-timeline:--spx;animation-range:entry 0% cover 60%}
 .spx-bars{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
 .spx-bars::before,.spx-bars::after{content:"";position:absolute;left:0;right:0;height:50%;box-sizing:border-box;background:#0a0a09;animation:spx-open linear both;animation-timeline:--spx;animation-range:entry 40% cover 40%}
 .spx-bars::before{top:0;transform-origin:50% 0}
 .spx-bars::after{bottom:0;transform-origin:50% 100%}
}}