/* Nails by Rea - Davor / Omnium Studio */

:root {
  --brand: #b5858d;
  --brand-soft: #e2a6b0;
  --brand-deep: #7d5a60;
  --ink: #171314;
  --ink-soft: #4a4143;
  --muted: #8a7b7d;
  --bg: #f6f2f0;
  --bg-alt: #ede5e3;
  --line: rgba(23, 19, 20, 0.12);

  --font-display: "Raleway", system-ui, sans-serif;
  --font-body: "Jost", system-ui, sans-serif;

  --pad: clamp(1.25rem, 5vw, 5rem);
  /* full width - line length is kept readable by the 62ch cap on p */
  --maxw: none;
  --h1size: clamp(3.2rem, 13.5vw, 13rem);
}

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

html {
  /* Lenis drives the scrolling, native smooth would fight it */
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden - hidden would make body a scroll container and kill
     position:sticky on the stage media */
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 300;
  /* headings are typed in caps, not transformed - keeps the source honest.
     -0.06em is tight for caps, but it is the look Davor picked */
  letter-spacing: -0.06em;
  line-height: 1.02;
  margin: 0;
}

h1 { font-size: var(--h1size); }
h2 { font-size: clamp(2.25rem, 7vw, 6rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }

p { margin: 0 0 1.2em; max-width: 62ch; }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: clamp(5rem, 12vw, 11rem); }

.eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--brand);
  margin: 0 0 1.5rem;
  font-weight: 400;
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--pad);
  color: #fff;
}

.nav__brand {
  display: block;
  text-decoration: none;
  line-height: 0;
}

.nav__brand img {
  display: block;
  height: clamp(26px, 2.4vw, 36px);
  width: auto;
}



.nav__links {
  display: flex;
  gap: clamp(1rem, 3vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.nav__links a {
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.25s;
}

.nav__links a:hover,
.nav__links a[aria-current="page"] { opacity: 1; }

/* ---------- stage: video u pozadini, paneli klize preko ---------- */

.stage { position: relative; }

/* fixed, not sticky - the footage is the background of the whole page now,
   not just of the stage, so every section below can sit on glass */
.stage__media {
  position: fixed;
  inset: 0;
  height: 100svh;
  z-index: 0;
  overflow: hidden;
}

.stage__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(23, 19, 20, 0.4),
    rgba(23, 19, 20, 0.1) 38%,
    rgba(23, 19, 20, 0.68)
  );
}

.stage__content {
  position: relative;
  z-index: 1;
  color: #fff;
}

.panel {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 10vw, 8rem);
}



.panel .wrap { width: 100%; }

.statement {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 1.06;
  font-size: clamp(2.2rem, 7vw, 6rem);
  margin: 0;
  max-width: none;
}

.eyebrow--light { color: rgba(255, 255, 255, 0.7); }

.score--light .score__meta { color: rgba(255, 255, 255, 0.75); }
.score--light { justify-content: center; }

.hero__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* ---------- intro ---------- */

.lead {
  font-size: clamp(1.15rem, 2.2vw, 1.8rem);
  line-height: 1.45;
  font-weight: 300;
  max-width: 24ch;
  letter-spacing: -0.01em;
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- gallery grid (rows fill left to right) ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(5, 1fr); } }

/* phone gets 2 across over 3 rows, desktop 3 across over 2 */
.grid--wide { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .grid--wide { grid-template-columns: repeat(3, 1fr); } }

.tile {
  position: relative;
  /* figure carries a 40px side margin from the browser's own stylesheet,
     which pushed every picture off its column */
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-alt);
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.tile:hover img { transform: scale(1.04); }

/* the frame stays put, the picture inside it travels. the image is taller
   than its frame so there is room to move. */
.grid .tile img {
  position: absolute;
  inset: -16% 0;
  height: 132%;
  /* GSAP drives the transform here, a CSS transition would fight it */
  transition: filter 0.5s;
  will-change: transform;
}

