/* ==========================================================================
   David Okunlola portfolio: one stylesheet for the whole site.
   Values come from the Figma file ("Main Design for my portfolio - Corrected")
   and use the Radian design system's token names so the two stay in step.
   Sections: 1 tokens, 2 base, 3 shared pieces, 4 home, 5 work, 6 case study,
   7 about, 8 exploration, 9 resume, 10 small pages (404, password).
   Breakpoints: phones up to 767px, tablets 768-1099px, desktop 1100px and up.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #ffffff;
  --color-fill1: #f7f7f8;
  --color-fill2: #eeeff1;
  --color-fill1-alpha: rgba(36, 46, 66, 0.04);
  --color-fg: #26282c;
  --color-fg-secondary: #5e636e;
  --color-fg-tertiary: #9196a1;
  --color-fg-inverse: #ffffff;
  --color-border: #dee0e3;
  --color-border-soft: #e9eaec;
  --color-border-soft-alpha: rgba(36, 46, 66, 0.08);
  --color-primary-text: #22c322;
  --color-primary-focus: #d1fad1;
  --color-green-text: #188b18;
  --color-cyan-accent: #c4fcfc;
  --color-cyan-text: #178282;
  --color-orange-accent: #ffeee5;
  --color-orange: #f36a25;
  --color-orange-hover: #f68851;
  --color-orange-text: #ad4e1f;
  --color-error: #f53d3d;
  --color-error-focus: #fdd8d8;
  --color-error-text: #d92626;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
  --shadow-e1: 0 1px 1px 0 rgba(25, 24, 27, 0.04);

  /* Side margin of every page: 16px on phones, growing to 96px on a 1440px screen. */
  --page-gutter: clamp(16px, 6.667vw, 96px);
  --page-max: 1440px;
}
@media (max-width: 767px) {
  :root { --page-gutter: 16px; }
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--color-fg); color: #fff; padding: 8px 12px; border-radius: var(--radius-lg); font-size: 14px; }
.skip-link:focus { top: 16px; }

.page { max-width: var(--page-max); margin: 0 auto; }
.section { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }

/* Text styles (names follow the Figma text styles) */
.heading-2 { font-size: 48px; line-height: 60px; font-weight: 600; }
.heading-4 { font-size: 32px; line-height: 40px; font-weight: 500; }
.heading-5 { font-size: 24px; line-height: 32px; font-weight: 600; }
.body-18 { font-size: 18px; line-height: 32px; color: var(--color-fg-secondary); }
.body-16 { font-size: 16px; line-height: 28px; color: var(--color-fg-secondary); }
.body-14 { font-size: 14px; line-height: 20px; }
.body-13 { font-size: 13px; line-height: 18px; }
.text-secondary { color: var(--color-fg-secondary); }
@media (max-width: 767px) {
  .heading-2 { font-size: 32px; line-height: 40px; font-weight: 500; }
  .body-18 { font-size: 16px; line-height: 28px; }
}

/* 3. Shared pieces ---------------------------------------------------------- */

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px; border-radius: var(--radius-lg);
  font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.button > span { padding: 0 2px; }
.button img { width: 20px; height: 20px; flex: none; }
.button--primary { background: var(--color-fg); color: var(--color-fg-inverse); }
.button--primary:hover { background: #3a3d43; }
.button--secondary { background: var(--color-bg); color: var(--color-fg); border: 1px solid var(--color-border); box-shadow: var(--shadow-e1); padding: 9px 11px; }
.button--secondary:hover { background: var(--color-fill1); }
.button--small { padding: 8px 10px; }
.button--small.button--secondary { padding: 7px 9px; }
.button--pill { border-radius: 40px; }
.button--full { display: flex; width: 100%; }
.button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Badges */
.badge-availability { display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px; border-radius: var(--radius-md); background: var(--color-primary-focus); color: var(--color-green-text); font-size: 14px; line-height: 20px; font-weight: 500; }
.badge-availability::before { content: ""; width: 6px; height: 6px; margin: 3px; border-radius: 50%; background: var(--color-green-text); flex: none; }
.badge-availability > span { padding: 0 2px; }
.badge-category { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--radius-md); background: var(--color-cyan-accent); color: var(--color-cyan-text); font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; }

/* Placeholder boxes: the grey "Add ... visual" areas from the design */
.placeholder { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; background: var(--color-fill1); border-radius: var(--radius-3xl); color: var(--color-fg-secondary); font-size: 14px; line-height: 20px; }

/* Site header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px var(--page-gutter); position: relative; }
.site-identity { display: flex; align-items: center; gap: 16px; }
/* The logo: David’s portrait illustration. */
.site-identity__logo { width: 48px; height: 48px; flex: none; }
.site-identity__name { display: block; font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; }
.site-identity__role { display: block; font-size: 13px; line-height: 18px; color: var(--color-fg-secondary); white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: 8px; }
.nav-link { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 70px; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; transition: background-color 0.15s ease; }
.nav-link:hover, .nav-link[aria-current="page"] { background: var(--color-fill1); }
.site-header__actions { display: none; align-items: center; gap: 4px; }
.menu-button { display: none; padding: 10px; border-radius: var(--radius-lg); }
/* Speaker button: turns the interface sounds off or on (see scripts/site-sounds.js). */
.sound-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: 50%; transition: background-color 0.15s ease; }
.sound-toggle:hover { background: var(--color-fill1); }
.sound-toggle img { width: 20px; height: 20px; }
.sound-toggle[aria-pressed="true"] .sound-toggle__off, .sound-toggle[aria-pressed="false"] .sound-toggle__on { display: none; }
.sound-toggle[aria-pressed="false"] { opacity: 0.6; }
.menu-button:hover { background: var(--color-fill1); }
.menu-button img { width: 20px; height: 20px; }

