/* ==========================================================================
   JUDE — Aryan Jude Shankar, portfolio. Third pass, October 2026.
   Ink and off-white, Stretch Pro for the wordmark, Mytupi for navigation,
   Switzer for everything else. Every page reads its colours from --bg / --fg,
   so the light and dark switch works everywhere.
   ========================================================================== */

@font-face { font-family: "Mytupi Bold"; src: url("../assets/fonts/mytupi-bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Stretch Pro"; src: url("../assets/fonts/stretch-pro.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/switzer-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Tiro"; src: url("../assets/fonts/tiro-devanagari-marathi-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }

:root {
  --ink: #0f0e0e; --paper: #e9e8e1; --white: #ffffff; --red: #e3000f;
  --f-display: "Stretch Pro", "Arial Black", sans-serif;
  --f-nav: "Mytupi Bold", "Arial Black", sans-serif;
  --f-body: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Tiro", "Times New Roman", serif;
  --gut: max(18px, 2.4vw);
  --nav-h: 64px;
  --ease: cubic-bezier(.76, 0, .24, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Themes. A page declares its own ground; the visitor's light / dark choice overrides it. */
body { --bg: var(--paper); --fg: var(--ink); --dim: #5d5d59; --rule: rgba(15, 14, 14, .18); --soft: rgba(15, 14, 14, .06); }
body[data-theme="dark"] { --bg: var(--ink); --fg: var(--paper); --dim: #8d8c86; --rule: rgba(233, 232, 225, .2); --soft: rgba(233, 232, 225, .07); }
body[data-theme="noir"] { --bg: var(--ink); --fg: var(--red); --dim: rgba(227, 0, 15, .62); --rule: rgba(227, 0, 15, .38); --soft: rgba(227, 0, 15, .1); }
html[data-mode="light"] body { --bg: var(--paper); --fg: var(--ink); --dim: #5d5d59; --rule: rgba(15, 14, 14, .18); --soft: rgba(15, 14, 14, .06); }
html[data-mode="dark"] body { --bg: var(--ink); --fg: var(--paper); --dim: #8d8c86; --rule: rgba(233, 232, 225, .2); --soft: rgba(233, 232, 225, .07); }
html[data-mode="dark"] body[data-theme="noir"] { --bg: var(--ink); --fg: var(--red); --dim: rgba(227, 0, 15, .62); --rule: rgba(227, 0, 15, .38); --soft: rgba(227, 0, 15, .1); }
html[data-mode="light"] body[data-theme="noir"] { --bg: var(--red); --fg: var(--ink); --dim: rgba(15, 14, 14, .62); --rule: rgba(15, 14, 14, .3); --soft: rgba(15, 14, 14, .08); }
/* Pages that sit on a photograph or film keep light type whatever the mode */
html body[data-lock] { --bg: var(--ink); --fg: var(--paper); --dim: rgba(233, 232, 225, .7); --rule: rgba(233, 232, 225, .28); --soft: rgba(233, 232, 225, .1); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--f-body); font-weight: 500; font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color .35s, color .35s; }
p, ul, ol, h1, h2, h3, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--fg); color: var(--bg); }
html.wiping::before, html.intro::before { content: ""; position: fixed; inset: 0; background: var(--ink); z-index: 900; }

/* ---------- Cursor: takes the page's text colour, with a ring in the ground colour so it shows over images ---------- */
@media (hover: hover) and (pointer: fine) { html.has-cursor, html.has-cursor * { cursor: none !important; } }
.cur { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; will-change: transform; }
.cur-dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 1.5px var(--bg); transition: width .2s var(--ease-out), height .2s var(--ease-out), margin .2s var(--ease-out), opacity .15s, background-color .2s; }
.cur-dot.is-link { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--fg), 0 0 0 1.5px var(--bg); }
.cur-dot.is-hidden { opacity: 0; }
.cur-tag { font-family: var(--f-nav); font-size: 11px; text-transform: uppercase; white-space: nowrap; max-width: 260px; background: var(--fg); color: var(--bg); padding: 7px 11px 6px; transform: translate(14px, 14px) scale(0); transform-origin: 0 0; transition: transform .2s var(--ease-out); }
.cur-tag.is-on { transform: translate(14px, 14px) scale(1); }
.cur-tag.is-tip { font-family: var(--f-body); font-weight: 500; text-transform: none; font-size: 12px; white-space: normal; width: max-content; line-height: 1.25; }
@media (hover: none), (pointer: coarse) { .cur { display: none; } }

/* ---------- The two switches: light / dark and Guide ---------- */
.tools { position: fixed; right: 12px; top: 50%; z-index: 820; transform: translateY(-50%); display: grid; gap: 8px; opacity: .3; transition: opacity .25s; color: var(--fg); }
.tools:hover, .tools:focus-within, .tools.show { opacity: 1; }
.tool { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; background: var(--bg); transition: background-color .2s, color .2s; }
.tool-mode::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); border: 1.5px solid currentColor; transition: transform .4s var(--ease-out); }
html.is-dark .tool-mode::before { transform: rotate(180deg); }
.tool-guide[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.tool-label { position: absolute; right: 36px; top: 50%; transform: translate(8px, -50%); white-space: nowrap; font-size: 11px; font-weight: 500; background: var(--fg); color: var(--bg); padding: 5px 9px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease-out); }
.tool:hover .tool-label, .tool:focus-visible .tool-label, .tools.show .tool-label { opacity: 1; transform: translate(0, -50%); }
html.is-scrolling .tools { opacity: 0; }

/* ---------- Page transition: five strips rise, the page name sits on them, then they lift ---------- */
.wipe { position: fixed; inset: 0; z-index: 950; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; color: var(--paper); }
.wipe i { background: var(--ink); transform: scaleY(0); transform-origin: bottom; }
.wipe-name { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; text-transform: uppercase; font-size: clamp(56px, 15vw, 260px); letter-spacing: -.055em; line-height: .8; }
.wipe-name b { display: block; overflow: hidden; padding: .06em .04em; font-weight: 700; }
.wipe-name span { display: block; transform: translateY(110%); }
.wipe.is-in { pointer-events: all; }
.wipe.is-in i { transition: transform .42s var(--ease); transform: scaleY(1); }
.wipe.is-in i:nth-child(2), .wipe.is-out i:nth-child(2) { transition-delay: .035s; } .wipe.is-in i:nth-child(3), .wipe.is-out i:nth-child(3) { transition-delay: .07s; }
.wipe.is-in i:nth-child(4), .wipe.is-out i:nth-child(4) { transition-delay: .105s; } .wipe.is-in i:nth-child(5), .wipe.is-out i:nth-child(5) { transition-delay: .14s; }
.wipe.is-in .wipe-name span { transition: transform .45s var(--ease) .12s; transform: none; }
.wipe.is-covering i { transform: scaleY(1); } .wipe.is-covering .wipe-name span { transform: none; }
.wipe.is-out i { transform-origin: top; transition: transform .55s var(--ease); transform: scaleY(0); }
.wipe.is-out .wipe-name span { transition: transform .35s var(--ease); transform: translateY(-110%); }

/* ---------- Intro: the work runs past, then three things are drawn like a plan and undrawn again:
   the mark, a line of welcome, and the three switches. Coming home through the logo plays only the first. ---------- */
.intro-layer { position: fixed; inset: 0; z-index: 960; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; }
.intro-layer i { background: var(--ink); transform-origin: top; }
.intro-layer.is-done i { transition: transform .9s var(--ease); transform: scaleY(0); }
.intro-layer.is-done i:nth-child(2) { transition-delay: .06s; } .intro-layer.is-done i:nth-child(3) { transition-delay: .12s; }
.intro-layer.is-done i:nth-child(4) { transition-delay: .18s; } .intro-layer.is-done i:nth-child(5) { transition-delay: .24s; }
.intro-ui { position: fixed; inset: 0; z-index: 961; color: var(--paper); pointer-events: none; overflow: hidden; }
.intro-ui.is-done { transition: opacity .45s; opacity: 0; }
.intro-count { position: absolute; left: var(--gut); bottom: var(--gut); font-size: 12px; font-variant-numeric: tabular-nums; }
.intro-note { position: absolute; right: var(--gut); bottom: var(--gut); font-size: 12px; text-align: right; }
.intro-run { position: absolute; left: 0; top: 50%; width: max-content; height: 38vh; display: flex; gap: 2.2vw; align-items: center; transform: translate3d(-100%, -50%, 0); will-change: transform; z-index: 2; }
.intro-run img { height: 100%; width: auto; flex: none; }
.intro-run.go { transition: transform 1.2s cubic-bezier(.6, .05, .25, 1); transform: translate3d(100vw, -50%, 0); }
/* A drawn group: guide lines, then outlines wiped in, then filled; removing the classes undraws it the same way */
.dg { position: absolute; inset: 0; display: grid; place-items: center; }
.dg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dg line, .dg circle, .dg rect { fill: none; stroke: var(--paper); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .5; stroke-dasharray: var(--len, 3000); stroke-dashoffset: var(--len, 3000); transition: stroke-dashoffset .7s var(--ease); }
.dg.on line, .dg.on circle, .dg.on rect { transition: stroke-dashoffset 1s var(--ease) var(--d, 0s); stroke-dashoffset: 0; }
.dg text { fill: var(--paper); font: 500 10px var(--f-body); opacity: 0; transition: opacity .3s; }
.dg.on text { opacity: .65; transition: opacity .5s .5s; }
.draw { position: relative; display: block; }
.draw .o, .draw .f { display: block; clip-path: inset(-10% 100% -10% -2%); transition: clip-path .65s var(--ease); }
.draw .f { position: absolute; inset: 0; }
.dg.on .draw .o { clip-path: inset(-10% -2% -10% -2%); transition: clip-path 1s var(--ease) calc(.3s + var(--k, 0) * .16s); }
.dg.fill .draw .f { clip-path: inset(-10% -2% -10% -2%); transition: clip-path .6s var(--ease) calc(var(--k, 0) * .1s); }
.fade { opacity: 0; transition: opacity .35s; }
.dg.fill .fade { opacity: 1; transition: opacity .5s .3s; }
/* the mark */
.bp-logo { display: flex; gap: clamp(8px, 1vw, 16px); height: clamp(58px, 10.5vw, 150px); }
.bp-part { height: 100%; }
.bp-part.m { aspect-ratio: 319 / 249; } .bp-part.w { aspect-ratio: 824 / 252; --k: 1; }
.bp-part i { height: 100%; width: 100%; background: var(--paper); -webkit-mask: center / 100% 100% no-repeat; mask: center / 100% 100% no-repeat; }
.bp-part.m .o { -webkit-mask-image: url("../assets/img/mark-outline.png"); mask-image: url("../assets/img/mark-outline.png"); }
.bp-part.w .o { -webkit-mask-image: url("../assets/img/wordmark-outline.png"); mask-image: url("../assets/img/wordmark-outline.png"); }
.bp-part.m .f { -webkit-mask-image: url("../assets/img/mark-mask.png"); mask-image: url("../assets/img/mark-mask.png"); }
.bp-part.w .f { -webkit-mask-image: url("../assets/img/wordmark-mask.png"); mask-image: url("../assets/img/wordmark-mask.png"); }
/* the welcome */
.say-box { display: grid; gap: .28em; justify-items: center; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(17px, 3.3vw, 60px); line-height: 1; white-space: nowrap; }
.say-box .o { color: transparent; -webkit-text-stroke: 1px var(--paper); }
.say-box .draw + .draw { --k: 1; }
/* the three switches */
.keys-box { display: flex; gap: clamp(26px, 6vw, 110px); align-items: flex-start; }
.key { display: grid; justify-items: center; gap: 14px; text-align: center; width: clamp(150px, 17vw, 240px); }
.key:nth-child(2) { --k: 1; } .key:nth-child(3) { --k: 2; }
.key-ico i { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid var(--paper); font-style: normal; font-weight: 700; font-size: 22px; }
.key-ico .f { background: var(--paper); color: var(--ink); }
.key-ico .f.half { background: linear-gradient(90deg, var(--paper) 50%, transparent 50%); }
.key-ico .o.plus { position: relative; }
.key-ico .plus::before, .key-ico .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.key-ico .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.key-ico .o.plus { color: var(--paper); }
.key-name { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(13px, 1.5vw, 24px); line-height: 1; white-space: nowrap; }
.key-name .o { color: transparent; -webkit-text-stroke: 1px var(--paper); }
.key p { font-size: 13px; line-height: 1.3; color: rgba(233, 232, 225, .7); }
@media (max-width: 860px) { .keys-box { flex-direction: column; align-items: center; gap: 22px; } .key p { display: none; } }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 800; height: var(--nav-h); padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; color: var(--fg); pointer-events: none; transition: opacity .18s, transform .35s var(--ease-out), color .35s; }
.nav a, .nav button { pointer-events: all; }
html.nav-away .nav { transform: translateY(-110%); }
.brand { display: flex; align-items: center; gap: 8px; height: 26px; }
.brand i { display: block; height: 100%; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.brand .bm { aspect-ratio: 319 / 249; -webkit-mask-image: url("../assets/img/mark-mask.png"); mask-image: url("../assets/img/mark-mask.png"); }
.brand .bw { aspect-ratio: 824 / 252; -webkit-mask-image: url("../assets/img/wordmark-mask.png"); mask-image: url("../assets/img/wordmark-mask.png"); }
.nav-links { display: flex; gap: clamp(14px, 2vw, 34px); font-family: var(--f-nav); font-size: 13px; text-transform: uppercase; }
.nav-links a { position: relative; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-links sup { font-family: var(--f-body); font-size: 9px; margin-left: 2px; }
.menu-btn { display: none; font-family: var(--f-nav); font-size: 13px; text-transform: uppercase; }
.menu { position: fixed; inset: 0; z-index: 790; background: var(--ink); color: var(--paper); padding: calc(var(--nav-h) + 20px) var(--gut) var(--gut); display: flex; flex-direction: column; justify-content: space-between; transform: translateY(-101%); transition: transform .6s var(--ease); }
.menu.is-open { transform: none; }
.menu a { display: block; font-weight: 700; text-transform: uppercase; font-size: clamp(40px, 13vw, 84px); letter-spacing: -.05em; line-height: .95; }
.menu small { font-size: 12px; }
html.menu-open .nav { color: var(--paper); }
@media (max-width: 860px) { .nav-links { display: none; } .menu-btn { display: block; } }

/* ---------- Shared type and motion ---------- */
.mono { font-family: var(--f-body); font-weight: 500; font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.giant { font-weight: 700; text-transform: uppercase; letter-spacing: -.055em; line-height: .82; font-size: clamp(64px, 17.5vw, 320px); }
.giant sup { font-family: var(--f-body); font-weight: 500; font-size: .09em; letter-spacing: 0; vertical-align: top; position: relative; top: .9em; margin-left: .5em; }
.page { padding: calc(var(--nav-h) + 24px) var(--gut) 0; }
.page-head { padding-bottom: clamp(24px, 4vw, 56px); }
.mask { display: block; overflow: hidden; }
.mask > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease-out); }
.is-ready .mask > span { transform: none; }
.rv { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-out); }
.rv.in { clip-path: inset(0 0 0 0); }
.rv img, .rv video { transform: scale(1.12); transition: transform 1.6s var(--ease-out); }
.rv.in img, .rv.in video { transform: none; }
/* Scroll-in: rows and tiles rise as they enter; --n staggers neighbours */
.sa { opacity: 0; transform: translateY(26px); transition: opacity .6s calc(var(--n, 0) * 45ms), transform .9s var(--ease-out) calc(var(--n, 0) * 45ms); }
.sa.in { opacity: 1; transform: none; }
.chip { font-family: var(--f-nav); font-size: 11px; text-transform: uppercase; padding: 9px 12px 8px; border: 1px solid var(--rule); background: var(--bg); color: var(--dim); transition: color .2s, border-color .2s, background-color .2s; }
.chip sup { font-family: var(--f-body); font-size: 8px; margin-left: 3px; }
.chip:hover { color: var(--fg); border-color: var(--fg); }
.chip[aria-pressed="true"] { color: var(--bg); background: var(--fg); border-color: var(--fg); }

/* ---------- Footer ---------- */
.foot { margin-top: clamp(80px, 14vw, 220px); padding: 0 var(--gut) var(--gut); }
.foot-next { display: block; border-top: 1px solid var(--rule); padding-top: 18px; }
.foot-next .mono { color: var(--dim); }
.foot-next b { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: -.055em; line-height: .86; font-size: clamp(56px, 15vw, 280px); -webkit-text-stroke: 1.5px currentColor; color: transparent; transition: color .35s; }
.foot-next:hover b { color: var(--fg); }
.foot-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 28px; color: var(--dim); }
.foot-row a:hover { color: var(--fg); }

/* ==========================================================================
   Home — a grained sunset, a band of words across the middle, a map of work on hover
   ========================================================================== */
.home { position: fixed; inset: 0; overflow: hidden; background: #c8691a; }
.home-bg { position: absolute; inset: -2%; transform: scale(1.1); transition: transform 2s var(--ease-out), filter .5s; }
.is-ready .home-bg { transform: none; }
.home-bg img { width: 100%; height: 100%; object-fit: cover; }
html[data-mode="dark"] .home-bg { filter: brightness(.5) saturate(.9); }
.home-veil { position: absolute; inset: 0; background: rgba(15, 14, 14, 0); transition: background-color .35s; z-index: 2; }
.home.is-peek .home-veil { background: rgba(15, 14, 14, .74); }
.home.is-peek .home-bg { transform: scale(1.06); }
.home-meta { position: absolute; z-index: 3; left: var(--gut); top: calc(var(--nav-h) + 2px); font-size: 12px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.home-id { position: absolute; z-index: 3; right: var(--gut); top: calc(var(--nav-h) + 2px); text-align: right; font-size: 12px; line-height: 1.35; }
.home-id b { font-weight: 700; }
.home-foot { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: var(--gut); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; font-size: 12px; line-height: 1.35; color: var(--paper); }
.home-foot nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.home-foot a { position: relative; }
.home-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-meta, .home-id, .home-foot { transition: opacity .3s; }
.home.is-peek .home-meta, .home.is-peek .home-id, .home.is-peek .home-foot { opacity: 0; }
html.home-peek .nav, html.home-peek .tools { opacity: 0; }
.band { position: absolute; z-index: 6; left: var(--gut); right: var(--gut); top: 50%; transform: translateY(-50%); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px clamp(20px, 3.4vw, 64px); }
.band-item { display: flex; align-items: center; gap: .5em; font-weight: 700; text-transform: uppercase; letter-spacing: -.035em; line-height: 1; font-size: clamp(17px, 2vw, 32px); clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease) calc(.2s + var(--i) * 90ms), transform .45s var(--ease-out), opacity .3s, color .3s; }
.is-ready .band-item { clip-path: inset(-40% -10% -40% -10%); }
.band-item i { width: 1.45em; height: 1.45em; background: center / cover no-repeat var(--ink); display: block; flex: none; scale: 0; transition: scale .6s var(--ease-out) calc(.5s + var(--i) * 90ms); }
.is-ready .band-item i { scale: 1; }
.band-item sup { font-size: .4em; font-weight: 500; letter-spacing: 0; align-self: flex-start; margin-left: -.2em; }
.band-item:hover, .band-item.on { transform: scale(1.5); }
.home.is-peek .band-item:not(.on) { opacity: .1; }
.home.is-peek .band-item.on { color: var(--paper); }
.hlines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.hlines line { stroke: var(--paper); stroke-width: 1; opacity: .55; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.hlines line.r { stroke: var(--red); opacity: .9; }
.hlines.on line { transition: stroke-dashoffset .7s var(--ease) calc(var(--i) * 30ms); stroke-dashoffset: 0; }
.hmap { position: absolute; inset: 0; z-index: 5; pointer-events: none; color: var(--paper); }
.hnode { position: absolute; left: var(--x); top: var(--y); width: var(--w); opacity: 0; transform: translate(-50%, -50%) scale(.7); transition: opacity .2s, transform .5s var(--ease-out); }
.hmap.on .hnode { opacity: 1; transform: translate(-50%, -50%); transition-delay: calc(.08s + var(--i) * 35ms); }
.hnode img { width: 100%; height: auto; }
.hnode span { display: block; margin-top: 5px; font-size: 10px; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 860px) { .band { flex-direction: column; align-items: flex-start; top: 46%; } .home-id { display: none; } .hnode span { display: none; } }

/* ==========================================================================
   Work — overview (stack) then index
   ========================================================================== */
.work-bar { position: fixed; left: var(--gut); right: var(--gut); bottom: var(--gut); z-index: 700; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; pointer-events: none; transition: opacity .18s; }
.work-bar > * { pointer-events: all; }
.seg { display: flex; gap: 6px; }
.filters { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.filters .chip { font-size: 9px; padding: 5px 8px 4px; border-color: transparent; background: none; }
.filters .chip:hover { border-color: var(--rule); }
.filters .chip[aria-pressed="true"] { background: none; color: var(--fg); border-color: var(--fg); }
.to-index { position: fixed; left: 50%; bottom: var(--gut); transform: translateX(-50%); z-index: 700; display: grid; justify-items: center; gap: 4px; font-family: var(--f-nav); font-size: 11px; text-transform: uppercase; color: var(--dim); padding: 8px 14px 4px; border-bottom: 1px solid var(--rule); transition: opacity .18s, color .2s, border-color .2s; }
.to-index:hover { color: var(--fg); border-color: var(--fg); }
.to-index svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; animation: nudge 1.8s var(--ease) infinite; }
.to-index.up svg { transform: rotate(180deg); animation: none; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.stage { position: relative; }
.scene { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1500px; perspective-origin: 50% 46%; }
.plane { position: absolute; left: 50%; top: 52%; width: clamp(220px, 30vw, 520px); will-change: transform, opacity; backface-visibility: hidden; }
.plane img { width: 100%; height: auto; transition: transform .5s var(--ease-out); }
.plane:hover img { transform: translateY(-5%); }
.hud { position: absolute; left: var(--gut); top: calc(var(--nav-h) + 20px); z-index: 5; max-width: min(46vw, 620px); pointer-events: none; }
.hud-no, .hud-meta { color: var(--dim); transition: opacity .18s; }
.hud-title { font-weight: 700; text-transform: uppercase; letter-spacing: -.045em; line-height: .9; font-size: clamp(30px, 4.6vw, 76px); margin: 6px 0 10px; }
html.is-scrolling .nav, html.is-scrolling .work-bar, html.is-scrolling .to-index, html.is-scrolling .hud-no, html.is-scrolling .hud-meta { opacity: 0; }
.index { padding: clamp(60px, 9vw, 140px) var(--gut) 140px; }
.index-head { margin-bottom: clamp(20px, 3vw, 40px); }
.row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 120px 150px 60px; gap: 16px; align-items: baseline; padding: 10px 0 8px; border-top: 1px solid var(--rule); position: relative; }
.row:last-child { border-bottom: 1px solid var(--rule); }
.row .t { font-weight: 700; text-transform: uppercase; letter-spacing: -.045em; line-height: .95; font-size: clamp(26px, 4.4vw, 72px); color: transparent; -webkit-text-stroke: 1px var(--fg); transition: color .25s, transform .5s var(--ease-out); }
.row:hover .t { color: var(--fg); transform: translateX(14px); }
.row .mono { color: var(--dim); }
.row:hover .mono { color: var(--fg); }
.peek { position: fixed; left: 0; top: 0; z-index: 600; width: clamp(180px, 22vw, 360px); pointer-events: none; opacity: 0; transition: opacity .25s; will-change: transform; }
.peek.on { opacity: 1; }
.peek img { width: 100%; }
@media (max-width: 860px) {
  .row { grid-template-columns: 34px minmax(0, 1fr) 44px; }
  .row .c3, .row .c4 { display: none; }
  .filters { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .work-bar { flex-direction: column-reverse; align-items: stretch; bottom: calc(var(--gut) + 46px); }
  .hud { max-width: none; right: var(--gut); }
}

/* ==========================================================================
   Project
   ========================================================================== */
.pj-title { font-weight: 700; text-transform: uppercase; letter-spacing: -.055em; line-height: .84; font-size: clamp(48px, 11.5vw, 220px); text-wrap: balance; }
.pj-top { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px var(--gut); margin-top: clamp(28px, 5vw, 80px); padding-top: 18px; border-top: 1px solid var(--rule); }
.pj-meta { grid-column: 1 / span 4; display: grid; align-content: start; }
.pj-meta div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.pj-meta dt { color: var(--dim); }
.pj-text { grid-column: 6 / span 7; font-size: clamp(19px, 1.9vw, 30px); line-height: 1.22; letter-spacing: -.015em; max-width: 34em; }
.pj-text.empty { color: var(--dim); font-size: 13px; letter-spacing: 0; }
.pj-media { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gut); margin-top: clamp(32px, 4.5vw, 72px); align-items: start; }
.pj-media figure { grid-column: span 12; position: relative; }
.pj-media figure.b { grid-column: 1 / span 7; }
.pj-media figure.c { grid-column: 8 / span 5; margin-top: 18vw; }
.pj-media figure.d { grid-column: 4 / span 6; }
.pj-media figure.e { grid-column: 1 / span 5; }
.pj-media figure.f { grid-column: 6 / span 7; margin-top: 10vw; }
.pj-media img, .pj-media video { width: 100%; height: auto; }
.pj-media figcaption { margin-top: 8px; color: var(--dim); }
.pj-video { background: #000; }
.lb { position: fixed; inset: 0; z-index: 850; background: rgba(15, 14, 14, .96); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
.lb.on { opacity: 1; pointer-events: all; }
.lb img { max-width: 92vw; max-height: 88vh; }
.lb .mono { position: absolute; left: var(--gut); bottom: var(--gut); color: var(--paper); }
.pj-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); margin-top: clamp(80px, 12vw, 200px); border-top: 1px solid var(--rule); padding-top: 18px; }
.pj-nav a { display: grid; gap: 8px; }
.pj-nav a:last-child { text-align: right; }
.pj-nav b { font-weight: 700; text-transform: uppercase; letter-spacing: -.05em; line-height: .9; font-size: clamp(26px, 5vw, 92px); color: transparent; -webkit-text-stroke: 1px var(--fg); transition: color .25s; }
.pj-nav a:hover b { color: var(--fg); }
.pj-nav .mono { color: var(--dim); }
@media (max-width: 860px) {
  .pj-meta, .pj-text { grid-column: 1 / -1; }
  .pj-media figure, .pj-media figure.b, .pj-media figure.c, .pj-media figure.d, .pj-media figure.e, .pj-media figure.f { grid-column: 1 / -1; margin-top: 0; }
}

/* ==========================================================================
   Archive, and the photography grid
   ========================================================================== */
.arc-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 clamp(30px, 5vw, 70px); }
.arc { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(70px, 9vw, 150px), 1fr)); gap: clamp(26px, 5vw, 84px) clamp(22px, 4vw, 70px); align-items: center; padding-bottom: 120px; }
.arc > * { display: block; aspect-ratio: 1; position: relative; }
.arc a { transition: opacity .3s, scale .5s var(--ease-out), transform .9s var(--ease-out); }
.arc a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.arc:hover a { opacity: .22; }
.arc a:hover { opacity: 1; scale: 1.5; z-index: 2; }
.arc a[hidden] { display: none; }
.ph { background: repeating-linear-gradient(135deg, var(--soft) 0 1px, transparent 1px 14px), var(--soft); position: relative; border: 1px solid var(--rule); }
.ph .mono { position: absolute; left: 10px; top: 8px; color: var(--dim); }
.ph .mono.b { top: auto; bottom: 8px; }

