/* Alex McCarthy, photography. The built site.
   Tokens and easing from jjt-canvas refined/effects/fx.css. Type: Familjen Grotesk in capitals for display, Geist for text.
   Light by default, near-black (#0F0F0F) as the dark theme. No fades or glows: clean edges throughout. */
@font-face{font-family:'Familjen';src:url('assets/fonts/FamiljenGrotesk.woff2') format('woff2');font-display:block}
@font-face{font-family:'Geist';src:url('assets/fonts/geist.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('assets/fonts/geist-mono.woff2') format('woff2');font-display:swap}
:root{
  --bg:#F3F1EC; --fg:#141414; --muted:#6F6B65; --line:rgba(20,20,20,.12); --paper:#EAE6DE; --tile:#E3DFD7; --soft:rgba(20,20,20,.06); --shade:243,241,236;
  --expo:cubic-bezier(.16,1,.3,1); --out:cubic-bezier(.23,1,.32,1);
  --spring:linear(0,.034 1.4%,.13 2.9%,.461 7.4%,.729 12%,.904 16.9%,.973 20.6%,1.019 24.7%,1.046 29.2%,1.053 33.8%,1.042 40.2%,1.008 56.4%,.998 68.3%,1);
  --gut:clamp(16px,4vw,48px); --sec:clamp(72px,10vw,140px); --head:64px;
  --serif:'Familjen',system-ui,sans-serif; --sans:'Geist',system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,monospace;
}
[data-theme=black]{--bg:#0F0F0F;--fg:#EDEBE6;--muted:#9A968F;--line:rgba(237,235,230,.13);--paper:#1B1B1B;--tile:#1D1D1D;--soft:rgba(237,235,230,.08);--shade:15,15,15;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-padding-top:calc(var(--head) + 16px)}
body{background:var(--bg);color:var(--fg);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;transition:background-color .5s,color .5s}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.mono{font:12px/1.4 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.cap{text-transform:uppercase}
h2.sec{font:400 clamp(28px,4vw,48px)/.95 var(--serif);letter-spacing:-.03em;text-transform:uppercase}
/* link underline that draws in from the left (Link underlines, refined/underline-draw) */
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--expo)}
.ul:hover,.ul.on{background-size:100% 1px}

/* ---------- header: name left, nav centred, theme right. Solid, no fade ---------- */
.head{position:sticky;top:0;z-index:30;height:var(--head);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gut);background:var(--bg);border-bottom:1px solid transparent;transition:border-color .3s,background-color .5s}
.head.edge{border-bottom-color:var(--line)}
.head .nm{justify-self:start;font:400 17px/1 var(--serif);letter-spacing:.01em;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center}
.head nav{display:flex;gap:clamp(16px,3vw,36px)}
.head nav a{font-size:15px;min-height:44px;display:inline-flex;align-items:center}
.head nav a span{padding-bottom:2px}
.head .th{justify-self:end;width:44px;height:44px;display:grid;place-items:center;border-radius:99px;transition:background-color .2s}
.head .th:hover{background:var(--soft)}
.head .th svg{width:17px;height:17px}
@media (max-width:640px){
  :root{--head:96px}
  .head{grid-template-columns:1fr auto;grid-template-rows:52px 44px;align-items:center}
  .head nav{grid-column:1/-1;grid-row:2;justify-content:center;gap:28px}
}

/* ---------- views ---------- */
.view[hidden]{display:none}
.veil{position:fixed;inset:0;z-index:50;background:var(--bg);opacity:0;pointer-events:none}

/* ---------- intro: the name rises, then glides into the header ---------- */
.intro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--bg);pointer-events:none}
.intro h1{font:400 clamp(30px,9vw,148px)/.9 var(--serif);letter-spacing:-.045em;text-transform:uppercase;display:flex;flex-wrap:nowrap;white-space:nowrap;justify-content:center;column-gap:.22em;transform-origin:0 50%}
.intro .w{display:inline-flex;overflow:hidden;padding-bottom:.08em}
.intro .ch{display:inline-block;transform:translateY(105%);filter:blur(6px);opacity:0;transition:transform 1.1s var(--expo),filter .9s var(--out),opacity .6s}
.intro.go .ch{transform:none;filter:none;opacity:1}
.intro p{margin-top:18px;text-align:center;font:13px var(--mono);letter-spacing:.06em;color:var(--muted);opacity:0;transition:opacity .8s .8s}
.intro.go p{opacity:1}
.intro.glide p{opacity:0;transition:opacity .25s}
.intro.fade{background:transparent;transition:background-color .6s}
body.introing .head .nm{opacity:0}

