/* Tiltshift - style.css
   Every colour, font and the one radius are tokens in :root. Change them here, nothing else needs to change. */
:root {
  --bg: #0f0f0e;          /* page */
  --surface: #1b1b1a;     /* the "all projects" band, cells on hover */
  --text: #ece9e2;        /* text, and the background of the journal */
  --muted: #8b8a85;
  --line: color-mix(in srgb, var(--text) 14%, transparent);
  --f-head: "Saira Extra Condensed", "Arial Narrow", sans-serif;
  --w-head: 800;
  --f-mono: "Sono", ui-monospace, monospace;
  --radius: 0px;          /* the only radius in the theme */
  --pad: 24px;            /* page side margin */
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* a thin outer glow in the opposite colour, so text stays readable over photos */
  --accent: #d0641c;      /* our colour: the page you are on, small marks */
  --glow: 0 0 2px rgba(10, 10, 9, .35), 0 0 14px rgba(10, 10, 9, .5), 0 0 34px rgba(10, 10, 9, .3);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 12px/1.6 var(--f-mono); overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
.mono { font: 400 12px/1.6 var(--f-mono); }
.muted { color: var(--muted); }
i { font-style: normal; }
.big, .hero-name, .logo, .band-t, .row b, .marquee-row, .mi {
  font-family: var(--f-head); font-weight: var(--w-head); text-transform: uppercase; letter-spacing: 0; }
.big, .hero-name { font-size: 160px; line-height: .86; white-space: nowrap; width: max-content; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 99; padding: 10px 14px; background: var(--text); color: var(--bg); }
.skip:focus { top: 12px; }
:focus-visible { outline: 1px solid var(--text); outline-offset: 3px; }

.btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius);
  font: 400 12px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; transition: background .35s, color .35s, border-color .35s; }
.btn::after { content: "\2197"; font-size: 13px; }
.btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

/* things that rise into place as they come into view */
.js [data-up] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-up].is-in { opacity: 1; transform: none; }

/* photos that drift a little slower than the page */
[data-parallax] { overflow: hidden; border-radius: var(--radius); }
[data-parallax] img { width: 100%; height: 112%; object-fit: cover; transform: translateY(var(--py, -6%)); will-change: transform; }

