/* Mori by Inari Type (Caio Kondo & Satsuki Arakaki), via Pangram Pangram.
   Licensed webfont files go in assets/fonts/; until then the fallback stack is used. */
@font-face { font-family:"PP Mori"; font-weight:400; font-style:normal; font-display:swap; src:local("PP Mori Regular"),local("PPMori-Regular"),url("../assets/fonts/PPMori-Regular.woff2") format("woff2"); }
@font-face { font-family:"PP Mori"; font-weight:600 800; font-style:normal; font-display:swap; src:local("PP Mori SemiBold"),local("PPMori-SemiBold"),url("../assets/fonts/PPMori-SemiBold.woff2") format("woff2"); }

:root { --ink:#121313; --paper:#e9e6df; --white:#f8f6f1; --ease:cubic-bezier(.22,1,.36,1); --font:"PP Mori","Mori","Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--white); font-family:var(--font); }
body.on-home { overflow:hidden; }
button, a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
button:focus-visible, a:focus-visible { outline:2px solid #efc390; outline-offset:5px; }
[hidden] { display:none!important; }

.app { min-height:100svh; overflow:hidden; }

/* ---------- Home ---------- */
/* Full-screen film; the About text floats over its right sixth, behind a 3D divider line */
.home { --aside-w:max(200px,16.667vw); position:relative; height:100svh; overflow:hidden; }
.hero { position:absolute; inset:0; isolation:isolate; background:#111315; overflow:hidden; }
.hero-video { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; pointer-events:none; }
/* Never show the browser's own play button over the film (iOS shows one when autoplay is held) */
.hero-video::-webkit-media-controls, .hero-video::-webkit-media-controls-start-playback-button, .hero-video::-webkit-media-controls-overlay-play-button { display:none !important; -webkit-appearance:none; }

.topline { position:absolute; top:4.2%; left:4.2%; right:4.2%; display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:15px; }
.logo-placeholder { width:64px; border:0; background:none; padding:0; color:white; cursor:pointer; text-align:center; }
.logo-placeholder svg { width:57px; height:53px; display:block; }
.logo-placeholder span { font-size:7px; letter-spacing:.14em; opacity:.66; white-space:nowrap; }
.brand { margin:2px 0 0; font-family:var(--font); font-size:clamp(23px,2.7vw,44px); font-weight:400; letter-spacing:.19em; white-space:nowrap; line-height:1.1; }

.film-link { position:absolute; top:20%; bottom:29%; left:20%; right:20%; border:0; background:transparent; color:var(--white); cursor:pointer; z-index:1; }
.film-link span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0; border:1px solid rgba(255,255,255,.9); border-radius:99px; padding:14px 23px; letter-spacing:.2em; font-size:10px; white-space:nowrap; transition:opacity .4s var(--ease); }
.film-link:hover span, .film-link:focus-visible span { opacity:1; }
.film-link span { display:inline-flex; align-items:center; gap:8px; }
.film-link svg { width:9px; height:9px; flex:none; }

/* Text menu stacked in the bottom-left corner; always white (it doesn't follow the picture) */
.navigation { position:absolute; bottom:6%; left:4.5%; z-index:5; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.nav-link { border:0; background:none; padding:4px 0; color:#fff; font-size:clamp(13px,1vw,16px); font-weight:700; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; transition:color .35s ease;
  text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.35); }
.nav-link:hover,.nav-link:focus-visible { color:rgb(191,136,96); }

/* About: transparent, same footprint (right sixth), text over the film */
.aside { position:absolute; top:0; right:0; bottom:0; width:var(--aside-w); z-index:4; color:#fff; display:flex; flex-direction:column; justify-content:center; padding:0 clamp(18px,1.8vw,40px); }
.aside-copy { text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 14px rgba(0,0,0,.45); }
.aside-copy h2 { font:400 clamp(19px,1.9vw,40px)/1.1 var(--font); margin:0 0 28px; letter-spacing:-.02em; }
.aside-copy p { font-size:clamp(11px,.82vw,15px); line-height:1.75; letter-spacing:.015em; color:rgba(255,255,255,.88); max-width:30ch; }

/* ---------- Page-turn between film and photographs ---------- */
/* --split: divider position (px from the left; from the top on mobile). Unset = resting at the About edge. */
.photo-stage { position:absolute; inset:0; z-index:-2; visibility:hidden; clip-path:inset(0 0 0 var(--split,100%)); background:#000; }
.home.flipping .photo-stage, .home.photo-mode .photo-stage { visibility:visible; }
.photo-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease; }
.photo-stage img.shown { opacity:1; }

.split { position:absolute; top:0; bottom:0; left:var(--split,calc(100% - var(--aside-w))); width:0; z-index:6; pointer-events:none; }
/* A fine glowing hairline, brightest in the middle and fading out at both ends */
.split::before { content:""; position:absolute; top:0; bottom:0; left:0; width:1px; transform:translateX(-50%);
  background:linear-gradient(180deg,transparent 0,rgba(255,255,255,.8) 22%,#fff 50%,rgba(255,255,255,.8) 78%,transparent 100%);
  box-shadow:0 0 0 .5px rgba(0,0,0,.35),0 0 8px rgba(255,255,255,.5),0 0 22px rgba(255,255,255,.18); transition:opacity .4s ease; }
/* Soft page shadow on the revealed side while turning */
.split::after { content:""; position:absolute; top:0; bottom:0; left:0; width:70px; background:linear-gradient(90deg,rgba(0,0,0,.45),transparent); opacity:0; transition:opacity .3s ease; }
.home.flipping .split::after { opacity:1; }
/* Round frosted-glass button with a chevron; fills white on hover. The chevron turns to point
   the way the page will turn. */
.split-toggle { position:absolute; left:0; top:50%; transform:translate(-50%,-50%); pointer-events:auto; display:grid; place-items:center; width:42px; height:42px; padding:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.75); background:rgba(20,20,20,.28); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); color:#fff; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25);
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,scale .35s var(--ease); }
.split-toggle svg { width:16px; height:16px; transition:transform .5s var(--ease); }
.split-toggle:hover,.split-toggle:focus-visible { background:#fff; color:#111; border-color:#fff; scale:1.08; }
/* Parked at the far left: keep the line and button on screen, chevron points back right */
/* Parked at the far left the line is hidden; only the button remains */
.home.photo-mode .split::before { transform:none; opacity:0; }
.home.photo-mode .split-toggle { transform:translate(0,-50%); }
.home.photo-mode .split-toggle svg, .home.returning .split-toggle svg { transform:rotate(180deg); }

/* ---------- Inner pages ---------- */
.page { min-height:100svh; padding:34px clamp(23px,5vw,90px) 80px; background:#111315; display:none; }
/* Opacity only: a transform here would trap the Works page's fixed overlays */
.page.active { display:block; animation:enter .7s var(--ease) both; }
@keyframes enter { from { opacity:0; } to { opacity:1; } }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Works ---------- */
.works-page { --strip-w:clamp(64px,5.5vw,96px); padding:0; background:#000; color:#fff; }
.works-filter button, .works-view button { border:0; background:none; color:#fff; padding:0; font-size:11px; font-weight:700; letter-spacing:.14em; cursor:pointer; text-shadow:0 1px 3px rgba(0,0,0,.6); }
/* Generous hit areas, and padded containers act as a no-click-through zone around the labels,
   so a slightly-off click never lands on the full-screen work underneath. */
/* On Works the site bar floats over the full-screen work, left of the thumbnail strip */
.works-filter { position:fixed; left:clamp(18px,2vw,32px); top:50%; transform:translateY(-50%); z-index:12; display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:14px 20px 14px 14px; margin-left:-14px; }
.works-view { position:fixed; left:clamp(18px,2vw,32px); bottom:clamp(18px,4vh,36px); z-index:12; display:flex; gap:6px; padding:14px 20px 14px 14px; margin:0 0 -14px -14px; }
.works-filter button, .works-view button { display:flex; align-items:center; gap:7px; padding:5px 6px 5px 0; color:rgba(255,255,255,.5); transition:color .3s ease; }
.works-filter small { font-size:8px; letter-spacing:.06em; }
/* Flat dot in front of each label: dim when off, white when selected */
.works-filter button::before, .works-view button::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.6; transition:opacity .3s ease; }
.works-filter button.active, .works-view button.active { color:#fff; }
.works-filter button.active::before, .works-view button.active::before { opacity:1; }
.works-filter button:hover, .works-view button:hover { color:#fff; }

/* List view: one full-screen work per screen */
html.works-snap { scroll-snap-type:y mandatory; }
/* No page scrollbar on Works, so the thumbnail strip reaches the right edge */
html.works-open { scrollbar-width:none; }
html.works-open::-webkit-scrollbar { display:none; }
/* Each work fills the whole screen; the thumbnail strip floats over its right edge */
.work-slide { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100svh; scroll-snap-align:start; border:0; padding:0 calc(var(--strip-w) + 6vw) 0 6vw; color:#fff; cursor:pointer; background:#000 center/cover no-repeat; text-align:center; }
.work-slide-sub { font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.work-slide-title { margin-top:12px; font:400 clamp(38px,5.4vw,88px)/1 var(--font); letter-spacing:-.02em; text-shadow:0 2px 16px rgba(0,0,0,.45); }
.work-slide-cta { display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:10px; letter-spacing:.2em; opacity:0; transition:opacity .4s ease; }
.work-slide-cta svg { width:9px; height:9px; flex:none; }
.work-slide:hover .work-slide-cta, .work-slide:focus-visible .work-slide-cta { opacity:1; }

/* Thumbnail strip on the right, follows the work on screen, styled as a strip of film with
   a transparent base: each thumbnail a frame with a narrow gap between frames, and a row of
   sprocket holes down both edges that travels with the frames. Marked off from the work by a
   3D vertical line; the frames sit in a window inset from its top and bottom. The track is
   slid with a transform (from main.js) to keep the current frame in view. */
.work-strip { --pad:clamp(16px,3vh,32px); --hole:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14'%3E%3Crect x='1' y='3' width='6' height='8' rx='1.6' fill='%23d6d0c6'/%3E%3C/svg%3E");
  position:fixed; top:0; right:0; bottom:0; width:var(--strip-w); z-index:11; overflow:hidden; background:transparent; padding:var(--pad) 0; }
.strip-window { position:relative; height:100%; overflow:hidden; }

/* Follow the pointer quickly while it browses the strip */
.work-strip.browsing .strip-track { transition:transform .2s ease-out; }
.strip-track { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:72px 0 72px 4px; /* room so the first and last frames can sit flat, clear of the roll-up */
  transition:transform .6s var(--ease); }
/* Sprocket holes: one row per hole pitch (built in main.js), each rolled round the same axis
   as the frames so the holes wind away with the film */
.strip-holes { position:absolute; inset:0; pointer-events:none; }
.hole-row { position:absolute; left:0; right:0; height:14px; top:calc(var(--r) * 14px);
  background:var(--hole) left 3px top 0 / 8px 14px no-repeat, var(--hole) right 3px top 0 / 8px 14px no-repeat; backface-visibility:hidden; }
/* Frames: a thin black frame line, with an 8px gap between frames */
/* Each frame's picture is carried by horizontal slices (built in main.js). Near the top and
   bottom edges main.js lays every slice on an invisible axis so the frame bends round it;
   a slice's back face is hidden once it has swung behind. The frame line is dropped while
   bending. Enlarging uses the separate `scale` property so it eases without lagging the roll. */
.strip-thumb { position:relative; flex:none; width:60%; aspect-ratio:4/5; border:0; padding:0; cursor:pointer; background:transparent; box-shadow:0 0 0 1px #000;
  perspective:300px; transition:scale .35s var(--ease),box-shadow .35s ease; }
.strip-thumb.rolling { box-shadow:none; }
.strip-slice { position:absolute; left:0; right:0; top:calc(var(--k) * 100% / 8); height:calc(100% / 8 + .5px); pointer-events:none;
  /* "cover" crop worked out in main.js (--bw/--bh size, --bx/--by offset, --sh slice height) */
  background:#222 var(--img) no-repeat; background-size:var(--bw,100%) var(--bh,800%);
  background-position:var(--bx,0px) calc(var(--by,0px) - var(--k) * var(--sh,0px));
  backface-visibility:hidden; }
.strip-thumb.active { z-index:2; scale:1.12; box-shadow:0 0 0 2px #fff,0 4px 10px rgba(0,0,0,.5); }
.strip-thumb:hover, .strip-thumb:focus-visible { z-index:3; scale:1.3; box-shadow:0 0 0 2px #fff,0 6px 16px rgba(0,0,0,.7); }


/* Grid view: four per row, gutters around and between */
/* Side gutters match, wide enough to clear the floating filter labels on the left */
.work-grid { --gutter:clamp(210px,13vw,260px); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:90px var(--gutter) 80px; }
.grid-item { position:relative; aspect-ratio:1/1; border:0; padding:0; overflow:hidden; cursor:pointer; background:#151515 center/cover no-repeat; color:#fff; text-align:left; opacity:0; transition:opacity .5s ease; }
.grid-item.loaded { opacity:1; }
.grid-info { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:16px; background:rgba(0,0,0,.72); opacity:0; transition:opacity .35s ease; }
.grid-item:hover .grid-info, .grid-item:focus-visible .grid-info { opacity:1; }
.grid-info-title { font:400 clamp(16px,1.3vw,22px)/1.15 var(--font); }
.grid-info-sub { font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); }
/* ---------- Logo + company name: fixed top left, the same spot on every page ---------- */
.brand-lockup { position:fixed; top:22px; left:clamp(18px,2.8vw,48px); z-index:25; display:flex; align-items:center; gap:10px; padding:0; border:0; background:none; color:#fff; cursor:pointer; transition:color .4s ease; }
.brand-lockup img { display:block; width:46px; height:46px; object-fit:contain; transition:filter .4s ease; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.brand-lockup span { font:clamp(18px,1.7vw,24px) var(--font); letter-spacing:.19em; white-space:nowrap; line-height:1; text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.35); }
.brand-lockup.ink-dark { color:#111; }
.brand-lockup.ink-dark img { filter:brightness(0); }
.brand-lockup.ink-dark span { text-shadow:0 1px 3px rgba(255,255,255,.55); }
@media (max-width:800px) {
  .brand-lockup { top:14px; left:16px; gap:8px; }
  .brand-lockup img { width:34px; height:34px; }
  .brand-lockup span { font-size:15px; letter-spacing:.14em; }
}

/* ---------- Site bar (every page except home; built in main.js) ----------
   Fixed at top right, level with the logo + name at top left; HOME + page links packed together. The current page
   is white, the others dimmed like the Works filters. */
.site-bar { position:fixed; top:22px; right:calc(clamp(64px,5.5vw,96px) + 18px); z-index:25; height:46px; display:flex; align-items:center; justify-content:flex-end; gap:20px; }
/* The bar is fixed (same spot on every page), so Work with us and Contact leave room for it */
.process-page, .contact-page { padding-top:80px; }
.site-brand { border:0; background:none; padding:0; color:#fff; font:24px var(--font); letter-spacing:.19em; cursor:pointer; transition:color .4s ease; }
.site-nav { display:flex; align-items:center; gap:clamp(18px,2vw,30px); }
.site-nav button { border:0; background:none; padding:8px 0; color:rgba(255,255,255,.5); font-size:11px; font-weight:700; letter-spacing:.14em; cursor:pointer; transition:color .3s ease; }
.site-nav button.current, .site-nav button:hover, .site-nav button:focus-visible { color:#fff; }
/* Drop shadow on the menu and TRIA PRIMA on every page, so they read over any picture */
.site-nav button, .site-brand { text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.35); }
.page-kicker { margin:13vh 0 18px; font-size:11px; letter-spacing:.3em; color:#b8afa3; }
.page-title { font:400 clamp(68px,12vw,175px)/.9 var(--font); margin:0 0 65px; }

.page-description { max-width:740px; color:#c5c0b9; font:clamp(23px,3vw,42px)/1.45 var(--font); }
.email { color:white; font:clamp(24px,4.4vw,62px) var(--font); overflow-wrap:anywhere; text-decoration-thickness:1px; text-underline-offset:8px; }
/* ---------- Work with us ----------
   Two columns on black: left, ABOUT US, the company intro and the closing statement; right, two
   banners divided by white lines with a soft glow, each opening its text underneath (one at a time). */
.process-page { background:#000; }
.process-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(36px,6vw,110px); margin-top:clamp(40px,8vh,100px); align-items:start; }
.process-heading { margin:0 0 clamp(18px,3vh,32px); font:800 clamp(40px,min(4.6vw,8.5vh),88px)/.92 var(--font); letter-spacing:-.02em; text-transform:uppercase; }
.process-about { max-width:46em; margin:0; font-size:clamp(15px,min(1.2vw,2.2vh),19px); line-height:1.6; color:rgba(255,255,255,.85); }

/* The banners sit centred against the left column */
.banners { margin-top:0; align-self:center; }
.banner { position:relative; }
.banner::before, .banners::after { content:""; display:block; height:1px; background:#fff; box-shadow:0 0 8px rgba(255,255,255,.55),0 0 22px rgba(255,255,255,.2); }
.banner-heading { margin:0; }
.banner-toggle { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:clamp(18px,3vh,34px) 0; border:0; background:none; color:#fff; cursor:pointer; text-align:left;
  font:800 clamp(24px,min(2.6vw,6vh),48px)/.95 var(--font); letter-spacing:-.02em; text-transform:uppercase; }
/* The hint: a small ring of words turning slowly round a plus (a minus once open) */
.banner-ring { flex:none; width:clamp(54px,4.6vw,72px); aspect-ratio:1; }
.banner-ring svg { display:block; width:100%; height:100%; overflow:visible; }
.banner-ring text { font:600 8.6px var(--font); letter-spacing:.24em; text-transform:uppercase; fill:rgba(255,255,255,.72); transition:opacity .4s ease; }
.ring-words { transform-box:view-box; transform-origin:50% 50%; animation:ring-turn 18s linear infinite; }
@keyframes ring-turn { to { transform:rotate(360deg); } }
.ring-mark { stroke:#fff; stroke-width:1.4; stroke-linecap:round; transform-box:view-box; transform-origin:50% 50%; transition:transform .45s var(--ease); }
.ring-close { opacity:0; }
.banner.open .ring-open { opacity:0; }
.banner.open .ring-close { opacity:1; }
.banner.open .ring-down { transform:scaleY(0); }
/* Opening animates the panel's height from 0 to its content */
.banner-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease); }
.banner.open .banner-panel { grid-template-rows:1fr; }
.banner-inner { min-height:0; overflow:hidden; }
.banner.open .banner-inner { padding-bottom:clamp(28px,5vh,56px); }
.process-intro { max-width:30em; margin:0 0 18px; font:clamp(20px,min(1.9vw,3.4vh),32px)/1.35 var(--font); color:#fff; }
.process-summary { max-width:46em; margin:0; font-size:clamp(15px,min(1.2vw,2.2vh),19px); line-height:1.65; color:rgba(255,255,255,.75); }
/* How we collaborate: one item per row, number + title beside the text */
.process-item { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(16px,2vw,36px); padding:clamp(14px,2.4vh,24px) 0; border-top:1px solid rgba(255,255,255,.12); }
.process-item:first-child { border-top:0; padding-top:0; }
.process-item .process-num { grid-column:1; grid-row:1; }
.process-item .process-title { grid-column:1; grid-row:2; align-self:start; }
.process-item .process-text { grid-column:2; grid-row:1 / span 2; }
.process-num { display:block; margin-bottom:8px; font-size:12px; font-weight:700; letter-spacing:.16em; color:rgba(255,255,255,.45); }
.process-title { margin:0; font:400 clamp(22px,min(2vw,3.6vh),34px)/1.15 var(--font); }
.process-text { margin:0; font-size:clamp(15px,min(1.2vw,2.2vh),19px); line-height:1.55; color:rgba(255,255,255,.8); }
.process-statement { margin:clamp(36px,6vh,72px) 0 0; font:400 clamp(24px,min(2.4vw,4vh),40px)/1.2 var(--font); letter-spacing:-.01em; }
/* ---------- Contact ----------
   Three columns: slogan + company details | founder | founder. Entering a founder's block
   (photo + details) opens their work photo full screen with both founders' details on it. */
.contact-layout { --pad:clamp(23px,5vw,90px); --gap:clamp(24px,3vw,56px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr); gap:var(--gap); margin-top:clamp(40px,8vh,100px); align-items:start; }
.contact-slogan { margin:0 0 clamp(24px,4vh,44px); font:800 clamp(40px,min(4.4vw,8vh),84px)/.92 var(--font); letter-spacing:-.02em; text-transform:uppercase; }
.contact-intro { margin:0 0 18px; font:clamp(14px,min(1.1vw,2vh),18px)/1.55 var(--font); color:rgba(255,255,255,.88); }
.contact-location { margin:0 0 12px; font:clamp(16px,min(1.4vw,2.6vh),22px) var(--font); letter-spacing:.06em; text-transform:uppercase; }
.contact-general { margin:0 0 18px; font-size:13px; line-height:1.6; color:rgba(255,255,255,.7); }
.contact-general a { color:#fff; text-underline-offset:4px; }
.socials { display:flex; gap:24px; }
.socials a { color:#fff; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:underline; text-underline-offset:5px; transition:color .3s ease; }
.socials a:hover, .socials a:focus-visible { color:rgb(191,136,96); }

/* The founders are the 2nd and 3rd columns */
.founders { display:contents; }
/* Photo + details form one block (as wide as the photo, or the one-line name if wider);
   only the block opens the work photo. The photo takes the column width, capped so the page fits one screen. */
.founder { display:flex; flex-direction:column; align-items:center; justify-self:center; width:max-content; max-width:100%; cursor:pointer; }
/* Headshots are always on show (4:5, half-length); the placeholder holds initials until a photo is dropped in */
.headshot { width:min(calc((100vw - 2 * var(--pad) - 2 * var(--gap)) / 3.15 * .8), calc((100svh - 330px) * .8 * .8)); aspect-ratio:4/5; border:0; padding:0; border-radius:10px; overflow:hidden; cursor:pointer; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:linear-gradient(160deg,#2b2b2b,#141414); }
/* The headshot itself stays still on hover; hovering only brings up the work photo */
.headshot img { width:100%; height:100%; object-fit:cover; display:block; }
.headshot-initials { font:clamp(34px,3.4vw,52px) var(--font); letter-spacing:.12em; color:rgba(255,255,255,.35); }
.headshot-label { font-size:10px; font-weight:700; letter-spacing:.3em; color:rgba(255,255,255,.3); }
.founder-info { align-self:stretch; padding-top:18px; text-align:center; }
/* The details use one format and size on the page and over the full-screen photo, so they never move */
.founder-name { margin:0; font:400 clamp(18px,1.75vw,28px)/1.05 var(--font); letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; }
/* A line break used on phones only */
.phone-break { display:none; }
.founder-role { margin:10px 0 6px; font-size:11px; font-weight:700; letter-spacing:.1em; line-height:1.5; text-transform:uppercase; color:rgba(255,255,255,.5); }
.founder-link { display:block; color:#fff; font-size:10px; font-weight:700; letter-spacing:.06em; line-height:1.7; text-transform:uppercase; text-decoration:none; transition:color .3s ease; }
.founder-link:hover, .founder-link:focus-visible { color:rgb(191,136,96); }

/* Desktop: the whole Contact page fits one screen */
@media (min-width:801px) {
  .contact-page { min-height:100svh; padding-bottom:clamp(24px,4vh,48px); }
}

/* Full-screen work photo behind the page while the mouse is on a founder's block (tap on
   touch), as on accordion.net.au/contact: .4s fades; the rest of the page fades out in place and that
   founder's details stay where they are, over the photo */
.contact-page { position:relative; --fade:cubic-bezier(.51,0,.08,1); }
.contact-page > :not(.founder-backdrop):not(.site-bar) { position:relative; z-index:1; }
.founder-backdrop { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.founder-photo { position:absolute; inset:0; background:#111 center/cover no-repeat; opacity:0; scale:1.03; transition:opacity .4s var(--fade),scale .4s var(--fade); }
.founder-photo.on { opacity:1; scale:1; }
.founder-photo.placeholder { background:linear-gradient(160deg,#2b2b2b,#111); }
.founder-photo.placeholder::after { content:attr(data-label); position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); text-align:center; font-size:11px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.3); }
.contact-top, .founder, .headshot { transition:opacity .4s var(--fade),visibility .4s; }
.contact-page.founder-on .contact-top { opacity:0; visibility:hidden; }
.contact-page.founder-on .founder:not(.on) { opacity:0; }
.contact-page.founder-on .founder.on .headshot { opacity:0; }
.founder-info { transition:text-shadow .4s ease; }
.founder.on .founder-info { text-shadow:0 1px 5px rgba(0,0,0,.65); }
/* ---------- Project page (#work/<slug>) ----------
   Black page; title / director / year fixed at the top centre; the film framed with wide
   margins; a row of pictures, one open and the others folded into strips; then the write-up
   and credits. */
.project-page { padding:0 0 140px; background:#000; color:#fff; }
/* Dark fade behind the fixed bar and title, so content scrolling up passes beneath them */
.project-page::before { content:""; position:fixed; top:0; left:0; right:0; height:clamp(120px,17vh,170px); z-index:19; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.85) 45%,rgba(0,0,0,.45) 75%,transparent 100%); }
.project-head { position:fixed; top:30px; left:50%; transform:translateX(-50%); z-index:20; display:flex; flex-direction:column; align-items:center; gap:4px; max-width:36vw;
  font-size:11px; letter-spacing:.12em; line-height:1.35; text-transform:uppercase; text-align:center; pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.project-body { padding-top:clamp(120px,16vh,160px); }
.project-film { width:min(1180px,78vw); margin:0 auto; }
.project-frame { aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#0b0b0b; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.project-frame { position:relative; }
.project-frame iframe { width:100%; height:100%; border:0; display:block; }
/* No film link yet: the cover picture, dimmed, with a quiet note */
.project-pending { position:absolute; inset:0; display:grid; place-items:center; background:#111 center/cover no-repeat; }
.project-pending::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); }
.project-pending span { position:relative; padding:12px 20px; border:1px solid rgba(255,255,255,.6); border-radius:99px; font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:#fff; }
/* Cover picture over a player without one of its own; a frosted play button in the middle */
.project-poster { position:absolute; inset:0; z-index:1; border:0; padding:0; background:#111 center/cover no-repeat; cursor:pointer; }
.project-play { position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; border:1px solid rgba(255,255,255,.7); border-radius:50%;
  background:rgba(0,0,0,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background-color .3s ease,scale .3s var(--ease); }
.project-play::after { content:""; position:absolute; left:50%; top:50%; margin:-11px 0 0 -7px; border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff; }
.project-poster:hover .project-play, .project-poster:focus-visible .project-play { background:rgba(0,0,0,.5); scale:1.08; }
.project-episodes { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:20px; }
.project-episodes button { border:1px solid rgba(255,255,255,.4); background:transparent; color:rgba(255,255,255,.7); padding:9px 15px; font-size:10px; font-weight:700; letter-spacing:.16em; cursor:pointer; transition:background-color .3s ease,color .3s ease,border-color .3s ease; }
.project-episodes button.active, .project-episodes button:hover { background:#fff; color:#111; border-color:#fff; }
/* Pictures: the open one is wide, the others fold into strips; the row scrolls sideways if long */
.project-gallery { display:flex; gap:12px; height:min(72vh,680px); margin:clamp(70px,11vh,120px) 0 0; padding:0 clamp(23px,5vw,90px); overflow-x:auto; scrollbar-width:none; }
.project-gallery::-webkit-scrollbar { display:none; }
.project-body > .project-gallery:first-child { margin-top:0; }
/* Each part sits in a section of its own; on desktop every section fills a screen below the
   fixed title and one wheel notch turns to the next */
.project-section + .project-section { margin-top:clamp(70px,11vh,120px); }
.gallery-item { position:relative; overflow:hidden; flex:0 0 clamp(60px,7.5vw,128px); height:100%; border:0; padding:0; border-radius:14px; color:#fff; text-align:left; background:#111 center/cover no-repeat; cursor:pointer;
  min-width:0; transition:flex-grow .75s var(--ease),flex-basis .75s var(--ease); }
/* The open picture takes whatever width the strips leave, so a short row always fits */
.gallery-item.open { flex:1 1 0%; cursor:default; }
/* Client / role on each still of a video project, shown while it is the open one */
.gallery-caption { position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:60px 9% 30px; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.5)); opacity:0; transition:opacity .45s ease; }
.gallery-item.open .gallery-caption { opacity:1; transition-delay:.35s; }
.gallery-fact { display:flex; flex-direction:column; gap:12px; font-size:14px; line-height:1.4; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.gallery-fact small { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); }
/* Write-up across the page so it reads without much scrolling:
   about | credits (flowing into two columns when long) | festivals & distribution */
.project-info { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,1fr); gap:clamp(28px,4vw,72px); width:min(1320px,86vw); margin:clamp(70px,11vh,120px) auto 0; align-items:start; }
.project-info.two-col { grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr); }
.project-meta { margin:0 0 20px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.project-desc { margin:0 0 16px; font:clamp(16px,1.3vw,21px)/1.55 var(--font); color:rgba(255,255,255,.9); }
.project-col h3 { margin:0 0 14px; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.project-col h3 ~ h3 { margin-top:30px; }
.project-credits.long { columns:2; column-gap:28px; }
.credit { display:grid; grid-template-columns:minmax(0,8.5em) minmax(0,1fr); gap:14px; margin-bottom:8px; break-inside:avoid; font-size:12.5px; line-height:1.4; }
.credit-role { color:rgba(255,255,255,.55); }
.project-list { margin:0; padding:0; list-style:none; font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.85); }
.project-list a { color:#fff; text-underline-offset:4px; }
/* Photo projects: every photograph as a small preview under the write-up */
.project-previews { width:min(1320px,86vw); margin:clamp(60px,9vh,100px) auto 0; }
.project-previews h3 { margin:0 0 16px; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.preview-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.preview-item { aspect-ratio:1; border:0; padding:0; border-radius:8px; overflow:hidden; background:#111; cursor:zoom-in; }
.preview-item img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.82); transition:filter .3s ease,transform .5s var(--ease); }
.preview-item:hover img, .preview-item:focus-visible img { filter:none; transform:scale(1.04); }
.project-page .gallery-item.open { cursor:pointer; }
.gallery-wrap > .project-gallery { margin-top:0; }
.gallery-swipe { display:none; }
/* Photo projects: all the thumbnails and the write-up share one screen */
.project-pair { display:flex; flex-direction:column; gap:clamp(28px,5vh,52px); }
.project-pair > * { margin-top:0; }
.project-pair .preview-grid { grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
/* Works filter (list view): the picture that steps back */
.filter-picture { position:absolute; inset:0; background:#000 center/cover no-repeat; }
.project-section > .project-pair, .project-section > .gallery-wrap, .project-section > .project-gallery, .project-section > .project-film, .project-section > .project-info, .project-section > .project-previews { margin-top:0; }
@media (min-width:801px) {
  .project-page { padding-bottom:0; }
  .project-body { padding-top:0; }
  .project-section { display:flex; flex-direction:column; justify-content:center; min-height:100svh; box-sizing:border-box; padding:clamp(120px,16vh,160px) 0 clamp(28px,5vh,56px); }
  .project-section + .project-section { margin-top:0; }
  .project-section:last-child { padding-bottom:clamp(60px,10vh,120px); }
  /* The film fits the screen height too */
  .project-film { width:min(1180px,78vw,calc((100svh - 260px)*16/9)); }
}

/* Full-screen photo viewer */
html.lightbox-open { overflow:hidden; }
.lightbox { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.96); }
.lightbox[hidden] { display:none; }
.lightbox-img { max-width:calc(100vw - 180px); max-height:calc(100vh - 120px); object-fit:contain; display:block; border-radius:6px; }
.lightbox-nav { position:absolute; top:50%; translate:0 -50%; display:grid; place-items:center; width:48px; height:48px; padding:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.7); background:rgba(20,20,20,.35); color:#fff; cursor:pointer; transition:background-color .3s ease,color .3s ease,scale .3s var(--ease); }
.lightbox-nav svg { width:18px; height:18px; }
.lightbox-nav.prev { left:clamp(14px,3vw,40px); }
.lightbox-nav.next { right:clamp(14px,3vw,40px); }
.lightbox-nav.next svg { transform:rotate(180deg); }
.lightbox-nav:hover, .lightbox-nav:focus-visible { background:#fff; color:#111; scale:1.08; }
.lightbox-close { position:absolute; top:18px; right:24px; border:0; background:none; color:#fff; font-size:34px; line-height:1; cursor:pointer; }
.lightbox-count { position:absolute; bottom:20px; left:0; right:0; margin:0; text-align:center; font-size:11px; font-weight:700; letter-spacing:.2em; color:rgba(255,255,255,.7); }/* ---------- Text colour follows the picture behind it ----------
   main.js samples the brightness under each text block and adds .ink-dark on light areas. */
.topline .logo-placeholder, .brand, .aside, .aside-copy p, .work-slide, .works-filter button, .works-view button { transition:color .4s ease; }
.topline.ink-dark .logo-placeholder, .topline.ink-dark .brand, .aside.ink-dark, .work-slide.ink-dark, .site-brand.ink-dark { color:#111; }
.aside.ink-dark .aside-copy p { color:rgba(0,0,0,.82); }
.aside.ink-dark .aside-copy, .work-slide.ink-dark .work-slide-sub, .work-slide.ink-dark .work-slide-title, .site-brand.ink-dark,
.site-nav.ink-dark button, .works-filter.ink-dark button, .works-view.ink-dark button { text-shadow:0 1px 3px rgba(255,255,255,.55); }
.site-nav.ink-dark button, .works-filter.ink-dark button, .works-view.ink-dark button { color:rgba(0,0,0,.5); }
.site-nav.ink-dark button.current, .works-filter.ink-dark button.active, .works-view.ink-dark button.active,
.site-nav.ink-dark button:hover, .works-filter.ink-dark button:hover, .works-view.ink-dark button:hover { color:#111; }

/* ---------- Page change: widescreen letterbox ----------
   Black bars close from top and bottom like a film frame, the destination's name shows in the
   slit, then the bars open on the new page. main.js swaps the page while they are shut. */
.transition { position:fixed; inset:0; pointer-events:none; z-index:30; overflow:hidden; visibility:hidden; }
.transition.running { visibility:visible; }
.lb-bar { position:absolute; left:0; right:0; height:calc(50% + 1px); background:#050505; will-change:transform; }
.lb-bar.top { top:0; transform:translateY(-100%); }
.lb-bar.bottom { bottom:0; transform:translateY(100%); }
.transition.running .lb-bar.top { animation:lb-top 1.15s cubic-bezier(.72,0,.2,1) both; }
.transition.running .lb-bar.bottom { animation:lb-bottom 1.15s cubic-bezier(.72,0,.2,1) both; }
@keyframes lb-top { 0% { transform:translateY(-100%); } 40%, 60% { transform:translateY(0); } 100% { transform:translateY(-100%); } }
@keyframes lb-bottom { 0% { transform:translateY(100%); } 40%, 60% { transform:translateY(0); } 100% { transform:translateY(100%); } }
.lb-title { position:absolute; top:50%; left:0; right:0; margin:0; transform:translateY(-50%); text-align:center; color:#fff; font-size:12px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; opacity:0; }
.transition.running .lb-title { animation:lb-title 1.15s ease both; }
@keyframes lb-title { 0%, 32% { opacity:0; letter-spacing:.32em; } 46%, 58% { opacity:1; letter-spacing:.5em; } 68%, 100% { opacity:0; letter-spacing:.56em; } }
/* List <-> Grid: each strip thumbnail flies to (or back from) its grid square */
.morph-layer { position:fixed; inset:0; z-index:30; pointer-events:none; overflow:hidden; }
.morph-layer span { position:absolute; background:#111 center/cover no-repeat; box-shadow:0 8px 24px rgba(0,0,0,.45); }

/* ---------- Video modal ---------- */
.film-modal { position:fixed; inset:0; background:rgba(0,0,0,.95); z-index:40; display:none; align-items:center; justify-content:center; padding:7vw; }
.film-modal.open { display:flex; }
.modal-body { width:min(100%,calc(78vh * 16 / 9)); }
.modal-frame { width:100%; aspect-ratio:16/9; background:#000; }
.modal-frame iframe { width:100%; height:100%; border:0; display:block; }
.modal-frame.is-photo { aspect-ratio:auto; background:none; display:flex; justify-content:center; }
.modal-frame.is-photo img { max-width:100%; max-height:84vh; display:block; }
.modal-episodes { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.modal-episodes button { border:1px solid rgba(255,255,255,.5); background:transparent; color:#fff; padding:10px 16px; font-size:11px; letter-spacing:.16em; cursor:pointer; transition:background-color .3s ease; }
.modal-episodes button.active, .modal-episodes button:hover { background:rgb(191,136,96); border-color:rgb(191,136,96); }
.modal-close { position:absolute; right:28px; top:25px; border:0; background:transparent; color:white; font-size:32px; cursor:pointer; }

/* ---------- Back to top (Works page, follows the scroll) ---------- */
.to-top { position:fixed; right:calc(clamp(64px,5.5vw,96px) + 20px); bottom:clamp(18px,4vh,40px); z-index:20; border:1px solid rgba(255,255,255,.6); background:rgba(17,19,21,.75); color:#fff; padding:12px 16px; font-size:11px; font-weight:700; letter-spacing:.18em; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .35s ease,transform .35s ease,visibility .35s,background-color .3s ease,border-color .3s ease; }
.to-top.visible { opacity:1; visibility:visible; transform:none; }
.to-top:hover,.to-top:focus-visible { background:rgb(191,136,96); border-color:rgb(191,136,96); }

/* ---------- Responsive: home stays within one screen ---------- */
@media(max-width:800px) {
  .project-head { top:56px; max-width:80vw; font-size:9px; }
  .project-body { padding-top:118px; }
  .project-film, .project-info { width:auto; margin-left:16px; margin-right:16px; }
  /* Phones: no folding; every picture at full width, side by side, one swipe each */
  .project-page { touch-action:pan-x pan-y pinch-zoom; }
  /* One picture fills the width edge to edge (still a rounded rectangle); its neighbours stay out of sight */
  .project-gallery { height:auto; padding:0; gap:12px; overflow:hidden; touch-action:pan-y pinch-zoom; }
  .gallery-item, .gallery-item.open { flex:0 0 100%; height:auto; aspect-ratio:4/5; max-height:62svh; border-radius:10px;
    transform:translateX(calc(var(--at,0) * (-100% - 12px) + var(--drag,0px))); transition:transform .3s cubic-bezier(.22,.7,.2,1); }
  .project-gallery.dragging .gallery-item { transition:none; }
  .gallery-item .gallery-caption { opacity:1; }
  .gallery-swipe { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:14px; }
  .gallery-count { font-size:10px; font-weight:700; letter-spacing:.2em; color:#fff; font-variant-numeric:tabular-nums; }
  .gallery-hint { font-size:8px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.55); animation:swipe-nudge 2.4s ease-in-out infinite; transition:opacity .6s ease; }
  .gallery-swipe.hint-done .gallery-hint { opacity:0; }
  .project-info, .project-info.two-col { grid-template-columns:1fr; }
  .project-credits.long { columns:1; }
  /* Phones: the three columns stack: the company details, then each founder (photo + details) */
  .contact-page { padding-top:56px; }
  .contact-layout { grid-template-columns:minmax(0,1fr); gap:56px; margin-top:22px; }
  .founder { width:100%; justify-self:stretch; cursor:default; }
  .headshot { cursor:default; }
  .phone-break { display:inline; }
  .headshot { width:min(72%,300px); }
  .founder-name { white-space:normal; }
  .process-layout { grid-template-columns:minmax(0,1fr); gap:44px; }
  .process-item { grid-template-columns:1fr; gap:8px; }
  .process-item .process-text { grid-column:1; grid-row:auto; }

  .preview-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .lightbox-img { max-width:100vw; max-height:calc(100vh - 140px); border-radius:0; }
  /* Phones: no arrows, a sideways swipe changes the photograph */
  .lightbox-nav { display:none; }
  .lightbox { touch-action:pinch-zoom; }
  .gallery-caption { padding:40px 18px 18px; gap:14px; }
  .gallery-fact { font-size:12px; gap:8px; }
  /* Phones: just the film (or photographs), the title and the menu button: no About text,
     no divider and no listed menu; a swipe turns between film and photographs */
  .aside, .split, .navigation { display:none; }
  .topline { left:6%; right:6%; }
  .brand { font-size:clamp(17px,3.8vw,27px); }
  .logo-placeholder { width:40px; }
  .logo-placeholder svg { width:39px; height:37px; }
  .logo-placeholder span { font-size:5px; }

  /* Phones: no film strip of thumbnails; the works fill the width */
  .works-page { --strip-w:0px; }
  .work-strip { display:none; }
  /* No strip to clear on phones: TOP sits at the right edge */
  .to-top { right:16px; }
  /* No hover on phones: VIEW PROJECT / EXPLORE WORKS and their arrows always show */
  .work-slide-cta, .film-link span { opacity:1; }
  .site-brand { font-size:16px; letter-spacing:.14em; }
  .works-filter { top:auto; bottom:64px; transform:none; }
  .work-slide { padding:0 calc(var(--strip-w) + 5vw) 0 5vw; }
  .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:70px 16px 120px; }
}
/* Phone-only pieces, hidden on desktop: the swipe dots, the menu button, the full-screen menu */
/* MOTION / PHOTO low in the middle: the one on show is white with a short bar under it.
   A faint SWIPE beside them fades away once the visitor has swiped. */
.swipe-dots { display:none; position:absolute; left:50%; bottom:calc(5% + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:7; align-items:center; gap:18px; }
.swipe-dot { position:relative; padding:8px 0; border:0; background:none; color:rgba(255,255,255,.5); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.65); cursor:pointer; transition:color .4s ease; }
.swipe-dot::after { content:""; position:absolute; left:50%; bottom:0; width:0; height:1.5px; margin-left:-.1em; background:#fff; box-shadow:0 0 4px rgba(0,0,0,.45); transform:translateX(-50%); transition:width .4s var(--ease); }
.swipe-dots[data-at="0"] .swipe-dot:nth-child(1), .swipe-dots[data-at="1"] .swipe-dot:nth-child(2) { color:#fff; }
.swipe-dots[data-at="0"] .swipe-dot:nth-child(1)::after, .swipe-dots[data-at="1"] .swipe-dot:nth-child(2)::after { width:18px; }.swipe-hint { position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); font-size:8px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.6);
  text-shadow:0 1px 3px rgba(0,0,0,.6); white-space:nowrap; animation:swipe-nudge 2.4s ease-in-out infinite; transition:opacity .6s ease; }
.swipe-dots.hint-done .swipe-hint { opacity:0; }
@keyframes swipe-nudge { 0%,60%,100% { translate:0 0; } 30% { translate:-4px 0; } }

/* Three-line menu button (top right); opens a full-screen black menu */
.menu-toggle { display:none; align-content:center; justify-items:end; gap:5px; width:36px; height:36px; padding:0; border:0; background:none; cursor:pointer; justify-self:end; }
.menu-toggle span { display:block; width:22px; height:1.5px; border-radius:1px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.55); }
.site-menu { position:fixed; inset:0; z-index:70; background:#000; display:flex; flex-direction:column; justify-content:center; padding:0 9vw; }
.site-menu[hidden] { display:none; }
.site-menu:not([hidden]) { animation:menu-in .35s ease both; }
@keyframes menu-in { from { opacity:0; } to { opacity:1; } }
.site-menu-close { position:absolute; top:18px; right:16px; width:36px; height:36px; padding:0; border:0; background:none; cursor:pointer; }
.site-menu-close span { position:absolute; left:7px; right:7px; top:50%; height:1.5px; background:#fff; }
.site-menu-close span:first-child { transform:rotate(45deg); }
.site-menu-close span:last-child { transform:rotate(-45deg); }
.site-menu-list { display:flex; flex-direction:column; align-items:flex-start; gap:clamp(10px,2.4vh,22px); }
.site-menu-list button { padding:4px 0; border:0; background:none; color:rgba(255,255,255,.45); font:400 clamp(34px,10vw,56px)/1 var(--font); letter-spacing:.04em; cursor:pointer; transition:color .3s ease; }
.site-menu-list button.current, .site-menu-list button:hover, .site-menu-list button:focus-visible { color:#fff; }
@media (max-width:800px) {
  /* The menu button sits top right on every page, level with the logo + name */
  .site-bar { top:13px; right:16px; height:36px; }
  /* Sideways swipes never leave the page (no browser back / forward gesture). On the home page
     a sideways swipe only turns between Motion and Photo; other pages move up and down only (a project page's\n     pictures also swipe sideways). */
  html, body { overscroll-behavior-x:none; }
  .home { touch-action:pinch-zoom; }
  .page:not(.project-page) { touch-action:pan-y pinch-zoom; }
  .swipe-dots { display:flex; }
  .menu-toggle { display:grid; }
  .site-nav { display:none; }
}

@media(max-width:410px) { .topline { gap:5px; } .brand { font-size:17px; letter-spacing:.1em; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }