/* Night Convocation: the shared visual layer, loaded last on every page.
   Night and gown for the hero, showcases, transitions and footer; parchment under reading;
   one accent, the sash gold, used as a hairline that draws in reading direction. */

*, *::before, *::after { box-sizing: border-box; }
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit/Outfit-VariableFont_wght.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif/InstrumentSerif-normal-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif/InstrumentSerif-italic-400-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Aref Ruqaa"; src: url("../fonts/ArefRuqaa/ArefRuqaa-normal-400-arabic.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "Aref Ruqaa"; src: url("../fonts/ArefRuqaa/ArefRuqaa-normal-700-arabic.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }

:root {
  --night: #1b140e; /* walnut: the one dark, warm like the doors on the projects page */
  --gown: #271c14;
  --gown-2: #32251b;
  --gold: #f4812a;
  --gold-deep: #b8460b;
  --gold-soft: rgba(244, 129, 42, .16);
  --orange: var(--gold);
  --orange-deep: var(--gold-deep);
  --wall: #ffeedd;
  --peach-200: #ffd9bd;
  --parchment: #ffeedd; /* one light everywhere: the peach wall (white paper only for raised things) */
  --parchment-bright: #fffaf5;
  --ink: #191d1d;
  --ink-soft: #5b5850;
  --stone: #a49d90;
  --on-night: #f2ece0;
  --rule: rgba(25, 29, 29, .14);
  --rule-night: rgba(242, 236, 224, .14);

  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Outfit", system-ui, sans-serif;
  --font-arabic: "Aref Ruqaa", "Noto Naskh Arabic", serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --page: min(1280px, calc(100vw - 64px));
  --gutter: max(32px, calc((100vw - 1280px) / 2));
  --radius: 4px;
  --nav-h: 68px;

  /* Legacy tokens, re-pointed so every existing component wears the new palette. */
  --paper: var(--parchment);
  --paper-bright: var(--parchment-bright);
  --muted: var(--ink-soft);
  --line: var(--rule);
  --rust: var(--gold-deep);
  --rust-dark: var(--gown);
  --amber: var(--gold);
  --midnight: var(--night);
  --acid: var(--gold);
  --font-primary: var(--font-body);
  --special-accent: var(--gold-deep);
  --accent-text: var(--ink-soft);
  --accent-main: var(--ink);
  --text-dark: var(--ink);
  color-scheme: light;
}

html { scroll-behavior: auto; scrollbar-color: color-mix(in srgb, var(--ink) 34%, transparent) transparent; }
body.portfolio-v2, body.site { background: var(--parchment); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { color: var(--night); background: var(--gold); }
:where([data-surface="dark"]) ::selection { color: var(--night); background: var(--gold); }
.portfolio-v2 :where(a, button, input, summary, [tabindex]):focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; }
:where([data-surface="dark"]) :where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--gold); }
.skip-link { position: fixed; top: 10px; left: 12px; z-index: 9999; padding: 10px 16px; background: var(--night); color: var(--on-night); border-radius: 999px; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: none; outline: 2px solid var(--gold); outline-offset: 2px; }
body.site { margin: 0; overflow-x: clip; }
:where(body.site) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(body.site) :where(ul, ol) { padding: 0; }
img, video { max-width: 100%; }
code { letter-spacing: 0; }
[lang="ar"] { font-family: var(--font-arabic); }

/* ── Display type: Instrument Serif replaces the old condensed display everywhere. ── */
.portfolio-v2 :is(.case-v2-title, .case-section-head h2, .page-hero-v2 h1, .collection-heading h2, .project-card-v2 h3,
  .concept-panel h3, .statement-band h2, .section-intro h2, .process-heading h2, .credentials-section h2, .footer-main h2,
  .flagship-copy h3, .system-card h3, .applied-card h3, .error-v2-main h1, .case-title) {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -.012em; line-height: 1; text-wrap: balance;
}
.portfolio-v2 .case-section-head h2 { font-size: clamp(2.5rem, 4.6vw, 4.4rem); line-height: 1.02; }
.portfolio-v2 .concept-panel h3 { font-size: 2.1rem; }