@media (max-width: 767px) {
  .site-header { padding: 16px; }
  .site-identity__logo { width: 40px; height: 40px; }
  .site-header__actions { display: flex; }
  .menu-button { display: inline-flex; }
  .sound-toggle { padding: 10px; border-radius: var(--radius-lg); }
  .site-nav .sound-toggle { display: none; }
  /* The open phone menu was not drawn in Figma: a simple panel under the header. */
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 20; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 16px 16px; background: var(--color-bg); border-bottom: 1px solid var(--color-border-soft); box-shadow: 0 12px 24px -12px rgba(25, 24, 27, 0.12); }
  .site-nav.is-open { display: flex; }
  .site-nav .nav-link { padding: 10px 14px; border-radius: var(--radius-lg); }
  .site-nav .button { margin-top: 8px; padding: 10px 12px; }
}

/* Contact box */
/* Connect: a short paragraph with links to email, LinkedIn and X (shared-parts/contact-box.html). */
.contact-section { padding: 48px var(--page-gutter) 64px; }
.connect__label { margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-fg-secondary); }
.connect__text { max-width: 640px; font-size: 18px; line-height: 30px; color: var(--color-fg-secondary); }
.connect__text a { color: var(--color-fg); text-decoration: underline; text-decoration-color: var(--color-border); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.15s ease; }
.connect__text a:hover { text-decoration-color: var(--color-fg); }
@media (max-width: 767px) {
  .contact-section { padding: 24px 16px 40px; }
  .connect__text { font-size: 16px; line-height: 28px; }
}

/* Site footer */
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px var(--page-gutter); }
.site-footer__copyright { font-size: 14px; line-height: 20px; color: var(--color-fg-secondary); white-space: nowrap; }
.site-footer__links { display: flex; gap: 8px; }
@media (max-width: 767px) {
  .site-footer { flex-direction: column-reverse; align-items: flex-start; padding: 24px 16px; }
  .site-footer__links { gap: 4px; flex-wrap: wrap; }
}

