/* Marius Rittau — portfolio
   Layout: four-column grid like a contact sheet; pill bar on top, rounded image tiles,
   frosted panels for Work and About. Black and white; colour comes from the work. */

:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #5c5c5c;          /* 6.6:1 on white, 5.9:1 on --surface */
  --surface: #f1f1f1;        /* pills, cards */
  --surface-glass: rgba(241, 241, 241, 0.84);
  --panel-glass: rgba(244, 244, 244, 0.9);
  --line: rgba(0, 0, 0, 0.12);
  --tile: #ececec;
  --hairline: rgba(0, 0, 0, 0.06);

  --font: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", sans-serif;
  --fs-xs: 0.75rem;          /* labels */
  --fs-s: 0.875rem;          /* UI, pills */
  --fs-m: 1rem;              /* running text: 16 px (Udo Hoffmann: copy 16–18 px) */
  --fs-l: clamp(1.25rem, 1rem + 1vw, 1.75rem);

  --gutter: 16px;
  --gap: 8px;
  --pill-h: 2.5rem;           /* 40 px controls (Udo Hoffmann: 44, tolerance 40) */
  --radius-pill: 999px;
  --radius-card: 16px;       /* radius scale: 16 / 32 / 999 */
  --radius-tile: 32px;
  --top-space: clamp(80px, 10vh, 112px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --row-tint: rgba(0, 0, 0, 0.04);
  color-scheme: light;   /* light only: the page stays white whatever the device setting */
}

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
.plain { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }

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

/* Focus: a two-tone ring that reads on photos, white and black */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--bg);
}

