/* Muhammad Yushafizul — portfolio styles
   Minimal layout with a classic jazz feel: aged cream paper, espresso ink, one brass accent,
   Didone headings and system fonts (nothing extra to download). Dark mode is a midnight jazz club. */

:root {
  --bg: #f5efe3;
  --surface: #fbf7ef;
  --soft: #eee5d3;
  --ink: #2a211c;
  --navy: #1f1915;
  --muted: #6b5d50;
  --line: #e2d6c1;
  --line-strong: #cbbb9d;
  --accent: #8a5c17;
  --accent-strong: #6b450d;
  --accent-soft: #f1e4c7;
  --success: #2e7349;
  --success-soft: #e6f2ea;
  --warning: #8a5d0f;
  --warning-soft: #f7eedb;
  --error: #b3261e;
  --error-soft: #fbe9e7;
  --heading: #1f1915;
  --primary: #1f1915;
  --primary-hover: #3b2f26;
  --on-primary: #f5efe3;
  --on-primary-muted: rgba(245, 239, 227, 0.72);
  --on-primary-soft: rgba(245, 239, 227, 0.14);
  --dock-bg: rgba(251, 247, 239, 0.92);
  --dock-bg-blur: rgba(251, 247, 239, 0.8);
  --pill-bg: rgba(251, 247, 239, 0.92);
  --accent-border: #dcc596;
  --wine: #7a2b2b;
  --grain-opacity: 0.05;
  color-scheme: light;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Didone faces ship with Apple devices and Microsoft Office; others fall back to a classic serif */
  --font-heading: "Bodoni 72", "Bodoni MT", Didot, "Didot LT STD", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --container: 1120px;
  --radius: 10px;
  --radius-small: 6px;
  --shadow: 0 1px 2px rgba(42, 33, 28, 0.06), 0 4px 16px rgba(42, 33, 28, 0.05);
  --header-height: 64px;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.viewer-open,
body.hello-playing,
body.certificate-modal-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent-strong);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--heading);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

h3 {
  font-size: 1.2rem;
}

h4 {
  font-size: 1.05rem;
}

p {
  margin: 0;
}

ul {
  margin: 0;
}

figure {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: -100px;
  left: 16px;
  padding: 10px 16px;
  color: var(--surface);
  background: var(--primary);
  border-radius: var(--radius-small);
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
  color: var(--surface);
}

.container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: clamp(48px, 7vw, 88px);
}

.section-soft,
.section-navy {
  background: var(--soft);
  border-block: 1px solid var(--line);
}

.section-heading {
  display: grid;
  gap: 10px;
  max-width: 720px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.section-heading > p:last-child:not(.section-number) {
  color: var(--muted);
}

.section-heading-row {
  max-width: none;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: 16px 48px;
}

.section-heading-row > div {
  display: grid;
  gap: 10px;
}

.section-number,
.eyebrow,
.experience-type,
.profile-kicker,
.skills-summary-label {
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.button-primary {
  color: var(--on-primary);
  background: var(--primary);
}

.button-primary:hover {
  color: var(--on-primary);
  background: var(--primary-hover);
}

.button-secondary {
  color: var(--heading);
  background: var(--surface);
  border-color: var(--line-strong);
}

.button-secondary:hover {
  color: var(--heading);
  border-color: var(--primary);
}

.button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 10;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--heading);
  font-weight: 650;
  text-decoration: none;
}

.brand:hover {
  color: var(--heading);
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--on-primary);
  background: var(--primary);
  border-radius: var(--radius-small);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.header-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  color: var(--heading);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.header-action:hover {
  color: var(--heading);
  border-color: var(--primary);
}

/* ---------- Language and theme controls ---------- */

.header-tools,
.hub-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-switch {
  display: inline-flex;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.lang-switch button {
  min-width: 38px;
  min-height: 32px;
  padding: 4px 10px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.lang-switch button:hover {
  color: var(--heading);
}

.lang-switch button[aria-pressed="true"] {
  color: var(--on-primary);
  background: var(--primary);
}

.theme-toggle {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  color: var(--heading);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 150ms ease, transform 300ms ease;
}

.theme-toggle:hover {
  border-color: var(--heading);
}

.theme-toggle:active {
  transform: rotate(20deg);
}

.theme-icon {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 200ms ease, transform 300ms ease;
}

/* Shows the mode you would switch to: a moon in light mode, a sun in dark mode */
.theme-icon-sun,
[data-theme="dark"] .theme-icon-moon {
  opacity: 0;
  transform: rotate(-60deg) scale(0.6);
}

[data-theme="dark"] .theme-icon-sun {
  opacity: 1;
  transform: none;
}

.hub-controls {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
}

/* Bahasa Melayu: keep the English text hidden for the instant before it is swapped (boot.js has a timeout) */
.i18n-pending body {
  visibility: hidden;
}

/* ---------- Bottom navigation (dock) ---------- */

body {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.dock {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--dock-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(42, 33, 28, 0.12), 0 1px 3px rgba(42, 33, 28, 0.08);
  transform: translateX(-50%);
}

@supports (backdrop-filter: blur(12px)) {
  .dock {
    background: var(--dock-bg-blur);
    backdrop-filter: blur(12px) saturate(1.4);
  }
}

.dock-link {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--muted);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.dock-link svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dock-link:hover {
  color: var(--heading);
  background: var(--soft);
}

.dock-link[aria-current="page"] {
  color: var(--on-primary);
  background: var(--primary);
}

/* Desktop: label appears as a tooltip above the icon */
.dock-label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  padding: 4px 10px;
  color: var(--on-primary);
  background: var(--primary);
  border-radius: var(--radius-small);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.dock-link:hover .dock-label,
.dock-link:focus-visible .dock-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (hover: hover) and (pointer: fine) {
  .dock-link:hover {
    transform: translateY(-3px);
  }
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: 36px;
  color: var(--muted);
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 20px 40px;
}

.footer-grid > div:first-child {
  display: grid;
  gap: 6px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--heading);
  text-decoration: underline;
}

.footer-social {
  display: flex;
  gap: 8px;
}

.footer-social a {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  /* Logos stay white on their brand colour in both themes */
  color: #fff;
  border-radius: 50%;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.footer-social a:hover {
  color: #fff;
  box-shadow: 0 4px 12px rgba(42, 33, 28, 0.2);
  transform: translateY(-2px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

/* ---------- Page hero (inner pages) ---------- */

.page-hero {
  padding-block: clamp(48px, 8vw, 96px) clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}

.page-hero-content {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin-inline: max(20px, calc((100% - var(--container)) / 2));
}

.page-hero-content > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1.1rem;
}

.page-hero-link {
  justify-self: start;
  font-weight: 600;
  text-decoration: none;
}

.page-hero-link:hover {
  text-decoration: underline;
}

/* ---------- Home ---------- */

.home-intro {
  padding-block: clamp(40px, 7vw, 88px);
}

.home-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}

.home-intro-copy {
  display: grid;
  gap: 18px;
}

.home-intro-copy h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
}

.home-lead {
  max-width: 34em;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.home-portrait img,
.profile-portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
  background: var(--soft);
  border-radius: var(--radius);
}

.home-facts {
  padding-block: 0 clamp(48px, 7vw, 80px);
}

.fact-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
}

.fact-list > div {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 24px 24px 0 0;
}

.fact-list > div + div {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.fact-list dt {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fact-list dd {
  margin: 0;
  color: var(--heading);
  font-weight: 550;
}

.fact-list .fact-note {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.92rem;
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.link-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.link-card:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.link-card p {
  color: var(--muted);
}

.link-card-cta {
  margin-top: 6px;
  color: var(--accent);
  font-weight: 600;
}

.link-card:hover .link-card-cta {
  text-decoration: underline;
}

.link-card-accent {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

/* ---------- Shared cards & lists ---------- */

.profile-glass-panel,
.skills-summary,
.strength-card,
.aspiration-card,
.experience-item,
.programme-record,
.contact-form,
.case-study,
.certificate-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.skill-pills,
.skills-evidence,
.program-gallery-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-pills span,
.skills-evidence span,
.program-gallery-tags span {
  padding: 4px 10px;
  color: var(--heading);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 550;
}

.clean-list {
  display: grid;
  gap: 6px;
  padding-left: 1.2em;
  color: var(--muted);
}

/* ---------- Profile ---------- */

.profile-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.75fr);
  gap: 24px;
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

.profile-glass-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
}

.profile-identity {
  color: var(--heading);
  font-weight: 550;
}

.profile-biography {
  display: grid;
  gap: 12px;
  color: var(--muted);
}

.profile-resume-button {
  justify-self: start;
  margin-top: 6px;
}

.profile-portrait-column {
  align-self: start;
}

.profile-vision {
  grid-column: 1 / -1;
}

.profile-vision-intro {
  max-width: 60em;
  color: var(--muted);
}

.aspiration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.aspiration-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  background: var(--bg);
}

.aspiration-card h3 {
  font-size: 1.05rem;
}

.aspiration-card p {
  color: var(--muted);
  font-size: 0.93rem;
}

.aspiration-card-heading,
.aspiration-index,
.card-index,
.icon-bubble {
  display: none;
}

.skills-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 2fr);
  align-items: start;
  gap: 24px;
}