.grid .tile:hover img { transform: none; filter: brightness(1.07); }

@media (min-width: 1100px) {
  .grid--wide { gap: clamp(0.75rem, 1.4vw, 1.5rem); }
}

/* ---------- reviews ---------- */

.reviews { background: var(--bg-alt); }

.score {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.04em;
}

.score__num { font-size: clamp(3.25rem, 7vw, 6rem); line-height: 0.8; }

.score__meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.quotes {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
}

@media (min-width: 850px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

.quote p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.quote cite {
  font-style: normal;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--brand);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  padding: 1.1rem 2.5rem;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background 0.3s;
}

.btn:hover { background: var(--brand-deep); }

.btn--light { background: var(--bg); color: var(--ink); }
.btn--light:hover { background: var(--brand-soft); }

/* ---------- contact ---------- */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}

.contact-list dt,
.contact-list .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.contact-list a { text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-list a:hover { border-color: var(--brand); }

.contact-big {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: -0.045em;
}

/* ---------- footer ---------- */

.footer {
  background: var(--ink);
  color: #cfc7c8;
  padding-block: clamp(3rem, 7vw, 5rem) 2rem;
}

.footer a { color: inherit; }

.footer__top {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 800px) {
  .footer__top { grid-template-columns: 2fr 1fr 1fr; }
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
}

.footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.25s;
}

.footer__credit:hover { opacity: 1; }
.footer__credit img { height: 18px; width: auto; }

.footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.footer__nav a { text-decoration: none; opacity: 0.7; }
.footer__nav a:hover { opacity: 1; }

/* ---------- scroll reveal ---------- */

.reveal { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .tile img { transition: none; }
}

/* ---------- inner pages ---------- */



body.inner { padding-top: 0; }

.page-head { padding-bottom: 0; padding-top: clamp(7rem, 14vw, 12rem); }

.page-title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 0.9;
  margin: 0;
  font-size: clamp(3.5rem, 11vw, 9rem);
}

.map-wrap {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* OpenStreetMap ships green and white. invert turns it dark, then the
     hue is dragged onto the brand rose. crude, but it is a map, not art. */
  /* kill the original colour almost entirely first, otherwise the map's
     green survives the tint and lands on violet. sepia then gives one warm
     base, and a short rotate brings that base onto the brand rose. */
  filter: invert(0.92) grayscale(0.92) sepia(1) hue-rotate(-42deg)
          saturate(1.45) brightness(0.93) contrast(0.95);
}

.reveal-item { opacity: 0; transform: translateY(20px); }

@media (prefers-reduced-motion: reduce) {
  .reveal-item { opacity: 1; transform: none; }
}

/* ---------- glass cards on the stage panels ---------- */


.card {
  position: relative;
  display: inline-block;
  max-width: min(46rem, 100%);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
  /* GSAP animates these, but keep a sane pre-JS state */
  will-change: transform, opacity, filter;
}

/* a touch of brand light along the top edge */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(226, 166, 176, 0.75),
    transparent
  );
}

.card .statement { margin: 0; }
.card p:last-child { margin-bottom: 0; }

/* ---------- line-by-line text reveal ---------- */

.line { display: block; }

.word {
  display: inline-block;
  /* no mask - the words fly all the way up from the bottom of the screen */
}

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

@supports not (backdrop-filter: blur(1px)) {
  .card { background: rgba(23, 19, 20, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1 !important; transform: none !important; filter: none !important; }
  .word__in { transform: none !important; }
}

/* ---------- scroll cue ---------- */

.panel { position: relative; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.75rem, 4.5vh, 3.25rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: #fff;
  pointer-events: none;
}

.scroll-cue__label {
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.scroll-cue__rail {
  position: relative;
  display: block;
  width: 2px;
  height: 92px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
  border-radius: 2px;
}

.scroll-cue__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 34px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.85);
  animation: cue-run 1.8s cubic-bezier(0.55, 0, 0.35, 1) infinite;
}

