/* PML Studios website styles.
   Layout: indigo top bar, warm paper page, left-aligned serif text,
   one small vermilion accent, dark closing band. Values come from the
   PML Studios design system. */

@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-display-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-display-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url(fonts/playfair-display-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(fonts/source-serif-4-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(fonts/source-serif-4-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(fonts/source-serif-4-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url(fonts/inter-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url(fonts/inter-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* Colour */
  --indigo: #20114d;
  --indigo-deep: #130a2e;
  --indigo-hover: #33206e;
  --paper: #f3f3f3;
  --paper-shade: #e5e5e5;
  --surface: var(--paper);
  --surface-raised: #ffffff;
  --surface-sunken: var(--paper-shade);
  --ink: var(--indigo);
  --ink-muted: #57536b;
  --ink-soft: #404894;   /* lighter indigo for the home page introduction */
  --mist: #cfcbe3;
  --line: #d4d4d4;
  --line-strong: #7d7892;
  --vermilion: #e6542d;
  --vermilion-deep: #b23a18;
  --vermilion-bright: #ff7b52;
  --sky: #8ec5ec;          /* Email icon */
  --sky-deep: #6aaee0;
  --navy: #1d3461;         /* LinkedIn icon */
  --navy-hover: #2b4a82;
  --action: var(--indigo);
  --on-action: var(--paper);
  --accent: var(--vermilion);
  --accent-text: var(--vermilion-deep);
  --focus: var(--vermilion-deep);
  --focus-inverse: var(--vermilion-bright);

  /* Type */
  --font-display: "Playfair Display", Georgia, serif;
  --font-text: "Source Serif 4", Georgia, serif;
  --font-ui: Inter, Arial, Helvetica, sans-serif;

  /* Spacing, 8px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-full: 999px;

  /* The top bar stays in view; anchors and sticky headings sit below it */
  --header-h: 64px;
  --header-offset: var(--header-h);   /* 0 while the bar is tucked away */

  /* Movement */
  --quick: 150ms;
  --smooth: 320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 17px/1.65 var(--font-text);
}

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

/* Hidden things stay hidden even when a layout rule sets display (used by the artwork filter) */
[hidden] { display: none !important; }

a { color: inherit; }

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

.wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

.skip {
  position: absolute; left: 16px; top: -60px;
  background: var(--surface-raised); color: var(--ink);
  font: 600 15px/1 var(--font-ui); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); z-index: 20;
}
.skip:focus { top: 12px; }

/* ---------- Type ---------- */

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); margin: 0; text-wrap: balance; }

.display-xl { font-weight: 500; font-size: clamp(56px, 7.4vw, 92px); line-height: 1; letter-spacing: -0.02em; }
.display { font-weight: 500; font-size: clamp(42px, 5.6vw, 64px); line-height: 1.05; letter-spacing: -0.015em; }
.heading-1 { font-weight: 600; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.01em; }
.heading-2 { font-weight: 600; font-size: clamp(26px, 3vw, 32px); line-height: 1.15; }
.heading-3 { font-weight: 600; font-size: 24px; line-height: 1.25; }
.heading-4 { font-weight: 600; font-size: 19px; line-height: 1.3; }

p { margin: 0; }
.lead { font-size: clamp(19px, 2vw, 22px); line-height: 1.5; max-width: 34ch; }
.lead.wide { max-width: 52ch; }
.prose { max-width: 66ch; display: grid; gap: var(--space-4); }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.prose strong { font-weight: 600; }

.caption { font: 400 13px/1.5 var(--font-ui); color: var(--ink-muted); }
.label { font: 500 13px/1.4 var(--font-ui); letter-spacing: 0.01em; }

.text-link {
  font: 500 15px/1.4 var(--font-ui); color: var(--accent-text);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color var(--quick);
}
.text-link:hover { color: var(--ink); }
/* Arrow pointing up and to the right, for links that lead to another page */
.text-link .arrow-ur {
  display: inline-block; width: 0.7em; height: 0.7em; margin-left: 5px; vertical-align: 0;
  stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--quick) var(--ease);
}
.text-link:hover .arrow-ur { transform: translate(2px, -2px); }

/* Small tag used for project labels such as "School (GCSE)" */
.tag {
  display: inline-block; font: 500 13px/1.4 var(--font-ui); letter-spacing: 0.01em;
  color: var(--ink-muted); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 3px 10px;
}

/* ---------- Top bar and navigation ---------- */

.site-header {
  background: var(--indigo); color: var(--paper); position: sticky; top: 0; z-index: 10;
  transition: transform var(--smooth) var(--ease);
}
/* Tucks away while scrolling down, slides back when scrolling up */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header :focus-visible { outline-color: var(--focus-inverse); }

.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: 0; min-height: var(--header-h); }