/* ---------- header: name left, cells right ---------- */
.head { position: fixed; z-index: 50; inset: 0 0 auto; height: 64px; display: flex; align-items: stretch; color: #ece9e2; text-shadow: var(--glow); transition: background .4s; }
/* once the page moves, the header gets its own dark ground so the name never splits over a photo */
.head.is-solid { mix-blend-mode: normal; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.logo { display: flex; align-items: center; padding: 0 var(--pad); font-size: 32px; line-height: 1; margin-right: auto; white-space: nowrap; }
.head-cell { display: flex; align-items: center; gap: 12px; padding: 0 24px; border-left: 1px solid rgba(236, 233, 226, .16);
  font: 400 12px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: inherit; background: none; transition: opacity .3s; }
.head-cell:hover { opacity: .6; }
.menu-btn { border-width: 0 0 0 1px; border-style: solid; cursor: pointer; }
/* two lines that cross into an X */
.bars { position: relative; width: 22px; height: 10px; }
.bars i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.bars i:first-child { top: 0; } .bars i:last-child { top: 8.5px; }
.menu-open .bars i { top: 4.25px; }
.menu-open .bars i:first-child { transform: rotate(45deg); }
.menu-open .bars i:last-child { transform: rotate(-45deg); }
/* with the menu open the header is drawn as a negative too, so it reads over the photo and over the light ground */
/* the journal page is light: until the header gets its dark ground, it is drawn dark */
.light-page .head:not(.is-solid) { color: var(--bg); text-shadow: none; }
.light-page .head:not(.is-solid) .head-cell { border-color: color-mix(in srgb, var(--bg) 18%, transparent); }
.menu-open.light-page .head { color: #ece9e2; }
.menu-open .head { mix-blend-mode: difference; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* ---------- menu: a photo fills the screen, the items rise over it as a negative,
   then the photo pulls up and leaves heavy dark words on the light ground ---------- */
.menu { position: fixed; z-index: 45; inset: 0; isolation: isolate; background: var(--text); padding: 88px var(--pad) 22px;
  display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0); }
.menu[hidden] { display: none; }
.menu.is-closing { clip-path: inset(0 0 100% 0); transition: clip-path .55s var(--ease); }
.menu-photo { position: absolute; inset: 0; z-index: 0; clip-path: inset(0); transition: clip-path 1.6s cubic-bezier(.65, 0, .25, 1); }
.menu-photo img { width: 100%; height: 100%; object-fit: cover; }
.menu.is-pulled .menu-photo { clip-path: inset(0 0 100% 0); }
/* light text in difference: over the photo it turns the photo negative, over the light ground it becomes dark */
.menu-nav, .menu-foot { position: relative; color: #fff; } /* no z-index: the words must blend with the photo below */
.mi, .menu-foot { mix-blend-mode: difference; }
/* the page you are on: our colour, drawn normally (not as a negative) */
.mi[aria-current] { mix-blend-mode: normal; color: var(--accent); }
/* hover: a band of that page's photo opens behind the word, so the word turns negative over it */
.menu-peek { position: absolute; left: 0; right: 0; top: var(--peek-y, 0); height: var(--peek-h, 0); z-index: 0; pointer-events: none;
  background: center / cover no-repeat; clip-path: inset(50% 0 50% 0); transition: clip-path .55s var(--ease), top .45s var(--ease), height .45s var(--ease); }
.menu-peek.on { clip-path: inset(0); }
.menu-nav { display: grid; justify-items: start; margin-top: auto; }
.mi { display: block; overflow: hidden; padding: 0 .04em .04em 0; font-size: min(19vw, calc((100svh - 230px) / 5.3)); line-height: .9; }
.mi span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.menu.is-open .mi span { transform: none; }
.mi:hover span { transform: translateX(18px); transition-delay: 0s; transition-duration: .45s; }
.mi[aria-current]::after { content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .12em; background: var(--accent); vertical-align: baseline; }
.mi-small { font-size: min(6vw, 34px); margin-top: 14px; }
.menu-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; text-transform: uppercase; letter-spacing: .04em; margin-top: 28px; }
/* desktop: the latest project and the social links sit in a quiet column on the right, they rise once the photo has gone */
.menu-side { position: absolute; z-index: 1; right: var(--pad); bottom: 74px; width: 280px; display: grid; gap: 22px; color: var(--bg); overflow: hidden; }
.menu-side > * { transform: translateY(110%); transition: transform .9s var(--ease); }
.menu.is-pulled .menu-side > * { transform: none; transition-delay: .9s; }
.menu.is-pulled .menu-side > :last-child { transition-delay: 1s; }
.side-work { display: grid; gap: 6px; }
.side-work img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); margin-bottom: 6px; }
.side-work b { font: var(--w-head) 30px/1 var(--f-head); text-transform: uppercase; }
.side-work .mono { text-transform: uppercase; letter-spacing: .04em; color: color-mix(in srgb, var(--bg) 62%, transparent); }
.side-work:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.side-links { display: flex; gap: 18px; text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); padding-top: 12px; }
.side-links a:hover { text-decoration: underline; }
.mi-small { display: none; }
@media (max-width: 809px) { .menu-side { display: none; } .mi-small { display: block; } }