.skills-summary {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  display: grid;
  gap: 14px;
  padding: 24px;
}

.skills-summary h3 {
  font-size: 1.15rem;
}

.skills-summary > p:not(.skills-summary-label) {
  color: var(--muted);
  font-size: 0.93rem;
}

.skills-summary-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.skills-summary-stats div {
  display: grid;
  padding: 12px;
  background: var(--soft);
  border-radius: var(--radius-small);
}

.skills-summary-stats strong {
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  line-height: 1.1;
}

.skills-summary-stats span {
  color: var(--muted);
  font-size: 0.82rem;
}

.skills-summary .skills-disclaimer {
  font-size: 0.82rem;
}

.strength-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.strength-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px;
}

.skill-card-top {
  display: flex;
}

.skill-category {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.strength-card h3 {
  font-size: 1.05rem;
}

.strength-card > p {
  color: var(--muted);
  font-size: 0.93rem;
}

.skill-score {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.85rem;
}

.skill-score strong {
  color: var(--heading);
}

.skill-meter {
  height: 6px;
  overflow: hidden;
  background: var(--soft);
  border-radius: 999px;
}

.skill-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.education-grid {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 24px 64px;
}

.timeline {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.timeline-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 16px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}

.timeline-year {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 650;
}

.timeline-item p {
  color: var(--muted);
}

/* ---------- Experience ---------- */

.experience-list {
  display: grid;
  gap: 20px;
}

.experience-item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: clamp(20px, 3vw, 32px);
}

.experience-meta {
  display: grid;
  align-content: start;
  gap: 2px;
  color: var(--muted);
  font-size: 0.9rem;
}

.experience-meta span:first-child {
  color: var(--heading);
  font-weight: 600;
}

.experience-content {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.experience-content > h4 {
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 500;
}

.experience-content > p {
  color: var(--muted);
}

.internship-gallery,
.program-gallery {
  display: grid;
  gap: 18px;
  margin-top: 16px;
}

.program-gallery {
  margin-top: 40px;
}

.internship-gallery-heading,
.program-gallery-heading,
.research-gallery-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 12px 32px;
}

.internship-gallery-heading > div,
.program-gallery-heading > div:first-child,
.research-gallery-heading > div {
  display: grid;
  gap: 6px;
}

.internship-gallery-heading > p,
.program-gallery-intro > p,
.research-gallery-heading > p {
  color: var(--muted);
}

.program-gallery-intro {
  display: grid;
  gap: 12px;
}

.program-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 170px;
  grid-auto-flow: dense;
  gap: 10px;
}

.program-card a {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: var(--soft);
  border-radius: var(--radius-small);
}

.program-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.program-card a:hover img {
  transform: scale(1.03);
}

.program-card-featured,
.program-card-wide {
  grid-column: span 2;
}

.program-card-featured,
.program-card-portrait {
  grid-row: span 2;
}

.program-card figcaption {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  padding: 28px 12px 10px;
  color: #fff;
  background: linear-gradient(to top, rgba(10, 18, 34, 0.78), transparent);
  font-size: 0.82rem;
  line-height: 1.35;
}

.program-card figcaption span {
  opacity: 0.85;
  font-size: 0.75rem;
}

.internship-gallery-note,
.program-gallery-note {
  color: var(--muted);
  font-size: 0.9rem;
}

.program-gallery-archive-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.program-gallery-archive-link > div {
  display: grid;
  gap: 4px;
}

/* ---------- Programme records ---------- */

.programme-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
}

.programme-stats div {
  display: grid;
  padding: 20px 20px 0 0;
}

.programme-stats div + div {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.programme-stats strong {
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: 2.2rem;
  line-height: 1.1;
}

.programme-stats span {
  color: var(--muted);
  font-size: 0.9rem;
}

.programme-filter,
.certificate-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.programme-filter button,
.certificate-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  color: var(--heading);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 550;
  cursor: pointer;
}

.programme-filter button:hover,
.certificate-tab:hover {
  border-color: var(--primary);
}