.brand { display: block; flex: none; }
/* The full logo's indigo square disappears into the indigo bar, so the bar can be shorter than the
   file: the square's empty top and bottom margins are hidden, the letters and STUDIOS stay whole. */
.brand { height: var(--header-h); overflow: hidden; display: flex; align-items: center; }
.brand img { height: 64px; width: auto; flex: none; }   /* the square's own margins leave space above and below the letters */
.brand:focus-visible { outline-offset: -3px; }

.nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-6); }
.nav > li { position: relative; display: flex; align-items: center; gap: 2px; }

.nav a.top {
  font: 500 15px/1 var(--font-ui); color: var(--paper); text-decoration: none;
  padding: var(--space-2) 0; border-bottom: 2px solid transparent;
  transition: border-color var(--quick);
}
.nav a.top:hover { border-bottom-color: var(--mist); }
.nav a.top[aria-current="page"], .nav li.here > a.top { border-bottom-color: var(--vermilion-bright); }
.menu a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }


.sub-btn {
  appearance: none; background: none; border: 0; color: var(--paper); cursor: pointer;
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm);
}
.sub-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; transition: transform var(--quick); }
.sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.menu {
  list-style: none; margin: 0; padding: var(--space-2) 0;
  position: absolute; top: calc(100% + 10px); left: -16px; min-width: 232px;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-sm);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
}
/* Invisible bridge so the pointer can travel from the item to its menu */
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav > li:last-child .menu { left: auto; right: -16px; }
.menu a {
  display: block; font: 500 15px/1.3 var(--font-ui); color: var(--ink); text-decoration: none;
  padding: 10px var(--space-4); transition: background-color var(--quick);
}
.menu a:hover, .menu a:focus-visible { background: var(--surface-sunken); }
.menu :focus-visible { outline-color: var(--focus); outline-offset: -2px; }

.has-menu.open > .menu { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 861px) {
  .menu { max-height: none !important; }   /* the phone menu sets a height inline */
}
@media (hover: hover) and (min-width: 861px) {
  .has-menu:hover > .menu { opacity: 1; visibility: visible; transform: none; }
  .has-menu:hover > .sub-btn svg { transform: rotate(180deg); }
  /* Clicking the arrow while the menu is open closes it until the pointer leaves */
  .has-menu.shut:hover > .menu { opacity: 0; visibility: hidden; transform: translateY(-4px); }
  .has-menu.shut:hover > .sub-btn svg { transform: none; }
}
.sub-btn:hover { background: rgba(207, 203, 227, 0.14); }

