/* =========================================================================
   Studio — public site
   A single stylesheet, no build step. Order: tokens, reset, type, layout,
   components, utilities.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light dark;

  /* Powder pink and beige, kept deliberately light and airy: the page is a
     bright warm cream, alternating bands turn powder pink, cards are plain
     white so photographs read as the darkest, richest thing on the screen.
     A raspberry rose carries links, focus and hover. */
  --paper:        #fffaf4;
  --paper-sunk:   #fdf3ed;
  --surface:      #ffffff;
  --ink:          #38292e;
  --ink-soft:     #655254;
  --muted:        #7d6664;
  --line:         rgba(56, 41, 46, 0.11);
  --line-strong:  rgba(56, 41, 46, 0.24);
  --accent:       #b04463;
  --accent-soft:  rgba(176, 68, 99, 0.10);

  /* The call-to-action band. Once a dark slab; now a soft pink one, so the
     public pages never go heavy and the photographs keep the contrast. */
  --band:         #fce9ea;
  --on-band:      #38292e;
  --on-band-soft: #655254;

  /* The cinematic opening — the full-height hero and the three cards under
     it. Deliberately dark in *both* themes: it is a stage for one large
     photograph, and the page returns to the light palette below it. Warm
     gold hairlines rather than grey, so it stays in the same warm family
     as the rest of the site. */
  --cine:           #0e0a0b;
  --cine-card:      rgba(30, 21, 20, 0.55);
  --on-cine:        #f7f0ea;
  --on-cine-soft:   rgba(247, 240, 234, 0.68);
  --on-cine-dim:    rgba(247, 240, 234, 0.45);
  --cine-gold:      #d9b184;
  --cine-line:      rgba(217, 177, 132, 0.34);
  --cine-line-soft: rgba(217, 177, 132, 0.17);
  /* Darkening laid over a photograph used as a background. Like the --cine
     family it is the same in both themes: the scrim has to hold white text
     whatever the page around it is doing. */
  --scrim-top:    rgba(14, 10, 11, 0.58);
  --scrim-bottom: rgba(14, 10, 11, 0.88);
  --band-glow:    rgba(255, 255, 255, 0.85);

  /* The select chevron is baked into a data URI, so its colour cannot
     inherit — it needs restating alongside --muted in every theme. */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237d6664' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");

  /* A deliberately dark slab — the admin sidebar and the skip link. It
     stays dark in *both* themes: built on --ink it would flip to near white
     in dark mode and swallow its own light text. Deep plum, so it belongs
     to the rose family rather than sitting there as a neutral black brick.
     The public pages no longer use it — see --band. */
  --panel:           #3a262d;
  --on-panel:        #fdf6f2;
  --on-panel-soft:   rgba(253, 246, 242, 0.74);
  --on-panel-muted:  rgba(253, 246, 242, 0.52);
  --on-panel-line:   rgba(253, 246, 242, 0.13);
  --on-panel-border: rgba(253, 246, 242, 0.22);
  --on-panel-hover:  rgba(253, 246, 242, 0.07);
  --on-panel-active: rgba(253, 246, 242, 0.12);

  /* --accent sinks into the panel, so anything accented *on* the slab (nav
     icons, badges) uses the powder pink instead. Same value in both themes,
     because the panel is dark in both. */
  --accent-panel:    #efc3cb;

  /* Ink for an --accent fill: white clears 5.1:1 on the light-theme rose,
     but the dark theme's accent is a pale powder pink and needs the
     opposite, so this one flips. */
  --on-accent:       #ffffff;

  /* Status hues. Published / draft / destructive, restated in dark mode
     where the light-theme versions sink into the surface. */
  --ok:   #2f7d4f;
  --warn: #8a6c1f;
  --bad:  #c0492f;
  --overlay:      rgba(24, 15, 18, 0.94);
  --shadow-sm:    0 1px 2px rgba(56, 41, 46, 0.05), 0 4px 14px rgba(56, 41, 46, 0.05);
  --shadow-lg:    0 20px 50px -24px rgba(56, 41, 46, 0.26);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid type: each step interpolates between a phone and a wide desktop. */
  --step--1: clamp(0.79rem, 0.77rem + 0.10vw, 0.85rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --step-1:  clamp(1.16rem, 1.09rem + 0.34vw, 1.38rem);
  --step-2:  clamp(1.42rem, 1.29rem + 0.64vw, 1.83rem);
  --step-3:  clamp(1.73rem, 1.51rem + 1.10vw, 2.44rem);
  --step-4:  clamp(2.11rem, 1.75rem + 1.79vw, 3.24rem);
  --step-5:  clamp(2.57rem, 2.00rem + 2.85vw, 4.31rem);

  --gutter:  clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  --measure: 62ch;
  --radius:  4px;
  --radius-lg: 10px;

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --speed:     0.45s;

  --header-h: 4.75rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #171113;
    --paper-sunk:  #1e1618;
    --surface:     #221a1c;
    --ink:         #f6ece8;
    --ink-soft:    #d8c6c2;
    --muted:       #a3908c;
    --line:        rgba(246, 236, 232, 0.14);
    --line-strong: rgba(246, 236, 232, 0.3);
    --accent:      #eda2b4;
    --accent-soft: rgba(237, 162, 180, 0.14);
    --band:         #2b2026;
    --on-band:      #f6ece8;
    --on-band-soft: #d8c6c2;
    --band-glow:    rgba(237, 162, 180, 0.13);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a3908c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    --panel:           #2e1f25;
    --on-panel:        #fdf6f2;
    --on-panel-soft:   rgba(253, 246, 242, 0.74);
    --on-panel-muted:  rgba(253, 246, 242, 0.52);
    --on-panel-line:   rgba(253, 246, 242, 0.13);
    --on-panel-border: rgba(253, 246, 242, 0.22);
    --on-panel-hover:  rgba(253, 246, 242, 0.07);
    --on-panel-active: rgba(253, 246, 242, 0.12);
    --accent-panel:    #efc3cb;
    --on-accent:       #2a1418;
    --ok:   #6fbb8c;
    --warn: #d9b45f;
    --bad:  #ec8b73;
    --overlay:     rgba(14, 9, 11, 0.96);
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
    --shadow-lg:   0 24px 60px -24px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  --paper:       #171113;
  --paper-sunk:  #1e1618;
  --surface:     #221a1c;
  --ink:         #f6ece8;
  --ink-soft:    #d8c6c2;
  --muted:       #a3908c;
  --line:        rgba(246, 236, 232, 0.14);
  --line-strong: rgba(246, 236, 232, 0.3);
  --accent:      #eda2b4;
  --accent-soft: rgba(237, 162, 180, 0.14);
  --band:         #2b2026;
  --on-band:      #f6ece8;
  --on-band-soft: #d8c6c2;
  --band-glow:    rgba(237, 162, 180, 0.13);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a3908c' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --panel:           #2e1f25;
  --on-panel:        #fdf6f2;
  --on-panel-soft:   rgba(253, 246, 242, 0.74);
  --on-panel-muted:  rgba(253, 246, 242, 0.52);
  --on-panel-line:   rgba(253, 246, 242, 0.13);
  --on-panel-border: rgba(253, 246, 242, 0.22);
  --on-panel-hover:  rgba(253, 246, 242, 0.07);
  --on-panel-active: rgba(253, 246, 242, 0.12);
  --accent-panel:    #efc3cb;
  --on-accent:       #2a1418;
  --ok:   #6fbb8c;
  --warn: #d9b45f;
  --bad:  #ec8b73;
  --overlay:     rgba(14, 9, 11, 0.96);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 24px 60px -24px rgba(0, 0, 0, 0.8);
}