/* Photography: selected works run sideways, straight on */
.strip-wrap { position: relative; }
.strip-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.strip { display: flex; gap: clamp(14px, 2vw, 34px); padding: 0 var(--gut); will-change: transform; align-items: center; }
.strip .ph { flex: none; height: clamp(240px, 58vh, 640px); }
.strip-title { flex: none; width: min(64vw, 700px); }
.strip-count { position: absolute; left: var(--gut); top: calc(var(--nav-h) + 6px); color: var(--dim); transition: opacity .18s; }
.seg.big { position: fixed; left: 50%; bottom: var(--gut); transform: translateX(-50%); z-index: 700; transition: opacity .18s; }
.seg.big .chip { font-size: 13px; padding: 13px 20px 11px; }
html.is-scrolling .seg.big, html.is-scrolling .strip-count { opacity: 0; }

/* ==========================================================================
   Film: one film per screen
   ========================================================================== */
.reel { position: relative; display: block; height: 100vh; overflow: hidden; color: var(--paper); border-bottom: 1px solid var(--rule); }
.reel-bg { position: absolute; inset: 0; background: #000; }
.reel-bg video, .reel-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.8s var(--ease-out), opacity .5s; }
.reel-bg img { opacity: 0; } .reel-bg img.on { opacity: 1; }
.reel.live .reel-bg video, .reel.live .reel-bg img { transform: none; }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 14, 14, .82), rgba(15, 14, 14, 0) 46%, rgba(15, 14, 14, .35)); pointer-events: none; }
.reel-top { position: absolute; z-index: 2; left: var(--gut); right: var(--gut); top: calc(var(--nav-h) + 10px); display: flex; justify-content: space-between; }
.reel-info { position: absolute; z-index: 2; left: var(--gut); right: var(--gut); bottom: var(--gut); }
.reel-title { font-weight: 700; text-transform: uppercase; letter-spacing: -.055em; line-height: .84; font-size: clamp(54px, 13vw, 250px); margin-bottom: 14px; transform: translateY(18%); opacity: 0; transition: transform 1s var(--ease-out), opacity .6s; }
.reel.live .reel-title { transform: none; opacity: 1; }
.reel-note { font-weight: 700; text-transform: uppercase; letter-spacing: -.04em; line-height: 1; font-size: clamp(22px, 3.2vw, 54px); max-width: 22em; }
.reel-note a { color: transparent; -webkit-text-stroke: 1px var(--fg); transition: color .25s; }
.reel-note a:hover { color: var(--fg); }