/* ---------- home: hero strip ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:end;padding:clamp(28px,5vw,56px) var(--gut) 0;min-height:calc(100svh - var(--head) - 24px)}
.hero .copy{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding-bottom:6px}
.hero .lede{font:400 clamp(30px,4.4vw,64px)/.98 var(--serif);letter-spacing:-.03em;text-transform:uppercase;max-width:14ch}
.hero .now{display:grid;gap:8px}
.hero .now .swap{position:relative;display:grid}
.hero .now .swap > *{grid-area:1/1;transition:opacity .5s var(--out),filter .5s var(--out),translate .7s var(--expo)}
.hero .now .swap .out{opacity:0;filter:blur(6px);translate:0 -8px}
.hero .now .swap .in{opacity:0;filter:blur(6px);translate:0 8px}
.hero .now b{font:400 22px/1.1 var(--serif);letter-spacing:-.01em;text-transform:uppercase}
.hero .now a{justify-self:start;font-size:15px;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.hero .frame{position:relative;height:min(72svh,820px);aspect-ratio:3/4;cursor:pointer;border-radius:2px;overflow:hidden;background:var(--tile)}
.hero .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:0 0}
.hero .frame img.wide{object-fit:contain;background:var(--paper)}
.strip{grid-column:1/-1;display:flex;gap:8px;padding:18px 0 4px;overflow-x:auto;scrollbar-width:none}
.strip button{flex:none;width:54px;aspect-ratio:3/4;border-radius:2px;overflow:hidden;opacity:.42;transition:opacity .4s,translate .5s var(--expo)}
.strip button:hover{opacity:.85;translate:0 -3px}
.strip button.on{opacity:1}
.strip img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;min-height:0;gap:20px}
  .hero .frame{height:auto;width:100%;max-height:none}
  .hero .copy{order:-1;gap:18px}
  .hero .lede{font-size:32px}
}

/* ---------- home: work grid with filters ---------- */
.work{padding:var(--sec) var(--gut) 0}
.work .top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{height:40px;padding:0 15px;border-radius:99px;font-size:14px;color:var(--muted);position:relative;isolation:isolate;transition:color .3s}
.chip.on{color:var(--bg)}
.chip.on::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--fg);z-index:-1;view-transition-name:chip}
.chip small{font:11px var(--mono);margin-left:6px;opacity:.65}
.shoots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px) clamp(12px,1.6vw,20px)}
.shoots .s[hidden]{display:none}
.shoots .s{display:block;text-align:left}
.shoots .ph{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--tile)}
.shoots .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--expo)}
.shoots .s:hover .ph img{transform:scale(1.04)}
.shoots .meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px}
.shoots .meta b{font:400 15px/1.2 var(--serif);letter-spacing:.01em;text-transform:uppercase}
@media (max-width:1000px){.shoots{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.shoots{grid-template-columns:repeat(2,minmax(0,1fr))}.shoots .meta{flex-direction:column;gap:2px}}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:var(--expo)}
::view-transition-old(*):only-child{animation:vtout .25s ease both}
::view-transition-new(*):only-child{animation:vtin .45s var(--expo) both}
@keyframes vtout{to{opacity:0;transform:scale(.92)}} @keyframes vtin{from{opacity:0;transform:scale(.92)}}

/* reveal: photos rise in once as they arrive. Small and quick, nothing theatrical */
.rv{opacity:0;translate:0 18px;transition:opacity .8s var(--out),translate 1s var(--expo)}
.rv.in{opacity:1;translate:0 0}

/* ---------- home: everything (the infinite canvas, contained) ---------- */
.every{padding:var(--sec) 0 0}
.every .top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 var(--gut);margin-bottom:24px}
.canvas{position:relative;height:min(82svh,860px);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.canvas.down{cursor:grabbing}
.canvas .tile{position:absolute;left:0;top:0;width:var(--w);aspect-ratio:3/4;border-radius:2px;overflow:hidden;will-change:transform;background:var(--tile)}
.canvas .tile img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}