.programme-filter button span,
.certificate-tab-count {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.programme-filter button.is-active,
.certificate-tab.is-active {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}

.programme-filter button.is-active span,
.certificate-tab.is-active .certificate-tab-count {
  color: var(--on-primary-muted);
}

.programme-record-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.programme-record {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px;
}

.programme-record-with-gallery {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 20px;
}

.programme-record-copy {
  display: grid;
  align-content: start;
  gap: 10px;
}

.programme-record-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.record-status {
  padding: 2px 8px;
  color: var(--success);
  background: var(--success-soft);
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0;
}

.record-status-review {
  color: var(--warning);
  background: var(--warning-soft);
}

.programme-record h3 {
  font-size: 1.08rem;
}

.programme-record p {
  color: var(--muted);
  font-size: 0.93rem;
}

.programme-record dl {
  display: grid;
  gap: 6px;
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}

.programme-record dl div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
}

.programme-record dt {
  color: var(--muted);
}

.programme-record dd {
  margin: 0;
  color: var(--heading);
}

.programme-record-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.programme-record-gallery a {
  overflow: hidden;
  background: var(--soft);
  border-radius: var(--radius-small);
}

.programme-record-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.programme-record-note {
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Research ---------- */

.case-study {
  padding: clamp(24px, 4vw, 40px);
}

.case-copy {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.case-copy > p:not(.section-number) {
  color: var(--muted);
}

.research-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
  counter-reset: step;
}

.research-process div {
  padding: 14px;
  background: var(--soft);
  border-radius: var(--radius-small);
}

.research-process span {
  display: none;
}

.research-process strong {
  color: var(--heading);
  font-weight: 600;
}

.research-process strong::before {
  counter-increment: step;
  content: counter(step) ". ";
  color: var(--accent);
}

.research-gallery {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.research-gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.research-poster {
  display: grid;
  gap: 10px;
}

.research-poster a {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.research-poster a > span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  color: var(--heading);
  background: var(--pill-bg);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.research-poster figcaption {
  display: grid;
  gap: 2px;
}

.research-poster figcaption strong {
  color: var(--heading);
}

.research-poster figcaption span {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Certificates ---------- */

.certificate-tab-copy {
  display: inline-flex;
}

.certificate-tab-copy small {
  display: none;
}

.certificate-tab-copy strong {
  font-weight: inherit;
}

.certificate-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.certificate-search-field {
  position: relative;
  flex: 1 1 280px;
}

.certificate-search-field svg {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  transform: translateY(-50%);
}

.certificate-search-field input {
  width: 100%;
  padding-left: 38px;
}

.certificate-sort-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.certificate-results-status {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 0.9rem;
}

.certificate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.certificate-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.certificate-preview-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--soft);
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: zoom-in;
}

.certificate-card-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.certificate-preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  background: rgba(42, 33, 28, 0.55);
  font-weight: 600;
  opacity: 0;
  transition: opacity 150ms ease;
}

.certificate-preview-button:hover .certificate-preview-overlay,
.certificate-preview-button:focus-visible .certificate-preview-overlay {
  opacity: 1;
}

.certificate-preview-overlay i {
  font-style: normal;
}

.certificate-privacy-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 2px 8px;
  color: var(--heading);
  background: var(--pill-bg);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.certificate-card-body {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
}

.certificate-card-meta {
  display: flex;
  justify-content: space-between;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.certificate-card-meta time {
  color: var(--muted);
}

.certificate-card-body h3 {
  font-size: 1.05rem;
}

.certificate-organization,
.certificate-detail-line {
  color: var(--muted);
  font-size: 0.9rem;
}

.certificate-detail-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.certificate-card-link {
  justify-self: start;
  margin-top: 4px;
  padding: 0;
  color: var(--accent);
  background: none;
  border: 0;
  font-weight: 600;
  cursor: pointer;
}

.certificate-card-link:hover {
  text-decoration: underline;
}

.certificate-empty-state {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 40px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

.certificate-empty-state p {
  color: var(--muted);
}

.certificate-privacy-note,
.privacy-note {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding: 16px 18px;
  color: var(--muted);
  background: var(--accent-soft);
  border-radius: var(--radius);
  font-size: 0.92rem;
}

.certificate-privacy-note > span,
.privacy-note > span {
  color: var(--accent);
  font-weight: 700;
}

.certificate-privacy-note strong {
  color: var(--heading);
}

.certificate-modal,
.photo-viewer {
  padding: 0;
  color: var(--ink);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(10, 18, 34, 0.3);
}

.certificate-modal::backdrop,
.photo-viewer::backdrop {
  background: rgba(16, 24, 40, 0.72);
}

.certificate-modal {
  width: min(calc(100% - 24px), 1040px);
  max-height: calc(100dvh - 24px);
  background: var(--surface);
}

.certificate-modal-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100dvh - 24px);
}

.certificate-modal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.certificate-zoom-controls {
  display: flex;
  gap: 6px;
}

.certificate-zoom-controls button,
.certificate-modal-close,
.photo-viewer-close {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  color: var(--heading);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  font-size: 1.1rem;
  cursor: pointer;
}

.certificate-zoom-controls button span {
  font-size: 0.85rem;
}

.certificate-modal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  min-height: 0;
  overflow: auto;
}

.certificate-modal-viewport {
  min-height: 0;
  max-height: calc(100dvh - 90px);
  overflow: auto;
  padding: 16px;
  background: var(--soft);
}

.certificate-modal-viewport img {
  width: calc(100% * var(--certificate-zoom, 1));
  max-width: none;
  margin-inline: auto;
}

.certificate-modal-details {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 24px;
}

.certificate-modal-category {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.certificate-modal-details h2 {
  font-size: 1.4rem;
}

.certificate-modal-description,
.certificate-modal-privacy {
  color: var(--muted);
  font-size: 0.93rem;
}

.certificate-modal-facts {
  display: grid;
  gap: 8px;
  margin: 0;
  font-size: 0.9rem;
}

.certificate-modal-facts div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.certificate-modal-facts dt {
  color: var(--muted);
}

.certificate-modal-facts dd {
  margin: 0;
  color: var(--heading);
}

.certificate-modal-file {
  justify-self: start;
}

/* ---------- Photo viewer ---------- */

.photo-viewer {
  width: min(calc(100% - 24px), 1100px);
  max-width: none;
  height: min(calc(100dvh - 24px), 900px);
  max-height: none;
  color: #fff;
  background: #10182a;
  overflow: hidden;
}

.photo-viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.photo-viewer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 10px 18px;
}

.photo-viewer-count {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.photo-viewer-close {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
}

.photo-viewer-figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
  padding: 0 64px 18px;
}

.photo-viewer-figure img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.photo-viewer-figure figcaption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  text-align: center;
}

.photo-viewer-nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.photo-viewer-nav:hover {
  background: rgba(255, 255, 255, 0.22);
}

.photo-viewer-prev {
  left: 12px;
}

.photo-viewer-next {
  right: 12px;
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(28px, 5vw, 64px);
}

.contact-copy {
  display: grid;
  gap: 14px;
}

.contact-copy > p:not(.section-number) {
  color: var(--muted);
}

