/* Muhammet Alihan Alayoğlu – personal site.
   Brand from the designed CV: royal navy, signal blue, pale steel; Source Sans.
   Direction: "Type and nothing else" (taste-skill seed 246104087), then reviewed with
   impeccable, emil-design-eng, apple-design and break-ui (2026-11-09). */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(../fonts/source-sans-3-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(../fonts/source-sans-3-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #ffffff;
  --steel: #eef3fa;      /* pale steel: the CV sidebar */
  --halo: #e2eefa;
  --line: #b4cfea;
  --ink: #021d62;        /* royal navy */
  --text: #273452;       /* running text */
  --mute: #525f7f;
  --accent: #1e73bd;     /* signal blue: the action, the poster field */
  --accent-deep: #155a96;
  --sky: #8dc4f4;        /* accent on navy */

  --font: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;

  /* rem, so a larger browser font size grows the text with the em breakpoints */
  --fs-giant: max(300px, 38vw);
  --fs-poster: clamp(4rem, 10vw, 9.375rem);
  --fs-h2: clamp(2.5rem, 4.6vw, 4.25rem);
  --fs-h3: clamp(1.75rem, 2.8vw, 2.625rem);
  --fs-lead: clamp(1.3125rem, 1.9vw, 1.875rem);
  --fs-body: clamp(1.125rem, 1.0625rem + 0.15vw, 1.1875rem);
  --fs-small: 0.9375rem;

  --margin: clamp(20px, 2.2vw, 32px);
  --gutter: clamp(16px, 2vw, 32px);
  --section: clamp(96px, 11vw, 176px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-kerning: normal;
  font-variant-numeric: proportional-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
a, button, label { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-weight: 700; color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: 12px; z-index: 10; background: var(--ink); color: #fff; padding: 10px 16px; transform: translateY(calc(-100% - 16px)); }
.skip:focus { transform: none; }
.nums { font-variant-numeric: tabular-nums; }

.h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.03em; }

a.link, .link {
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 180ms ease, color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  a.link:hover { text-decoration-color: currentColor; }
}
a:not(.button):active, .menu-toggle:active { opacity: 0.6; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  background: var(--accent); color: #fff;
  font-size: var(--fs-body); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color 180ms ease, transform 140ms var(--ease-out);
}
.button svg { flex-shrink: 0; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 240ms var(--ease-out); }
.button:active { transform: scale(0.97); transition-duration: 60ms; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-deep); }
  .button:hover svg { transform: translateY(2px); }
}

/* size-specific tracking: small text opens up, lead text tightens */
.facts, .cluster .ctx, .cfc figcaption, .cfc-peak, .cfc-pick span, .cfc-y, .cfc-x, .row .val, .tile .cap, .corners, .foot .cols, .legal { letter-spacing: 0.01em; }
.corners, .tile .cap, .cfc-y, .cfc-x { font-weight: 450; }

/* ================= hero ================= */
.hero {
  position: relative;
  display: flex; flex-direction: column;
  min-height: max(100svh, 640px);
  overflow: clip;
  background: var(--paper);
}
.top {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px var(--margin) 0;
}
.wordmark { font-size: var(--fs-body); font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.005em; }
.top nav ul { display: flex; gap: clamp(16px, 2.4vw, 36px); }
.top nav a {
  display: inline-block; padding: 10px 0;
  font-size: var(--fs-body); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: transparent;
  transition: text-decoration-color 200ms ease;
}
.top nav a:not([lang]) { font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .top nav a:hover { text-decoration-color: currentColor; }
}
.menu-toggle { display: none; }

.hero-copy {
  position: relative; z-index: 2;
  padding: 0 var(--margin);
  margin-top: clamp(56px, 10svh, 96px);
  margin-bottom: clamp(56px, 8vw, 96px);
}
.hero-copy p { font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); max-width: 40ch; overflow-wrap: break-word; }
.hero-copy .button { margin-top: 28px; }