/* ---------- home: about and contact ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);padding:var(--sec) var(--gut) 0;align-items:start}
.about .txt{max-width:40ch}
.about .txt p{font-size:clamp(18px,1.6vw,21px);line-height:1.5}
.about .txt p+p{margin-top:22px}
.about dl{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:15px}
.about dt{color:var(--muted)}
@media (max-width:760px){.about{grid-template-columns:1fr;gap:20px}}
.contact{padding:var(--sec) var(--gut) var(--sec)}
.contact .big{display:inline-block;max-width:100%;overflow-wrap:anywhere;margin-top:24px;font:400 clamp(24px,7vw,104px)/.92 var(--serif);letter-spacing:-.04em;text-transform:uppercase}
.contact p{margin-top:18px;color:var(--muted);font-size:16px}
footer{display:flex;justify-content:space-between;gap:16px;padding:24px var(--gut) 28px;border-top:1px solid var(--line)}

/* ---------- shoot page ---------- */
.shoot .title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:clamp(28px,5vw,56px) var(--gut) 24px}
.shoot h1{font:400 clamp(40px,8vw,128px)/.88 var(--serif);letter-spacing:-.045em;text-transform:uppercase;max-width:14ch}
.shoot .facts{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.shoot .facts a{font-size:15px;min-height:44px;display:inline-flex;align-items:center}
.shoot .back{font-size:15px;min-height:44px;display:inline-flex;align-items:center;gap:8px;margin:0 var(--gut)}
/* Elevator: slanted columns of the shoot ride past each other as you scroll */
.elev{position:relative;height:min(70svh,720px);overflow:hidden;background:var(--bg)}
.elev .cols{position:absolute;left:50%;top:50%;display:flex;gap:var(--g);transform:translate(-50%,-50%) rotate(var(--slant))}
.elev .col{display:flex;flex-direction:column;gap:var(--g);will-change:transform}
.elev .col button{display:block;width:var(--cw);aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--tile);cursor:zoom-in}
.elev .col img{width:100%;height:100%;object-fit:cover}
.elev.single .col button{aspect-ratio:3/2}
/* then every photo, laid out to choose from */
.all{padding:clamp(48px,7vw,96px) var(--gut) 0}
.all .grid{columns:3;column-gap:clamp(12px,1.6vw,20px)}
.all .grid button{display:block;width:100%;margin-bottom:clamp(12px,1.6vw,20px);break-inside:avoid;border-radius:2px;overflow:hidden;background:var(--tile);cursor:zoom-in}
.all .grid img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.1s var(--expo)}
.all .grid button.wide img{aspect-ratio:3/2}
.all .grid button:hover img{transform:scale(1.03)}
@media (max-width:760px){.all .grid{columns:2}}
.next{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:var(--sec) var(--gut)}
.next a{display:flex;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.next a:last-child{justify-content:flex-end;text-align:right}
.next img{width:56px;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.next b{display:block;font:400 18px/1.1 var(--serif);text-transform:uppercase}

/* ---------- viewer ---------- */
.vw{position:fixed;inset:0;z-index:40;background:rgba(var(--shade),.98);opacity:0;pointer-events:none;transition:opacity .45s var(--expo)}
.vw.on{opacity:1;pointer-events:auto}
.vw .big{position:fixed;object-fit:contain;transform-origin:0 0;z-index:41}
.vw .bar{position:fixed;z-index:42;left:var(--gut);right:var(--gut);bottom:14px;display:flex;align-items:center;gap:16px}
.vw .bar b{font:400 17px/1 var(--serif);letter-spacing:.01em;text-transform:uppercase;margin-right:auto}
.vw .x,.vw .nb{position:fixed;z-index:42;width:48px;height:48px;border-radius:99px;display:grid;place-items:center;background:var(--soft);transition:background-color .2s,scale .16s var(--out)}
.vw .x{right:12px;top:12px} .vw .nb{top:50%;margin-top:-24px} .vw .prev{left:12px} .vw .next{right:12px}
.vw .x:hover,.vw .nb:hover{background:color-mix(in srgb,var(--fg) 14%,transparent)}
.vw svg{width:20px;height:20px}
@media (max-width:640px){.vw .nb{display:none}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}.rv{opacity:1;translate:none}}

/* ---------- shared home pieces: actions and status ---------- */
.acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:99px;background:var(--fg);color:var(--bg);font-size:15px;font-weight:500;transition:scale .16s var(--out),opacity .2s}
.btn:hover{opacity:.88} .btn:active{scale:.97}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--fg);opacity:1}
.avail{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.avail i{width:8px;height:8px;border-radius:99px;background:#2F9E5B;box-shadow:0 0 0 0 rgba(47,158,91,.5);animation:ping 2.4s var(--out) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(47,158,91,.45)}70%,100%{box-shadow:0 0 0 7px rgba(47,158,91,0)}}
.more{display:flex;justify-content:center;margin-top:clamp(32px,4vw,56px)}

/* ---------- everything page: the canvas, full height, behind a button ---------- */
.every .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--gut)}
.every .canvas{height:calc(100svh - var(--head) - 76px);border-bottom:0}

