/* Shared component scale for Home, case studies and About. */
:root{--type-page-title:52px;--type-section-title:36px;--type-subheading:24px;--type-intro:32px;--type-body:16px;--type-button:16px;--type-card-title:16px;--section-space:100px;--section-title-space:32px}
.hero h1,.case-page .case-heading h1,.about-page .about-hero h1,.project-details .details-grid>h2{
 font-size:var(--type-page-title);font-weight:500;line-height:1.05;letter-spacing:-.035em;
}
.work>h2,.web-work>h2,.case-page .section-heading h2,.about-page .about-section-title,.about-page .about-background h2{
 font-size:var(--type-section-title);font-weight:500;line-height:1.12;letter-spacing:-.025em;
}
.work>h2,.web-work>h2,.about-page .about-section-title{margin-bottom:var(--section-title-space)}
.section-heading{margin-bottom:var(--section-title-space)}
.about-page .about-expertise article h2,.about-page .experience-row h3,.details-section h3{
 font-size:var(--type-subheading);font-weight:500;line-height:1.2;letter-spacing:-.02em;
}
.case-overview .intro,.about-page .about-overview .intro,.details-intro{font-size:var(--type-intro);line-height:1.2;letter-spacing:-.025em}
.overview-details,.chapter-description,.about-page .about-description,.details-copy{font-size:var(--type-body);line-height:1.4}
.action-button,.details-trigger.action-button{
 font-family:inherit;font-size:var(--type-button);font-weight:500;line-height:1.2;
 height:var(--control-height);padding-block:0;padding-inline:1.2em;border-radius:var(--control-radius);
}
.home-page .project-copy h3,.home-page .wide .project-copy h3,.case-page .case-figure figcaption{font-size:var(--type-card-title)}
.case-page .case-subtitle .tags>span{font-size:14px;padding:8px 14px}
.contact-heading{font-size:var(--type-page-title)}
@media(min-width:1800px){:root{--type-page-title:64px;--type-card-title:19px}}
@media(max-width:650px){:root{--type-page-title:40px;--type-section-title:30px;--type-intro:26px;--section-space:64px;--section-title-space:28px}}

/* Controls use a solid surface: backdrop sampling can leave repaint bands. */
.action-button,.gallery-prev,.gallery-next,.lightbox-close.fill-control{
 backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* Case overview merges the introduction and details in the right half. */
.case-page .case-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap,12px)}
.case-page .case-overview .overview-copy{grid-column:2;min-width:0}
.case-page .overview-copy,.case-page .overview-copy .intro,
.case-page .overview-copy .overview-details,.case-page .overview-copy>ul{
 font-size:var(--type-intro);font-weight:500;line-height:1.2;letter-spacing:-.025em;max-width:none;
}
.case-page .overview-copy .intro{margin:0 0 24px}
.case-page .overview-copy .overview-details p+p{margin-top:24px}
@media(max-width:650px){
 .case-page .case-overview{grid-template-columns:minmax(0,1fr)}
 .case-page .case-overview .overview-copy{grid-column:1}
}

/* A modest type/control increase beyond 1920px; the canvas stays fluid. */
@media(min-width:1921px){
 :root{--type-page-title:72px;--type-section-title:40px;--type-subheading:27px;--type-intro:36px;--type-body:18px;--type-button:18px;--type-card-title:21px;--control-height:66px}
 body{font-size:var(--type-body)}
 .site-header .signature,.site-header .main-nav{font-size:16px}
 .home-page .hero-copy,.home-page .project-description,.home-page .wide .project-description{font-size:21px}
 .home-page .work>h2,.home-page .web-work>h2{font-size:var(--type-section-title)}
 .home-page .hero .explore,.action-button,.case-page .section-open,.case-page .case-open{font-size:var(--type-button)}
 .case-page .case-subtitle>p{font-size:21px}
 .footer-bottom,.chapter-nav,.chapter-title,.chapter-links{font-size:16px}
 .project-details .details-copy,.project-details .details-meta,.project-details .details-toolbar{font-size:var(--type-body)}
 .case-page .case-navigation{font-size:32px}
 .gallery-prev,.gallery-next{font-size:27px}
}

/* Halve the vertical space inside the case navigation dividers. */
.case-page .case-navigation{padding-block:calc(var(--layout-unit) * 2)}
@media(max-width:650px){.case-page .case-navigation{padding-block:14px}}

/* Clip the hover fill only once, at the button edge: no pale rounded seam. */
.fill-control:not(.gallery-cursor)::before{
 inset:-2px;border-radius:0;
 clip-path:circle(0px at calc(var(--fill-x,50%) + 2px) calc(var(--fill-y,50%) + 2px));
}
.fill-control:not(.gallery-cursor).pointer-hover:hover::before,
.fill-control:not(.gallery-cursor):focus-visible::before{
 clip-path:circle(calc(var(--fill-radius,150%) + 4px) at calc(var(--fill-x,50%) + 2px) calc(var(--fill-y,50%) + 2px));
}

/* Match the reference close-icon turn while retaining our button and SVG. */
.lightbox-close :is(svg,.close-icon){transform-origin:center;transform-box:fill-box}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .lightbox-close:is(:hover,:focus-visible) :is(svg,.close-icon){animation:portfolio-close-turn .65s cubic-bezier(.22,.61,.36,1) both}
}
@keyframes portfolio-close-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}