/* No eyebrows: the labels the old system printed above headings become quiet sentence-case notes. */
.portfolio-v2 :is(.section-index, .card-kicker, .project-discipline, .case-step b, .credential-list span, .case-stat-grid span,
  .case-next-v2 small, .card-meta, .case-v2-visual-label, .case-toc-v2 a, .project-card-v2 .card-no) {
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
.portfolio-v2 .case-section-head > div > p:first-child { display: none; }

/* ── Navigation ─────────────────────────────────────────────────────────────── */
.site-nav { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--gutter); color: var(--ink); background: color-mix(in srgb, var(--parchment) 82%, transparent);
  border-bottom: 1px solid transparent; transition: color .4s var(--ease-out), background-color .4s var(--ease-out), border-color .4s var(--ease-out), transform .45s var(--ease-out); }
.site-nav.is-scrolled { border-bottom-color: var(--rule); backdrop-filter: blur(14px) saturate(1.1); }
.site-nav.is-night { color: var(--on-night); background: color-mix(in srgb, var(--night) 72%, transparent); }
.site-nav.is-night.is-scrolled { border-bottom-color: var(--rule-night); }
.site-nav.is-hidden { transform: translateY(-100%); }
/* Chapter bars stick just under the nav, and slide up with it when it steps away while reading. */
:root { --sticky-top: var(--nav-h); }
html.nav-away { --sticky-top: 0px; }
body.site :is(.case-chapters, .moa-chapters, .case-toc-v2, .ir-toc) { top: var(--sticky-top); transition: top .45s var(--ease-out); }
.site-mark { display: inline-flex; align-items: baseline; gap: 12px; color: inherit; text-decoration: none; white-space: nowrap; }
.site-mark-latin { font: 400 1.55rem/1 var(--font-display); letter-spacing: -.01em; }
.site-mark-arabic { font: 400 1.05rem/1 var(--font-arabic); color: var(--gold-deep); transform: translateY(-1px); }
.site-nav.is-night .site-mark-arabic { color: var(--gold); }
.site-nav ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-nav ul a { position: relative; display: inline-block; padding: 10px 12px; color: inherit; text-decoration: none; font-size: .9rem; font-weight: 500; }
.site-nav ul a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.site-nav ul a:hover::after, .site-nav ul a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav ul a[aria-current="page"]::after { background: var(--gold-deep); }
.site-nav.is-night ul a[aria-current="page"]::after { background: var(--gold); }
.site-nav ul .nav-ext { opacity: .72; }
.site-nav-toggle { display: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; color: inherit; background: none; cursor: pointer; }
.site-nav-toggle i { display: block; width: 22px; height: 1.5px; margin: 6px auto; background: currentColor; transition: transform .35s var(--ease-out); }
.site-nav.is-open .site-nav-toggle i:first-of-type { transform: translateY(3.75px) rotate(45deg); }
.site-nav.is-open .site-nav-toggle i:last-of-type { transform: translateY(-3.75px) rotate(-45deg); }

/* ── Buttons and links ──────────────────────────────────────────────────────── */
.btn { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px; border: 1px solid currentColor; border-radius: 999px;
  color: inherit; background: transparent; font: 500 .95rem/1 var(--font-body); text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out); }
.btn:hover::before { transform: scaleX(1); }
.btn:hover { color: var(--parchment); border-color: var(--ink); }
.btn:active { transform: translateY(.5px); }
.btn-solid { color: var(--ink); background: var(--orange); border-color: var(--orange); }
.btn-solid::before { background: var(--ink); }
.btn-solid:hover { color: var(--parchment-bright); border-color: var(--ink); }
[data-surface="dark"] .btn:hover { color: var(--night); border-color: var(--gold); }
[data-surface="dark"] .btn::before { background: var(--gold); }
[data-surface="dark"] .btn-solid { color: var(--night); background: var(--on-night); border-color: var(--on-night); }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .45s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* A link whose underline is a gold hairline drawn from the start of the line. */
.link-draw { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat,
  linear-gradient(var(--gold-deep), var(--gold-deep)) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .55s var(--ease-out), color .3s; }