@keyframes cue-run {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  70%  { transform: translateY(270%); opacity: 1; }
  100% { transform: translateY(270%); opacity: 0; }
}

@media (max-width: 700px) {
  .scroll-cue { gap: 0.75rem; }
  .scroll-cue__label { font-size: 0.72rem; }
  .scroll-cue__rail { height: 68px; }
  .scroll-cue__dot { height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue__dot { animation: none; top: 0; height: 92px; opacity: 0.55; }
}

/* ---------- hero: centred title, details pushed right ---------- */

.panel--hero { align-items: center; }

.hero__sub {
  justify-content: flex-end;
  font-size: clamp(0.88rem, 1.35vw, 1.1rem);
  letter-spacing: 0.01em;
  gap: 0.6rem clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  opacity: 0.9;
}

/* ---------- softening the video ---------- */

/* film grain hides the blocking and banding that survives compression */
.stage__grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.15;
  /* screen lightens - dark grain on dark footage is invisible */
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.65s steps(4) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1.6%); }
  50%  { transform: translate(1.8%, -1.2%); }
  75%  { transform: translate(-1.2%, -2%); }
  100% { transform: translate(0, 0); }
}

/* a still, sharp pattern gives the eye something fixed to hold on to, and
   the frame stepping behind it stops registering. kept far weaker than the
   CRT version on mirza-tattoo - here it should read as texture, not screen */
.stage__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to right,
    transparent 0 3px,
    rgb(0 0 0 / 0.1) 3px 4px
  );
}

.stage__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

/* the rose, the contrast lift and the softening are baked into the file now.
   doing them in CSS meant every device repainted them on every frame. */
.stage__media video { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .stage__grain { animation: none; }
}

/* grain animation repaints constantly - not worth the battery on phones */
@media (max-width: 700px) {
  .stage__grain { animation: none; opacity: 0.12; }
}

/* ---------- hero details sit on the bottom line ---------- */

/* title and details share one bottom line on desktop */
.hero__row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 5rem);
}

/* the column spans the height of the title: the details sit level with the
   top of the caps, the paragraph with the baseline of the last line.
   0.135 and 0.15 are the empty room a Raleway line box leaves above the
   caps and below the baseline. */
.hero__aside {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: min(34ch, 36vw);
  padding-top: calc(var(--h1size) * 0.135);
  padding-bottom: calc(var(--h1size) * 0.15);
}

.hero__row h1 { flex: 0 1 auto; }

/* stacked instead of a row that wraps by accident - spacing does the
   separating, no rules */
.panel--hero .hero__sub {
  display: block;
  margin: 0;
  line-height: 1;
}

.panel--hero .hero__sub span {
  display: block;
  text-align: right;
  padding: 0.55rem 0;
  font-size: clamp(0.64rem, 0.76vw, 0.76rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  opacity: 0.9;
}

.panel--hero .hero__sub span:first-child { padding-top: 0; }

.panel--hero .hero__sub span:last-child { color: var(--brand-soft); opacity: 1; }

.hero__note {
  margin: 0;
  max-width: none;
  font-size: clamp(0.76rem, 0.88vw, 0.87rem);
  line-height: 1.8;
  opacity: 0.66;
  text-align: right;
}

@media (max-width: 860px) {
  /* one centred column, and the title takes the width it deserves -
     on a phone there is no second column to leave room for */
  .hero__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }

  .panel--hero h1 { font-size: clamp(3.4rem, 20vw, 7rem); }

  .hero__aside {
    padding-top: 0;
    padding-bottom: 0;
    max-width: none;
    align-self: auto;
    display: block;
    margin-top: clamp(2.5rem, 7vh, 4rem);
    text-align: center;
  }

  .panel--hero .hero__sub span {
    text-align: center;
    padding: 0.5rem 0;
    font-size: 0.78rem;
  }

  .hero__note {
    text-align: center;
    max-width: 34ch;
    margin: clamp(2.25rem, 6vh, 3.5rem) auto 0;
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.8;
  }
}