/* Project row: text on the left, picture on the right (Selected work, Next project) */
.project-row { display: flex; align-items: center; gap: 64px; padding: 48px 0; }
.project-row + .project-row { border-top: 1px solid var(--color-border-soft); }
.project-row__details { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.project-row__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.project-row__title { font-size: 32px; line-height: 40px; font-weight: 500; }
.project-row__facts { display: flex; gap: 24px; width: 100%; }
.project-row__fact { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.project-row__fact dt { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--color-fg-secondary); }
.project-row__fact dd { font-size: 14px; line-height: 20px; }
.project-art { flex: none; width: 54.5%; max-width: 680px; aspect-ratio: 680 / 420; border-radius: var(--radius-3xl); overflow: hidden; background: var(--color-fill1); }
.project-art img { width: 100%; height: 100%; object-fit: cover; }
.project-art--placeholder { display: flex; align-items: center; justify-content: center; color: var(--color-fg-secondary); font-size: 14px; line-height: 20px; }
.project-art--confidential { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--color-fg); color: #fff; font-size: 24px; line-height: 32px; font-weight: 600; }
.project-art--confidential img { width: 32px; height: 32px; }
.project-row .button--when-phone { display: none; }
@media (max-width: 1099px) {
  .project-row { gap: 32px; }
  .project-art { width: 48%; }
  .project-row__title { font-size: 24px; line-height: 32px; font-weight: 600; }
}
@media (max-width: 767px) {
  .project-row { flex-direction: column-reverse; align-items: stretch; gap: 16px; padding: 32px 0; }
  .project-row__details { gap: 16px; }
  .project-art { width: 100%; max-width: none; border-radius: var(--radius-xl); }
  .project-art--confidential { gap: 8px; font-size: 13px; line-height: 17px; }
  .project-art--confidential img { width: 17px; height: 17px; }
  .project-row__facts { flex-direction: column; gap: 8px; }
  .project-row__fact { flex-direction: row; gap: 8px; align-items: baseline; }
  .project-row .button--when-desktop { display: none; }
  .project-row .button--when-phone { display: inline-flex; }
}

/* 4. Home ------------------------------------------------------------------- */
.hero { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px var(--page-gutter) 64px; }
.hero__message { display: flex; flex-direction: column; gap: 16px; max-width: 960px; }
.hero__actions { display: flex; gap: 8px; }

.work-strip-scroller { width: 100%; }
.work-strip { display: flex; align-items: flex-start; gap: 16px; width: 100%; }
.work-tile { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; transition: flex-basis 0.35s ease, flex-grow 0.35s ease; }
.work-tile__caption { display: block; }
.work-tile__media { display: block; position: relative; height: 516px; border-radius: var(--radius-3xl); overflow: hidden; }
.work-tile__name { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.work-tile__meta { display: block; font-size: 13px; line-height: 18px; color: var(--color-fg-secondary); }
.work-tile__media > * { position: absolute; left: 50%; transition: top 0.35s ease, left 0.35s ease, opacity 0.25s ease; }
.work-tile__title { top: 40px; width: 260px; margin-left: -130px; text-align: center; font-size: 24px; line-height: 32px; font-weight: 600; }
.work-tile__note { top: 248px; width: 240px; margin-left: -120px; text-align: center; font-size: 14px; line-height: 20px; color: var(--color-fg-secondary); }
.work-tile__cursor-label { top: 238px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 1px solid #f9fff5; border-radius: var(--radius-full); background: linear-gradient(to bottom, #16084c, #26282c); box-shadow: 0 4px 4px rgba(9, 10, 11, 0.16), 0 0 0 1px var(--color-border-soft-alpha); color: #fff; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; }
.work-tile__cursor-label img { width: 20px; height: 20px; }
.work-tile__cursor-label span { padding: 0 2px; }

.work-tile--afemairide .work-tile__media { background: #ca6528; }
.work-tile--afemairide .work-tile__logo { top: 17px; width: 201px; max-width: none; margin-left: -101px; }
.work-tile--afemairide .work-tile__phone { top: 100px; width: 323px; max-width: none; margin-left: -107px; }
.work-tile--dukacards .work-tile__media { background: #cdd3da; }
.work-tile--dukacards .work-tile__phone { top: 104px; width: 248px; max-width: none; margin-left: -124px; }
.work-tile--govtech .work-tile__media { background: var(--color-fill1); }
.work-tile--confidential .work-tile__media { background: var(--color-fg); }
.work-tile--confidential .work-tile__lock { top: 208px; width: 32px; margin-left: -16px; }
.work-tile--confidential .work-tile__title { top: 256px; color: #fff; }

/* Hover state (only on devices with a mouse, and only when there is room) */
@media (hover: hover) and (min-width: 1100px) {
  .work-tile:hover, .work-tile:focus-visible { flex: 0 0 33.65%; }
  .work-tile:hover .work-tile__cursor-label, .work-tile:focus-visible .work-tile__cursor-label { opacity: 1; }
  .work-tile--afemairide:hover .work-tile__logo, .work-tile--afemairide:focus-visible .work-tile__logo { top: -243px; }
  .work-tile--afemairide:hover .work-tile__phone, .work-tile--afemairide:focus-visible .work-tile__phone { top: 34px; margin-left: -161px; }
  .work-tile--dukacards:hover .work-tile__title, .work-tile--dukacards:focus-visible .work-tile__title { top: -40px; }
  .work-tile--dukacards:hover .work-tile__phone, .work-tile--dukacards:focus-visible .work-tile__phone { top: 40px; }
  .work-tile--govtech:hover .work-tile__note, .work-tile--govtech:focus-visible .work-tile__note { top: 160px; }
  .work-tile--confidential:hover .work-tile__lock, .work-tile--confidential:focus-visible .work-tile__lock { top: 150px; }
  .work-tile--confidential:hover .work-tile__title, .work-tile--confidential:focus-visible .work-tile__title { top: 198px; }
  .work-tile--confidential .work-tile__cursor-label { top: 270px; }
}

.view-all-work { display: none; }
/* Exploration shortlist: name on the left, a few words about it on the right. */
.shortlist-section { padding: 0 var(--page-gutter) 64px; }
.shortlist__label { margin-bottom: 16px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-fg-secondary); }
/* Rows sit 16px apart. */
.shortlist { display: flex; flex-direction: column; gap: 16px; }
.shortlist__row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-size: 16px; line-height: 24px; }
.shortlist__name { font-weight: 500; }
.shortlist__name::after { content: "→"; display: inline-block; margin-left: 6px; opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease; }
.shortlist__about { color: var(--color-fg-secondary); text-align: right; }
.shortlist__row:hover .shortlist__name::after, .shortlist__row:focus-visible .shortlist__name::after { opacity: 1; transform: none; }
.shortlist__row:hover .shortlist__about { color: var(--color-fg); }

/* Kind words: testimonials as plain text, in the same style as Connect. One shows at a time;
   "Next note" swaps to the next. Pointing at a name shows that person's photo as a small stamp. */
.kind-words-section { padding: 0 var(--page-gutter) 48px; }
.kind-words { max-width: 640px; }
.kind-words__header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.kind-words__title { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-fg-secondary); }
.kind-words__count { font-size: 14px; line-height: 20px; color: var(--color-fg-secondary); font-variant-numeric: tabular-nums; }
/* Every note sits in the same spot, so the section keeps one height while they swap. */
.kind-notes { display: grid; }
.kind-note { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
.kind-note.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.kind-note.is-leaving { opacity: 0; visibility: visible; transform: translateY(-6px); }
.kind-note__quote { font-size: 18px; line-height: 30px; color: var(--color-fg-secondary); }
.kind-note figcaption { position: relative; display: inline-block; max-width: calc(100% - 64px); font-size: 16px; line-height: 24px; color: var(--color-fg-secondary); }
.kind-note__name { color: var(--color-fg); text-decoration: underline; text-decoration-color: var(--color-border); text-decoration-thickness: 1px; text-underline-offset: 4px; border-radius: 2px; cursor: default; transition: text-decoration-color 0.15s ease; }
.kind-note__name:hover, .kind-note__name:focus { text-decoration-color: var(--color-fg); }
/* The photo stamp: hidden until the name is hovered (or tapped / focused). It sits just to the right
   of the name-and-role line and is small enough not to touch the quote above or the button below. */
.kind-note__photo { position: absolute; left: calc(100% + 12px); top: 50%; z-index: 2; width: 44px; max-width: none; height: 52px; margin-top: -26px; padding: 3px 3px 10px; object-fit: cover; background: var(--color-bg); border: 1px solid var(--color-border-soft); box-shadow: 0 4px 10px -4px rgba(25, 24, 27, 0.18); opacity: 0; transform: translateX(-6px) scale(0.9); pointer-events: none; transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.kind-note__name:hover .kind-note__photo, .kind-note__name:focus .kind-note__photo { opacity: 1; transform: rotate(5deg); }
.kind-words__next { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 14px; line-height: 20px; font-weight: 500; }
.kind-words__next span { transition: transform 0.15s ease; }
.kind-words__next:hover span { transform: translateX(3px); }

@media (max-width: 1099px) {
  /* Tablet and phone: the four tiles become a strip you swipe sideways. */
  .hero { padding-bottom: 24px; }
  .work-strip-scroller { width: calc(100% + 2 * var(--page-gutter)); margin: 0 calc(-1 * var(--page-gutter)); padding: 0 var(--page-gutter); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .work-strip-scroller::-webkit-scrollbar { display: none; }
  .work-strip { width: max-content; }
  .work-tile { flex: none; width: 280px; }
  .view-all-work { display: block; padding: 0 var(--page-gutter) 32px; }
}
@media (max-width: 767px) {
  .hero { padding: 32px 16px 16px; }
  .shortlist-section { padding: 0 16px 40px; }
  .shortlist__row { flex-direction: column; align-items: flex-start; gap: 0; }
  .shortlist__about { text-align: left; font-size: 14px; line-height: 20px; }
  .kind-words-section { padding: 0 16px 32px; }
  .kind-note__quote { font-size: 16px; line-height: 28px; }
}

/* 5. Selected work ---------------------------------------------------------- */
.page-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 48px var(--page-gutter) 32px; }
.work-tabs { display: flex; align-items: center; gap: 4px; width: 350px; max-width: 100%; }
.work-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-lg); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-fg-secondary); white-space: nowrap; transition: background-color 0.15s ease; }
.work-tab img { width: 20px; height: 20px; flex: none; }
.work-tab > span { padding: 0 2px; }
.work-tab:hover { background: var(--color-fill1-alpha); }
.work-tab[aria-current="page"] { background: var(--color-fill1-alpha); color: var(--color-fg); }
.work-list { padding: 0 var(--page-gutter) 48px; }

/* Desktop with a mouse: project names on the left, one picture on the right that
   changes as you point at a name. Everywhere else: the normal stacked list. */
@media (hover: hover) and (min-width: 1100px) {
  .work-list--switcher { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 24px; min-height: 564px; padding-top: 48px; padding-bottom: 96px; }
  .work-list--switcher + .contact-section { display: none; } /* the desktop design ends at the list */
  .work-list--switcher .project-row { display: block; padding: 0; border: 0; }
  .work-list--switcher .project-row__details { display: block; max-width: calc(100% - 744px - var(--page-gutter)); }
  .work-list--switcher .project-row__details > :not(.project-row__title-row) { display: none; }
  .work-list--switcher .project-row__title-row { flex-wrap: nowrap; gap: 16px; }
  .work-list--switcher .project-row__title { display: flex; align-items: center; gap: 8px; color: var(--color-fg-tertiary); white-space: nowrap; transition: color 0.15s ease; }
  .work-list--switcher .project-row__title::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--color-fg); opacity: 0; transition: opacity 0.15s ease; }
  .work-list--switcher .project-art { position: absolute; right: var(--page-gutter); top: 48px; width: 680px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s; }
  .work-list--switcher .project-row.is-active .project-row__title { color: var(--color-fg); font-weight: 600; }
  .work-list--switcher .project-row.is-active .project-row__title::before { opacity: 1; }
  .work-list--switcher .project-row.is-active .project-art { opacity: 1; visibility: visible; }
}
@media (max-width: 767px) {
  .page-heading { flex-direction: column; align-items: flex-start; padding: 24px 16px 16px; }
  .work-tabs { width: 100%; max-width: 350px; }
  .work-tab { flex: 1 1 auto; }
  .work-list { padding: 0 16px 32px; }
}