/* ----------------------------------------------------------------- reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

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

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

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

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

/* ------------------------------------------------------------ typography */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
}

.eyebrow--center { justify-content: center; }

.prose { max-width: var(--measure); color: var(--ink-soft); }
.prose p + p { margin-top: 0; }

/* ---------------------------------------------------------------- layout */

.shell {
  width: min(100% - (var(--gutter) * 2), 78rem);
  margin-inline: auto;
}

.shell--narrow { width: min(100% - (var(--gutter) * 2), 52rem); }
.shell--wide   { width: min(100% - (var(--gutter) * 2), 92rem); }

.section { padding-block: clamp(4rem, 3rem + 6vw, 8.5rem); }
.section--tight { padding-block: clamp(2.75rem, 2rem + 4vw, 5rem); }
.section--sunk { background: var(--paper-sunk); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.section-head__text { max-width: 44ch; }
.section-head__text p { margin-top: 1rem; color: var(--muted); }

/* A wider measure for the one section head that carries several paragraphs
   rather than a single line of introduction. */
.section-head__text--long { max-width: 58ch; }
.section-head__text--long p:not(.eyebrow) { margin-top: 1.15rem; line-height: 1.75; }
.section-head__text--long p:last-child { color: var(--ink-soft); font-style: italic; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------------------------------------------------------------- header */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
              border-color var(--speed) var(--ease), height var(--speed) var(--ease);
  border-bottom: 1px solid transparent;
}

/* Over a hero image the bar is transparent with light text; once the page
   scrolls it becomes solid paper. */
.masthead[data-mode="over"] { color: #fff; }
.masthead[data-mode="over"] .brand__mark { border-color: rgba(255, 255, 255, 0.5); }

.masthead.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--line);
  color: var(--ink);
  height: 4rem;
}

