/* Local detail layout. Palette, spacing, controls and easing reuse PotoDesign tokens.
   The measured header offset is local geometry, not a new global design token. */
@font-face { font-family:'Beam Display'; src:url('./assets/cabinet-grotesk-variable-v28.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
.beam-case {
 --case-bg:var(--poto-paper); --case-fg:var(--poto-ink); --case-secondary:var(--poto-muted); --case-rule:var(--poto-rule);
 /* Local material values: a strong reading surface with a faint view of the real portfolio. */
 /* User-requested 12px row/edge gap and 24px image corners derive from existing spacing. */
 --case-glass-opacity:84%; --case-section-gap:calc(var(--poto-space-lg) / 2); --case-image-radius:var(--poto-space-lg);
 position:fixed; z-index:12; inset:calc(var(--case-header-height,calc(var(--poto-control-height) + var(--poto-space-xl))) + var(--case-section-gap)) 0 0;
 overflow:auto; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:var(--case-rule) var(--case-bg);
 background:var(--case-bg); color:var(--case-fg); color-scheme:light;
 background:color-mix(in srgb,var(--case-bg) var(--case-glass-opacity),transparent);
 backdrop-filter:blur(var(--poto-glass-blur)); -webkit-backdrop-filter:blur(var(--poto-glass-blur));
 border-radius:var(--case-image-radius) var(--case-image-radius) 0 0; box-shadow:var(--poto-shadow),inset 0 1px 0 var(--poto-glass-line);
 padding:var(--poto-space-xl) var(--poto-space-xxl);
}
html[data-landscape-mode='night'] .beam-case { --case-bg:var(--poto-ink); --case-fg:var(--poto-paper); --case-secondary:var(--poto-glass-muted); --case-rule:var(--poto-muted); --case-glass-opacity:88%; color-scheme:dark; }
body.is-case-study { overflow-y:hidden!important; }
.is-case-study .poto-header { z-index:20; background:var(--poto-paper); opacity:1!important; transform:none!important; }
.is-case-study .poto-header::before { background:var(--poto-paper)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
html[data-landscape-mode='night'] .is-case-study .poto-header,
html[data-landscape-mode='night'] .is-case-study .poto-header::before { background:var(--poto-ink)!important; }
.is-case-study .preview-controls { display:none; }
.beam-case[hidden] { display:none!important; }
.beam-case a { color:inherit; text-underline-offset:var(--poto-space-xs); }
.beam-case ::selection { color:var(--case-bg); background:var(--case-fg); }
.beam-case :focus-visible { outline:2px solid var(--case-fg); outline-offset:var(--poto-space-xs); }
.beam-case h1:focus { outline:none; }
.beam-case h1,.beam-case h2,.beam-case h3 { font-family:'Beam Display',Arial,sans-serif; font-weight:500; letter-spacing:-.025em; text-wrap:wrap; }
.beam-case h1 { font-size:clamp(3rem,4.4vw,5rem); line-height:1.05; margin:0 0 var(--poto-space-lg); overflow-wrap:anywhere; }
.beam-case h2 { font-size:clamp(1.5rem,2.5vw,2rem); line-height:1.15; margin:0 0 var(--poto-space-lg); }
.beam-case h3 { font-size:1.125rem; line-height:1.3; margin:0 0 var(--poto-space-sm); }
.beam-case p { margin:0; font-size:1rem; line-height:1.6; color:var(--case-secondary); text-wrap:pretty; }
.beam-case .case-topline { display:flex; align-items:center; gap:var(--poto-space-md); margin-bottom:var(--case-section-gap); font-size:.875rem; }
.beam-case [data-case-back] { display:inline-flex; align-items:center; gap:var(--poto-space-sm); min-height:var(--poto-control-height); text-decoration:none; }
.beam-case [data-case-back]:is(:hover,:focus-visible) { text-decoration:underline; }
.beam-case .case-back-icon { width:var(--poto-space-lg); height:var(--poto-space-lg); flex:none; }
.beam-case .case-back-shaft { transform-box:fill-box; transform-origin:right center; }
/* Lucide Animated arrow-left reference: one short head/shaft pulse on interaction. */
.beam-case [data-case-back]:is(:hover,:focus-visible) .case-back-head { animation:case-back-head calc(var(--poto-fast) * 2) var(--poto-ease); }
.beam-case [data-case-back]:is(:hover,:focus-visible) .case-back-shaft { animation:case-back-shaft calc(var(--poto-fast) * 2) var(--poto-ease); }
@keyframes case-back-head { 50% { transform:translateX(calc(var(--poto-space-xs) * .75)); } }
@keyframes case-back-shaft { 50% { transform:scaleX(.65); } }
.beam-case .case-intro,.beam-case .case-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr); column-gap:var(--poto-space-xl); align-items:start; }
.beam-case .case-intro { margin-bottom:var(--case-section-gap); }
.beam-case .case-intro-copy { grid-column:1; }
.beam-case .case-summary { font-size:clamp(1.125rem,1.6vw,1.5rem); line-height:1.35; color:var(--case-fg); margin-bottom:var(--poto-space-md); max-width:24ch; }
.beam-case .case-themes { display:grid; gap:var(--poto-space-sm); margin-top:var(--poto-space-xl); font-size:.875rem; }
.beam-case .case-themes a { width:fit-content; min-height:var(--poto-space-lg); text-decoration:none; color:var(--case-secondary); }
.beam-case .case-themes a:is(:hover,:focus-visible) { color:var(--case-fg); text-decoration:underline; }
.beam-case .case-hero-figure,.beam-case .case-visual { grid-column:2; min-width:0; }
.beam-case .case-insight { grid-column:3; }
.beam-case .case-row:last-of-type { margin-bottom:0; }
.beam-case .case-row { margin-bottom:var(--case-section-gap); scroll-margin-top:calc(var(--poto-control-height) + var(--case-section-gap) * 2); }
.beam-case .case-aside { position:static; min-width:0; }
.beam-case .case-aside p { font-size:.9375rem; max-width:30ch; }
.beam-case figure { margin:0; min-width:0; }
.beam-case .case-image { display:block; width:100%; border:0; padding:0; background:transparent; color:inherit; cursor:zoom-in; }
.beam-case img { display:block; width:100%; height:auto; border-radius:var(--case-image-radius); }
.beam-case dialog { width:calc(100vw - var(--poto-space-xl) * 2); max-width:calc(var(--poto-space-xxl) * 32); max-height:calc(100dvh - var(--poto-space-xl) * 2); padding:var(--poto-space-lg); border:0; background:var(--case-bg); color:var(--case-fg); overflow:auto; }
.beam-case dialog::backdrop { background:rgb(0 0 0 / .8); }
.beam-case .case-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:var(--poto-space-lg); margin-bottom:var(--poto-space-lg); }
.beam-case .case-dialog-head p { font-size:.875rem; }
.beam-case [data-case-close] { min-height:var(--poto-control-height); padding:var(--poto-space-sm) var(--poto-space-md); border:1px solid currentColor; border-radius:var(--poto-control-radius); font:inherit; font-size:.875rem; color:inherit; background:transparent; white-space:nowrap; cursor:pointer; }
.beam-case [data-case-close]:is(:hover,:focus-visible) { background:var(--case-fg); color:var(--case-bg); }
.beam-case .case-related { margin-top:var(--case-section-gap); }
.beam-case .case-related h2 { margin-bottom:var(--poto-space-xl); }
.beam-case .case-related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--poto-space-xl); }
.beam-case .case-related-project { min-width:0; text-decoration:none; }
/* User now prefers a uniform preview ratio, with a static crop to fill each card. */
.beam-case .case-related-art { aspect-ratio:16 / 10; overflow:hidden; border-radius:var(--case-image-radius); margin-bottom:var(--poto-space-md); }
.beam-case .case-related-art img { width:100%; height:100%; object-fit:cover; object-position:center; }
.beam-case .case-related-project p { font-size:.875rem; }
.beam-case .case-related-project:is(:hover,:focus-visible) h3 { text-decoration:underline; text-underline-offset:var(--poto-space-xs); }
@media(max-width:900px) {
 .beam-case { padding-inline:var(--poto-space-xl); }
 .beam-case h1 { font-size:clamp(2rem,4.4vw,3rem); }
 .beam-case .case-intro,.beam-case .case-row { column-gap:var(--poto-space-lg); }
}
/* Compact the longest single-word names in the narrow three-column layout;
   preserve the accepted display scale on desktop and ordinary phone widths. */
