/* Alex Denli — portfolio styles
   Colours: black page, creme text and panels, green as the small feature colour, grey for quiet text */
@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
}
:root {
  --bg: #000000; --fg: #EEE9E3; --panel: #EEE9E3; --accent: #095838;
  --muted: #C1C1CB; --zap: #B4B4FF; --zap-glow: #6E6EFF; --line: rgba(238, 233, 227, .2);
  --nav-h: 4.25rem;
  --sy: clamp(3.5rem, 9vh, 6.5rem);
  --pad: clamp(1rem, 3vw, 2.75rem);
  --ease: cubic-bezier(.7, 0, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-anchor: none; background: var(--bg); color: var(--fg);
  font-family: "Bricolage", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.5; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--accent); color: var(--fg); padding: .5rem 1rem; }
.skip:focus { top: 1rem; }

.giant {
  font-weight: 700; font-stretch: 75%; line-height: .86; letter-spacing: -.02em;
  font-size: clamp(3.5rem, 13.5vw, 15rem); text-wrap: balance;
}
.small { font-size: .9375rem; color: var(--muted); }
.ul { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .3s var(--ease); }
.ul:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Navigation: categories are reachable from every page ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem;
  padding: 0 var(--pad); background: rgba(0, 0, 0, .93);
  border-bottom: 1px solid var(--line); transition: transform .45s var(--ease);
}
.nav.nav-away { transform: translateY(-110%); }
.nav-home { justify-self: center; display: block; line-height: 0; }
.logo { fill: currentColor; display: block; }
.nav-home .logo { height: 2.5rem; width: auto; }
.nav-home:hover { color: var(--muted); }

.nav-pages { display: flex; gap: clamp(.9rem, 2vw, 1.75rem); white-space: nowrap; }
.nav-pages { justify-self: start; }
.nav a { padding: .4rem 0; }
.nav-pages a, .cats a { position: relative; font-size: .9375rem; }
.nav-pages a::after, .cats a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-pages a:hover::after, .cats a:hover::after, .nav a[aria-current="page"]::after, .cats a[aria-current="page"]::after { transform: scaleX(1); }
.cats { display: flex; flex-wrap: wrap; gap: .4rem clamp(1rem, 2vw, 1.75rem); }
.cats a { padding: .4rem 0; }

/* ---------- Home: intro gate ---------- */
.gate {
  position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 0; overflow: hidden;
  background: var(--panel); color: var(--bg);
  display: grid; place-items: center; padding: var(--pad);
}
.gate-mark { align-self: center; justify-self: center; position: relative; width: min(52vw, 90vh); transform-origin: 50% 50%; will-change: transform, opacity; }
.gate-mark .logo { width: 100%; height: auto; }
.gate-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.gate-fall { position: absolute; inset: 0; z-index: 1; overflow: hidden; contain: strict; }
.faller { position: absolute; left: 0; top: 0; display: block; visibility: hidden; will-change: transform; contain: layout style; cursor: pointer; touch-action: manipulation; }
.faller-in { display: block; width: 100%; height: 100%; will-change: transform; box-shadow: 0 .9rem 1.4rem rgba(0, 0, 0, .22); }
.faller canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.gate-mark { z-index: 2; pointer-events: none; }
/* a creme edge drawn into the logo: invisible on the creme, it keeps the letters readable over dark images passing behind */
.gate:not(.disco) .gate-mark .logo { stroke: var(--panel); stroke-width: .26; stroke-linejoin: round; paint-order: stroke fill; }