.link-draw:hover { background-size: 100% 1px, 100% 1px; color: var(--gold-deep); }
[data-surface="dark"] .link-draw { background-image: linear-gradient(color-mix(in srgb, currentColor 40%, transparent), color-mix(in srgb, currentColor 40%, transparent)), linear-gradient(var(--gold), var(--gold)); }
[data-surface="dark"] .link-draw:hover { color: var(--gold); }
.prose a:not(.btn) { color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--gold-deep) 60%, transparent); transition: text-decoration-color .3s, color .3s; }
.prose a:not(.btn):hover { color: var(--gold-deep); text-decoration-color: var(--gold-deep); }

/* The signature device: a gold hairline that draws in reading direction. */
.hairline { display: block; height: 1px; background: var(--gold-deep); transform-origin: left center; }
[data-surface="dark"] .hairline, .hairline.on-night { background: var(--gold); }
[dir="rtl"] .hairline { transform-origin: right center; }

/* ── Night surfaces ─────────────────────────────────────────────────────────── */
[data-surface="dark"] { color: var(--on-night); background: var(--night); color-scheme: dark; }
[data-surface="dark"] .muted, [data-surface="dark"] .prose p { color: var(--stone); }
/* The wall: peach, light, where the owner's orange lives. Re-scoping the night tokens here lets every component
   that was written for the dark surface read correctly on it without being rewritten. */
[data-surface="wall"] { --night: var(--wall); --on-night: var(--ink); --stone: var(--ink-soft); --rule-night: var(--rule); --gold: var(--orange-deep); --gown: var(--peach-200);
  color: var(--ink); background: var(--wall); color-scheme: light; }
[data-surface="wall"] .btn:hover { color: var(--parchment-bright); }
[data-surface="wall"] .btn-solid { color: var(--ink); background: var(--orange); border-color: var(--orange); }
[data-surface="wall"] .btn-solid::before { background: var(--ink); }
[data-surface="wall"] .btn-solid:hover { color: var(--parchment-bright); border-color: var(--ink); }
[data-surface="wall"] .hairline { background: var(--orange-deep); }

