/* paulvl.eu · site.css */
/* 1. Fonts */
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/inter-tight-var.woff2") format("woff2-variations"), url("/assets/fonts/inter-tight-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* 2. Tokens */
:root {

  --ink: #0f0f0f;
  --paper: #f2f0eb;
  --red: #fa3122;
  --bg: var(--ink);
  --fg: var(--paper);
  --muted: #9a978f;
  --line: rgb(242 240 235 / .16);
  --accent: var(--red);
  --accent-fg: var(--ink);
  --surface: #181817;
  color-scheme: dark;

  --font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-text: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --step--1: clamp(.8rem, .78rem + .1vw, .875rem);
  --step-0: clamp(1rem, .96rem + .19vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.12rem + .38vw, 1.5rem);
  --step-2: clamp(1.44rem, 1.28rem + .7vw, 2rem);
  --step-3: clamp(1.73rem, 1.45rem + 1.2vw, 2.66rem);
  --step-4: clamp(2.07rem, 1.6rem + 2vw, 3.55rem);
  --step-5: clamp(2.5rem, 1.7rem + 3.4vw, 4.75rem);
  --step-6: clamp(2.75rem, 1.4rem + 6vw, 7rem);
  --step-7: clamp(3.25rem, .9rem + 10vw, 11.5rem);

  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --space-xl: clamp(3rem, 2.2rem + 3.4vw, 5.5rem);
  --space-section: clamp(5rem, 2.5rem + 9vw, 11rem);

  --gutter: clamp(16px, 4vw, 64px);
  --col-gap: clamp(12px, 1.6vw, 24px);
  --max: 1600px;
  --header-h: 64px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.7, 0, .3, 1);
  --dur: .9s;
  --dur-fast: .35s;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--paper); --fg: var(--ink); --muted: #5c5a55; --line: rgb(15 15 15 / .16);
    --accent: #c8251a; --accent-fg: var(--paper); --surface: #e8e5de; color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: var(--paper); --fg: var(--ink); --muted: #5c5a55; --line: rgb(15 15 15 / .16);
  --accent: #c8251a; --accent-fg: var(--paper); --surface: #e8e5de; color-scheme: light;
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--step-0)/1.55 var(--font-text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; max-width: 62ch; }
::selection { background: var(--accent); color: var(--accent-fg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; left: var(--gutter); top: .5rem; z-index: 1000;
  padding: .75rem 1rem; background: var(--accent); color: var(--accent-fg);
  transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { transform: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 4. Layout */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.section { padding-block: var(--space-section); }
.section + .section { border-top: 1px solid var(--line); }

.section-head { margin-bottom: var(--space-xl); row-gap: var(--space-s); align-items: end; }
.section-head .eyebrow { grid-column: 1 / -1; }
.section-head h2 { grid-column: 1 / -1; font: 600 var(--step-6)/.92 var(--font-display); letter-spacing: -.045em; }
@media (min-width: 768px) {
  .section-head .eyebrow { grid-column: 1 / 4; align-self: start; padding-top: .6em; }
  .section-head h2 { grid-column: 4 / -1; }
}

/* 5. Components */
.eyebrow {
  font: 500 var(--step--1)/1.4 var(--font-mono);
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.serif { font-family: var(--font-serif); font-weight: 400; }

em, .italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.06em; }

.link-line { position: relative; display: inline-block; }
.link-line::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.15em; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-fast) var(--ease);
}
.link-line:hover::after, .link-line:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.rule { height: 1px; background: var(--accent); transform-origin: left; }

.btn {
  --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--fg);
  display: inline-flex; align-items: center; gap: .75em; min-height: 48px; padding: .8em 1.4em;
  border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg);
  font: 500 var(--step-0)/1 var(--font-text); letter-spacing: -.01em; border-radius: 999px;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn svg { width: .9em; height: .9em; transition: transform var(--dur-fast) var(--ease); }
.btn:hover svg { transform: translateX(.2em); }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-fg); --btn-bd: var(--accent); }
.btn--ghost:hover { --btn-bg: var(--fg); --btn-fg: var(--bg); }
.magnetic { display: inline-block; will-change: transform; }