/* ---------- Home: disco mode (20-second catch game on the intro) ---------- */
.btn { font: inherit; color: inherit; background: none; border: 1.5px solid currentColor; border-radius: 99px; padding: .6rem 1.3rem; cursor: pointer; }
.btn:hover { background: var(--fg); color: #000; }
.disco-btn { position: absolute; top: var(--pad); right: var(--pad); z-index: 6; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: .7rem; border: 1.5px solid currentColor; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; }
.disco-btn svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.disco-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--fg); }
.gate.disco { background: #000; color: var(--fg); touch-action: none; }
.gate.disco .disco-btn { background: var(--fg); color: #000; border-color: var(--fg); }
.gate.disco .faller { cursor: inherit; }
.gate.disco .faller-in { box-shadow: none; }
.disco-lights { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; }
.gate.disco .disco-lights { opacity: 1; }
.mute-btn { position: absolute; top: var(--pad); right: calc(var(--pad) + 3.4rem); z-index: 6; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: .7rem; border: 1.5px solid var(--fg); background: var(--fg); color: #000; display: grid; place-items: center; cursor: pointer; }
.mute-btn svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mute-btn .cross { display: none; }
.mute-btn.off .wave { display: none; }
.mute-btn.off .cross { display: block; }
.mute-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--fg); }
.disco-hud { position: absolute; top: var(--pad); left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 2.5rem; white-space: nowrap; pointer-events: none; font-weight: 700; font-stretch: 75%; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.disco-time::after { content: "s"; }
.disco-end { position: absolute; inset: 0; z-index: 7; background: #000; color: var(--fg); display: grid; place-content: center; justify-items: center; gap: 1.25rem; text-align: center; padding: var(--pad); }
.disco-acts { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; }

/* ---------- Home: the field of scattered work ---------- */
/* every home image: same size, landscape 3:2, evenly spaced */
.field {
  position: relative; z-index: 1; background: var(--bg);
  --pw: min(52vw, 111vh); --ph: calc(var(--pw) / 1.5); --gap: 20vh;
  --first: var(--sy);
  height: calc(var(--first) + var(--n) * var(--ph) + (var(--n) - 1) * var(--gap));
}
.field-index {
  position: sticky; top: 50vh; z-index: 3; height: 0; margin-left: auto;
  width: fit-content; margin-right: var(--pad); text-align: right;
}
.field-index ol { transition: transform .45s var(--ease); }
.field-index a { display: block; padding: .2rem 0; font-size: .9375rem; line-height: 1.15; opacity: .3; transition: opacity .35s, font-size .35s var(--ease); }
.field-index a.past { opacity: 1; }
.field-index a.next { font-size: 1.125rem; }
.field-index a.cur { font-size: 2.1rem; font-weight: 700; font-stretch: 80%; opacity: 1; }
.field-index a:hover, .field-index a.on { opacity: 1; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; }
.field-index b { font-weight: inherit; }

.piece { position: absolute; z-index: 1; display: block; width: var(--pw); top: calc(var(--first) + var(--i) * (var(--ph) + var(--gap))); }
.piece-in { display: block; position: relative; will-change: transform; }
/* Hover: a quick electric outline drawn round the image */
.zap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; visibility: hidden; }
/* the electric filter is only switched on while a project is hovered: it is costly to leave running */
.piece:hover .zap, .piece:focus-visible .zap, .piece.on .zap { visibility: visible; filter: url(#zap) drop-shadow(0 0 4px var(--zap-glow)) drop-shadow(0 0 14px var(--zap-glow)); }
.zap rect { stroke: var(--zap); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.zap rect + rect { stroke: #fff; stroke-width: 1; }
.piece:hover .zap rect, .piece:focus-visible .zap rect, .piece.on .zap rect { stroke-dashoffset: 0; transition: stroke-dashoffset .38s cubic-bezier(.3, 0, .1, 1); }
.piece:hover .zap, .piece.on .zap { animation: flicker .9s steps(1) infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 8% { opacity: .35; } 12% { opacity: 1; } 55% { opacity: .7; } 60% { opacity: 1; } }
.piece img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity .5s, clip-path .9s var(--ease), filter .4s; }
/* project name, set beside its image on whichever side has room */
.piece-title { position: absolute; font-size: clamp(2rem, 4.4vw, 5rem); line-height: .88; transition: opacity .4s; }
.piece-title.t-right { left: calc(100% + 2.2vw); text-align: left; }
.piece-title.t-left { right: calc(100% + 2.2vw); text-align: right; }
.piece-title.v-top { top: 0; }
.piece-title.v-bot { bottom: 0; }
.piece-title.v-mid { top: 50%; transform: translateY(-50%); }
.field.dim .piece:not(.on) .piece-title { opacity: .2; }
.piece-cap { display: none; padding-top: .5rem; font-size: .9375rem; }
.piece-cap small { color: var(--muted); font-size: inherit; display: block; }
.field.dim .piece:not(.on) img { opacity: .2; }
.piece.lost .piece-in { position: relative; }
.piece.lost img { clip-path: circle(0% at 50% 50%); }
.piece.lost .piece-in::before {
  content: "Something is hidden here"; position: absolute; inset: 0; display: grid; place-items: center;
  border: 1.5px dashed var(--muted); color: var(--muted); font-size: .9375rem; text-align: center; padding: 1rem;
  transition: opacity .4s;
}
.piece.lost.got img { clip-path: circle(75% at 50% 50%); }
.piece.lost.got .piece-in::before { opacity: 0; }

/* ---------- Home: opening line ---------- */
.lead { position: relative; z-index: 1; background: var(--bg); padding: calc(var(--nav-h) + var(--sy)) var(--pad) 0; }
.lead-in { width: fit-content; max-width: 100%; }
.lead-title { font-size: clamp(3.4rem, 11vw, 13.5rem); font-weight: 800; font-stretch: 75%; line-height: .86; letter-spacing: -.025em; }
.lead-disc { display: flex; justify-content: space-between; gap: 1rem; margin-top: clamp(1.25rem, 3vh, 2.5rem); font-size: clamp(.9375rem, 1.35vw, 1.25rem); color: var(--muted); }

/* ---------- Home: brand wheel — logos orbit an invisible circle as you scroll ---------- */
.brands { position: relative; z-index: 1; background: var(--bg); height: calc(100vh + (var(--n) - 1) * 26vh); }
.brands-pin { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); overflow: hidden; display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; gap: 2rem; padding: var(--sy) var(--pad) 0; }
.brands-text { align-self: start; }
.brands-text h2 { font-size: clamp(2.4rem, 5.4vw, 6rem); font-weight: 700; font-stretch: 75%; line-height: .9; letter-spacing: -.02em; max-width: 7em; margin-bottom: 1.25rem; }
.brands-text .small { max-width: 24rem; }
.brands-now { margin-top: 2.5rem; min-height: 1.2em; font-size: clamp(1.25rem, 2.1vw, 2rem); font-weight: 700; font-stretch: 80%; color: var(--fg); }
.brands-now::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .5em; border-radius: 50%; background: var(--accent); vertical-align: .1em; }
.brands-now:empty::before { display: none; }
.wheel { position: relative; height: 100%; }
.wheel li { position: absolute; left: 0; top: 0; width: clamp(96px, 11vw, 190px); aspect-ratio: 16 / 7; will-change: transform, filter, opacity; }
.wheel img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Home: gallery strip that slides left as you scroll ---------- */
.gallery { position: relative; z-index: 1; background: var(--bg); margin-top: 13vh; }
.gallery-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 5vh; padding-top: var(--nav-h); }
.gallery-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5vh 0; }
.gallery-head { padding: 0 var(--pad); font-size: clamp(2rem, 5vw, 5rem); font-weight: 700; font-stretch: 75%; line-height: .92; letter-spacing: -.02em; max-width: 14em; }
.gallery-track { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); width: max-content; padding: 0 var(--pad); will-change: transform; }
.gallery-track > * { display: block; flex: none; }
.gallery-track > * { transform-origin: center; }
.gallery-track img { display: block; height: 36vh; width: auto; max-width: none; }
@media (prefers-reduced-motion: reduce) { .gallery-pin { position: static; height: auto; overflow-x: auto; padding: 12vh 0; } }