/* ---------- hero: the name stays pinned while the photo slides up under it ---------- */
.hero { position: relative; padding: 104px var(--pad) 64px; }
.hero-name { position: sticky; top: 88px; z-index: 2; mix-blend-mode: difference; color: #ece9e2; padding-bottom: 4px; }
.hero-img { position: relative; z-index: 1; height: 720px; max-height: calc(100svh - 120px); min-height: 360px; }

/* ---------- intro: the section pins and the photo, shot from below with converging verticals,
   straightens as you scroll (what a shift lens does); the viewfinder reads the shift ---------- */
.shift { height: 230vh; --p: 0; }
.shift-stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; align-items: center; padding: 96px var(--pad) 40px; }
.shift-text { display: grid; gap: 24px; align-content: center; }
.shift-lead { font: var(--w-head) clamp(28px, 2.7vw, 46px)/1.02 var(--f-head); text-transform: uppercase; max-width: 18em; }
.shift-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.shift-stats b { color: var(--text); font-weight: 500; }
.shift-bio { max-width: 44ch; color: var(--muted); }
.shift-frame { position: relative; height: calc(100svh - 160px); perspective: 1400px; }
.shift-photo { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius); transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--p)) * 11deg)) scale(calc(1 + (1 - var(--p)) * .05)); }
.shift-photo img { width: 100%; height: 100%; object-fit: cover; }
.shift-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .75); transform-origin: 50% 100%; transition: clip-path .7s var(--ease); clip-path: inset(0); }
.shift-grid i:first-child { left: 33.33%; transform: rotate(calc((1 - var(--p)) * 4deg)); }
.shift-grid i:last-child { left: 66.66%; transform: rotate(calc((1 - var(--p)) * -4deg)); }
.shift.is-straight .shift-grid i { clip-path: inset(100% 0 0 0); }
.shift-corners i { position: absolute; width: 26px; height: 26px; border: 0 solid #fff; --o: calc(14px + (1 - var(--p)) * 7%); }
.shift-corners i:nth-child(1) { left: var(--o); top: var(--o); border-width: 1px 0 0 1px; }
.shift-corners i:nth-child(2) { right: var(--o); top: var(--o); border-width: 1px 1px 0 0; }
.shift-corners i:nth-child(3) { left: var(--o); bottom: calc(var(--o) + 30px); border-width: 0 0 1px 1px; }
.shift-corners i:nth-child(4) { right: var(--o); bottom: calc(var(--o) + 30px); border-width: 0 1px 1px 0; }
.shift-level { position: absolute; left: 50%; top: 50%; width: 120px; height: 1px; background: #fff; transform: translate(-50%, -50%) rotate(calc((1 - var(--p)) * 5deg)); }
.shift-level::before, .shift-level::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: #fff; }
.shift-level::before { left: 0; } .shift-level::after { right: 0; }
.shift-read { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; gap: 20px; color: #fff; text-transform: uppercase; letter-spacing: .04em; text-shadow: var(--glow); }
.shift-read span:last-child { margin-left: auto; }

/* ---------- selected work: the projects run sideways on a rail while the section is pinned ---------- */
.work { padding: 120px 0 0; }
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 var(--pad); }
.work-title { font: var(--w-head) clamp(64px, 10vw, 170px)/.86 var(--f-head); text-transform: uppercase; }
.work-head .mono { text-transform: uppercase; letter-spacing: .04em; padding-bottom: 8px; }
.rail-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.rail-track { display: flex; gap: 24px; padding: 0 var(--pad); transform: translateX(var(--rx, 0px)); will-change: transform; }
.frame { flex: 0 0 auto; width: min(44vw, 720px); display: grid; gap: 14px; align-content: start; }
.frame:nth-child(even) { width: min(30vw, 480px); margin-top: 8svh; }
.frame-img { position: relative; display: block; height: calc(100svh - 260px); overflow: hidden; border-radius: var(--radius); }
.frame { perspective: 1400px; }
.frame-img { transform: rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)); will-change: transform; }
.frame-img::before, .frame-img::after { content: ""; position: absolute; z-index: 1; width: 28px; height: 28px; border: 0 solid #fff; pointer-events: none;
  opacity: 0; transition: transform .6s var(--ease), opacity .3s; }
.frame-img::before { left: 16px; top: 16px; border-width: 1.5px 0 0 1.5px; transform: translate(-14px, -14px); }
.frame-img::after { right: 16px; bottom: 16px; border-width: 0 1.5px 1.5px 0; transform: translate(14px, 14px); }
.frame:hover .frame-img::before, .frame:hover .frame-img::after { opacity: 1; transform: none; }
.frame:hover .frame-n { color: var(--accent); }
.frame:nth-child(even) .frame-img { height: calc(100svh - 330px); }
.frame-img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.frame:hover .frame-img img { scale: 1.04; }
.frame-cap { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; }
.frame-cap b { font: var(--w-head) clamp(28px, 2.6vw, 44px)/1 var(--f-head); text-transform: uppercase; }
.frame-cap .mono:last-child { grid-column: 2; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.frame-n { color: var(--muted); }
.frame:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.work .band { margin: 0 var(--pad); }
.band { position: relative; display: grid; place-items: center; height: 128px; background: var(--surface); overflow: hidden; }
.band-covers { position: absolute; inset: 0; }
.band-covers img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; filter: brightness(.45); }
.band-covers img.on { visibility: visible; }
.band-t { position: relative; font-size: 64px; line-height: 1; text-shadow: var(--glow); }

/* ---------- marquee: one line of huge words that slides with the scroll ---------- */
.marquee { padding: 64px 0; overflow: hidden; }
.marquee-row { display: flex; gap: .3em; width: max-content; font-size: 300px; line-height: 1.05; white-space: nowrap; transform: translateX(var(--mx, 0px)); will-change: transform; }