/* Phone menu button: three lines that turn into a cross */
.menu-btn {
  display: none; appearance: none; cursor: pointer; padding: 0;
  width: 44px; height: 44px; margin-right: -10px;
  color: var(--paper); background: none; border: 0; border-radius: var(--radius-sm);
}
.menu-btn .lines { position: relative; display: block; width: 24px; height: 18px; margin: auto; }
.menu-btn .lines span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
  transition: top var(--smooth) var(--ease), transform var(--smooth) var(--ease), opacity 200ms var(--ease);
}
.menu-btn .lines span:nth-child(1) { top: 0; }
.menu-btn .lines span:nth-child(2) { top: 8px; }
.menu-btn .lines span:nth-child(3) { top: 16px; }
.menu-btn[aria-expanded="true"] .lines span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .lines span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.menu-btn[aria-expanded="true"] .lines span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .menu-btn { display: block; }
  .bar { flex-wrap: wrap; row-gap: 0; }
  /* The panel slides open by animating its single row from 0 to full height */
  #site-nav {
    display: grid; grid-template-rows: 0fr; flex-basis: 100%; visibility: hidden;
    transition: grid-template-rows var(--smooth) var(--ease), visibility 0s linear var(--smooth);
  }
  #site-nav.open {
    grid-template-rows: 1fr; visibility: visible;
    max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
    transition: grid-template-rows var(--smooth) var(--ease), visibility 0s;
  }
  .nav { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; overflow: hidden; overflow: clip; }
  .nav > li { flex-wrap: wrap; border-top: 1px solid rgba(207, 203, 227, 0.25); }
  .nav > li:first-child { margin-top: var(--space-3); }
  .nav > li:last-child { margin-bottom: var(--space-3); }
  .nav a.top { flex: 1; padding: var(--space-4) 0; border-bottom: 0; }
  .nav a.top[aria-current="page"], .nav li.here > a.top { text-decoration: underline; text-decoration-color: var(--vermilion-bright); text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .sub-btn { width: 44px; height: 44px; }
  .sub-btn svg { width: 14px; height: 14px; transition: transform var(--smooth) var(--ease); }
  /* Sub-pages drop down smoothly; the script sets the open height */
  .menu, .nav > li:last-child .menu {
    position: static; flex-basis: 100%; min-width: 0; padding: 0;
    background: none; border: 0; transform: none;
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height var(--smooth) var(--ease), opacity var(--smooth) var(--ease), visibility 0s linear var(--smooth);
  }
  .has-menu.open > .menu {
    opacity: 1; visibility: visible;
    transition: max-height var(--smooth) var(--ease), opacity var(--smooth) var(--ease), visibility 0s;
  }
  .menu li:last-child { padding-bottom: var(--space-3); }
  .menu::before { display: none; }
  .menu a { color: var(--mist); padding: var(--space-2) var(--space-4); }
  .menu a:hover, .menu a:focus-visible { background: none; color: var(--paper); }
  .menu :focus-visible { outline-color: var(--focus-inverse); }
}

/* ---------- Buttons and contact badges ---------- */

.btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn {
  display: inline-block; font: 600 15px/1 var(--font-ui); text-decoration: none;
  background: var(--action); color: var(--on-action);
  padding: 14px var(--space-5); border-radius: var(--radius-sm);
  transition: background-color var(--quick);
}
.btn:hover { background: var(--indigo-hover); }

.badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-5); }
.badge { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); }
.badge .dot {
  width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--accent);
  display: grid; place-items: center; transition: background-color var(--quick);
}
.badge:hover .dot { background: var(--vermilion-deep); }
.badge.mail .dot { background: var(--sky); }
.badge.mail:hover .dot { background: var(--sky-deep); }
.badge.mail svg { stroke: var(--indigo-deep); }
.badge.linkedin .dot { background: var(--navy); }
.badge.linkedin:hover .dot { background: var(--navy-hover); }
.badge svg { width: 20px; height: 20px; stroke: var(--on-action); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.badge span { font: 500 13px/1.4 var(--font-ui); letter-spacing: 0.01em; }

/* ---------- Images and placeholders ---------- */

.photo { border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.r-4x3 { aspect-ratio: 4 / 3; }
.r-3x2 { aspect-ratio: 3 / 2; }
.r-4x5 { aspect-ratio: 4 / 5; }
.r-1x1 { aspect-ratio: 1 / 1; }

/* A labelled empty box where a photo will go */
.ph {
  border-radius: var(--radius-md); background: var(--surface-sunken);
  display: flex; align-items: flex-end; padding: var(--space-4);
}
.ph span { font: 400 13px/1.5 var(--font-ui); color: var(--ink-muted); }

/* A labelled note where text is still to be written */
.todo {
  font: 400 15px/1.55 var(--font-ui); color: var(--ink-muted);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); max-width: 66ch;
}
.todo b { font-weight: 600; color: var(--ink); }

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

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-7); align-items: center;
  padding-block: var(--space-9) var(--space-8);
}
.hero .lead { margin-top: var(--space-5); color: var(--ink-soft); }
.hero .btns { margin-top: var(--space-6); }
.hero .badges { margin-top: var(--space-6); }