.contact-channels {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.contact-channel {
  display: grid;
  gap: 2px;
  padding: 16px 18px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}

.contact-channel:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.contact-channel > span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-channel strong {
  color: var(--heading);
  overflow-wrap: anywhere;
}

.contact-channel small {
  color: var(--accent);
  font-weight: 600;
}

.privacy-note {
  margin-top: 4px;
}

.contact-form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 3vw, 32px);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form label {
  display: grid;
  gap: 6px;
}

.contact-form label > span {
  color: var(--heading);
  font-size: 0.9rem;
  font-weight: 600;
}

.contact-form label small {
  color: var(--muted);
  font-weight: 400;
}

input,
select,
textarea {
  min-height: 44px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
  outline-offset: 0;
}

.honeypot {
  position: absolute !important;
  left: -9999px;
}

.form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.form-footer .button {
  margin-left: auto;
}

.form-status {
  flex: 1 1 220px;
  font-size: 0.92rem;
}

.form-status:empty {
  display: none;
}

.form-status.success,
.form-status.error {
  padding: 10px 12px;
  border-radius: var(--radius-small);
}

.form-status.success {
  color: var(--success);
  background: var(--success-soft);
}

.form-status.error {
  color: var(--error);
  background: var(--error-soft);
}

/* ---------- Welcome ("hello") opening ---------- */

.hello {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--soft);
  cursor: pointer;
  /* Failsafe: never block the page if the script does not run */
  animation: hello-failsafe 0s 6s forwards;
  transition: transform 850ms cubic-bezier(0.76, 0, 0.24, 1);
}

/* Curved bottom edge that trails the sheet as it lifts away */
.hello::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -10%;
  width: 120%;
  height: 0;
  background: var(--soft);
  border-radius: 0 0 50% 50%;
  transition: height 850ms cubic-bezier(0.76, 0, 0.24, 1);
}

.intro-seen .hello,
html:not(.js) .hello {
  display: none;
}

