:root{--gutter:clamp(22px,5vw,90px)}

    @font-face { font-family: LongPixel; src: url('./LongPixel-7.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
    :root { color-scheme: dark; --bg:#202020; --fg:#f1f1ef; --quiet:#a8a8a5; }
    * { box-sizing: border-box; }
    html { background:var(--bg); }
    body { margin:0; background:var(--bg); color:var(--fg); font-family:Arial,Helvetica,sans-serif; }
    .sequence { position:relative; height:360vh; height:360svh; background:var(--bg); }
    .stage { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; isolation:isolate; background:var(--bg); }
    .poster,.frames { position:absolute; inset:0; width:100%; height:100%; display:block; }
    .poster { object-fit:cover; object-position:center; }
    .frames { opacity:0; transition:opacity .18s ease; }
    .frames.ready { opacity:1; }
    .shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(22,22,22,.86) 0%,rgba(22,22,22,.69) 43%,rgba(22,22,22,.2) 80%,rgba(22,22,22,.05) 100%); }
    .topline,.bottomline { position:absolute; z-index:2; left:clamp(22px,5vw,90px); right:clamp(22px,5vw,90px); display:flex; justify-content:space-between; gap:14px; color:#d7d7d5; font-family:LongPixel,monospace; font-size:clamp(12px,1vw,16px); letter-spacing:.06em; }
    .topline { top:max(26px,env(safe-area-inset-top)); }
    .bottomline { bottom:max(25px,env(safe-area-inset-bottom)); align-items:end; }
    .progress { display:inline-block; vertical-align:middle; width:min(170px,28vw); height:2px; background:#8886; overflow:hidden; }
    .progress span { display:block; height:100%; width:0; background:#eee; }
    .hero { position:absolute; z-index:2; left:clamp(22px,5vw,90px); right:clamp(22px,5vw,90px); top:50%; transform:translateY(-45%); max-width:1200px; pointer-events:none; }
    h1 { margin:0; max-width:1120px; font-family:LongPixel,monospace; font-size:clamp(35px,4.5vw,74px); font-weight:400; line-height:1.16; letter-spacing:.012em; text-transform:uppercase; text-wrap:balance; }
    h1 span { display:block; }
    h1 .amp { color:#b4b4af; }
    .copy { font-family:LongPixel,monospace; max-width:790px; margin-top:clamp(30px,4vw,60px); font-size:clamp(15px,1.25vw,20px); line-height:1.44; letter-spacing:.005em; }
    .copy p { margin:0 0 14px; }
    .hero-item { opacity:1; transform:none; }
    .js .hero-item { opacity:0; transform:translate3d(0,30px,0); will-change:opacity,transform; }
    .after { display:grid; place-items:center; min-height:65vh; padding:40px 25px; background:#171717; color:#a6a6a3; text-align:center; }
    .after p { font-family:LongPixel,monospace; font-size:clamp(18px,2vw,28px); line-height:1.5; }
    @media(max-width:700px) {
      .sequence { height:300vh; height:300svh; }
      .shade { background:linear-gradient(180deg,rgba(22,22,22,.4),rgba(22,22,22,.50) 25%,rgba(22,22,22,.83) 100%); }
      .poster { object-position:50% 50%; }
      .hero { top:auto; bottom:clamp(90px,13vh,140px); transform:none; }
      h1 { font-size:clamp(28px,7.1vw,48px); line-height:1.21; overflow-wrap:anywhere; }
      .copy { margin-top:25px; font-size:clamp(15px,3.7vw,18px); line-height:1.42; }
      .topline,.bottomline { font-size:11px; }
      .topline .right { display:none; }
    }
    @media(prefers-reduced-motion:reduce) {
      .sequence { height:100svh; }
      .frames { transition:none; }
      .js .hero-item { opacity:1 !important; transform:none !important; will-change:auto; }
    }
  
/* Portfolio */
.portfolio { background:#202020; padding:clamp(80px,10vw,160px) 0 140px; overflow:hidden; }
.portfolio-kicker { padding:0 var(--gutter); font-family:LongPixel,monospace; color:#bcbcb9; letter-spacing:.07em; font-size:clamp(13px,1.15vw,18px); margin-bottom:75px; }
.portfolio-group { margin-bottom:clamp(110px,12vw,190px); }
.group-head { margin:0 var(--gutter) clamp(30px,4vw,56px); display:flex; align-items:end; justify-content:space-between; gap:30px; }
.group-intro { max-width:min(930px,80vw); }
.section-id,.slide-counter,.index-label { font:15px LongPixel,monospace; letter-spacing:.06em; color:#b4b4b1; }
.group-intro h2 { font:400 clamp(34px,4.2vw,74px)/1.12 LongPixel,monospace; margin:22px 0 22px; text-transform:uppercase; max-width:1100px; text-wrap:balance; }
.group-desc { font:400 clamp(16px,1.5vw,22px)/1.5 LongPixel,monospace; color:#c5c5c2; max-width:850px; margin:0; }
.slider-nav { display:flex; gap:12px; align-items:center; flex-shrink:0; }
.slide-counter { margin-right:15px; min-width:65px; }
.slider-nav button,.lightbox-nav button,.lightbox-close { color:white; border:1px solid #989894; background:#3337; height:52px; width:52px; font-size:24px; cursor:pointer; transition:background .2s,border-color .2s; }
.slider-nav button:hover,.lightbox-nav button:hover,.lightbox-close:hover { background:#757575; border-color:white; }
.slider-nav button:disabled { opacity:.32; cursor:default; }
.slider-shell { position:relative; }
.slider-shell::before,.slider-shell::after { position:absolute; top:0; bottom:0; width:clamp(14px,5vw,90px); z-index:1; pointer-events:none; content:''; }
.slider-shell::before { left:0; background:linear-gradient(90deg,#202020d9,transparent); }
.slider-shell::after { right:0; background:linear-gradient(270deg,#202020d9,transparent); }
.slider-track { display:flex; gap:6px; align-items:flex-start; padding:0 var(--gutter); overflow-x:auto; overscroll-behavior-x:contain; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; touch-action:pan-x pan-y; }
.slider-track::-webkit-scrollbar { display:none; }
.work { --photo-h:600px; width:calc(var(--photo-h)*var(--ratio)); min-width:calc(var(--photo-h)*var(--ratio)); margin:0; scroll-snap-align:start; }
.portfolio-group:nth-of-type(n+5) .work { --photo-h:800px; }
.work-open { position:relative; width:100%; height:var(--photo-h); padding:0; border:0; background:#343434; display:block; cursor:zoom-in; overflow:hidden; }
.work-open img { display:block; height:100%; width:100%; object-fit:contain; transition:transform .65s ease; }
.work-open:hover img { transform:scale(1.03); }
.zoom-badge { position:absolute; bottom:16px; right:16px; display:grid; place-items:center; width:42px; height:42px; background:#202020d9; border:1px solid #aaa9; font-size:23px; }
.work figcaption { padding:17px 4px 0; display:flex; align-items:start; gap:20px; color:#c8c8c5; font-size:14px; line-height:1.4; max-width:600px; }
.work figcaption .index-label { font-size:12px; white-space:nowrap; }
.card-caption { display:block; min-width:0; max-width:56ch; }
.card-caption strong { font:400 15px/1.35 LongPixel,monospace; display:block; }
.card-caption small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#aaa; font:13px/1.5 Arial,Helvetica,sans-serif; margin-top:7px; }
.seo-description { margin:10px 4px 0 4px; max-width:65ch; color:#c8c8c5; font:15px/1.6 Arial,Helvetica,sans-serif; }
.seo-description summary { cursor:pointer; text-decoration:underline; text-underline-offset:4px; width:max-content; }
.seo-description p { margin:12px 0 0; }
.lightbox { position:fixed; inset:0; width:100vw; max-width:100vw; height:100vh; max-height:100vh; margin:0; padding:0; border:0; color:#f3f3f2; background:#202020; overflow-y:auto; }
.lightbox::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(12px); }
.lightbox[open] { animation:modal-in .27s ease both; }
@keyframes modal-in { from{opacity:0;transform:scale(.985)} to{opacity:1;transform:scale(1)} }
.lightbox-body { padding:clamp(18px,3vw,44px); width:100%; min-height:100%; display:flex; flex-direction:column; }
.lightbox-top { display:flex; justify-content:space-between; align-items:center; font:16px LongPixel,monospace; margin-bottom:16px; }
.lightbox-content { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.65fr); gap:clamp(25px,4vw,70px); min-height:0; flex:1; }
.lightbox-media { background:#252525; display:grid; place-items:center; min-height: min(60vh,520px); }
.lightbox-media img { display:block; max-width:100%; max-height:calc(100vh - 130px); object-fit:contain; }
.lightbox-copy { display:flex; flex-direction:column; padding:clamp(0px,3vw,50px) 0 0; }
.lightbox-copy h3 { font:400 clamp(20px,2vw,36px)/1.3 LongPixel,monospace; margin:0 0 24px; }
.lightbox-copy p { font:400 clamp(15px,1.25vw,18px)/1.6 Arial,Helvetica,sans-serif; color:#dadad8; white-space:pre-wrap; margin:0 0 45px; }
.lightbox-nav { display:flex; gap:10px; align-items:center; margin-top:auto; font:15px LongPixel,monospace; }
.lightbox-nav span { min-width:80px; text-align:center; }
.glitch-title.visible { animation:none; }
@keyframes reveal-title { from{opacity:0;filter:blur(9px);clip-path:inset(0 100% 0 0);transform:translateY(12px)} to{opacity:1;filter:blur(0);clip-path:inset(0 0 0 0);transform:none} }
@media(max-width:700px) {
 .portfolio { padding-top:85px; padding-bottom:90px; }
 .portfolio-kicker { margin-bottom:70px; }
 .portfolio-group { margin-bottom:100px; }
 .group-head { align-items:flex-start; flex-direction:column; gap:22px; margin-bottom:26px; }
 .group-intro { max-width:100%; }
 .group-intro h2 { font-size:clamp(28px,8vw,46px); margin:15px 0; overflow-wrap:anywhere; }
 .group-desc { font-size:15px; }
 .slider-nav button { width:46px; height:46px; }
 .work,.portfolio-group:nth-of-type(n+5) .work { --photo-h:min(62vh,490px); }
 .work { max-width:90vw; min-width:min(calc(var(--photo-h)*var(--ratio)),90vw); width:min(calc(var(--photo-h)*var(--ratio)),90vw); }
 .work-open { height:var(--photo-h); }
 .work-open img { object-fit:contain; }
 .work figcaption { max-width:80vw; font-size:12px; }
 .lightbox-body { padding:15px; }
 .lightbox-content { display:flex; flex-direction:column; gap:16px; }
 .lightbox-media { min-height:0; max-height:53vh; }
 .lightbox-media img { max-height:53vh; }
 .lightbox-copy { padding:0; }
 .lightbox-copy h3 { font-size:22px; margin:7px 0 10px; }
 .lightbox-copy p { font-size:15px; margin:0 0 22px; }
 .lightbox-nav { padding-bottom:12px; }
}
@media(prefers-reduced-motion:reduce) { .slider-track { scroll-behavior:auto; } .glitch-title.visible { animation:none; } .lightbox[open] { animation:none; } .work-open img { transition:none; } }

/* NAU.DESIGN shared layout */
html { scroll-padding-top:110px; }
body { overflow-x:hidden; }
a { color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid #a5d3bf; outline-offset:4px; }
.site-header { position:fixed; z-index:40; inset:0 0 auto; background:#1d1e1de9; border-bottom:1px solid #ffffff24; backdrop-filter:blur(16px); }
.header-row { min-height:69px; padding:0 clamp(18px,3vw,44px); display:flex; align-items:center; gap:clamp(15px,2.2vw,35px); }
.brand { display:flex; align-items:center; gap:9px; flex-shrink:0; font:400 22px/1 Arial,Helvetica,sans-serif; white-space:nowrap; text-decoration:none; }
.brand b { font-weight:700; }
.brand img { width:32px; height:32px; }
.desktop-menu { display:flex; align-items:center; gap:clamp(11px,1.35vw,24px); margin-left:auto; }
.desktop-menu a { font:13px/1.3 Arial,Helvetica,sans-serif; text-decoration:none; white-space:nowrap; color:#e4e4e1; }
.desktop-menu a:hover,.desktop-menu a[aria-current=page] { color:#9bd0b7; }
.desktop-menu .consult-action { border:1px solid #a7d0b9; padding:10px 12px; color:#c3eed5; }
.head-contacts { display:flex; flex-direction:column; gap:4px; flex-shrink:0; font:11px/1.2 Arial,Helvetica,sans-serif; }
.head-contacts a { text-decoration:none; }
.announcement { min-height:28px; background:#acd0b9; color:#182621; text-align:center; padding:5px 14px; font:700 12px/1.35 Arial,Helvetica,sans-serif; }
.announcement span { font-weight:400; }
.menu-toggle,.mobile-menu { display:none; }
.sequence { height:255vh; height:255svh; }
.stage { padding-top:97px; }
.hero { top:calc(50% + 38px); }
.bottomline { bottom:24px; }
.portfolio { padding-top:100px; }
.portfolio-kicker { margin-bottom:32px; }
.portfolio-group { margin-bottom:clamp(85px,10vw,145px); }
.gallery-frame { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.65fr); gap:clamp(22px,3vw,52px); padding:0 var(--gutter); align-items:start; }
.gallery-aside { position:sticky; top:135px; min-width:0; display:flex; flex-direction:column; min-height:600px; justify-content:space-between; padding:8px 0 16px; }
.portfolio-group[data-size=large] .gallery-aside { min-height:800px; }
.group-intro { max-width:100%; }
.group-intro h2 { font-size:clamp(30px,3vw,53px); line-height:1.32; overflow-wrap:anywhere; margin:16px 0 26px; }
.group-desc { font-size:clamp(15px,1.2vw,19px); }
.gallery-frame .slider-shell { min-width:0; overflow:hidden; }
.gallery-frame .slider-track { padding:0; gap:13px; align-items:stretch; overscroll-behavior-x:contain; touch-action:pan-x; }
.gallery-frame .work { width:min(100%,calc(600px * var(--ratio))); min-width:min(100%,calc(600px * var(--ratio))); }
.gallery-frame .work-open { height:600px; }
.gallery-frame [data-size=large] .work-open { height:800px; }
.portfolio-group[data-size=large] .work { width:min(100%,calc(800px * var(--ratio))); min-width:min(100%,calc(800px * var(--ratio))); }
.portfolio-group[data-size=large] .work-open { height:800px; }
.gallery-frame .slider-nav { margin-top:24px; }
.gallery-frame .work-title { margin:12px 0 0; font:400 14px/1.4 LongPixel,monospace; color:#d7d7d4; overflow-wrap:anywhere; }
.project-inline-link { display:inline-block; margin:10px 0; font:12px/1.3 Arial,Helvetica,sans-serif; color:#acd0b9; white-space:nowrap; }
.demo-note { margin:0 var(--gutter) 34px; max-width:750px; color:#acd0b9; font-size:14px; }
.next-direction { display:block; padding:90px var(--gutter) 110px; background:#b1d2bc; color:#172821; text-decoration:none; }
.next-direction span { display:block; font:14px LongPixel,monospace; margin-bottom:25px; }
.next-direction strong { display:block; font:400 clamp(36px,5vw,84px)/1.18 LongPixel,monospace; overflow-wrap:anywhere; }
.site-footer { background:#171b19; padding:80px var(--gutter) 25px; border-top:1px solid #ffffff19; }
.eyebrow { font:14px/1.4 LongPixel,monospace; color:#acd0b9; text-transform:uppercase; }
.site-footer h2 { font:400 clamp(31px,5vw,72px)/1.17 LongPixel,monospace; margin:24px 0 12px; }
.footer-email { display:inline-block; font:400 clamp(20px,3.6vw,48px)/1.3 LongPixel,monospace; text-decoration:none; border-bottom:1px solid #acd0b9; color:#acd0b9; overflow-wrap:anywhere; }
.footer-grid { margin:100px 0 80px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:45px; font-size:14px; line-height:1.6; }
.footer-grid strong { font-size:19px; }
.footer-grid nav,.footer-grid>div:last-child { display:flex; flex-direction:column; align-items:start; gap:8px; }
.footer-grid a { text-decoration:none; }
.footer-grid a:hover { color:#acd0b9; }
.footer-bottom { border-top:1px solid #ffffff30; padding:20px 0 0; display:flex; justify-content:space-between; font-size:12px; color:#a9b4ad; }
.text-page { max-width:1300px; min-height:65vh; padding:clamp(170px,18vw,230px) var(--gutter) 140px; }
.text-page h1 { max-width:1100px; font-size:clamp(35px,5vw,84px); line-height:1.22; overflow-wrap:anywhere; }
.text-page p { max-width:790px; }
.lead { margin:52px 0; font:400 clamp(21px,2.4vw,36px)/1.5 LongPixel,monospace; }
.text-page>p:not(.lead):not(.eyebrow) { font:17px/1.7 Arial,Helvetica,sans-serif; }
.text-columns { display:grid; grid-template-columns:1fr 1fr; gap:60px; font-size:17px; line-height:1.7; margin:65px 0; }
.contact-list { display:flex; flex-direction:column; align-items:start; gap:14px; margin:45px 0; }
.contact-list a { font:400 clamp(20px,3vw,40px)/1.3 LongPixel,monospace; text-decoration:none; overflow-wrap:anywhere; }
.contact-list a:hover,.inline-link:hover { color:#acd0b9; }
.inline-link,.back-link { display:inline-block; margin:30px 0 0; font:16px LongPixel,monospace; text-decoration:none; color:#acd0b9; }
.back-link { margin:0 0 60px; }
.project-list-item { display:block; max-width:680px; text-decoration:none; }
.project-list-item img { display:block; width:100%; height:auto; }
.project-list-item span { display:block; padding-top:17px; font:19px/1.4 LongPixel,monospace; }
.project-image { display:block; width:min(100%,1180px); height:auto; margin-top:60px; }
.pixel-title,.glitch-title { opacity:1; }
@media (min-width:701px) and (prefers-reduced-motion:no-preference) {
 .pixel-title.pixel-active,.glitch-title.pixel-active { animation:pixel-text 1s steps(8,end) both; }
 .pixel-title.pixel-active::after,.glitch-title.pixel-active::after { content:""; position:absolute; inset:-.04em; pointer-events:none; background-color:#202020; background-image:repeating-conic-gradient(#202020 0% 25%,#202020cc 0% 50%); background-size:18px 18px; animation:pixel-blocks 1s steps(11,end) both; }
 @keyframes pixel-text { 0%{opacity:.1;filter:blur(5px)} 40%{opacity:.7;filter:blur(2px)} 100%{opacity:1;filter:none} }
 @keyframes pixel-blocks { 0%{clip-path:inset(0 0 0 0)} 100%{clip-path:inset(0 0 0 100%)} }

}
@media(max-width:1250px){ .head-contacts { display:none; } }
@media(max-width:900px){
 .desktop-menu { display:none; }
 .menu-toggle { margin-left:auto; display:grid; gap:6px; width:42px; height:42px; place-content:center; border:1px solid #ffffff50; background:none; cursor:pointer; }
 .menu-toggle span { display:block; background:#f1f1ef; height:2px; width:19px; }
 .mobile-menu:not([hidden]) { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; max-height:calc(100vh - 95px); overflow:auto; background:#202020; padding:20px var(--gutter) 32px; box-shadow:0 18px 24px #0008; }
 .mobile-menu a { padding:11px 0; border-bottom:1px solid #ffffff18; font:16px/1.3 LongPixel,monospace; text-decoration:none; overflow-wrap:anywhere; }
 .mobile-menu a[aria-current=page] { color:#acd0b9; }
 .announcement span { display:none; }
 .gallery-frame { grid-template-columns:minmax(0,1.5fr) minmax(220px,.65fr); }
 .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:700px){
 .brand { font-size:20px; }
 .header-row { min-height:58px; }
 .announcement { font-size:11px; min-height:25px; }
 .stage { padding-top:83px; }
 .sequence { height:215svh; }
 .hero { top:auto; bottom:clamp(95px,15vh,150px); left:18px; right:18px; }
 .hero h1 { font-size:clamp(26px,7vw,40px); line-height:1.3; overflow-wrap:anywhere; }
 .copy { font-size:15px; }
 .portfolio { padding-top:70px; }
 .portfolio-kicker { margin-bottom:26px; }
 .gallery-frame { padding:0 var(--gutter); display:flex; flex-direction:column-reverse; gap:20px; }
 .gallery-aside,.portfolio-group[data-size=large] .gallery-aside { min-height:0; position:static; width:100%; display:flex; flex-direction:column; gap:20px; padding:0; }
 .group-intro h2 { font-size:clamp(25px,7vw,37px); line-height:1.34; overflow-wrap:anywhere; margin:10px 0 14px; }
 .group-desc { font-size:15px; }
 .gallery-frame .slider-shell { width:100%; overflow:hidden; }
 .gallery-frame .slider-track { touch-action:pan-x; }
 .gallery-frame .work,.portfolio-group[data-size=large] .work { --photo-h:min(55vh,430px); width:min(84vw,calc(var(--photo-h) * var(--ratio))); min-width:min(84vw,calc(var(--photo-h) * var(--ratio))); }
 .gallery-frame .work-open,.portfolio-group[data-size=large] .work-open { height:var(--photo-h); }
 .gallery-frame .slider-nav { margin:5px 0 0; }
 .gallery-frame .work-title { font-size:12px; }
 .next-direction { padding:70px var(--gutter) 85px; }
 .next-direction strong { font-size:clamp(26px,7vw,40px); }
 .site-footer { padding-top:65px; }
 .footer-email { font-size:clamp(20px,6vw,30px); }
 .footer-grid { grid-template-columns:1fr 1fr; gap:25px; margin:60px 0 50px; }
 .footer-grid>div:first-child { grid-column:1/-1; }
 .footer-bottom { flex-wrap:wrap; gap:10px; }
 .text-page { padding:155px var(--gutter) 90px; }
 .text-page h1 { font-size:clamp(32px,8vw,48px); }
 .lead { margin:30px 0; font-size:clamp(19px,5vw,28px); }
 .text-columns { display:block; margin:30px 0; }
 .contact-list a { font-size:clamp(19px,5vw,29px); }
 .glitch-title.visible { animation:none; filter:none; clip-path:none; transform:none; opacity:1; }
}
@media(prefers-reduced-motion:reduce) { .pixel-title,.glitch-title { animation:none!important;filter:none!important;clip-path:none!important;opacity:1!important; } }

@media(max-width:700px){.pixel-title::after,.glitch-title::after{display:none!important}.hero h1{overflow-wrap:anywhere;line-height:1.32}.group-intro h2{line-height:1.4}}

/* Stepped, tiled reveal on desktop; text itself remains selectable and accessible. */
@media (min-width:701px) and (prefers-reduced-motion:no-preference) {
 .pixel-title,.glitch-title { position:relative; isolation:isolate; }
 .pixel-title.pixel-active::after,.glitch-title.pixel-active::after {
   content:"";position:absolute;inset:0;pointer-events:none;
   background:repeating-conic-gradient(#c6dfd0 0 25%,transparent 0 50%) 0 0 / 22px 22px;
   animation:pixel-tiles .68s steps(6,end) both;
 }
 @keyframes pixel-tiles {
   0% { opacity:.68;clip-path:inset(0 0 0 0);background-size:26px 26px; }
   50% { opacity:.42;clip-path:inset(0 25% 0 0);background-size:16px 16px; }
   85% { opacity:.12;clip-path:inset(0 0 0 88%);background-size:8px 8px; }
   100% { opacity:0;clip-path:inset(0 0 0 100%);background-size:4px 4px; }
 }
}
/* Keep carousel media and aside aligned in the same frame at every breakpoint. */
.gallery-frame .slider-shell::before { display:none; }
.gallery-frame .slider-shell::after { right:0;width:24px; }
.gallery-frame .slider-track { align-items:flex-start; }
.gallery-frame .work { flex-shrink:0; }
@media(max-width:700px) {
 .pixel-title::after,.glitch-title::after { display:none!important; }
 .portfolio-group[data-size=large] .gallery-aside { min-height:0; }
}

.directions-dropdown { position:relative; }
.directions-dropdown>a { display:block; padding:14px 0; }
.directions-dropdown>a::after { content:'⌄'; padding-left:5px; }
.directions-list { display:none;position:absolute;top:100%;left:-15px;min-width:260px;background:#1d1e1d;padding:12px 15px;border:1px solid #ffffff40;box-shadow:0 12px 24px #0009; }
.directions-dropdown:hover .directions-list,.directions-dropdown:focus-within .directions-list { display:flex;flex-direction:column; }
.directions-list a { display:block;padding:10px 4px;white-space:normal; }


/* iPhone layout: real DOM order (aside -> slider), no negative ordering or viewport hacks. */
html { max-width:100%; overflow-x:clip; -webkit-text-size-adjust:100%; }
body { max-width:100%; overflow-x:clip; }
main,section,.portfolio,.portfolio-group,.gallery-frame,.slider-shell,.gallery-aside,.group-intro { min-width:0; max-width:100%; }
.brand { min-width:0; }
.brand img { width:44px; height:44px; flex:none; object-fit:contain; }
.brand span { white-space:nowrap; }
.gallery-frame .slider-shell { grid-column:1; grid-row:1; }
.gallery-frame .gallery-aside { grid-column:2; grid-row:1; }
@media(max-width:900px){
 .desktop-menu,.head-contacts {display:none;}
 .menu-toggle {display:grid; margin-left:auto;}
}
@media(max-width:700px){
 html,body {width:100%; max-width:100%;overflow-x:hidden;}
 .site-header {left:0;right:0;width:100%;z-index:40;}
 .header-row {padding-inline:18px;min-height:60px;}
 .brand img {width:40px;height:40px;}
 .brand {font-size:clamp(18px,5vw,22px);}
 .mobile-menu:not([hidden]) {display:flex; z-index:41;}
 .sequence {height:215vh;height:215svh;max-width:100%;}
 .stage {height:100vh;height:100svh;}
 .hero {position:absolute;z-index:2;top:auto;bottom:clamp(95px,15vh,150px);left:18px;right:18px;transform:none;max-width:calc(100% - 36px);}
 .hero h1 {max-width:100%;font-size:clamp(26px,7vw,40px);line-height:1.3;overflow-wrap:anywhere;}
 .portfolio {padding:70px 0 90px;}
 .portfolio-kicker {overflow-wrap:anywhere;}
 .gallery-frame {display:flex; flex-direction:column; align-items:stretch; gap:18px; padding:0 var(--gutter); min-width:0;}
 .gallery-aside,.portfolio-group[data-size=large] .gallery-aside {order:0;position:static;width:100%;min-height:0;max-width:100%;padding:0;display:flex;flex-direction:column;align-items:stretch;gap:12px;}
 .gallery-frame .slider-shell {order:1;width:100%;max-width:100%;min-width:0;overflow:hidden;}
 .gallery-frame .slider-track {width:100%;max-width:100%;min-width:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;touch-action:pan-x;}
 .group-intro h2 {font-size:clamp(25px,7vw,37px);line-height:1.32;max-width:100%;overflow-wrap:anywhere;}
 .gallery-frame .slider-nav {margin:8px 0 0;}
 .gallery-frame .work,.portfolio-group[data-size=large] .work {--photo-h:clamp(310px,56vh,510px);width:100%;min-width:100%;max-width:100%;flex:0 0 100%;}
 .gallery-frame .work-open,.portfolio-group[data-size=large] .work-open {width:100%;height:var(--photo-h);}
 .gallery-frame .work-open img,.portfolio-group[data-size=large] .work-open img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
 .site-footer,.footer-grid,.footer-grid nav,.footer-grid>div {min-width:0;max-width:100%;}
 .footer-grid {display:grid;grid-template-columns:minmax(0,1fr);gap:24px;}
 .footer-grid>div:first-child {grid-column:auto;}
 .footer-grid nav,.footer-grid>div:last-child {align-items:stretch;}
 .site-footer a,.footer-grid a,.footer-bottom span {overflow-wrap:anywhere;}
 .next-direction {min-width:0;max-width:100%;}
 .next-direction strong {overflow-wrap:anywhere;}
 .text-page {min-width:0;max-width:100%;}
}