@media (max-width: 389px) {
  /* Phones narrower than the 390px design: drop the tab icons so both tabs still fit. */
  .work-tabs { overflow-x: auto; scrollbar-width: none; }
  .work-tab { padding: 8px 6px; font-size: 13px; }
  .work-tab img { display: none; }
}

/* 6. Case study ------------------------------------------------------------- */
.case-study { position: relative; }
/* The rail keeps its real height (so it stops at the end of the case study) but takes up no room in the layout. */
.case-rail { position: sticky; top: 40px; z-index: 5; height: 380px; margin: 0 0 -380px 32px; pointer-events: none; }
.case-rail__inner > * { pointer-events: auto; transition: opacity 0.2s ease, visibility 0s; }
/* Set by site.js when the end of the case study reaches the Back button or contents list. */
.case-rail__inner > .is-past-end { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
.case-rail__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 64px; width: 163px; }
.case-rail__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.back-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--radius-full); font-size: 14px; line-height: 20px; font-weight: 500; }
.back-button:hover { background: var(--color-fill1); }
.back-button img { width: 20px; height: 20px; }
.back-button span { padding: 0 2px; }
.case-contents { display: flex; flex-direction: column; gap: 12px; width: 163px; }
.case-contents__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 4px 6px 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: #fafaf8; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-fg-secondary); }
.case-contents__toggle-label { display: flex; align-items: center; gap: 8px; }
.case-contents__toggle img { width: 20px; height: 20px; }
.case-contents__toggle[aria-expanded="true"] .when-closed, .case-contents__toggle[aria-expanded="false"] .when-open { display: none; }
.case-contents__toggle[aria-expanded="false"] { color: var(--color-fg); }
.case-contents__progress { padding: 3px 8px; border-radius: var(--radius-full); background: var(--color-fg); color: #fff; font-size: 13px; line-height: 18px; font-weight: 500; }
.case-contents__list { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.case-contents__list a { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--color-fg-secondary); transition: color 0.15s ease; }
.case-contents__list a:hover, .case-contents__list a[aria-current="true"] { color: var(--color-fg); }

/* Pinned picture stage (desktop). site.js moves every section's picture into one "stage" that
   stays fixed in the right half of the screen while the text scrolls on the left. The stage
   cross-fades to a section's picture when that section reaches the reading line; a section
   without a picture leaves the previous one showing. Behaviour modelled on freaktion.xyz. */
.has-stage .case-rows { display: grid; grid-template-columns: 1fr 1fr; overflow-x: visible; overflow-y: clip; /* clip keeps the text fades from spilling onto "Next project"; visible lets the stage reach the window edge */ }
.has-stage .case-row { display: block; grid-column: 1; min-height: 600px; }
.has-stage .case-row:last-of-type { min-height: max(600px, 70vh); }
.case-stage { grid-column: 2; position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow: hidden; background: var(--color-fill1); animation: case-stage-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.case-stage::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: 1px; background: var(--color-border); transform-origin: center top; animation: case-line-draw 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
.case-stage .case-row__visual { position: absolute; inset: 0; padding: 64px; border: 0; background: none; animation: none; opacity: 0; visibility: hidden; filter: blur(10px); transition: opacity 0.3s ease, filter 0.3s ease, visibility 0s linear 0.3s; }
.case-stage .case-row__visual.is-active { opacity: 1; visibility: visible; filter: none; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, filter 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, visibility 0s; }
/* Pictures keep their designed width and stay centred, however wide the stage gets. */
.case-stage .case-row__visual > * { max-width: 592px; }
/* Inside the stage, pictures shrink on short screens so a whole picture always fits. */
.case-stage .case-visual--hero { height: min(440px, 56vh); }
.case-stage .case-visual--section { height: min(400px, 50vh); }
.case-stage .case-visual--supporting { height: min(280px, 22vh); }
.case-stage .case-gallery__slide { height: min(420px, 38vh); }
.case-stage .case-visual--image { height: auto; }
.case-stage .case-visual--image img { max-height: calc(100vh - 128px); object-fit: contain; }
/* Soft fades at the top and bottom of the text column, so text eases in and out of view. */
.case-fade { grid-column: 1; position: sticky; align-self: start; z-index: 4; height: 96px; margin-bottom: -96px; pointer-events: none; }
.case-fade--top { top: 0; background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0)); }
.case-fade--bottom { top: calc(100vh - 96px); background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)); }