@media(min-width:701px) and (max-width:1100px) {
 .beam-case h1.case-title-single { font-size:clamp(1.5rem,3vw,2rem); }
}
@media(max-width:700px) {
 .beam-case { padding:var(--poto-space-lg); }
 .beam-case .case-intro,.beam-case .case-row { grid-template-columns:1fr; gap:var(--poto-space-lg); margin-bottom:var(--case-section-gap); }
 .beam-case .case-hero-figure,.beam-case .case-visual,.beam-case .case-insight { grid-column:1; }
 .beam-case h1 { font-size:clamp(3rem,10vw,5rem); }
 .beam-case .case-summary { max-width:none; font-size:1.5rem; }
 .beam-case .case-aside { position:static; max-width:50ch; }
 .beam-case .case-related-grid { grid-template-columns:1fr; gap:var(--poto-space-xxl); }
 .beam-case dialog { width:calc(100vw - var(--poto-space-md) * 2); max-height:calc(100dvh - var(--poto-space-md) * 2); padding:var(--poto-space-md); }
 .is-case-study .poto-header { position:fixed; inset:0 0 auto; display:flex; justify-content:space-between; align-items:center; padding:var(--poto-space-md) var(--poto-space-lg); color:var(--poto-ink); background:var(--poto-paper); }
 .is-case-study .header-primary { display:contents; }
 .is-case-study .poto-header .main-nav { flex-direction:row; gap:var(--poto-space-md); }
 .is-case-study .poto-header .header-meta { display:none; }
 .is-case-study .wordmark-logo { width:calc(var(--poto-space-xl) * 3.5); height:auto; filter:brightness(0); }
 html[data-landscape-mode='night'] .is-case-study .poto-header { background:var(--poto-ink); color:var(--poto-paper); }
 html[data-landscape-mode='night'] .is-case-study .wordmark-logo { filter:none; }
}
@media(max-width:360px) {
 .beam-case h1.case-title-single { font-size:2.5rem; }
}
@media(prefers-reduced-motion:reduce) {
 .beam-case { scroll-behavior:auto; }
 .beam-case [data-case-back] use { animation:none!important; }
}
.beam-case[data-motion='reduce'] [data-case-back] use { animation:none!important; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .beam-case { background:var(--case-bg); }
}
@media(prefers-reduced-transparency:reduce) {
 .beam-case { background:var(--case-bg); backdrop-filter:none; -webkit-backdrop-filter:none; }
}