.feat { display: block; text-decoration: none; color: inherit; }
.feat .photo img { transition: transform var(--smooth) var(--ease); }
.feat:hover .photo img { transform: scale(1.02); }
.feat .caption { margin-top: var(--space-4); }
.feat h2 { margin-top: var(--space-1); }

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-8) var(--space-7); }
}

/* ---------- Page head ---------- */

.page-head { padding-block: var(--space-8) var(--space-7); display: grid; gap: var(--space-5); }
.crumb { font: 500 13px/1.4 var(--font-ui); color: var(--ink-muted); }
.crumb a { color: var(--ink-muted); text-underline-offset: 3px; }
.crumb a:hover { color: var(--ink); }
.crumb .sep { margin: 0 var(--space-2); color: var(--line-strong); }
.rule { width: 64px; height: 4px; background: var(--accent); border-radius: 0; }

section + section { margin-top: var(--space-8); }
.page-end { padding-bottom: var(--space-9); }

/* ---------- Projects overview ---------- */

/* One project per row, photo side alternating */
.project-row {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-7); align-items: center;
}
.project-row + .project-row { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--line); }
.project-row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.project-row.flip > .cover, .service-block.flip > .ph, .service-block.flip > .photo { order: 2; }
.service-block { align-items: start; }
.about-intro .links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.project { display: grid; gap: var(--space-4); align-content: start; }
.project .body { display: grid; gap: var(--space-3); justify-items: start; }
a.cover { display: block; text-decoration: none; }
.project-row a.cover img { transition: transform var(--smooth) var(--ease); }
.project-row a.cover:hover img { transform: scale(1.02); }
.project h2 a { text-decoration: none; }
.project h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--accent); }

@media (max-width: 860px) {
  .project-row, .project-row.flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .project-row.flip > .cover, .service-block.flip > .ph, .service-block.flip > .photo { order: 0; }
  .project-row + .project-row { margin-top: var(--space-7); padding-top: var(--space-7); }
}

/* ---------- Project pages ---------- */

.project-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-7); align-items: start; }
.facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.facts dt { font: 500 13px/1.6 var(--font-ui); color: var(--ink-muted); }
.facts dd { margin: 0; font: 400 15px/1.5 var(--font-ui); }

.split { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--space-6) var(--space-7); align-items: start; }
.split > h2 { position: sticky; top: calc(var(--header-offset) + var(--space-5)); transition: top var(--smooth) var(--ease); }
html.header-hidden { --header-offset: 0px; }

.parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.parts h3 { margin-bottom: var(--space-2); }

.changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 66ch; }
.changes li { padding: var(--space-4) 0; border-top: 1px solid var(--line); display: grid; gap: var(--space-1); }
.changes li:last-child { border-bottom: 1px solid var(--line); }
.changes b { font: 600 15px/1.4 var(--font-ui); }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }

.next-prev { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5); border-top: 1px solid var(--line); padding-top: var(--space-5); }

@media (max-width: 860px) {
  .project-intro, .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .split > h2 { position: static; }
  .parts { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Artwork ---------- */

.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter {
  appearance: none; cursor: pointer; font: 500 14px/1 var(--font-ui);
  color: var(--ink); background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 10px var(--space-4);
  transition: background-color var(--quick), color var(--quick);
}
.filter:hover { background: var(--surface-sunken); }
.filter[aria-pressed="true"] { background: var(--action); color: var(--on-action); border-color: var(--action); }
.filter-note { max-width: 66ch; min-height: 1.65em; }
.art-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3) var(--space-5); }
.sort { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.sort-btn {
  appearance: none; cursor: pointer; font: 500 13px/1 var(--font-ui); color: var(--ink-muted);
  background: none; border: 0; padding: 9px var(--space-3); transition: background-color var(--quick), color var(--quick);
}
.sort-btn + .sort-btn { border-left: 1px solid var(--line-strong); }
.sort-btn:hover { background: var(--surface-sunken); }
.sort-btn[aria-pressed="true"] { background: var(--surface-sunken); color: var(--ink); }

/* Several photos of one piece: swipe or use the arrows */
.carousel { min-width: 0; }
.car-stage { position: relative; }
.carousel .track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--radius-md);
}
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .slide { scroll-snap-align: start; scroll-snap-stop: always; display: grid; }
.car-btn {
  appearance: none; cursor: pointer; padding: 0; width: 36px; height: 36px; display: grid; place-items: center;
  color: var(--ink); background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-full);
  transition: background-color var(--quick) var(--ease), transform var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}