.home-end { position: relative; z-index: 2; background: var(--bg); margin-top: -6vh; padding: 5vh var(--pad) 10vh; }
.home-end a { display: block; width: fit-content; }
.home-end a.giant { font-size: clamp(2rem, 4.2vw, 4.25rem); line-height: 1; }
.home-end + .site-foot { margin-top: 0; }
.home-end a { transition: box-shadow .3s var(--ease); }
.home-end a:hover { box-shadow: inset 0 -.1em 0 var(--accent); }

/* ---------- Shared page shell ---------- */
.page { padding: calc(var(--nav-h) + 14vh) var(--pad) 0; min-height: 100vh; }
.page-head { display: grid; gap: 2rem; margin-bottom: 14vh; }
.page-head .small { max-width: 30rem; }
.site-foot {
  position: relative; z-index: 1; background: var(--bg);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding: 2rem var(--pad) 5.5rem; margin-top: 16vh; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--muted);
}

/* ---------- Category page: large alternating rows ---------- */
.rows { display: grid; gap: clamp(6rem, 22vh, 14rem); }
.row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; align-items: end; }
.row-img { grid-column: 1 / span 7; overflow: hidden; }
.row-txt { grid-column: 9 / span 4; padding-bottom: .5rem; }
.row:nth-child(even) .row-img { grid-column: 6 / span 7; order: 2; }
.row:nth-child(even) .row-txt { grid-column: 1 / span 4; order: 1; }
.row:nth-child(3n) .row-img { grid-column-end: span 5; }
.row h2 { font-size: clamp(2rem, 4.6vw, 4.75rem); font-weight: 700; font-stretch: 75%; line-height: .92; letter-spacing: -.015em; margin-bottom: 1rem; }
.row-img img { width: 100%; transition: transform .9s var(--ease); }
.row:hover .row-img img { transform: scale(1.04); }
.empty { font-size: 1.25rem; max-width: 30rem; }