/* ── Shared case-study header ───────────────────────────────────────────────── */
.case-head { position: relative; padding: calc(var(--nav-h) + clamp(48px, 9vh, 104px)) var(--gutter) clamp(56px, 8vw, 104px); overflow: clip; }
.case-head-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: end; max-width: 1280px; margin: 0 auto; }
.case-back { display: inline-flex; align-items: center; gap: 10px; margin-bottom: clamp(28px, 5vh, 56px); color: var(--stone); text-decoration: none; font-size: .88rem; }
.case-back svg { width: 15px; height: 15px; transition: transform .45s var(--ease-out); }
.case-back:hover { color: var(--on-night); }
.case-back:hover svg { transform: translateX(-3px); }
.case-head-grid > div:first-child { container-type: inline-size; }
.case-head-title { margin: 0; font: 400 clamp(3rem, 16.5cqi, 7.6rem)/.92 var(--font-display); letter-spacing: -.025em; text-wrap: balance; color: var(--on-night); }
.case-head-title em { font-style: italic; color: var(--gold); }
.case-head-lede { max-width: 34em; margin: 28px 0 0; color: var(--stone); font-size: clamp(1.04rem, 1.35vw, 1.2rem); line-height: 1.65; font-weight: 350; }
.case-head .hairline { width: 100%; max-width: 420px; margin: 34px 0 0; }
.case-head-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 28px; max-width: 34em; margin: 26px 0 0; }
.case-head-meta div { min-width: 0; }
.case-head-meta dt { color: var(--stone); font-size: .78rem; }
.case-head-meta dd { margin: 4px 0 0; color: var(--on-night); font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.case-head-meta a { color: inherit; }
.case-head-plate { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--gown); box-shadow: 0 40px 80px -34px rgba(25, 29, 29, .45), 0 0 0 1px var(--rule); }
.case-head-plate img, .case-head-plate video { display: block; width: 100%; height: auto; }
.case-head-plate figcaption { position: absolute; inset: auto 0 0 0; padding: 40px 18px 14px; color: #f2ece0; font-size: .8rem; background: linear-gradient(transparent, rgba(14,15,18,.86)); }

.case-head-title .name-play { color: var(--gold); }
.case-head-plate.is-tall { justify-self: end; width: min(100%, 320px); }
.case-head-plate-visual { background: none; box-shadow: none; overflow: visible; }
.case-head-plate-visual > .case-v2-visual { margin: 0; box-shadow: 0 40px 80px -34px rgba(25, 29, 29, .45), 0 0 0 1px var(--rule); }

/* Chapter bar under a case-study header. */
.case-chapters { position: sticky; top: 0; z-index: 30; display: flex; gap: 4px; overflow-x: auto; padding: 10px var(--gutter); background: color-mix(in srgb, var(--parchment) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); scrollbar-width: none; }
.case-chapters::-webkit-scrollbar { display: none; }
.case-chapters a { flex: 0 0 auto; padding: 8px 12px; color: var(--ink-soft); text-decoration: none; font-size: .85rem; border-radius: 999px; transition: color .3s, background-color .3s; }
.case-chapters a:hover { color: var(--ink); background: rgba(25,29,29,.06); }
.case-chapters a.is-current { color: var(--ink); background: rgba(244,129,42,.18); }

/* Numbered section labels from the older case studies: the headings carry themselves. */
.portfolio-v2 :is(.eyebrow, .pv-eyebrow, .zk-eyebrow, .ir-eyebrow) { display: none; }

/* Older case studies keep their own accents, deepened in the same hue to meet WCAG AA on parchment and paper. */
.portfolio-v2 { --accent-secondary: var(--ink-soft); }
.ir-page { --ir-amber: #9a4f22; }
.mace-page { --case-accent: #1a6f7c; }
.mw-page { --mw-coral: #9b3e28; --mw-muted: #535d5a; --mw-green: #23624c; }
.pv-page { --pv-coral: #9b3e28; --pv-muted: #545f61; --pv-teal: #1d615e; }
.zk-page { --zk-gold: #8a5e14; --zk-muted: #545f5e; --zk-teal: #1d615e; }
.pdf-bypass > div:nth-child(1) b { color: #a03a2e; }
.pdf-bypass > div:nth-child(2) b { color: #7a5410; }
.pdf-bypass > div:nth-child(3) b { color: #1f6b55; }

/* Long equations scroll inside their own box on narrow screens instead of widening the page. */
.portfolio-v2 .katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }

/* Case body on parchment. */
.case-page-v2 .case-v2-body, .case-body { color: var(--ink); }
.case-toc-v2 { top: var(--nav-h); background: color-mix(in srgb, var(--parchment) 90%, transparent); }
.case-toc-v2 a { border-radius: 999px; }
.case-toc-v2 a:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
.portfolio-v2 .concept-panel { background: var(--night); border-radius: var(--radius); }
.portfolio-v2 :is(.case-step, .artifact-card-v2, .case-next-v2 a) { border-radius: var(--radius); }
.portfolio-v2 :is(.case-v2-visual, .flagship-visual, .project-card-v2, .applied-card, .system-card, .system-visual) { border-radius: var(--radius); }

/* Next / previous project. */
.case-pager { display: grid; grid-template-columns: 1fr 1fr; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter) clamp(72px, 10vw, 120px); gap: 0; }
.case-pager a { display: flex; flex-direction: column; gap: 10px; padding: 34px 0; color: var(--ink); text-decoration: none; border-top: 1px solid var(--rule); }
.case-pager a + a { align-items: flex-end; text-align: right; border-left: 1px solid var(--rule); padding-left: 24px; }
.case-pager small { color: var(--ink-soft); font-size: .85rem; }
.case-pager strong { font: 400 clamp(2rem, 4vw, 3.4rem)/1 var(--font-display); letter-spacing: -.015em; transition: color .3s; }
.case-pager a:hover strong { color: var(--gold-deep); }

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.site-foot { padding: clamp(80px, 12vw, 150px) var(--gutter) 28px; color: var(--on-night); background: var(--night); border-top: 1px solid var(--rule); }
.site-foot-inner { max-width: 1280px; margin: 0 auto; }
.site-foot-line { margin: 0; max-width: 14em; font: 400 clamp(2.8rem, 7vw, 6.4rem)/.98 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.site-foot-line em { color: var(--gold); }
.site-foot-mail { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(40px, 6vw, 64px); padding: 22px 0; color: var(--on-night); text-decoration: none;
  font-size: clamp(1rem, 2.2vw, 1.6rem); border-top: 1px solid var(--rule-night); border-bottom: 1px solid var(--rule-night); position: relative; overflow-wrap: anywhere; }
.site-foot-mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.site-foot-mail:hover::after, .site-foot-mail:focus-visible::after { transform: scaleX(1); }
.site-foot-mail svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--gold); transition: transform .5s var(--ease-out); }
.site-foot-mail:hover svg { transform: translate(3px, -3px); }
.site-foot-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px 32px; margin-top: 56px; color: var(--stone); font-size: .86rem; }
.site-foot-row nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-foot-row a { color: var(--stone); text-decoration: none; }
.site-foot-row a:hover { color: var(--on-night); }
.site-foot-name { display: inline-flex; align-items: baseline; gap: 12px; color: var(--on-night); }
.site-foot-name span:first-child { font: 400 1.5rem/1 var(--font-display); }
.site-foot-name span:last-child { font: 400 1.05rem/1 var(--font-arabic); color: var(--gold); }

/* ── Reveals: content is visible by default; motion only hides what it is about to show. ── */
.js-motion .reveal:not(.visible) { opacity: 0; transform: translateY(22px); }
.js-motion .reveal { transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.js-motion [data-split] .split-line { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.js-motion [data-draw]:not(.is-drawn) { transform: scaleX(0); }
.js-motion [data-draw] { transition: transform 1.2s var(--ease-out); }

/* ── Page transitions (cross-document View Transitions; ignored where unsupported). ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease-out) both; }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: var(--ease-out); }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ── Film: a projected-print look for the low-resolution graduation photographs ──
   A gentle print grade, moving grain, a vignette and a faint lamp flicker. The pixels stay as shot; only the
   presentation is cinematic, so the photos' softness reads as film rather than as a small file. */
.film { position: relative; overflow: hidden; isolation: isolate; background: #060607; }
.film img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.14) saturate(.84) contrast(1.07) brightness(.95); }
.film::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 46%, transparent 52%, rgba(30, 14, 4, .4) 100%), linear-gradient(180deg, rgba(244, 129, 42, .06), transparent 40%); }
.film::after { content: ""; position: absolute; inset: -60%; z-index: 3; pointer-events: none; opacity: .17; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px; animation: film-grain .8s steps(5) infinite; }
.film-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: rgba(255, 236, 200, .03); animation: film-flicker 5.3s steps(1) infinite; }
@keyframes film-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 5%); } 40% { transform: translate(6%, -6%); } 60% { transform: translate(-4%, -7%); } 80% { transform: translate(7%, 3%); } 100% { transform: translate(0, 0); } }
@keyframes film-flicker { 0%, 100% { opacity: 1; } 7% { opacity: .2; } 8% { opacity: 1; } 43% { opacity: .55; } 44% { opacity: 1; } 79% { opacity: .3; } 80% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .film::after, .film-fx { animation: none; } }

