/* ML Media — D mockups (A's structure + B's gallery motion, native scroll) */
/* Syne and Inter are self-hosted with the other web fonts: fonts/web/fonts.css,
   linked from every page (generated by tools/fetch_fonts.py). */

/* Extra faces under trial (2026-09-24). Local copies for the mockups only:
   - Pink Blue (Rometheme, All Rights Reserved): NO accented letters at all
   - RUSH FLOW (ErgibiStudio, DEMO build): missing ő ű Ő Ű (paid build too); demo = personal use only.
     Its stacks list 'Protest Riot' next, so the browser draws just those four letters in
     Protest Riot (self-hosted, OFL). Decided 2026-09-26: keep RUSH FLOW for the hero.
   - Syne (Google Fonts, SIL OFL): full Hungarian + Italian, variable 400–800 */
/* Trial batch 2 (2026-09-24), Glyphonic: GC Avalance DEMO (56 glyphs, no accents, no €, personal-use only),
   GC Epic Pro (Extra Bold only, missing ő ű, all rights reserved) */
:root{
  --black:#0d0c0b; --black-2:#131211; --black-3:#1a1817;
  --white:#efe9df; --dim:rgba(239,233,223,.66); --faint:rgba(239,233,223,.42); --ghost:rgba(239,233,223,.16);
  --line:rgba(239,233,223,.12);
  --red:#e01b24; --red-hot:#ff3b33;
  /* TYPE SYSTEM (2026-09-24, from the user's edit-mode choices)
     display = big statements · caps = section titles + nav · accent = the emphasis word · mono = short supporting copy
     Trial faces lack Hungarian letters: each chain falls back to the closest complete face for just those letters. */
  --display:'ML Display','Montserrat','Syne',system-ui,sans-serif; /* Montserrat pinned to 500 = stroke of the old GC Avalance 400 (fonts/web/fonts.css) */
  --caps:'Syne',system-ui,sans-serif; /* Syne draws the ő ű Ő Ű that Epic Pro lacks: wide geometric like Epic Pro (Protest Riot's brush Ő clashed, 2026-09-26) */
  --accent:'Protest Riot','Syne',sans-serif;
  --serif:'Instrument Serif',Georgia,serif; --sans:'Epilogue',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --syne:'Syne',system-ui,sans-serif; --inter:'Inter',system-ui,sans-serif; --pinkblue:cursive; --rushflow:'Protest Riot',cursive;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --gut:clamp(16px,3vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);color:var(--white);scrollbar-color:#3a3633 var(--black);scrollbar-width:thin}
body{font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.02vw,18px);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
::selection{background:var(--red);color:var(--white)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid var(--red-hot);outline-offset:4px}
img,video{display:block;width:100%;height:100%;object-fit:cover}
html,body{overflow-x:clip}   /* safety net: content wider than the screen is cut, the page never pans sideways */
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
em{font-family:var(--accent);font-style:normal;font-weight:400;color:var(--red-hot);letter-spacing:0;padding-right:.04em}
.wrap{padding:0 var(--gut)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:16px var(--gut);transition:background .5s var(--ease),padding .5s var(--ease)}
.hdr.solid{background:rgba(13,12,11,.94);padding-top:10px;padding-bottom:10px}
.hdr .brand img{height:80px;width:auto;object-fit:contain}
.hdr nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,36px)}
.hdr nav a{font-size:15px;color:var(--dim);position:relative;transition:color .3s}
.hdr nav a:not(.btn){font-family:var(--caps);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.hdr nav a:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.hdr nav a:hover,.hdr nav a[aria-current]{color:var(--white)}
.hdr nav a:hover::after,.hdr nav a[aria-current]::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:13px 18px;border:1px solid var(--white);color:var(--white);transition:background .35s var(--ease),color .35s,border-color .35s}
.btn:hover{background:var(--white);color:var(--black)}
.btn:active{transform:translateY(1px)}
.btn.red{border-color:var(--red);background:var(--red)}
.btn.red:hover{background:var(--red-hot);border-color:var(--red-hot);color:var(--white)}
.btn svg{width:12px;height:12px}
.hdr .cta{padding:10px 14px}
.lang{display:flex;gap:10px;color:var(--faint)}
.lang a{font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.lang a[aria-current]{color:var(--white)}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
/* no CSS filter on video (GPU re-filters every frame at 4K): darken with a flat overlay instead */
.hero video{position:absolute;inset:0}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(10,9,8,.42);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,11,.55) 0%,transparent 26%,transparent 50%,rgba(13,12,11,.92) 100%)}
.hero .copy{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:clamp(28px,6vh,72px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,min(5.8vw,10vh),100px);line-height:1.02;letter-spacing:-.025em}
.hero h1 span{display:block;overflow:hidden;padding:.24em 0 .1em;margin:-.24em 0 -.1em}   /* room for accents above capitals (É Ő Ű) and descenders inside the reveal mask; layout unchanged */
.hero h1 span i{display:block;font-style:inherit;transform:translateY(140%);animation:rise 1.2s var(--ease) forwards}
.hero h1 span:nth-child(2) i{animation-delay:.12s}
@keyframes rise{to{transform:none}}
.hero .side{display:grid;gap:18px;justify-items:end;text-align:right}
.hero .side p{max-width:38ch;color:var(--dim);font-family:var(--mono);font-size:14.5px;line-height:1.6;letter-spacing:-.01em}
.hero .ctas{display:flex;gap:10px}
.tc{display:flex;gap:14px;align-items:center;color:var(--dim)}
.rec{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red);animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}

