/* Hallmark · component refinement · theme: zzz light exhibition · genre: editorial · v2.0.0 */
/* Hallmark · critique: six deliberate spreads of three photographs, with native originals contained in equal frames; one quiet entry opens the detailed portfolio. */
.detailed-portfolio{display:inline-flex;align-items:center;justify-content:center;min-height:44px;width:fit-content;margin-top:var(--space-lg);padding:var(--space-xs) var(--space-lg);border:1px solid var(--glass-edge);border-radius:999px;color:var(--ink);font-size:var(--type-ui);text-decoration:none}
.detailed-portfolio:focus-visible{outline:2px solid var(--color-focus);outline-offset:5px}
.gallery-pagination{display:flex;flex-wrap:nowrap;gap:var(--space-xs)}
.live-photo-page{grid-template-columns:repeat(3,minmax(0,min(calc(var(--live-image-height) * var(--page-ratio)),var(--live-column-width))))}
@media(max-width:1000px){.live-photo-page{--live-column-width:calc((100% - 48px)/3)}}
@media(max-width:700px){
 .live-photo-grid.is-enhanced{gap:var(--space-md)}
 .live-photo-page{--live-column-width:calc((100% - 24px)/3);height:260px;gap:var(--space-sm);grid-template-columns:repeat(3,minmax(0,var(--live-column-width)));align-content:center}
 .live-photo-page .live-photo-card{align-self:start}
 .live-photo-page .live-photo-card figcaption{display:block;text-align:center;font-size:var(--type-caption)}
 .live-photo-page .live-photo-card figcaption span{display:block}
 .live-photo-page .live-photo-card figcaption span:last-child{text-align:center}
 .gallery-controls{gap:var(--space-xs)}
 .gallery-pagination{gap:var(--space-2xs)}
 .detailed-portfolio{margin-top:var(--space-md)}
}

/* The detailed portfolio anchors a compact editorial column; the practice index closes the space beneath it. */
.intro-description{max-width:37ch;padding-top:var(--space-lg)}
.intro-description .intro-description-lead{font-size:var(--type-body);line-height:1.95;max-width:35ch}
.intro-description .detailed-portfolio{margin-top:var(--space-lg);margin-bottom:var(--space-lg);min-height:46px;padding-inline:var(--space-lg);white-space:nowrap}
.intro-practice{margin:0;padding:0;border-top:1px solid var(--line)}
.intro-practice>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--space-md);align-items:baseline;padding-block:var(--space-sm);border-bottom:1px solid var(--line)}
.intro-practice dt{margin:0;color:var(--ink);font-size:var(--type-ui);line-height:1.9;font-weight:400}
.intro-practice dd{margin:0;color:var(--muted);font-size:var(--type-caption);line-height:1.9;text-align:right}
@media(max-width:700px){
 .intro-description{max-width:none}
 .intro-description .intro-description-lead{max-width:none;font-size:var(--type-ui)}
 .intro-description .detailed-portfolio{margin-block:var(--space-md) var(--space-lg)}
 .intro-practice>div{grid-template-columns:64px minmax(0,1fr);gap:var(--space-sm)}
}

/* Requested Hallmark-inspired micro zoom belongs only to the live photography section. */
:root{--live-hover-scale:1.025;--live-hover-duration:720ms}
.live-photo-section .photo-open{transform:scale(1);transform-origin:center;transition:transform var(--live-hover-duration) var(--interaction-ease)}
.live-photo-section .live-photo-card:first-child .photo-open{transform-origin:left center}
.live-photo-section .live-photo-card:last-child .photo-open{transform-origin:right center}
@media(hover:hover) and (pointer:fine){
 .live-photo-section .photo-open:hover{transform:scale(var(--live-hover-scale));z-index:var(--z-base)}
}
.live-photo-section .photo-open:focus-visible{transform:scale(var(--live-hover-scale))}
@media(prefers-reduced-motion:reduce){
 .live-photo-section .photo-open{transition:none}
 .live-photo-section .photo-open:hover,.live-photo-section .photo-open:focus-visible{transform:none}
}

/* One descriptive caption per photograph, aligned to the image edge. */
.live-photo-page .live-photo-card figcaption{display:block}
.live-photo-page .live-photo-card figcaption .live-photo-caption{text-align:left}
@media(max-width:700px){.live-photo-page .live-photo-card figcaption .live-photo-caption{text-align:center}}

/* A small desktop offset balances the right text column against the navigation beneath it. */
@media(min-width:701px){.intro-description{transform:translateY(var(--space-md))}}

