/* Phone layouts keep the cars in view and the controls within easy reach. */
.porsche-swipe-hint{display:none}

@media(max-width:1024px){
 body{padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px)}
 .js .main-nav{top:100%;max-height:calc(100dvh - 82px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain}
 .js .main-nav>a{min-height:48px;font-size:16px;padding-block:13px}
 .menu-toggle{width:44px;height:44px;flex-shrink:0}
 .theme-toggle button{min-height:44px;min-width:62px;font-size:12px}
 .header-actions{gap:10px}
 .brand{min-height:44px;min-width:44px}
 .filter-button{min-height:44px}
 .year-filter select{min-height:44px;font-size:16px}
 .dialog-close{min-width:44px;min-height:44px}
 .motion-toggle{min-height:44px}
 :root[data-motion=paused] .culture-strip .motion-toggle{color:var(--club-yellow)}
}

@media(max-width:600px){
 html{scroll-padding-top:calc(84px + env(safe-area-inset-top,0px))}
 body{padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px)}
 .container{width:calc(100% - 32px)}
 .section{padding-block:44px}
 .site-header{height:calc(68px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);backdrop-filter:none;-webkit-backdrop-filter:none}
 .header-inner{gap:12px}
 .site-header .brand-name{display:none}
 .brand-logo{width:42px;height:42px}
 .header-actions{gap:10px}
 .theme-toggle{padding:2px;gap:2px}
 .theme-toggle button{padding:8px 10px;min-width:61px;font-size:12px}
 .js .main-nav{max-height:calc(100dvh - 68px - env(safe-area-inset-top,0px));padding:9px 16px 16px}
 .button{min-height:48px;font-size:13px}
 .text-link{min-height:44px;font-size:14px;line-height:1.5}

 /* Natural rows replace the hero's fixed photo offset and fixed height. */
 .hero{display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
 .hero .hero-inner{display:contents;min-height:0;height:auto}
 .hero .hero-copy{grid-area:1/1;max-width:none;width:100%;padding:27px 16px 24px}
 .hero .eyebrow{font-size:10px;margin-bottom:18px;letter-spacing:.6px}
 .hero h1{font-size:clamp(50px,15.4vw,86px);line-height:.88;letter-spacing:-1px}
 .hero h1>.hero-line.is-accent{font-size:.9em;margin-top:7px}
 .hero .hero-tagline{font-size:11px;line-height:1.55;max-width:none;margin-top:20px}
 .hero .hero-description{font-size:15px;line-height:1.65;margin-top:12px;max-width:40ch}
 .hero .hero-actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:20px}
 .hero .hero-actions .button{min-height:48px;padding:12px 16px;font-size:12px;gap:15px}
 .hero .hero-actions .text-link{font-size:13px;padding-block:9px}
 .hero .hero-image{grid-area:2/1;position:relative;inset:auto;height:auto;width:100%;aspect-ratio:4/3;z-index:0;clip-path:polygon(0 6%,100% 0,100% 100%,0 100%)}
 .hero.hero-porsche .hero-image img{width:160%;max-width:none;object-position:0% 75%;transform:none}
 .hero .hero-shade{grid-area:2/1;position:relative;inset:auto;clip-path:polygon(0 6%,100% 0,100% 100%,0 100%);background:linear-gradient(0deg,#10101155,transparent 30%);z-index:0}
 :root[data-theme=light] .hero .hero-shade{background:linear-gradient(0deg,#10101155,transparent 30%)}
 .hero .club-sticker{grid-area:2/1;position:relative;inset:auto;align-self:start;justify-self:end;margin:24px 17px 0 0;width:78px;height:78px;font-size:16px;z-index:2}
 .hero .club-sticker>span{font-size:6px;letter-spacing:.2px;margin-bottom:6px}
 .hero .hero-location{grid-area:2/1;position:relative;inset:auto;align-self:end;justify-self:start;margin:0 16px 13px;max-width:calc(100% - 32px);font-size:10px;letter-spacing:.1px;padding:8px 10px;gap:7px;z-index:2;flex-wrap:wrap}
 .hero-location .location-rule{width:13px}
 .hero .hero-bottom{grid-area:3/1;position:static;width:calc(100% - 32px);margin-inline:auto;padding:9px 0 14px;gap:10px;align-items:center;min-height:65px}
 .hero .hero-bottom>a:first-child{font-size:12px;min-height:44px;gap:5px}
 .hero .hero-bottom .hero-credit{max-width:58%!important;font-size:10px!important;letter-spacing:0;line-height:1.4;padding:8px;min-height:44px}
 .hero-bottom>span{display:none}

 .culture-strip{padding-block:16px;min-height:62px}
 .culture-marquee{width:calc(100% - 164px)}
 .culture-strip .motion-toggle{right:12px;min-height:44px;padding:10px;font-size:10px;gap:6px}
 .culture-group>span{font-size:18px}
 .section-heading h2,.about .section-heading h2,.experience .section-heading h2,.journey .section-heading h2{font-size:clamp(38px,10.4vw,56px);line-height:.98}
 .section-heading{margin-bottom:25px}
 .section-heading .eyebrow{font-size:11px;line-height:1.5;margin-bottom:15px;letter-spacing:.5px}
 .section-intro{font-size:15px;line-height:1.65;margin-top:17px}

 /* A native swipe rail keeps the full 911 gallery compact on a phone. */
 .porsche-spotlight .section-heading{margin-bottom:16px}
 .porsche-spotlight h2{font-size:clamp(40px,11.2vw,62px);line-height:.96}
 .porsche-intro{margin-top:20px;font-size:16px;line-height:1.65}
 .porsche-intro .text-link{font-size:14px;margin-top:9px}
 .porsche-swipe-hint{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin-bottom:12px}
 .porsche-swipe-hint>span{color:var(--red);font-size:20px}
 .porsche-gallery{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(100% - 24px);gap:16px;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;scrollbar-width:thin;overscroll-behavior-x:contain;padding:2px 2px 12px;max-width:100%}
 .porsche-frame{margin:0;transform:none;box-shadow:3px 4px 0 var(--line);scroll-snap-align:start;scroll-snap-stop:normal}
 .porsche-photo,.porsche-detail .porsche-photo{height:auto;aspect-ratio:4/3}
 .porsche-shot-label{font-size:10px;left:10px;top:10px;padding:9px 10px}
 .porsche-frame figcaption{font-size:11px;line-height:1.5;padding:12px 12px 5px;gap:1px}
 .porsche-frame figcaption>a{display:flex;align-items:center;min-height:44px}
 .porsche-bottom{gap:10px;margin-top:20px}
 .porsche-note{font-size:27px}
 .porsche-bottom>.text-link{font-size:14px}

 .community{gap:46px;padding-top:49px;padding-bottom:35px}
 .community-visual{height:auto;width:calc(100% - 10px);padding:8px 8px 56px;margin:0 0 0 2px;transform:rotate(-1deg)}
 .community-visual>img{height:auto;aspect-ratio:2/1;object-fit:cover}
 .community-visual .photo-label{font-size:10px;line-height:1.35;left:12px;bottom:6px;max-width:62%;min-height:44px;display:flex;align-items:center}
 .garage-snapshot{width:35%;height:155px;padding:6px 6px 44px;right:-6px;bottom:-21px;transform:rotate(5deg)}
 .garage-snapshot figcaption{font-size:10px;line-height:1.3;margin-top:0}
 .garage-snapshot figcaption>a{min-height:44px;display:flex;align-items:center}
 .community-copy h2{font-size:clamp(35px,9.4vw,49px);line-height:1.04}
 .community-copy .eyebrow{font-size:11px;margin-bottom:16px;letter-spacing:.5px}
 .community-lead{font-size:18px;margin-top:20px}
 .community-copy>p:not(.eyebrow):not(.community-lead){font-size:15px;line-height:1.75;max-width:none}
 .community-values{gap:16px;margin-top:22px}
 .community-values h3{font-size:23px}
 .community-values p{font-size:14px;line-height:1.6}
 .community-copy .text-link{font-size:14px}
 .community-copy .club-note{font-size:25px!important;margin-top:11px}

 .next-up{padding-top:22px;padding-bottom:50px}
 .next-up .section-heading h2{font-size:clamp(38px,10.4vw,56px)}
 .upcoming-grid{gap:24px}
 .upcoming-card{grid-template-columns:76px minmax(0,1fr);transform:none;box-shadow:3px 4px 0 var(--line);align-items:stretch}
 .upcoming-card:nth-child(2){transform:none}
 .upcoming-date-art{font-size:62px;align-self:start;padding:18px 4px 20px;line-height:1}
 .upcoming-date-art>span{font-size:11px;letter-spacing:.3px;margin-top:10px}
 .upcoming-poster{min-height:0;height:100%;width:100%;padding:6px;object-fit:contain}
 .upcoming-copy{padding:20px 16px}
 .upcoming-copy h3{font-size:27px;line-height:1.08;margin-block:15px 13px}
 .upcoming-copy p{font-size:14px;line-height:1.65;margin-top:9px}
 .upcoming-copy .text-link{font-size:13px;min-height:44px;margin-top:12px}
 .upcoming-copy .tag{font-size:10px}

 .archive .section-heading h2{font-size:clamp(44px,12vw,66px);line-height:.95}
 .archive-overview{gap:13px 20px;font-family:var(--body);margin-bottom:16px}
 .archive-overview p{font-size:12px}
 .archive-overview strong{font-size:29px}
 .archive-overview>a{min-height:44px;width:auto;font-size:13px;padding-top:0;margin-left:0}
 .archive-controls{flex-direction:column;align-items:stretch;gap:15px;padding-block:17px}
 .category-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:100%}
 .filter-button{font-size:13px;min-height:44px;padding:11px 10px;width:100%;white-space:normal;line-height:1.3}
 .filter-button span{font-size:11px;margin-left:6px}
 .year-filter{align-self:stretch;justify-content:space-between;font-size:14px;gap:15px}
 .year-filter select{flex:1;min-height:48px;font-size:16px;padding:10px 12px;max-width:220px}
 .archive-result{font-size:12px;margin-block:14px 21px;line-height:1.5}
 .event-grid{grid-template-columns:minmax(0,1fr);gap:25px}
 .event-card{box-shadow:3px 4px 0 var(--line)}
 .card-art.card-photo{height:auto;aspect-ratio:16/10}
 .card-art.card-photo.is-poster{height:auto;aspect-ratio:5/4;padding:10px 10px 38px}
 .photo-card-label{font-size:11px;padding:10px 12px;line-height:1.4}
 .card-copy{padding:20px}
 .card-copy h3{font-size:30px;line-height:1.08;margin-top:13px}
 .card-copy>p{font-size:15px;line-height:1.7;margin-top:12px}
 .card-meta{font-family:var(--body);font-size:12px;gap:10px}
 .card-footer{margin-top:16px;padding-top:12px;gap:12px}
 .card-footer>span{font-size:13px;line-height:1.5}
 .card-footer>a{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;transform:none}
 .archive-note{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px 11px}
 .archive-note p{font-size:13px;line-height:1.7}
 .archive-note>a{grid-column:2;min-height:44px;font-size:13px;margin-left:0}
 .archive-empty p{font-size:15px}

 .about-grid{gap:25px}
 .about-intro>.large-copy{font-size:31px}
 .about-intro>p{font-size:15px;line-height:1.75}
 .about-quote{font-size:29px}
 .club-manual>summary{font-size:25px;min-height:64px;padding:19px 17px;line-height:1.2}
 .club-manual-body{padding:0 17px 20px}
 .mission-list li>span{font-size:14px;line-height:1.6}
 .mission-list strong{font-size:15px}
 .vision-card>p:last-child{font-size:14px}
 .value-card p{font-size:14px}
 .activity-card h3{font-size:29px}
 .activity-card p{font-size:15px}
 .background-credit{min-height:44px;font-size:11px;line-height:1.5;padding:9px 11px}
 .partnership-panel .background-credit,.connect.photo-section .background-credit{font-size:11px}
 .impact-heading h2{font-size:clamp(36px,10vw,52px);line-height:1}
 .impact-heading>p{font-size:15px;line-height:1.65}
 .metric-card h3{font-size:14px;line-height:1.4}
 .metric-card>a{font-size:12px;min-height:44px;line-height:1.6;margin-top:8px}
 .metrics-note{font-size:12px;line-height:1.65}
 .network-heading h2{font-size:32px}
 .network-heading p{font-size:14px}
 .branch-card{padding:21px 13px}
 .branch-card h3{font-size:23px}
 .branch-card p{font-size:14px;line-height:1.65}
 .branch-handle{font-size:11px;line-height:1.5}
 .branch-number{font-size:11px}
 .crew-details .leadership{padding:17px}
 .crew-details .section-heading h2{font-size:36px}
 .crew-details .team-copy{padding:22px}
 .crew-details .team-card p:not(.eyebrow){font-size:15px}
 .partnership-panel{padding:28px 21px;gap:24px;box-shadow:4px 4px 0 var(--line)}
 .partnership-panel h2{font-size:clamp(36px,10vw,50px)}
 .partnership-panel p{font-size:15px}
 .partnership-panel .eyebrow{font-size:11px;line-height:1.5}
 .partnership-panel .button{font-size:12px;max-width:100%}
 .partnership-opportunities li{font-size:14px}
 .journey-intro,.journey-step>p{font-size:15px;line-height:1.75}
 .journey-date>span{font-size:12px;line-height:1.5}
 .journey-step .text-link{font-size:14px;min-height:44px;margin-top:6px}
 .connect h2{font-size:clamp(43px,12vw,64px)}
 .connect-inner{padding-block:46px;gap:25px}
 .connect .button{transform:none;min-height:48px;font-size:12px;max-width:100%;gap:14px}
 .connect p:not(.eyebrow){font-size:15px}
 .connect .eyebrow{font-size:11px}
 .footer-description{font-size:14px;line-height:1.75}
 .footer-main{gap:15px}
 .footer-links{gap:16px;flex-wrap:wrap;margin-left:0}
 .footer-links>a,.back-top{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
 .back-top{min-width:44px;justify-content:center;margin-left:auto}
 .footer-bottom{font-size:12px;line-height:1.7;gap:12px;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}

 /* Full-screen recaps keep the close button available during reading. */
 .event-dialog{inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;border:0;border-top:3px solid var(--red);box-shadow:none;overscroll-behavior:contain}
 .dialog-header{padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;gap:13px}
 .event-dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
 .dialog-header .eyebrow{font-size:11px;letter-spacing:.3px;line-height:1.5}
 .dialog-close{width:44px;height:44px;flex-shrink:0}
 .dialog-photo img{height:auto;max-height:min(45svh,320px);object-fit:contain;object-position:center}
 .dialog-photo.is-poster img{max-height:42svh;padding:10px}
 .credited-image figcaption{font-size:12px;line-height:1.5;padding:8px 16px}
 .credited-image figcaption a{min-height:44px}
 .dialog-body{padding:23px 18px calc(28px + env(safe-area-inset-bottom,0px))}
 .dialog-body h2{font-size:38px;line-height:1.05}
 .dialog-body .event-facts>div{font-size:14px;line-height:1.6}
 .dialog-involvement,.dialog-recap p{font-size:15px;line-height:1.75}
 .dialog-involvement strong{font-size:11px;letter-spacing:.3px}
 .dialog-highlights ul{font-size:14px;line-height:1.75}
 .dialog-highlights h3,.dialog-sources h3{font-size:13px;letter-spacing:.5px}
 .dialog-sources>a{font-size:14px;min-height:44px;padding-block:5px;gap:12px;overflow-wrap:anywhere}
 .dialog-sources>p{font-size:13px;line-height:1.7}
 .dialog-actions{align-items:stretch;gap:12px}
 .dialog-actions>.button{width:100%;min-height:48px}
 .dialog-actions>.text-link{font-size:14px;min-height:44px}
 .notification{font-size:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 32px);overflow-wrap:anywhere}
 .credits-page{padding-block:30px}
 .credits-page h1{font-size:clamp(40px,11.8vw,58px);line-height:1;margin-block:25px 23px}
 .credits-page p{font-size:15px;line-height:1.75}
 .credits-list strong{font-size:16px;line-height:1.5;overflow-wrap:anywhere}
 .credits-list a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:1.5}
}

@media(max-width:360px){
 .hero .hero-copy{padding-top:24px}
 .hero h1{font-size:clamp(47px,15.4vw,55px)}
 .hero .hero-actions{gap:9px 11px}
 .hero .hero-actions .button{font-size:11px;padding-inline:13px}
 .hero .hero-actions .text-link{font-size:12px}
 .hero .hero-location{font-size:9px}
 .hero .club-sticker{width:68px;height:68px;font-size:14px;margin-right:15px}
 .hero .hero-bottom>a:first-child{font-size:11px}
 .hero .hero-bottom .hero-credit{font-size:9px!important}
 .community-copy h2{font-size:34px}
 .garage-snapshot{height:139px}
 .garage-snapshot figcaption{font-size:9px}
 .filter-button{font-size:12px}
 .upcoming-card{grid-template-columns:64px minmax(0,1fr)}
 .upcoming-copy{padding:18px 14px}
 .upcoming-copy h3{font-size:25px}
 .upcoming-date-art{font-size:54px}
 .connect .button{font-size:11px;gap:10px;padding-inline:13px}
}

@media(orientation:landscape) and (max-height:500px) and (min-width:601px) and (max-width:1024px){
 .site-header{height:60px}
 .site-header .brand-name{display:none}
 .js .main-nav{max-height:calc(100dvh - 60px)}
 .hero,.hero .hero-inner{min-height:380px}
 .hero .hero-inner{padding-top:22px;padding-bottom:70px}
 .hero .hero-copy{width:58%;max-width:550px}
 .hero .eyebrow{font-size:9px;margin-bottom:17px}
 .hero h1{font-size:clamp(48px,6.6vw,65px)}
 .hero .hero-tagline{font-size:10px;margin-top:16px}
 .hero .hero-description{font-size:14px;max-width:34ch;line-height:1.55}
 .hero .hero-actions{margin-top:17px;gap:16px}
 .hero .hero-actions .button{min-height:44px}
 .hero .hero-image,.hero .hero-shade{left:45%}
 .hero .hero-location{max-width:45%;bottom:67px;font-size:8px}
 .hero .club-sticker{width:75px;height:75px;font-size:15px;top:22px}
 .hero .hero-bottom{padding-block:12px}
 .event-dialog{max-height:calc(100dvh - 16px)}
 .dialog-header{padding-block:8px}
 .dialog-close{width:44px;height:44px}
}

@media(orientation:landscape) and (max-height:500px) and (min-width:480px) and (max-width:600px){
 .hero{grid-template-columns:1.1fr 1fr}
 .hero .hero-copy{padding:23px 16px 20px}
 .hero .eyebrow{font-size:9px;line-height:1.4;margin-bottom:17px}
 .hero h1{font-size:clamp(34px,7vw,43px)}
 .hero .hero-tagline{font-size:10px;line-height:1.5;margin-top:16px}
 .hero .hero-description{font-size:14px;line-height:1.55;margin-top:11px}
 .hero .hero-actions{gap:9px;margin-top:16px}
 .hero .hero-actions .button{font-size:11px;padding-inline:12px;gap:10px;min-height:44px}
 .hero .hero-actions .text-link{font-size:11px}
 .hero .hero-image,.hero .hero-shade{grid-area:1/2;aspect-ratio:auto;align-self:stretch;height:100%;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)}
 .hero .club-sticker{grid-area:1/2;width:57px;height:57px;font-size:12px;margin:20px 14px 0 0}
 .hero .club-sticker>span{font-size:5px;letter-spacing:0;margin-bottom:5px}
 .hero .hero-location{grid-area:1/2;margin:0 11px 13px;max-width:calc(100% - 22px);font-size:8px;gap:6px;padding:7px 8px}
 .hero .hero-bottom{grid-area:2/1/3/3;min-height:61px}
}

@media(pointer:coarse){
 .card-art:hover .icon,.card-photo:hover img,.porsche-photo:hover img,.event-card:hover,.button:hover,.value-card:hover,.branch-card:hover,.activity-card:hover{transform:none}
}