kbd {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .3em;
  border: 1px solid currentColor; border-radius: 4px; font: 500 .7em/1 var(--font-mono); opacity: .7;
}

.ph {
  background: transparent; color: inherit;
  outline: 1px dashed var(--accent); outline-offset: 2px;
}
.ph-box {
  display: grid; place-items: center; aspect-ratio: 16 / 10; padding: var(--space-m);
  border: 1px dashed var(--accent); color: var(--muted); text-align: center;
  font: 500 var(--step--1)/1.5 var(--font-mono); background: var(--surface);
}

/* 5a. Header */
.site-header { position: fixed; inset: 12px 0 auto; z-index: 100; height: 0; pointer-events: none; }
.bar {
  --b-bg: rgb(22 22 21 / .94); --b-fg: var(--paper); --b-line: rgb(242 240 235 / .12);
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: min(480px, calc(100vw - 2 * var(--gutter)));
  background: var(--b-bg); color: var(--b-fg); border-radius: 6px; pointer-events: auto;
  box-shadow: 0 10px 40px rgb(0 0 0 / .25);
}
@supports (backdrop-filter: blur(1px)) { .bar { backdrop-filter: blur(12px); } }
.bar > .logo, .bar > .bar-msg, .bar > .menu-btn { height: 44px; }
.bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.logo { padding: 0 14px; display: inline-flex; align-items: center; font: 700 1.05rem/1 var(--font-display); letter-spacing: -.04em; }
.logo i { color: var(--red); font-style: normal; }
.bar-msg {
  margin: 0; max-width: none; text-align: center; overflow: hidden; display: grid; place-items: center;
  font: 500 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .85;
}
.bar-msg span { display: inline-block; }
.menu-btn { display: grid; place-items: center; width: 48px; }
.burger { display: grid; gap: 4px; width: 16px; }
.burger i { display: block; height: 1.5px; background: currentColor; transition: transform var(--dur-fast) var(--ease); }
.menu-btn[aria-expanded="true"] .burger i:first-child { transform: translateY(2.75px) scaleX(.85); }
.menu-btn[aria-expanded="true"] .burger i:last-child { transform: translateY(-2.75px) scaleX(.85); }

.menu { grid-column: 1 / -1; border-top: 1px solid var(--b-line); overflow: hidden; }
.menu[hidden] { display: none; }
.menu-list { margin: 0; padding: 0; list-style: none; }
.menu-list li { border-bottom: 1px solid var(--b-line); }
.menu-list a {
  display: flex; justify-content: space-between; align-items: center; min-height: 50px; padding: 0 16px;
  font: 500 1.0625rem/1 var(--font-text); letter-spacing: -.01em;
  transition: background-color var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease);
}
.menu-list a:hover, .menu-list a:focus-visible { background: rgb(242 240 235 / .06); padding-left: 22px; color: var(--red); }
.mi-n { width: 2.4rem; flex: none; font: 500 10.5px/1 var(--font-mono); opacity: .55; }
.mi-t { flex: 1; }
.menu-list small { font: 500 10.5px/1 var(--font-mono); opacity: .6; }
.menu-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
.mbtn {
  display: grid; place-items: center; min-height: 46px; padding: 0 10px; border-radius: 4px; text-align: center;
  background: var(--paper); color: var(--ink); font: 600 10.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mbtn:hover, .mbtn:focus-visible { background: var(--red); color: var(--ink); }
.mbtn--line { grid-column: 1 / -1; background: transparent; color: var(--b-fg); border: 1px solid var(--b-line); }
.menu-foot { display: flex; justify-content: space-between; align-items: center; padding: 0 16px 10px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.menu-theme { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.menu-theme svg { width: 14px; height: 14px; }
.menu-scrim { position: fixed; inset: 0; z-index: 99; background: rgb(10 10 10 / .35); }
@supports (backdrop-filter: blur(1px)) { .menu-scrim { backdrop-filter: blur(14px); background: rgb(10 10 10 / .2); } }
.menu-scrim[hidden] { display: none; }

.touch {
  position: absolute; right: var(--gutter); top: 0; display: none; align-items: center; gap: 10px; height: 44px; padding: 0 16px;
  background: var(--red); color: var(--ink); border-radius: 6px; pointer-events: auto;
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 40px rgb(0 0 0 / .18);
}
.touch:hover { background: var(--paper); }
@media (min-width: 1100px) { .touch { display: inline-flex; } }

.bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 6px 6px 0 0; z-index: 1;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease);
}
.site-header.is-open .bar::before { transform: scaleX(1); }

/* 5b. Picture frames */
.frame { position: relative; overflow: hidden; background: var(--surface); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* 6. Sections */
main { padding-top: var(--header-h); }

/* 6a. Hero */
.hero { min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: space-between; padding-block: var(--space-xl) var(--space-l); gap: var(--space-xl); }
.hero h1 { font: 600 clamp(2.5rem, 1.05rem + 5.4vw, 6.5rem)/.94 var(--font-display); letter-spacing: -.045em; max-width: 21ch; }
.hero h1 em { color: var(--accent); }
.hero-foot { row-gap: var(--space-l); align-items: end; }
.hero-lead { grid-column: 1 / -1; font-size: var(--step-1); line-height: 1.4; max-width: 34ch; }
.hero-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-s); }
@media (min-width: 768px) {
  .hero-lead { grid-column: 1 / 6; }
  .hero-cta { grid-column: 8 / -1; justify-content: flex-end; }
}

