/* ============================================================
   Rodrigo V. Bustamante
   The page and its Work/About sections stay a constant paper
   white — only the hero itself flips from a white loading
   screen into the dark film once the video is ready. Space
   Grotesk carries the name, Space Mono every piece of data —
   both self-hosted (SIL Open Font License).
   ============================================================ */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../assets/fonts/space-grotesk-400-700.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../assets/fonts/space-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../assets/fonts/space-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* the site's one constant palette — Work and About never leave it */
:root {
  --bg: #fff;
  --fg: #0a0a0a;
  --muted: #9b9b9b;
  --line: rgba(10, 10, 10, 0.14);
  --field: #f1f1ef;
  --pad: clamp(18px, 2.2vw, 34px);
  --bar: 74px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --swap: 650ms;
  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html { scroll-behavior: smooth; }

html.loading { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--display);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--fg); color: var(--bg); }

a { color: inherit; text-decoration: none; }

.icon-arrow { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }

:focus-visible { outline: 1.5px solid var(--fg); outline-offset: 6px; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- paper grain ------------------------------------------ */

.grain {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* --- top bar -------------------------------------------------
   A constant dark-glass bar: translucent enough to feel light,
   dark enough to stay legible whether it floats over the film
   or over the paper-white sections beneath it. */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar);
  padding: 0 var(--pad);
  background: #0a0a0a;
  color: #fff;
  border-bottom: 1px solid transparent;
}

.topbar.scrolled { border-bottom-color: rgba(255, 255, 255, 0.12); }