.giant {
  position: relative; left: -8vw;
  margin: auto 0 -0.19em;
  padding-top: 0.26em;
  font-size: var(--fs-giant); font-weight: 900; line-height: 0.8; letter-spacing: -0.045em;
  white-space: nowrap; color: var(--ink);
  transform-origin: 30% 100%;
  pointer-events: none;
}
/* short laptops: keep most of the word on the first screen */
@media (min-width: 48em) and (max-height: 820px) {
  .hero-copy { margin-top: clamp(24px, 5svh, 56px); margin-bottom: 24px; }
  .giant { padding-top: 0.2em; }
}

/* ================= about ================= */
.about {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  padding: var(--section) var(--margin) calc(var(--section) * 0.8);
}
.about .h2 { grid-column: 3 / 13; margin-bottom: 44px; }
.facts { grid-column: 1 / 3; grid-row: 2; font-size: var(--fs-small); line-height: 1.45; color: var(--mute); padding-top: 8px; }
.facts li + li { margin-top: 14px; }
.facts b { display: block; color: var(--ink); font-weight: 600; }
.story { grid-column: 3 / 13; grid-row: 2; }
.statement { font-size: var(--fs-lead); line-height: 1.22; letter-spacing: -0.01em; color: var(--text); max-width: 60ch; }
.statement strong { color: var(--ink); font-weight: 700; }
.portrait { float: left; width: 3.66em; height: 3.66em; margin: 0.18em 0.55em 0 0; object-fit: cover; background: var(--steel); }
.story .body { clear: both; padding-top: 32px; max-width: 64ch; color: var(--text); }
.story .body + .body { padding-top: 14px; }
.brand { display: inline-block; height: 1.15em; width: auto; vertical-align: -0.24em; margin-right: 0.22em; }
.brand.wide { height: 0.86em; vertical-align: -0.08em; margin-right: 0; }

/* ================= work ================= */
.work { padding: calc(var(--section) * 0.4) 0 var(--section); }
.work > .h2 { padding: 0 var(--margin); }
.proj {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: end;
  padding: 0 var(--margin);
  margin-top: clamp(88px, 10vw, 140px);
}
.work > .h2 + .proj { margin-top: 56px; }
/* each picture keeps its own ratio, so the evidence is never cropped on desktop */
.visual {
  position: relative;
  grid-column: 1 / 8;
  margin-left: calc(-1 * var(--margin));
  aspect-ratio: var(--ratio);
  overflow: clip;
}
.visual::before { content: ""; position: absolute; inset: 1px; background: #11131a; } /* loading placeholder, kept off the edge */
.visual > picture, .visual > video { position: relative; display: block; width: 100%; height: 100%; }
.visual img, .visual video { width: 100%; height: 100%; object-fit: cover; }
.vid-toggle {
  position: absolute; left: var(--margin); bottom: 0; z-index: 1;
  min-height: 44px; padding: 0 16px; border: 0;
  background: var(--ink); color: #fff; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.01em; cursor: pointer;
}
.vid-toggle:focus-visible { outline-color: #fff; outline-offset: -4px; }
.cluster { grid-column: 9 / 13; }
.cluster .thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--steel); }
.cluster .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cluster h3 { font-size: var(--fs-h3); line-height: 1.02; letter-spacing: -0.025em; margin-top: 28px; }
.cluster .ctx { font-size: var(--fs-small); color: var(--mute); margin-top: 8px; }
.cluster .desc { margin-top: 14px; max-width: 62ch; }