.masthead.is-stuck .brand__mark { border-color: var(--line-strong); }

.masthead__inner {
  width: min(100% - (var(--gutter) * 2), 92rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand__mark {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-family: var(--font-body);
  font-weight: 500;
  flex: none;
  transition: border-color var(--speed) var(--ease);
}

.brand__name { font-weight: 500; }
.brand__tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-top: 0.1rem;
}

.nav { display: flex; align-items: center; gap: clamp(1.2rem, 0.6rem + 1.4vw, 2.2rem); }

.nav__link {
  position: relative;
  font-size: 0.83rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  padding-block: 0.35rem;
  opacity: 0.82;
  transition: opacity 0.25s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}

.nav__link:hover { opacity: 1; }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { opacity: 1; }

.nav__cta { margin-left: 0.5rem; }

.burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}

.burger span {
  position: absolute;
  left: 50%;
  width: 1.35rem;
  height: 1.5px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform 0.35s var(--ease-out), opacity 0.2s linear;
}

.burger span:nth-child(1) { top: 1.05rem; }
.burger span:nth-child(2) { top: 1.42rem; }
.burger span:nth-child(3) { top: 1.79rem; }

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(0.37rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateX(-50%) translateY(-0.37rem) rotate(-45deg); }

@media (max-width: 60rem) {
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    background: var(--paper);
    color: var(--ink);
    transform: translateY(-100%);
    transition: transform 0.6s var(--ease-out);
    z-index: -1;
  }
  .nav.is-open { transform: translateY(0); }
  .nav__link {
    font-family: var(--font-display);
    font-size: var(--step-3);
    letter-spacing: -0.01em;
    text-transform: none;
    padding-block: 0.5rem;
  }
  .nav__link::after { display: none; }
  .nav__cta { margin: 1.5rem 0 0; }
}

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

/* The opening is a cinematic dark stage: one full-height photograph, heavily
   graded, with the type sitting in the darkest corner of it. It runs on the
   --cine tokens rather than the page palette, because it stays dark while
   everything below it is light. */

.hero {
  position: relative;
  min-height: min(89svh, 54rem);
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background: var(--cine);
}

.hero__media { position: absolute; inset: 0; z-index: -2; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Very slow drift keeps a still image from feeling like a dead screenshot. */
  animation: drift 32s var(--ease) infinite alternate;
}

@keyframes drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.5%, -1.5%, 0); }
}