/* ---------- section heads ---------- */
.sec{padding:clamp(90px,14vh,170px) 0 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 var(--gut);margin-bottom:clamp(28px,5vh,56px)}
.head h2{font-family:var(--caps);font-weight:800;font-size:clamp(30px,4.4vw,78px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
.head p{color:var(--dim);max-width:44ch;font-family:var(--mono);font-size:14.5px;line-height:1.6;letter-spacing:-.01em}
.head .more{font-size:15px;color:var(--dim);white-space:nowrap;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.head .more:hover{color:var(--white);border-color:var(--red)}

/* ---------- services (A) ---------- */
.svc{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--gut);padding:0 var(--gut);align-items:center}
.svc > *{min-width:0}
.svc ol{list-style:none;border-top:1px solid var(--line)}
.svc li{border-bottom:1px solid var(--line)}
.svc li a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;padding:clamp(14px,2.2vh,24px) 0;color:var(--faint);transition:color .4s var(--ease),padding .5s var(--ease)}
.svc li a .t{font-family:var(--display);font-size:clamp(28px,3.1vw,54px);line-height:1.08;letter-spacing:-.02em}
.svc li a .d{display:block;font-family:var(--mono);font-size:14.5px;line-height:1.6;letter-spacing:-.01em;color:var(--dim);max-width:46ch;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .4s,margin .6s var(--ease)}
.svc li a .go{display:flex;align-items:center;gap:10px;color:var(--faint);font-family:var(--caps);font-weight:800;font-size:12px;letter-spacing:.06em;opacity:0;transform:translateX(-8px);transition:.45s var(--ease)}
.svc li.on a{color:var(--white);padding-left:14px}
.svc li.on a .d{max-height:6em;opacity:1;margin-top:6px}
.svc li.on a .go{opacity:1;transform:none;color:var(--red-hot)}
.peek{position:relative;justify-self:center;height:min(64vh,620px);width:min(100%, calc(min(64vh,620px) * 16 / 9));background:var(--black-2);overflow:hidden;transition:width .9s var(--ease-io)}
.peek.v{width:min(100%, calc(min(64vh,620px) * 9 / 16))}
.peek.p{width:min(100%, calc(min(64vh,620px) * 4 / 5))}
.peek.t{width:min(100%, calc(min(64vh,620px) * 2 / 3))}   /* portrait still (Photography) */
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.peek video{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.peek video.on{opacity:1}
.peek .ratio{position:absolute;left:12px;bottom:10px;z-index:2;color:var(--white);text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* ---------- mosaic (B, selectively) ---------- */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.tile{position:relative;overflow:hidden;background:var(--black-2) center/cover no-repeat;cursor:pointer;display:block}
/* reveal happens INSIDE the tile (the frame never opens a gap in the gapless grid):
   the caption rises in; the film is already there (poster = first frame of the loop) */
.tile.pre .cap{opacity:0;transform:translateY(18px)}
.tile .cap{transition:opacity .9s var(--ease) .15s,transform 1.1s var(--ease) .15s}
.tile video,.tile img{position:absolute;inset:0;transition:transform 1.4s var(--ease),opacity .5s var(--ease)}
.tile::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(10,9,8,.55);opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.tile video{opacity:0}.tile video.ready{opacity:1}
.tile:hover video{transform:scale(1.045)}
.mosaic.dim .tile:not(:hover)::before{opacity:1}
.tile::after{content:"";position:absolute;inset:auto 0 0;height:50%;background:linear-gradient(transparent,rgba(13,12,11,.72));pointer-events:none}
.tile .cap{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.tile .cap .c{color:var(--dim)}
.tile .cap h3{font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,36px);line-height:1.05;margin-top:4px}
.tile .cap .k{color:var(--faint);text-align:right;opacity:0;transform:translateY(6px);transition:.5s var(--ease)}
.tile:hover .cap .k,.tile:focus-visible .cap .k{opacity:1;transform:none}
.tile .play{position:absolute;z-index:2;top:16px;right:16px;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(-6px);transition:.5s var(--ease)}
.tile:hover .play,.tile:focus-visible .play{opacity:1;transform:none}
.t-a{grid-column:span 4;aspect-ratio:16/9}
.t-b{grid-column:span 2}
.t-c{grid-column:span 2;aspect-ratio:4/5}
.t-d{grid-column:span 3;aspect-ratio:16/10}
.t-w{grid-column:span 6;aspect-ratio:21/8}

/* ---------- vertical teaser ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(200px,17vw,300px);gap:clamp(12px,1.2vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 18px;scrollbar-width:thin}
.phone{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--black-2);scroll-snap-align:start;display:block;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.phone video{transition:transform 1.2s var(--ease)}
.phone:hover video{transform:scale(1.04)}
.phone .meta{position:absolute;inset:auto 0 0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(13,12,11,.85));opacity:0;transform:translateY(8px);transition:.45s var(--ease)}
.phone:hover .meta,.phone:focus-visible .meta{opacity:1;transform:none}
.phone .meta b{display:block;font-family:var(--display);font-weight:400;font-size:20px;line-height:1.1;margin-top:3px}
.phone .meta .c{color:var(--dim)}

/* ---------- photo teaser ---------- */
.stills{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(12px,1.2vw,20px);padding:0 var(--gut);height:min(80vh,820px)}
.stills a{position:relative;overflow:hidden;background:var(--black-2);display:block}
.stills a:first-child{grid-row:span 2}
.stills img{transition:transform 1.4s var(--ease)}
.stills a:hover img{transform:scale(1.04)}
.stills .lbl{position:absolute;left:14px;bottom:12px;z-index:2;color:var(--white);text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* ---------- aperture moment ---------- */
.latest{position:relative;height:210vh;margin-top:clamp(90px,14vh,170px)}
.latest .pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,80px);padding:90px var(--gut) 50px}
.latest h2{font-family:var(--caps);font-weight:800;font-size:clamp(30px,4vw,70px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;margin-bottom:18px}
.latest .lead{color:var(--dim);max-width:42ch;margin-bottom:26px;font-family:var(--mono);font-size:14.5px;line-height:1.6;letter-spacing:-.01em}
.iris{position:relative;width:min(70vh,46vw);aspect-ratio:1;justify-self:end}
.iris canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.iris .src{position:absolute;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:.01;pointer-events:none}
.iris .src video{width:2px;height:2px}
.hud{position:absolute;left:0;right:0;top:-30px;display:flex;justify-content:space-between;color:var(--dim)}
.hud b{color:var(--white);font-weight:500}
.list{list-style:none;max-width:520px;border-top:1px solid var(--line)}
.list li{border-bottom:1px solid var(--line)}
.list a{display:grid;grid-template-columns:3em 1fr auto;gap:12px;align-items:baseline;padding:12px 0;color:var(--dim);transition:padding .5s var(--ease)}
.list a .t{font-family:var(--display);font-size:clamp(19px,1.5vw,26px);color:var(--white);line-height:1.15}
.list a .k{color:var(--faint)}
.list li.on a{padding-left:12px}
.list li.on a .n{color:var(--red)}

/* ---------- contact (A) ---------- */
.contact{margin-top:clamp(90px,14vh,170px);border-top:1px solid var(--line);padding:clamp(70px,12vh,140px) var(--gut) 28px}
.contact .big{font-family:var(--display);font-size:clamp(44px,5.8vw,104px);line-height:1;letter-spacing:-.03em;max-width:13ch}
.contact .row{display:grid;grid-template-columns:2.3fr 1fr 1fr;gap:var(--gut);margin-top:clamp(36px,6vh,64px);align-items:start}
.contact .row p{color:var(--dim);max-width:40ch}
.contact ul{list-style:none;display:grid;gap:9px;color:var(--dim)}
.contact ul a:hover{color:var(--white)}
.contact .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;color:var(--faint);margin-top:clamp(50px,9vh,100px);padding-top:18px;border-top:1px solid var(--line)}

/* ---------- player overlay (FLIP) ---------- */
.player{position:fixed;z-index:90;overflow:hidden;background:#000;visibility:hidden;pointer-events:none}
.player.open{visibility:visible;pointer-events:auto}
.player video{position:absolute;inset:0;object-fit:contain;background:#000}
.player .bar{position:absolute;z-index:3;left:var(--gut);right:var(--gut);top:18px;display:flex;justify-content:space-between;align-items:center;opacity:0;transition:opacity .4s}
.player .foot{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:22px;display:grid;gap:14px;opacity:0;transform:translateY(10px);transition:.5s var(--ease)}
.player.shown .bar,.player.shown .foot{opacity:1;transform:none;transition-delay:.35s}
.player h2{font-family:var(--display);font-weight:400;font-size:clamp(36px,5vw,84px);line-height:.95;letter-spacing:-.02em}
.player .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.player .meta .c{color:var(--dim);margin-bottom:8px}
.player .ctrl{display:flex;gap:18px;align-items:center}
.player .ctrl button{display:flex;align-items:center;gap:8px;color:var(--white);opacity:.85;padding:6px 0}
.player .ctrl button:hover{opacity:1}
.player .prog{position:relative;height:18px;cursor:pointer}
.player .prog::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--ghost)}
.player .prog i{position:absolute;left:0;top:8px;height:2px;background:var(--red);width:0}
.player::after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none;z-index:2}
.player::before{content:"";position:absolute;inset:0 0 auto;height:18%;background:linear-gradient(rgba(0,0,0,.55),transparent);pointer-events:none;z-index:2}

/* ---------- page intro (vertical / photo) ---------- */
.intro{padding:clamp(130px,20vh,220px) var(--gut) clamp(36px,6vh,64px);display:grid;grid-template-columns:1.3fr 1fr;gap:var(--gut);align-items:end}
.intro h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,6.4vw,118px);line-height:1;letter-spacing:-.03em}
.intro p{color:var(--dim);max-width:52ch;font-family:var(--mono);font-size:14.5px;line-height:1.65;letter-spacing:-.01em}
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--gut);margin-bottom:clamp(22px,4vh,40px)}
.filters button{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--line);color:var(--dim);transition:border-color .3s,color .3s,background .3s}
.filters button:hover{border-color:var(--faint);color:var(--white)}
.filters button[aria-pressed="true"]{border-color:var(--white);background:var(--white);color:var(--black)}
.filters button sup{margin-left:6px;opacity:.6;font-size:9px}