/* ── Print: a photograph shown whole, as a paper print on the wall ─────────────────
   A thin paper border and a soft shadow, nothing more. The picture inside is never cropped or zoomed: .film takes
   the photo's own 3:4 ratio and the image is contained. */
.print { position: relative; display: block; box-sizing: border-box; margin: 0; padding: clamp(6px, .7vw, 10px); background: #fffaf3;
  box-shadow: 0 1px 2px rgba(25, 29, 29, .16), 0 22px 40px -22px rgba(25, 29, 29, .45); }
.print > .film { display: block; aspect-ratio: 3 / 4; width: 100%; }
.film picture { display: block; width: 100%; height: 100%; }
.print .film img { object-fit: contain; }

/* ── Small screens ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --gutter: 16px; --page: calc(100vw - 32px); --nav-h: 60px; }
  .site-nav-toggle { display: block; }
  .site-nav nav { position: fixed; inset: var(--nav-h) 0 auto; display: none; padding: 8px 16px 20px; color: var(--ink); background: var(--parchment-bright); border-bottom: 1px solid var(--rule); box-shadow: 0 24px 40px -28px rgba(25, 29, 29, .25); }
  .site-nav.is-open nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav ul a { display: block; padding: 15px 0; font-size: 1.15rem; border-bottom: 1px solid var(--rule); }
  .site-nav ul a::after { display: none; }
  .site-nav ul a[aria-current="page"] { color: var(--gold-deep); }
  .site-mark-latin { font-size: 1.35rem; }
  .case-head-grid { grid-template-columns: minmax(0, 1fr); }
  .case-head-plate { order: 2; }
  .case-head-plate figcaption { position: static; padding: 10px 2px 0; background: none; color: var(--ink-soft); }
  .case-head-plate { overflow: visible; box-shadow: none; background: none; }
  .case-head-plate img { border-radius: var(--radius); box-shadow: 0 0 0 1px var(--rule); }
  .case-pager { grid-template-columns: 1fr; }
  .case-pager a + a { align-items: flex-start; text-align: left; border-left: 0; padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .js-motion .reveal:not(.visible) { opacity: 1; transform: none; }
  .js-motion [data-draw]:not(.is-drawn) { transform: none; }
  .portfolio-v2 * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ── Document preview: a page that flips through the PDF while its button is hovered (js/doc-preview.js) ── */
