/* ============================================================
   DESIRÉE ACKERMANN — MAIN STYLESHEET

   Layered outermost-in (ITCSS-ish). Each layer may only rely on
   the ones above it, so specificity climbs in one direction only:

     1 SETTINGS    design tokens, no output
     2 GENERIC     reset
     3 ELEMENTS    bare element defaults, no classes
     4 OBJECTS     layout primitives, no cosmetics
     5 COMPONENTS  named UI blocks (BEM)
     6 UTILITIES   single-purpose helpers
     7 STATE       reveal / arrival / reduced-motion overrides

   No id selectors, and no !important outside the reduced-motion
   block, so every rule stays overridable from the layer below it.
   ============================================================ */

/* ============================================================
   1 SETTINGS — all colours sampled from her own photographs
     gold  #E7AB0A  = the yellow suit she wears on stage (GALERIA / WLE)
     ember #D8492B  = the orange suit (Arbeitgeberherzblatt / runway)
     stage #0D1016  = dominant tone of the impro-show stage photo
     olive #2E3229  = background of the historic-look studio portrait
   ============================================================ */
:root {
  --paper: #F7F5F1;
  --paper-2: #EFEBE4;
  --ink: #17181B;
  --ink-70: rgba(23, 24, 27, .7);
  --ink-45: rgba(23, 24, 27, .45);
  --stage: #0D1016;
  --olive: #2E3229;
  --gold: #E7AB0A;
  --gold-hi: #F9CE40;
  --ember: #D8492B;
  --sand: #DCD6CA;
  --light: #EDE9E1;
  --light-70: rgba(237, 233, 225, .72);
  --light-45: rgba(237, 233, 225, .45);

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  --shell: clamp(1.25rem, 5vw, 5.5rem);
  --max: 1400px;
  --band: clamp(4.5rem, 10vh, 8.5rem);

  /* the one easing the whole page moves on */
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);

  /* runtime value, set from nav.offsetHeight — see assets/js/main.js */
  --navh: 64px;
}

/* ============================================================
   2 GENERIC — reset
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* scroll-behavior deliberately unset: JS owns programmatic scroll */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .5vw + .89rem, 1.08rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   3 ELEMENTS — bare defaults, no classes
   ============================================================ */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.025em;
}

p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

strong {
  font-weight: 600;
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

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

/* ============================================================
   4 OBJECTS — layout only, no cosmetics
   ============================================================ */

/* the content band every section shares */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--shell);
}

.band {
  padding-block: var(--band);
}

/* a band that butts straight against the one above it */
.band--flush-top {
  padding-block-start: 0;
}

/* Aspect-ratio utilities named after the NATIVE ratio of her files,
   so nothing is force-cropped into a shape it was not shot in. */
.ratio-2x3 { aspect-ratio: 2 / 3; }  /* 683x1024   studio portraits */
.ratio-3x4 { aspect-ratio: 3 / 4; }  /* 768x1024   set photography  */
.ratio-3x2 { aspect-ratio: 3 / 2; }  /* 1024x683   event / stage    */
.ratio-4x3 { aspect-ratio: 4 / 3; }  /* 1024x768   show / panel     */

/* fills its ratio box without distorting the source */
.fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* focal-point modifiers for sources whose subject sits above centre */
.fit--y25 { object-position: 50% 25%; }
.fit--y35 { object-position: 50% 35%; }

/* 12-column spans, used by the gallery grid */
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }

/* vertical rhythm inside one column of an editorial split */
.stack {
  display: grid;
  gap: 1.3rem;
}

/* ============================================================
   5 COMPONENTS
   ============================================================ */

/* ---------- Shared type ------------------------------------ */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--ink-45);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 2px;
  background: var(--gold);
}

.h-sec {
  max-width: 22ch;
  font-size: clamp(2.1rem, 5vw, 4rem);
}

.lede {
  max-width: 56ch;
  color: var(--ink-70);
  font-size: clamp(1.04rem, .9vw + .86rem, 1.28rem);
  line-height: 1.55;
}

/* territories on a dark ground re-point the ink tokens at the light ones */
.on-dark { color: var(--light); }
.on-dark .eyebrow { color: var(--light-45); }
.on-dark .lede { color: var(--light-70); }