/* Two crossed gradients: one darkens the left column the type sits in, the
   other seats the picture into the dark ground at top and bottom. Together
   they hold the type at full contrast without flattening the photograph. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(14, 10, 11, 0.94) 0%, rgba(14, 10, 11, 0.78) 26%,
      rgba(14, 10, 11, 0.34) 58%, rgba(14, 10, 11, 0.52) 100%),
    linear-gradient(to top,
      rgba(14, 10, 11, 0.96) 0%, rgba(14, 10, 11, 0.30) 38%,
      rgba(14, 10, 11, 0.24) 62%, rgba(14, 10, 11, 0.80) 100%);
}

.hero__body {
  position: relative;
  padding-block: clamp(7rem, 5rem + 9vw, 11rem) clamp(5rem, 4rem + 6vw, 9rem);
  color: var(--on-cine);
}

/* .hero__body also carries .shell, which sets its own width — so the text
   column is narrowed on the children, not on the shell itself. */
.hero__body > * { max-width: 34rem; }

/* Two short uppercase lines over a hairline rule. */
.hero__eyebrow {
  margin: 0 0 1.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--on-cine-soft);
}

.hero__eyebrow::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-top: 1.1rem;
  background: var(--cine-line);
}

.hero h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2.9rem, 1.9rem + 5.2vw, 5.6rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.015em;
  text-wrap: balance;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
}

.hero__text {
  margin-top: 1.8rem;
  max-width: 50ch;
  color: var(--on-cine-soft);
  font-size: var(--step-0);
  line-height: 1.75;
}

.hero__actions { margin-top: 2.75rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

.hero__meta {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--cine-line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-cine-dim);
}

/* Scroll cue, parked against the right edge: label, hairline, round button. */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  display: grid;
  justify-items: center;
  gap: 1rem;
  color: var(--on-cine-dim);
}

.hero__scroll-label {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hero__scroll-line {
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(to bottom, var(--cine-line), transparent);
  animation: scroll-hint 2.4s var(--ease) infinite;
}

.hero__scroll-dot {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--cine-line);
  color: var(--cine-gold);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.3s var(--ease);
}

.hero__scroll-dot svg { width: 1rem; height: 1rem; }

.hero__scroll-dot:hover {
  background: rgba(217, 177, 132, 0.12);
  border-color: var(--cine-gold);
  transform: translateY(2px);
}

@keyframes scroll-hint {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

@media (max-width: 60rem) {
  .hero__scroll { display: none; }
  .hero__body { padding-bottom: clamp(4rem, 3rem + 6vw, 7rem); }
}

/* --------------------------------------------------- cinematic showcase */

/* Three cards on the same dark ground as the hero, so the opening reads as
   one block. The last few centimetres fade into --paper: below this point
   the site is light again. */
.showcase {
  position: relative;
  background: var(--cine);
  padding-block: clamp(1rem, 0.5rem + 1.5vw, 2.5rem) clamp(6rem, 5rem + 6vw, 10rem);
}

.showcase::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: clamp(4rem, 3rem + 5vw, 7rem);
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}

.showcase__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.show-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 1rem;
  min-height: clamp(20rem, 17rem + 12vw, 26rem);
  padding: 1.4rem;
  border: 1px solid var(--cine-line-soft);
  border-radius: 14px;
  background: var(--cine-card);
  backdrop-filter: blur(8px);
  color: var(--on-cine);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease-out),
              background 0.4s var(--ease);
}

.show-card:hover,
.show-card:focus-visible {
  border-color: var(--cine-line);
  background: rgba(40, 28, 26, 0.62);
  transform: translateY(-4px);
}

.show-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--cine-gold);
}

.show-card__head svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  transition: transform 0.4s var(--ease-out);
}

.show-card:hover .show-card__head svg { transform: translate(3px, -3px); }

.show-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.15;
}

.show-card__media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 8rem;
  background: rgba(247, 240, 234, 0.05);
}

.show-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

.show-card:hover .show-card__media img { transform: scale(1.06); }

.show-card__note {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--on-cine-soft);
}

@media (prefers-reduced-motion: reduce) {
  .show-card:hover { transform: none; }
  .show-card:hover .show-card__media img { transform: none; }
}

/* Page header used on inner pages, where there is no full-bleed hero. */
.page-head {
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 5vw, 6rem));
  padding-bottom: clamp(2rem, 1.5rem + 3vw, 4rem);
}