/* ---------- V2 index: numbered list left, one sliding frame right ---------- */
.idx{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);padding:clamp(28px,5vw,56px) var(--gut) 0;align-items:start}
.idx .intro-t{display:grid;gap:22px;margin-bottom:clamp(32px,4vw,56px)}
.idx .lede{font:400 clamp(30px,4vw,58px)/.98 var(--serif);letter-spacing:-.03em;text-transform:uppercase;max-width:16ch}
.list{border-top:1px solid var(--line)}
.list .row{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:16px;align-items:center;min-height:58px;border-bottom:1px solid var(--line);transition:padding .5s var(--expo),color .3s}
.list .row b{font:400 clamp(17px,1.6vw,22px)/1.1 var(--serif);letter-spacing:-.005em;text-transform:uppercase;transition:translate .5s var(--expo)}
.list .row .g{font-size:14px;color:var(--muted)}
.list .row .n{min-width:64px;text-align:right}
.list .row img{display:none}
.list .row.on b{translate:8px 0}
.list:hover .row:not(.on){color:var(--muted)}
.pv{position:sticky;top:calc(var(--head) + 16px);display:grid;gap:10px}
.pv .fr{aspect-ratio:3/4;max-height:calc(100svh - var(--head) - 80px);overflow:hidden;border-radius:2px;background:var(--tile)}
.pv .st{height:100%;transition:transform 1s var(--expo)}
.pv .st img{height:100%;width:100%;object-fit:cover}
.pv .st img.wide{object-fit:contain;background:var(--paper)}
@media (max-width:860px){
  .idx{grid-template-columns:1fr}.pv{display:none}
  .list .row{grid-template-columns:32px minmax(0,1fr) 56px;min-height:76px}
  .list .row .g,.list .row .n{display:none}
  .list .row img{display:block;width:56px;aspect-ratio:1;object-fit:cover;border-radius:2px}
  .list:hover .row:not(.on){color:inherit}
  .list .row.on b{translate:none}
}

/* ---------- V3 categories: four panels, the one you point at widens ---------- */
.cats{padding:clamp(28px,5vw,56px) var(--gut) 0}
.cats .intro-t{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.cats .lede{font:400 clamp(30px,4.4vw,64px)/.98 var(--serif);letter-spacing:-.03em;text-transform:uppercase;max-width:15ch}
.cats .side{display:grid;gap:16px;justify-items:start}
.panels{display:flex;gap:12px;height:min(62svh,640px)}
.panels .p{position:relative;flex:1;min-width:0;border-radius:2px;overflow:hidden;background:var(--tile);transition:flex-grow .65s var(--out)}
.panels .p.on{flex-grow:3.2}
.panels .p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--expo)}
.panels .p.on img{transform:scale(1.03)}
.panels .lab{position:absolute;left:12px;bottom:12px;display:grid;gap:2px;padding:10px 14px;border-radius:2px;background:var(--bg);color:var(--fg)}
.panels .lab b{font:400 18px/1 var(--serif);letter-spacing:.01em;text-transform:uppercase}
.panels .lab .mono{opacity:0;max-height:0;transition:opacity .4s,max-height .5s var(--expo)}
.panels .p.on .lab .mono{opacity:1;max-height:20px}
@media (max-width:760px){.panels{flex-direction:column;height:auto}.panels .p{flex:none;height:150px}.panels .p.on{flex-grow:0}.panels .lab .mono{opacity:1;max-height:20px}}
.catpage .title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:clamp(28px,5vw,56px) var(--gut) 28px}
.catpage h1{font:400 clamp(48px,10vw,150px)/.86 var(--serif);letter-spacing:-.045em;text-transform:uppercase}
.catpage .shoots{padding:0 var(--gut);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.catpage .shoots{grid-template-columns:repeat(2,minmax(0,1fr))}}
.catpage .others{display:flex;gap:24px;flex-wrap:wrap;padding:var(--sec) var(--gut);font:400 clamp(22px,3vw,36px)/1 var(--serif);text-transform:uppercase;letter-spacing:-.02em}
.catpage .others span.mono{font:12px var(--mono);align-self:center}