/* Requested final spacing: a lower intro column, a clearer live-photo response and captions below the reflection. */
:root{--intro-copy-offset:28px;--live-hover-scale:1.05}
@media(min-width:701px){.intro-description{transform:translateY(var(--intro-copy-offset))}}
.photo-wheel-bar{margin-top:clamp(80px,9vw,160px)}
.photo-gallery-heading,.live-photo-heading{padding-bottom:var(--space-lg);border-bottom:1px solid var(--line)}

/* Match the hero's upper and lower rule clearances; keep the photo title close to the actual image edge. */
:root{--intro-copy-offset:calc((var(--type-ui) * 1.65 + var(--space-xs) * 2 + var(--space-md) + var(--space-lg) + 1px) / 2);--photo-caption-gap:24px}
.photo-wheel-bar{margin-top:var(--wheel-caption-offset,var(--space-lg))}
.photo-gallery-heading p{max-width:none;white-space:nowrap}

/* Exhibition paper lightens vertically into the biography, without a left-side color bloom. */
.live-photo-section{background:linear-gradient(to bottom,var(--warm-paper),var(--paper))}

/* Self-contained navigation styling is shipped with this release. */
.section-rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:30;font-size:12px;color:var(--muted)}
.rail-links{display:flex;flex-direction:column;gap:var(--space-2xs);padding:var(--space-xs);border:1px solid var(--glass-edge);border-radius:18px;background:var(--glass);backdrop-filter:blur(18px);box-shadow:0 8px 28px var(--shadow)}
.rail-links a{position:relative;display:flex;align-items:center;min-height:36px;padding:var(--space-xs) var(--space-sm);border-radius:10px;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color var(--dur-short) var(--interaction-ease),background-color var(--dur-short) var(--interaction-ease)}
.rail-links a:hover,.rail-links a[aria-current]{color:var(--ink);background:var(--glass)}
.rail-links a[aria-current]::before{content:'';position:absolute;left:var(--space-2xs);height:12px;width:1px;background:var(--muted)}
.rail-toggle{display:none;border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass);color:var(--ink);padding:var(--space-sm) var(--space-md);min-height:44px;font:inherit;backdrop-filter:blur(18px)}
.section-rail a:focus-visible,.section-rail button:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.has-photo-dialog .section-rail{visibility:hidden}
@media(max-width:1439px){.section-rail{top:auto;bottom:var(--space-lg);right:var(--space-md);transform:none}.rail-toggle:not([hidden]){display:block}.rail-links{display:none;position:absolute;bottom:calc(100% + var(--space-sm));right:0}.rail-toggle[aria-expanded=true]+.rail-links{display:flex}}
@media(prefers-reduced-motion:reduce){.rail-links a{transition:none}}

/* Keep the directory compact until invited by a pointer or keyboard. */
@media(min-width:1440px){
 .rail-toggle:not([hidden]){display:block}
 .rail-links{position:absolute;right:0;top:calc(100% + var(--space-sm));transition:opacity var(--dur-short) var(--interaction-ease),transform var(--dur-short) var(--interaction-ease),visibility var(--dur-short)}
 .section-rail.is-interactive .rail-links{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px)}
 .rail-links::before{content:'';position:absolute;inset:calc(-1 * var(--space-sm)) 0 auto;height:var(--space-sm)}
 .section-rail.is-interactive .rail-toggle[aria-expanded=true]+.rail-links{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
 .rail-toggle:focus-visible+.rail-links{transition:none}
}
@media(prefers-reduced-motion:reduce){.rail-links{transition:none}}

/* The navigation rests inside the right edge; only a fine, unlabelled grip remains. */
.section-rail{right:0;top:50%;bottom:auto;width:24px;height:264px;max-height:80svh;transform:translateY(-50%);font-size:var(--type-caption)}
.section-rail .rail-toggle:not([hidden]){display:block;width:100%;height:100%;padding:0;min-height:44px;border:0;border-radius:0;background:var(--transparent);box-shadow:none;backdrop-filter:none;cursor:pointer;position:relative}
.section-rail .rail-toggle::after{content:'';position:absolute;right:0;top:50%;width:3px;height:44px;border-radius:999px 0 0 999px;background:var(--muted);opacity:.35;transform:translateY(-50%);transition:opacity var(--dur-short) var(--interaction-ease)}
.section-rail .rail-toggle[aria-expanded=true]::after{opacity:0}
.section-rail .rail-toggle:focus-visible{outline-offset:-4px}
.section-rail .rail-toggle:focus-visible::after{opacity:1}
.section-rail .rail-links{display:flex;position:absolute;right:24px;top:50%;bottom:auto;width:144px;box-sizing:border-box;transform:translateY(-50%);transition:transform var(--dur-long) var(--interaction-ease),opacity var(--dur-short) var(--interaction-ease)}
.section-rail .rail-links::before{content:none}
.section-rail .rail-links a{min-height:40px;box-sizing:border-box}
.section-rail.is-interactive .rail-links{opacity:0;visibility:hidden;pointer-events:none;transform:translate(100%,-50%)}
.section-rail.is-interactive .rail-toggle[aria-expanded=true]+.rail-links{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-50%)}
.section-rail .rail-toggle:focus-visible+.rail-links{transition:none}
@media(prefers-reduced-motion:reduce){.section-rail .rail-links,.section-rail .rail-toggle::after{transition:none}}

