@font-face {
    font-family: "Onest";
    font-weight: 100 900;
    font-style: normal;
    src: url("onest.94498ab21393.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Prata";
    font-weight: 400;
    font-style: normal;
    src: url("prata.1bf7f0f16e29.woff2") format("woff2");
    font-display: swap;
}

:root {
    color-scheme: dark;
    --surface: #181715;
    --ink: #f0e9df;
    --muted: #b9afa4;
    --accent: #c5a574;
    --line: rgba(240, 233, 223, 0.32);
    --line-soft: rgba(240, 233, 223, 0.1);
    --page-gutter: max(clamp(20px, 4.7vw, 72px), calc((100vw - 1536px) / 2 + 72px));
    --layout-gap: clamp(28px, 3.8vw, 58px);
    --group-space: clamp(32px, 4vw, 60px);
    --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
    --header-height: 84px;
}

* { box-sizing: border-box; }
html { background: var(--surface); scroll-behavior: smooth; scroll-padding-top: var(--header-height); scrollbar-color: var(--muted) var(--surface); }
body { min-width: 0; margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/1.55 "Onest", Arial, sans-serif; text-rendering: optimizeLegibility; }
::selection { background: var(--ink); color: var(--surface); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { border: 3px solid var(--surface); background: var(--muted); }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 100; left: 20px; top: -64px; padding: 10px 14px; background: var(--ink); color: var(--surface); text-decoration: none; }
.skip-link:focus { top: 14px; }

.site-header { position: sticky; top: 0; z-index: 50; display: flex; min-height: var(--header-height); align-items: center; gap: 24px; padding: 0 var(--page-gutter); background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; font: 400 22px/1 "Prata", Georgia, serif; text-decoration: none; white-space: nowrap; }
.brand-mark { width: 44px; height: 64px; object-fit: contain; filter: invert(1) sepia(0.12); }
.nav-disclosure { margin-left: auto; }
.nav-toggle { display: none; }
.site-nav { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 32px); }
.site-nav a { position: relative; display: inline-flex; min-height: 44px; align-items: center; font-size: 15px; text-decoration: none; white-space: nowrap; }
.site-nav a::after { content: ""; position: absolute; bottom: 5px; left: 0; right: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--ease-arrive); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
.site-nav .nav-city { gap: 10px; padding-left: 24px; border-left: 1px solid var(--line); color: var(--muted); }
.nav-city svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }

@media (max-width: 1099px) {
    :root { --header-height: 68px; }
    .nav-toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0 8px 12px; cursor: pointer; list-style: none; font-size: 15px; }
    .nav-toggle::-webkit-details-marker { display: none; }
    .nav-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; }
    .nav-close-icon, .nav-disclosure:is([data-menu-open="true"], [open]:not([data-menu-open])) .nav-menu-icon { display: none; }
    .nav-disclosure:is([data-menu-open="true"], [open]:not([data-menu-open])) .nav-close-icon { display: block; }
    .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; padding: 12px var(--page-gutter) 24px; border-bottom: 1px solid var(--line); background: var(--surface); }
    .site-nav a { min-height: 52px; font-size: 17px; }
    .site-nav a::after { content: none; }
    .site-nav a:hover { color: var(--accent); }
    .site-nav .nav-city { margin-top: 12px; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line-soft); }
}