/* the live CFC chart */
.cfc { margin: 0; }
.cfc-plot { position: relative; aspect-ratio: 16 / 10; background: var(--ink); padding: 14px 14px 32px 52px; }
.cfc-plot svg { width: 100%; height: 100%; overflow: visible; }
.cfc-plot ::selection { background: #fff; color: var(--ink); }
.cfc-grid { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.cfc-grid.zero { stroke: rgba(255, 255, 255, 0.34); }
.cfc-raw { stroke: var(--sky); stroke-opacity: 0.55; stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.cfc-out { stroke: #fff; stroke-width: 2.25; vector-effect: non-scaling-stroke; fill: none; stroke-linejoin: round; }
.cfc-y, .cfc-x { position: absolute; color: rgba(255, 255, 255, 0.78); font-size: var(--fs-small); line-height: 1; font-variant-numeric: tabular-nums; }
.cfc-y span, .cfc-x span { white-space: nowrap; }
.cfc-y { left: 0; top: 14px; bottom: 32px; width: 46px; }
.cfc-y span { position: absolute; right: 6px; transform: translateY(-50%); }
.cfc-x { left: 52px; right: 14px; bottom: 9px; height: 15px; }
.cfc-x span { position: absolute; transform: translateX(-50%); }
.cfc-x span:last-child { transform: translateX(-100%); }
.cfc-pick { display: none; margin-top: 10px; }
.cfc.is-live .cfc-pick { display: flex; }
.cfc-pick label { flex: 1; position: relative; }
.cfc-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cfc-pick span {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--steel); color: var(--ink); font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: transform 120ms var(--ease-out);   /* colours switch at once: a navy/white swap cannot cross-fade */
}
.cfc-pick label + label span { margin-left: 2px; }
.cfc-pick input:checked + span { background: var(--ink); color: #fff; }
.cfc-pick input:active + span { transform: scale(0.97); }
.cfc-pick input:not(:checked):active + span { background: var(--line); }
.cfc-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .cfc-pick input:not(:checked):hover + span { background: var(--halo); }
}
.cfc figcaption { font-size: var(--fs-small); color: var(--mute); margin-top: 10px; line-height: 1.45; }
.cfc-peak { font-size: var(--fs-small); color: var(--ink); font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ================= poster: what I do ================= */
.poster { background: var(--accent); color: #fff; padding: 72px var(--margin) 80px; }
.poster ::selection { background: #fff; color: var(--accent); }
.poster :focus-visible { outline-color: #fff; }
.poster .h2 { color: #fff; margin-bottom: 40px; }
.poster li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
}
.poster li + li { margin-top: calc(var(--fs-poster) * 0.1); }   /* the 0.92 leading lets one line's glyph box run into the next; a hair of space keeps them apart */
.poster .w {
  font-size: var(--fs-poster); font-weight: 800; line-height: 0.92; letter-spacing: -0.04em;
  transition: color 200ms ease;
}
.poster .d { font-size: var(--fs-body); line-height: 1.3; text-align: right; max-width: 52ch; text-wrap: balance; }
@media (hover: hover) and (pointer: fine) {
  .poster li:hover .w { color: var(--ink); }   /* ties the word to its detail across the width */
}

/* ================= experience and training ================= */
.record { background: var(--steel); padding: var(--section) var(--margin); }
.record .cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 72px; }
.record .col { grid-column: span 6; max-width: 600px; }
.record .col + .col { justify-self: end; width: 100%; }
.record .h2 { margin-bottom: 36px; }
.group + .group { margin-top: 40px; }
.group h3 { font-size: var(--fs-body); font-weight: 600; color: var(--mute); margin-bottom: 10px; }
.row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 14px; align-items: start;
  padding: 8px 0;
}
.row .logo { width: 40px; height: 40px; background: #fff; padding: 5px; object-fit: contain; }
.row .logo.fill { padding: 0; object-fit: cover; }
.row .name { font-size: var(--fs-body); line-height: 1.3; color: var(--ink); font-weight: 600; padding-top: 1px; }
.row .org { display: block; font-weight: 400; color: var(--text); }
.row .val { font-size: var(--fs-small); color: var(--mute); text-align: right; padding-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ================= awards: one tbody per year ================= */
.awards { padding: var(--section) var(--margin); }
.awards .h2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.awards .h2 span { grid-column: 1 / 8; }
.awards .h2 span + span { grid-column: 3 / 10; }
.awards table { width: 100%; border-collapse: collapse; margin-top: 72px; font-size: var(--fs-body); line-height: 1.4; }
.awards th, .awards td { padding: 14px 12px; vertical-align: top; text-align: left; font-weight: inherit; text-wrap: balance; }
.awards tbody:nth-of-type(odd) > tr > * { background: var(--steel); }
.awards tbody + tbody > tr:first-child > * { border-top: 14px solid var(--paper); }
.awards .yr { width: 12%; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.awards .ttl { width: 38%; color: var(--ink); }
.awards .by { width: 30%; color: var(--text); }
.awards .won { width: 20%; text-align: right; color: var(--ink); font-weight: 600; }

/* ================= off work: wall of word tiles ================= */
.off { padding: 8px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tile {
  position: relative; aspect-ratio: 1; overflow: hidden;
  display: grid; grid-template-rows: minmax(0, 1fr) minmax(calc(2.6 * var(--fs-small)), auto); row-gap: 8px;
  justify-items: center; padding: 12px 12px 18px;
  background: var(--bg, var(--steel)); color: var(--fg, var(--ink));
}
.tile ::selection { background: var(--fg); color: var(--bg); }
.tile:nth-child(4n + 1) { --bg: var(--ink); --fg: #fff; }
.tile:nth-child(4n + 2) { --bg: var(--steel); --fg: var(--ink); }
.tile:nth-child(4n + 3) { --bg: var(--accent); --fg: #fff; }
.tile:nth-child(4n + 4) { --bg: var(--halo); --fg: var(--ink); }
.tile:nth-child(8n + 5) { --bg: var(--accent); --fg: #fff; }
.tile:nth-child(8n + 7) { --bg: var(--ink); --fg: #fff; }
.tile .w, .tile h2 { align-self: center; font-size: var(--fs-h3); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; color: inherit; text-align: center; overflow-wrap: anywhere; }
.tile .cap { align-self: end; text-align: center; font-size: var(--fs-small); line-height: 1.3; }
@media (min-width: 48em) {
  .tile { padding-top: calc(2.6 * var(--fs-small) + 26px); }   /* the word sits at the optical centre */
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile.photo { background: var(--ink); }
.tile.photo .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 40px 12px 18px; color: #fff; background: linear-gradient(to top, rgba(2, 13, 45, 0.75) 55%, rgba(2, 13, 45, 0)); } /* taste-skill-ignore: neutral scrim under a caption on a photo */

/* ================= contact ================= */
.contact {
  background: var(--ink); color: #fff;
  min-height: min(80svh, 800px);
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
  padding: clamp(40px, 6vw, 72px) var(--margin) 32px;
  margin-top: 8px;
}
.contact ::selection { background: #fff; color: var(--ink); }
.contact :focus-visible { outline-color: #fff; }
.contact-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.contact h2 { font-size: var(--fs-lead); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: #fff; max-width: 36ch; }
.portrait-lg { width: clamp(112px, 15vw, 220px); aspect-ratio: 1; height: auto; object-fit: cover; flex: none; background: var(--accent); }
.mail {
  align-self: end;
  display: block; margin: 48px 0 9vh;
  font-size: calc((100vw - 2 * var(--margin)) * 0.0928); font-weight: 400; line-height: 1; letter-spacing: -0.035em;
  color: #fff; text-decoration: none; white-space: nowrap;
  transition: color 220ms ease;
}
.mail .at { display: inline; }
@media (hover: hover) and (pointer: fine) {
  .mail:hover { color: var(--sky); }
}
.corners { display: flex; justify-content: space-between; align-items: end; gap: 24px; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.82); }
.corners ul { display: flex; gap: 28px; }
.corners a { color: #fff; }
.corners a, .corners .copy { display: inline-flex; align-items: center; min-height: 44px; }
.corners .copy { padding: 0; border: 0; background: none; color: #fff; font: inherit; letter-spacing: inherit; cursor: pointer; }

/* ================= footer ================= */
.foot { background: var(--steel); color: var(--text); padding: 48px var(--margin) 24px; overflow: clip; }
.foot .cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 32px; font-size: var(--fs-small); line-height: 1.6; }
.foot .cols > div { grid-column: span 3; }
.foot .cols b { display: block; color: var(--ink); font-weight: 600; }
.foot .cols a { color: var(--text); overflow-wrap: anywhere; }
.foot .credits { color: var(--mute); }
.footmark {
  display: block; margin-top: clamp(72px, 12vw, 180px);
  font-size: calc((100vw - 2 * var(--margin)) * 0.157); font-weight: 800; line-height: 0.78; letter-spacing: -0.05em;
  color: var(--ink); white-space: nowrap;
  transform-origin: 0 100%;
}
.legal { margin-top: 22px; font-size: var(--fs-small); color: var(--mute); }

/* ================= tablet ================= */
@media (max-width: 69.99em) {
  .cluster { grid-column: 8 / 13; }
  .about .h2, .story { grid-column: 4 / 13; }
  .facts { grid-column: 1 / 4; }
  .awards .ttl { width: 40%; }
  .hero { min-height: 0; }
  .contact { min-height: 64svh; }
}
/* narrow tablets: the picture runs full width, the cluster sits under it in two columns */
@media (min-width: 48em) and (max-width: 63.99em) {
  .proj { row-gap: 32px; }
  .visual { grid-column: 1 / -1; margin-right: calc(-1 * var(--margin)); }
  .cluster { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--gutter); }
  .cluster > .thumb, .cluster > .cfc { grid-column: 1 / 6; grid-row: 1 / 4; }
  .cluster > h3, .cluster > .ctx, .cluster > .desc { grid-column: 6 / 13; }
  .cluster h3 { margin-top: 0; }
}
/* the awards stack into one block per year below desktop */
@media (max-width: 63.99em) {
  .awards table, .awards tbody, .awards tr, .awards th, .awards td { display: block; width: auto; }
  .awards tbody { padding: 14px 12px; }
  .awards tbody + tbody { margin-top: 14px; }
  .awards tbody:nth-of-type(odd) { background: var(--steel); }
  .awards tbody:nth-of-type(odd) > tr > * { background: none; }
  .awards tbody + tbody > tr:first-child > * { border-top: 0; }
  .awards tr + tr { margin-top: 14px; }
  .awards th, .awards td, .awards th[class], .awards td[class] { padding: 0; text-align: left; width: auto; }
  .awards .yr { font-size: var(--fs-lead); margin-bottom: 4px; }
  .awards .won { font-weight: 400; color: var(--mute); }
  .awards .by { color: var(--mute); }
}

/* ================= phone ================= */
@media (max-width: 47.99em) {
  .top { padding-top: 14px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .wordmark { max-width: 12ch; line-height: 1.2; }
  .menu-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; margin-left: -12px;
    position: relative; z-index: 3;
    background: var(--paper); border: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink); cursor: pointer;
    transition: transform 140ms var(--ease-out);
  }
  .menu-toggle:active { transform: scale(0.97); }
  .js .top nav {
    position: absolute; left: calc(var(--margin) - 12px); top: 100%;
    display: block; visibility: hidden; opacity: 0; transform: translateY(-8px);
    background: var(--paper); padding: 8px 20px;
    box-shadow: 0 12px 32px rgba(2, 29, 98, 0.22);   /* taste-skill-ignore: the open menu floats */
    transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out), visibility 0s 120ms;
  }
  .js .top nav.open { visibility: visible; opacity: 1; transform: none; transition: opacity 160ms var(--ease-out), transform 240ms var(--ease-out); }
  .js .top nav ul { flex-direction: column; gap: 0; }
  .js .top nav a { color: var(--ink); padding: 12px 0; min-width: 9rem; }
  /* without JavaScript the links simply stack under the name */
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .top { flex-direction: column; align-items: flex-start; gap: 4px; }
  html:not(.js) .top nav ul { flex-direction: column; gap: 0; }
  html:not(.js) .top nav a { padding: 6px 0; }

  .hero { min-height: 100svh; }
  .hero-copy { margin-top: auto; margin-bottom: 40px; max-width: 55%; }
  .hero-copy p { font-size: var(--fs-body); line-height: 1.45; letter-spacing: 0; }
  .hero-copy .button { margin-top: 24px; min-height: 48px; padding: 0 18px; }
  .giant {
    position: absolute; margin: 0; padding: 0;
    writing-mode: vertical-rl;
    font-size: 70vw; line-height: 0.8;
    left: auto; right: -13vw; bottom: auto; top: 50%;
    transform: translateY(-50%);
    transform-origin: 100% 50%;
  }

  .about { padding-top: 88px; }
  .about .h2, .story, .facts { grid-column: 1 / -1; }
  .about .h2 { margin-bottom: 28px; }
  .facts { grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
  .facts li + li { margin-top: 0; }
  .statement { line-height: 1.25; }
  .portrait { width: 5em; height: 5em; }

  .proj { margin-top: 88px; row-gap: 0; }
  .visual { grid-column: 1 / -1; width: calc(110% + var(--margin)); margin-left: calc(-1 * var(--margin) - 10%); margin-right: 0; aspect-ratio: 4 / 5; }
  .visual.ratio { aspect-ratio: var(--ratio); width: calc(100% + 2 * var(--margin)); margin-left: calc(-1 * var(--margin)); }
  .cluster { grid-column: 1 / -1; display: flex; flex-direction: column; }
  .cluster .thumb, .cluster .cfc { order: 3; margin-top: 28px; }
  .cluster .thumb { width: 70%; align-self: flex-end; }
  .cluster h3 { margin-top: 24px; order: 0; }
  .cluster .ctx { order: 1; }
  .cluster .desc { order: 2; }

  .poster { padding: 56px var(--margin) 64px; }
  .poster li { display: block; margin-bottom: 22px; }
  .poster .w { display: block; font-size: min(var(--fs-poster), calc((100vw - 2 * var(--margin)) / 5.6)); }
  .poster .d { display: block; text-align: left; font-size: var(--fs-small); line-height: 1.4; letter-spacing: 0.01em; margin-top: 6px; max-width: none; }

  .record .col, .record .col + .col { grid-column: 1 / -1; justify-self: stretch; max-width: none; }
  .row { min-height: 44px; }

  .awards .h2 span, .awards .h2 span + span { grid-column: 1 / -1; }

  .off { padding: 6px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .tile .w, .tile h2 { font-size: min(var(--fs-h3), 7.2vw); }
  /* two columns: re-order the colours so no two blue tiles stack */
  .tile:nth-child(4n + 1) { --bg: var(--ink); --fg: #fff; }
  .tile:nth-child(4n + 2) { --bg: var(--steel); --fg: var(--ink); }
  .tile:nth-child(4n + 3) { --bg: var(--halo); --fg: var(--ink); }
  .tile:nth-child(4n + 4) { --bg: var(--accent); --fg: #fff; }

  .contact { min-height: 80svh; }
  .mail { font-size: calc((100vw - 2 * var(--margin)) * 0.150); white-space: normal; margin-bottom: 8svh; }
  .mail .at { display: block; }
  .corners { flex-direction: column; align-items: flex-start; gap: 12px; }
  .corners ul { flex-direction: column; gap: 0; }

  .foot .cols > div { grid-column: span 6; }
  .footmark { font-size: calc((100vw - 2 * var(--margin)) * 0.280); white-space: normal; line-height: 0.82; }
  .footmark span { display: block; }
}

/* ================= motion =================
   Screen only: printing or "Save as PDF" always shows every section. The inline head script
   removes .js again if site.js never ran, so nothing stays hidden. */
@media screen and (prefers-reduced-motion: no-preference) {
  .js .giant { animation: rise-giant 1100ms var(--ease-out) 120ms both; }
  .js .hero-copy > * { animation: rise 800ms var(--ease-out) backwards; }
  .js .hero-copy > :nth-child(2) { animation-delay: 140ms; }
  .js .top { animation: fade 700ms ease 60ms backwards; }

  /* site.js staggers only the parts that arrive together (inline transition-delay) */
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .visual[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 700ms var(--ease-out); }
  .js .visual[data-reveal] > :is(picture, video) { transform: scale(1.04); transition: transform 700ms var(--ease-out); }
  .js .visual[data-reveal].is-in { clip-path: inset(0); }
  .js .visual[data-reveal].is-in > :is(picture, video) { transform: none; }

  @supports (animation-timeline: view()) {
    .js .giant {
      animation: rise-giant 1100ms var(--ease-out) 120ms both, shrink linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
    .js .footmark { animation: grow linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }

  /* switching language: cross-fade the page and do not replay the intro */
  @view-transition { navigation: auto; }
  .giant { view-transition-name: giant; }
  .js.vt .giant, .js.vt .hero-copy > *, .js.vt .top { animation-delay: -2s; }
}
@keyframes rise { from { opacity: 0; translate: 0 18px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise-giant { from { opacity: 0; translate: 0 12%; } to { opacity: 1; translate: 0 0; } }
@keyframes shrink { from { scale: 1; } to { scale: 0.93; } }
@keyframes grow { from { scale: 0.94; } to { scale: 1; } }