/* ---------- Project page ---------- */
.p-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem 1.5rem; margin-bottom: 10vh; }
.p-head .p-meta { grid-column: 1 / -1; display: flex; gap: 1.5rem; }
.p-head h1 { grid-column: 1 / -1; }
.p-head .p-sum { grid-column: 7 / span 5; font-size: 1.25rem; }
.mask { overflow: hidden; }
.mask img { width: 100%; will-change: transform; }
.p-hero { margin: 0 calc(var(--pad) * -1); max-height: 92vh; }
.p-hero img { height: 92vh; object-fit: cover; }
.blocks > * { margin-top: clamp(6rem, 20vh, 13rem); }
.statement {
  font-size: clamp(2rem, 5.4vw, 5.75rem); font-weight: 600; font-stretch: 80%; line-height: 1; letter-spacing: -.02em;
  max-width: 17em; text-wrap: balance;
}
.statement:nth-of-type(even) { margin-left: auto; }
.statement span { opacity: .14; transition: opacity .35s; }
.statement span.lit { opacity: 1; }
.b-text { width: min(30rem, 100%); margin-left: 50%; }
.b-text h2 { font-size: 1.0625rem; font-weight: 700; margin-bottom: .5rem; }
.b-img figcaption { padding-top: .6rem; }
.b-img.full { margin-inline: calc(var(--pad) * -1); }
.b-img.full figcaption { padding-inline: var(--pad); }
.b-img.wide { width: 72%; margin-inline: auto; }
.b-img.left { width: 44%; }
.b-img.right { width: 44%; margin-left: auto; }
.b-pair { display: grid; grid-template-columns: 5fr 4fr; gap: clamp(1rem, 6vw, 6rem); align-items: start; }
.b-pair > :last-child { margin-top: 16vh; }
.b-stats { display: flex; flex-wrap: wrap; gap: 3rem clamp(2rem, 7vw, 7rem); border-top: 1px solid var(--line); padding-top: 2rem; }
.b-stats strong { display: block; font-size: clamp(4rem, 12vw, 12.5rem); font-weight: 800; font-stretch: 75%; line-height: .85; letter-spacing: -.03em; color: var(--panel); }
.b-stats span { display: block; margin-top: .75rem; max-width: 14rem; }
.b-steps { counter-reset: step; display: grid; gap: clamp(5rem, 16vh, 10rem); }
.b-steps li { counter-increment: step; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; align-items: start; }
.b-steps .step-txt { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + 2rem); }
.b-steps .step-txt::before { content: counter(step); display: block; font-size: clamp(4rem, 9vw, 9rem); font-weight: 800; font-stretch: 75%; line-height: .8; color: var(--accent); -webkit-text-stroke: 1px var(--fg); margin-bottom: 1rem; }
.b-steps h3 { font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: 700; font-stretch: 80%; line-height: 1; margin-bottom: .5rem; }
.b-steps .mask { grid-column: 6 / span 7; }
.b-steps li:nth-child(even) .mask { grid-column: 7 / span 5; }