/* Entrance when a case study opens: text sharpens into view one block after another. */
@keyframes case-enter { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: none; } }
@keyframes case-stage-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes case-line-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.case-row__text > * { animation: case-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.case-row__text > :nth-child(1) { animation-delay: 0.16s; }
.case-row__text > :nth-child(2) { animation-delay: 0.24s; }
.case-row__text > :nth-child(3) { animation-delay: 0.32s; }
.case-row__text > :nth-child(4) { animation-delay: 0.4s; }
.case-row__text > :nth-child(n+5) { animation-delay: 0.48s; }
.case-row__visual { animation: case-stage-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }

.case-row { display: grid; grid-template-columns: 1fr 1fr; scroll-margin-top: 0; }
.case-row__text { display: flex; flex-direction: column; gap: 12px; padding: 96px 48px 96px 216px; min-width: 0; }
.case-row--overview .case-row__text { padding-top: 140px; }
.case-row--overview { min-height: 673px; }
.case-row__visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 96px 64px; min-width: 0; background: var(--color-fill1); border-left: 1px solid var(--color-border); }
.case-title { font-size: 24px; line-height: 32px; font-weight: 500; }
.case-eyebrow { font-size: 16px; line-height: 24px; font-weight: 500; }
.case-eyebrow--phone-only { display: none; }
.case-heading { font-size: 14px; line-height: 20px; font-weight: 500; }
.case-lead { font-size: 16px; line-height: 24px; font-weight: 500; }
.case-copy { font-size: 14px; line-height: 24px; color: var(--color-fg-secondary); }
.case-facts { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.case-fact { display: flex; gap: 16px; }
.case-fact dt { flex: none; width: 96px; padding-top: 4px; font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; color: var(--color-fg-secondary); }
.case-fact dd { flex: 1; font-size: 14px; line-height: 24px; }
.case-links { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.case-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-fg-secondary); }
a.case-link:hover { color: var(--color-fg); }
.case-link img { width: 18px; height: 18px; }
.stigdata-mark { display: flex; flex-direction: column; justify-content: space-between; width: 18px; height: 18px; }
.stigdata-mark i { display: block; height: 5px; border-radius: 99px; background: #ff9500; }
.stigdata-mark i:nth-child(2) { background: #34c759; transform: rotate(10deg); }
.stigdata-mark i:nth-child(3) { background: #226af5; }
.case-goals { display: flex; flex-direction: column; gap: 12px; counter-reset: goal; }
.case-goals li { display: flex; gap: 12px; font-size: 14px; line-height: 24px; color: var(--color-fg-secondary); counter-increment: goal; }
.case-goals li::before { content: counter(goal); flex: none; width: 20px; height: 20px; margin-top: 2px; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-fill1); font-size: 12px; line-height: 18px; text-align: center; }
.case-notice { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 12px 16px; border-radius: var(--radius-xl); background: var(--color-fill1); font-size: 14px; line-height: 20px; font-weight: 500; }
.case-notice img { width: 20px; height: 20px; flex: none; }

.case-visual { width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-bg); color: var(--color-fg-secondary); font-size: 14px; line-height: 20px; }
.case-visual--hero { height: 440px; }
.case-visual--section { height: 400px; }
.case-visual--supporting { height: 280px; }
.case-visual--image { padding: 0; overflow: hidden; height: auto; }
.case-visual--image img { width: 100%; height: auto; }
.case-supporting { display: flex; gap: 16px; width: 100%; }
.case-gallery { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.case-gallery__frame { display: flex; align-items: center; gap: 24px; width: 100%; padding: 28px 16px; border-radius: var(--radius-lg); background: var(--color-border-soft); }
.case-gallery__frame--plain { padding: 0; background: none; }
.case-gallery__slide { flex: 1; height: 420px; border-radius: var(--radius-lg); background: var(--color-fill1); }
.case-gallery__spacer { width: 40px; flex: none; }
.case-gallery__next { display: inline-flex; margin: 10px; padding: 2px; border: 1px solid var(--color-border-soft); border-radius: 16px; background: var(--color-bg); box-shadow: var(--shadow-e1); flex: none; }
.case-gallery__next img { width: 16px; height: 16px; }
.case-caption { font-size: 14px; line-height: 24px; color: var(--color-fg-secondary); text-align: center; }
.case-metrics { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.case-metric { display: flex; flex-direction: column; gap: 4px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-bg); }
.case-metric__value { font-size: 40px; line-height: 48px; font-weight: 600; }
.case-metric__label { font-size: 14px; line-height: 20px; color: var(--color-fg-secondary); }

.next-project { padding: 16px var(--page-gutter) 32px; }
.next-project .project-row { padding: 24px 0 0; }
.case-phone-header { display: none; }

@media (max-width: 1099px) {
  /* Tablet and phone: one column, following the phone case study design. */
  .case-phone-header { display: block; }
  .case-rail { position: static; height: auto; margin: 0; padding: 16px var(--page-gutter) 0; pointer-events: auto; }
  .case-row--overview { min-height: 0; }
  .case-rail__inner { gap: 16px; width: auto; }
  .case-rail .sound-toggle { display: none; } /* the site header above already has one */
  .case-contents { position: relative; }
  .case-contents__list { position: absolute; top: calc(100% + 8px); left: 0; z-index: 10; min-width: 200px; padding: 16px; gap: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-bg); box-shadow: 0 12px 24px -12px rgba(25, 24, 27, 0.16); }
  .case-row { display: flex; flex-direction: column; gap: 16px; padding: 20px var(--page-gutter); scroll-margin-top: 16px; }
  .case-row--overview { gap: 40px; padding-top: 40px; }
  .case-row__text, .case-row--overview .case-row__text { display: contents; }
  .case-row__visual { padding: 0; background: none; border: 0; }
  .case-row--overview .case-title { order: 1; font-size: 32px; line-height: 40px; }
  .case-row--overview .case-notice { order: 0; margin: 0; }
  .case-row--overview .case-row__visual { order: 2; }
  .case-row--overview .case-facts { order: 3; margin: 0; padding: 0; border: 0; gap: 24px; }
  .case-row--overview .case-overview { order: 4; }
  .case-overview { display: flex; flex-direction: column; gap: 8px; }
  .case-eyebrow, .case-eyebrow--phone-only { display: block; font-size: 14px; line-height: 24px; font-weight: 500; text-transform: uppercase; color: var(--color-fg-secondary); margin-bottom: -8px; }
  .case-heading, .case-lead { font-size: 24px; line-height: 32px; font-weight: 600; }
  .case-copy, .case-goals li { font-size: 16px; line-height: 28px; }
  .case-goals { gap: 8px; }
  .case-goals li::before { margin-top: 4px; }
  .case-fact { flex-direction: column; gap: 4px; }
  .case-fact dt { width: auto; padding: 0; font-size: 14px; line-height: 24px; }
  .case-fact dd { font-size: 16px; line-height: 28px; }
  .case-visual { border: 0; background: var(--color-fill1); border-radius: var(--radius-2xl); }
  .case-visual--hero, .case-visual--section, .case-visual--supporting { height: 240px; }
  .case-supporting { flex-direction: column; }
  .case-gallery__frame { padding: 0; background: none; }
  .case-gallery__spacer, .case-gallery__next { display: none; }
  .case-gallery__slide { height: 240px; border-radius: var(--radius-2xl); }
  .case-caption { font-size: 14px; line-height: 20px; }
  .case-metric { border: 0; background: var(--color-fill1); }
  .next-project { padding-top: 32px; }
  .next-project > .heading-4 { font-size: 24px; line-height: 32px; font-weight: 600; }
}

/* 7. About ------------------------------------------------------------------ */
.about { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding: 48px var(--page-gutter); }
.about-tabs { position: sticky; top: 24px; flex: none; width: 200px; display: flex; flex-direction: column; gap: 4px; }
.about-tab { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-lg); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-fg-secondary); transition: background-color 0.15s ease; }
.about-tab img { width: 20px; height: 20px; flex: none; }
.about-tab > span:not(.about-tab__count) { flex: 1; padding: 0 2px; }
.about-tab:hover { background: var(--color-fill1-alpha); }
.about-tab[aria-current="true"] { background: var(--color-fill1-alpha); color: var(--color-fg); }
.about-tab__count { flex: none; padding: 1px 5px; border: 1px solid var(--color-border-soft-alpha); border-radius: var(--radius-md); font-size: 12px; line-height: 16px; }
.about-main { flex: 0 1 844px; min-width: 0; display: flex; flex-direction: column; gap: 44px; }
.about-main > section { scroll-margin-top: 24px; }
.about-bio { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.about-bio .button { margin-top: 8px; }
.about-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.about-gallery img { width: 100%; aspect-ratio: 418 / 495; object-fit: cover; border-radius: var(--radius-sm); }

/* Photo label: an icon and a few words about the picture. With a mouse it appears on
   hover and follows the pointer; on touch screens it sits in the bottom corner of the photo. */
.about-photo { position: relative; }
.photo-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 6px; pointer-events: none; filter: drop-shadow(0 1px 0.5px rgba(25, 24, 27, 0.04)); }
.photo-tag__icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 2px; background: var(--utility-purple); box-shadow: var(--shadow-e1); }
.photo-tag__icon img { width: 16px; height: 16px; aspect-ratio: auto; border-radius: 0; }
.photo-tag__label { padding: 4px 8px; border-radius: 2px; background: var(--utility-purple); color: var(--utility-purple-accent); font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; }
@media (hover: hover) {
  .photo-tag { opacity: 0; transition: opacity 0.15s ease; }
  .about-photo:hover .photo-tag { opacity: 1; }
  .about-photo.is-tracking .photo-tag { left: 0; top: 0; bottom: auto; transform: translate(calc(var(--tag-x, 0px) + 14px), calc(var(--tag-y, 0px) + 18px)); }
}
.about-section-header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; margin-bottom: 16px; }
.about-section-title { font-size: 20px; line-height: 28px; font-weight: 600; }
.about-stat { display: flex; flex-direction: column; gap: 8px; color: var(--color-fg-secondary); }
.about-stat dt { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.about-stat dd { font-size: 16px; line-height: 24px; font-weight: 600; }
.book-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.book { display: flex; gap: 10px; min-width: 0; min-height: 127px; padding: 8px; border-radius: var(--radius-lg); background: var(--color-orange-accent); }
.book::before { content: ""; flex: none; width: 6px; border-radius: var(--radius-sm); background: var(--color-orange); }
.book__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.book__meta { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-orange-hover); }
.book__title { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--color-orange-text); }
.about-placeholder { height: 240px; border-radius: var(--radius-2xl); }