/* 6b. Work list */
.work-list { border-bottom: 1px solid var(--line); }
.work { border-top: 1px solid var(--line); }
.work-link {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-xs);
  padding-block: var(--space-m); align-items: baseline;
  transition: opacity var(--dur-fast) var(--ease);
}
.work-idx, .work-meta, .work-year { font: 500 var(--step--1)/1.4 var(--font-mono); color: var(--muted); }

.work-idx { grid-column: 1 / 2; }
.work-name { grid-column: 1 / -1; font: 600 var(--step-5)/1 var(--font-display); letter-spacing: -.045em; transition: transform var(--dur) var(--ease); }
.work-meta { grid-column: 1 / 4; }
.work-year { grid-column: 4 / 5; text-align: right; }
.work-result { grid-column: 1 / -1; font-size: var(--step--1); color: var(--muted); }
@media (min-width: 768px) {
  .work-link { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: var(--space-l); }
  .work-idx { grid-column: 1 / 2; }
  .work-name { grid-column: 2 / 9; }
  .work-meta { grid-column: 9 / 11; }
  .work-year { grid-column: 11 / -1; }
  .work-result { grid-column: 9 / 11; }
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {

  .work-list:hover .work-link { opacity: .35; }
  .work-list .work-link:hover, .work-list .work-link:focus-visible { opacity: 1; }
  .work-link:hover .work-name, .work-link:focus-visible .work-name { transform: translateX(.35em); }
}
.work-preview {
  position: fixed; left: 0; top: 0; z-index: 50; width: clamp(240px, 24vw, 420px); aspect-ratio: 7 / 5;
  pointer-events: none; opacity: 0; transform: translate(-50%, -50%); overflow: hidden;
}
.work-preview { transition: opacity var(--dur-fast) var(--ease); }
.work-preview.is-on { opacity: 1; }
.work-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease); }
.work-preview img.is-on { opacity: 1; transform: none; }
.work-foot { margin-top: var(--space-l); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s); align-items: center; color: var(--muted); font-size: var(--step--1); }

/* 6c. Services */
.services { row-gap: var(--space-xl); }
.service { grid-column: 1 / -1; display: grid; gap: var(--space-s); align-content: start; }
.service .rule { margin-bottom: var(--space-s); }
.service-idx { font: 500 var(--step--1) var(--font-mono); color: var(--accent); }
.service h3 { font: 600 var(--step-3)/1.05 var(--font-display); letter-spacing: -.035em; }
.service ul { padding: 0; list-style: none; display: grid; gap: .35rem; font-size: var(--step--1); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--space-s); }
.service li::before { content: "+ "; color: var(--accent); }
@media (min-width: 768px) {
  .service:nth-child(1) { grid-column: 1 / 5; }
  .service:nth-child(2) { grid-column: 5 / 9; }
  .service:nth-child(3) { grid-column: 9 / -1; }
}