/* ---------- freeze frame + gallery card ---------- */

.panel--gallery {
  align-items: center;
  /* only a light overlap now - the fade it used to chase is gone, and
     the freeze card needs a clear moment before this covers it */
  margin-top: -8svh;
}

@media (max-width: 700px) {
  .panel--gallery { margin-top: -4svh; }
}

/* solid card so it still reads once the frozen frame has gone.
   wide, but not edge to edge - it has to keep looking like a card
   laid over the footage */
.card--solid {
  display: block;
  width: 100%;
  max-width: min(1440px, 90vw);
  margin-inline: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ink);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.32);
}

.card--solid .eyebrow { color: var(--brand); }
.card--solid::before { background: none; }

/* the media layer fades to page background as the gallery card settles */
.stage__media { will-change: opacity; }

/* ---------- opening veil, which settles into the header ---------- */

/* covers the whole screen on load, above every bit of content, then
   collapses to header height and stays there as the glass bar behind
   the logo. one element does the reveal and the header both. */
.reveal-veil {
  position: fixed;
  inset: 0 0 auto 0;
  height: 100svh;
  z-index: 40;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(44px) saturate(1.6);
  -webkit-backdrop-filter: blur(44px) saturate(1.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  will-change: height, backdrop-filter;
}

/* inner pages get the finished header without the opening act */
.reveal-veil--static {
  height: var(--headerH, 72px);
  background: rgba(23, 19, 20, 0.34);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-veil {
    height: var(--headerH, 72px);
    background: rgba(23, 19, 20, 0.34);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
  }
}

/* ---------- glass over the footage ---------- */

/* the home page floats on the video; inner pages keep their paper look */
body:not(.inner) {
  background: var(--ink);
  color: #fff;
}

body:not(.inner) main,
body:not(.inner) .footer { position: relative; z-index: 1; }

body:not(.inner) .section { background: transparent; }

body:not(.inner) .eyebrow { color: var(--brand-soft); }

/* the reviews band was a light slab - now it is a pane of glass.
   it is a card, not a section, so it does not need a section's air */
body:not(.inner) .reviews {
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-block: 1px solid rgba(255, 255, 255, 0.16);
}

body:not(.inner) .quote { border-top-color: rgba(255, 255, 255, 0.28); }
body:not(.inner) .quote p { color: rgba(255, 255, 255, 0.82); }
body:not(.inner) .quote cite { color: var(--brand-soft); }
body:not(.inner) .score__meta { color: rgba(255, 255, 255, 0.75); }

/* and the gallery card stops being a sheet of paper */
body:not(.inner) .card--solid {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35);
}

body:not(.inner) .card--solid .eyebrow { color: var(--brand-soft); }
body:not(.inner) .card--solid::before {
  background: linear-gradient(to right, transparent,
    rgba(226, 166, 176, 0.75), transparent);
}

/* ---------- gallery heading ---------- */

.statement--small {
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  margin: 0 0 clamp(2rem, 5vh, 3.5rem);
}


/* ---------- inner pages sit on the last frame of the film ---------- */

.page-still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}

.contact-list a { border-bottom-color: rgba(255, 255, 255, 0.28); }
.contact-list dt,
.contact-list .label { color: rgba(255, 255, 255, 0.6); }
.contact-list dd[style*="muted"] { color: rgba(255, 255, 255, 0.6); }

/* ---------- gallery page: room to breathe, then the wall of work ---------- */

.page-head + section .grid { margin-top: clamp(2.5rem, 6vh, 4.5rem); }

.page-head p { margin-top: clamp(1.75rem, 4vh, 3rem); }

/* each picture unrolls upward from a line at its own foot */
.grid:not(.grid--wide) .tile {
  transform-origin: bottom center;
  will-change: transform, opacity;
}