/* Note wall: the "Say something" button followed by the notes people have left.
   Each note takes one of the utility colours of the design system (listed at the end of this block). */
.note-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.note, .note-form { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 162px; padding: 6px 8px; border-radius: var(--radius-lg); font-size: 12px; line-height: 16px; }
.note { background: var(--note-accent); }
.note__message { overflow-wrap: anywhere; white-space: pre-line; }
.note__footer { position: relative; display: flex; align-items: center; color: var(--color-fg-secondary); white-space: nowrap; }
.note__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; border-radius: 2px; cursor: default; }
/* The date is a small dark label that appears above the name on hover (or on tap / keyboard focus). */
.note__date { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 1; padding: 2px 6px; border-radius: var(--radius-md); background: var(--color-fg); color: var(--color-fg-inverse); font-weight: 500; box-shadow: var(--shadow-e1); opacity: 0; transform: translateY(2px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; }
.note__name:hover + .note__date, .note__name:focus + .note__date { opacity: 1; transform: none; }
.note.is-new { animation: note-in 0.3s ease; }
@keyframes note-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

.note-composer { position: relative; }
.note-composer__open { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: var(--radius-md); background: var(--note-key); color: #fff; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; transition: filter 0.15s ease; }
.note-composer__open:hover { filter: brightness(1.08); }
.note-composer__open img { width: 18px; height: 18px; }
.note-composer__open span { padding: 0 2px; }
.note-form { height: 100%; gap: 6px; padding: 5px 7px; border: 1px dashed var(--color-border); background: var(--color-bg); }
.note-form textarea, .note-form input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font: inherit; letter-spacing: inherit; color: var(--color-fg); }
.note-form textarea { flex: 1; resize: none; }
.note-form textarea::placeholder, .note-form input::placeholder { color: var(--color-fg-secondary); opacity: 1; }
.note-form__error { color: var(--color-error-text); font-size: 11px; line-height: 14px; }
.note-form .note-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.note-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.note-form__post { flex: none; height: 28px; padding: 4px 10px; border-radius: var(--radius-md); background: var(--note-key); color: #fff; font-size: 13px; line-height: 18px; font-weight: 500; transition: opacity 0.15s ease; }
.note-form__post:disabled { opacity: 0.5; cursor: not-allowed; }

/* While someone is writing, a light veil greys out everything except the note being written. */
.note-dimmer { position: fixed; inset: 0; z-index: 40; background: rgba(255, 255, 255, 0.5); animation: dimmer-in 0.2s ease; }
@keyframes dimmer-in { from { opacity: 0; } to { opacity: 1; } }
.is-writing-note .note-composer { z-index: 41; }

/* Utility colours from the Radian design system: "key" for buttons, "accent" for note backgrounds. */
:root { --utility-purple: #803df5; --utility-purple-accent: #f6f1fd; }
.note--orange { --note-key: oklch(0.685 0.186 43.133); --note-accent: #ffeee5; }
.note--green { --note-key: oklch(0.654 0.216 142.602); --note-accent: oklch(0.977 0.027 145.361); }
.note--teal { --note-key: oklch(0.644 0.125 169.297); --note-accent: #e5fff9; }
.note--cyan { --note-key: oklch(0.656 0.109 194.818); --note-accent: oklch(0.982 0.026 196.729); }
.note--light-blue { --note-key: oklch(0.61 0.203 255.637); --note-accent: #edf5fd; }
.note--blue { --note-key: oklch(0.534 0.222 272.272); --note-accent: #eeeffc; }
.note--purple { --note-key: #803df5; --note-accent: #f6f1fd; }
.note--fuchsia { --note-key: #e642ff; --note-accent: oklch(0.97 0.028 325.792); }
.note--magenta { --note-key: oklch(0.619 0.251 347.256); --note-accent: oklch(0.971 0.017 336.187); }
.note--rose { --note-key: oklch(0.651 0.221 6.174); --note-accent: oklch(0.96 0.018 354.12); }
@media (max-width: 1099px) {
  .about { flex-direction: column; gap: 24px; padding-top: 24px; }
  /* Tablet and phone: the side menu becomes a row you can swipe. */
  .about-tabs { position: static; flex-direction: row; width: calc(100% + 2 * var(--page-gutter)); margin: 0 calc(-1 * var(--page-gutter)); padding: 0 var(--page-gutter); overflow-x: auto; scrollbar-width: none; }
  .about-tabs::-webkit-scrollbar { display: none; }
  .about-tab { flex: none; }
  .about-main { flex: none; width: 100%; gap: 40px; }
}
@media (max-width: 767px) {
  .book-list { grid-template-columns: 1fr; }
  .book__title { font-size: 20px; line-height: 28px; }
  .note-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* 8. Exploration ------------------------------------------------------------ */
/* A clean grid of tall tiles (modelled on dahnizzy.com): picture first, then the name and a short line.
   Four across on desktop, three on tablets, two on large phones, one on small phones. */
.exploration { display: flex; flex-direction: column; gap: 48px; padding: 48px var(--page-gutter) 64px; }
.exploration-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 64px 24px; }
.exploration-tile { position: relative; display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 24px; }
.exploration-tile__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 9 / 16; overflow: hidden; padding: 16px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-2xl); background: var(--color-fill1); color: var(--color-fg-secondary); font-size: 14px; line-height: 20px; text-align: center; }
.exploration-tile__media:has(img, video) { padding: 0; }
.exploration-tile__media img, .exploration-tile__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.exploration-tile__caption { display: flex; flex-direction: column; gap: 4px; }
.exploration-tile__name { display: flex; align-items: center; gap: 4px; font-size: 16px; line-height: 24px; font-weight: 600; }
.exploration-tile__about { font-size: 14px; line-height: 22px; color: var(--color-fg-secondary); }
/* When the name is a link, the whole tile is clickable. */
a.exploration-tile__link::after { content: ""; position: absolute; inset: 0; }
/* The arrow beside the name: hidden until the tile is hovered (or its link is focused). */
.arrow-up-right { flex: none; opacity: 0; transform: translate(-4px, 4px); transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.exploration-tile:hover .arrow-up-right, .exploration-tile:focus-within .arrow-up-right { opacity: 1; transform: none; }
@media (hover: none) {
  /* Touch screens have no hover, so the arrow simply shows on tiles that link somewhere. */
  .exploration-tile:has(a.exploration-tile__link) .arrow-up-right { opacity: 1; transform: none; }
}
@media (max-width: 1099px) {
  .exploration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
}
@media (max-width: 767px) {
  .exploration { gap: 24px; padding: 24px 16px 32px; }
  .exploration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .exploration-tile { gap: 12px; }
}
@media (max-width: 479px) {
  .exploration-grid { grid-template-columns: 1fr; }
  .exploration-tile { gap: 16px; }
}

/* 9. Resume ----------------------------------------------------------------- */
.resume-wrapper { display: flex; justify-content: center; padding: 48px var(--page-gutter); }
.resume { display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 980px; }
.resume__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.resume__name { font-size: 24px; line-height: 32px; font-weight: 600; }
.resume__role { margin-top: 4px; font-size: 16px; line-height: 28px; }
.resume__section { display: flex; flex-direction: column; gap: 8px; }
.resume__section--spaced { gap: 24px; }
.resume__label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-fg-secondary); }
.resume__contact-row { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }
.resume__contact-row dt { flex: none; width: 176px; color: var(--color-fg-secondary); }
.resume__contact-row a:hover { text-decoration: underline; }
.copy-icon-button { display: inline-flex; align-items: center; padding: 2px; border-radius: var(--radius-md); background: var(--color-fill1-alpha); transition: background-color 0.15s ease; }
.copy-icon-button:hover { background: var(--color-border-soft-alpha); }
.copy-icon-button img { width: 16px; height: 16px; }
/* After a successful copy the icon is replaced by a green tick and "Copied" for a moment. */
.copy-icon-button__copied { display: none; align-items: center; gap: 2px; padding: 0 4px 0 2px; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--color-green-text); white-space: nowrap; }
.copy-icon-button.is-copied, .copy-icon-button.is-copied:hover { background: var(--color-primary-focus); cursor: default; }
.copy-icon-button.is-copied img { display: none; }
.copy-icon-button.is-copied .copy-icon-button__copied { display: inline-flex; animation: copied-in 0.18s ease; }
@keyframes copied-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.resume-entry { display: flex; align-items: flex-start; gap: 24px; }
.resume-entry__dates { flex: none; width: 160px; font-size: 13px; line-height: 18px; color: var(--color-fg-secondary); padding-top: 1px; }
.resume-entry__details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.resume-entry__title { font-size: 14px; line-height: 20px; font-weight: 500; }
.resume-entry__points { padding-left: 21px; list-style: disc; font-size: 14px; line-height: 24px; color: var(--color-fg-secondary); }
.resume-entry__points strong { font-weight: 500; color: var(--color-fg); }
.resume-entry__images { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }
.resume-entry__images .placeholder { width: 200px; height: 150px; border-radius: var(--radius-2xl); }
@media (max-width: 767px) {
  .resume-wrapper { padding: 24px 16px 32px; }
  .resume { gap: 32px; }
  .resume__heading { flex-direction: column; align-items: flex-start; }
  .resume__contact-row dt { width: 72px; }
  .resume-entry { flex-direction: column; gap: 8px; }
  .resume-entry__dates { width: auto; }
  .resume-entry__images .placeholder { width: 100%; height: 240px; }
}

/* 10. Small pages ----------------------------------------------------------- */
.not-found { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 128px var(--page-gutter); }
.not-found .button { margin-top: 8px; }
@media (max-width: 767px) { .not-found { padding: 64px 16px; } }

.gate-wrapper { display: flex; justify-content: center; padding: 128px var(--page-gutter); }
.gate { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 440px; }
.gate__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-fill1); }
.gate__icon img { width: 20px; height: 20px; }
.gate__message { display: flex; flex-direction: column; gap: 8px; }
.gate__form { display: flex; flex-direction: column; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 14px; line-height: 20px; font-weight: 500; }
.field__control { display: flex; align-items: stretch; height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: var(--shadow-e1); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.field__control:focus-within { border-color: var(--color-fg-tertiary); box-shadow: 0 0 0 3px var(--color-border-soft-alpha); }
.field__control input { flex: 1; min-width: 0; padding: 0 10px; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; letter-spacing: inherit; color: var(--color-fg); }
.field__control input::placeholder { color: var(--color-fg-tertiary); }
.field__toggle { display: inline-flex; align-items: center; padding: 0 9px; }
.field__toggle img { width: 20px; height: 20px; }
.field--error .field__control { border-color: var(--color-error); box-shadow: 0 0 0 3px var(--color-error-focus); }
.field--error .field__toggle { border-left: 1px solid var(--color-border-soft); }
.gate__error { font-size: 14px; line-height: 20px; color: var(--color-error-text); }
.gate__actions { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 767px) { .gate-wrapper { padding: 48px 16px 64px; } }