.skip-link {
  position: fixed; z-index: 100;
  top: calc(env(safe-area-inset-top, 0px) + 8px); left: max(10px, env(safe-area-inset-left, 0px));
  padding: 0.6rem 1rem; border-radius: var(--radius-pill);
  background: var(--fg); color: var(--bg); font-size: var(--fs-s);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

.label {
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.prose p + p { margin-top: 0.75em; }
.prose { max-width: 62ch; }

/* ---------- Header ---------- */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; z-index: 49;
  height: env(safe-area-inset-top, 0px); background: var(--bg);
}
.site-header {
  position: fixed; z-index: 50;
  top: env(safe-area-inset-top, 0px);
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  padding-top: var(--gutter);
}
.bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.pill {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  min-height: var(--pill-h);
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  font-size: var(--fs-s);
  line-height: 1.2;
  text-decoration: none;
  color: var(--fg);
  transition: background-color .2s var(--ease);
}
a.pill:hover, button.pill:hover { background: var(--surface); text-decoration: none; }
/* A soft shadow lifts the fixed header pills off whatever scrolls underneath (logos, white tiles) */
.site-header .pill { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 3px 12px rgba(0, 0, 0, 0.07); }
.pill--brand { grid-column: span 2; }
.brand { font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.tagline { text-align: right; }
.menus { display: contents; }
.pill--toggle { width: 100%; cursor: pointer; text-align: left; }
.chev { width: 0.75rem; height: 0.75rem; flex: none; transition: transform .25s var(--ease); }
.pill--toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Panels open under the two right columns, frosted like the pills */
.panel {
  position: absolute;
  top: calc(var(--gutter) + var(--pill-h) + var(--gap));
  left: calc(50% + var(--gap) / 2);
  right: 0;
  max-height: calc(100dvh - var(--pill-h) - 3 * var(--gutter) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1rem 1rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--panel-glass);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  backdrop-filter: blur(28px) saturate(1.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  font-size: var(--fs-s);
  animation: panel-in .28s var(--ease);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px); } }

.work-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.work-table th, .work-table td { text-align: left; font-weight: 400; padding: 0.55rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.work-table thead th { color: var(--muted); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.25rem; }
.work-table td { color: var(--muted); }
.work-table th + th, .work-table th + td, .work-table td + td { padding-left: 1rem; }
.work-table .num { text-align: right; }
.work-table tbody tr { cursor: pointer; }
.work-table tbody a { text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* No absolutely positioned hit area here: older iOS Safari ignores position: relative on table
   rows, so a row-sized ::after escaped to the panel and the last row (Citycards) won every tap.
   The link covers its own content; taps anywhere else in the row are handled in main.js. */
/* light tint on the glass for the whole row; the divider lines are borders and stay on top */
.work-table th:first-child, .work-table td:first-child { padding-left: 0.5rem; }
.work-table th:last-child, .work-table td:last-child { padding-right: 0.5rem; }
.work-table tbody tr > * { transition: background-color .15s ease; }
@media (hover: hover) {
  .work-table tbody tr:hover > * { background-color: var(--row-tint); }
  .work-table tbody tr:hover td { color: var(--fg); }
}
/* touch: a short tap state that does not stay */
.work-table tbody tr:active > * { background-color: var(--row-tint); transition-duration: 0s; }
/* keyboard: same tint plus a ring around the whole row */
.work-table tbody a:focus-visible { outline: none; box-shadow: none; }
.work-table tbody tr:has(a:focus-visible) > * { background-color: var(--row-tint); box-shadow: inset 0 2px 0 var(--fg), inset 0 -2px 0 var(--fg); }
.work-table tbody tr:has(a:focus-visible) > :first-child { box-shadow: inset 2px 2px 0 var(--fg), inset 0 -2px 0 var(--fg); }
.work-table tbody tr:has(a:focus-visible) > :last-child { box-shadow: inset -2px 2px 0 var(--fg), inset 0 -2px 0 var(--fg); }

.about { display: grid; gap: 1.5rem; }
.about-block { display: grid; gap: 0.5rem; }
.about-block .label { padding-bottom: 0.45rem; border-bottom: 1px solid var(--line); }
/* Text flows around the portrait and continues underneath at full width */
.about-intro-body { display: flow-root; container-type: inline-size; max-width: none; }
.portrait {
  float: right; width: 112px; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  margin: 0.3rem 0 18px 18px;
  border-radius: var(--radius-card); background: var(--tile);
}
@media (max-width: 720px) { .portrait { width: 38%; } }
/* fewer than ~3 words per line beside the image: put it above the text instead */
@container (max-width: 279px) { .portrait { float: none; width: 60%; margin: 0 0 18px; } }
.about .prose { font-size: var(--fs-m); }

/* ---------- Home ---------- */
main { padding-top: calc(env(safe-area-inset-top, 0px) + var(--top-space)); }
.intro-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
  align-items: end; margin-bottom: clamp(1rem, 2.5vh, 1.75rem); padding-inline: 0.25rem;
}
.intro { grid-column: span 2; font-size: var(--fs-m); font-weight: 400; max-width: 40ch; text-wrap: balance; }
.intro-cta { grid-column: 3 / span 2; font-size: var(--fs-s); }
.intro-cta a { display: inline-block; min-height: 24px; padding-block: 3px; }
@media (max-width: 720px) {
  .intro-row { grid-template-columns: minmax(0, 1fr); }
  .intro, .intro-cta { grid-column: auto; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.tile { display: block; position: relative; border-radius: var(--radius-tile); text-decoration: none; }
.tile-media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-tile);
  background: var(--tile);
  isolation: isolate;
}
.tile-media > img, .tile-media > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.tile-media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.tile-video { opacity: 0; transition: opacity .4s var(--ease); }
.tile-video.is-playing { opacity: 1; }
.tile-media > img, .tile-media > video { transition: transform .6s var(--ease), opacity .4s var(--ease); }
.tile:hover .tile-media > img, .tile:hover .tile-media > video,
.tile:focus-visible .tile-media > img, .tile:focus-visible .tile-media > video { transform: scale(1.04); }

.tile-label {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; gap: 0.5rem; align-items: baseline;
  max-width: calc(100% - 24px);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-size: var(--fs-s);
  opacity: 0; transform: translateY(4px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.tile-type { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile:hover .tile-label, .tile:focus-visible .tile-label { opacity: 1; transform: none; }
@media (hover: none) {
  /* Touch: there is no hover, so the label pill is always shown inside the tile */
  .tile-label { opacity: 1; transform: none; left: 14px; bottom: 14px; max-width: calc(100% - 28px); }
}
/* Smoother corners where the browser supports it: the curve eases into the straight edge
   instead of meeting it abruptly (plain rounded corners remain the fallback, e.g. in Safari) */
@supports (corner-shape: squircle) {
  .tile, .tile-media, .row figure, .story-hero-img, .player, .card, .lock-card, .panel { corner-shape: superellipse(1.4); }
}

/* ---------- Project ---------- */
.project, .legal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.project-info {
  grid-column: span 2;
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--gutter) * 2 + var(--pill-h));
  display: grid; gap: var(--gap);
}
.pill--title { font-size: var(--fs-s); font-weight: 400; justify-content: flex-start; }
.pill--back { justify-self: end; width: calc(50% - var(--gap) / 2); }
.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 1rem 1rem 1.25rem;
  display: grid; gap: 1.6rem;
  font-size: var(--fs-s);
}
.card section { display: grid; gap: 0.6rem; }
.card .label { padding-bottom: 0.45rem; border-bottom: 1px solid var(--line); }
.card .prose { font-size: var(--fs-m); }
.facts { display: grid; gap: 0.2rem; }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
.facts dt { color: var(--muted); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.pager .pill:last-child { justify-content: flex-end; text-align: right; }
.pager .pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.project-media { grid-column: span 2; display: grid; gap: var(--gap); min-width: 0; }
.row { display: flex; gap: var(--gap); }
.row figure {
  position: relative; min-width: 0; overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--tile);
}
.row figure::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.row img { width: 100%; height: auto; }
/* Cut-out objects (e.g. arrow signs): the tile takes the object's own outline */
.row figure.is-shaped { border-radius: 0; background: none; overflow: visible; }
.row figure.is-shaped::after { content: none; }

.film { display: grid; gap: 0.5rem; }
.film-facade, .film iframe {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9; width: 100%; border: 0;
  border-radius: var(--radius-tile); background: #000;
}
.film-facade img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.film-facade:hover img { transform: scale(1.015); }
.film-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.2rem; border-radius: var(--radius-pill);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--fg); font-size: var(--fs-s); text-decoration: none;
}
.film-play svg { width: 0.8rem; height: 0.8rem; }
.film-note { font-size: var(--fs-xs); color: var(--muted); padding-inline: 0.25rem; }
.reel { display: grid; gap: 0.5rem; }
.reel--vertical { justify-items: center; background: var(--tile); border-radius: var(--radius-tile); padding: var(--gap); }