/* ---------- hero option A: inset frame (ui/blocks/hero-inset). The photo sits inside the page with a margin;
   the copy and the current shoot sit on solid plates cut into its corners, so no scrim is needed ---------- */
.h-inset{position:relative;margin:12px var(--gut) 0;height:calc(100svh - var(--head) - 24px);min-height:560px}
.h-inset .frame{position:absolute;inset:0;height:auto;aspect-ratio:auto;border-radius:6px}
.h-inset .plate{position:absolute;left:0;bottom:0;z-index:2;display:grid;gap:20px;max-width:min(620px,calc(100% - 24px));padding:28px 32px 4px 0;background:var(--bg);border-top-right-radius:14px}
.h-inset .plate .lede{font:400 clamp(28px,3.6vw,54px)/.98 var(--serif);letter-spacing:-.03em;text-transform:uppercase}
.h-inset .feat{position:absolute;right:0;top:0;z-index:2;display:grid;gap:10px;width:min(360px,60%);padding:0 0 20px 20px;background:var(--bg);border-bottom-left-radius:14px}
.h-inset .feat .row1{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:2px}
.h-inset .feat b{font:400 18px/1.1 var(--serif);text-transform:uppercase}
.h-inset .feat .strip{padding:0;gap:6px}
.h-inset .feat .strip button{width:38px}
@media (max-width:760px){
  .h-inset{height:auto;min-height:0;display:grid;gap:16px;margin-top:8px}
  .h-inset .frame{position:relative;aspect-ratio:3/4;inset:auto}
  .h-inset .plate,.h-inset .feat{position:static;padding:0;max-width:none;width:auto;border-radius:0}
  .h-inset .plate{order:-1}
}

/* ---------- hero option B: split (ui/blocks/hero-split). Copy on the left, the photo fills the right half to the edge ---------- */
.h-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100svh - var(--head))}
.h-split .copy{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:clamp(28px,5vw,64px) clamp(24px,4vw,64px) 24px var(--gut)}
.h-split .copy .top{display:grid;gap:24px}
.h-split .lede{font:400 clamp(32px,4.2vw,64px)/.98 var(--serif);letter-spacing:-.03em;text-transform:uppercase;max-width:13ch}
.h-split .now{display:grid;gap:8px}
.h-split .now b{font:400 20px/1.1 var(--serif);text-transform:uppercase}
.h-split .frame{position:relative;height:auto;aspect-ratio:auto;border-radius:0;min-height:560px}
.h-split .strip{padding:12px 0 0}
@media (max-width:760px){.h-split{grid-template-columns:1fr;min-height:0}.h-split .frame{order:-1;height:56svh;aspect-ratio:auto;min-height:0}.h-split .copy{padding-top:24px}}

/* ---------- hero option C: centred statement over a slow row of covers (refined/image-marquee). Nothing to click
   wrongly: every cover opens its shoot ---------- */