/* ---------- clients: a wall of logos ---------- */
.clients { padding: 0 var(--pad) 96px; }
.clients > .mono { margin-bottom: 16px; text-transform: uppercase; }
.logos { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.logo-cell { position: relative; height: 240px; display: grid; place-items: center; padding: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.logo-cell > .mono { position: absolute; left: 16px; bottom: 14px; text-transform: uppercase; letter-spacing: .04em; z-index: 1; transition: color .4s; }
.logo-cell i { font-size: 9px; vertical-align: 1px; margin: 0 4px; }
.logo-img { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--ease); }
.logo-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.45); }
.logo-cell:hover .logo-img { clip-path: inset(0); }
.logo-cell:hover > .mono { color: var(--text); }
.logo-cell:hover > .mono, .logo-cell:hover .wordmark { text-shadow: var(--glow); }
.wordmark { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.wordmark b { font: 600 22px/1 var(--f-mono); letter-spacing: .02em; text-transform: uppercase; }
.wordmark small { font: 400 10px/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; position: absolute; left: 34px; top: calc(100% + 6px); }
/* little marks next to the names, drawn in CSS */
.wordmark::before { content: ""; width: 22px; height: 22px; flex: none; border: 1.5px solid currentColor; }
.mark-arch::before { border-radius: 11px 11px 0 0; border-bottom: 0; }
.mark-bars::before { border: 0; background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px); }
.mark-circle::before { border-radius: 50%; }
.mark-triangle::before { border: 0; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mark-grid::before { background: linear-gradient(currentColor, currentColor) 50% / 1.5px 100% no-repeat, linear-gradient(currentColor, currentColor) 50% / 100% 1.5px no-repeat; }
.mark-line::before { width: 30px; height: 0; border-width: 3px 0 0; }
.mark-::before { display: none; }
.mark- small { left: 0; }

/* ---------- journal: the one light section, with a cut bottom edge ---------- */
.journal { background: var(--text); color: var(--bg); padding: 48px var(--pad) 72px; --line: color-mix(in srgb, var(--bg) 16%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 18px)); }
.journal-head { display: grid; gap: 8px; margin-bottom: 72px; }
.journal-head .mono { justify-self: end; max-width: 300px; margin-right: 120px; }
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 96px 1fr 300px 40px; gap: 24px; align-items: center; min-height: 106px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.row-date { color: color-mix(in srgb, var(--bg) 62%, transparent); }
.row b { font-size: 40px; line-height: 1; transition: transform .5s var(--ease); }
.row-ex { color: color-mix(in srgb, var(--bg) 62%, transparent); }
.row-arrow { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; transition: background .35s, color .35s; }
.row:hover b { transform: translateX(10px); }
.row:hover .row-arrow { background: var(--bg); color: var(--text); }

/* ---------- closing call ---------- */
.cta { display: grid; justify-items: center; gap: 32px; padding: 160px var(--pad) 120px; text-align: center; margin-top: -18px; }
.cta .big { margin-bottom: 24px; }
.cta > .mono { text-transform: uppercase; letter-spacing: .04em; }

/* ---------- footer: one bar of cells ---------- */
.foot { display: flex; justify-content: space-between; height: 64px; border-top: 1px solid var(--line); text-transform: uppercase; letter-spacing: .04em; }
.foot-copy { display: flex; align-items: center; padding: 0 var(--pad); border-right: 1px solid var(--line); color: var(--muted); }
.foot-copy i { font-size: 9px; margin: 0 6px; }
.foot-links { display: flex; }
.foot-links a { display: flex; align-items: center; padding: 0 24px; border-left: 1px solid var(--line); transition: background .3s; }
.foot-links a:hover { background: var(--surface); }

.to-top { position: fixed; z-index: 40; right: 16px; bottom: 16px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg); color: var(--text); transform: translateY(80px); transition: transform .5s var(--ease), background .3s, color .3s; }
.to-top.on { transform: none; }
.to-top:hover { background: var(--text); color: var(--bg); }