/* A glass edge tab makes the hidden navigation discoverable without a directory label. */
.section-rail{width:40px}
.section-rail .rail-toggle:not([hidden]){position:absolute;top:50%;right:0;height:88px;transform:translateY(-50%);color:var(--ink)}
.section-rail .rail-toggle::before{content:'';position:absolute;inset:0 0 0 4px;border:1px solid var(--glass-edge);border-right:0;border-radius:18px 0 0 18px;background:var(--glass);box-shadow:-4px 2px 20px var(--shadow-strong),inset 1px 0 0 var(--glass-edge);backdrop-filter:blur(18px);transition:opacity var(--dur-short) var(--interaction-ease)}
.section-rail .rail-toggle::after{content:none}
.section-rail .rail-toggle svg{position:relative;display:block;width:20px;height:34px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8;transform:translateX(2px);transition:transform var(--dur-short) var(--interaction-ease),opacity var(--dur-short) var(--interaction-ease)}
.section-rail .rail-toggle[aria-expanded=true] svg{opacity:1;transform:translateX(0)}
.section-rail .rail-links{right:40px}
.section-rail .rail-toggle:focus-visible{outline-offset:-3px;border-radius:18px 0 0 18px}
@media(prefers-reduced-motion:reduce){.section-rail .rail-toggle::before,.section-rail .rail-toggle svg{transition:none}}

/* The edge handle folds away as one complete navigation panel slides into its place. */
.section-rail .rail-toggle:not([hidden]){opacity:1;transition:transform var(--dur-long) var(--interaction-ease),opacity var(--dur-short) var(--interaction-ease)}
.section-rail .rail-toggle[aria-expanded=true]:not([hidden]){opacity:0;pointer-events:none;transform:translate(100%,-50%)}
.section-rail .rail-links{right:0;width:168px;border-radius:18px 0 0 18px;border-right:0}
@media(prefers-reduced-motion:reduce){.section-rail .rail-toggle:not([hidden]){transition:none}}

/* Keep experience controls anchored while the content above them changes. */
html.is-changing-experience{overflow-anchor:none;scroll-behavior:auto}

/* A smaller edge tab keeps the navigation legible without dominating the gutter. */
.section-rail{width:32px}
.section-rail .rail-toggle:not([hidden]){height:64px}
.section-rail .rail-toggle::before{border-radius:14px 0 0 14px;box-shadow:-2px 2px 12px var(--shadow),inset 1px 0 0 var(--glass-edge)}
.section-rail .rail-toggle svg{width:16px;height:28px}
.section-rail .rail-toggle:focus-visible{border-radius:14px 0 0 14px}

/* Keep the edge entry long and slender, with an inward arrow rather than a broad tab. */
.section-rail{width:24px}
.section-rail .rail-toggle:not([hidden]){height:88px}
.section-rail .rail-toggle::before{border-radius:12px 0 0 12px}
.section-rail .rail-toggle svg{width:12px;height:30px}
.section-rail .rail-toggle:focus-visible{border-radius:12px 0 0 12px}

/* Landscape spreads contain three photographs; portrait spreads contain four. */
.live-photo-page{--live-column-width:calc((100% - (var(--page-columns,3) - 1) * var(--space-lg))/var(--page-columns,3));grid-template-columns:repeat(var(--page-count,3),minmax(0,min(calc(var(--live-image-height) * var(--page-ratio)),var(--live-column-width))))}
@media(max-width:700px){.live-photo-page{--live-column-width:calc((100% - (var(--page-columns,3) - 1) * var(--space-sm))/var(--page-columns,3));grid-template-columns:repeat(var(--page-count,3),minmax(0,var(--live-column-width)))}}