/* 6d. Process */
.process { position: relative; }
.process-track { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.process-track .rule { height: 100%; }
html.motion .process-track .rule { transform: scaleX(0); }
.steps { display: grid; gap: var(--space-l); padding-top: var(--space-l); counter-reset: s; }
.step { display: grid; gap: var(--space-xs); align-content: start; }
.step-n { font: 600 var(--step-4)/1 var(--font-display); letter-spacing: -.04em; color: var(--accent); }
.step h3 { font: 600 var(--step-1)/1.2 var(--font-text); letter-spacing: -.01em; }
.step p { color: var(--muted); font-size: var(--step--1); }
.step .eyebrow { margin-top: var(--space-2xs); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); } .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps--3 h3 { font: 600 var(--step-2)/1.1 var(--font-display); letter-spacing: -.035em; }
.steps--3 p { font-size: var(--step-0); max-width: 30ch; }

/* 6e. About */
.about { row-gap: var(--space-l); }
.about-photo { grid-column: 1 / 4; aspect-ratio: 3 / 4; max-width: 420px; }
.about-photo img { filter: grayscale(1) contrast(1.05); }
.about-body { grid-column: 1 / -1; display: grid; gap: var(--space-m); align-content: start; }
.about-body .lead { font: 500 var(--step-3)/1.12 var(--font-display); letter-spacing: -.035em; max-width: 24ch; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); border-top: 1px solid var(--line); padding-top: var(--space-m); margin-top: var(--space-s); }
.fact b { display: block; font: 600 var(--step-5)/1 var(--font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.fact > span { font: 500 var(--step--1)/1.3 var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 768px) {
  .about-photo { grid-column: 1 / 5; }
  .about-body { grid-column: 6 / -1; }
}

/* 6e2. Awards */
.award-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); margin-bottom: var(--space-xl); padding: 0; list-style: none; }
.award-highlights li { border-top: 1px solid var(--accent); padding-top: var(--space-s); display: grid; gap: .35rem; }
.award-highlights b { font: 600 var(--step-6)/1 var(--font-display); letter-spacing: -.05em; color: var(--accent); }
.award-highlights span { font-size: var(--step--1); color: var(--muted); }
@media (min-width: 768px) { .award-highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.award-list { border-bottom: 1px solid var(--line); }
.award {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: .25rem;
  padding-block: var(--space-s); border-top: 1px solid var(--line); align-items: baseline;
  transition: opacity var(--dur-fast) var(--ease);
}
.award-name { grid-column: 1 / -1; font: 500 var(--step-3)/1.1 var(--font-display); letter-spacing: -.035em; transition: transform var(--dur) var(--ease); }
.award-name em { color: var(--accent); }
.award-project, .award time { font: 500 var(--step--1)/1.4 var(--font-mono); color: var(--muted); }
.award-project { grid-column: 1 / 4; }
.award time { grid-column: 4 / -1; text-align: right; }
@media (min-width: 768px) {
  .award { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .award-name { grid-column: 1 / 8; }
  .award-project { grid-column: 8 / 11; }
  .award time { grid-column: 11 / -1; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .award-list:hover .award { opacity: .35; }
  .award-list .award:hover { opacity: 1; }
  .award:hover .award-name { transform: translateX(.35em); }
}
.work-preview--tall { width: clamp(200px, 17vw, 300px); aspect-ratio: 5 / 7; }

/* 6f. Contact */
.contact { text-align: left; }
.contact h2 { font: 600 var(--step-6)/.92 var(--font-display); letter-spacing: -.05em; max-width: 14ch; }
.contact h2 em { color: var(--accent); }
.contact-row { margin-top: var(--space-xl); row-gap: var(--space-l); align-items: end; }
.contact-mail { grid-column: 1 / -1; display: grid; gap: var(--space-s); }
.contact-mail > a { font: 500 var(--step-4)/1.1 var(--font-display); letter-spacing: -.04em; word-break: break-word; }
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.contact-meta { grid-column: 1 / -1; display: grid; gap: var(--space-xs); font-size: var(--step--1); color: var(--muted); }
.contact-meta a { color: var(--fg); }
@media (min-width: 768px) {
  .contact-mail { grid-column: 1 / 8; }
  .contact-meta { grid-column: 9 / -1; }
}

/* 6g. Footer */
main { position: relative; z-index: 1; background: var(--bg); }
.site-footer {
  --bg: var(--ink); --fg: var(--paper); --muted: #9a978f; --line: rgb(242 240 235 / .16); --accent: var(--red); --accent-fg: var(--ink);
  position: relative; z-index: 0; background: var(--bg); color: var(--fg); overflow: hidden;
  min-height: 100vh; min-height: 100svh; display: flex;
}
.site-footer.footer--reveal { position: sticky; bottom: 0; }
html.motion .site-footer { visibility: hidden; }
html.motion .site-footer.is-near, html.motion .site-footer:not(.footer--reveal).is-ready { visibility: visible; }
.footer-inner { display: flex; flex-direction: column; min-height: inherit; padding-block: calc(var(--header-h) + var(--space-m)) var(--space-s); }
.footer-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--col-gap); font-size: var(--step--1); }
.fcol { display: grid; gap: .35rem; align-content: start; justify-items: start; }
.fcol .eyebrow { margin-bottom: .35rem; }
.fcol a { padding-block: .1rem; }
.fcol--built { grid-column: 1 / -1; color: var(--muted); }
.fcol--built p { max-width: 40ch; }
.fcol--built b { color: var(--fg); font-weight: 500; }
.fcol--built .line-btn { color: var(--fg); margin-top: .25rem; }
@media (min-width: 768px) {
  .footer-top { grid-template-columns: 2fr 2fr 3fr; }
  .fcol--built { grid-column: auto; }
}

.wordmark {
  margin-top: auto; max-width: none; white-space: nowrap; overflow: hidden;
  font: 700 30vw/.8 var(--font-display); letter-spacing: -.065em; padding-top: .04em;
}
.wordmark .wm-c { display: inline-block; will-change: transform; }
.wordmark .wm-c:last-child { color: var(--red); }
.footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-m); margin-top: var(--space-s);
  font: 500 var(--step--1)/1.4 var(--font-mono); color: var(--muted);
}
.footer-base a { color: var(--fg); }