/* ---------- Video player tiles ----------
   The film plays muted in its tile; play/pause, full screen and sound sit centred at the bottom
   (layout after yuriroga.com). The buttons get a dark frosted disc so the icons stay readable
   on bright frames (WCAG 1.4.11). */
.player {
  position: relative; display: grid; width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  border-radius: var(--radius-tile); overflow: hidden; background: #000; isolation: isolate;
}
.reel--vertical .player { width: min(100%, calc(85vh * var(--ar))); }
.player > .player-poster, .player > video {
  grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0;
}
.player > video { opacity: 0; transition: opacity .35s var(--ease); }
.player.is-ready > video { opacity: 1; }
.player > video:fullscreen { object-fit: contain; opacity: 1; }
.player-controls {
  grid-area: 1 / 1; align-self: end; justify-self: center; z-index: 1;
  display: flex; gap: 10px; padding: 20px; pointer-events: none;
}
.player-btn {
  pointer-events: auto; position: relative;
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  color: #fff; background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  cursor: pointer; transition: background-color .15s var(--ease);
}
.player-btn::before { content: ""; position: absolute; inset: -5px; } /* 40 px hit area */
.player-btn:hover { background: rgba(0, 0, 0, 0.62); }
.player-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.7); }
.player-btn svg { display: block; overflow: visible; }
.i-play, .i-pause { width: 10px; height: 12px; }
.i-full, .i-sound { width: 12px; height: 12px; }
.i-play path, .i-sound .spk { fill: currentColor; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.i-pause path, .i-full path, .i-sound .wave { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.i-sound .wave { stroke: transparent; transition: stroke .15s var(--ease); }
.player-btn[aria-pressed="true"] .wave { stroke: currentColor; }
.player .i-pause, .player.is-playing .i-play { display: none; }
.player.is-playing .i-pause { display: block; }
@media (forced-colors: active) { .player-btn { border: 1px solid ButtonText; } }

/* ---------- Legal ---------- */
.legal-body { grid-column: span 2; gap: 0; }
.legal-body .label { margin-top: 1.4rem; margin-bottom: 0.4rem; }
.legal-body .label:first-child { margin-top: 0; }
.legal-body p:not(.label) { font-size: var(--fs-m); }

/* ---------- Footer ---------- */
.site-footer {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
  align-items: end;
  margin-top: clamp(5rem, 16vh, 10rem);
  padding-block: 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  font-size: var(--fs-s);
}
.footer-contact { grid-column: span 2; display: grid; gap: 0.35rem; }
.footer-links { grid-column: span 2; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; justify-content: flex-end; color: var(--muted); }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--fg); }
.link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
.link-button:hover { color: var(--fg); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project, .legal { grid-template-columns: minmax(0, 1fr); }
  .project-info { grid-column: auto; position: static; }
  .project-media, .legal-body { grid-column: auto; }
  .pill--back { width: auto; justify-self: start; }
}
@media (max-width: 720px) {
  :root { --top-space: clamp(124px, 15vh, 140px); }
  .bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pill--brand { grid-column: 1 / -1; }
  .tagline { color: var(--muted); }
  .panel {
    left: 0;
    top: calc(var(--gutter) + 2 * var(--pill-h) + 2 * var(--gap));
    max-height: calc(100dvh - 2 * var(--pill-h) - 4 * var(--gutter) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .site-footer { grid-template-columns: minmax(0, 1fr); }
  .footer-contact, .footer-links { grid-column: auto; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .row { flex-wrap: wrap; }
  .row figure { flex: 1 1 100% !important; }
  .tagline { display: none; }
}

/* Motion and transparency preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .pill, .panel, .tile-label, .film-play { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .pill, .panel, .card, .tile-label { border: 1px solid CanvasText; }
}

/* Comfortable hit areas for stand-alone links (WCAG 2.5.8) */
.footer-contact-links a, .footer-links a, .link-button, .about .plain a {
  display: inline-block; min-height: 24px; padding-block: 3px;
}

/* Logo tiles: show the whole mark, centred on white */
.tile-media--contain { background: #ffffff; }
.tile-media--contain > img { object-fit: contain; padding: 16%; }

/* Client logos in the Work list: monochrome masks in the text colour, sized by area */
.work-table { --logo-base: 34px; --logo-max-h: 40px; --logo-max-w: 220px; }
.work-table th a { display: flex; align-items: center; min-height: 1.5em; }
/* the logo box is exactly one text line high; larger logos overflow it evenly, so rows keep the text-row height */
.logos { display: inline-flex; align-items: center; height: 1.5em; overflow: visible; }
.logo {
  display: block; flex: none;
  height: min(var(--logo-max-h), calc(var(--logo-base) / var(--logo-sqrt, 1) * var(--logo-optical, 1)));
  max-width: var(--logo-max-w);
  background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
}
.logo-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.work-table th, .work-table td { vertical-align: middle; }
.work-table thead th { vertical-align: bottom; }
@media (forced-colors: active) {
  .logos { display: none; }
  .logo-text { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; }
}

/* Visible pause control next to the moving tiles (WCAG 2.2.2) */
.intro-controls {
  /* one column as wide as the wider pill, so both pills have the same width */
  grid-column: 3 / span 2; justify-self: end; align-self: end;
  display: grid; gap: var(--gap);
}
.intro-row .motion-pill, .unlock-pill { min-height: var(--pill-h); cursor: pointer; gap: 0.5rem; justify-content: center; }
.motion-pill svg { width: 0.75rem; height: 0.75rem; flex: none; }
.unlock-pill .lock-icon { width: 0.8rem; height: 0.8rem; }
.unlock-pill[aria-disabled="true"] { cursor: default; color: var(--muted); }
.unlock-pill[aria-disabled="true"]:hover { background: var(--surface-glass); }
/* "Unlock all": the two pills sit stacked above each other at the right end of the intro row */
.unlock-all { position: relative; display: grid; }
.unlock-pop {
  position: absolute; z-index: 20; top: calc(100% + var(--gap)); right: 0; width: min(22rem, calc(100vw - 2 * var(--gutter)));
  padding: 1rem; border-radius: var(--radius-card);
  background: var(--panel-glass); -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
@media (max-width: 720px) {
  /* mobile: both pills side by side, full width, 44 px tap targets */
  .intro-controls { grid-column: auto; justify-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-inline: -0.25rem; }
  .unlock-all { position: static; }
  .intro-row { position: relative; }
  .intro-row .motion-pill, .unlock-pill { min-height: 44px; }
  .unlock-pop { left: 0; right: 0; width: auto; top: calc(100% + var(--gap)); }
}
/* unlocked protected tiles: the real cover replaces the logo */
.tile-media--logo.is-unlocked { background: var(--tile); }
.tile-media--logo.is-unlocked .tile-logo, .tile-media--logo.is-unlocked .tile-lock { display: none; }

/* Logo tiles for protected client work */
.tile-media--logo { display: grid; place-items: center; background: var(--tile); }
.tile-logo {
  /* inset box set per logo in the HTML: centred, never wider than 70 % of the tile */
  position: absolute; background-color: var(--fg);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transition: transform .6s var(--ease);
}
.tile:hover .tile-logo, .tile:focus-visible .tile-logo { transform: scale(1.04); }
.tile-lock {
  position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); background: var(--bg); color: var(--muted); font-size: var(--fs-xs);
}
.lock-icon { width: 0.75rem; height: 0.75rem; flex: none; vertical-align: -0.05em; }
@media (forced-colors: active) { .tile-logo { background-color: CanvasText; forced-color-adjust: none; } }

/* Unlock form */
.lock-card .prose, .lock-card p { font-size: var(--fs-m); }
.lock-form { display: grid; gap: 0.5rem; }
.lock-form label { font-size: var(--fs-s); }
.lock-row { display: flex; gap: var(--gap); flex-wrap: wrap; }
.pw-field { position: relative; display: flex; flex: 1 1 12rem; min-width: 0; }
.lock-row input {
  flex: 1 1 auto; width: 100%; min-width: 0; min-height: 3rem; padding: 0 2.75rem 0 1rem;
  font: inherit; font-size: var(--fs-m); color: var(--fg); background: var(--bg);
  border: 1px solid var(--muted); border-radius: var(--radius-pill);
}
.lock-row input:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
/* Safari draws its own caps-lock glyph stretched to the field height; it is replaced by our own icon */
.lock-row input::-webkit-caps-lock-indicator { display: none !important; content: none; }
.lock-row input::-webkit-credentials-auto-fill-button { margin-right: 1.75rem; }
.caps-hint {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--fg); pointer-events: none;
}
.caps-hint[hidden] { display: none; }
.caps-icon { width: 1.125rem; height: 1.125rem; display: block; }
.pill--solid { background: var(--fg); color: var(--bg); cursor: pointer; min-height: 3rem; padding-inline: 1.5rem; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pill--solid:hover { background: var(--fg); opacity: 0.88; }
.lock-msg:empty { display: none; }
.lock-msg { font-size: var(--fs-s); }
.locked-content { display: grid; gap: var(--gap); }
.locked-content:focus { outline: none; }
.row img[data-locked]:not([src]) { aspect-ratio: auto; min-height: 4rem; }

/* ---------- Story layout (project pages with a story) ----------
   Title, one-liner, full-width hero, then facts (left rail) + four story blocks, then more media. */
.project-story {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap); align-items: start;
}
.story-back { grid-column: 1 / -1; justify-self: start; width: auto; }
.story-head { grid-column: 1 / -1; padding: clamp(1.25rem, 3vw, 2rem) 0.25rem clamp(1rem, 2.5vw, 1.5rem); }
.story-title { font-size: var(--fs-l); font-weight: 400; line-height: 1.15; letter-spacing: -0.005em; }
.story-oneliner { margin-top: 0.4rem; max-width: 30rem; color: var(--muted); font-size: var(--fs-m); text-wrap: pretty; }
.story-hero { grid-column: 1 / -1; display: grid; gap: var(--gap); }
.story-hero-img {
  position: relative; overflow: hidden; border-radius: var(--radius-tile); background: var(--tile);
}
.story-hero-img img { width: 100%; height: auto; }
.story-hero-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--hairline); }
.story-hero .lock-card { padding: clamp(1.25rem, 4vw, 2.5rem); }
.story-hero .lock-card > * { max-width: 40rem; }

.story-body {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start;
  margin-block: clamp(2rem, 5vw, 4rem);
}
.story-facts {
  grid-column: 1; padding-inline: 0.25rem 1rem;
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--gutter) * 2 + var(--pill-h));
}
.story-facts-list { display: grid; gap: 1rem; margin: 0; font-size: var(--fs-s); }
.story-facts-list dt { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
.story-facts-list dd { margin: 0; }
.fact-line { display: block; }

.story-text { grid-column: 2 / span 2; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); max-width: 30rem; /* at most ~65 characters per line */ padding-inline: 0.25rem; }
.story-block { display: grid; gap: 0.6rem; }
.story-block .label { padding-bottom: 0.45rem; border-bottom: 1px solid var(--line); }
.story-block p { font-size: var(--fs-m); text-wrap: pretty; }