.doc-card { --ratio: .707; position: fixed; left: 0; top: 0; z-index: 900; width: calc(180px + 130px * min(1, max(0, var(--ratio) - .7))); padding: 7px; border-radius: 6px; background: #fffaf3;
  box-shadow: 0 1px 2px rgba(25, 29, 29, .2), 0 26px 44px -20px rgba(25, 29, 29, .55); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility 0s .18s; }
.doc-card.is-on { opacity: 1; visibility: visible; transition: opacity .18s ease, visibility 0s; }
.doc-card-page { aspect-ratio: var(--ratio); background: #fff no-repeat 0 0 / 100% calc(var(--n, 1) * 100%); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(25, 29, 29, .08);
  animation: doc-flip var(--dur, 2s) steps(var(--steps, 1), jump-none) infinite; }
.doc-card.is-loading .doc-card-page { animation: doc-wait 1s ease-in-out infinite alternate; background-color: #f3e9dc; }
@keyframes doc-flip { from { background-position-y: 0; } to { background-position-y: 100%; } }
@keyframes doc-wait { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .doc-card-page { animation: none !important; } }

/* ── Motion layer (js/motion.js) ───────────────────────────────────────────────
   One language across the site: noise settling into signal. Timing tokens, smooth scrolling, the paper grain,
   the pixel page reveal, the nav's ink line and pixel menu, and the canvases of the denoise and resolve effects. */
:root { --dur-fast: .35s; --dur: .7s; --dur-slow: 1.1s; --ease-expo: cubic-bezier(.16, 1, .3, 1); --stagger: 60ms; }

/* Lenis smooth scrolling. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Paper grain: a faint, still texture over everything, shifted a few times a second like film. */
body.site::after { content: ""; position: fixed; inset: -140px; z-index: 2147483000; pointer-events: none; opacity: .05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px;
  animation: paper-grain 1.1s steps(5) infinite; }
@keyframes paper-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-46px, 28px); } 40% { transform: translate(38px, -52px); } 60% { transform: translate(-22px, -36px); } 80% { transform: translate(54px, 18px); } 100% { transform: translate(0, 0); } }