.car-btn:hover { background: var(--surface-sunken); }
.car-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Arrows sit over the photo, one each side, centred on its height */
.car-side {
  position: absolute; z-index: 1; top: 50%; width: 44px; height: 44px;
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  box-shadow: 0 1px 3px rgba(19, 10, 46, 0.18); transform: translateY(-50%);
}
.car-side.prev { left: var(--space-3); }
.car-side.next { right: var(--space-3); }
.car-side:hover { background: var(--surface-raised); box-shadow: 0 2px 8px rgba(19, 10, 46, 0.24); }
.car-side:active { transform: translateY(-50%) scale(0.94); }
.car-controls {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: var(--space-3); margin-top: var(--space-3);
}
.car-count { grid-column: 2; min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; }
/* Pause or play the slideshow: a small circle beside the count, with a 44px touch area */
.car-play { grid-column: 3; justify-self: start; position: relative; width: 28px; height: 28px; border-color: var(--line); }
.car-play::after { content: ""; position: absolute; inset: -8px; }
.car-play svg { width: 10px; height: 10px; }
/* A ring round the button fills as the wait for the next photo runs down */
.car-play .car-ring { position: absolute; top: -2px; left: -2px; width: 30px; height: 30px; transform: rotate(-90deg); pointer-events: none; }
.car-play .car-ring circle { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: butt; stroke-dasharray: 100; stroke-dashoffset: 100; }
.car-play.counting .car-ring circle { animation: car-ring var(--car-delay, 4s) linear forwards; }
@keyframes car-ring { to { stroke-dashoffset: 0; } }
.car-play .i-play { fill: currentColor; stroke-width: 1.2; }
.car-play .i-play, .car-play.paused .i-pause { display: none; }
.car-play.paused .i-play { display: block; }

/* Project photo gallery: a large frame, each photo shown whole */
.project-gallery { display: grid; gap: var(--space-5); }
.pslide { margin: 0; display: grid; gap: var(--space-2); justify-items: center; }
.pframe {
  appearance: none; border: 0; cursor: zoom-in; width: 100%; padding: var(--space-4);
  height: var(--frame-h); display: grid; place-items: center;
  background: var(--surface-sunken); border-radius: var(--radius-md);
}
.pframe img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.gallery-car .car-controls { margin-top: var(--space-2); }
/* The photo frame above any caption is clamp(300px, 52vw, 600px) tall (see .pframe): centre the arrows on it */
.carousel, .project-gallery { --frame-h: clamp(300px, 52vw, 600px); }
.gallery-car .car-side { top: calc(var(--frame-h) / 2); }
/* In the project intro the carousel takes the main photo's place, so it is a little shorter */
.project-intro .intro-car { --frame-h: clamp(300px, 36vw, 480px); }
.calli-row { --frame-h: clamp(320px, 40vw, 520px); }
.calli-row .pframe { height: var(--frame-h); }
@media (max-width: 860px) { .project-intro .intro-car { --frame-h: clamp(260px, 72vw, 440px); } }

/* Home page slideshow: arrows centred on the 4:3 photo, whatever the column width */
.home-car .car-stage { container-type: inline-size; }
.home-car .car-side { top: 37.5cqw; }
.home-car .car-controls { margin-top: var(--space-2); }
.photo.contain img { object-fit: contain; padding: var(--space-4); }
.photo.whole img { object-fit: contain; }

/* Featured works: large and shown whole, with their story. The first spans the page, then rows alternate sides */
.featured { display: grid; gap: var(--space-6); }
.feature {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-7); align-items: center;
}
.feature + .feature { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--line); }
.feature.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.feature.flip > .art-frame, .feature.flip > .ph { order: 2; }
.art-frame {
  appearance: none; border: 0; cursor: zoom-in; width: 100%;
  background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-5);
  display: grid; place-items: center; overflow: hidden;
}
.art-frame img { max-height: 500px; width: auto; max-width: 100%; border-radius: 2px; transition: transform var(--smooth) var(--ease); }
.art-frame:hover img { transform: scale(1.015); }
.feature-text { display: grid; gap: var(--space-3); justify-items: start; align-content: center; min-width: 0; }
.feature-text h3 { margin-top: var(--space-1); }
.feature-text > p:not(.caption) { max-width: 60ch; margin-top: var(--space-2); }
.feature-text .todo { margin-top: var(--space-2); }
/* The first one: the photo across the page, the title on the left and the story on the right below it */

