/* Maaz Rao portfolio. Dark, editorial, with edit-suite details (timecode, crop marks, keyframes). */

/* Type: Satoshi + Instrument Serif Italic + Fragment Mono (data-font="satoshi"). Other sets are in _archive/. */
html[data-font="satoshi"] { /* same type family as the reference: Satoshi + Instrument Serif + Fragment Mono */
  --display: "Satoshi", system-ui, sans-serif; --display-weight: 500; --display-track: -.03em;
  --sans: "Satoshi", system-ui, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "Fragment Mono", ui-monospace, monospace;
}
html[data-font="satoshi"] h1, html[data-font="satoshi"] h2 { line-height: 1.02; }
html[data-font="satoshi"] .serif { font-weight: 400; font-variation-settings: normal; font-size: 1.08em; letter-spacing: -.02em; }
html[data-font="satoshi"] .wordmark span { font-weight: 700; }
html[data-font="satoshi"] h3 { font-weight: 500; }

/* Rust cyber: the v1 orange, oxidised, with a cyan second accent. Default since 2026-10-31. */
:root, [data-palette="rust"] {
  --bg: #0b0908;
  --bg-2: #141110;
  --bg-3: #1d1815;
  --line: #2c2420;
  --text: #efe6dc;
  --text-2: #cbbfb2;
  --muted: #8b7f74;
  --accent: #e2571e;
  --accent-hover: #ff6a2b;
  --accent-ink: #140600;
}
:root {
  --radius: 14px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --sans: "Inter Tight", system-ui, -apple-system, sans-serif;
  --display: "Inter Tight", system-ui, sans-serif;
  --display-weight: 600;
  --display-track: -.035em;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --serif: "Fraunces", "Times New Roman", serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
dialog { margin: auto; }
[hidden] { display: none !important; } /* keep pop-ups centred even before their own styles load */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
video, img { display: block; max-width: 100%; }

.accent { color: var(--accent); }
/* Mixed type: one phrase per headline drops out of the bold sans into a light italic serif */
.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-variation-settings: "opsz" 144;
  font-size: 1.06em;
  letter-spacing: -.025em;
  padding-right: .04em; /* italic overhang */
}
.wordmark .serif { font-weight: 400; font-size: 1.08em; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Scroll playhead + timecode */
.playhead { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; }
.playhead span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.timecode {
  position: fixed; left: var(--gutter); bottom: 18px; z-index: 40;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted);
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
}
.timecode span { color: var(--text); }

/* Nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px var(--gutter);
  background: linear-gradient(var(--bg), transparent);
  transition: background .3s;
}
.nav.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav nav { display: flex; gap: 28px; font-size: 15px; color: var(--muted); }
.nav nav a:hover { color: var(--text); }
.wordmark { display: inline-flex; align-items: baseline; gap: 10px; }
.wordmark span { font-weight: 700; letter-spacing: -.02em; font-size: 18px; }
.wordmark em { font-style: normal; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; font-size: 16px; letter-spacing: -.01em;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-ghost { border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--text); }

/* Layout */
main > section { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: clamp(96px, 14vw, 180px); }
.section-head { margin-bottom: 48px; }
.section-head.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-head .label { margin-bottom: 18px; }
h1, h2 { text-wrap: balance; font-family: var(--display); font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: .98; }
h3, .wordmark span, .post-title, .marquee-track span, .post-next a { font-family: var(--display); }
h1 { font-size: clamp(44px, 8.4vw, 124px); }
h2 { font-size: clamp(34px, 5vw, 68px); }
h2.big { font-size: clamp(44px, 8vw, 116px); }