.p-next {
  display: block; margin: 22vh calc(var(--pad) * -1) 0; padding: 12vh var(--pad) 10vh; position: relative; overflow: hidden;
  background: var(--panel); color: var(--bg);
}
.p-next small { font-size: 1rem; display: block; margin-bottom: 1.5rem; }
.p-next img { position: absolute; right: var(--pad); top: 50%; width: min(26vw, 22rem); transform: translateY(-50%) rotate(4deg) scale(.9); opacity: 0; transition: transform .6s var(--ease), opacity .4s; }
.p-next:hover img { opacity: 1; transform: translateY(-50%) rotate(-2deg) scale(1); }
.p-next .giant { position: relative; z-index: 1; }
.p-exits { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; padding-top: 2.5rem; font-size: 1.25rem; }
.p-exits + .site-foot { margin-top: 6vh; }

/* ---------- Now ---------- */
/* Projects: fading backgrounds and category sections */
.pbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.pbg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
.pbg img.on { opacity: .2; }
.proj-page { position: relative; }
.proj-page > * { position: relative; z-index: 1; }
.proj-page .pbg { z-index: 0; }
.pcat { min-height: 72vh; display: grid; align-content: center; gap: 2.5rem; }
.pcat h2 { font-size: inherit; }
.pcat h2 a { display: block; width: fit-content; transition: box-shadow .3s var(--ease); }
.pcat h2 a:hover { box-shadow: inset 0 -.08em 0 var(--accent); }
.pcat ol { display: grid; gap: .9rem; }
.pcat li a { display: flex; align-items: baseline; gap: 1.25rem; width: fit-content; }
.pcat li b { font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: 700; font-stretch: 80%; line-height: 1; }
.pcat li a:hover b { box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------- Archive: scattered photo cards ---------- */
.cards { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9vh 5vw; padding: 2vh 2vw 6vh; }
.cards li { transform: rotate(var(--r)) translateY(var(--dy)); transition: transform .4s var(--ease); }
.cards li:hover, .cards li:focus-within { transform: rotate(0deg) translateY(calc(var(--dy) - 2vh)) scale(1.17); z-index: 46; position: relative; }
/* while a card is held, the rest of the page falls into shadow */
.page:has(.cards) { position: relative; }
.page:has(.cards)::after { content: ""; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .62); opacity: 0; pointer-events: none; transition: opacity .4s; }
.page:has(.cards li:hover)::after, .page:has(.cards li:focus-within)::after { opacity: 1; }
.card { display: block; width: clamp(240px, 26vw, 370px); background: var(--panel); color: #111; padding: .8rem .8rem .9rem; box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .5); transition: box-shadow .4s; }
.cards li:hover .card { box-shadow: 0 2.2rem 3.8rem rgba(0, 0, 0, .65); }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card span { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .65rem; }
.card b { font-size: 1.25rem; font-weight: 700; font-stretch: 80%; }
.card small { font-size: .875rem; color: #555; white-space: nowrap; }
.card-desc { display: block; font-size: .9rem; line-height: 1.4; color: #333; max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; transition: max-height .4s var(--ease), opacity .3s, padding .4s var(--ease); }
.cards li:hover .card-desc, .cards li:focus-within .card-desc { max-height: 7em; opacity: 1; padding-top: .5rem; }

.peek { position: fixed; left: 0; top: 0; z-index: 30; width: 19rem; pointer-events: none; opacity: 0; transition: opacity .25s; will-change: transform; }
.peek.on { opacity: 1; }

/* ---------- Contact ---------- */
.mail { display: block; width: fit-content; font-weight: 700; font-stretch: 75%; line-height: .9; letter-spacing: -.02em; font-size: clamp(2rem, 8.4vw, 9.5rem); overflow-wrap: anywhere; margin-bottom: 14vh; }
.mail { transition: box-shadow .3s var(--ease); }
.mail:hover { box-shadow: inset 0 -.1em 0 var(--accent); }
.about { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3rem 1.5rem; }
.about-txt { grid-column: 1 / span 5; display: grid; gap: 1rem; font-size: 1.25rem; }
.about-links { grid-column: 8 / span 5; display: grid; gap: .35rem; align-content: start; font-size: 1.25rem; }
.about-links a { width: fit-content; }

/* ---------- Out of bounds ---------- */
.lost-page { min-height: 100vh; display: grid; align-content: center; gap: 2rem; padding: var(--pad); background: var(--panel); color: var(--bg); }
.lost-page p { max-width: 28rem; font-size: 1.25rem; }
.lost-page a { font-size: 1.25rem; width: fit-content; }

/* ---------- Home flag, curtain, cursor ---------- */
.flag {
  position: fixed; right: var(--pad); bottom: 1.25rem; z-index: 35; display: flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem .45rem .5rem; border-radius: 99px; background: var(--fg); color: var(--bg); font-size: .9375rem;
  transition: transform .4s var(--ease), background .2s;
}
.flag.flag-away { transform: translateY(200%); }
.flag svg { width: 1.6rem; height: 1.9rem; stroke: currentColor; overflow: visible; }
.flag-cloth { fill: var(--accent); stroke: none; transform-origin: 14px 11px; transition: transform .35s var(--ease); }
.flag:hover { background: var(--muted); }
.flag:hover .flag-cloth { transform: translateY(-3px) skewY(-8deg) scaleX(1.12); }

/* Page transitions: every page arrives on the same slanted sweep.
   Going home is instant, with no transition. */
.curtain { position: fixed; inset: 0; z-index: 80; pointer-events: none; visibility: hidden; display: grid; place-items: center; padding: var(--pad); text-align: center; color: var(--bg); }
.curtain.cover, .curtain.leave { visibility: visible; }
.curtain.cover { pointer-events: auto; }
.curtain span { position: relative; z-index: 1; font-weight: 800; font-stretch: 75%; line-height: .85; letter-spacing: -.02em; font-size: clamp(3rem, 12vw, 12rem); opacity: 0; transform: translateY(.3em); transition: opacity .25s, transform .3s var(--ease); }
.curtain.cover span { opacity: 1; transform: none; transition-delay: .18s; }

/* the single-panel moves */
.fx-sweep::before { content: ""; position: absolute; background: var(--panel); }
.fx-sweep::before { inset: -10% -60%; transform: translateX(-115%) skewX(-14deg); transition: transform .5s cubic-bezier(.6, 0, .25, 1); }
.cover.fx-sweep::before { transform: translateX(0) skewX(-14deg); }
.leave.fx-sweep::before { transform: translateX(115%) skewX(-14deg); }

.cursor { position: fixed; left: 0; top: 0; z-index: 90; width: .8rem; height: .8rem; margin: -.4rem 0 0 -.4rem; border-radius: 50%; background: var(--accent); display: none; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }

/* ---------- Small screens ---------- */
@media (max-width: 820px) {
  :root { --nav-h: 5.6rem !important; }
  .nav { grid-template-columns: 1fr; grid-template-rows: 3.2rem 2.4rem; gap: 0; height: var(--nav-h); }
  .nav > span { display: none; }
  .nav-home { grid-row: 1; }
  .nav-home .logo { height: 2rem; }
  .nav-pages { grid-row: 2; justify-self: center; align-self: start; }
  .nav-pages a { padding: 0 0 .4rem; }
  .gate-mark { width: 62vw; }
  .field { height: auto; padding: var(--sy) var(--pad) 0; display: grid; gap: 12vh; }
  .lead-title { font-size: clamp(3rem, 17vw, 6rem); }
  .lead-disc { gap: .5rem; font-size: .875rem; }
  .brands { height: calc(100svh + (var(--n) - 1) * 22vh); }
  .brands-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 0; }
  .brands-text h2 { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .brands-now { margin-top: 1.25rem; }
  .field-index, .piece-title { display: none; }
  .piece { position: static; width: 90%; }
  .piece:nth-of-type(even) { justify-self: end; }
  .piece-cap { display: block; }
  .row, .p-head, .b-steps li, .about { grid-template-columns: 1fr; }
  .row > *, .p-head > *, .b-steps li > *, .about > * { grid-column: 1 / -1 !important; order: 0 !important; }
  .b-steps .step-txt { position: static; }
  .b-text { margin-left: 0; }
  .b-img.wide { width: 100%; }
  .b-img.left, .b-img.right { width: 78%; }
  .b-pair { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .p-hero, .p-hero img { max-height: 70vh; height: 70vh; }
  .p-next img { display: none; }
  .gallery-track img { height: 28vh; }
  .cards { gap: 5vh 6vw; justify-content: center; }
  .cards li { --dy: 0vh !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .statement span { opacity: 1; }
}

.b-stats > div { display: flex; flex-direction: column; }