/* 6h. Loader, page curtain, ribbons, scroll titles, statement */

/* 7. Case pages */
.case-hero { padding-block: var(--space-xl) var(--space-l); }
.back { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-size: var(--step--1); font-weight: 500; }
.case-hero h1 { font: 600 var(--step-7)/.88 var(--font-display); letter-spacing: -.06em; margin-block: var(--space-l) var(--space-m); }
.case-hero .summary { font-size: var(--step-1); line-height: 1.4; max-width: 40ch; }
.case-meta { margin-top: var(--space-xl); border-top: 1px solid var(--line); padding-top: var(--space-m); row-gap: var(--space-m); }
.case-meta div { grid-column: span 2; display: grid; gap: .25rem; align-content: start; font-size: var(--step--1); }
.case-meta dt { font: 500 var(--step--1) var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 768px) { .case-meta div { grid-column: span 3; } }
.case-cover { aspect-ratio: 4 / 3; }

.case-block { padding-block: var(--space-xl); border-top: 1px solid var(--line); row-gap: var(--space-m); }
.case-block h2 { grid-column: 1 / -1; font: 600 var(--step-4)/1 var(--font-display); letter-spacing: -.04em; }
.case-block .body { grid-column: 1 / -1; display: grid; gap: var(--space-s); }
@media (min-width: 768px) {
  .case-block h2 { grid-column: 1 / 5; }
  .case-block .body { grid-column: 6 / -1; }
}
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--col-gap); }
.result { border-top: 1px solid var(--accent); padding-top: var(--space-s); display: grid; gap: .25rem; }
.result b { font: 600 var(--step-5)/1 var(--font-display); letter-spacing: -.045em; color: var(--accent); overflow-wrap: anywhere; }
.result span { font-size: var(--step--1); color: var(--muted); }
.walk { display: grid; gap: var(--space-l); padding-block: var(--space-xl); }
.walk figure { display: grid; gap: var(--space-xs); }
.walk figcaption { font: 500 var(--step--1)/1.4 var(--font-mono); color: var(--muted); }
@media (min-width: 768px) { .walk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); } .walk figure:first-child { grid-column: 1 / -1; } }
.next-case { display: block; padding-block: var(--space-xl); border-top: 1px solid var(--line); }
.next-case .eyebrow { display: block; margin-bottom: var(--space-s); }
.next-case b { display: block; font: 600 var(--step-7)/.88 var(--font-display); letter-spacing: -.06em; transition: transform var(--dur) var(--ease); }
.next-case:hover b { transform: translateX(.15em); }