/* Hero */
.hero { padding-top: clamp(130px, 18vw, 200px); }
.hero .label { margin-bottom: 28px; }
.lede { max-width: 560px; margin-top: 32px; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
/* Hero text centred */
.hero > .label, .hero > h1, .hero > .lede { text-align: center; }
.hero > .lede { margin-left: auto; margin-right: auto; }
.hero > .hero-ctas { justify-content: center; }

.reel { position: relative; margin-top: clamp(56px, 8vw, 96px); cursor: pointer; padding: 14px; }
.reel .media { aspect-ratio: 16 / 9; border-radius: var(--radius); }
.reel figcaption {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.reel .play { margin-left: auto; color: var(--text); }
.rec { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.crop { position: absolute; width: 18px; height: 18px; border: 0 solid var(--muted); }
.crop.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.crop.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.crop.bl { bottom: 30px; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.crop.br { bottom: 30px; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* Media blocks (video or placeholder) */
.media { position: relative; overflow: hidden; background: var(--bg-2); }
.media video, .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media video { opacity: 0; transition: opacity .4s; }
.media.playing video { opacity: 1; }
.placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
  background:
    radial-gradient(80% 120% at 85% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 59px, color-mix(in srgb, var(--text) 4%, transparent) 59px 60px),
    var(--bg-2);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted);
}
.placeholder b { display: block; color: var(--text); font-weight: 500; margin-bottom: 6px; }

/* Clients marquee */
.clients { margin-top: clamp(64px, 9vw, 112px); display: flex; align-items: center; gap: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.clients .label { flex: none; }
.marquee { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 32s linear infinite; }
.marquee-track span { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--text-2); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Work */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.chip {
  height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  transition: all .2s;
}
.chip:hover { color: var(--text); }
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }

.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px) clamp(16px, 2vw, 28px); }
.card { cursor: pointer; }
.card.featured { grid-column: 1 / -1; }
.card.hidden { display: none; }
.card .media { aspect-ratio: 16 / 9; border-radius: var(--radius); transition: border-radius .4s var(--ease); }
.card .media::after {
  content: "Play ▶"; position: absolute; right: 14px; bottom: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px); transition: all .3s var(--ease);
}
.card:hover .media::after { opacity: 1; transform: none; }
.card:hover .media { border-radius: 6px; }
.card-meta { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 16px; margin-top: 16px; }
.card-meta .num { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.card-meta h3 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.card-meta h3 small { display: block; font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.card-meta .tags { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: right; }
.card-meta .tags .type { color: var(--accent); }
.result { display: inline-block; margin-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--text); }
.result:hover { color: var(--accent); }

.show-all { display: none; margin: 32px auto 0; }
@media (max-width: 760px) { .show-all:not([hidden]) { display: flex; } }

/* Testimonials */
.carousel {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px;
  scrollbar-width: none; cursor: grab; user-select: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel.dragging { cursor: grabbing; scroll-snap-type: none; }
.quote {
  flex: 0 0 min(420px, 84vw); scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 280px;
  padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
}
.quote p { font-size: 20px; line-height: 1.4; letter-spacing: -.01em; }
.quote footer { display: flex; align-items: center; gap: 12px; }
.quote .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-3); display: grid; place-items: center; font-weight: 600; color: var(--muted); }
.quote footer span { display: block; font-size: 14px; color: var(--muted); }

/* Process: an edit timeline with keyframes */
.timeline { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; padding-top: 40px; }
.timeline::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 1px; background: var(--line); }
.timeline::after { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 1px; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.step { position: relative; }
.step::before {
  content: ""; position: absolute; top: -37px; left: 0; width: 11px; height: 11px;
  background: var(--bg); border: 1px solid var(--muted); transform: rotate(45deg); transition: all .4s;
  z-index: 1;
}
.step.lit::before { background: var(--accent); border-color: var(--accent); }
.step .label { display: block; margin-bottom: 16px; }
.step h3 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 16px; }

