/* User review, 26 October: flat endings, readable type and coordinated motion. */
.footer::before,.project-navigation::before { content:none; display:none; }
.footer { padding-top:76px; }
.footer .wrap { translate:none; }
#project-scroll .project-navigation { padding-top:90px; }

/* Give ascenders, descenders and wrapped titles room outside the animation. */
#project-title { overflow:visible; line-height:1.2; padding-block:.06em .14em; margin-bottom:48px; overflow-wrap:break-word; }
#project-title:focus { outline:none; }
#project-title .project-title-line { transform:none; animation:none; }
#project-title.title-reveal .project-title-line { animation:project-heading-arrive .65s var(--editorial-ease) both; }
@keyframes project-heading-arrive { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
#project-scroll :is(h2,h3,h4,figcaption) { overflow:visible; }
#project-scroll .id-display-specimen>p { line-height:1.05; overflow-wrap:break-word; }
#project-scroll .project-note { max-width:760px; margin-top:32px; }
#project-scroll .project-note .project-note-label { font:400 12px/1.5 'LM Work Sans',Arial,sans-serif; letter-spacing:0; margin:0 0 10px; padding:0; color:#5f655a; }
#project-scroll .project-note p { max-width:760px; margin:0; font-size:14px; line-height:1.7; }
#project-scroll .project-intro { padding-bottom:64px; }
.project-lead { padding-top:0; margin-bottom:80px; }
.project-lead .lead-artwork { clip-path:none; }
#project-scroll .project-group { margin-bottom:84px; }

/* No negative artwork parallax: captions and headings keep their spacing. */
.scroll-choreography :is(.gallery .work-frame,.id-detail,.id-character) { translate:none; }
.scroll-choreography :is(.project-lead,.project-group,.ad-pair,.id-section) {
 translate:0 var(--section-reveal-y,0px);
 opacity:var(--section-reveal-opacity,1);
}
#project-scroll .project-group:has(.ad-balanced) { translate:none; opacity:1; }

/* Five paired compositions; column ratios make both artworks equally tall. */
#project-scroll .gallery-advertising.ad-balanced { display:grid; grid-template-columns:minmax(0,1fr); gap:42px; }
.ad-pair { display:grid; grid-template-columns:var(--ad-columns,1fr 1fr); gap:26px; align-items:start; }
#project-scroll .ad-pair .work-frame { grid-column:auto; grid-row:auto; width:100%; max-width:none; margin:0; align-self:start; }
#project-scroll .ad-pair .media-slot { border:0; background:transparent; }
#project-scroll .ad-pair figcaption { padding:13px 0; line-height:1.55; }

/* The actual next artwork is larger; the title no longer carries an arrow. */
.next-project { padding-bottom:44px; opacity:var(--ending-opacity,1); }
.next-project-title { display:block; overflow:visible; line-height:1.17; padding-block:.08em .14em; margin:26px 0 36px; max-width:100%; text-wrap:balance; }
.next-title-text { display:block; translate:none; }
.next-project-preview { display:flex; align-items:center; justify-content:center; width:min(760px,100%); height:auto; padding:0; background:transparent!important; translate:none; overflow:visible; }
.next-project-preview img { display:block; width:auto; height:auto; max-width:100%; max-height:480px; object-fit:contain; }
.next-project:hover .next-project-preview { transform:none; }
.project-navigation .all-work-button { margin-top:36px; }

/* Laptop proportions measured against the reference; keep the approved photo. */
.with-photo-hero .nav { width:94%; max-width:none; height:clamp(80px,7.2vw,120px); }
.with-photo-hero .nav .signature,.with-photo-hero .nav nav { font-size:clamp(14px,1.25vw,20px); }
.photo-hero .hero-location { top:50%; transform:translateY(-50%); width:clamp(220px,17vw,340px); min-height:clamp(96px,6.8vw,136px); justify-content:space-between; gap:20px; padding:14px 14px 14px 3vw; font-size:clamp(14px,1.15vw,20px); line-height:1.4; }
.photo-hero .location-globe { width:clamp(62px,4.7vw,90px); height:clamp(62px,4.7vw,90px); flex-shrink:0; }
.photo-hero .globe-axis { width:46px; height:46px; }
.photo-hero .hero-introduction { top:46%; left:71%; right:auto; width:25%; }
.photo-hero .hero-introduction::before { content:'↘'; position:absolute; top:-70px; left:0; color:#fffdf5; font:400 28px/1 Arial,sans-serif; }
.photo-hero .hero-introduction .hero-role { font-size:clamp(28px,2.3vw,48px); line-height:1.35; margin-bottom:16px; }
.photo-hero .hero-introduction>.hero-description { max-width:none; font-size:13px; line-height:1.55; text-align:left; }
.hero-description span { display:block; white-space:nowrap; }

/* Reference-sized label, one thin rule, and a stable lime contact surface. */
.footer { min-height:0; display:block; padding-top:0; overflow:clip; }
.footer-content { display:flex; flex-direction:column; padding-top:clamp(80px,11vh,144px); translate:0 var(--footer-drift,0px); }
.footer .wrap { width:68%; max-width:1440px; }
.contact-rail { height:clamp(148px,12vw,248px); padding-right:9%; margin:clamp(24px,3vw,60px) 0 clamp(24px,2.5vw,48px); }
.contact-rail::before { background:#ffffff33; height:1px; }
#contact-cta { width:clamp(148px,12vw,248px); height:clamp(148px,12vw,248px); position:relative; isolation:isolate; overflow:visible; background:var(--lime); color:var(--bg); border:0; }
#contact-cta::before { content:none; }
#contact-cta:is(:hover,:focus-visible) { background:var(--lime); color:var(--bg); }
#contact-cta>.magnet-label { display:block; font:400 16px/1.6 'LM Work Sans',Arial,sans-serif; letter-spacing:-.025em; white-space:nowrap; }
.contact-arrow { top:-74px; font-size:24px; }
.footer h2 { font-size:clamp(58px,6.125vw,128px); line-height:1.065; margin:32px 0 0; padding-right:0; }
.contact-details { gap:10px; align-items:center; }
.footer :is(.contact-email,.contact-phone) { display:inline-flex; align-items:center; justify-content:center; min-height:68px; max-width:100%; padding:20px 36px; border:1px solid #ffffff33; border-radius:999px; color:var(--ink); font:400 16px/1.4 'LM Work Sans',Arial,sans-serif; letter-spacing:-.025em; }
.footer .contact-phone { white-space:nowrap; }
.footer :is(.contact-email,.contact-phone):is(:hover,:focus-visible) { color:var(--bg); border-color:var(--lime); }
.footer-bottom { width:94%; max-width:none; margin:0 auto; padding:clamp(48px,5vw,88px) 0 28px; align-items:flex-end; justify-content:flex-start; gap:56px; }

/* The laptop menu occupies roughly the right 38% of the reference viewport. */
.menu-sheet { width:clamp(420px,38vw,760px); padding:clamp(96px,15svh,180px) 7.5vw 7svh; }
.menu-sheet h2 { margin-bottom:32px; padding-bottom:28px; }
.menu-links { gap:4px; }
.menu-links a { padding-block:6px; font-size:clamp(40px,4vw,80px); line-height:1.2; }
.menu-footnote { padding-top:28px; }
.menu-foot-label { margin-bottom:10px; }
.menu-launch,.menu-dismiss { width:clamp(68px,5.5vw,112px); height:clamp(68px,5.5vw,112px); right:2vw; top:2vw; }

/* Connected social profiles in the footer and navigation. */
#footer-socials { margin-left:auto; }
.social-group { text-align:left; }
.social-heading { margin:0 0 10px; color:var(--muted); font:400 9px/1.4 'LM Work Sans',Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.social-links { display:flex; flex-wrap:wrap; column-gap:26px; row-gap:4px; align-items:center; }
.social-links>a,.social-links>span { position:relative; display:inline-flex; align-items:center; min-height:44px; color:var(--ink); font:400 13.6px/1.4 'LM Work Sans',Arial,sans-serif; letter-spacing:0; }
.social-links>a::after { content:''; position:absolute; inset:auto 0 7px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .3s ease; }
.social-links>a:is(:hover,:focus-visible)::after { transform:scaleX(1); transform-origin:left; }
.menu-footnote .social-group { margin-top:22px; }
.menu-footnote .social-heading { color:#b7bcad; }
.menu-footnote .social-links { gap:4px 28px; }

@media(max-width:1000px) {
 .footer .wrap { width:calc(100% - 100px); }
 .photo-hero .hero-introduction { top:42%; left:auto; right:24px; width:230px; }
 .photo-hero .hero-introduction>.hero-description { font-size:11px; }
 .photo-hero .hero-location { gap:22px; padding:16px 16px 16px 28px; font-size:14px; }
 .photo-hero .location-globe { width:62px; height:62px; }
 .photo-hero .globe-axis { width:40px; height:40px; }
 .menu-sheet { padding-inline:64px; }
}
@media(max-width:700px) {
 html { scrollbar-gutter:auto; }
 .with-photo-hero :is(.about,.selected) { width:calc(100% - 40px); }
 #project-title { line-height:1.2; margin-bottom:32px; }
 #project-scroll .project-intro { padding-bottom:44px; }
 #project-scroll .project-note { margin-top:24px; }
 #project-scroll .project-note p { font-size:14px; }
 .project-metadata dt { font-size:10px; }
 .project-metadata dd { font-size:14px; overflow-wrap:anywhere; }
 #project-window .viewer-bar #close { flex-shrink:0; min-height:48px; font-size:14px; }
 #project-window .viewer-bar #viewer-label { font-size:10px; overflow-wrap:anywhere; }
 #project-scroll { scrollbar-gutter:auto; }
 #project-scroll .id-display-specimen>p { font-size:clamp(50px,12vw,77px); }
 .project-lead { margin-bottom:48px; }
 #project-scroll .project-group { margin-bottom:54px; }
 /* Every frame spans the full row here, so the 12-column gaps only added a fixed
    minimum width (11 × 24–30px) that pushed galleries sideways below ~340px. */
 #project-scroll .gallery { column-gap:0; }
 #project-scroll .gallery-advertising.ad-balanced { gap:28px; }
 .ad-pair { grid-template-columns:minmax(0,1fr); gap:28px; }
 #project-scroll .ad-pair .work-frame { width:100%; }
 .next-project { padding-bottom:32px; }
 .next-project-title { margin-bottom:28px; line-height:1.2; }
 .next-project-preview { width:100%; }
 /* Leaves room for the label, title and All work button under the floating close button. */
 .next-project-preview img { max-height:390px; max-height:clamp(160px,calc(100svh - 380px),390px); }
 #project-scroll .project-navigation { padding-top:64px; min-height:0; }
 .with-photo-hero .nav { width:calc(100% - 40px); height:76px; }
 .with-photo-hero .nav .signature,.with-photo-hero .nav nav { font-size:11px; }
 .with-photo-hero.has-mobile-menu .nav { padding-right:64px; }
 .with-photo-hero.has-mobile-menu .nav .signature { font-size:15px; min-height:48px; }
 .with-photo-hero.has-mobile-menu .nav nav { display:none; }
 .photo-hero .hero-location { top:100px; transform:none; width:auto; min-height:0; gap:20px; padding:12px 12px 12px 20px; font-size:13px; }
 .photo-hero .location-globe { width:52px; height:52px; }
 .photo-hero .globe-axis { width:34px; height:34px; }
 .photo-hero .hero-introduction { top:auto; width:auto; left:20px; right:20px; display:block; bottom:calc(34.6vw + 104px); }
 .photo-hero .hero-introduction::before { content:none; }
 .photo-hero .hero-introduction .hero-role { font-size:21px; line-height:1.1; margin-bottom:14px; }
 /* p. outranks photo-hero.css's >p:last-child, which right-aligned this at 10px. */
 .photo-hero .hero-introduction>p.hero-description { max-width:28em; text-align:left; font-size:14px; line-height:1.55; }
 .photo-hero .hero-description span { white-space:normal; }
 .photo-hero .hero-bottom { padding-block:12px; }
 .photo-hero .hero-link { min-height:48px; font-size:12px; }
 .photo-hero .hero-link span { display:block; }
 .footer { padding-top:0; }
 .footer-content { padding-top:50px; }
 .footer .wrap { width:calc(100% - 40px); }
 .footer h2 { font-size:clamp(48px,12vw,78px); margin-top:32px; }
 .footer-bottom { width:calc(100% - 40px); flex-wrap:wrap; align-items:flex-start; gap:16px 24px; padding-top:52px; }
 #footer-socials { flex-basis:100%; margin-left:0; }
 .contact-rail { height:138px; padding-right:7%; margin-bottom:32px; }
 #contact-cta { width:138px; height:138px; }
 #contact-cta>.magnet-label { font-size:14px; }
 .contact-arrow { top:-62px; font-size:22px; }
 .contact-details { display:grid; grid-template-columns:minmax(0,1fr); max-width:420px; gap:12px; }
 .footer :is(.contact-email,.contact-phone) { width:100%; min-width:0; font-size:14px; min-height:56px; padding:16px 18px; }
 .footer .contact-email .magnet-label { min-width:0; overflow-wrap:anywhere; }
 .menu-sheet { width:100%; padding:100px 32px max(28px,env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; }
 .menu-sheet>* { flex-shrink:0; }
 .menu-email { display:inline-flex; align-items:center; min-height:48px; font-size:14px; }
 .social-links>a { min-height:48px; font-size:14px; }
 .menu-links { gap:14px; }
 .menu-links a { font-size:clamp(38px,10vw,52px); padding-block:2px; }
 .menu-launch,.menu-dismiss { width:52px; height:52px; top:12px; right:16px; }
}
@media(max-width:380px) {
 /* Small phones: give identity explanations their own full-width row. */
 .id-detail { grid-template-columns:minmax(0,1fr); gap:0; }
 .id-detail-art { grid-row:auto; aspect-ratio:4/3; margin-bottom:16px; }
}
@media(max-height:700px) {
 .menu-sheet { padding-top:88px; padding-bottom:24px; overflow-y:auto; overscroll-behavior:contain; }
 .menu-sheet>* { flex-shrink:0; }
 .menu-sheet h2 { margin-bottom:20px; padding-bottom:18px; }
 .menu-links { gap:4px; }
 .menu-links a { font-size:38px; padding-block:2px; }
 .menu-footnote { padding-top:22px; }
 .menu-footnote .social-group { margin-top:14px; }
}
@media(prefers-reduced-motion:reduce) {
 .footer-content { translate:none; }
 .social-links>a::after { transition:none; }
 #project-title.title-reveal .project-title-line { animation:none; }
 .scroll-choreography :is(.project-lead,.project-group,.ad-pair,.id-section),.next-project { translate:none; opacity:1; }
}

/* Screen-size fits. Each block is scoped by width, height, orientation or input type,
   so the sizes outside it render exactly as before. */
@media(max-width:340px) {
 /* A compact location pill keeps the portrait's face clear on the narrowest phones. */
 .photo-hero .hero-location { gap:10px; padding:8px 8px 8px 20px; font-size:12px; }
 .photo-hero .location-globe { width:40px; height:40px; }
 .photo-hero .globe-axis { width:28px; height:28px; }
}
@media(max-height:600px) {
 /* The contact drift assumes a screen taller than the footer; on short screens it kept
    the eyebrow and first heading line above the footer's clip edge. */
 .footer-content { translate:none; }
}
@media(min-width:701px) and (hover:none),(min-width:701px) and (pointer:coarse) {
 /* Touch tablets and sideways phones: 44px tap targets without changing the look. */
 .with-photo-hero .nav nav a { min-height:44px; min-width:44px; justify-content:center; align-items:center; }
 .photo-hero .hero-bottom { padding-block:10px 11px; }
 .photo-hero .hero-link { min-height:44px; }
 .menu-email { display:inline-flex; align-items:center; min-height:44px; padding-block:0; }
}
@media(min-width:1001px) {
 /* On short laptop windows the tagline steps up instead of landing on the name. */
 .photo-hero .hero-introduction { top:min(46%,calc(100% - 194px - min(14.8vw,340px))); }
}
@media(min-width:1001px) and (max-height:679px) {
 .photo-hero .hero-stage { min-height:560px; }
}
@media(orientation:landscape) and (max-height:500px) {
 /* Phones held sideways (and very short windows): the hero fits one screen. */
 .photo-hero .hero-stage { min-height:0; height:100svh; max-height:none; }
 .photo-hero h1 { font-size:min(8.25vw,16svh); bottom:72px; }
 .photo-hero .hero-bottom { padding-block:12px; }
 .photo-hero .hero-link { min-height:44px; }
 .photo-hero .hero-location { top:96px; transform:none; width:auto; min-height:0; gap:14px; padding:8px 8px 8px 24px; font-size:12px; }
 .photo-hero .location-globe { width:44px; height:44px; }
 .photo-hero .globe-axis { width:30px; height:30px; }
 .photo-hero .hero-introduction { top:96px; bottom:auto; left:auto; right:24px; width:220px; }
 .photo-hero .hero-introduction::before { content:none; }
 .photo-hero .hero-introduction .hero-role { font-size:22px; line-height:1.15; margin-bottom:8px; }
 .photo-hero .hero-introduction>p.hero-description { font-size:11px; line-height:1.45; }
 /* Artwork never taller than the screen; max-height carries through the inline
    aspect-ratio, so frames narrow and centre instead of letterboxing. */
 #project-scroll .work-frame .media-slot { max-height:calc(100svh - 32px); margin-inline:auto; }
 .next-project-preview img { max-height:min(480px,60svh); }
 #project-scroll .project-navigation { min-height:0; }
 .menu-launch,.menu-dismiss { width:52px; height:52px; top:12px; right:16px; }
 .with-photo-hero .about { padding-block:64px; }
}
@media(orientation:landscape) and (max-height:500px) and (max-width:700px) {
 .photo-hero h1 { font-size:min(8.4vw,16svh); bottom:76px; }
 .photo-hero h1 .name-first,.photo-hero h1 .name-last { display:inline-block; }
 .photo-hero h1 .name-first { margin-right:.24em; }
 .photo-hero .hero-location { top:88px; padding-left:20px; }
 .photo-hero .hero-introduction { top:88px; right:20px; width:200px; }
 .photo-hero .hero-introduction .hero-role { font-size:18px; }
}
@media(orientation:landscape) and (max-height:340px) {
 .photo-hero .hero-introduction>p.hero-description { display:none; }
}
@media(max-height:360px) {
 /* The open menu fits a 320px-tall screen without scrolling to reach Contact. */
 .menu-sheet { padding-top:72px; }
 .menu-sheet h2 { margin-bottom:12px; padding-bottom:10px; }
 .menu-links a { font-size:30px; }
}