.dark-olive { background: var(--olive); }
.dark-stage { background: var(--stage); }

/* ---------- Buttons ---------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.5rem;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .22s ease, background .22s, border-color .22s, color .22s;
}

.btn--solid {
  background: var(--ink);
  color: var(--paper);
}

.btn--solid:hover {
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
}

.btn--ghost {
  border: 1px solid var(--sand);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.btn--gold {
  padding: 1rem 1.7rem;
  border: none;
  border-radius: 2px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, filter .2s;
}

.btn--gold:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}

.on-dark .btn--ghost {
  border-color: rgba(237, 233, 225, .28);
  color: var(--light);
}

.on-dark .btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ---------- Framed media -----------------------------------
   One block for every captioned photo on the page (moderation
   strip, schauspiel rail, gallery). The three used to be three
   near-identical rule sets differing by fractions of a rem.
   ----------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.frame img {
  transition: transform .7s var(--ease-out-quint);
}

.frame:hover img,
.frame:focus-within img {
  transform: scale(1.04);
}

.frame__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.7rem .9rem .8rem;
  background: linear-gradient(to top, rgba(13, 16, 22, .82), transparent);
  color: #fff;
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s;
}

/* focus-within so a caption is reachable without a pointer */
.frame:hover .frame__cap,
.frame:focus-within .frame__cap {
  opacity: 1;
  transform: none;
}

/* ---------- Key/value pairs (<dl>) -------------------------- */
.beat {
  display: grid;
  gap: .4rem;
}

.beat--ruled {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(237, 233, 225, .16);
}

.beat__k {
  color: var(--gold);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.beat__v {
  color: var(--light-70);
  font-size: .96rem;
  line-height: 1.55;
}

/* ---------- Nav -------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid transparent;
  background: rgba(247, 245, 241, .85);
  backdrop-filter: blur(14px);
  transition: border-color .3s;
}

.nav[data-stuck="true"] {
  border-bottom-color: var(--sand);
}

.nav__in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 64px;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--shell);
}

.mark {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
}

.mark span {
  color: var(--gold);
}

/* Positioning context for the glide indicator, and for the panel itself
   below 940px. Keeping it on the <nav> (not the <ul>) means link.offsetLeft
   in JS is measured against this box in both layouts. */
.nav__links {
  position: relative;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__list a {
  position: relative;
  color: var(--ink-70);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s;
}

.nav__list a:hover,
.nav__list a[aria-current] {
  color: var(--ink);
}

/* underline drawn as its own ::after so hover/focus don't fight the active indicator */
.nav__list a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.35rem;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: .5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out-quint);
}

.nav__list a:hover::after,
.nav__list a:focus-visible::after {
  transform: scaleX(1);
}

/* the active link owns the glide indicator instead — its own underline would double up */
.nav__list a[aria-current]::after {
  transform: scaleX(0);
}

/* Base width is 1px so JS can set transform:scaleX(link.offsetWidth)
   directly as a px-equivalent factor. */
.nav__ind {
  position: absolute;
  bottom: -.35rem;
  left: 0;
  width: 1px;
  height: 2px;
  background: var(--gold);
  opacity: 0;
  transform-origin: left;
  transition:
    transform .45s var(--ease-out-quint),
    opacity .45s var(--ease-out-quint);
}

.nav__ind[data-resizing] {
  transition: none;
}