/* Offers */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.offer {
  position: relative; display: flex; flex-direction: column; gap: 22px;
  padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
}
.offer.featured { border-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), var(--bg-2) 45%); }
.offer .badge { position: absolute; top: 22px; right: 22px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.offer h3 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.offer .price { font-size: 18px; }
.offer ul { list-style: none; display: grid; gap: 10px; color: var(--muted); font-size: 15px; flex: 1; }
.offer li { padding-left: 22px; position: relative; }
.offer li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border: 1px solid var(--accent); transform: rotate(45deg); }
.offer .btn { justify-content: center; }

/* FAQ */
.faq { border-top: 1px solid var(--line); max-width: 920px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px;
  padding: 26px 0; font-size: clamp(19px, 2vw, 24px); font-weight: 500; letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-weight: 400; color: var(--muted); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq .answer { padding: 0 0 26px; color: var(--muted); max-width: 680px; }

/* Booking */
.book { padding-bottom: clamp(96px, 12vw, 160px); }
.book .label { margin-bottom: 24px; }
.book-meta { display: flex; flex-wrap: wrap; gap: 12px 48px; margin-top: 40px; }
.book-meta div span { display: block; }
.book-meta div span:last-child { font-size: 20px; font-weight: 500; margin-top: 4px; }

/* Footer */
.footer {
  max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 80px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start;
  border-top: 1px solid var(--line);
}
.footer .muted { margin-top: 10px; font-size: 15px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.footer-links a:hover { color: var(--accent); }

/* Blog list rows (homepage + blog index) */
.posts { border-top: 1px solid var(--line); }
.post-row {
  position: relative; display: grid; grid-template-columns: 48px 1fr 200px 32px; gap: 24px; align-items: baseline;
  padding: 32px 0; border-bottom: 1px solid var(--line);
}
.post-row::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.post-row:hover::before { transform: scaleX(1); }
.post-row .num { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.post-title { font-size: clamp(24px, 2.8vw, 36px); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.post-title small { display: block; margin-top: 10px; font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--muted); max-width: 620px; }
.post-meta { text-align: right; line-height: 1.8; }
.draft-tag { font-weight: 500; color: var(--cyber, var(--accent)); margin-right: 10px; }
.post-row .arrow { font-size: 22px; color: var(--muted); transition: transform .4s var(--ease), color .3s; }
.post-row:hover .arrow { transform: translateX(6px); color: var(--accent); }

/* Homepage blog list stays short: title + meta only, summaries live on the blog page */
#blog .post-title small { display: none; }

/* Lightbox */
.lightbox { margin: auto; border: 0; padding: 0; background: transparent; color: var(--text); width: min(1200px, 94vw); max-height: 94vh; }
.lightbox::backdrop { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); }
.lightbox video { width: 100%; max-height: 80vh; border-radius: 10px; background: #000; }
.lightbox-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lightbox-meta strong { color: var(--text); font-weight: 500; }
.lightbox .close { display: block; margin: 0 0 12px auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); }
.lightbox .close:hover { border-color: var(--text); }

/* Contact sheet ("Book a call" until there is a calendar link), contact.js */
.contact-sheet {
  margin: auto; width: min(520px, calc(100vw - 32px)); padding: 36px 32px 28px; position: relative;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line);
}
.contact-sheet::backdrop { background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); }
.contact-sheet h2 { font-size: clamp(36px, 6vw, 52px); margin: 12px 0 10px; }
.contact-sheet .muted { font-size: 16px; }
.contact-sheet .close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 1px solid var(--line); }
.contact-sheet .close:hover { border-color: var(--text); }
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.contact-actions .btn { justify-content: center; height: 48px; font-size: 15px; }
.contact-actions .btn-accent { grid-column: 1 / -1; }
.contact-email { margin-top: 18px; text-align: center; text-transform: none; letter-spacing: .04em; }
.contact-sheet .close:focus { outline: none; }
.contact-sheet .close:focus-visible, .contact-actions .btn:focus-visible { outline: 1px solid var(--text-2); outline-offset: 3px; }
@media (max-width: 760px) {
  .contact-sheet { padding: 30px 20px 22px; }
  .contact-actions .btn { padding: 0 10px; font-size: 14px; white-space: nowrap; }
}

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 70;
  background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  transition: all .3s var(--ease); pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Blur reveal. Blocks come out of a blur as they scroll in; headlines un-blur word by word (fx.js). */