.notfound { min-height: calc(100svh - var(--header-h)); display: grid; align-content: center; gap: var(--space-l); }
.notfound h1 { font: 600 var(--step-7)/.88 var(--font-display); letter-spacing: -.06em; }

/* 8. Motion */
html.motion [data-reveal] { visibility: hidden; }

html.motion [data-reveal="lines"] { visibility: visible; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 10. Utilities */
.muted { color: var(--muted); }
.accent { color: var(--accent); }

/* 11. Signature pieces */

/* 11a. Loader */
.pre-curtain, .preloader { position: fixed; inset: 0; will-change: transform; }
.pre-curtain { z-index: 900; background: var(--red); }
.preloader {
  z-index: 901; background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--gutter) * .75) var(--gutter) var(--gutter);
}
.preloader[hidden], .pre-curtain[hidden] { display: none; }
.pre-top { display: flex; justify-content: space-between; font: 500 var(--step--1)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.pre-top .pre-brand { font: 700 var(--step-1)/1 var(--font-display); text-transform: none; letter-spacing: -.04em; }
.pre-top .pre-brand i { color: var(--red); }
.pre-top .pre-meta { opacity: .6; }
.pre-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-m); }
.pre-count { display: flex; align-items: flex-end; font: 600 clamp(5.5rem, 22vw, 17rem)/1 var(--font-display); color: var(--red); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.pre-digit { display: block; height: 1em; overflow: hidden; }
.pre-strip { display: flex; flex-direction: column; transform: translateY(calc(var(--d, 0) * -1em)); transition: transform var(--t, .6s) cubic-bezier(.65, 0, .35, 1); }
.pre-strip span { display: block; height: 1em; line-height: 1em; text-align: center; }
.pre-percent { font-size: .22em; line-height: 1; margin-left: .12em; padding-bottom: .1em; }
.pre-word { font: italic clamp(2rem, 4.5vw, 4rem)/1 var(--font-serif); overflow: hidden; padding: 0 .1em .12em 0; }
.pre-word span { display: inline-block; transition: transform .45s cubic-bezier(.65, 0, .35, 1), opacity .45s; }
.pre-word span.is-out { transform: translateY(-110%); opacity: 0; }
.pre-word span.is-in { transform: translateY(110%); opacity: 0; transition: none; }
.pre-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; }
@media (max-width: 767px) { .pre-bottom { flex-direction: column-reverse; align-items: flex-start; } }

/* 11b. Page curtain */
.pt { position: fixed; inset: 0; z-index: 880; pointer-events: none; visibility: hidden; }
.pt-red, .pt-ink { position: absolute; inset: 0; transform: translateY(100%); will-change: transform; }
.pt-red { background: var(--red); }
.pt-ink { background: var(--ink); color: var(--paper); display: grid; place-items: center; padding: var(--gutter); }
.pt-label { font: 600 var(--step-6)/1 var(--font-display); letter-spacing: -.05em; text-align: center; overflow: hidden; padding-bottom: .1em; }
.pt-label span { display: inline-block; }
html.pt-arrive .pt { visibility: visible; }
html.pt-arrive .pt-red, html.pt-arrive .pt-ink { transform: none; }