.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--layout-gap); padding: 28px var(--page-gutter) var(--city-section-space); }
.hero-copy { grid-column: 2; grid-row: 2; min-width: 0; }
.hero h1 { margin: 0; font: 400 clamp(46px, calc(8vw - 42px), 78px)/1.16 "Prata", Georgia, serif; letter-spacing: -0.035em; }
.hero-byline { margin: 12px 0 0; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.4; }
.hero-details { grid-column: 2; grid-row: 3; min-width: 0; padding-top: 24px; }
.hero-description { max-width: 38ch; margin: 24px 0 0; color: var(--muted); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; }
.hero-city-note { display: block; margin-top: 8px; color: var(--muted); }
.hero-city-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); text-decoration-color: var(--muted); text-underline-offset: 4px; transition: color 180ms ease, text-decoration-color 180ms ease; }
.hero-city-link svg { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.hero-city-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.hero-invitation { max-width: 42ch; margin: 0 0 8px; color: var(--muted); font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.hero-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; margin-bottom: 20px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: transparent; font: 500 18px/1.4 "Onest", Arial, sans-serif; text-decoration: none; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.hero-action:hover { color: var(--ink); border-color: var(--accent); background: var(--line-soft); }
.hero-action svg, .gallery-button svg { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.hero-action svg { width: 20px; height: 20px; }
.hero-socials { display: flex; flex-wrap: wrap; gap: 4px 28px; color: var(--muted); }
.hero-socials a { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; font-size: 14px; text-decoration: none; transition: color 160ms ease; }
.hero-socials a:hover { color: var(--ink); text-decoration: underline; }
.hero-socials svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.hero-gallery { grid-column: 1; grid-row: 1 / -1; min-width: 0; }
.hero-stage { position: relative; overflow: hidden; aspect-ratio: 7 / 5; background: var(--line-soft); }
/* Overlay the mount so the existing 7:5 stage and image geometry stay intact. */
.hero .hero-stage { border-radius: 24px; }
.hero .hero-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 7px solid #383531; border-radius: inherit; pointer-events: none; }
.hero .gallery-button { border-radius: 12px; }
.print { position: absolute; inset: 0; margin: 0; }
.print:not(.is-active) { display: none; }
.print img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.print[data-print="1"] img { object-position: 50% 60%; }
.print[data-print="2"] img { object-position: 50% 62%; }
.hero .print[data-print="0"] img { object-position: 50% 10%; }
.hero .print[data-print="1"] img { scale: 1.12; transform-origin: 62% 0; }
.hero .print[data-print="2"] img { object-position: 50% 70%; }
.gallery-switcher { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 48px); gap: 14px; align-items: center; min-height: 60px; padding: 8px 0; }
.gallery-switcher:has([data-gallery-toggle][hidden]) { grid-template-columns: minmax(0, 1fr) repeat(2, 48px); }
.gallery-meta { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; height: 44px; }
.gallery-count { color: var(--accent); font-size: 13px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gallery-caption { color: var(--muted); font-size: 11px; line-height: 1.2; }
.gallery-button { display: inline-grid; width: 48px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms var(--ease-arrive); }
.gallery-button:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.gallery-button:disabled { cursor: default; opacity: 0.35; }
.gallery-button--previous svg { transform: rotate(180deg); }
.gallery-button--toggle .gallery-play { display: none; }
.gallery-button--toggle[data-paused="true"] .gallery-play { display: block; }
.gallery-button--toggle[data-paused="true"] .gallery-pause { display: none; }

.page-section { padding: 0 var(--page-gutter) var(--city-section-space); scroll-margin-top: 24px; }
.portfolio-essay { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; align-items: start; padding-top: var(--city-section-inset); border-top: 1px solid var(--line); }
.section-intro { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: var(--layout-gap); padding-bottom: 8px; }
.section-intro h2, .contact-copy h2 { margin: 0; font: 400 clamp(36px, 4.2vw, 64px)/1.2 "Prata", Georgia, serif; letter-spacing: -0.03em; text-wrap: balance; }
.section-intro p, .contact-copy p { max-width: 42ch; margin: 0 0 4px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.portfolio-piece { margin: 0; min-width: 0; }
.portfolio-piece--window-pose { --preview-zoom: 1.25; --preview-focus: 50% 70%; }
.portfolio-piece img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; background: var(--line-soft); }
.portfolio-piece--city img { object-position: 50% 65%; }
.portfolio-piece figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 14px; }
.photo-preview { position: relative; display: block; overflow: hidden; border-radius: 14px; cursor: zoom-in; }
.photo-preview::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line-soft); border-radius: inherit; pointer-events: none; }
.photo-preview img { scale: var(--preview-zoom, 1); transform-origin: var(--preview-focus, 50% 50%); transition: scale 550ms var(--ease-arrive); }
.photo-preview:focus-visible img { scale: calc(var(--preview-zoom, 1) * 1.02); }
.portfolio-piece figcaption svg, .viewer-close svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; }
.portfolio-piece figcaption svg { transition: transform 180ms var(--ease-arrive); }
.portfolio-piece:has(.photo-preview:hover) figcaption svg { transform: scale(1.2); }
.portfolio-piece:focus-within figcaption svg { transform: scale(1.2); }