.topbar :focus-visible { outline-color: #fff; }

.logo {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.nav { display: flex; gap: clamp(26px, 4vw, 58px); }

/* the link is the mask, the inner span travels: the label
   leaves through the top while its duplicate arrives below */
.nav-link {
  display: inline-block;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nav-link__inner {
  position: relative;
  display: block;
  transition: transform 520ms var(--ease);
}

.nav-link__inner::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  transform: translateY(115%);
}

.nav-link:hover .nav-link__inner,
.nav-link:focus-visible .nav-link__inner { transform: translateY(-115%); }

/* --- hero ------------------------------------------------- */

/* the hero carries its own light/dark pair, independent of the
   sitewide (permanently light) palette — dark text on the white
   loading screen, white text once the film takes over */
.hero {
  --hero-fg: #0a0a0a;
  --hero-muted: rgba(10, 10, 10, 0.55);
  position: relative;
  display: grid;
  place-items: center;
  height: 100svh;
  min-height: 520px;
  padding: 0 var(--pad);
  overflow: hidden;
}

.loaded .hero {
  --hero-fg: #fff;
  --hero-muted: rgba(255, 255, 255, 0.66);
}

/* the film sits below the bar, so the header keeps its own band */
.hero__stage {
  position: absolute;
  inset: var(--bar) 0 0 0;
  opacity: 0;
  transition: opacity var(--swap) var(--ease);
}

.loaded .hero__stage { opacity: 1; }

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the transparent black layer the type sits on */
.hero__veil {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, 0.58);
}

.hero__trigger {
  position: absolute;
  inset: var(--bar) 0 0 0;
  z-index: 3;
  cursor: none;
  opacity: 0;
  pointer-events: none;
}

.loaded .hero__trigger { pointer-events: auto; }

.name,
.hero__foot,
.hero__line,
.hero__hint {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.name {
  margin: 0;
  color: var(--hero-fg);
  font-size: var(--fit, 10vw);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.9;
  white-space: nowrap;
  transition: color 500ms var(--ease);
}

.name__inner { display: inline-flex; align-items: baseline; }

.word { position: relative; z-index: 2; white-space: nowrap; }

.char { display: inline-block; will-change: transform; }

.js .char {
  transform: translateY(115%);
  transition: transform 1150ms var(--ease) var(--d, 0ms);
}

.js.ready .char { transform: translateY(0); }

/* the word gap that holds the portrait */
.gap {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 0.86em;
}

/* the portrait opens the loading screen and stays in place once
   the film takes over — a fixed point on top of the moving image */
.portrait {
  position: absolute;
  left: 50%;
  bottom: 0.02em;
  width: 0.58em;
  height: 0.66em;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: 50% 18%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  transition: box-shadow var(--swap) var(--ease);
}

.js .portrait {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1200ms var(--ease) 520ms, box-shadow var(--swap) var(--ease);
}

.js.ready .portrait { clip-path: inset(0 0 0 0); }

.loaded .portrait { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }

/* Sichtbare Knoepfe und die kompakte Zeile gehoeren dem Handy;
   am Desktop uebernehmen der Play-Cursor und die drei Infobloecke. */
.hero__actions,
.hero__line,
.hero__scroll { display: none; }

.pill {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: var(--hero-fg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: rgba(10, 10, 10, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pill:active { background: rgba(10, 10, 10, 0.5); }

/* touch devices get a label instead of the custom cursor */
.hero__hint {
  position: absolute;
  bottom: calc(var(--pad) + 92px);
  margin: 0;
  color: var(--hero-fg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--swap) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .hero__hint { display: none; }
}

.loaded .hero__hint { opacity: 1; }

/* the loading counter: only during the white loading screen,
   swapped out once the film is ready */
.loader {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  opacity: 0;
  transition: opacity 500ms var(--ease) 200ms;
}

.js .loader { opacity: 1; }

.loaded .loader { opacity: 0; transition: opacity 420ms var(--ease); }

.loader__count { font-weight: 700; font-variant-numeric: tabular-nums; }

.loader__of { color: var(--muted); }

/* three information blocks along the foot of the hero */
.hero__foot {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
}

.info--center { justify-self: center; text-align: center; }

.info--right { justify-self: end; text-align: right; }

.info__label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.info__value {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

/* the foot sits on the film, so it borrows the hero's own
   light/dark pair instead of the sitewide palette */
.hero__foot .info__label { color: var(--hero-muted); }

.hero__foot .info__value { color: var(--hero-fg); }

/* the topbar stays off the white loading screen entirely and
   arrives with the film, alongside the info feet */
.js .topbar {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.js.loaded .topbar { opacity: 1; transform: none; }

/* the info feet belong to the film, not the loading screen —
   they arrive once the video has taken over */
.js .info {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 900ms var(--ease) var(--d, 0ms), transform 900ms var(--ease) var(--d, 0ms);
}

.js.loaded .info { opacity: 1; transform: none; }

.js .hero__actions,
.js .hero__line,
.js .hero__scroll {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 900ms var(--ease) 200ms, transform 900ms var(--ease) 200ms;
}

.js.loaded .hero__actions,
.js.loaded .hero__line,
.js.loaded .hero__scroll { opacity: 1; transform: none; }

.js .info--left { --d: 120ms; }
.js .info--center { --d: 200ms; }
.js .info--right { --d: 280ms; }

/* --- the play cursor -------------------------------------- */

/* two layers on purpose: the outer element only ever carries the
   pointer position as a transform (no transition, the JS lerp does
   the smoothing), the inner ring carries the look and its own
   scale/fade — so following the mouse never triggers layout */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cursor__ring {
  position: absolute;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  line-height: 1.7;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 320ms var(--ease), transform 420ms var(--ease);
}

.cursor__ring b {
  display: block;
  color: #fff;
  font-weight: 700;
}

.cursor.on .cursor__ring { opacity: 1; transform: scale(1); }

.cursor.press .cursor__ring { transform: scale(0.88); }

/* --- work grid -------------------------------------------- */

.work {
  padding: clamp(40px, 7vh, 90px) var(--pad) clamp(70px, 14vh, 170px);
  scroll-margin-top: var(--bar);
}

.work__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: clamp(18px, 2.4vw, 34px);
  border-bottom: 1px solid var(--line);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(26px, 3.4vw, 54px) clamp(18px, 2.2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.js .tile {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

.js .tile.in { opacity: 1; transform: none; }

.tile__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.tile--playable .tile__btn { cursor: pointer; }

/* <figure> bringt vom Browser margin: 1em 40px mit — ohne diesen
   Reset ist jede Kachel 80px schmaler als ihre Spalte. */
.tile__media {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--field);
}

.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1100ms var(--ease);
}

/* Die Vorschau legt sich ueber das Standbild und blendet auf */
.tile__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.tile--playing .tile__media video { opacity: 1; }

/* Auf der laufenden Vorschau stoert der Platzhaltertext */
.tile--playing .tile__media.is-empty::after { opacity: 0; }

.tile--playable:hover .tile__media img { transform: scale(1.035); }

/* placeholder until a still is dropped into assets/work/ */
.tile__media.is-empty::after {
  content: attr(data-empty);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  transition: opacity 420ms var(--ease);
}

.tile:hover .tile__media.is-empty::after,
.tile__btn:focus-visible .tile__media.is-empty::after { opacity: 0; }

.tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(6px);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #fff;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  pointer-events: none;
}

.tile:hover .tile__play,
.tile__btn:focus-visible .tile__play {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

/* the four corner brackets */
.corner {
  position: absolute;
  width: 13px;
  height: 13px;
  opacity: 0;
  transition: opacity 420ms var(--ease), inset 520ms var(--ease);
  pointer-events: none;
}

.corner--tl { top: 16px; left: 16px; border-top: 1px solid #fff; border-left: 1px solid #fff; }
.corner--tr { top: 16px; right: 16px; border-top: 1px solid #fff; border-right: 1px solid #fff; }
.corner--bl { bottom: 16px; left: 16px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; }
.corner--br { bottom: 16px; right: 16px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; }

.tile:hover .corner,
.tile__btn:focus-visible .corner { opacity: 1; }

.tile:hover .corner--tl, .tile:hover .corner--tr { top: 11px; }
.tile:hover .corner--bl, .tile:hover .corner--br { bottom: 11px; }
.tile:hover .corner--tl, .tile:hover .corner--bl { left: 11px; }
.tile:hover .corner--tr, .tile:hover .corner--br { right: 11px; }

.tile__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-top: 11px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.tile__meta b { font-weight: 700; }

.tile__meta span { display: block; color: var(--muted); }

.tile__meta .tile__right { text-align: right; }

/* --- full film player ------------------------------------- */

.player {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 70px);
  background: rgba(4, 4, 4, 0.94);
  opacity: 0;
  transition: opacity 420ms var(--ease);
}

.player.on { opacity: 1; }

.player[hidden] { display: none; }

.player__video {
  width: 100%;
  max-width: 1400px;
  max-height: 82vh;
  background: #000;
}

.player__frame {
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
  border: 0;
  background: #000;
}

.player__video[hidden],
.player__frame[hidden] { display: none; }

.player__close {
  position: absolute;
  top: clamp(16px, 2.4vw, 30px);
  right: clamp(16px, 2.4vw, 30px);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
}

/* --- Sammelbloecke (VfB 9:16, Vans 16:9) --------------------
   Eigene Ueberschrift, engeres Raster, das Seitenverhaeltnis
   kommt je Block per --ratio. */

.strip { margin-top: clamp(48px, 8vh, 96px); }

.strip__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--line);
}

.strip__head .info__label:first-child {
  color: var(--fg);
  font-weight: 700;
}

/* Hochformat: schmalere Kacheln, dafuer mehr davon nebeneinander */
.grid.grid--strip {
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(18px, 2.4vw, 34px) clamp(14px, 1.8vw, 24px);
}

.grid--strip .tile__media { aspect-ratio: var(--ratio, 16 / 9); }

@media (max-width: 900px) {
  .grid.grid--strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
  /* .grid.grid--strip statt .grid--strip: sonst gewinnt die
     spaetere .grid-Regel mit 1fr, egal wo diese hier steht. */
  .grid.grid--strip { grid-template-columns: repeat(2, 1fr); }
}

/* --- about / contact ---------------------------------------
   A poster-scale invitation to get in touch: oversized display
   type on the left, the portrait on the right inside a rotating
   badge — the site's own mono/grotesk system standing in for
   the cream-and-orange reference instead of copying it.
   ------------------------------------------------------------ */

.about {
  padding: clamp(70px, 14vh, 170px) var(--pad);
  border-top: 1px solid var(--line);
}

.about__kicker { display: block; margin-bottom: clamp(28px, 4vw, 54px); }

.about__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(40px, 6vw, 90px);
}

.about__headline {
  margin: 0 0 clamp(22px, 3vw, 36px);
  font-size: clamp(40px, 6.4vw, 92px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

.about__headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}

.about__lede {
  max-width: 46ch;
  margin: 0 0 clamp(30px, 4vw, 48px);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.6;
  color: var(--muted);
}

.about__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  margin: 0;
  padding: clamp(20px, 2.6vw, 28px) 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.about__links .info__label { margin-bottom: 8px; }

.about__links a,
.about__social {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.about__links a {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 300ms var(--ease);
}

.about__links a:hover { opacity: 0.6; }

.about__social { display: flex; gap: 18px; }

.about__portrait {
  position: relative;
  justify-self: center;
  width: min(100%, 380px);
  aspect-ratio: 4 / 5;
}

.about__portrait picture,
.about__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* --- credits line on a tile -------------------------------- */

.tile__credits {
  margin: 5px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--muted);
}

/* --- footer --------------------------------------------------
   The closing statement: one oversized line that repeats the
   invitation, the address to answer it, then the small print. */

.foot {
  padding: clamp(50px, 9vh, 110px) var(--pad) clamp(26px, 3vh, 40px);
  border-top: 1px solid var(--line);
}

.foot__top {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  padding-bottom: clamp(40px, 7vh, 90px);
}

.foot__claim {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 66px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.foot__claim em {
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}

.foot__mail {
  font-family: var(--mono);
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: 0.01em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 300ms var(--ease);
}

.foot__mail:hover { opacity: 0.6; }

.foot__bar {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 22px clamp(24px, 4vw, 70px);
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--line);
}

.foot__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.foot__col--end { text-align: right; }

.foot__col a { transition: opacity 300ms var(--ease); }

.foot__col a:hover { opacity: 0.55; }

.foot__nav { gap: 4px; }

/* --- mobile ----------------------------------------------- */

@media (max-width: 780px) {
  :root { --bar: 64px; }

  /* In der Leiste steht mobil nur der Name, mittig */
  .topbar { justify-content: center; }

  .nav { display: none; }

  .logo { font-size: 17px; }

  .name { white-space: normal; letter-spacing: -0.045em; }

  /* Zeile 1 traegt "Rodrigo" samt Portraet, "Bustamante" wird per
     flex-basis auf eine eigene Zeile gezwungen. So bleibt das Bild
     auch mobil in der Wortluecke statt darunter zu haengen. */
  .name__inner {
    flex-flow: row wrap;
    align-items: baseline;
  }

  .word:last-of-type { flex-basis: 100%; }

  /* breitere Luecke und das Bild etwas nach rechts: so steht es
     nicht direkt am "o" von Rodrigo */
  .gap { width: 0.84em; }

  .portrait { left: 58%; }

  /* Senkrecht mittig, waagerecht weiterhin am linken Rand.
     align-content zentriert Headline und Knoepfe als *ein* Block —
     ohne das wuerden beide Zeilen einzeln in ihrer Spur sitzen und
     der Abstand dazwischen aufreissen. */
  .hero {
    place-items: center start;
    align-content: center;
    padding-top: var(--bar);
  }

  .hero__hint { display: none; }

  /* Die Knoepfe haengen direkt an der Headline, nicht am Fuss.
     justify-self: stretch, damit die Reihe die volle Breite hat
     und die Knoepfe darin mittig stehen koennen — waehrend die
     Headline selbst am linken Rand bleibt. */
  .hero__actions {
    position: static;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 26px;
    z-index: 4;
  }

  /* Die drei Bloecke weichen einer einzigen ruhigen Zeile */
  .hero__foot { display: none; }

  /* left/right auf --pad statt 0: absolut positionierte Elemente
     sitzen an der Padding-Kante des Hero, nicht an der Textkante —
     so steht die Zeile buendig unter der Headline. */
  .hero__line {
    display: block;
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    bottom: var(--pad);
    margin: 0;
    color: var(--hero-muted);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: center;
  }

  .hero__scroll {
    display: block;
    position: absolute;
    right: var(--pad);
    bottom: calc(var(--pad) - 4px);
    color: var(--hero-fg);
    font-size: 15px;
    line-height: 1;
  }

  .loaded .hero__scroll { animation: nudge 1.9s var(--ease) 900ms infinite; }

  @keyframes nudge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
  }

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

  .nav { gap: 22px; }

  .about__grid { grid-template-columns: 1fr; }

  .about__portrait { order: -1; width: min(72vw, 280px); margin: 0 auto clamp(28px, 6vw, 44px); }

  .about__links { flex-direction: column; gap: 22px; }

  .foot__bar { grid-template-columns: 1fr 1fr; }

  .foot__col--end { text-align: left; }
}

/* --- reduced motion --------------------------------------- */

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

  .js .char,
  .js .portrait,
  .js .topbar,
  .js .info,
  .js .tile {
    transform: none;
    opacity: 1;
    clip-path: none;
    transition: none;
  }

  .tile:hover .tile__media img { transform: none; }

  .cursor { transition: opacity 320ms linear; }

  .loaded .hero__scroll { animation: none; }
}