/* ==========================================================================
   Notes: periods on the left, an index in the middle, frosted covers on the right
   ========================================================================== */
.nt { display: grid; grid-template-columns: 150px minmax(200px, 300px) minmax(0, 1fr); gap: 0 clamp(16px, 2.4vw, 40px); padding: calc(var(--nav-h) + 8px) var(--gut) 80px; align-items: start; }
.nt-side, .nt-index { position: sticky; top: calc(var(--nav-h) + 8px); }
.nt-side { display: grid; gap: 1px; font-size: 13px; font-weight: 700; text-transform: uppercase; justify-items: start; }
.nt-side button { text-transform: uppercase; font-weight: 700; color: var(--dim); transition: color .2s; }
.nt-side button:hover, .nt-side button[aria-pressed="true"] { color: var(--fg); }
.nt-word { margin-top: 36vh; font-size: 17px; font-weight: 700; text-transform: uppercase; color: var(--dim); opacity: .55; white-space: nowrap; }
.nt-index { display: grid; gap: 1px; justify-items: end; text-align: right; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }
.nt-index a { color: var(--fg); transition: color .2s, opacity .2s; }
.nt-index.dim a { color: var(--dim); opacity: .5; }
.nt-index.dim a.on { color: var(--fg); opacity: 1; }
.nt-index a[hidden] { display: none; }
.nt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.nt-card { display: block; }
.nt-card[hidden] { display: none; }
.nt-pic { aspect-ratio: 4 / 5.6; overflow: hidden; background: var(--soft); }
.nt-pic img { width: 100%; height: 100%; object-fit: cover; filter: blur(26px) saturate(1.15); transform: scale(1.3); transition: filter .5s, transform .8s var(--ease-out); }
.nt-card:hover .nt-pic img, .nt-card.on .nt-pic img { filter: none; transform: none; }
.nt-cap { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; min-height: 3.6em; }
.nt-cap span:last-child { color: var(--dim); flex: none; }
.nt-cap b { font-weight: 500; opacity: 0; transition: opacity .3s; display: block; }
.nt-card:hover .nt-cap b, .nt-card.on .nt-cap b { opacity: 1; }
.nt-cap i { font-style: normal; color: var(--dim); display: block; }
@media (max-width: 860px) { .nt { grid-template-columns: 1fr; } .nt-side, .nt-index { position: static; } .nt-side { display: flex; gap: 14px; margin-bottom: 14px; } .nt-word { display: none; } .nt-index { display: none; } .nt-grid { grid-template-columns: 1fr 1fr; } .nt-cap b { opacity: 1; } }