.reveal {
  opacity: 0; transform: translateY(28px); filter: blur(10px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter 1s var(--ease);
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }

.words .w {
  display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(.35em);
  transition: opacity .8s var(--ease), filter 1s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.words.in .w { opacity: 1; filter: blur(0); transform: none; }
.words .w.accent { padding-bottom: .14em; margin-bottom: -.14em; } /* descenders under background-clip */
.words .w.scan { opacity: 1; filter: none; transform: none; } /* has its own newspaper unfold */

/* Where the browser supports it, the block blur is tied to the scroll itself: it sharpens as you swipe
   and blurs again if you scroll back. Elsewhere the .in transition above plays once. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section .reveal:not(.scan), .blog-list .reveal, .prose > * {
      opacity: 1; transform: none; filter: none; transition: none;
      animation: blur-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
    .prose > * { --blur: 6px; animation-range: entry 0% entry 100%; }
  }
}
@keyframes blur-in {
  from { opacity: 0; filter: blur(var(--blur, 12px)); transform: translateY(40px) scale(.98); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* Rust cyber layer: grain, scanlines, cut corners, scan reveal. Only on data-palette="rust". */
[data-palette="rust"] {
  --cyber: #3ef0e6;
  --rust-grad: linear-gradient(100deg, #ff8a3d 0%, #e2571e 42%, #9c3812 100%);
  --cut: 12px;
}
[data-palette="rust"] body {
  background:
    radial-gradient(900px 520px at 88% -8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%),
    radial-gradient(700px 420px at -10% 110%, color-mix(in srgb, var(--cyber) 6%, transparent), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}
[data-palette="rust"] body::before,
[data-palette="rust"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; }
[data-palette="rust"] body::before { /* film grain */
  opacity: .09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .75 0 0 0 0 .6 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-palette="rust"] body::after { /* scanlines */
  opacity: .2;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
}

/* Rust gradient type */
[data-palette="rust"] .accent { background: var(--rust-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Newspaper unfold on the hero phrases (.scan; fx.js copies the text into data-text). The phrase is drawn twice:
   the top half (::before) settles in, then the bottom half (::after) swings open from behind along a crease,
   catching the light as it turns, with a small paper bounce. A faint crease line stays across the letters,
   and a soft sheen passes over every 7 s. Replaced the scan-line write-on 2026-10-31. */
.scan { position: relative; display: inline-block; padding-bottom: .14em; margin-bottom: -.14em; white-space: nowrap; } /* room for descenders under background-clip */
.scan.reveal { opacity: 1; transform: none; } /* the unfold is the reveal */
[data-palette="rust"] .scan { --crease: 46%; background: none; color: transparent; -webkit-text-fill-color: transparent; }
[data-palette="rust"] .scan::before,
[data-palette="rust"] .scan::after {
  content: attr(data-text); position: absolute; inset: 0; white-space: nowrap; pointer-events: none;
  background-image:
    linear-gradient(to bottom, transparent calc(var(--crease) - 1px), rgba(0, 0, 0, .45) calc(var(--crease) - 1px),
      rgba(0, 0, 0, .45) var(--crease), rgba(255, 255, 255, .28) var(--crease), rgba(255, 255, 255, .28) calc(var(--crease) + 1px), transparent calc(var(--crease) + 1px)),
    linear-gradient(105deg, transparent 42%, var(--sheen, rgba(255, 228, 204, .95)) 50%, transparent 58%),
    var(--rust-grad);
  background-repeat: no-repeat;
  background-size: 100% 100%, 250% 100%, 100% 100%;
  background-position: 0 0, 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
[data-palette="rust"] .scan::before { clip-path: inset(0 -10% calc(100% - var(--crease)) -10%); opacity: 0; }
[data-palette="rust"] .scan::after {
  clip-path: inset(var(--crease) -10% 0 -10%);
  transform-origin: 50% var(--crease); transform: perspective(900px) rotateX(-180deg);
}
[data-palette="rust"] .scan.in::before { animation: fold-top .4s .25s ease-out both, sheen 7s 2.8s ease-in-out infinite; }
[data-palette="rust"] .scan.in::after { animation: unfold 1.4s .5s ease-out both, sheen 7s 2.8s ease-in-out infinite; }
@keyframes fold-top {
  from { opacity: 0; transform: translateY(-.06em); }
  to { opacity: 1; transform: none; }
}
@keyframes unfold {
  0% { transform: perspective(900px) rotateX(-180deg); filter: brightness(.35); animation-timing-function: cubic-bezier(.45, .05, .35, 1); }
  55% { transform: perspective(900px) rotateX(14deg); filter: brightness(1.2); }
  76% { transform: perspective(900px) rotateX(-5deg); filter: brightness(.95); }
  100% { transform: perspective(900px) rotateX(0deg); filter: brightness(1); }
}
@keyframes sheen {
  0% { background-position: 0 0, 160% 0, 0 0; }
  22%, 100% { background-position: 0 0, -60% 0, 0 0; }
}

/* Cut corners instead of pills and round boxes */
[data-palette="rust"] .btn,
[data-palette="rust"] .chip {
  border-radius: 0; border: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
[data-palette="rust"] .btn-sm, [data-palette="rust"] .chip { --cut: 8px; }
[data-palette="rust"] .btn-accent { background: var(--rust-grad); }
[data-palette="rust"] .btn-accent:hover { background: var(--rust-grad); filter: brightness(1.15) saturate(1.1); }
[data-palette="rust"] .btn-ghost { background: var(--bg-3); }
[data-palette="rust"] .btn-ghost:hover { background: var(--line); color: var(--cyber); }
[data-palette="rust"] .chip { background: var(--bg-2); }
[data-palette="rust"] .chip.on { background: var(--accent); color: var(--accent-ink); }
[data-palette="rust"] .card .media,
[data-palette="rust"] .reel .media {
  border-radius: 0;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
[data-palette="rust"] .card:hover .media { border-radius: 0; filter: saturate(1.15) contrast(1.05); }
[data-palette="rust"] .card .media::after { border-radius: 0; color: var(--cyber); content: "▶ Play"; }
[data-palette="rust"] .quote,
[data-palette="rust"] .offer { border-radius: 2px; }
[data-palette="rust"] .offer.featured { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: inset 0 2px 0 var(--accent), 0 0 60px -20px color-mix(in srgb, var(--accent) 50%, transparent); }
[data-palette="rust"] .lightbox video { border-radius: 0; }
[data-palette="rust"] .lightbox .close { border-radius: 0; }

/* HUD details in cyan */
[data-palette="rust"] .section-head .label:not(.hint)::before,
[data-palette="rust"] .book > .label::before { content: "// "; color: var(--accent); }
[data-palette="rust"] .crop { border-color: var(--cyber); }
[data-palette="rust"] .rec { background: var(--cyber); box-shadow: 0 0 10px var(--cyber); }
[data-palette="rust"] .timecode { border-color: color-mix(in srgb, var(--cyber) 35%, transparent); border-radius: 0; }
[data-palette="rust"] .timecode span { color: var(--cyber); text-shadow: 0 0 8px color-mix(in srgb, var(--cyber) 60%, transparent); }
[data-palette="rust"] .playhead span { background: var(--rust-grad); box-shadow: 0 0 12px var(--accent); }
[data-palette="rust"] .step.lit::before { box-shadow: 0 0 12px var(--accent); }
[data-palette="rust"] .faq details[open] summary::after { color: var(--cyber); }
[data-palette="rust"] .nav.scrolled { border-bottom-color: color-mix(in srgb, var(--accent) 25%, var(--line)); }
[data-palette="rust"] .placeholder {
  background:
    radial-gradient(80% 120% at 85% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 59px, color-mix(in srgb, var(--cyber) 6%, transparent) 59px 60px),
    repeating-linear-gradient(0deg, transparent 0 59px, color-mix(in srgb, var(--cyber) 4%, transparent) 59px 60px),
    var(--bg-2);
}

/* Colour set: mono (chosen 2026-10-31). Sits on top of the rust style layer (cut corners, scan, grain).
   The other 15 sets are in _archive/styles-all-options-2026-10-31.css. */
html[data-colors="mono"] {
  --bg: #080808; --bg-2: #101010; --bg-3: #181818; --line: #262626;
  --text: #f4f4f4; --text-2: #cfcfcf; --muted: #7d7d7d;
  --accent: #f4f4f4; --accent-hover: #ffffff; --accent-ink: #080808;
  --rust-grad: linear-gradient(100deg, #ffffff 0%, #d6d6d6 50%, #8a8a8a 100%);
  --cyber: #ff3b30; --sheen: rgba(255, 255, 255, .95);
}

/* Archive layer: aged mono tones, film grain, dust and scratches, catalogue details, films in black and white
   until hovered. On with <html data-archive>, preview without it via ?archive=off. Added 2026-10-31. */
html[data-archive] {
  --bg: #0b0a08; --bg-2: #13110e; --bg-3: #1b1814; --line: #29251f;
  --text: #ece5d8; --text-2: #c9c0b0; --muted: #857c6e;
  --accent: #ece5d8; --accent-hover: #fff7ea; --accent-ink: #0b0a08;
  --rust-grad: linear-gradient(100deg, #f7f0e3 0%, #cfc4b0 50%, #8a7f6c 100%);
  --cyber: #c8352b; --sheen: rgba(255, 248, 230, .95);
}
html[data-archive] body::before { opacity: .14; }
html[data-archive] body::after { /* vignette instead of scanlines */
  opacity: 1; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
.dust { display: none; }
html[data-archive] .dust {
  display: block; position: fixed; inset: 0; z-index: 91; pointer-events: none; opacity: .22; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='640'><circle cx='42' cy='88' r='1.2' fill='%23f0e8d8' opacity='0.7'/><circle cx='130' cy='410' r='0.8' fill='%23f0e8d8' opacity='0.6'/><circle cx='220' cy='160' r='1.6' fill='%23f0e8d8' opacity='0.5'/><circle cx='300' cy='520' r='0.9' fill='%23f0e8d8' opacity='0.7'/><circle cx='388' cy='72' r='1.1' fill='%23f0e8d8' opacity='0.5'/><circle cx='455' cy='300' r='0.7' fill='%23f0e8d8' opacity='0.8'/><circle cx='512' cy='590' r='1.4' fill='%23f0e8d8' opacity='0.5'/><circle cx='600' cy='220' r='0.9' fill='%23f0e8d8' opacity='0.6'/><circle cx='75' cy='600' r='0.6' fill='%23f0e8d8' opacity='0.7'/><circle cx='250' cy='330' r='0.5' fill='%23f0e8d8' opacity='0.8'/><circle cx='350' cy='250' r='1.9' fill='%23f0e8d8' opacity='0.3'/><circle cx='560' cy='40' r='0.6' fill='%23f0e8d8' opacity='0.7'/><circle cx='170' cy='30' r='0.7' fill='%23f0e8d8' opacity='0.6'/><circle cx='480' cy='450' r='1.2' fill='%23f0e8d8' opacity='0.4'/><circle cx='20' cy='330' r='0.8' fill='%23f0e8d8' opacity='0.6'/><circle cx='610' cy='480' r='0.5' fill='%23f0e8d8' opacity='0.8'/><path d='M210 0 L212 640' stroke='%23f0e8d8' stroke-width='.6' opacity='.35'/><path d='M498 0 Q 500 320 497 640' stroke='%23f0e8d8' stroke-width='.4' opacity='.25'/><path d='M120 380 q 12 -6 22 2' stroke='%23f0e8d8' stroke-width='.7' fill='none' opacity='.5'/></svg>");
  animation: dust .9s steps(1) infinite;
}
@keyframes dust {
  0% { background-position: 0 0; opacity: .22; }
  20% { background-position: -173px 241px; opacity: .16; }
  40% { background-position: 311px -97px; opacity: .25; }
  60% { background-position: -59px -388px; opacity: .14; }
  80% { background-position: 227px 133px; opacity: .2; }
}

/* Films in black and white with a touch of sepia, full colour on hover */
html[data-archive] .card .media video, html[data-archive] .card .media img,
html[data-archive] .reel .media video, html[data-archive] .reel .media img {
  filter: grayscale(1) sepia(.22) contrast(1.08) brightness(.95); transition: filter .7s var(--ease), opacity .4s;
}
html[data-archive] .card:hover .media video, html[data-archive] .card:hover .media img,
html[data-archive] .reel:hover .media video, html[data-archive] .reel:hover .media img { filter: none; }

/* Reel: film perforations on both edges and an ink stamp */
html[data-archive] .reel .media::before, html[data-archive] .reel .media::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 9px; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(236, 229, 216, .2) 9px 17px);
}
html[data-archive] .reel .media::before { left: 12px; }
html[data-archive] .reel .media::after { right: 12px; }
.stamp { display: none; }
html[data-archive] .stamp {
  display: block; position: absolute; z-index: 3; top: clamp(28px, 5vw, 56px); right: clamp(30px, 6vw, 72px); transform: rotate(-7deg);
  padding: 8px 14px; border: 2px solid var(--cyber); color: var(--cyber);
  font-family: var(--mono); font-size: clamp(10px, 1.1vw, 13px); line-height: 1.35; letter-spacing: .14em; text-transform: uppercase; text-align: center;
  opacity: .85; mix-blend-mode: screen; pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.2 1.9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.2 1.9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Archive labels: "File 01 · Selected work", catalogue numbers on cards */
html[data-archive] .section-head .label:not(.hint)::before,
html[data-archive] .book > .label::before { content: "File "; color: var(--muted); }
html[data-archive] .card-meta .num { color: var(--text-2); }

/* Responsive */
@media (max-width: 960px) {
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
  .timeline::before, .timeline::after { display: none; }
  .step::before { top: -24px; }
  .offers { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav nav { display: none; }
  .wordmark em { display: none; }
  .work-grid { grid-template-columns: 1fr; }
  .work-grid:not(.expanded) .card:nth-child(n+7) { display: none; }
  .card-meta { grid-template-columns: auto 1fr; }
  .card-meta .tags { grid-column: 2; text-align: left; }
  .clients { flex-direction: column; align-items: flex-start; gap: 14px; }
  .marquee { width: 100%; }
  .section-head.row { flex-direction: column; align-items: flex-start; }
  .timeline { grid-template-columns: 1fr; }
  .post-row { grid-template-columns: 32px 1fr; gap: 12px 16px; padding: 26px 0; }
  .post-meta { grid-column: 2; text-align: left; }
  .post-row .arrow { display: none; }
  .reel { padding: 10px; }
  .timecode { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .words .w { opacity: 1; transform: none; filter: none; transition: none; }
  .marquee-track, .rec, .scan::before, .scan::after, .dust { animation: none !important; }
  [data-palette="rust"] .scan::before { opacity: 1; }
  [data-palette="rust"] .scan::after { transform: none; filter: none; }
}