/* Reading progress on case studies: a hairline under the top edge, driven by the scroll position itself. */
@supports (animation-timeline: scroll()) {
  body.site:has(.case-head)::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 101; height: 2px; background: var(--orange); transform-origin: 0 50%;
    animation: read-progress linear both; animation-timeline: scroll(root); }
  @keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Arriving from another page: the head script paints this veil before the first frame; motion.js turns it into pixels. */
html.px-veil::after { content: ""; position: fixed; inset: 0; z-index: 2147482000; background: var(--parchment); pointer-events: none; }
canvas.px-veil { position: fixed; inset: 0; z-index: 2147482000; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
/* The page cross-fades out; the new page is already under its veil. */
::view-transition-old(root) { animation: vt-out .28s var(--ease-in-out) both; }
::view-transition-new(root) { animation: none; }

/* The nav's ink line (fine pointers): one hairline that slides to the link you point at and rests under the current page. */
@media (min-width: 861px) { .site-nav nav { position: relative; } }
.nav-ink { position: absolute; left: 0; bottom: 6px; width: 1px; height: 1px; background: var(--gold-deep); transform-origin: 0 50%; opacity: 0; pointer-events: none;
  transition: transform .6s var(--ease-expo), opacity .3s; }
.site-nav.is-night .nav-ink { background: var(--gold); }
.site-nav.has-ink ul a::after { display: none; }

/* Denoise and resolve canvases sit exactly over the text or image they draw. */
.px-text, .px-img { position: absolute; pointer-events: none; }
.px-img { image-rendering: pixelated; }
.px-on [data-denoise]:not([data-denoised]), .is-denoising, .is-denoising * { -webkit-text-fill-color: transparent; }
.px-on img[data-resolve]:not(.px-ready) { opacity: 0; }

@media (max-width: 860px) {
  /* Phone menu: a full-height panel that opens through pixels, then its links rise one by one. */
  .site-nav.px-menu nav { display: block; visibility: hidden; inset: var(--nav-h) 0 auto; height: calc(100dvh - var(--nav-h)); padding: 24px 16px 40px; overflow-y: auto; }
  .site-nav.px-menu.is-open nav { visibility: visible; }
  .site-nav.px-menu nav:not(.is-filled) { background: transparent; border-color: transparent; box-shadow: none; }
  .site-nav.px-menu nav canvas.px-menu-wipe { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; image-rendering: pixelated; }
  .site-nav.px-menu ul a { font: 400 2.3rem/1.1 var(--font-display); letter-spacing: -.01em; padding: 16px 0; }
  .site-nav.px-menu ul .nav-ext { font-size: 1.6rem; }
  .site-nav.px-menu nav:not(.is-filled) li { opacity: 0; }
  .site-nav.px-menu.is-open nav.is-filled li { animation: menu-rise .6s var(--ease-expo) both; animation-delay: calc(var(--i, 0) * 50ms); }
  @keyframes menu-rise { from { opacity: 0; transform: translateY(18px); } }
}

@media (prefers-reduced-motion: reduce) {
  body.site::after { animation: none; }
  html.px-veil::after { display: none; }
}