.story-media { grid-column: 2 / -1; display: grid; gap: var(--gap); min-width: 0; }
.story-media-inner { display: grid; gap: var(--gap); }
.story-pager { grid-column: 2 / -1; margin-top: var(--gap); }

@media (max-width: 960px) {
  /* everything stacked; facts become a compact two-column list above the story */
  .project-story { grid-template-columns: minmax(0, 1fr); }
  .project-story > * { grid-column: 1 / -1; }
  .story-body { grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-block: 1.5rem 2.5rem; }
  .story-facts { grid-column: auto; position: static; padding: 0; }
  .story-facts-list { gap: 0; }
  .story-facts-list > div {
    display: grid; grid-template-columns: minmax(6.5rem, 30%) minmax(0, 1fr); gap: 0.75rem;
    padding-block: 0.55rem; border-bottom: 1px solid var(--line);
  }
  .story-facts-list > div:first-child { border-top: 1px solid var(--line); }
  .story-facts-list dt { margin: 0; padding-top: 0.15rem; }
  .story-text { grid-column: auto; max-width: none; padding-inline: 0; }
  .story-facts { padding-inline: 0; }
  .story-head { padding-inline: 0; }
}

/* ---------- P-Day mirror ----------
   The camera image fills the poster's mirror field (measured: 32.13 % to 67.18 % of the height, full
   width). The poster sits on top as an overlay with that field cut out, so type, black bands and the
   date circle stay printed over the camera, like the foil on the real poster. */