.nav__cta {
  padding: .62rem 1.05rem;
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.nav__cta:hover {
  background: var(--gold);
  color: var(--ink);
}

/* mobile toggle: hidden >940px; icon is 3 lines that morph into an X via aria-expanded */
.nav__toggle {
  display: none;
  position: relative;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.nav__toggle-ico {
  position: absolute;
  inset: 0;
  width: 1.35rem;
  height: .9rem;
  margin: auto;
}

.nav__toggle-ico span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transition:
    transform .4s var(--ease-out-quint),
    opacity .4s var(--ease-out-quint);
}

.nav__toggle-ico span:nth-child(1) { top: 0; }
.nav__toggle-ico span:nth-child(2) { top: 50%; }
.nav__toggle-ico span:nth-child(3) { top: 100%; }

.nav__toggle[aria-expanded="true"] .nav__toggle-ico span:nth-child(1) {
  transform: translateY(.45rem) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-ico span:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-ico span:nth-child(3) {
  transform: translateY(-.45rem) rotate(-45deg);
}

@media (max-width: 940px) {
  .nav__toggle {
    display: block;
  }

  /* the glide indicator makes no sense once links are stacked in the panel */
  .nav__ind {
    display: none;
  }

  .nav__links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: .4rem var(--shell) 1.5rem;
    border-bottom: 1px solid var(--sand);
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity .4s var(--ease-out-quint),
      transform .4s var(--ease-out-quint),
      visibility .4s var(--ease-out-quint);
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list a {
    display: block;
    padding: .85rem 0 .85rem .9rem;
    opacity: 0;
    transition: color .2s, opacity .4s var(--ease-out-quint);
    transition-delay: calc(var(--i, 0) * 45ms);
  }

  .nav__list li:nth-child(1) { --i: 0; }
  .nav__list li:nth-child(2) { --i: 1; }
  .nav__list li:nth-child(3) { --i: 2; }
  .nav__list li:nth-child(4) { --i: 3; }
  .nav__list li:nth-child(5) { --i: 4; }

  /* the active state loses the (invisible) glide indicator; a static bar takes over */
  .nav__list a[aria-current]::before {
    content: "";
    position: absolute;
    top: .4rem;
    bottom: .4rem;
    left: 0;
    width: 2px;
    background: var(--gold);
  }

  .nav[data-open="true"] .nav__links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .nav[data-open="true"] .nav__list a {
    opacity: 1;
  }
}

/* ---------- Hero -------------------------------------------
   Full-height portrait panel, type floating over it. The image
   occupies the right two thirds so the 2:3 source (683x1024, the
   largest that exists) is only mildly upscaled.
   ----------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: min(100svh, 920px);
  background: var(--stage);
}

/* The panel width is capped three ways so its aspect ratio can never
   drift far from the source's native 2:3:
     68%    - never more than two thirds of a narrow window
     700px  - matches the 683px source, so it renders near 1:1 and stays sharp
     82svh  - on short/flat windows the panel shrinks with the height,
              which is what stops the crop collapsing onto her eyes

   The panel hangs off the right edge of the CONTENT band, not the window: past
   1400px the type stops widening (it is capped by --max and centred), so a
   window-pinned panel would drift away from the name on wide screens. Below
   --max the offset resolves to 0 and nothing moves. */
.hero__media {
  position: absolute;
  top: 0;
  right: max(0px, (100% - var(--max)) / 2);
  bottom: 0;
  z-index: -3;
  width: min(68%, 700px, 82svh);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* the left-to-right fade lives on the panel itself, so it always lines up with the image edge */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--stage) 0%,
    rgba(13, 16, 22, .74) 30%,
    rgba(13, 16, 22, .20) 66%,
    rgba(13, 16, 22, 0) 100%);
}

/* Once the panel really has room to its right, its own right edge would meet the
   stage colour as a hard seam — dissolve it, mirroring the left-hand fade above. */
@media (min-width: 1560px) {
  .hero__media::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: clamp(2rem, 4vw, 5rem);
    background: linear-gradient(to right, rgba(13, 16, 22, 0), var(--stage));
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to top,
    rgba(13, 16, 22, .86) 0%,
    rgba(13, 16, 22, .30) 40%,
    rgba(13, 16, 22, 0) 62%);
}

/* fine grain masks the upscaling of the 683px source */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__in {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-top: clamp(5.5rem, 16vh, 9rem);
  padding-bottom: clamp(2.4rem, 7vh, 4.2rem);
  padding-inline: var(--shell);
}

.hero__name {
  margin-top: clamp(1rem, 3vh, 1.8rem);
  color: var(--light);
  font-size: clamp(3rem, 10.5vw, 8.6rem);
  font-weight: 800;
  font-stretch: 96%;
  line-height: .85;
  letter-spacing: -.045em;
  text-shadow: 0 2px 40px rgba(13, 16, 22, .45);
}