/* vertical grid */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(170px,15vw,280px),1fr));gap:clamp(12px,1.2vw,22px);padding:0 var(--gut)}
.vgrid .phone{transition:opacity .45s var(--ease),transform .6s var(--ease)}
.vgrid .phone.out{display:none}
.vgrid .phone .meta{opacity:1;transform:none;background:linear-gradient(transparent,rgba(13,12,11,.8))}
.vgrid .phone .cat{position:absolute;top:12px;left:12px;z-index:2;color:var(--white);background:rgba(13,12,11,.7);padding:4px 8px;border-radius:99px}

/* swipe player (vertical) */
/* ---------- vertical swipe player ----------
   Flat rgba surfaces only: no filter/backdrop-filter on or over playing video
   (lags the user's 4K screen). The soft glow is d-fx.js's tiny upscaled canvas. */
.swipe{position:fixed;inset:0;z-index:95;background:rgba(8,7,7,.96);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:clamp(28px,3.4vw,64px);padding:0 var(--gut);visibility:hidden;opacity:0;transition:opacity .45s var(--ease),visibility 0s .45s}
.swipe.open{visibility:visible;opacity:1;transition:opacity .45s var(--ease)}
/* once faded in, stop drawing the page underneath: cleaner, and nothing composited behind the glow */
body.locked .hdr,body.locked .intro,body.locked .filters,body.locked .vgrid,body.locked footer.contact,body.locked .note{visibility:hidden;transition:visibility 0s linear .45s}
.swipe .stage{position:relative;height:min(90svh,1000px);aspect-ratio:9/16;border-radius:22px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9);touch-action:none}
.swipe .clip{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#000;isolation:isolate}
.swipe .clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:transform;transition:transform .5s var(--ease)}
.swipe .clip video.on{opacity:1}
.swipe .prog{position:absolute;left:14px;right:14px;top:12px;height:2px;background:rgba(255,255,255,.22);z-index:3;border-radius:2px;overflow:hidden;pointer-events:none}
.swipe .prog i{display:block;height:100%;width:0;background:var(--white)}
.swipe .pp{position:absolute;left:50%;top:50%;z-index:3;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(8,7,7,.55);color:var(--white);display:grid;place-items:center;opacity:0;transform:scale(.85);transition:opacity .3s,transform .35s var(--ease);pointer-events:none}
.swipe .pp.show{opacity:1;transform:none}
.swipe .pp svg{width:22px;height:22px;margin-left:3px}
/* left: what you're watching */
.swipe .side{display:grid;align-content:center;min-width:0}
.swipe .side.l{justify-items:end;text-align:right}
.swipe .meta-in{display:grid;gap:14px;justify-items:inherit}
.swipe .c{color:var(--dim)}
.swipe .k{color:var(--faint)}
.swipe h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,2.8vw,50px);line-height:1.04;letter-spacing:-.01em;max-width:13ch;text-wrap:balance}
/* right: controls */
.swipe .side.r{justify-items:start;gap:26px}
.swipe .ctl{display:grid;justify-items:center;gap:12px}
.swipe .rnd,.swipe .pill,.swipe .x{color:var(--white);background:rgba(239,233,223,.07);border:1px solid rgba(239,233,223,.16);cursor:pointer;transition:background-color .25s,border-color .25s,transform .2s var(--ease)}
.swipe .rnd:hover,.swipe .pill:hover,.swipe .x:hover{background:rgba(239,233,223,.15);border-color:rgba(239,233,223,.42)}
.swipe .rnd:active,.swipe .pill:active,.swipe .x:active{transform:scale(.95)}
.swipe .rnd:focus-visible,.swipe .pill:focus-visible,.swipe .x:focus-visible{outline:2px solid var(--red-hot);outline-offset:3px}
.swipe .rnd{width:52px;height:52px;border-radius:50%;display:grid;place-items:center}
.swipe .rnd svg{width:16px;height:16px}
.swipe .count{color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.swipe .count b{color:var(--white);font-weight:500}
.swipe .pill,.swipe .x{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.swipe .x{position:absolute;top:22px;right:var(--gut);z-index:2;padding:0 14px 0 18px}
.swipe .x kbd{font:inherit;font-size:10px;color:var(--faint);border:1px solid rgba(239,233,223,.2);border-radius:4px;padding:2px 5px;margin-left:2px}
.swipe .hint{color:var(--faint);font-size:11px;letter-spacing:.08em;max-width:24ch;line-height:1.6;transition:opacity .6s}
.swipe.used .hint{opacity:0}

/* photo: justified rows */
.set{padding:0 var(--gut);margin-bottom:clamp(70px,12vh,140px)}
.set .sethead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:clamp(16px,2.4vh,26px)}
.set h2{font-family:var(--caps);font-weight:800;font-size:clamp(24px,2.6vw,44px);line-height:1;text-transform:uppercase}
.set .sethead .c{color:var(--dim)}
.jrow{display:flex;gap:10px;margin-bottom:10px}
.jrow a{position:relative;display:block;overflow:hidden;background:var(--black-2);flex:none}
.jrow img{transition:transform 1.2s var(--ease),opacity .6s}
.jrow a:hover img{transform:scale(1.035)}
/* photo: categories — one row of four, "View all" opens the rest */
.filters a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--line);color:var(--dim);transition:border-color .3s,color .3s,background .3s}
.filters a:hover{border-color:var(--faint);color:var(--white)}
.filters a sup{margin-left:6px;opacity:.6;font-size:9px}
.set{scroll-margin-top:110px}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pgrid a{position:relative;display:block;overflow:hidden;background:var(--black-2);aspect-ratio:var(--r,3/2)}
.pgrid a.more-i{display:none}
.set.all .pgrid a.more-i{display:block}
.pgrid img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pgrid a:hover img{transform:scale(1.035)}
.pgrid.contain img{object-fit:contain}   /* mixed-shape categories (Graphics): show the whole piece, letterboxed */
.pgrid a .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(transparent,rgba(10,9,9,.72));color:var(--white);font-size:10px;opacity:0;transition:opacity .4s}
.pgrid a:hover .cap,.pgrid a:focus-visible .cap{opacity:1}
.set .viewall{margin-top:18px;display:inline-flex;align-items:center;gap:10px}
.set .viewall svg{transition:transform .4s var(--ease)}
.set.all .viewall svg{transform:rotate(180deg)}
@media (max-width:980px){.pgrid{grid-template-columns:repeat(2,1fr)}}
.pending{border:1px dashed var(--line);padding:clamp(28px,5vh,56px);color:var(--dim);display:grid;gap:10px;max-width:760px}
.pending b{font-family:var(--display);font-weight:400;font-size:28px;color:var(--white)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:95;background:#0a0909;display:grid;grid-template-rows:auto 1fr auto;visibility:hidden;opacity:0;transition:opacity .4s var(--ease),visibility 0s .4s}
.lb.open{visibility:visible;opacity:1;transition:opacity .4s var(--ease)}
.lb .top,.lb .bot{display:flex;justify-content:space-between;align-items:center;padding:18px var(--gut);color:var(--dim)}
.lb .fig{position:relative;display:grid;place-items:center;padding:0 var(--gut);min-height:0}
.lb .fig img{max-width:100%;max-height:calc(100svh - 130px);width:auto;height:auto;object-fit:contain;transition:opacity .35s}
.lb button{display:flex;align-items:center;gap:8px;color:var(--white);opacity:.8;padding:6px 0}
.lb button:hover{opacity:1}

/* reveal on enter (used sparingly) */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}