/* 11c. WebGL ribbons */
.ribbon-thin {
  height: 40px; background: #1c1c1b; color: var(--paper); --mw-gap: 36px;
  font: 500 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.ribbon-brand { height: clamp(84px, 9vw, 112px); background: var(--red); color: var(--ink); --mw-gap: 34px; }
.ribbon-brand .lockup { font: 700 clamp(2rem, 3vw, 2.75rem)/1 var(--font-display); letter-spacing: -.05em; }
.ribbon-brand .pair { display: flex; flex-direction: column; font: 600 13px/16px var(--font-text); text-transform: uppercase; letter-spacing: .02em; }
.ribbon-brand .pair span { font-weight: 500; }

/* 11d. Scroll titles */
.scroll-title { overflow: hidden; padding-top: var(--space-xl); pointer-events: none; }
.scroll-title p {
  max-width: none; white-space: nowrap; font: 700 clamp(4.5rem, 13vw, 15rem)/.9 var(--font-display); letter-spacing: -.05em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px var(--fg); will-change: transform;
}
.scroll-title p b { font-weight: 400; font-style: normal; color: var(--accent); -webkit-text-stroke: 0; }

/* 11e. CODE / CRAFT statement */
.stmt {
  position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--red); color: var(--ink);
  padding: calc(var(--header-h) + clamp(1rem, 4vh, 3rem)) var(--gutter) clamp(1.5rem, 4vh, 3rem);
}
.stmt ::selection { background: var(--ink); color: var(--red); }
.stmt-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.stmt-inner { position: relative; z-index: 1; height: 100%; }
.stmt-words { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; pointer-events: none; white-space: nowrap; }
.stmt-word { font: 700 clamp(4.5rem, 17vw, 19rem)/.82 var(--font-display); letter-spacing: -.065em; text-transform: uppercase; will-change: transform; }
.stmt-word--top { align-self: flex-start; }
.stmt-word--bottom { align-self: flex-end; font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.03em; font-size: clamp(5.5rem, 21vw, 23rem); }
.stmt-title { margin: .4em auto; max-width: 20ch; font: 600 clamp(1.6rem, 3.4vw, 3.75rem)/1.02 var(--font-display); letter-spacing: -.045em; text-align: center; white-space: normal; pointer-events: auto; }
.stmt-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.stmt-w > span { display: inline-block; will-change: transform; }
.stmt-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-l); }
.stmt-note { max-width: 26rem; font-size: var(--step--1); opacity: .85; }
.stmt-curtain { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; pointer-events: none; }
.stmt-curtain i { flex: 1 1 0; display: block; margin-top: -1px; background: var(--bg); transform: scaleY(0); transform-origin: 50% 100%; will-change: transform; }
.stmt-curtain i:first-child { margin-top: 0; }
@media (max-width: 767px) {
  .stmt-word { font-size: 26vw; }
  .stmt-title { font-size: clamp(1.5rem, 7vw, 2.2rem); max-width: 16ch; }
  .stmt-foot { flex-direction: column; align-items: flex-start; gap: var(--space-s); }
}
html:not(.motion) .stmt { height: auto; padding-bottom: var(--space-xl); }
html:not(.motion) .stmt-curtain, html:not(.motion) .stmt-canvas { display: none; }
html:not(.motion) .stmt-words { position: static; transform: none; white-space: normal; }
html:not(.motion) .stmt-foot { position: static; margin-top: var(--space-l); }