/* One note */
.note { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 0 clamp(24px, 5vw, 90px); padding: calc(var(--nav-h) + 8px) var(--gut) 0; align-items: start; }
.note-index { position: sticky; top: calc(var(--nav-h) + 8px); display: grid; gap: 1px; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }
.note-index a { color: var(--dim); transition: color .2s; }
.note-index a:hover, .note-index a[aria-current="true"] { color: var(--fg); }
.note-index .back { color: var(--fg); font-weight: 700; margin-bottom: 14px; }
.note-title { font-weight: 700; text-transform: uppercase; letter-spacing: -.055em; line-height: .86; font-size: clamp(40px, 8vw, 150px); text-wrap: balance; }
.note-meta { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 22px 0 0; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.note-meta span { color: var(--dim); margin-right: 6px; }
.note-meta a { text-decoration: underline; text-underline-offset: 3px; }
.note-lede { font-size: clamp(22px, 2.6vw, 40px); line-height: 1.12; letter-spacing: -.025em; font-weight: 500; max-width: 24em; margin: clamp(28px, 4vw, 60px) 0; }
.note-body { max-width: 46em; display: grid; gap: 1.1em; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; }
.note-body h2 { font-family: var(--f-nav); font-weight: 400; font-size: 13px; text-transform: uppercase; margin-top: 1.6em; }
.note-body blockquote { margin: .6em 0; font-size: clamp(22px, 2.5vw, 38px); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; text-transform: uppercase; }
.note-body blockquote cite { display: block; margin-top: 10px; font-size: 12px; font-style: normal; font-weight: 500; letter-spacing: .02em; color: var(--dim); }
.note-fig { margin: .8em 0; width: min(100%, 880px); overflow: hidden; background: var(--soft); }
.note-fig img { width: 100%; height: auto; filter: blur(30px); transform: scale(1.2); transition: filter 1.1s, transform 1.4s var(--ease-out); }
.note-fig.in img { filter: none; transform: none; }
.note-src { margin-top: 2.4em; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--dim); }
.note-src b { display: block; color: var(--fg); font-family: var(--f-nav); font-weight: 400; text-transform: uppercase; margin-bottom: 6px; }
@media (max-width: 860px) { .note { grid-template-columns: 1fr; } .note-index { position: static; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 26px; } .note-index a:not(.back) { display: none; } }

/* ==========================================================================
   Info — the Framer About page, tightened
   ========================================================================== */