.page-head h1 { max-width: 16ch; text-wrap: balance; }
.page-head .lede { margin-top: 1.5rem; }

/* With a photograph behind it the header becomes a dark bed, on the same
   cinematic palette as the opening hero and under the same scrim. */
.page-head--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(3rem, 2rem + 5vw, 6rem);
  background: var(--cine);
  color: var(--on-cine);
}

.page-head--photo .eyebrow { color: var(--cine-gold); }
.page-head--photo .lede { color: var(--on-cine-soft); }

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

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-border: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease),
              background 0.35s var(--ease), transform 0.35s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
  z-index: -1;
}

.btn > * { position: relative; z-index: 1; }

.btn:hover::before { transform: translateY(0); }
.btn:hover { border-color: var(--accent); color: var(--on-accent); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-border: currentColor;
}

.btn--light {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
}

/* The hero's own button: a glass pill lit from the top edge, so it reads as
   a physical object sitting on the photograph rather than a flat rectangle.
   The sheen is a pseudo-element, so it degrades to a plain outline where
   backdrop-filter is unsupported. */
.btn--glass {
  --btn-bg: rgba(255, 255, 255, 0.07);
  --btn-fg: var(--on-cine);
  --btn-border: rgba(247, 240, 234, 0.3);
  padding: 1.05rem 1.9rem;
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 12px 30px -14px rgba(0, 0, 0, 0.8);
}

.btn--glass::before { display: none; }

.btn--glass::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 45%;
  border-radius: 100px 100px 40% 40% / 100px 100px 100% 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), transparent);
  pointer-events: none;
}

.btn--glass:hover {
  --btn-border: rgba(217, 177, 132, 0.75);
  color: var(--on-cine);
}

.btn__arrow {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  transition: transform 0.4s var(--ease-out);
}

.btn:hover .btn__arrow { transform: translate(3px, -3px); }

.btn--small { padding: 0.6rem 1.15rem; font-size: 0.72rem; }
.btn--block { width: 100%; }

/* Text link with an arrow that slides on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease);
}

.link-arrow svg { width: 1rem; height: 1rem; transition: transform 0.35s var(--ease-out); }
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }
.link-arrow:hover svg { transform: translateX(0.3rem); }

/* ----------------------------------------------------------------- cards */

.gallery-grid {
  display: grid;
  gap: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

.gallery-card { display: block; position: relative; }

.gallery-card__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-sunk);
  aspect-ratio: 4 / 5;
}

.gallery-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter 0.6s var(--ease);
}

.gallery-card:hover .gallery-card__frame img { transform: scale(1.05); }

.gallery-card__count {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  background: rgba(26, 16, 20, 0.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-0.3rem);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.gallery-card:hover .gallery-card__count { opacity: 1; transform: translateY(0); }

.gallery-card__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.05rem;
}

.gallery-card__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
}