/* ================= inner pages ================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.light-page { background: var(--text); color: var(--bg); --muted: color-mix(in srgb, var(--bg) 60%, transparent); --line: color-mix(in srgb, var(--bg) 16%, transparent); }
.light-page .btn:hover { background: var(--bg); color: var(--text); border-color: var(--bg); }
.light-page .foot { color: var(--bg); }

/* ---------- work: one screen; the name under the mouse brings its building in behind the list ---------- */
.index { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 24px; padding: 110px var(--pad) 40px; overflow: hidden; }
.index-bg { position: absolute; inset: 0; z-index: 0; }
.index-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); filter: brightness(.55); }
.index-bg img.on { clip-path: inset(0); z-index: 1; }
.index-bg img.was { clip-path: inset(0); }
.index-label { position: absolute; z-index: 2; left: var(--pad); top: 84px; text-transform: uppercase; }
.index-info { position: relative; z-index: 2; display: grid; color: #fff; text-shadow: var(--glow); }
.index-card { grid-area: 1 / 1; display: grid; gap: 12px; max-width: 420px; visibility: hidden; }
.index-card.on { visibility: visible; }
.index-card > * { transform: translateY(100%); clip-path: inset(0 0 100% 0); transition: transform .6s var(--ease), clip-path .6s var(--ease); }
.index-card.on > * { transform: none; clip-path: inset(-20% 0); }
.index-n { font: var(--w-head) clamp(80px, 12vw, 200px)/.8 var(--f-head); }
.index-meta { text-transform: uppercase; letter-spacing: .04em; }
.index-meta i { font-size: 9px; vertical-align: 1px; margin: 0 6px; }
.index-list { position: relative; z-index: 2; justify-self: end; text-align: right; display: grid; gap: 2px; }
.index-list a { display: inline-block; font: var(--w-head) clamp(34px, 4.6vw, 78px)/.95 var(--f-head); text-transform: uppercase; color: rgba(236, 233, 226, .62); text-shadow: var(--glow); transition: color .4s, transform .5s var(--ease); }
.index-list a.on, .index-list a:hover, .index-list a:focus-visible { color: #fff; transform: translateX(-14px); }
.index-note { position: relative; z-index: 2; grid-column: 2; justify-self: end; max-width: 300px; text-align: right; color: rgba(236, 233, 226, .7); text-shadow: var(--glow); }

/* ---------- project ---------- */
.p-hero { position: relative; height: 100svh; min-height: 560px; }
.p-hero-img { position: absolute; inset: 0; }
.p-hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .5)); }
.p-hero-cap { position: absolute; left: var(--pad); right: var(--pad); bottom: 30px; color: #fff; text-shadow: var(--glow); display: grid; gap: 10px; }
.p-hero-cap .mono { text-transform: uppercase; letter-spacing: .04em; }
.p-title { font: var(--w-head) clamp(56px, 11vw, 190px)/.86 var(--f-head); text-transform: uppercase; }
.p-hero-meta { position: absolute; right: var(--pad); bottom: 36px; color: #fff; text-shadow: var(--glow); text-transform: uppercase; letter-spacing: .04em; }
.p-hero-meta i, .post-head i, .j-feature i, .j-card i { font-size: 9px; vertical-align: 1px; margin: 0 6px; }
.p-brief { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 24px; padding: 120px var(--pad); align-items: start; }
.p-brief > .mono:first-child { text-transform: uppercase; }
.p-intro { font: var(--w-head) clamp(26px, 2.6vw, 44px)/1.04 var(--f-head); text-transform: uppercase; }
.p-facts { display: grid; border-top: 1px solid var(--line); }
.p-facts div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.p-facts dt { color: var(--muted); text-transform: uppercase; }
.p-facts dd { margin: 0; }
.p-gallery { display: grid; gap: var(--pad); padding: 0 var(--pad); }
.g-row { display: grid; gap: var(--pad); }
.g-row.c2 { grid-template-columns: 1fr 1fr; }
.g-ph { height: min(82svh, 860px); }
.g-row.c2 .g-ph { height: min(70svh, 760px); }
.p-next { position: relative; display: grid; align-items: end; height: 70svh; min-height: 420px; margin-top: 120px; overflow: hidden; }
.p-next-img { position: absolute; inset: 0; }
.p-next-img img { filter: brightness(.55); transition: filter .6s, scale 1.2s var(--ease); }
.p-next:hover .p-next-img img { filter: brightness(.7); scale: 1.03; }
.p-next-cap { position: relative; display: grid; gap: 10px; padding: 0 var(--pad) 36px; color: #fff; text-shadow: var(--glow); }
.p-next-cap .mono { text-transform: uppercase; letter-spacing: .04em; }
.p-next-cap b { font: var(--w-head) clamp(48px, 8vw, 140px)/.86 var(--f-head); text-transform: uppercase; }
.p-next .row-arrow { position: absolute; right: var(--pad); bottom: 40px; color: #fff; width: 56px; height: 56px; }
.p-next:hover .row-arrow { background: #fff; color: var(--bg); }
.p-back { padding: 40px var(--pad) 80px; }

/* ---------- about ---------- */
.a-hero { position: relative; height: 82svh; min-height: 520px; }
.a-hero-img { position: absolute; inset: 0; }
.a-hero-label, .a-hero-name, .a-hero-meta { position: absolute; color: #fff; text-shadow: var(--glow); }
.a-hero-label { left: var(--pad); bottom: 30px; text-transform: uppercase; }
.a-hero-name { left: 50%; bottom: 24px; transform: translateX(-50%); font: var(--w-head) clamp(28px, 3vw, 48px)/1 var(--f-head); text-transform: uppercase; white-space: nowrap; }
.a-hero-meta { right: var(--pad); bottom: 30px; text-align: right; text-transform: uppercase; letter-spacing: .04em; }
.a-intro { padding: 32px var(--pad) 120px; display: grid; gap: 28px; }
.a-statement { font: var(--w-head) clamp(28px, 3.4vw, 58px)/1.02 var(--f-head); text-transform: uppercase; color: var(--muted); max-width: 22em; }
.a-pair { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; padding: 0 var(--pad) 120px; align-items: end; }
.a-pair-img { aspect-ratio: 4 / 5; }
.a-pair-text { grid-column: 3; display: grid; gap: 18px; max-width: 360px; }
.a-wide { height: min(90svh, 900px); margin: 0 var(--pad); }
.a-settings { display: grid; grid-template-columns: 1fr 1.6fr; margin-top: 120px; }
.a-set-head { background: var(--text); color: var(--bg); padding: 48px var(--pad); display: grid; gap: 24px; align-content: start; --muted: color-mix(in srgb, var(--bg) 60%, transparent); }
.a-set-head .mono:first-child { text-transform: uppercase; }
.a-set-head h2 { font: var(--w-head) clamp(40px, 4.4vw, 76px)/.92 var(--f-head); text-transform: uppercase; }
.a-set-head .btn { border-color: color-mix(in srgb, var(--bg) 25%, transparent); color: var(--bg); }
.a-set-head .btn:hover { background: var(--bg); color: var(--text); }
.a-set-list { list-style: none; margin: 0; padding: 0; }
.a-set { position: relative; display: grid; grid-template-columns: 50px 1fr 1fr; gap: 10px 24px; padding: 40px var(--pad) 40px 24px; border-bottom: 1px solid var(--line); }
.a-set-n { color: var(--muted); }
.a-set-value { grid-column: 2; font: var(--w-head) clamp(64px, 7vw, 120px)/.85 var(--f-head); text-transform: uppercase; }
.a-set h3 { grid-column: 2; font: var(--w-head) clamp(22px, 2vw, 32px)/1 var(--f-head); text-transform: uppercase; }
.a-set-text { grid-column: 2; color: var(--muted); max-width: 40ch; }
.a-set-spec { grid-column: 3; grid-row: 1 / span 3; align-self: start; list-style: none; padding: 0; margin: 0; text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid var(--line); }
.a-set-spec li { padding: 8px 0; border-bottom: 1px solid var(--line); }
/* small marks drawn in CSS: a lens, an aperture, grain */
.a-mark { grid-column: 3; justify-self: end; align-self: end; width: 64px; height: 64px; border: 1px solid var(--muted); border-radius: 50%; }
.a-mark-lens { box-shadow: inset 0 0 0 10px var(--bg), inset 0 0 0 11px var(--muted), inset 0 0 0 20px var(--bg), inset 0 0 0 21px var(--muted); }
.a-mark-aperture { background: conic-gradient(from 20deg, var(--muted) 0 8deg, transparent 8deg 60deg, var(--muted) 60deg 68deg, transparent 68deg 120deg, var(--muted) 120deg 128deg, transparent 128deg 180deg, var(--muted) 180deg 188deg, transparent 188deg 240deg, var(--muted) 240deg 248deg, transparent 248deg 300deg, var(--muted) 300deg 308deg, transparent 308deg); }
.a-mark-grain { background: radial-gradient(circle, var(--muted) 1px, transparent 1.6px) 0 0 / 6px 6px; }
.a-services { padding: 120px var(--pad) 40px; }
.a-serv-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.a-serv-head .mono:first-child { text-transform: uppercase; }
.a-serv-head .mono:last-child { max-width: 340px; text-align: right; }
.a-serv-list { border-top: 1px solid var(--line); }
.a-serv { display: grid; grid-template-columns: 50px 1fr auto 40px; gap: 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.a-serv b { font: var(--w-head) clamp(34px, 3.6vw, 60px)/1 var(--f-head); text-transform: uppercase; transition: transform .5s var(--ease); }
.a-serv:hover b { transform: translateX(14px); }
.a-serv:hover .row-arrow { background: var(--text); color: var(--bg); }
.a-quote { padding: 160px var(--pad); display: grid; place-items: center; }
.a-quote blockquote { margin: 0; max-width: 18em; text-align: center; font: var(--w-head) clamp(30px, 3.4vw, 58px)/1.02 var(--f-head); text-transform: uppercase; color: var(--muted); }

/* ---------- journal ---------- */
.j-page { padding: 100px var(--pad) 100px; }
.j-label { text-transform: uppercase; margin-bottom: 24px; }
.j-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 56px; border-bottom: 1px solid var(--line); margin-bottom: 56px; }
.j-feature-text, .j-card { display: grid; gap: 12px; align-content: start; }
.j-feature-img { aspect-ratio: 4 / 3; overflow: hidden; }
.j-feature-img img, .j-card-img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.j-feature:hover img, .j-card:hover img { scale: 1.04; }
.j-date { font: var(--w-head) clamp(56px, 7vw, 120px)/.85 var(--f-head); text-transform: uppercase; }
.j-feature .j-date { font-size: clamp(72px, 10vw, 170px); }
.j-title { font: var(--w-head) clamp(24px, 2.2vw, 36px)/1 var(--f-head); text-transform: uppercase; }
.j-feature .j-title { font-size: clamp(34px, 3.6vw, 60px); }
.j-ex { max-width: 44ch; }
.j-read { text-transform: uppercase; letter-spacing: .04em; }
.j-feature:hover .j-title, .j-card:hover .j-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.j-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 24px; }
.j-card-img { aspect-ratio: 3 / 2; overflow: hidden; margin-top: 8px; }
.j-more { background: var(--text); color: var(--bg); padding: 80px var(--pad) 100px; --muted: color-mix(in srgb, var(--bg) 60%, transparent); }

/* ---------- journal post ---------- */
.post-hero { height: 72svh; min-height: 420px; }
.post-head { padding: 48px var(--pad) 0; display: grid; gap: 20px; }
.post-head .mono { text-transform: uppercase; letter-spacing: .04em; }
.post-title { font: var(--w-head) clamp(48px, 8vw, 140px)/.86 var(--f-head); text-transform: uppercase; max-width: 14em; }
.post-body { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; padding: 64px var(--pad) 120px; }
.post-label { text-transform: uppercase; }
.post-text { display: grid; gap: 22px; max-width: 720px; font: 400 15px/1.75 var(--f-mono); }
.post-lead { font: var(--w-head) clamp(24px, 2.4vw, 38px)/1.06 var(--f-head); text-transform: uppercase; }
.post-text h2 { font: var(--w-head) clamp(26px, 2.4vw, 40px)/1 var(--f-head); text-transform: uppercase; margin-top: 18px; }
.post-text ul { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.post-text li { padding: 10px 0 10px 22px; border-bottom: 1px solid var(--line); position: relative; }
.post-text li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; background: var(--accent); }
.post-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.post-ph { aspect-ratio: 4 / 5; }

/* ---------- contact ---------- */
.c-page { padding: 110px var(--pad) 80px; display: grid; gap: 24px; }
.c-page > .mono:first-child { text-transform: uppercase; }
.c-mail a { display: inline-block; font: var(--w-head) clamp(36px, 7.6vw, 150px)/.9 var(--f-head); text-transform: uppercase; overflow-wrap: anywhere; transition: color .3s; }
.c-mail a:hover { color: var(--accent); }
.c-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.c-cols .mono p + p, .c-cols > div > p + p { margin-top: 10px; }
.c-lead { max-width: 46ch; }
.c-links { display: grid; gap: 4px; text-transform: uppercase; }
.c-links a:hover, .c-cols a:hover { text-decoration: underline; }
.c-form-wrap { padding: 40px var(--pad) 120px; display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
.c-form-title { font: var(--w-head) clamp(44px, 5vw, 90px)/.9 var(--f-head); text-transform: uppercase; }
.c-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.c-field { display: grid; gap: 4px; padding: 16px 0 10px; border-bottom: 1px solid var(--line); transition: border-color .3s; }
.c-field:focus-within { border-color: var(--text); }
.c-field .mono { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.c-field input, .c-field textarea { font: 400 18px/1.4 var(--f-mono); color: var(--text); background: none; border: 0; outline: 0; padding: 4px 0; resize: vertical; width: 100%; }
.c-field.bad { border-color: var(--accent); }
.c-wide, .c-send { grid-column: 1 / -1; }
.c-send { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 28px; }
.c-note { color: var(--muted); }
.c-note.bad { color: var(--accent); }

/* ---------- 404 ---------- */
.nf { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 18px; padding: 110px var(--pad) 60px; }
.nf-num { line-height: .8; }
.nf-title { font: var(--w-head) clamp(32px, 4vw, 64px)/1 var(--f-head); text-transform: uppercase; }

/* ---------- tablet ---------- */
@media (max-width: 1199px) {
  .a-hero-name { display: none; }
  .p-brief { grid-template-columns: 1fr 2fr; }
  .p-facts { grid-column: 2; }
  .a-pair { grid-template-columns: 1fr 1fr; }
  .a-pair-text { grid-column: 2; }
  .a-settings { grid-template-columns: 1fr; }
  .j-grid { grid-template-columns: 1fr 1fr; }
  .c-cols { grid-template-columns: 1fr 1fr; }
  .c-lead { grid-column: 1 / -1; }
  .c-form-wrap { grid-template-columns: 1fr; }
  .shift-stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 24px; padding-top: 84px; }
  .shift-bio { display: none; }
  .shift-frame { height: auto; min-height: 0; }
  .band-t { font-size: 48px; }
  .marquee-row { font-size: 220px; }
  .row { grid-template-columns: 80px 1fr 240px 40px; }
  .row b { font-size: 32px; }
}
/* ---------- phone ---------- */
@media (max-width: 809px) {
  .index { grid-template-columns: 1fr; align-content: end; padding-top: 120px; }
  .index-list { justify-self: start; text-align: left; grid-row: 1; }
  .index-list a.on, .index-list a:hover { transform: translateX(10px); }
  .index-note { grid-column: 1; justify-self: start; text-align: left; }
  .index-info { grid-row: 2; }
  .index-n { font-size: 72px; }
  .p-hero-meta { display: none; }
  .p-brief { grid-template-columns: 1fr; padding: 72px var(--pad); }
  .p-facts { grid-column: 1; }
  .g-row.c2 { grid-template-columns: 1fr; }
  .g-ph, .g-row.c2 .g-ph { height: 62svh; }
  .p-next { margin-top: 72px; }
  .a-hero-meta { display: none; }
  .a-pair { grid-template-columns: 1fr; padding-bottom: 72px; }
  .a-pair-text { grid-column: 1; }
  .a-intro { padding-bottom: 72px; }
  .a-wide { height: 60svh; }
  .a-set { grid-template-columns: 34px 1fr; padding: 32px var(--pad); }
  .a-set-spec, .a-mark { grid-column: 2; grid-row: auto; }
  .a-mark { justify-self: start; width: 48px; height: 48px; }
  .a-serv-head { flex-direction: column; }
  .a-serv-head .mono:last-child { text-align: left; }
  .a-serv { grid-template-columns: 28px 1fr 40px; gap: 14px; }
  .a-serv > .mono:nth-of-type(2) { display: none; }
  .a-quote { padding: 100px var(--pad); }
  .j-page { padding-top: 88px; }
  .j-feature { grid-template-columns: 1fr; }
  .j-feature-img { grid-row: 1; }
  .j-grid { grid-template-columns: 1fr; }
  .post-body { grid-template-columns: 1fr; padding: 48px var(--pad) 80px; }
  .post-pair { grid-template-columns: 1fr; }
  .c-cols { grid-template-columns: 1fr; }
  .c-form { grid-template-columns: 1fr; }
  .shift { height: 240vh; }
  .shift-stage { padding: 76px var(--pad) 20px; gap: 18px; }
  .shift-lead { font-size: clamp(22px, 6.6vw, 30px); }
  .shift-stats { gap: 4px 18px; }
  .shift-level { width: 72px; }
  .shift-read span:nth-child(2) { display: none; }
  .shift-read { top: 12px; bottom: auto; }
  .shift-corners i:nth-child(1), .shift-corners i:nth-child(2) { top: calc(var(--o) + 30px); }
  .shift-corners i:nth-child(3), .shift-corners i:nth-child(4) { bottom: var(--o); }
  .work { padding-top: 96px; }
  .rail-stage { position: static; height: auto; display: block; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 28px 0 32px; }
  .rail-stage::-webkit-scrollbar { display: none; }
  .rail-track { transform: none; width: max-content; gap: 14px; }
  .frame, .frame:nth-child(even) { width: 78vw; margin-top: 0; scroll-snap-align: start; scroll-margin-left: var(--pad); }
  .frame-img, .frame:nth-child(even) .frame-img { height: 56svh; }
  .logo { font-size: 24px; }
  .head-cell { padding: 0 16px; gap: 10px; }
  :root { --pad: 16px; }
  .hero { padding: 88px var(--pad) 48px; }
  .hero-name { top: 72px; }
  .hero-img { height: 70svh; }
  .band { height: 96px; }
  .band-t { font-size: 36px; }
  .marquee { padding: 48px 0; }
  .marquee-row { font-size: 140px; }
  .logos { grid-template-columns: 1fr 1fr; }
  .logo-cell { height: auto; min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 16px 12px 14px; }
  .logo-cell > .mono { position: static; font-size: 11px; }
  .wordmark { flex-wrap: wrap; gap: 6px 8px; margin-top: 18px; }
  .wordmark b { font-size: 15px; }
  .wordmark::before { width: 16px; height: 16px; }
  .wordmark small { position: static; flex-basis: 100%; letter-spacing: .2em; margin-top: 0; }
  .journal-head { margin-bottom: 40px; }
  .journal-head .mono { justify-self: start; margin-right: 0; }
  .row { grid-template-columns: 1fr 40px; gap: 8px 16px; }
  .row-date { grid-column: 1 / -1; }
  .row b { font-size: 28px; }
  .row-ex { display: none; }
  .cta { padding: 120px var(--pad) 88px; }
  .foot { flex-direction: column; height: auto; }
  .foot-copy { border-right: 0; border-bottom: 1px solid var(--line); height: 56px; }
  .foot-links { flex-wrap: wrap; }
  .foot-links a { flex: 1 1 auto; justify-content: center; height: 56px; border-left: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 var(--pad); }
  .foot-links a:first-child { flex-basis: 100%; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .shift { --p: 1; height: auto; }
  .shift-stage { position: static; }
  *, *::before, *::after { transition-duration: 0s !important; }
  [data-parallax] img { transform: none; height: 100%; }
}