.hello-word {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0;
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

.hello-word::before {
  content: "";
  width: 0.22em;
  height: 0.22em;
  background: var(--accent);
  border-radius: 50%;
}

.hello-word.is-in {
  animation: hello-word-in 320ms ease-out both;
}

/* The middle greetings flick past, so they need a much quicker fade */
.hello-word.is-in.is-quick {
  animation-duration: 90ms;
}

.hello-skip {
  position: absolute;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  padding: 8px 12px;
  color: var(--muted);
  background: none;
  border: 0;
  font-size: 0.85rem;
  cursor: pointer;
}

.hello.is-leaving {
  pointer-events: none;
  transform: translateY(-100%);
}

.hello.is-leaving::after {
  height: 14vh;
}

.hello.is-leaving .hello-word {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 300ms ease, transform 500ms ease;
}

@keyframes hello-word-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hello-failsafe {
  to { visibility: hidden; pointer-events: none; }
}

/* Home content rises in as the welcome lifts away */
.hello-playing .home-intro-copy > *,
.hello-playing .home-portrait,
.hello-playing .dock {
  opacity: 0;
}

.home-page .home-intro-copy > *,
.home-page .home-portrait {
  animation: home-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-page .home-intro-copy > :nth-child(2) { animation-delay: 60ms; }
.home-page .home-intro-copy > :nth-child(3) { animation-delay: 120ms; }
.home-page .home-intro-copy > :nth-child(4) { animation-delay: 180ms; }
.home-page .home-portrait { animation-delay: 120ms; }

.hello-playing .home-intro-copy > *,
.hello-playing .home-portrait {
  animation: none;
}

.home-page .dock {
  animation: dock-rise 600ms 250ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hello-playing .dock {
  animation: none;
}

@keyframes home-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes dock-rise {
  from { opacity: 0; transform: translate(-50%, 24px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Link page (after the welcome) ---------- */

.hub {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  /* Extra top room keeps the language/theme controls clear of the photo */
  padding: calc(76px + env(safe-area-inset-top, 0px)) 16px calc(32px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 55%),
    var(--bg);
  transition: opacity 500ms ease, transform 600ms cubic-bezier(0.76, 0, 0.24, 1);
}

.hub[hidden] {
  display: none;
}

.hub-card {
  display: grid;
  justify-items: center;
  width: min(100%, 420px);
  text-align: center;
}

.hub-avatar {
  width: 104px;
  height: 104px;
  object-fit: cover;
  object-position: center 18%;
  border: 3px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(42, 33, 28, 0.14);
}

.hub-name {
  margin-top: 16px;
  font-size: 1.6rem;
}

.hub-description {
  max-width: 30em;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.95rem;
}

.hub-links {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.hub-link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 18px 10px 10px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.hub-link:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.hub-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--heading);
  background: var(--soft);
  border-radius: 12px;
}

.hub-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hub-text {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.hub-text strong {
  color: var(--heading);
  font-weight: 650;
}

.hub-text small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.85rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-arrow {
  color: var(--muted);
  font-size: 1.1rem;
}

.hub-link-primary {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}

.hub-link-primary:hover {
  color: var(--on-primary);
  border-color: var(--primary);
}

.hub-link-primary .hub-icon {
  color: var(--on-primary);
  background: var(--on-primary-soft);
}

.hub-link-primary .hub-text strong,
.hub-link-primary .hub-arrow {
  color: var(--on-primary);
}

.hub-link-primary .hub-text small {
  color: var(--on-primary-muted);
}

.hub-note {
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Items rise in one after another as the welcome lifts away */
.hub-card > *,
.hub-links > li {
  animation: hub-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hub-card > :nth-child(1) { animation-delay: 250ms; }
.hub-card > :nth-child(2) { animation-delay: 310ms; }
.hub-card > :nth-child(3) { animation-delay: 360ms; }
.hub-card > :nth-child(4) { animation: none; }
.hub-links > li:nth-child(1) { animation-delay: 420ms; }
.hub-links > li:nth-child(2) { animation-delay: 470ms; }
.hub-links > li:nth-child(3) { animation-delay: 520ms; }
.hub-links > li:nth-child(4) { animation-delay: 570ms; }
.hub-links > li:nth-child(5) { animation-delay: 620ms; }
.hub-card > :nth-child(5) { animation-delay: 700ms; }

.hub.is-leaving {
  pointer-events: none;
  opacity: 0;
  transform: scale(1.02);
}

@keyframes hub-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Social platform logos ---------- */
/* Each platform keeps its own colour; the logo itself is drawn in white. */

.brand-icon,
.hub-icon .brand-icon {
  fill: currentColor;
  stroke: none;
}

.hub-icon[class*="brand-"] {
  color: #fff;
}

.brand-tiktok,
.footer-social .brand-tiktok {
  background: #000000;
}

.brand-instagram,
.footer-social .brand-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.brand-facebook,
.footer-social .brand-facebook {
  background: #0866ff;
}

.brand-linkedin,
.footer-social .brand-linkedin {
  background: #0a66c2;
}

/* ---------- Dark theme ---------- */
/* Chosen with the sun/moon button (or the device setting on first visit); boot.js sets data-theme before paint. */

:root[data-theme="dark"] {
  --bg: #14110e;
  --surface: #1c1814;
  --soft: #241e18;
  --ink: #ebe1cf;
  --heading: #f6eedf;
  --muted: #b2a38d;
  --line: #342b22;
  --line-strong: #4a3d30;
  --accent: #d4a656;
  --accent-strong: #e8c27c;
  --accent-soft: #2e2414;
  --accent-border: #5c4622;
  --primary: #ecdfc6;
  --primary-hover: #fff8ea;
  --on-primary: #1a1511;
  --on-primary-muted: rgba(26, 21, 17, 0.7);
  --on-primary-soft: rgba(26, 21, 17, 0.08);
  --success: #7ccf9a;
  --success-soft: #16301f;
  --warning: #e3b766;
  --warning-soft: #33280f;
  --error: #f28b82;
  --error-soft: #3a1a17;
  --dock-bg: rgba(28, 24, 20, 0.94);
  --dock-bg-blur: rgba(28, 24, 20, 0.8);
  --pill-bg: rgba(20, 17, 14, 0.88);
  --wine: #c96f6f;
  --grain-opacity: 0.07;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

/* Photos and posters keep their colours but lose a little glare on dark backgrounds */
[data-theme="dark"] .program-card img,
[data-theme="dark"] .programme-record-gallery img,
[data-theme="dark"] .research-poster img {
  filter: brightness(0.92);
}

/* ---------- Classic jazz details ---------- */
/* Small, CSS-only touches: paper grain, brass rules, record-label monogram and Didone type.
   No images or fonts to download beyond a tiny inline SVG. */

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

[data-theme="dark"] body::before {
  filter: invert(1);
}

h1,
h2 {
  font-weight: 500;
  letter-spacing: -0.005em;
}

h1 {
  line-height: 1.08;
}

h3,
h4 {
  font-weight: 600;
}

/* Section labels read like the small caps on a record sleeve, led by a brass rule */
.section-number,
.eyebrow,
.experience-type,
.profile-kicker,
.skills-summary-label {
  letter-spacing: 0.16em;
  font-size: 0.74rem;
}

.eyebrow::before,
.section-number::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-right: 12px;
  vertical-align: middle;
  background: currentColor;
}

/* Buttons: squared-off, letter-spaced, like a club ticket */
.button {
  border-radius: 2px;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.button-primary:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.button-secondary {
  background: transparent;
}

.button-secondary:hover {
  border-color: var(--accent);
}

/* Monogram as a record label: dark disc, brass ring */
.brand-mark {
  color: var(--accent);
  border-radius: 50%;
  font-style: italic;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}

[data-theme="dark"] .brand-mark {
  color: #1a1511;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}

.header-action,
.lang-switch,
.theme-toggle {
  background: transparent;
}

/* Art-deco double rules instead of single hairlines on the big dividers */
.page-hero {
  border-bottom: 3px double var(--line-strong);
}

.site-footer {
  border-top: 3px double var(--line-strong);
}

.section-soft,
.section-navy {
  border-block: 3px double var(--line);
}

.fact-list {
  border-top: 3px double var(--line-strong);
}

.fact-list dt {
  letter-spacing: 0.14em;
  font-size: 0.74rem;
}

.fact-list dd {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 500;
}

/* Page heroes end with a small brass ornament: a note between two rules (hidden from screen readers) */
.page-hero-content::after {
  content: "\266A";
  content: "\266A" / "";
  width: 88px;
  margin-top: 6px;
  color: var(--accent);
  font-size: 0.95rem;
  line-height: 1;
  text-align: center;
  background:
    linear-gradient(var(--accent), var(--accent)) left center / 32px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right center / 32px 1px no-repeat;
}

/* Portraits framed like a print on the club wall, with a faint warm tone */
.home-portrait img,
.profile-portrait {
  border-radius: 2px;
  filter: sepia(0.12) saturate(0.95);
  box-shadow: 0 0 0 8px var(--surface), 0 0 0 9px var(--line-strong), 0 18px 40px rgba(42, 33, 28, 0.16);
}

/* Cards: quieter corners, brass edge on hover */
.profile-glass-panel,
.skills-summary,
.strength-card,
.aspiration-card,
.experience-item,
.programme-record,
.contact-form,
.case-study,
.certificate-card,
.link-card,
.hub-link {
  border-radius: 4px;
}

.link-card:hover,
.hub-link:hover {
  border-color: var(--accent-border);
}

.link-card-cta {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.skill-pills span,
.skills-evidence span,
.program-gallery-tags span {
  border-radius: 2px;
  background: transparent;
  border-color: var(--line-strong);
}

/* Dock: the current page lights up in brass */
.dock-link[aria-current="page"] {
  color: var(--accent);
  background: var(--primary);
}

[data-theme="dark"] .dock-link[aria-current="page"] {
  color: #1a1511;
  background: var(--accent);
}

/* Welcome: a dark club curtain in both themes, the greeting in brass italics */
.hello,
.hello::after {
  background: #14110e;
}

.hello-word {
  color: #d4a656;
  font-style: italic;
  font-weight: 400;
}

.hello-word::before {
  content: "\266A";
  width: auto;
  height: auto;
  color: #c96f6f;
  background: none;
  font-size: 0.5em;
  font-style: normal;
}

.hello-skip {
  color: #b2a38d;
}

.hub {
  background:
    radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 55%),
    var(--bg);
}

.hub-avatar {
  border-color: var(--surface);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 20px rgba(42, 33, 28, 0.18);
}

.hub-name {
  font-style: italic;
  font-weight: 500;
}

::selection {
  color: var(--on-primary);
  background: var(--accent);
}

/* ---------- Jazz ambience ---------- */

/* Autumn leaves (jazz-ambience.js) drift behind the content; cards and panels sit above them */
.leaf-fall {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.leaf {
  position: absolute;
  top: -40px;
  left: var(--leaf-x);
  width: var(--leaf-size);
  height: var(--leaf-size);
  animation: leaf-fall var(--leaf-duration) linear var(--leaf-delay) infinite;
  will-change: transform;
}

.leaf svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  fill: var(--leaf-colour);
  animation: leaf-sway var(--leaf-sway) ease-in-out var(--leaf-delay) infinite alternate;
}

.leaf .leaf-vein {
  fill: none;
  stroke: rgba(42, 33, 28, 0.35);
  stroke-width: 0.8;
}

.leaf-tone-0 { --leaf-colour: #b07a2a; }
.leaf-tone-1 { --leaf-colour: #a24f28; }
.leaf-tone-2 { --leaf-colour: #7a2b2b; }
.leaf-tone-3 { --leaf-colour: #c49a45; }

[data-theme="dark"] .leaf svg {
  opacity: 0.42;
}

@keyframes leaf-fall {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(var(--leaf-drift), calc(100vh + 80px), 0) rotate(var(--leaf-spin)); }
}

@keyframes leaf-sway {
  from { transform: translateX(-14px) rotate3d(1, 0.4, 0, 0deg); }
  to { transform: translateX(14px) rotate3d(1, 0.4, 0, 65deg); }
}

/* Home: the portrait becomes a record sleeve, with a vinyl sliding out behind it.
   It turns slowly while the background music plays. */
.home-portrait {
  position: relative;
  isolation: isolate;
}

.home-intro {
  overflow-x: clip;
}

@media (min-width: 720px) {
  .home-portrait::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 9%;
    right: -30%;
    width: 82%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(circle, var(--bg) 0 3%, #c49a45 3.5% 16%, #7a2b2b 16.5% 17.5%, #15110d 18% 22%, transparent 22.5%),
      repeating-radial-gradient(circle, #15110d 0 2px, #29211a 2px 3.5px);
    box-shadow: 0 18px 40px rgba(42, 33, 28, 0.25);
    transition: right 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .home-portrait::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 9%;
    right: -30%;
    width: 82%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 20deg, rgba(255, 255, 255, 0.1), transparent 15%, rgba(255, 255, 255, 0.06) 50%, transparent 65%, rgba(255, 255, 255, 0.1));
    transition: right 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .music-playing .home-portrait::before {
    right: -36%;
    animation: music-spin 6s linear infinite;
  }

  .music-playing .home-portrait::after {
    right: -36%;
  }
}

/* A thin brass outer frame around portraits */
.home-portrait img,
.profile-portrait {
  outline: 1px solid var(--accent-border);
  outline-offset: 14px;
}

/* A music stave drawn in the theme's line colour separates the home intro from the facts */
.home-facts .container::before {
  content: "";
  display: block;
  height: 56px;
  margin-bottom: 12px;
  background: var(--line-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='56' viewBox='0 0 320 56'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 16C53 11 107 11 160 16S267 21 320 16'/%3E%3Cpath d='M0 22C53 17 107 17 160 22S267 27 320 22'/%3E%3Cpath d='M0 28C53 23 107 23 160 28S267 33 320 28'/%3E%3Cpath d='M0 34C53 29 107 29 160 34S267 39 320 34'/%3E%3Cpath d='M0 40C53 35 107 35 160 40S267 45 320 40'/%3E%3C/g%3E%3Cg fill='black' stroke='none'%3E%3Cellipse cx='64' cy='30' rx='4' ry='2.8' transform='rotate%28-22 64 30%29'/%3E%3Crect x='67.2' y='13' width='1.2' height='17'/%3E%3Cellipse cx='196' cy='33' rx='4' ry='2.8' transform='rotate%28-22 196 33%29'/%3E%3Cellipse cx='218' cy='29' rx='4' ry='2.8' transform='rotate%28-22 218 29%29'/%3E%3Crect x='199.2' y='16' width='1.2' height='17'/%3E%3Crect x='221.2' y='12' width='1.2' height='17'/%3E%3Cpath d='M199.2 16L222.4 12V14.6L199.2 18.6Z'/%3E%3C/g%3E%3C/svg%3E") left center / 320px 56px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='56' viewBox='0 0 320 56'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 16C53 11 107 11 160 16S267 21 320 16'/%3E%3Cpath d='M0 22C53 17 107 17 160 22S267 27 320 22'/%3E%3Cpath d='M0 28C53 23 107 23 160 28S267 33 320 28'/%3E%3Cpath d='M0 34C53 29 107 29 160 34S267 39 320 34'/%3E%3Cpath d='M0 40C53 35 107 35 160 40S267 45 320 40'/%3E%3C/g%3E%3Cg fill='black' stroke='none'%3E%3Cellipse cx='64' cy='30' rx='4' ry='2.8' transform='rotate%28-22 64 30%29'/%3E%3Crect x='67.2' y='13' width='1.2' height='17'/%3E%3Cellipse cx='196' cy='33' rx='4' ry='2.8' transform='rotate%28-22 196 33%29'/%3E%3Cellipse cx='218' cy='29' rx='4' ry='2.8' transform='rotate%28-22 218 29%29'/%3E%3Crect x='199.2' y='16' width='1.2' height='17'/%3E%3Crect x='221.2' y='12' width='1.2' height='17'/%3E%3Cpath d='M199.2 16L222.4 12V14.6L199.2 18.6Z'/%3E%3C/g%3E%3C/svg%3E") left center / 320px 56px repeat-x;
}

.home-facts .fact-list {
  border-top: 0;
}

/* Little notes rise from the record while the music plays */
.music-player-bar {
  position: relative;
}

.music-player-notes {
  position: absolute;
  left: 18px;
  bottom: 38px;
  width: 24px;
  height: 0;
  pointer-events: none;
}

.music-player-notes i {
  position: absolute;
  left: 0;
  bottom: 0;
  color: var(--accent);
  font-size: 0.95rem;
  font-style: normal;
  opacity: 0;
}

.music-player.is-playing .music-player-notes i {
  animation: music-note-rise 3.6s ease-out infinite;
}

.music-player.is-playing .music-player-notes i:nth-child(2) {
  left: 10px;
  color: var(--wine);
  animation-delay: 1.2s;
}

.music-player.is-playing .music-player-notes i:nth-child(3) {
  left: 4px;
  animation-delay: 2.4s;
}

@keyframes music-note-rise {
  0% { opacity: 0; transform: translate(0, 0) rotate(-8deg); }
  15% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(14px, -46px) rotate(12deg); }
}

.music-player.is-minimised .music-player-notes,
.music-player.prompt-open .music-player-notes,
.music-player.playlist-open .music-player-notes {
  display: none;
}

/* Long labels stay on one line more often on phones */
@media (max-width: 640px) {
  .section-number,
  .eyebrow,
  .experience-type,
  .profile-kicker,
  .skills-summary-label {
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leaf-fall,
  .music-player-notes {
    display: none;
  }

  .music-playing .home-portrait::before {
    animation: none;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .link-grid,
  .programme-record-grid,
  .certificate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aspiration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skills-layout,
  .education-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .skills-summary {
    position: static;
  }

  .programme-record-with-gallery {
    grid-template-columns: 1fr;
  }

  .certificate-modal-layout {
    grid-template-columns: 1fr;
  }

  .certificate-modal-viewport {
    max-height: 55dvh;
  }
}

@media (max-width: 860px) {
  .experience-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .experience-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .internship-gallery-heading,
  .program-gallery-heading,
  .research-gallery-heading,
  .section-heading-row {
    grid-template-columns: 1fr;
  }

  .program-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .program-gallery-grid {
    grid-auto-rows: 140px;
  }

  .research-gallery-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .container,
  .profile-intro-grid {
    width: min(calc(100% - 32px), var(--container));
  }

  .page-hero-content {
    margin-inline: 16px;
  }

  /* Room for résumé, language and theme controls beside the logo */
  .site-header .brand-name {
    display: none;
  }

  .header-tools {
    gap: 6px;
  }

  .header-action {
    padding: 8px 12px;
  }

  /* Phones: small labels under the icons, no tooltips */
  .dock {
    width: min(calc(100% - 16px), 380px);
    gap: 0;
    padding: 5px;
  }

  .dock-link {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 54px;
    align-content: center;
    gap: 2px;
    border-radius: 18px;
  }

  .dock-link svg {
    width: 20px;
    height: 20px;
  }

  .dock-label {
    position: static;
    padding: 0;
    color: inherit;
    background: none;
    font-size: 0.6rem;
    letter-spacing: -0.01em;
    opacity: 1;
    transform: none;
  }

  .dock {
    border-radius: 24px;
  }

  .home-intro-grid,
  .profile-intro-grid {
    grid-template-columns: 1fr;
  }

  .home-portrait {
    order: -1;
    justify-self: center;
    width: 100%;
    max-width: 220px;
    margin-inline: auto;
  }

  .profile-portrait-column {
    order: -1;
    justify-self: center;
    width: 100%;
    max-width: 260px;
    margin-inline: auto;
  }

  .home-actions .button {
    flex: 1 1 auto;
  }

  .fact-list,
  .link-grid,
  .aspiration-grid,
  .strength-grid,
  .programme-record-grid,
  .certificate-grid,
  .research-process,
  .form-row {
    grid-template-columns: 1fr;
  }

  .fact-list > div,
  .fact-list > div + div {
    padding: 16px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .programme-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .programme-stats div,
  .programme-stats div + div {
    padding: 14px 0;
    border-left: 0;
  }

  .programme-record-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .photo-viewer {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }

  .photo-viewer-figure {
    padding: 0 12px 72px;
  }

  .photo-viewer-nav {
    top: auto;
    bottom: 14px;
    transform: none;
  }

  .form-footer .button {
    width: 100%;
  }
}

@media (max-width: 359px) {
  .header-tools {
    gap: 4px;
  }

  .header-action {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.82rem;
  }

  .lang-switch button {
    min-width: 32px;
    padding: 4px 7px;
  }

  .theme-toggle {
    width: 36px;
    height: 36px;
  }

  .dock-label {
    font-size: 0.54rem;
    letter-spacing: -0.02em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }

  .hello {
    animation-duration: 0s !important;
    animation-delay: 6s !important;
  }

  .hello.is-leaving {
    transform: none;
    opacity: 0;
    transition: opacity 250ms ease !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .dock,
  .home-actions,
  .contact-form {
    display: none;
  }

  body {
    background: #fff;
  }
}

/* ---------- Background music player ---------- */
/* Sits above the bottom dock on phones and tablets, beside it on wide screens. Uses the theme tokens,
   so it follows light and dark mode. */

.music-player {
  --music-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --music-gap: calc(16px + env(safe-area-inset-bottom, 0px));
  position: fixed;
  z-index: 55;
  left: 50%;
  bottom: calc(var(--music-gap) + 76px);
  width: min(calc(100% - 16px), 380px);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.3;
  pointer-events: none;
  transform: translateX(-50%);
  transition: transform 320ms var(--music-ease), opacity 220ms ease;
}

body.has-music-player {
  padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1100px) {
  .music-player {
    left: max(16px, env(safe-area-inset-left, 0px));
    bottom: var(--music-gap);
    width: 340px;
    transform: none;
  }

  body.has-music-player {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

.music-player > * {
  pointer-events: auto;
}

.hello-playing .music-player,
body.certificate-modal-open .music-player,
body.viewer-open .music-player {
  visibility: hidden;
}

.home-page .music-player {
  animation: music-rise 600ms 350ms var(--music-ease) both;
}

@keyframes music-rise {
  from { opacity: 0; margin-bottom: -16px; }
  to { opacity: 1; margin-bottom: 0; }
}

/* Slides away while a form field is focused so the on-screen keyboard never covers it */
.music-player.is-tucked {
  opacity: 0;
  margin-bottom: -24px;
  transition: opacity 200ms ease, margin-bottom 300ms var(--music-ease);
}

.music-player.is-tucked > * {
  pointer-events: none;
}

.music-player button {
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 0;
  color: inherit;
  font: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.music-player button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.music-player svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.music-player .music-icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.music-player-bar,
.music-player .music-player-launcher,
.music-player-playlist,
.music-player-prompt {
  background: var(--dock-bg);
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(42, 33, 28, 0.12), 0 1px 3px rgba(42, 33, 28, 0.08);
}

@supports (backdrop-filter: blur(12px)) {
  .music-player-bar,
  .music-player .music-player-launcher,
  .music-player-playlist,
  .music-player-prompt {
    background: var(--dock-bg-blur);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
  }
}

.music-player-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  transform-origin: left center;
  transition: transform 320ms var(--music-ease), opacity 220ms ease, visibility 0s;
}

.music-player.is-minimised .music-player-bar {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.9);
  transition: transform 320ms var(--music-ease), opacity 180ms ease, visibility 0s 320ms;
}

/* Minimised: a small round button showing the equaliser */
.music-player .music-player-launcher {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 52px;
  color: var(--accent);
  border-radius: 50%;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
  transition: transform 320ms var(--music-ease), opacity 180ms ease, visibility 0s 320ms;
}

.music-player.is-minimised .music-player-launcher {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: transform 320ms var(--music-ease), opacity 220ms ease, visibility 0s;
}

.music-player .music-player-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  color: var(--on-primary);
  background: var(--primary);
  border-radius: 50%;
  transition: background-color 180ms ease, transform 180ms ease;
}

.music-player .music-player-toggle:active {
  transform: scale(0.94);
}

.music-player-toggle-icon {
  position: relative;
  z-index: 1;
  display: grid;
  color: #1a1511;
}

/* The play button is a vinyl record with a brass label; it turns while music plays */
.music-player .music-player-toggle,
:root[data-theme="dark"] .music-player .music-player-toggle {
  background: #15110d;
  box-shadow: inset 0 0 0 1px rgba(212, 166, 86, 0.35);
}

.music-player-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, #d4a656 0 30%, #15110d 31% 34%, transparent 35%),
    repeating-radial-gradient(circle, #15110d 0 1.5px, #2b231b 1.5px 2.5px),
    conic-gradient(from 30deg, rgba(255, 255, 255, 0.12), transparent 18%, rgba(255, 255, 255, 0.08) 50%, transparent 68%, rgba(255, 255, 255, 0.12));
  background-blend-mode: normal, normal, screen;
}

.music-player.is-playing .music-player-toggle::before {
  animation: music-spin 5s linear infinite;
}

@media (hover: hover) {
  .music-player .music-player-toggle:hover,
  :root[data-theme="dark"] .music-player .music-player-toggle:hover {
    background: #15110d;
    box-shadow: inset 0 0 0 1px rgba(212, 166, 86, 0.7);
  }
}

.music-player-spinner {
  position: absolute;
  inset: -3px;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 160ms ease;
}

.music-player.is-loading .music-player-spinner {
  opacity: 1;
  animation: music-spin 800ms linear infinite;
}

@keyframes music-spin {
  to { transform: rotate(360deg); }
}

.music-player .music-player-button {
  width: 40px;
  height: 40px;
  color: var(--muted);
  border-radius: 50%;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.music-player .music-player-button:active {
  transform: scale(0.92);
}

.music-player .music-player-button[aria-expanded="true"] {
  color: var(--heading);
  background: var(--soft);
}

@media (hover: hover) {
  .music-player .music-player-button:hover {
    color: var(--heading);
    background: var(--soft);
  }

  .music-player-playlist li button:hover {
    background: var(--soft);
  }
}

.music-player-meta {
  display: grid;
  min-width: 0;
  flex: 1;
  padding: 0 4px 0 10px;
}

.music-player-label {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.music-player-title {
  overflow: hidden;
  color: var(--heading);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.music-player-wave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.music-player-bar-wave {
  display: none;
}

.music-player-wave i {
  width: 3px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.5;
}

.music-player.is-playing .music-player-wave i {
  opacity: 1;
  animation: music-wave 1.1s ease-in-out infinite;
}

.music-player.is-playing .music-player-wave i:nth-child(2) { animation-delay: -0.3s; }
.music-player.is-playing .music-player-wave i:nth-child(3) { animation-delay: -0.6s; }
.music-player.is-playing .music-player-wave i:nth-child(4) { animation-delay: -0.15s; }

@keyframes music-wave {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}

/* ---------- Song list ---------- */

.music-player-playlist {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  max-height: min(420px, 58vh);
  max-height: min(420px, 58dvh);
  padding: 10px 8px 8px;
  border-radius: 20px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: transform 260ms var(--music-ease), opacity 200ms ease, visibility 0s 260ms;
}

.music-player.playlist-open .music-player-playlist {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: transform 260ms var(--music-ease), opacity 200ms ease, visibility 0s;
}

.music-player-playlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 6px 10px;
}

.music-player-playlist-heading {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.music-player-playlist ol {
  display: grid;
  gap: 2px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.music-player .music-player-playlist li button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  color: var(--ink);
  text-align: left;
  border-radius: 12px;
  transition: background-color 160ms ease;
}

.music-player .music-player-playlist li button:active {
  background: var(--soft);
}

.music-player .music-player-playlist li button[aria-current="true"] {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-soft);
}

.music-track-number {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

[aria-current="true"] .music-track-number {
  color: var(--accent);
}

/* ---------- "Wanna play a song?" ---------- */

.music-player-prompt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 12px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  padding: 16px;
  border-radius: 20px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: transform 320ms var(--music-ease), opacity 220ms ease, visibility 0s 320ms;
}

.music-player.prompt-open .music-player-prompt {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: transform 420ms var(--music-ease), opacity 260ms ease, visibility 0s;
}

.music-prompt-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--wine);
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 50%;
}

.music-player.prompt-open .music-prompt-icon {
  animation: music-prompt-bob 2.2s ease-in-out infinite;
}

@keyframes music-prompt-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.music-prompt-copy {
  align-self: center;
}

.music-prompt-title {
  margin: 0;
  color: var(--heading);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
}

.music-prompt-text {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.music-prompt-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.music-player .music-prompt-actions button {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  font-weight: 600;
  border-radius: 999px;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.music-player .music-prompt-actions button:active {
  transform: scale(0.97);
}

.music-player .music-prompt-yes {
  color: var(--on-primary);
  background: var(--primary);
}

.music-player .music-prompt-yes svg {
  width: 14px;
  height: 14px;
}

.music-player .music-prompt-no {
  color: var(--heading);
  background: var(--surface);
  border: 1px solid var(--line-strong);
}

@media (hover: hover) {
  .music-player .music-prompt-yes:hover {
    background: var(--primary-hover);
  }

  .music-player .music-prompt-no:hover {
    background: var(--soft);
  }
}

:root[data-theme="dark"] .music-player-bar,
:root[data-theme="dark"] .music-player .music-player-launcher,
:root[data-theme="dark"] .music-player-playlist,
:root[data-theme="dark"] .music-player-prompt {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Phones: bigger tap targets, rounded like the dock */
@media (max-width: 640px) {
  .music-player-bar {
    border-radius: 24px;
  }

  .music-player .music-player-button {
    width: 44px;
    height: 44px;
  }

  .music-player svg {
    width: 20px;
    height: 20px;
  }

  .music-player-playlist {
    max-height: min(460px, 62vh);
    max-height: min(460px, 62dvh);
    border-radius: 24px;
  }

  .music-player-playlist::before {
    content: "";
    align-self: center;
    width: 36px;
    height: 4px;
    margin-bottom: 8px;
    background: var(--line-strong);
    border-radius: 999px;
  }

  .music-player .music-player-playlist li button {
    min-height: 52px;
  }
}

@media (max-width: 360px) {
  .music-player [data-music-previous] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .music-player,
  .music-player *,
  .music-player *::before {
    transition-duration: 0s !important;
  }

  .home-page .music-player,
  .music-player.prompt-open .music-prompt-icon,
  .music-player.is-playing .music-player-toggle::before {
    animation: none;
  }

  .music-player.is-playing .music-player-wave i {
    animation: none;
    height: 10px;
  }

  .music-player.is-loading .music-player-spinner {
    animation-duration: 2s;
  }
}

@media print {
  .music-player {
    display: none;
  }
}

/* ---------- Page transitions ---------- */
/* router.js swaps pages inside a View Transition. Only opacity and transform animate, which the
   browser composites on the GPU, so the change stays smooth at the screen's full frame rate.
   The bottom bar and the music player have their own names: they hold still while the page moves. */

.dock {
  view-transition-name: dock;
}

.music-player {
  view-transition-name: music-player;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: page-leave 200ms cubic-bezier(0.4, 0, 1, 1) both;
  }

  ::view-transition-new(root) {
    animation: page-enter 460ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
  }

  /* The bar only changes which icon is highlighted: a quick cross-fade, no movement */
  ::view-transition-group(dock),
  ::view-transition-group(music-player) {
    animation-duration: 0s;
  }

  ::view-transition-old(dock),
  ::view-transition-new(dock) {
    animation-duration: 220ms;
  }
}

@keyframes page-leave {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.995);
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.998);
  }
}

/* A page that has not arrived yet (slow connection) shows a progress cursor */
.is-navigating,
.is-navigating a {
  cursor: progress;
}