.h-marq{padding:clamp(40px,7vw,96px) 0 0;text-align:center}
.h-marq .top{display:grid;gap:24px;justify-items:center;padding:0 var(--gut)}
.h-marq .lede{font:400 clamp(34px,5.4vw,84px)/.96 var(--serif);letter-spacing:-.035em;text-transform:uppercase;max-width:18ch}
.h-marq .acts{justify-content:center}
.marq{margin-top:clamp(40px,6vw,72px);overflow:hidden}
.marq .track{display:flex;gap:14px;width:max-content;animation:marq 80s linear infinite}
.marq:hover .track{animation-play-state:paused}
.marq a{flex:none;width:clamp(180px,17vw,250px);text-align:left}
.marq .ph{aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--tile)}
.marq img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--expo)}
.marq a:hover img{transform:scale(1.04)}
.marq .meta{display:flex;justify-content:space-between;gap:8px;margin-top:8px}
.marq .meta b{font:400 13px/1.2 var(--serif);text-transform:uppercase}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq .track{animation:none}.marq{overflow-x:auto}}

.h-inset .frame,.h-split .frame{overflow:hidden;cursor:pointer;background:var(--tile)}
.h-inset .frame img,.h-split .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:0 0}
.h-inset .frame img.wide,.h-split .frame img.wide{object-fit:contain;background:var(--paper)}

/* hero C, revised (Josh, 10-11-2026): the name as the heading, a small line under it, then the two actions */
.h-marq .top{gap:0}
.h-marq .name{font:400 clamp(36px,11vw,188px)/.86 var(--serif);letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap}
.h-marq .sub{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(16px,1.4vw,19px);color:var(--muted)}
.h-marq .acts{margin-top:clamp(24px,3vw,36px)}
body.introing #heroName{opacity:0}

/* ---------- the row of covers, per mode ---------- */
.marq{user-select:none;-webkit-user-select:none}
.marq img{-webkit-user-drag:none;pointer-events:none}
.marq[data-mode=arc]{position:relative;height:var(--ah,420px);cursor:grab;touch-action:pan-y}
.marq[data-mode=arc] a{position:absolute;left:50%;top:0;width:var(--cw);transform-origin:50% 0;will-change:transform}
.marq[data-mode=elastic]{cursor:grab;touch-action:pan-y}
.marq[data-mode=elastic] .track{animation:none;will-change:transform}
.marq[data-mode=elastic] .track a{transform-origin:50% 0;will-change:transform}
.marq[data-mode=slider]{position:relative;height:calc(clamp(240px,20vw,320px) * 4 / 3 + 70px);touch-action:pan-y}
@media (max-width:700px){.marq[data-mode=slider]{height:calc(190px * 4 / 3 + 70px)}}
.marq[data-mode=slider] a{position:absolute;left:50%;top:0;width:var(--cw);transform-origin:50% 50%;transition:transform .8s var(--expo),opacity .6s var(--out)}
.marq[data-mode=slider] a .meta{display:none}
.marq .cap{position:absolute;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:4px;text-align:center}
.marq .cap .swap{position:relative;display:grid}
.marq .cap .swap > *{grid-area:1/1;transition:opacity .5s var(--out),filter .5s var(--out),translate .7s var(--expo)}
.marq .cap .swap .out{opacity:0;filter:blur(6px);translate:0 -8px}
.marq .cap .swap .in{opacity:0;filter:blur(6px);translate:0 8px}
.marq .cap b{font:400 18px/1.1 var(--serif);text-transform:uppercase}
.marq[data-mode=drag]{cursor:grab;touch-action:pan-y}
.marq[data-mode=drag] .track{animation:none;padding:0 var(--gut);will-change:transform}
.marq[data-mode=drag] .ph img{width:120%;max-width:none}
.marq.down{cursor:grabbing}