/* A link to another artwork page */
.link-card {
  justify-self: start; display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-5); padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  text-decoration: none; color: var(--ink); transition: border-color var(--quick);
}
.link-card:hover { border-color: var(--line-strong); }
.link-card-img { flex: none; width: 64px; height: 64px; padding: var(--space-1); background: var(--surface-sunken); border-radius: var(--radius-sm); display: grid; place-items: center; }
.link-card-img img { width: 56px; height: 56px; object-fit: contain; }
.link-card-text { display: grid; gap: 2px; }
.link-card .arrow-ur {
  display: inline-block; width: 0.6em; height: 0.6em; margin-left: 8px; vertical-align: 0.05em;
  stroke: var(--accent-text); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--quick) var(--ease);
}
.link-card:hover .arrow-ur { transform: translate(2px, -2px); }

/* The full collection: a grid of thumbnails, grouped by year */
.collection { border-top: 1px solid var(--line); padding-top: var(--space-8); }
.collection-head { display: grid; gap: var(--space-5); padding-bottom: var(--space-6); }
.year { padding-top: var(--space-5); border-top: 1px solid var(--line); }
.year + .year { margin-top: var(--space-7); }
.year-mark { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-5); }
.year-mark h3 { font-weight: 500; font-size: 36px; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }

.works { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); align-items: start; }
.work { display: grid; gap: var(--space-1); align-content: start; min-width: 0; scroll-margin-top: var(--space-5); }
.thumb {
  position: relative; appearance: none; border: 0; cursor: zoom-in; width: 100%; aspect-ratio: 1 / 1;
  margin-bottom: var(--space-2); padding: var(--space-3); overflow: hidden;
  background: var(--surface-sunken); border-radius: var(--radius-md);
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
}
.thumb img { width: 100%; height: 100%; min-height: 0; object-fit: contain; transition: transform var(--smooth) var(--ease); }
.thumb:hover img { transform: scale(1.03); }
.thumb.empty { cursor: auto; place-items: end start; }
.thumb.empty span { font: 400 13px/1.5 var(--font-ui); color: var(--ink-muted); }
.count-badge {
  position: absolute; top: var(--space-2); right: var(--space-2);
  font: 500 12px/1 var(--font-ui); color: var(--ink); padding: 5px var(--space-2);
  background: color-mix(in srgb, var(--surface-raised) 90%, transparent); border: 1px solid var(--line); border-radius: var(--radius-full);
}
.work-title { font-size: 18px; font-weight: 600; line-height: 1.3; }
/* Arriving from a link to one piece (artwork.html#azure-haven) */
.work:target .thumb { box-shadow: 0 0 0 2px var(--accent); }

@media (max-width: 960px) {
  .works { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .feature.flip > .art-frame, .feature.flip > .ph { order: 0; }
  .feature + .feature { margin-top: var(--space-7); padding-top: var(--space-7); }
  .collection { padding-top: var(--space-7); }
}
@media (max-width: 600px) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .thumb { padding: var(--space-2); }
  .work-title { font-size: 16px; }
  .year-mark h3 { font-size: 30px; }
}

/* Full-screen image viewer */
.viewer { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
.viewer::backdrop { background: rgba(19, 10, 46, 0.94); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center; padding: var(--space-4); animation: viewer-in var(--smooth) var(--ease); }
.viewer img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 2px; }
.viewer .close {
  justify-self: end; appearance: none; cursor: pointer; font: 600 15px/1 var(--font-ui);
  color: var(--paper); background: none; border: 2px solid var(--mist); border-radius: var(--radius-sm); padding: 10px var(--space-4);
  margin-bottom: var(--space-3);
}
.viewer .close:focus-visible { outline-color: var(--focus-inverse); }
/* The caption: centred under the photo; a long one (with the story of the piece) reads left-aligned and scrolls if needed */
.viewer .cap {
  font: 500 14px/1.55 var(--font-ui); color: var(--mist); text-align: center; white-space: pre-line;
  width: 100%; max-width: 60ch; max-height: 30vh; overflow-y: auto; margin-top: var(--space-3);
  overscroll-behavior: contain;
}
.viewer .cap:empty { display: none; }
.viewer .cap.long { text-align: left; }
.viewer .cap:focus-visible { outline-color: var(--focus-inverse); }
@keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- About ---------- */