.mirror { position: relative; display: block; }
.mirror > img:first-child { display: block; }
.mirror-stage, .mirror-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 1; transition: opacity .3s var(--ease);
}
.mirror-stage[hidden], .mirror-photo[hidden] { display: none; }
.mirror-video {
  position: absolute; left: 0; width: 100%; object-fit: cover;
  transform: scaleX(-1); background: #000;
}
.mirror-overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mirror-photo { object-fit: cover; }
.mirror.is-starting .mirror-stage { opacity: 0; }
.mirror-controls {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--gap);
  padding-inline: 12px; pointer-events: none;
}
.mirror-pill {
  pointer-events: auto; min-height: 44px; cursor: pointer; gap: 0.5rem; justify-content: center;
}
.mirror-pill[hidden] { display: none; }
.mirror-pill--round { width: 44px; padding: 0; }
.mirror-msg { cursor: default; color: var(--muted); }
.mirror-icon { width: 0.8rem; height: 0.8rem; flex: none; }
.mirror-pill:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.mirror-note { margin-left: var(--note-x, 0); }
.mirror-note[hidden] { display: none; }
.motion-paused .mirror-stage, .motion-paused .mirror-photo { transition: none; }
@media (prefers-reduced-motion: reduce) { .mirror-stage, .mirror-photo { transition: none; } }

/* Portrait title images (posters, phone formats): whole picture, at most ~85 % of the screen high */
.story-hero-img--portrait {
  display: grid; justify-items: center; padding: var(--gap); background: var(--tile);
}
.story-hero-img--portrait .hero-portrait, .story-hero-img--portrait .mirror {
  width: min(100%, calc(85vh * var(--ar, 0.7))); border-radius: calc(var(--radius-tile) - var(--gap)); overflow: hidden;
}
.story-hero-img--portrait img { width: 100%; height: auto; display: block; }
.story-hero-img--portrait .mirror-photo, .story-hero-img--portrait .mirror-overlay { height: 100%; }
.story-hero > .mirror-note { padding-inline: 0.25rem; }
/* a portrait image alone in its row is centred instead of stretched over the whole width */
.row--solo { justify-content: center; }
/* labelled media groups (Kapten & Son: commercial / creative) */
.media-group { display: grid; gap: var(--gap); }
.media-group + .media-group { margin-top: clamp(1rem, 3vw, 2rem); }
.media-group-label { padding: 0 0.25rem 0.45rem; border-bottom: 1px solid var(--line); }