.marq[data-mode=arc] a .meta,.marq[data-mode=fan] a .meta,.marq[data-mode=stack] a .meta,.marq[data-mode=cylinder] a .meta{display:none}
.marq[data-mode=fan]{position:relative;height:calc(var(--cw,170px) * 4 / 3 + 150px)}
.marq[data-mode=fan] a{position:absolute;left:50%;top:20px;width:var(--cw);transform-origin:50% 0;will-change:transform}
.marq[data-mode=fan] .ph{box-shadow:0 1px 2px rgba(0,0,0,.08),0 14px 30px -14px rgba(0,0,0,.35);outline:5px solid var(--bg)}
.marq[data-mode=stack]{position:relative;height:calc(clamp(190px,17vw,250px) * 4 / 3 + 90px);touch-action:pan-y;cursor:grab}
.marq[data-mode=stack] .deck{position:absolute;left:50%;top:10px;width:clamp(190px,17vw,250px);translate:-50% 0}
.marq[data-mode=stack] .deck a{position:absolute;inset:0 0 auto 0;width:100%;transition:transform .7s var(--expo),opacity .5s}
.marq[data-mode=stack] .ph{box-shadow:0 1px 2px rgba(0,0,0,.08),0 18px 36px -18px rgba(0,0,0,.4)}
.marq[data-mode=cylinder]{position:relative;height:calc(var(--cw,170px) * 4 / 3 + 40px);perspective:1400px;cursor:grab;touch-action:pan-y}
.marq[data-mode=cylinder] .drum{position:absolute;left:50%;top:10px;transform-style:preserve-3d}
.marq[data-mode=cylinder] .drum a{position:absolute;left:0;top:0;width:var(--cw);backface-visibility:hidden}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
/* the Everything page is its own view: no home-section spacing above the canvas */
#every.view{padding-top:0}

/* ---------- shoot page: the strip ---------- */
/* shoot page: the Film strip. Laptop: one row at full height, scrolled sideways. Phone: stacked, scrolls down */
.film{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;overflow-y:hidden;padding:0 var(--gut);scrollbar-width:none;cursor:grab}
.film::-webkit-scrollbar{display:none}
.film.drag{cursor:grabbing;user-select:none}
.film figure{flex:none;margin:0;cursor:zoom-in}
.film img{height:clamp(300px,calc(100svh - 380px),720px);width:auto;max-width:none;border-radius:2px;background:var(--tile);user-select:none;-webkit-user-drag:none}
.film figcaption{margin-top:8px}
.film .fend{flex:none;align-self:center;display:grid;gap:8px;width:max(240px,24vw);padding:0 var(--gut) 0 24px}
.film .fend b{font-weight:500;font-size:clamp(24px,2.6vw,38px);line-height:1.05;letter-spacing:-.03em}
.film.one{justify-content:center}
.fbar{display:flex;align-items:center;gap:20px;padding:18px var(--gut) 0}
.fbar[hidden]{display:none}
.fbar .prog{flex:1;max-width:420px;height:1px;background:var(--line)}
.fbar .prog i{display:block;height:100%;background:var(--fg);transform-origin:left;transform:scaleX(0)}
@media (max-width:699px){
  .film{display:grid;gap:10px;overflow:visible;cursor:auto}
  .film img{width:100%;height:auto}
  .film figcaption{display:none}
  .film .fend{display:none}
  .fbar{display:none}
}

/* ---------- lighter type (Josh, 12-11-2026: the heavy capitals were 'whoa'). Headings move to Geist Medium in
   normal case, at calmer sizes. Small labels stay quiet ---------- */
@font-face{font-family:'Geist';src:url('assets/fonts/geist-500.woff2') format('woff2');font-weight:500;font-display:swap}
.head .nm,.intro h1,.h-marq .name,h2.sec,.shoot h1,.catpage h1,.contact .big,.shoots .meta b,.next b,.vw .bar b,.marq .meta b,.marq .cap b,.catpage .others{font-family:var(--sans);font-weight:500;text-transform:none}
.head .nm{font-size:16px;letter-spacing:-.01em}
.intro h1{font-size:clamp(34px,7vw,112px);letter-spacing:-.045em}
.h-marq .name{font-size:clamp(40px,7vw,112px);line-height:.95;letter-spacing:-.045em}
h2.sec{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.025em;line-height:1.05}
.shoot h1,.catpage h1{font-size:clamp(34px,5vw,72px);line-height:1;letter-spacing:-.04em}
.contact .big{font-size:clamp(24px,5vw,64px);letter-spacing:-.035em;line-height:1}
.shoots .meta b,.marq .meta b{font-size:14px;letter-spacing:-.005em}
.next b,.vw .bar b{font-size:16px;letter-spacing:-.01em}
.catpage .others{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em}

/* layout-check 13-11: no lone last words, two-line titles get room */
p{text-wrap:pretty}
.shoots .meta b,.next b{line-height:1.3}