.gallery-card__meta {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* --------------------------------------------------------- photo mosaic */

/* Column-based masonry: photographs keep their own proportions instead of
   being cropped into a uniform grid. */
.mosaic {
  columns: 3;
  column-gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

.mosaic > * {
  break-inside: avoid;
  margin-bottom: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

@media (max-width: 62rem) { .mosaic { columns: 2; } }
@media (max-width: 34rem) { .mosaic { columns: 1; } }

.photo {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-sunk);
  cursor: zoom-in;
  border: 0;
  padding: 0;
  text-align: left;
}

.photo img {
  width: 100%;
  transition: transform 1s var(--ease-out), opacity 0.6s var(--ease);
}

.photo:hover img { transform: scale(1.03); }

.photo__caption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 1.1rem 1rem;
  background: linear-gradient(to top, rgba(32, 20, 25, 0.68), transparent);
  color: #fff;
  text-shadow: 0 1px 3px rgba(24, 14, 18, 0.5);
  font-size: var(--step--1);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.photo:hover .photo__caption,
.photo:focus-visible .photo__caption { opacity: 1; transform: translateY(0); }

/* Blur-up: the tiny placeholder sits behind until the real file decodes. */
.photo img[data-loading="1"] { filter: blur(14px); transform: scale(1.05); }

/* Editorial strip used on the home page: alternating wide/tall cells. */
.strip {
  display: grid;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  grid-template-columns: repeat(6, 1fr);
}

.strip > * { grid-column: span 2; }
.strip > *:nth-child(6n + 1) { grid-column: span 4; }
.strip > *:nth-child(6n + 4) { grid-column: span 3; }
.strip > *:nth-child(6n + 5) { grid-column: span 3; }

@media (max-width: 52rem) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip > *,
  .strip > *:nth-child(6n + 1),
  .strip > *:nth-child(6n + 4),
  .strip > *:nth-child(6n + 5) { grid-column: span 1; }
}

/* --------------------------------------------------------------- split */

.split {
  display: grid;
  gap: clamp(2rem, 1.5rem + 4vw, 5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: center;
}

.split--offset { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }

@media (max-width: 54rem) {
  .split--offset { grid-template-columns: 1fr; }
}

/* A long piece of writing beside one picture. Centring would strand the
   portrait in the middle of a tall column of text, so the two are aligned at
   the top and the picture follows the reader down instead. */
.split--sticky { align-items: start; }

@media (min-width: 54.0625rem) {
  .split--sticky .split__media {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

.split__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-sunk);
}

.split__media img { width: 100%; object-fit: cover; }

.portrait-frame { aspect-ratio: 4 / 5; }
.portrait-frame img { height: 100%; }

.signature {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* ------------------------------------------------------------- services */

.package-grid {
  display: grid;
  gap: clamp(1rem, 0.75rem + 1.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.package {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease),
              border-color 0.5s var(--ease);
}

.package:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}

.package__name { font-size: var(--step-2); }
.package__tagline { color: var(--muted); margin-top: 0.5rem; font-size: var(--step--1); }

.package__price {
  margin: 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--accent);
}

.package__price small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.package__list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.7rem; }

.package__list li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.package__list li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--accent);
}

.package__foot { margin-top: auto; }

/* ---------------------------------------------------------- testimonials */

.quote-grid {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.quote { position: relative; padding-top: 2.75rem; }

.quote::before {
  content: "\201C";
  position: absolute;
  top: -0.6rem;
  left: -0.3rem;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.28;
}

.quote__text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.45;
  font-style: italic;
  font-variation-settings: "SOFT" 60;
}

.quote__by {
  margin-top: 1.25rem;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.quote__by strong { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------------ CTA */

.cta {
  position: relative;
  padding-block: clamp(4.5rem, 3.5rem + 6vw, 9rem);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  background: var(--band);
  color: var(--on-band);
}

.cta h2 { max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.cta p { margin: 1.5rem auto 0; max-width: 44ch; color: var(--on-band-soft); }
.cta .btn { margin-top: 2.5rem; }

/* With a photograph behind it the band borrows the cinematic palette, the
   same way the opening hero does. */
.cta--photo {
  background: var(--cine);
  color: var(--on-cine);
}

.cta--photo p { color: var(--on-cine-soft); }
.cta--photo .eyebrow { color: var(--cine-gold); }

.cta__media,
.page-head__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.cta__media img,
.page-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cta__media::after,
.page-head__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--scrim-top), var(--scrim-bottom));
}

.cta__glow {
  position: absolute;
  inset: -20% -10% auto;
  height: 60%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 0%, var(--band-glow), transparent 65%);
  opacity: 0.9;
}

/* ---------------------------------------------------------------- forms */

.field { display: grid; gap: 0.5rem; margin-bottom: 1.35rem; }

.field__label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

.field__label .req { color: var(--accent); }

.input, .textarea, .select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 0.7; }

.textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.7rem;
  padding-right: 2.5rem;
}

.field--error .input,
.field--error .textarea,
.field--error .select { border-color: var(--bad); }

.field__error { font-size: var(--step--1); color: var(--bad); }

.field-row {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* Off-screen, but still focusable by a bot filling every input. */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------- flashes */

.flashes {
  position: fixed;
  top: calc(var(--header-h) + 0.75rem);
  right: var(--gutter);
  z-index: 80;
  display: grid;
  gap: 0.6rem;
  width: min(24rem, calc(100vw - var(--gutter) * 2));
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-lg);
  font-size: var(--step--1);
  animation: flash-in 0.5s var(--ease-out) both;
}