/* one line each, independent of where the text would otherwise wrap */
.hero__name span {
  display: block;
}

.hero__role {
  margin-top: clamp(.9rem, 2.2vh, 1.4rem);
  color: var(--light);
  font-family: var(--mono);
  font-size: clamp(.74rem, 1vw, .9rem);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero__role strong {
  color: var(--gold);
  font-weight: 500;
}

.hero__claim {
  max-width: 28ch;
  margin-top: clamp(1.2rem, 3vh, 1.9rem);
  color: var(--light);
  font-size: clamp(1.04rem, .8vw + .9rem, 1.3rem);
  line-height: 1.45;
  text-shadow: 0 1px 24px rgba(13, 16, 22, .55);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: clamp(1.5rem, 3.5vh, 2.2rem);
}

.hero .btn--solid {
  background: var(--gold);
  color: var(--ink);
}

.hero .btn--solid:hover {
  filter: brightness(1.08);
}

.hero .btn--ghost {
  border-color: rgba(237, 233, 225, .4);
  color: var(--light);
}

.hero .btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Small credit line, bottom right of the hero — follows the panel in off the
   window edge on wide screens, so the credit keeps sitting on the photo it credits. */
.hero__credit {
  position: absolute;
  right: calc(max(0px, (100% - var(--max)) / 2) + var(--shell));
  bottom: 1.1rem;
  color: rgba(237, 233, 225, .42);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.live {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--light-70);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.live__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(231, 171, 10, .6);
  animation: onair 2.6s ease-out infinite;
}

@keyframes onair {
  0% { box-shadow: 0 0 0 0 rgba(231, 171, 10, .55); }
  70% { box-shadow: 0 0 0 11px rgba(231, 171, 10, 0); }
  100% { box-shadow: 0 0 0 0 rgba(231, 171, 10, 0); }
}

@media (max-width: 900px) {
  .hero {
    min-height: min(100svh, 760px);
  }

  .hero__media {
    inset: 0;
    width: auto;
  }

  .hero__media img {
    object-position: 50% 16%;
  }

  .hero__media::after {
    display: none;
  }

  .hero__scrim {
    background: linear-gradient(to top,
      rgba(13, 16, 22, .94) 0%,
      rgba(13, 16, 22, .72) 34%,
      rgba(13, 16, 22, .26) 62%,
      rgba(13, 16, 22, .45) 100%);
  }

  .hero__credit {
    display: none;
  }
}

/* ---------- Client ticker ---------------------------------- */
.ticker {
  overflow: hidden;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--sand);
  background: var(--paper);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: slide 62s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

@keyframes slide {
  to { transform: translateX(-50%); }
}

.ticker__set {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticker__item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-inline: 1.5rem;
  color: var(--ink-70);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .1em;
  white-space: nowrap;
}

.ticker__item::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- Signature cue cards ---------------------------- */
.cards__head {
  max-width: var(--max);
  margin-inline: auto;
  margin-bottom: clamp(2.4rem, 6vh, 4rem);
  padding-inline: var(--shell);
}

.quote__text {
  max-width: 30ch;
  margin-top: 1.5rem;
  font-family: var(--display);
  font-size: clamp(1.55rem, 3.4vw, 2.8rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.02em;
}

.quote__text strong {
  background: linear-gradient(transparent 62%, var(--gold-hi) 62%);
  font-weight: 800;
}

.quote__src {
  margin-top: 1.4rem;
  color: var(--ink-45);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: start;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--shell);
}

.card {
  position: relative;
  display: block;
  padding: clamp(1.2rem, 1.7vw, 1.6rem);
  border: 1px solid var(--sand);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(23, 24, 27, .04);
  text-decoration: none;
  will-change: transform;
  transition:
    transform .38s var(--ease-out-quint),
    box-shadow .38s,
    border-color .3s;
}

/* the deck is fanned out, and squares up on hover */
.card:nth-child(1) { transform: rotate(-1.1deg); }
.card:nth-child(2) { transform: rotate(.55deg) translateY(8px); }
.card:nth-child(3) { transform: rotate(1.3deg) translateY(-4px); }

.card:hover,
.card:focus-visible {
  border-color: var(--ink);
  box-shadow: 0 24px 46px -20px rgba(23, 24, 27, .3);
  transform: rotate(0) translateY(-10px);
}

.card__figure {
  overflow: hidden;
  border-radius: 1px;
}

.card__figure img {
  transition: transform .6s var(--ease-out-quint);
}

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

.card__label {
  margin: 1.3rem 0 .55rem;
  color: var(--ink-45);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.card__title {
  font-size: clamp(1.35rem, 1.9vw, 1.8rem);
}

.card__text {
  margin-top: .7rem;
  color: var(--ink-70);
  font-size: .94rem;
  line-height: 1.55;
}

.card__more {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.3rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.card__more svg {
  transition: transform .3s;
}

.card:hover .card__more svg {
  transform: translateX(5px);
}

@media (max-width: 860px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .card,
  .card:nth-child(n) {
    transform: none;
  }

  .card:hover {
    transform: translateY(-5px);
  }
}

/* ---------- Moderation: light territory, 3:2 landscapes ----- */
.mod__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  max-width: var(--max);
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vh, 3rem);
  padding-inline: var(--shell);
}

.mod__strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 1.3vw, 1.1rem);
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--shell);
}