.about-intro { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--space-7); align-items: end; }
.cv { display: grid; gap: 0; }
.cv-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--space-2) var(--space-7); padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.cv-row .when { font: 400 14px/1.5 var(--font-ui); color: var(--ink-muted); padding-top: 4px; }
.cv-row h3 { font: 600 19px/1.35 var(--font-text); }
.cv-row .role { font: 500 14px/1.5 var(--font-ui); color: var(--ink-muted); margin-top: 2px; }
.cv-row .what { margin-top: var(--space-2); max-width: 62ch; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); max-width: 66ch; }
.kv { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--space-2) var(--space-7); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.kv dt { font: 500 14px/1.6 var(--font-ui); color: var(--ink-muted); }
.kv dd { margin: 0; max-width: 62ch; }
.kv-note { display: block; margin-top: var(--space-1); font: 400 14px/1.55 var(--font-ui); color: var(--ink-muted); }
dl.kvs { margin: 0; }

@media (max-width: 860px) {
  .about-intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .about-intro .ph, .about-intro .photo { max-width: 180px; }
  .cv-row, .kv { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Closing band ---------- */

.closing { background: var(--indigo-deep); color: var(--paper); margin-top: var(--space-9); }
.home .closing { margin-top: 0; }
.closing :focus-visible { outline-color: var(--focus-inverse); }
.closing .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); padding-block: calc(var(--space-7) + var(--space-2)); }
.closing q { quotes: none; font: italic 400 clamp(24px, 2.7vw, 29px)/1.25 var(--font-display); max-width: 18ch; display: block; }
.closing .contact { display: grid; gap: var(--space-2); justify-items: start; }
.closing .contact p { color: var(--mist); }
.closing .contact a { color: var(--vermilion-bright); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.closing .mini { font: 400 13px/1.5 var(--font-ui); color: var(--mist); }

/* Short message shown when the email address is copied */
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); z-index: 30;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  background: var(--indigo-deep); color: var(--paper); font: 500 14px/1.4 var(--font-ui);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .carousel .track { scroll-behavior: auto; }
}


/* ---------- Featured works carousel (Artwork page) ----------
   One work per slide: a whole image in a modest frame, its story beside it. */
.feat-car { --feat-h: clamp(260px, 30vw, 400px); }
.feat-car .slide > .feature {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-7);
  align-items: start; align-content: start; margin: 0; padding: 0; border: 0;
}
.feat-car .feature .art-frame, .feat-car .feature .ph { height: var(--feat-h); padding: var(--space-4); }
/* One fixed row, so the picture is fitted inside the frame and never cut off */
.feat-car .feature .art-frame { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.feat-car .feature .art-frame img { width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: contain; }
.feat-car .feature-text {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: center;
  min-height: var(--feat-h); padding-right: 56px;   /* clear of the right arrow */
}
.feat-car .feature-text > * { grid-column: 1 !important; grid-row: auto !important; }
.feat-car .car-side { top: calc(var(--feat-h) / 2); }
@media (max-width: 860px) {
  .feat-car { --feat-h: clamp(240px, 64vw, 360px); }
  .feat-car .slide > .feature { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .feat-car .feature-text { min-height: 0; padding-right: 0; }
}


/* ---------- Home: short About section ---------- */
.home-about { padding-block: var(--space-8); border-top: 1px solid var(--line); }
.home-about-inner { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.home-about .photo { max-width: 220px; }
.intro-more { max-width: 62ch; color: var(--ink); }
@media (max-width: 860px) {
  .home-about-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .home-about .photo { max-width: 150px; }
}

@media (max-width: 860px) {
  .closing .inner { padding-block: var(--space-7); gap: var(--space-5); }
}