.flash--success { border-left-color: var(--ok); }
.flash--error   { border-left-color: var(--bad); }

.flash__close {
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  font-size: 1.1rem;
  padding: 0 0.2rem;
}

@keyframes flash-in {
  from { opacity: 0; transform: translateX(1.5rem); }
  to   { opacity: 1; transform: translateX(0); }
}

/* -------------------------------------------------------------- lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--overlay);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
  color: #fff;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 clamp(1rem, 0.5rem + 4vw, 5rem);
  min-height: 0;
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
  animation: lb-in 0.5s var(--ease-out) both;
}

@keyframes lb-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox__foot {
  padding: 1rem var(--gutter) 1.75rem;
  display: grid;
  gap: 0.65rem;
  justify-items: center;
  text-align: center;
}

.lightbox__caption { max-width: 60ch; color: rgba(255, 255, 255, 0.88); }

.lightbox__exif {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

.lightbox__btn {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.lightbox__btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }
.lightbox__btn:disabled { opacity: 0.25; cursor: default; }
.lightbox__btn svg { width: 1.1rem; height: 1.1rem; }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.lightbox__nav--prev { left: clamp(0.5rem, 0.25rem + 1vw, 1.5rem); }
.lightbox__nav--next { right: clamp(0.5rem, 0.25rem + 1vw, 1.5rem); }

/* -------------------------------------------------------------- pricelist */

/* One row per kind of shoot: name on the left, price on the right, joined by
   a hairline. Collapses to a stacked block on a phone. */
.pricelist { list-style: none; margin: 0; padding: 0; display: grid; }

.pricelist__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 0.6rem 2rem;
  padding-block: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
  border-bottom: 1px solid var(--line);
}

.pricelist__row:first-child { border-top: 1px solid var(--line); }

.pricelist__name {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.2;
}

.pricelist__note {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: var(--step--1);
  max-width: 46ch;
}

.pricelist__price {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  white-space: nowrap;
}

.pricelist__price small {
  margin-right: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.pricelist__ask {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--muted);
}

.pricelist__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.pricelist__link svg { width: 0.95rem; height: 0.95rem; transition: transform 0.3s var(--ease-out); }
.pricelist__link:hover svg { transform: translateX(3px); }

.pricelist__foot {
  margin-top: 2rem;
  color: var(--muted);
  font-size: var(--step--1);
  max-width: 60ch;
}

@media (max-width: 40rem) {
  .pricelist__row { grid-template-columns: 1fr auto; }
  .pricelist__text { grid-column: 1 / -1; }
  .pricelist__price { font-size: var(--step-1); }
}

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

.footer {
  background: var(--paper-sunk);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 2.5rem + 3vw, 5rem) 2rem;
}

.footer__grid {
  display: grid;
  gap: 2.5rem 3rem;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

.footer__title {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

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

.footer__list a {
  color: var(--ink-soft);
  transition: color 0.25s var(--ease);
  font-size: var(--step--1);
}

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

.footer__bottom {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: var(--step--1);
  color: var(--muted);
}

.social { display: flex; gap: 0.5rem; }

.social a {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.social a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.social svg { width: 1.05rem; height: 1.05rem; }

/* ------------------------------------------------------------- utilities */

.empty {
  padding: clamp(2.5rem, 2rem + 3vw, 5rem) 2rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--muted);
}

.empty h3 { color: var(--ink); margin-bottom: 0.75rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}

.pager span { display: block; color: var(--muted); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.3rem; }
.pager a:hover { color: var(--accent); }
.pager__next { text-align: right; margin-left: auto; }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.7rem 1.25rem;
  background: var(--panel);
  color: var(--on-panel);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform 0.25s var(--ease);
}

.skip-link:focus { transform: translate(-50%, 0); }

/* Scroll-reveal: elements start slightly low and fade in once seen. */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .hero__media img { animation: none; }
}