@media (max-width: 860px) {
  .mod__head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

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

/* ---------- Schauspiel: olive territory, 2:3 portrait rail -- */
.act__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  max-width: var(--max);
  margin-inline: auto;
  margin-bottom: clamp(2.2rem, 5vh, 3.2rem);
  padding-inline: var(--shell);
}

.rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 1.1vw, .9rem);
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--shell);
}

.act__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1rem, 2.5vw, 2.2rem);
  max-width: var(--max);
  margin-inline: auto;
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: clamp(1.6rem, 4vh, 2.4rem);
  padding-inline: var(--shell);
  border-top: 1px solid rgba(237, 233, 225, .16);
}

@media (max-width: 860px) {
  .act__head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .rail {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Impro: full-bleed stage photo as its own backdrop */
.impro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 13vh, 10rem);
}

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

.impro__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 35%;
}

.impro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(102deg,
    rgba(13, 16, 22, .95) 0%,
    rgba(13, 16, 22, .88) 40%,
    rgba(13, 16, 22, .55) 72%,
    rgba(13, 16, 22, .3) 100%);
}

.impro__in {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--shell);
}

.impro__h {
  max-width: 17ch;
  font-size: clamp(2rem, 4.8vw, 3.8rem);
}

.three {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  max-width: var(--max);
  margin-inline: auto;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: clamp(1.8rem, 4.5vh, 2.8rem);
  padding-inline: var(--shell);
  border-top: 1px solid rgba(237, 233, 225, .18);
}

.three__n {
  color: var(--gold);
  font-family: var(--display);
  font-size: clamp(3.6rem, 10vw, 8rem);
  font-weight: 800;
  font-stretch: 88%;
  line-height: .8;
  letter-spacing: -.05em;
}

.three__t {
  max-width: 46ch;
  color: var(--light-70);
  font-size: 1rem;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .impro__in {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .impro::after {
    background: linear-gradient(180deg, rgba(13, 16, 22, .9) 0%, rgba(13, 16, 22, .94) 60%);
  }
}

/* ---------- Gallery: orientation-aware ---------------------
   Portraits and landscapes each get a slot shaped like the file.
   ----------------------------------------------------------- */
.gal__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  max-width: var(--max);
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vh, 3rem);
  padding-inline: var(--shell);
}

.gal {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.5rem, 1.1vw, .95rem);
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--shell);
}

@media (max-width: 860px) {
  .gal {
    grid-template-columns: repeat(2, 1fr);
  }

  /* the 12-col spans are meaningless here — everything is one cell wide … */
  .gal .frame {
    grid-column: span 1;
  }

  /* … except the landscapes flagged wide, which keep the whole row */
  .gal .gal__wide {
    grid-column: span 2;
  }
}

/* ---------- Press ------------------------------------------ */
.press {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: var(--max);
  margin-inline: auto;
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-inline: var(--shell);
  list-style: none;
}

/* the <li> is a pure grid cell; the link fills it so hover hits the whole card */
.press__item {
  display: grid;
}