.approach-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: var(--layout-gap); row-gap: 24px; align-items: start; padding-top: var(--city-section-inset); border-top: 1px solid var(--line); }
.approach-layout h2 { grid-column: 2; grid-row: 1; margin: 0; font: 400 clamp(36px, 4.2vw, 64px)/1.2 "Prata", Georgia, serif; letter-spacing: -0.03em; }
.approach-photo { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 100%; max-width: 448px; margin: 0; }
.approach-photo-frame { position: relative; aspect-ratio: 1; overflow: hidden; border: 7px solid #383531; border-radius: 24px; background: var(--line-soft); }
/* IMG_5907: square crop x=300, y=2600, width=1800; retain face, hands and camera. */
.approach-photo img { position: absolute; display: block; max-width: none; width: 173.777778%; height: auto; left: -16.666667%; top: -144.444444%; }
.approach-photo figcaption { margin-top: 12px; color: var(--muted); font-size: 14px; }
.approach-copy { grid-column: 2; grid-row: 2; display: grid; gap: 20px; }
.approach-copy p { max-width: 48ch; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.approach-copy .approach-lead { font-size: 19px; }
.approach-copy .approach-wish { padding-top: 20px; border-top: 1px solid var(--line-soft); }
.contact-section { border-bottom: 1px solid var(--line); }
.contact-copy { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: var(--layout-gap); }
.contact-copy h2 { max-width: none; font-size: clamp(40px, 5.5vw, 84px); line-height: 1.16; }
.contact-copy h2 span { display: block; }
.contact-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-gap); margin-top: 48px; border-top: 1px solid var(--line); }
.contact-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 112px; padding: 28px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: color 180ms ease, border-color 180ms ease; }
.contact-link:only-child { grid-column: 1 / -1; }
.contact-label { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.contact-channel { color: var(--muted); font-size: 15px; }
.contact-handle { font: 400 clamp(28px, 3.3vw, 50px)/1.3 "Prata", Georgia, serif; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.contact-arrow { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.2; transition: translate 180ms var(--ease-arrive); }
.contact-link:hover { color: var(--accent); }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 28px var(--page-gutter); color: var(--muted); font-size: 13px; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .footer-wordmark { gap: 8px; font-size: 18px; }
.site-footer .brand-mark { width: 29px; height: 45px; }

.photo-viewer {
    --surface: #181715;
    --ink: #f0e9df;
    --line: rgba(240, 233, 223, 0.38);
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 24px;
    border: 0;
    background: transparent;
    color: var(--ink);
    overflow: auto;
}

.photo-viewer[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 16px;
}

.photo-viewer:not([open]) {
    display: none;
}

.photo-viewer::backdrop {
    background: #181715;
}

.viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
}

.viewer-brand {
    font: 400 18px/1 "Prata", Georgia, serif;
}

.viewer-close {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, transform 120ms var(--ease-arrive);
}

.viewer-close:hover {
    color: var(--surface);
    background: var(--ink);
}

.viewer-print {
    container-type: size;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 0;
    margin: 0;
}

.viewer-print img {
    display: block;
    /* One portrait format, fitted to the available space above the caption. */
    width: min(100cqw, calc((100cqh - 44px) * 3 / 4));
    height: auto;
    aspect-ratio: 3 / 4;
    flex: none;
    object-fit: cover;
}

.viewer-print figcaption {
    font-size: 14px;
    text-align: center;
}

.viewer-feedback {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    padding: 0 16px;
    transform: translateY(-50%);
    text-align: center;
}

.viewer-feedback p {
    max-width: 32ch;
    margin: 0 auto 16px;
    font-size: 16px;
}

.photo-viewer[data-image-state="loading"] .viewer-print img,
.photo-viewer[data-image-state="error"] .viewer-print img {
    visibility: hidden;
}

.viewer-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.viewer-open {
    overflow: hidden;
}


.hero-action svg,
.gallery-button svg {
    transition: translate 180ms var(--ease-arrive);
}

@media (hover: hover) and (pointer: fine) {
    .photo-preview:hover img {
        scale: calc(var(--preview-zoom, 1) * 1.02);
    }

    .gallery-button:hover:not(:disabled) svg {
        translate: 3px 0;
    }

    .hero-action:hover svg {
        translate: 0 3px;
    }

    .gallery-button--previous:hover:not(:disabled) svg {
        translate: -3px 0;
    }

    .contact-link:hover .contact-arrow {
        translate: 3px -3px;
    }
}

.viewer-close:active,
.gallery-button:active:not(:disabled) {
    transform: scale(0.97);
}

.gallery-button {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms var(--ease-arrive);
}



/* Consent and viewer controls belong to the same dark photographic surface. */
.analytics-settings { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 12px; color: inherit; font: inherit; background: none; cursor: pointer; }
.analytics-settings svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.analytics-settings:is(:hover, [aria-expanded="true"]) { color: var(--ink); border-color: var(--line); background: var(--line-soft); }
.analytics-notice { position: fixed; z-index: 100; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); width: min(368px, calc(100% - 48px)); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #25221e; color: var(--ink); }
.analytics-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -8px -8px 8px 0; }
.analytics-notice h2 { margin: 0; font: 500 18px/1.3 "Onest", sans-serif; letter-spacing: -0.02em; }
.analytics-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 10px; padding: 0; color: var(--muted); background: transparent; cursor: pointer; }
.analytics-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.analytics-close:hover { color: var(--ink); background: var(--line-soft); }
.analytics-notice p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.analytics-notice .analytics-status { margin: 0 0 10px; font-size: 12px; color: var(--ink); }
.analytics-notice details { margin-top: 4px; font-size: 13px; color: var(--muted); }
.analytics-notice summary { display: flex; align-items: center; gap: 8px; min-height: 44px; width: fit-content; list-style: none; cursor: pointer; color: var(--ink); }
.analytics-notice summary::-webkit-details-marker { display: none; }
.analytics-notice summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.analytics-notice details[open] summary svg { transform: rotate(180deg); }
.analytics-notice details p { margin: 0 0 12px; font-size: 13px; }
.analytics-actions { display: flex; gap: 8px; margin-top: 8px; }
.analytics-actions button { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.analytics-actions button:hover { background: var(--line-soft); border-color: var(--muted); }

@media (max-width: 1100px) {
    .hero { column-gap: 32px; }
    .hero h1 { font-size: clamp(32px, calc(24px + 2vw), 46px); }
}

@media (max-width: 959px) {
    .hero .hero-stage::after, .approach-photo-frame { border-width: 5px; }
    .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 24px; padding-top: 20px; }
    .hero-copy { grid-column: 1; grid-row: 1; }
    .hero-byline { margin-top: 8px; font-size: 22px; line-height: 1.35; }
    .hero-description { max-width: none; margin-top: 16px; }
    .hero-gallery { grid-column: 1; grid-row: 2; }
    .hero-details { grid-column: 1; grid-row: 3; padding-top: 0; }
    .hero-invitation { max-width: 48ch; }
    .section-intro, .contact-copy { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 799px) {
    :root { --header-height: 64px; }
    .hero .hero-stage, .approach-photo-frame { border-radius: 14px; }
    .hero-description { font-size: 16px; line-height: 1.5; }
    .approach-layout { grid-template-columns: 1fr; gap: 24px; }
    .approach-layout h2 { grid-column: 1; grid-row: 1; }
    .approach-photo { grid-column: 1; grid-row: 2; justify-self: center; }
    .approach-copy { grid-column: 1; grid-row: 3; gap: 16px; }
    .approach-copy p { max-width: 55ch; font-size: 16px; line-height: 1.5; }
    .approach-copy .approach-lead { font-size: 17px; }
    .approach-copy .approach-wish { padding-top: 16px; }
    .wordmark { font-size: 18px; gap: 8px; }
    .brand-mark { width: 32px; height: 52px; }
    .hero-invitation { font-size: 16px; line-height: 1.5; }
    .gallery-switcher { grid-template-columns: minmax(0, 1fr) repeat(3, 44px); gap: 12px; }
    .gallery-switcher:has([data-gallery-toggle][hidden]) { grid-template-columns: minmax(0, 1fr) repeat(2, 44px); }
    .gallery-switcher .gallery-button { width: 44px; }
    .portfolio-essay { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
    .section-intro { gap: 20px; padding: 0; }
    .section-intro h2 { max-width: 18ch; }
    .section-intro h2, .approach-layout h2, .contact-copy h2 { font-size: var(--city-heading-size); }
    .contact-links { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
    .contact-link { min-height: 96px; padding: 24px 0; }
    .contact-handle { font-size: clamp(30px, 5.8vw, 44px); }
    .section-intro p, .contact-copy p { max-width: 55ch; font-size: 16px; line-height: 1.5; }
}

@media (max-width: 520px) {
    :root { --header-height: 52px; }
    .site-header { gap: 12px; padding-top: 3px; padding-bottom: 3px; }
    .wordmark { font-size: 16px; }
    .brand-mark { width: 29px; height: 45px; }
    .hero { gap: 12px; padding-top: 12px; }
    .hero h1 { font-size: clamp(28px, 7vw, 32px); line-height: 1.12; }
    .hero-byline { font-size: 20px; }
    .hero-description { margin-top: 12px; }
    .hero-city-note { margin-top: 6px; }
    .hero-action { min-height: 48px; margin-bottom: 12px; padding: 10px 16px; font-size: 16px; }
    .gallery-switcher { min-height: 52px; gap: 8px; padding-block: 4px; }
    .gallery-button { width: 44px; }
    .hero-socials { gap: 4px 20px; }
    .portfolio-essay { gap: 24px 16px; }
    .section-intro { gap: 16px; }
    .approach-layout { gap: 20px; }
    .approach-copy .approach-lead { font-size: 16px; }
    .portfolio-piece figcaption { gap: 6px; font-size: 13px; }
    .contact-label { gap: 10px; }
    .contact-channel { font-size: 13px; }
    .contact-handle { font-size: clamp(28px, 7.4vw, 38px); }
    .contact-arrow { width: 24px; height: 24px; }
    .site-footer { font-size: 12px; }
    .photo-viewer { padding: 16px; }
    .analytics-notice { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: min(368px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 18px; }
    .analytics-actions { gap: 8px; }
}

@media (max-width: 359px) {
    .gallery-caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .print-arrived, .rule-arrived::before { animation: none; }
    .photo-preview img { transition: none; }
    .photo-preview:hover img, .photo-preview:focus-visible img { scale: var(--preview-zoom, 1); }
    .hero-action, .gallery-button, .viewer-close { transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; }
    .hero-action svg, .gallery-button svg, .contact-arrow, .portfolio-piece figcaption svg, .site-nav a::after { transition: none; }
    .hero-action:active, .viewer-close:active, .gallery-button:active:not(:disabled), .portfolio-piece:focus-within figcaption svg { transform: none; }
    .portfolio-piece:has(.photo-preview:hover) figcaption svg { transform: none; }
    .hero-action:hover svg, .gallery-button:hover:not(:disabled) svg, .contact-link:hover .contact-arrow { translate: none; }
}