.note{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;background:rgba(13,12,11,.9);border:1px solid var(--line);padding:8px 14px;color:var(--faint);white-space:nowrap}
.note a{color:var(--white)}

@media (max-width:980px){
  .hdr nav a.hide-m{display:none}
  .svc li a{grid-template-columns:minmax(0,1fr)}.svc li a .go{justify-self:start}   /* phones: label below the text, not past the edge */
  .svc li{scroll-margin-top:96px}   /* clears the fixed header when an opened row scrolls up */
  .svc li .peek{order:0;margin:2px 0 22px}   /* phones/tablets: the preview sits inside the open row */
  .svc{grid-template-columns:1fr}.peek{order:-1;height:auto;aspect-ratio:16/9;width:100%}.peek.v{width:min(100%,calc(62vh*9/16));aspect-ratio:9/16}.peek.p{width:min(100%,calc(62vh*4/5));aspect-ratio:4/5}.peek.t{width:min(100%,calc(62vh*2/3));aspect-ratio:2/3}
  .t-a,.t-b,.t-c,.t-d,.t-w{grid-column:span 6;aspect-ratio:16/10}
  .latest{height:auto}.latest .pin{position:relative;height:auto;grid-template-columns:1fr}
  .iris{width:100%;justify-self:center;margin-top:40px}
  .contact .row{grid-template-columns:1fr 1fr}
  .intro{grid-template-columns:minmax(0,1fr)}   /* the column may not grow to fit a long word: the heading shrinks instead (fitHeads) */
  .stills{grid-template-columns:1fr;grid-template-rows:auto;height:auto}.stills a{aspect-ratio:4/3}.stills a:first-child{grid-row:auto}
  .hero .copy{flex-direction:column;align-items:flex-start}.hero .side{justify-items:start;text-align:left}.hero .tc{display:none}
  .swipe{grid-template-columns:1fr;padding:0}.swipe .side{display:none}.swipe .stage,.swipe .clip{height:100svh;border-radius:0}.swipe .stage{box-shadow:none;width:min(100vw,calc(100svh * 9 / 16));aspect-ratio:auto;justify-self:center}.swipe .x{top:calc(24px + env(safe-area-inset-top));right:14px}.swipe .side.r{display:block;position:absolute;left:14px;top:calc(24px + env(safe-area-inset-top));z-index:3}.swipe .side.r .ctl,.swipe .side.r .hint{display:none}.swipe .side.r .pill,.swipe .x{background:rgba(8,7,7,.55);border-color:rgba(239,233,223,.28)}.swipe .x kbd{display:none}
  .note{display:none}
}
@media (max-width:640px){ .hdr .lang{display:none} .hdr .brand img{height:54px} }
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .hero h1 span i{transform:none}.tile.pre .cap{opacity:1;transform:none}.rv{opacity:1;transform:none}
}

/* small phones: the wide display faces need their own floor */
h1,h2,h3{overflow-wrap:break-word}
@media (max-width:640px){
  .head{flex-wrap:wrap;row-gap:10px}
  .head h2{font-size:clamp(24px,8vw,40px)}
  .set .sethead{flex-wrap:wrap;row-gap:6px}   /* category label drops under the title on narrow phones */
  .intro h1{font-size:clamp(34px,10.5vw,56px)}
  .contact .big{font-size:clamp(34px,10vw,52px)}
  .latest h2{font-size:clamp(24px,8vw,40px)}
}

em{text-transform:uppercase}   /* free-font build: matches RUSH FLOW's all-caps accent */