.ab-hero { position: relative; height: 100vh; min-height: 520px; overflow: hidden; background: var(--ink); --px: calc(100vw / 1440); }
.ab-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-t { position: absolute; margin: 0; transform: translateY(-50%); font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: calc(var(--px) * 27); line-height: 1.2; letter-spacing: -.04em; color: var(--paper); -webkit-text-stroke: .4px var(--paper); white-space: nowrap; }
.ab-t--name { left: 50%; top: 30.8%; transform: translate(-50%, -50%); font-size: calc(var(--px) * 46); }
.ab-t--csm { left: calc(var(--px) * 351); top: 40.6%; } .ab-t--role { left: calc(var(--px) * 869); top: 40.6%; }
.ab-t--born { left: calc(var(--px) * 299); top: 50.3%; } .ab-t--based { left: calc(var(--px) * 986); top: 50.3%; }
.ab-t--clock-in { left: calc(var(--px) * 257); top: 61.3%; font-variant-numeric: tabular-nums; } .ab-t--clock-uk { left: calc(var(--px) * 1069); top: 61.3%; font-variant-numeric: tabular-nums; }
.ab-t--big { font-size: calc(var(--px) * 79); -webkit-text-stroke-width: .8px; }
.ab-t--jude { left: calc(var(--px) * 164); top: 77%; } .ab-t--archiving { left: calc(var(--px) * 1037); top: 77%; }
@media (max-width: 860px) {
  .ab-t { font-size: 19px; } .ab-t--name { top: 24%; font-size: 30px; }
  .ab-t--csm, .ab-t--born, .ab-t--clock-in { left: 16px; } .ab-t--role, .ab-t--based, .ab-t--clock-uk { left: auto; right: 16px; }
  .ab-t--csm, .ab-t--role { top: 33%; } .ab-t--born, .ab-t--based { top: 39%; } .ab-t--clock-in, .ab-t--clock-uk { top: 45%; }
  .ab-t--big { font-size: 12.5vw; } .ab-t--jude { left: 16px; top: 70%; } .ab-t--archiving { left: auto; right: 16px; top: 80%; }
}
.about { padding: clamp(40px, 6vw, 100px) var(--gut) 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(18px, 2.6vw, 44px) var(--gut); }
.about h2 { grid-column: 1 / span 8; font-weight: 700; text-transform: uppercase; letter-spacing: -.045em; line-height: .96; font-size: clamp(30px, 4.1vw, 66px); }
.about h2 span { display: block; }
.about-side { grid-column: 9 / span 4; text-align: right; font-weight: 700; text-transform: uppercase; letter-spacing: -.045em; line-height: .96; font-size: clamp(30px, 4.1vw, 66px); }
.about-bio { grid-column: 1 / -1; font-style: italic; font-weight: 500; font-size: clamp(22px, 3.3vw, 56px); line-height: 1.06; letter-spacing: -.03em; text-align: justify; }
.about-bio span { opacity: .14; transition: opacity .35s; }
.about-bio span.lit { opacity: 1; }
.about-mark { grid-column: 11 / span 2; justify-self: end; width: min(184px, 100%); height: auto; margin-top: -6px; }
html.is-dark .about-mark { filter: invert(1); }
.ins { padding: clamp(60px, 8vw, 130px) var(--gut) 0; display: grid; grid-template-columns: minmax(240px, 30%) minmax(0, 1fr); gap: var(--gut); align-items: start; }
.ins-tabs { display: grid; gap: 10px; position: sticky; top: calc(var(--nav-h) + 10px); }
.ins-tab { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 16px 18px 14px; border: 1.5px solid var(--fg); border-radius: 999px; font-family: var(--f-serif); font-style: italic; font-size: clamp(24px, 2.7vw, 44px); line-height: 1; letter-spacing: -.04em; transition: background-color .25s, color .25s, padding .35s var(--ease-out), border-radius .35s; }
.ins-tab small { font-family: var(--f-body); font-style: normal; font-size: 11px; letter-spacing: 0; }
.ins-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .35s var(--ease-out); }
.ins-tab:hover, .ins-tab[aria-selected="true"] { background: var(--fg); color: var(--bg); padding-left: 28px; border-radius: 14px; }
.ins-tab:hover svg, .ins-tab[aria-selected="true"] svg { transform: translateX(4px) rotate(-45deg); }
.ins-stage { position: relative; min-height: min(78vh, 760px); }
.ins-title { font-size: clamp(54px, 9.8vw, 142px); line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px var(--fg); white-space: nowrap; font-weight: 400; position: relative; z-index: 2; transition: opacity .3s; }
.ins-photo { position: absolute; right: 0; top: 12%; width: min(46%, 540px); aspect-ratio: 540 / 641; object-fit: cover; filter: grayscale(1); transition: opacity .3s; }
.ins-stage:not([data-view="overview"]) .ins-title { opacity: 0; }
.ins-stage:not([data-view="overview"]) .ins-photo { opacity: .12; }
.ins-panel { position: absolute; inset: 0; animation: panel-in .4s var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ab-row { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.ab-row dt { font-weight: 700; font-size: clamp(14px, 1.5vw, 22px); line-height: .98; letter-spacing: -.04em; }
.ab-row dd { text-align: right; font-size: clamp(17px, 2.3vw, 36px); line-height: .98; letter-spacing: -.04em; color: var(--dim); }
.ab-row dd strong { display: block; font-weight: 500; color: var(--fg); }
.ab-tools { text-align: right; font-size: clamp(34px, 5.6vw, 88px); line-height: 1.04; letter-spacing: -.03em; }
.ab-ovals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding-top: 4%; }
.ab-ovals li { display: grid; place-items: center; aspect-ratio: 2 / 1; border: 1.5px solid var(--fg); border-radius: 50%; font-weight: 700; font-size: clamp(16px, 2.2vw, 34px); letter-spacing: -.05em; }
@media (max-width: 860px) { .about h2, .about-side, .about-mark { grid-column: 1 / -1; text-align: left; justify-self: start; } .ins { grid-template-columns: 1fr; } .ins-tabs { position: static; } .ins-stage { min-height: 520px; } }

/* ==========================================================================
   Contact — matte black and red: two rows of work, one line in between, four numbered ways in
   ========================================================================== */
.ct { position: fixed; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); overflow: hidden; padding-top: var(--nav-h); }
.ct-row { overflow: hidden; display: flex; align-items: stretch; min-height: 0; }
.ct-track { display: flex; gap: 6px; height: 100%; flex: none; animation: slide 70s linear infinite; padding-right: 6px; }
.ct-row.rev .ct-track { animation-direction: reverse; }
.ct-row:hover .ct-track { animation-play-state: paused; }
.ct-track a { height: 100%; flex: none; display: block; }
.ct-track img { height: 100%; width: auto; filter: grayscale(1) contrast(1.05); opacity: .55; transition: filter .3s, opacity .3s; }
.ct-track a:hover img { filter: none; opacity: 1; }
@keyframes slide { to { transform: translateX(-50%); } }
.ct-mid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--gut); padding: clamp(10px, 1.6vw, 24px) var(--gut); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ct-mid p { font-size: 12px; line-height: 1.35; }
.ct-mid p b { display: block; font-weight: 700; font-size: 15px; }
.ct-word { font-weight: 700; letter-spacing: -.06em; line-height: .8; font-size: clamp(64px, 13vw, 240px); }
.ct-links { display: grid; justify-items: end; gap: 2px; font-size: clamp(14px, 1.3vw, 20px); font-weight: 500; }
.ct-links a, .ct-links button { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ct-links a:hover, .ct-links button:hover { text-decoration-thickness: 2px; }
.ct-nums { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.ct-num { display: grid; justify-items: center; gap: 2px; padding: 8px 6px 12px; border-right: 1px solid var(--rule); text-align: center; transition: background-color .25s, color .25s; }
.ct-num:last-child { border-right: 0; }
.ct-num b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(54px, 8.4vw, 150px); line-height: .9; letter-spacing: -.04em; }
.ct-num span { font-family: var(--f-nav); font-size: 11px; text-transform: uppercase; }
.ct-num em { font-style: normal; font-size: 12px; color: var(--dim); transition: color .25s; }
.ct-num:hover { background: var(--fg); color: var(--bg); }
.ct-num:hover em { color: var(--bg); }
@media (max-width: 860px) { .ct-mid { grid-template-columns: 1fr; } .ct-links { justify-items: start; } .ct-nums { grid-template-columns: 1fr 1fr; } .ct-num:nth-child(2) { border-right: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .sa { opacity: 1; transform: none; } .about-bio span { opacity: 1; }
}

/* ---------- Fourth pass ---------- */
/* Work filters: quiet words, no boxes */
.filters { gap: 0; }
.filters .chip, .filters .chip:hover, .filters .chip[aria-pressed="true"] { border: 0; background: none; font-family: var(--f-body); font-weight: 500; font-size: 11px; text-transform: none; padding: 3px 0; color: var(--dim); }
.filters .chip sup { font-size: 8px; opacity: .7; }
.filters .chip:hover { color: var(--fg); }
.filters .chip[aria-pressed="true"] { color: var(--fg); }
.filters .chip[aria-pressed="true"]::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: middle; }

/* Photography: the frame in the middle is larger; the two buttons grow into the space below as you scroll */
.strip-stick { align-items: flex-start; padding-top: calc(var(--nav-h) + 6vh); }
.strip .ph { height: clamp(220px, 50vh, 560px); transition: opacity .25s; will-change: transform; }
.strip-title { align-self: center; }
.seg.big { transform-origin: 50% 100%; transition: opacity .18s; }
html.is-scrolling .seg.big { opacity: 1; }
.seg.big .chip[aria-pressed="false"] { border-color: var(--fg); color: var(--fg); }

/* Film: each film holds the screen; a small scroll carries you to the next */
html:has(body[data-snap]) { scroll-snap-type: y mandatory; }
body[data-snap] .reel, body[data-snap] .snap { scroll-snap-align: start; scroll-snap-stop: always; }
body[data-snap] .snap { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; }
body[data-snap] .snap .foot { margin-top: 0; }

/* Info: the portrait keeps its shape */
.ins-photo { height: auto; }
.ins-stage { overflow: hidden; }

/* Contact: a wider, newer word; quieter links */
.ct-word { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0; line-height: .9; font-size: clamp(34px, 7.4vw, 136px); }
.ct-links { font-size: 12px; font-weight: 500; gap: 3px; color: var(--dim); }
.ct-links a, .ct-links button { text-decoration: none; transition: color .2s; }
.ct-links a:hover, .ct-links button:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Notes: the map view */
.nt-views { display: flex; gap: 12px; margin-top: 18px; }
.nmap { position: relative; height: max(640px, calc(100vh - var(--nav-h) - 40px)); }
.nmap[hidden], .nt-grid[hidden] { display: none; }
.nmap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nmap line { stroke: var(--fg); stroke-width: 1; opacity: .45; }
.nmap line.r { stroke: var(--red); opacity: .9; }
.nmap text { font: 500 10px var(--f-body); fill: var(--red); text-transform: uppercase; letter-spacing: .04em; }
.nm-oval { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 9px 20px 8px; border: 1px solid var(--fg); border-radius: 50%; font-style: italic; font-weight: 700; font-size: clamp(12px, 1.1vw, 17px); text-transform: uppercase; white-space: nowrap; background: var(--bg); z-index: 2; }
.nm-node { position: absolute; left: var(--x); top: var(--y); width: clamp(64px, 7vw, 112px); transform: translate(-50%, -50%); z-index: 3; transition: scale .4s var(--ease-out); }
.nm-node:hover { scale: 1.35; z-index: 5; }
.nm-node img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.nm-node span { display: block; margin-top: 4px; font-size: 10px; line-height: 1.15; text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 860px) { .nt-views { display: none; } }

/* Sticky notes a visitor can leave on any page */
.tool-note::before, .tool-note::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.tool-note::after { transform: translate(-50%, -50%) rotate(90deg); }
.stickies { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 780; }
.sticky { position: absolute; width: 200px; background: #f3e96b; color: var(--ink); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .6); rotate: var(--r, -1.5deg); font-size: 13px; }
.sticky-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 4px 10px; font-family: var(--f-nav); font-size: 10px; text-transform: uppercase; touch-action: none; user-select: none; }
.sticky-bar button { width: 20px; height: 20px; display: grid; place-items: center; font-size: 15px; line-height: 1; font-family: var(--f-body); }
.sticky-bar button:hover { background: var(--ink); color: #f3e96b; }
.sticky textarea { display: block; width: 100%; min-height: 96px; border: 0; background: none; resize: vertical; font: inherit; color: inherit; padding: 2px 10px 10px; outline: none; line-height: 1.35; }
.sticky.drag { rotate: 0deg; box-shadow: 0 30px 40px -18px rgba(0, 0, 0, .7); }


html.still *, html.still *::before, html.still *::after { transition: none !important; animation: none !important; }
html.still .sa, html.still .rv { opacity: 1; transform: none; clip-path: none; }

.band-item i.none { background: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1.5px currentColor; }
.nmap { grid-column: 2 / -1; }
.nt-index[hidden] { display: none; }
.nm-oval { z-index: 4; }
.nm-node { width: clamp(56px, 5.6vw, 92px); }

/* Fifth pass */
body[data-snap] { overflow-anchor: none; }
html.home-peek .stickies { opacity: 0; pointer-events: none; }
.stickies { transition: opacity .3s; }
/* Drawing a note: press the + switch, then drag out a box anywhere on the page */
.note-draw { position: fixed; inset: 0; z-index: 815; display: none; touch-action: none; }
html.noting .note-draw { display: block; }
.note-rect { position: absolute; border: 1px dashed var(--fg); background: rgba(243, 233, 107, .32); display: none; }
.note-rect span { position: absolute; left: 0; top: -18px; font-size: 10px; white-space: nowrap; color: var(--fg); font-variant-numeric: tabular-nums; }
html.noting .cur-dot, html.noting .cur-dot.is-link { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 0; background: none; box-shadow: none; opacity: 1; }
html.noting .cur-dot::before, html.noting .cur-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 1.5px; background: var(--fg); box-shadow: 0 0 0 1px var(--bg); transform: translate(-50%, -50%); }
html.noting .cur-dot::after { transform: translate(-50%, -50%) rotate(90deg); }
.tool-note[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.sticky { display: flex; flex-direction: column; min-width: 120px; min-height: 80px; }
.sticky textarea { flex: 1; min-height: 40px; resize: none; }


/* ---------- Project page as a zine spread ---------- */
.zine-folio { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; padding-bottom: clamp(20px, 3vw, 44px); }
.zine { position: relative; }
.zine-line { position: absolute; left: 0; top: 0; width: 100%; overflow: visible; pointer-events: none; }
.zine-line path { fill: none; stroke: var(--fg); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.zine-txt { position: absolute; left: 0; top: 0; z-index: 2; display: grid; gap: 9px; font-size: 12px; line-height: 1.24; letter-spacing: -.005em; transition: opacity .25s; }
.zine-title { font-size: clamp(15px, 1.25vw, 19px); font-weight: 700; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; margin-bottom: 2px; }
.zine-body.empty { color: var(--dim); }
.ty .un { opacity: 0; }
.zine-meta { display: grid; gap: 2px; font-size: 11px; }
.zine-meta div { display: grid; grid-template-columns: 40px 1fr; gap: 8px; }
.zine-meta dt { color: var(--dim); } .zine-meta dd { margin: 0; }
.zine-caps { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.zine-caps li { display: grid; grid-template-columns: 22px 1fr; }
.zine-caps b, .zi b { min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-size: 8.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; justify-self: start; }
.zi { position: absolute; margin: 0; z-index: 1; opacity: 0; scale: .55; transition: opacity .3s, scale .5s var(--ease-out); }
.zi.in { opacity: 1; scale: 1; }
.zi-im { transform-origin: var(--o, 50% 50%); transition: transform .45s var(--ease-out), opacity .25s; background: var(--soft); }
.zi img { display: block; width: 100%; height: auto; }
.zi b { position: absolute; left: -8px; bottom: -8px; transition: opacity .2s; }
.zine:not(.is-live) .zi { pointer-events: none; }
@media (hover: hover) {
  .zine.is-live .zi:hover { z-index: 6; }
  .zine.is-live .zi:hover .zi-im { transform: scale(var(--s, 1.6)); }
  .zine.is-live .zi:hover b { opacity: 0; }
  .zine.is-live:has(.zi:hover) .zi:not(:hover) .zi-im { opacity: .22; }
  .zine.is-live:has(.zi:hover) .zine-txt, .zine.is-live:has(.zi:hover) .zine-line { opacity: .25; }
}
.zine-line { transition: opacity .25s; }
.zine-film { margin: clamp(30px, 5vw, 70px) 0 0 auto; width: min(100%, 760px); display: grid; gap: 8px; color: var(--dim); }
.zine-film video { width: 100%; max-height: 74vh; background: #000; }
html.still .zi { opacity: 1; scale: 1; }

/* ---------- Finder: search and filter every project from inside a project ---------- */
.find-btn { position: fixed; left: var(--gut); bottom: var(--gut); z-index: 700; font-size: 11px; font-weight: 500; padding: 7px 12px 6px; border: 1px solid var(--fg); border-radius: 999px; background: var(--bg); color: var(--fg); transition: background-color .2s, color .2s; }
.find-btn:hover, .find-btn[aria-expanded="true"] { background: var(--fg); color: var(--bg); }
.find-shade { position: fixed; inset: 0; z-index: 868; background: rgba(15, 14, 14, .28); opacity: 0; pointer-events: none; transition: opacity .3s; }
.find-shade.on { opacity: 1; pointer-events: all; }
.find { position: fixed; left: 0; top: 0; bottom: 0; z-index: 870; width: min(340px, 88vw); background: var(--bg); color: var(--fg); border-right: 1px solid var(--fg); padding: 18px 18px 0; display: grid; grid-template-rows: auto auto auto auto auto 1fr; gap: 12px; transform: translateX(-101%); transition: transform .5s var(--ease); font-size: 12px; }
.find.on { transform: none; }
.find-top { display: flex; justify-content: space-between; align-items: baseline; }
.find-top b { font-size: 15px; letter-spacing: -.025em; }
.find-top button { color: var(--dim); } .find-top button:hover { color: var(--fg); }
.find input { width: 100%; font: inherit; font-size: 14px; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--fg); border-radius: 0; padding: 8px 0 7px; outline: none; -webkit-appearance: none; appearance: none; }
.find input::placeholder { color: var(--dim); }
.find-f { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.find-f button { color: var(--dim); padding: 2px 0; }
.find-f button:hover { color: var(--fg); }
.find-f button[aria-pressed="true"] { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.find-n { color: var(--dim); font-size: 11px; }
.find-list { overflow-y: auto; margin: 0 -18px; padding: 0 18px 24px; border-top: 1px solid var(--rule); overscroll-behavior: contain; }
.find-list a { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.find-list img { width: 46px; height: 46px; object-fit: contain; }
.find-list b { display: block; font-weight: 500; line-height: 1.2; }
.find-list i { display: block; font-style: normal; color: var(--dim); font-size: 11px; }
.find-list a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.find-list a.here { opacity: .5; pointer-events: none; }

/* ---------- Page changes: the cover and its name are already there on the next page's first frame ---------- */
@view-transition { navigation: auto; }
html.wiping { background: var(--ink); }
html.wiping::after { content: attr(data-wn); position: fixed; inset: 0; z-index: 901; display: grid; place-items: center; color: var(--paper); font-family: var(--f-body); font-weight: 700; text-transform: uppercase; font-size: clamp(56px, 15vw, 260px); letter-spacing: -.055em; line-height: .8; }

/* ---------- Research and process under a project ---------- */
.research:empty { display: none; }
.research { margin-top: clamp(60px, 9vw, 150px); }
.rs-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--fg); padding-top: 12px; }
.rs-h h2 { font-size: clamp(15px, 1.25vw, 19px); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; }
.rs-open { font-size: 11px; font-weight: 500; padding: 7px 12px 6px; border: 1px solid var(--fg); border-radius: 999px; transition: background-color .2s, color .2s; }
.rs-open:hover { background: var(--fg); color: var(--bg); }
.rs-h h2 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(18px, 2.2vw, 36px); letter-spacing: 0; line-height: .95; }
.rs-c { color: var(--dim); flex: 1; }
.rs-list { margin-top: clamp(14px, 2vw, 26px); border-top: 1px solid var(--rule); }
/* each step is a row like the work index: a numbered dot, a large outlined word that fills on hover, a short text, and a stack of pictures that fans out */
.rs-row { display: grid; grid-template-columns: 30px minmax(0, 5fr) minmax(0, 4fr) minmax(0, 5fr); gap: var(--gut); align-items: center; min-height: clamp(110px, 11vw, 170px); padding: 16px 0; border-bottom: 1px solid var(--rule); position: relative; }
.rs-n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center; justify-self: start; background: var(--fg); color: var(--bg); font-size: 9px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rs-t { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: -.05em; line-height: .88; font-size: clamp(26px, 3.9vw, 66px); color: transparent; -webkit-text-stroke: 1px var(--fg); transition: color .25s, transform .5s var(--ease-out); text-wrap: balance; }
.rs-p { font-size: 13px; line-height: 1.32; letter-spacing: -.005em; max-width: 40ch; color: var(--dim); transition: color .25s; }
.rs-fan { display: flex; align-items: center; justify-content: flex-end; height: clamp(84px, 8.5vw, 132px); padding-left: 40px; }
.rs-pic { height: 100%; flex: none; margin-left: calc(-1 * clamp(34px, 3.6vw, 60px)); rotate: var(--r); background: var(--soft); box-shadow: 0 0 0 1px var(--bg); cursor: zoom-in; position: relative; z-index: calc(20 - var(--i)); transition: margin .5s var(--ease-out), rotate .5s var(--ease-out), scale .3s var(--ease-out), opacity .2s; }
.rs-pic:first-child { margin-left: 0; }
.rs-pic img { height: 100%; width: auto; max-width: none; display: block; }
@media (hover: hover) {
  .rs-row:hover .rs-t { color: var(--fg); transform: translateX(10px); }
  .rs-row:hover .rs-p { color: var(--fg); }
  .rs-row:hover .rs-pic { margin-left: 6px; rotate: 0deg; }
  .rs-row:hover .rs-fan { overflow: visible; }
  .rs-row .rs-pic:hover { scale: 1.5; z-index: 40; }
  .rs-list:hover .rs-row:not(:hover) .rs-fan { opacity: .35; }
}
.rs-fan { transition: opacity .25s; }
@media (hover: none) { .rs-t { color: var(--fg); } .rs-p { color: var(--fg); } .rs-pic { margin-left: 6px; rotate: 0deg; } .rs-fan { justify-content: flex-start; overflow-x: auto; padding-left: 0; } }
@media (max-width: 900px) { .rs-row { grid-template-columns: 30px 1fr; align-items: start; } .rs-p, .rs-fan { grid-column: 2; } .rs-fan { justify-content: flex-start; padding-left: 0; } }
/* the original portfolio pages, kept one click away */
.pf { position: fixed; inset: 0; z-index: 865; background: var(--bg); color: var(--fg); overflow-y: auto; overscroll-behavior: contain; opacity: 0; pointer-events: none; transform: translateY(24px); transition: opacity .3s, transform .5s var(--ease-out); }
.pf.on { opacity: 1; pointer-events: all; transform: none; }
.pf-top { position: sticky; top: 0; z-index: 2; display: flex; gap: 16px; align-items: baseline; padding: 14px var(--gut); background: var(--bg); border-bottom: 1px solid var(--fg); }
.pf-top b { font-size: 15px; letter-spacing: -.025em; } .pf-top span { color: var(--dim); flex: 1; }
.pf-top button { font-size: 11px; padding: 6px 12px 5px; border: 1px solid var(--fg); border-radius: 999px; }
.pf-top button:hover { background: var(--fg); color: var(--bg); }
.pf-body { padding: var(--gut); display: grid; gap: var(--gut); max-width: 1500px; margin: 0 auto; }
html.pf-open .find-btn, html.pf-open .tools { opacity: 0; pointer-events: none; }
.lb { z-index: 890; }
.bd-wrap { overflow-x: auto; }
.bd { position: relative; width: 100%; min-width: 860px; container-type: inline-size; background: #fff; color: #0f0e0e; font-family: "Helvetica Neue", Helvetica, Arial, "Switzer", sans-serif; font-weight: 400; overflow: hidden; }
.bd-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bl { position: absolute; white-space: pre; line-height: 1; transform-origin: 0 0; transform: rotate(var(--a, 0deg)) translateY(-.8em) scaleX(var(--k, 1)); letter-spacing: -.01em; pointer-events: none; }
.bh { position: absolute; border-radius: 0; cursor: zoom-in; transition: box-shadow .2s; }
.bh:hover { box-shadow: 0 0 0 2px #0f0e0e, 0 0 0 4px #fff; }

/* ---------- Project page: emphasised picture, credit, link, film behind the page ---------- */
.zi.hero .zi-im { padding: clamp(6px, .7vw, 12px); background: #f4f3ee; box-shadow: 0 0 0 1px var(--rule); }
.zine-credit { font-size: 11px; display: flex; align-items: center; gap: 6px; }
.dot-link { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--fg); display: inline-grid; place-items: center; font-size: 8px; font-weight: 700; line-height: 1; transition: background-color .2s, color .2s; }
.dot-link:hover { background: var(--fg); color: var(--bg); }
.zine-link { font-size: 11px; border-bottom: 1px solid var(--fg); padding-bottom: 1px; display: inline-block; }
.zine-cap a { pointer-events: all; }
.film-bg { position: fixed; inset: 0; z-index: 0; opacity: .16; background: #000; transition: opacity .7s var(--ease-out); pointer-events: none; }
.film-bg video { width: 100%; height: 100%; object-fit: cover; }
body:has(.film-bg) .page { position: relative; z-index: 1; }
body.film-on .film-bg { z-index: 860; opacity: 1; pointer-events: all; }
body.film-on .film-bg video { object-fit: contain; }

/* ---------- Intro: the three switches appear one after another ---------- */
.dg[data-g="keys"] .draw .o, .dg[data-g="keys"] .draw .f { clip-path: inset(-10% 100% -10% -2%) !important; }
.dg[data-g="keys"] .key.on .draw .o { clip-path: inset(-10% -2% -10% -2%) !important; transition: clip-path .7s var(--ease); }
.dg[data-g="keys"] .key.fill .draw .f { clip-path: inset(-10% -2% -10% -2%) !important; transition: clip-path .5s var(--ease); }
.dg[data-g="keys"] .fade { opacity: 0 !important; }
.dg[data-g="keys"] .key.fill .fade { opacity: 1 !important; transition: opacity .4s .15s; }
.key p { font-size: 14px; color: rgba(233, 232, 225, .85); }
/* ---------- Home: the menu stays readable over the photograph in both modes ---------- */
body[data-page="home"] .nav, body[data-page="home"] .tools { color: var(--paper); }
body[data-page="home"] .nav-links a, body[data-page="home"] .menu-btn { text-shadow: 0 0 14px rgba(15, 14, 14, .5); }
.home::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: 2; pointer-events: none; background: linear-gradient(rgba(15, 14, 14, .42), rgba(15, 14, 14, 0)); }
body[data-page="home"] .tool { background: rgba(15, 14, 14, .35); }

/* ---------- Intro, quicker drawing ---------- */
.dg.on line, .dg.on circle, .dg.on rect { transition-duration: .55s; }
.dg.on .draw .o { transition: clip-path .6s var(--ease) calc(.12s + var(--k, 0) * .1s); }
.dg.fill .draw .f { transition: clip-path .4s var(--ease) calc(var(--k, 0) * .06s); }
.dg[data-g="keys"] .key.on .draw .o { transition: clip-path .4s var(--ease); }
.dg[data-g="keys"] .key.fill .draw .f { transition: clip-path .3s var(--ease); }
.dg[data-g="keys"] .key.fill .fade { transition: opacity .25s; }

/* ---------- Photography: real photographs ---------- */
.ph.pic { background: var(--soft); border: 0; padding: 0; cursor: zoom-in; overflow: hidden; }
.ph.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph.pic .mono { color: var(--paper); mix-blend-mode: difference; }
#grid.arc { grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 11vw, 190px), 1fr)); gap: clamp(10px, 1.4vw, 22px); }
.gp { position: relative; aspect-ratio: 1; display: block; cursor: zoom-in; }
.gp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: scale .4s var(--ease-out); }
.gp .mono { position: absolute; left: 0; bottom: -2px; font-size: 10px; color: var(--dim); opacity: 0; transition: opacity .2s; }
.gp:hover img { scale: 1.06; } .gp:hover .mono { opacity: 1; }
html:not(.is-scrolling) #grid:has(.gp:hover) .gp:not(:hover) img { opacity: .45; }   /* only when one photograph is actually under the pointer, never while scrolling */
.gp img { transition: scale .4s var(--ease-out), opacity .25s; }

#main { transition: opacity .26s; } #main.swap { opacity: 0; }
html.is-scrolling body[data-page="photography"] .tools, html.is-scrolling .gp .mono { opacity: 0; }
html.is-scrolling .gp img { scale: 1 !important; }

/* ---------- Photography: filters, hint, and the single-photograph view ---------- */
.ph-filters { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 18px; }
.ph-hint { color: var(--dim); margin-top: 10px; }
.gp[hidden] { display: none; }
.pv { position: fixed; inset: 0; z-index: 880; background: #0b0c0c; color: #e9e8e1; display: grid; grid-template-columns: minmax(150px, 17vw) 1fr 70px minmax(84px, 9vw); grid-template-rows: 1fr; gap: 0 var(--gut); padding: var(--gut); opacity: 0; pointer-events: none; transition: opacity .35s; }
.pv.on { opacity: 1; pointer-events: all; }
html.pv-open .nav, html.pv-open .tools, html.pv-open .seg { opacity: 0 !important; pointer-events: none; }
html.pv-open .cur-dot { background: #e9e8e1; box-shadow: 0 0 0 1.5px #0b0c0c; }
.pv-back { position: absolute; left: var(--gut); top: var(--gut); display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; z-index: 2; }
.pv-back i { width: 30px; height: 30px; border: 1px solid rgba(233, 232, 225, .5); border-radius: 50%; display: block; background: radial-gradient(circle, currentColor 1.2px, transparent 1.6px) center / 6px 6px; background-clip: content-box; padding: 6px; transition: background-color .2s, color .2s, border-color .2s; }
.pv-back:hover i { border-color: #e9e8e1; }
.pv-cats { align-self: center; display: grid; gap: 7px; justify-items: start; font-size: clamp(13px, 1.15vw, 17px); letter-spacing: -.02em; }
.pv-cats button { color: rgba(233, 232, 225, .38); display: flex; align-items: center; gap: 7px; transition: color .2s; }
.pv-cats button:hover { color: rgba(233, 232, 225, .8); }
.pv-cats button[aria-pressed="true"] { color: #e9e8e1; }
.pv-cats i { font-style: normal; font-size: 9px; font-weight: 700; padding: 2px 4px 1px; border: 1px solid currentColor; border-radius: 2px; line-height: 1; }
.pv-cats button[aria-pressed="true"] i { background: #e9e8e1; color: #0b0c0c; border-color: #e9e8e1; }
.pv-stage { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 26px; justify-items: center; align-items: center; min-height: 0; padding: 34px 0 0; }
.pv-frame { position: relative; max-height: 100%; min-height: 0; padding: clamp(14px, 2.4vw, 34px); display: grid; place-items: center; cursor: pointer; height: 100%; }
.pv-frame img { max-width: 100%; max-height: calc(100vh - 2 * var(--gut) - 250px); width: auto; height: auto; display: block; transition: opacity .25s; }
.pv.swap .pv-frame img { opacity: 0; }
.pv-frame b { position: absolute; width: 9px; height: 9px; border: 1px solid rgba(233, 232, 225, .7); }
.pv-frame b:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; } .pv-frame b:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.pv-frame b:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; } .pv-frame b:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.pv-stage figcaption { display: grid; gap: 5px; justify-items: center; text-align: center; max-width: 54ch; min-height: 96px; align-content: start; }
.pv-stage h2 { font-size: clamp(15px, 1.3vw, 20px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; margin: 0; }
.pv-stage .mono { color: rgba(233, 232, 225, .5); font-size: 10px; white-space: pre; }
#pvStory { font-size: 13px; line-height: 1.34; color: rgba(233, 232, 225, .82); }
.pv-count { align-self: center; display: flex; align-items: center; gap: 8px; font-size: 10px; margin: 0; }
.pv-count i { width: 14px; height: 4px; border: 1px solid currentColor; border-top: 0; display: block; }
.pv-rail { overflow-y: auto; display: grid; gap: 10px; align-content: start; padding: 40vh 4px; scrollbar-width: none; mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.pv-rail::-webkit-scrollbar { display: none; }
.pv-rail button { opacity: .55; outline: 1px solid transparent; outline-offset: 3px; border-radius: 2px; transition: opacity .2s, outline-color .2s; }
.pv-rail button:hover { opacity: 1; }
.pv-rail button.on { opacity: 1; outline-color: #e9e8e1; }
.pv-rail img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) {
  .pv { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
  .pv-cats { grid-row: 1; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 44px 0 0; font-size: 13px; }
  .pv-count { display: none; }
  .pv-rail { grid-auto-flow: column; grid-auto-columns: 64px; overflow: auto hidden; padding: 4px 40vw; mask-image: none; -webkit-mask-image: none; }
  .pv-frame img { max-height: 46vh; }
}

/* ---------- Home: the five words, larger and heavier ---------- */
.band { gap: clamp(10px, 1.6vw, 26px) clamp(26px, 4vw, 76px); max-width: 1500px; margin: 0 auto; }
.band-item { font-size: clamp(28px, 4.7vw, 86px); letter-spacing: -.055em; gap: .28em; text-shadow: 0 2px 30px rgba(15, 14, 14, .35); }
.band-item i { width: 1.05em; height: 1.05em; box-shadow: 0 0 0 1.5px currentColor; }
.band-item sup { font-size: .2em; margin-left: .1em; margin-top: .5em; letter-spacing: 0; }
.band-item:hover, .band-item.on { transform: scale(1.1); }
@media (max-width: 860px) { .band-item { font-size: clamp(34px, 11vw, 60px); } }

/* ---------- Intro: the drawn switches fly to where the real ones live ---------- */
.intro-ui.is-landing .dg svg, .intro-ui.is-landing .key-name, .intro-ui.is-landing .key p, .intro-ui.is-landing .intro-count, .intro-ui.is-landing .intro-note { opacity: 0 !important; transition: opacity .25s !important; }
.intro-ui.is-landing .key-ico { position: relative; z-index: 3; will-change: transform; }
.tools.hold { opacity: 0 !important; transition: none; }

/* ---------- Picture frames: old, new and modern, built in CSS. --t is the moulding width, --m the mount. ---------- */
.fr { --t: 6px; --m: 0px; display: block; box-sizing: border-box; padding: calc(var(--t) + var(--m)); position: relative; background: #111; box-shadow: 0 5px 14px rgba(0, 0, 0, .38), 0 1px 2px rgba(0, 0, 0, .4); }
.fr > img { display: block; position: relative; z-index: 1; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 6px rgba(0, 0, 0, .5); }
.fr::before { content: ""; position: absolute; inset: var(--t); pointer-events: none; }            /* the mount, when a frame has one */
.fr::after { content: ""; position: absolute; inset: 0; pointer-events: none; }                      /* bevel light on the moulding */
/* 1 carved gilt */
.f1 { --t: calc(var(--u, 6px) * 1.5); background: repeating-linear-gradient(45deg, rgba(90, 60, 10, .55) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(255, 240, 180, .5) 0 1px, transparent 1px 5px), linear-gradient(135deg, #f3dc8c, #b98a2c 35%, #7a5514 55%, #e2c264 80%, #9c7222); }
.f1::after { box-shadow: inset 0 0 0 1px #5d4210, inset 0 0 0 calc(var(--t) * .3) rgba(255, 236, 170, .28), inset 0 0 0 calc(var(--t) - 1px) transparent, inset 0 0 0 var(--t) #4a340c; }
/* 2 antique gold, plain and wide, dark slip */
.f2 { --t: calc(var(--u, 6px) * 1.25); --m: calc(var(--u, 6px) * .35); background: linear-gradient(145deg, #e9cf7c, #a67c24 38%, #6e4d12 58%, #d2b055 82%, #8d6a1f); }
.f2::before { background: #1b1509; }
.f2::after { box-shadow: inset 1px 1px 0 rgba(255, 245, 200, .6), inset -1px -1px 0 rgba(60, 40, 5, .7); }
/* 3 walnut */
.f3 { --t: calc(var(--u, 6px) * 1.1); background: repeating-linear-gradient(92deg, #3a2414 0 2px, #4d301b 2px 5px, #2b190d 5px 6px, #442a17 6px 9px); }
.f3::after { box-shadow: inset 1px 1px 0 rgba(255, 220, 180, .22), inset -1px -1px 0 rgba(0, 0, 0, .6), inset 0 0 0 calc(var(--t) - 1px) transparent, inset 0 0 0 var(--t) #170d06; }
/* 4 thin black, wide white mount */
.f4 { --t: calc(var(--u, 6px) * .4); --m: calc(var(--u, 6px) * 1.7); background: #0d0d0d; }
.f4::before { background: #f4f2ec; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
/* 5 white gallery frame */
.f5 { --t: calc(var(--u, 6px) * .8); --m: calc(var(--u, 6px) * .9); background: linear-gradient(135deg, #ffffff, #dedcd5); }
.f5::before { background: #f7f6f1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.f5::after { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0, 0, 0, .18); }
/* 6 brushed aluminium */
.f6 { --t: calc(var(--u, 6px) * .55); --m: calc(var(--u, 6px) * .9); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 3px), linear-gradient(180deg, #d9dcde, #8f9497 48%, #c9cdd0 52%, #7e8386); }
.f6::before { background: #111; }
/* 7 pale oak with cream mount */
.f7 { --t: calc(var(--u, 6px) * .9); --m: calc(var(--u, 6px) * 1.1); background: repeating-linear-gradient(88deg, #c9a56f 0 3px, #b98f57 3px 4px, #d6b582 4px 8px, #b48a52 8px 9px); }
.f7::before { background: #efe7d6; box-shadow: inset 0 0 0 1px rgba(80, 50, 10, .25); }
.f7::after { box-shadow: inset 1px 1px 0 rgba(255, 240, 210, .6), inset -1px -1px 0 rgba(70, 40, 10, .5); }
/* 8 ebony with a gold fillet */
.f8 { --t: calc(var(--u, 6px) * 1.2); --m: calc(var(--u, 6px) * .22); background: linear-gradient(135deg, #2a2a2a, #050505 45%, #1c1c1c); }
.f8::before { background: linear-gradient(135deg, #f0d684, #9a7422); }
.f8::after { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 #000; }
/* 9 carved silver */
.f9 { --t: calc(var(--u, 6px) * 1.4); background: repeating-linear-gradient(45deg, rgba(40, 40, 45, .5) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .55) 0 1px, transparent 1px 5px), linear-gradient(135deg, #f1f2f3, #9a9da1 35%, #5f6266 55%, #d7d9db 80%, #84878b); }
.f9::after { box-shadow: inset 0 0 0 1px #3d3f42, inset 0 0 0 calc(var(--t) - 1px) transparent, inset 0 0 0 var(--t) #2a2c2e; }
/* 10 red lacquer */
.f10 { --t: calc(var(--u, 6px) * .9); --m: calc(var(--u, 6px) * .25); background: linear-gradient(135deg, #e0362b, #8f130d 55%, #c7261c); }
.f10::before { background: #0d0d0d; }
.f10::after { box-shadow: inset 1px 1px 0 rgba(255, 190, 180, .7), inset -1px -1px 0 rgba(50, 0, 0, .7); }
/* where the frames are used */
.gp { display: grid; place-items: center; aspect-ratio: 1; }
.gp .fr { --u: clamp(4px, .5vw, 8px); transition: scale .4s var(--ease-out), opacity .25s; }
.gp .fr img, .gp img { position: relative; inset: auto; width: 100%; height: auto; object-fit: fill; }
.gp:hover .fr { scale: 1.06; } .gp:hover img { scale: 1; }
html:not(.is-scrolling) #grid:has(.gp:hover) .gp:not(:hover) .fr { opacity: .45; }
html:not(.is-scrolling) #grid:has(.gp:hover) .gp:not(:hover) img { opacity: 1; }
html.is-scrolling .gp .fr { scale: 1 !important; }
#grid.arc { gap: clamp(18px, 2.4vw, 40px); }
.ph.pic.fr { --u: clamp(7px, .9vw, 14px); overflow: visible; }
.ph.pic.fr img { height: 100%; }
.ph.pic.fr .mono { z-index: 2; left: calc(var(--t) + var(--m) + 8px); top: calc(var(--t) + var(--m) + 6px); }
.pv .fr { --u: clamp(9px, 1.2vw, 18px); box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 2px 4px rgba(0, 0, 0, .5); transition: opacity .25s; }
.pv .fr img, .pv-frame img { max-width: none; max-height: none; }
.pv.swap .fr { opacity: 0; }

.ph.pic { background: none; overflow: visible; }
.ph.pic > .fr { --u: clamp(7px, .9vw, 14px); width: 100%; height: 100%; }
.ph.pic > .fr img { width: 100%; height: 100%; object-fit: cover; }
.ph-filters .chip, .ph-filters .chip:hover, .ph-filters .chip[aria-pressed="true"] { border: 0; background: none; font-family: var(--f-body); font-weight: 500; font-size: 12px; text-transform: none; padding: 3px 0; color: var(--dim); }
.ph-filters .chip:hover, .ph-filters .chip[aria-pressed="true"] { color: var(--fg); }
.ph-filters .chip[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; }
.ph-filters .chip sup { font-size: 8px; margin-left: 3px; }

/* ---------- Review fixes ---------- */
.about-cv { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; margin-top: 26px; font-size: 13px; }
.about-cv a { border: 1px solid var(--fg); border-radius: 999px; padding: 8px 14px 7px; transition: background-color .2s, color .2s; }
.about-cv a:hover { background: var(--fg); color: var(--bg); }
.about-cv span { color: var(--dim); }
.lost { min-height: 100vh; display: grid; align-content: center; gap: 14px; padding: var(--gut); }
.lost a { border-bottom: 1px solid currentColor; }
.ct-nums { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* phone */
@media (max-width: 860px) {
  html, body { overflow-x: clip; }
  .band-item { font-size: clamp(26px, 9.2vw, 56px); }
  .band-item sup { font-size: .26em; }
  .tools { top: auto; bottom: calc(var(--gut) + 44px); right: var(--gut); transform: none; grid-auto-flow: column; }
  .tool-label { display: none; }
  .hud-title { font-size: clamp(24px, 7.4vw, 40px); overflow-wrap: anywhere; text-wrap: balance; }
  .filters { flex-wrap: wrap; justify-content: flex-start; gap: 2px 12px; max-width: 100%; }
  .nav { left: 0; right: 0; }
  .rs-t { font-size: clamp(24px, 8vw, 40px); }
  .find-btn { bottom: var(--gut); }
}

/* the CV download sits at the end of the menu on every page */
.nav-links .nav-cv { border: 1.5px solid currentColor; border-radius: 999px; padding: 5px 11px 4px; }
.nav-links .nav-cv::after { display: none; }
.nav-links .nav-cv:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
body[data-page="home"] .nav-links .nav-cv:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.menu { overflow: hidden auto; }