/* 11f. Hover language */
.roll { display: inline-block; overflow: hidden; vertical-align: top; line-height: inherit; }
.roll__char { display: inline-block; text-shadow: 0 1lh currentColor; transition: transform .55s cubic-bezier(.7, 0, .2, 1); transition-delay: calc(var(--i) * 18ms); }
a:hover .roll__char, a:focus-visible .roll__char, button:hover .roll__char, button:focus-visible .roll__char { transform: translateY(-1lh); }
.line-btn {
  position: relative; display: inline-flex; align-items: center; gap: .9rem; min-height: 44px; padding: .55rem 0 .6rem;
  font: 600 .8rem/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: inherit;
}
.line-btn::before, .line-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: .35rem; height: 1px; background: currentColor; }
.line-btn::before { transform-origin: right; transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
.line-btn::after { transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.65, 0, .35, 1) .28s; }
.line-btn:hover::before, .line-btn:focus-visible::before { transform: scaleX(0); }
.line-btn:hover::after, .line-btn:focus-visible::after { transform: scaleX(1); }
.line-btn svg { width: .75rem; height: .75rem; flex: none; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.line-btn:hover svg { transform: translate(.2rem, -.2rem); }
@media (prefers-reduced-motion: reduce) { .roll__char, .pre-strip, .pre-word span { transition: none; } }

/* 11g. Marquee */
[data-marquee-warp] {
  position: relative;
  display: grid;

  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
}

[data-marquee-warp][data-mw-mirrored="true"] {
  overflow: visible;
}
[data-marquee-warp][data-mw-mirrored="true"] [data-mw-viewport] {
  visibility: hidden;
}

[data-marquee-warp][data-mw-tear="on"][data-mw-mirrored="true"] {
  background-color: transparent !important;
}

[data-mw-canvas] {
  position: absolute;
  left: 0;
  z-index: 10;
  pointer-events: none;
}

[data-mw-viewport] {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

[data-mw-track] {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  will-change: transform;
  animation-name: mw-slide;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes mw-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

[data-mw-half] {
  display: flex;
  flex: 0 0 auto;
}

[data-mw-unit] {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--mw-gap, 3rem);
  padding-right: var(--mw-gap, 3rem);
  white-space: nowrap;
}

[data-mw-item] {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  [data-mw-track] { animation: none; }
}

.sl-mask { padding-bottom: .14em; margin-bottom: -.14em; }

.hero { position: relative; }
.hero-lens { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

.strip { margin: 0 calc(-1 * var(--gutter)) var(--space-xl); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip-track { display: flex; gap: var(--col-gap); margin: 0; padding: 0 var(--gutter); list-style: none; width: max-content; }
.strip-card { flex: 0 0 78vw; scroll-snap-align: start; }
.strip-card a { display: block; transform-origin: 50% 50%; }
.strip-media { display: block; aspect-ratio: 7 / 5; border-radius: 4px; }
.strip-cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); margin-top: .75rem; font: 500 var(--step--1)/1.3 var(--font-mono); color: var(--muted); }
.strip-cap b { flex: 1; color: var(--fg); font: 600 var(--step-1)/1.1 var(--font-display); letter-spacing: -.035em; }
html.strip-3d .strip { overflow: hidden; scroll-snap-type: none; perspective: 1600px; perspective-origin: 50% 40%; }
html.strip-3d .strip-track { transform-style: preserve-3d; will-change: transform; }
html.strip-3d .strip-card { flex-basis: clamp(300px, 34vw, 560px); transform-style: preserve-3d; }
html.strip-3d .strip-card a { will-change: transform; }

.morph { position: fixed; z-index: 870; overflow: hidden; pointer-events: none; border-radius: 4px; }
.morph img { width: 100%; height: 100%; object-fit: cover; }

.work-name, .strip-cap b, .case-hero h1, .next-case b, .pt-label { text-transform: uppercase; }
.work-name { font-size: clamp(2rem, 1.2rem + 2.8vw, 4rem); letter-spacing: -.03em; }
.strip-cap b { letter-spacing: -.02em; }
.case-hero h1, .next-case b { letter-spacing: -.045em; }
.pt-label { letter-spacing: -.035em; }

.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; align-items: center; align-content: center; }
.tags li { display: inline-flex; align-items: center; min-height: 36px; padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; font: 500 var(--step--1)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.case-awards { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.case-awards li { display: flex; justify-content: space-between; gap: var(--space-s); padding-block: .85rem; border-top: 1px solid var(--line); font: 500 var(--step-1)/1.2 var(--font-display); letter-spacing: -.02em; }
.case-awards time { font: 500 var(--step--1)/1.6 var(--font-mono); color: var(--muted); white-space: nowrap; }
.walk .frame { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .walk--one { grid-template-columns: 1fr; } }

.roll-words { display: inline; }
.roll { white-space: nowrap; }
@media (min-width: 768px) { .walk--two figure:first-child { grid-column: auto; } }
.case-about { font-size: var(--step-1); line-height: 1.45; max-width: 46ch; }