.press__link {
  display: grid;
  align-content: start;
  gap: .65rem;
  padding: 1.5rem;
  border: 1px solid var(--sand);
  border-radius: 2px;
  text-decoration: none;
  transition: border-color .25s, transform .25s ease, background .25s;
}

.press__link:hover {
  border-color: var(--ink);
  background: #fff;
  transform: translateY(-4px);
}

.press__src {
  color: var(--ink);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.press__link:hover .press__src {
  color: var(--ember);
}

.press__t {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.press__d {
  color: var(--ink-45);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
}

/* ---------- Contact ---------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--shell);
}

.contact__h {
  max-width: 16ch;
  font-size: clamp(2rem, 5vw, 3.8rem);
}

.contact__split {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.contact__portrait {
  overflow: hidden;
  border-radius: 2px;
}

.form__intro {
  margin-bottom: 1.4rem;
  font-size: 1rem;
}

.form__note {
  margin-top: 1rem;
  color: var(--light-45);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .08em;
}

.field {
  display: grid;
  gap: .45rem;
  margin-bottom: 1rem;
}

.field label {
  color: var(--light-45);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .82rem .95rem;
  border: 1px solid rgba(237, 233, 225, .2);
  border-radius: 2px;
  background: rgba(255, 255, 255, .05);
  color: var(--light);
  font-family: var(--body);
  font-size: 1rem;
  transition: border-color .2s, background .2s;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, .09);
}

.field textarea {
  min-height: 104px;
  resize: vertical;
}

.field select option {
  background: var(--stage);
  color: var(--light);
}

.agency {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(237, 233, 225, .18);
}

.agency__k {
  margin-bottom: .7rem;
  color: var(--light-45);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.agency__n {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.agency p {
  margin-top: .5rem;
  color: var(--light-70);
  font-size: .94rem;
}

.agency a {
  color: var(--light);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

@media (max-width: 940px) {
  .contact {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

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

  .contact__split figure {
    max-width: 320px;
  }
}

/* ---------- Footer ----------------------------------------- */
.foot {
  padding-block: 2.2rem;
  border-top: 1px solid var(--sand);
}

.foot__in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--shell);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* NOTE: deliberately still `.foot a`, not `.foot__links a`. It also lands on the
   footer .mark and out-specifies it, which is what gives the footer logo its small
   uppercase mono look today. Narrowing the selector would silently restyle that
   logo, so the reach is kept and documented instead of quietly "fixed". */
.foot a {
  color: var(--ink-70);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s;
}

.foot a:hover {
  color: var(--ink);
}

/* ============================================================
   6 UTILITIES
   ============================================================ */

/* Anchor targets clear the sticky nav, using its live runtime height.
   A class rather than the id list this used to be, so the rule stays
   at class specificity and travels with the markup. */
.anchor {
  scroll-margin-top: calc(var(--navh) + 1.25rem);
}

/* visually hidden but reachable by screen readers — unlike .honeypot,
   this must stay focusable and announced */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* spam trap: parked off-canvas, never focused, never announced */
.honeypot {
  position: absolute;
  left: -9999px;
}

/* ============================================================
   7 STATE — reveal, arrival, reduced motion
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .8s ease,
    transform .8s var(--ease-out-quint);
}

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

/* arrival flourish for the soft-scroll target section, see assets/js/main.js */
@keyframes arrive {
  from { opacity: .45; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.arrive {
  animation: arrive .75s var(--ease-out-quint) both;
}

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

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

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

  .ticker__track {
    animation: none;
  }

  /* Belt-and-braces restatement of the nav motion — the universal duration
     override above already guts these, but say it plainly, and fully drop
     .arrive since JS also gates it on reduced.matches before the class is
     ever added. */
  .arrive {
    animation: none;
  }

  .nav__ind,
  .nav__list a::after,
  .nav__toggle-ico span,
  .nav__links {
    transition: none;
  }

  /* Load-bearing: transition-delay isn't a duration, so the panel-link stagger
     survives the universal override above untouched — without this the last
     link would sit at opacity:0 for ~180ms after the panel opens. */
  .nav__list a {
    transition: none;
  }
}