/* EEE Nexus site styles. Plain CSS, no build step.

   The idea: black, white and gold fields split on the lean of the bars in the
   logo. The logo builds itself once at the top of the page, and the venture
   path further down is drawn in the logo's own shapes. Everything else stays
   quiet and left-aligned.

   Two typefaces, one for each discipline: Newsreader (a newspaper serif) is
   the business voice and carries the reading text; Archivo (a heavy, wide
   sans, close to the logo's own lettering) is the engineering voice and
   carries headings and numbers.

   Gold text is only ever used on black (gold on white fails contrast). */

/* The font files are trimmed to the ranges below by tools/build_fonts.py. */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 600 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --black: #000;
  --gold: #BF9100;
  --white: #fff;
  --ink: #1b1915;      /* reading text */
  --mute: #57534a;     /* secondary text on white */
  --rule: #d6d2c6;     /* hairlines */
  --bench: #efede8;    /* the one quiet neutral, a workbench grey */

  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --text: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --slope: 16.3deg;    /* lean of the logo's bars, measured from the original */
  --bar: clamp(1.75rem, 3.3vw, 2.75rem);   /* thickness of the big gold divider */
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --wrap: 76rem;
  --header-h: 5rem;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--text);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
}

/* anything marked hidden in the page stays hidden, whatever its layout */
[hidden] { display: none !important; }

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 3px; text-decoration-color: var(--gold); }

:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--white);
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 850;
  font-stretch: 114%;
  line-height: 1.05;
  color: var(--black);
  text-wrap: balance;
}
h2 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); line-height: 0.98; letter-spacing: -0.02em; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -5rem;
  z-index: 100;
  background: var(--black);
  color: var(--white);
  padding: 0.6rem 1rem;
  font: 700 1rem var(--display);
}
.skip-link:focus { top: 0.75rem; }

/* ---------- The two voices ---------- */
.voice-biz { font-family: var(--text); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -0.01em; }
.voice-eng { font-family: var(--display); font-style: normal; font-weight: 850; font-stretch: 114%; }

/* ---------- Header ---------- */
.site-header { background: var(--white); border-bottom: 3px solid var(--gold); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  padding-block: 0.6rem;
}
.brand { display: block; flex: none; }
.brand img { height: 2.9rem; width: auto; }
.nav { list-style: none; margin: 0 0 0 -0.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.15rem; }
.nav a {
  display: block;
  padding: 0.5rem 0.6rem;
  font: 650 0.95rem/1.2 var(--display);
  font-stretch: 104%;
  color: var(--black);
  text-decoration: none;
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0.6rem calc(100% - 0.2rem) / 0 3px;
  transition: background-size 0.18s ease-out;
}
.nav a:hover, .nav a:focus-visible { background-size: calc(100% - 1.2rem) 3px; }

/* ---------- Buttons ---------- */
.button {
  display: inline-block;
  padding: 0.95rem 1.5rem;
  border: 2px solid var(--black);
  background: var(--black);
  color: var(--white);
  font: 750 1rem/1.15 var(--display);
  font-stretch: 108%;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.button:hover { background: var(--white); color: var(--black); }
.button-gold { background: var(--gold); border-color: var(--gold); color: var(--black); }
.button-gold:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.button-ghost { background: transparent; border-color: var(--white); color: var(--white); }
.button-ghost:hover { background: var(--white); color: var(--black); }

/* ---------- Opening screen ---------- */
.hero { position: relative; overflow: hidden; background: var(--black); color: var(--white); }
.hero-copy { padding-block: clamp(2.75rem, 9vw, 4rem) clamp(2.5rem, 8vw, 3.5rem); }
.hero h1 { color: var(--white); font-weight: 400; }
.hero h1 span { display: block; }
.hero h1 .voice-biz { font-size: clamp(2.7rem, 11.5vw, 5.2rem); line-height: 0.98; font-weight: 400; letter-spacing: -0.02em; }
.hero h1 .voice-eng { font-size: clamp(1.9rem, 8.2vw, 3.7rem); line-height: 1; margin-top: 0.3em; letter-spacing: -0.02em; }
.lede { margin: 1.75rem 0 0; max-width: 31rem; font-size: 1.3rem; line-height: 1.45; color: #f0f0f0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }
.hero :focus-visible { outline-color: var(--white); box-shadow: 0 0 0 6px var(--black); }

.hero-mark {
  margin-inline: calc(-1 * var(--gutter));
  padding: 2.75rem var(--gutter) 3rem;
  background: var(--white);
  border-top: 0.9rem solid var(--gold);
}
.lg { width: min(19rem, 76%); height: auto; margin-inline: auto; overflow: visible; }

@media (min-width: 60rem) {
  .site-header { position: sticky; top: 0; z-index: 50; }
  .brand img { height: 3.5rem; }
  .nav { margin-left: 0; }

  /* The black field: a tall block leaning at the logo's angle, with the gold
     bar as its right edge. It is skewed about its bottom-right corner, so the
     lean stays exact however tall the opening screen is. */
  .hero { background: var(--white); isolation: isolate; }
  .hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 -70vw;
    width: calc(70vw + 50% - 2.4rem);
    background: var(--black);
    border-right: var(--bar) solid var(--gold);
    transform-origin: 100% 100%;
    transform: skewX(calc(-1 * var(--slope)));
  }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .hero-copy { padding-block: 5rem 5.25rem; }
  .hero h1 { width: 128%; max-width: 44rem; }
  .hero h1 .voice-biz { font-size: clamp(3.4rem, 6.6vw, 5.3rem); }
  .hero h1 .voice-eng { font-size: clamp(2.3rem, 4vw, 3.25rem); }
  .lede { max-width: min(31rem, 100% - 3.5rem); }
  .hero-mark { margin: 0; padding: 3rem 0; background: none; border: 0; justify-self: end; width: min(25rem, 76%); }
  .lg { width: 100%; margin: 0; }
}

/* ---------- The logo assembling (plays once when the page opens) ----------
   The resting state is the finished logo. The steps below only run for
   visitors who have not asked their device to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  .lg-bar { stroke-dasharray: 1.02; animation: lg-draw 0.42s cubic-bezier(0.55, 0, 0.3, 1) both; }
  .lg-node, .lg-head { transform-box: fill-box; transform-origin: 50% 50%; animation: lg-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
  .lg-word, .lg-tag { animation: lg-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  .lg-node1 { animation-delay: 0.35s; }
  .lg-bar1  { animation-delay: 0.60s; }
  .lg-node2 { animation-delay: 0.85s; }
  .lg-bar2  { animation-delay: 1.05s; }
  .lg-node3 { animation-delay: 1.30s; }
  .lg-bar3  { animation-delay: 1.50s; }
  .lg-head  { animation-delay: 1.84s; animation-duration: 0.32s; }
  .lg-word  { animation-delay: 2.05s; }
  .lg-tag   { animation-delay: 2.25s; }

  .hero-copy > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-copy > :nth-child(1) { animation-delay: 0.15s; }
  .hero-copy > :nth-child(2) { animation-delay: 0.3s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.42s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.54s; }

  @media (min-width: 60rem) {
    .hero::before { animation: sweep 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  }
}
@keyframes lg-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes lg-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes lg-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sweep {
  from { transform: translateX(-102%) skewX(calc(-1 * var(--slope))); }
  to { transform: skewX(calc(-1 * var(--slope))); }
}

/* ---------- Photo band ---------- */
.band { position: relative; margin: 0; background: var(--black); }
.band img { width: 100%; height: clamp(15rem, 46vw, 35rem); object-fit: cover; object-position: 50% 62%; }
.band figcaption, .photo figcaption, .gallery figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.5rem 1rem 0.45rem;
  background: var(--black);
  color: var(--white);
  font: 650 0.9rem/1.2 var(--display);
  font-stretch: 104%;
}
.band figcaption { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }

/* ---------- The film ----------
   A black field under the photo. The film's opening picture is half black and
   half white, so its black half runs into the field and the white half stands
   out. site.js swaps the browser's controls for the big play button; once the
   film is playing the browser's controls come back. */
.hero-film { margin: 1.5rem 0 0; }
.hero-film a { font: 700 1rem/1.2 var(--display); font-stretch: 104%; color: var(--white); }
.hero-film a::before {
  content: "";
  display: inline-block;
  margin-right: 0.6rem;
  border-left: 0.75rem solid var(--gold);
  border-block: 0.45rem solid transparent;
}

.film {
  background: var(--black);
  color: var(--white);
  border-top: 0.9rem solid var(--gold);
  padding-block: clamp(3.75rem, 9vw, 7.5rem);
}
.film h2 { color: var(--white); margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.film h2 span { display: block; }
.film h2 .voice-biz { font-weight: 400; }
.film h2 .voice-eng { font-size: 0.72em; margin-top: 0.25em; }
.film :focus-visible { outline-color: var(--white); box-shadow: 0 0 0 6px var(--black); }

.film-frame { position: relative; background: var(--black); }
.film-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* The play button covers the whole picture, so a press anywhere starts the
   film. Its gold disc sits in the empty black corner, clear of the logo. */
.film-play {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: center;
  justify-items: start;
  column-gap: clamp(0.75rem, 1.4vw, 1.1rem);
  width: 100%;
  padding: 5.5% 0 0 4.7%;
  border: 0;
  background: none;
  color: var(--white);
  font: 750 1.05rem/1.2 var(--display);
  font-stretch: 108%;
  text-align: left;
  cursor: pointer;
}
.film-play[hidden] { display: none; }
.film-play-disc {
  display: grid;
  place-items: center;
  width: clamp(3rem, 9vw, 6.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  transition: scale 0.18s ease-out, background-color 0.15s;
}
.film-play-disc svg { width: 40%; margin-left: 7%; fill: var(--black); }
.film-play:hover .film-play-disc { scale: 1.1; background: var(--white); }
.film-play-more { display: block; margin-top: 0.3rem; font-weight: 600; font-size: 0.9rem; font-stretch: 100%; }
.film-play:focus-visible { outline: 3px solid var(--white); outline-offset: -7px; box-shadow: inset 0 0 0 10px var(--black); }

@media (max-width: 59.99rem) {
  .film-play { font-size: 0.9rem; }
  .film-play-more { display: none; }
}
@media (max-width: 36rem) {
  /* phones: the disc alone; the words stay for screen readers */
  .film-play-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.film-words { margin-top: 1.5rem; max-width: 40rem; }
.film-words summary {
  width: fit-content;
  padding-block: 0.4rem;
  font: 700 1rem/1.2 var(--display);
  font-stretch: 104%;
  color: var(--gold);
  cursor: pointer;
}
.film-words p { margin: 0.75rem 0 0; color: #f0f0f0; }

/* ---------- Sections ---------- */
.sec { padding-block: clamp(3.75rem, 9vw, 7.5rem); }
.sec-bench { background: var(--bench); }
.split { display: grid; gap: 1.5rem; }
.prose { max-width: 36rem; }
.prose p { font-size: 1.25rem; line-height: 1.5; }
.sub-h { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 1.75rem; }

@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: start; }
  .split h2 { max-width: 9.5em; }
  .prose { padding-top: 0.5rem; }
}

/* ---------- Mission ---------- */
.mission { background: var(--gold); color: var(--black); padding-block: clamp(3rem, 7vw, 5.5rem); }
.mission h3 { font-size: 1.15rem; margin-bottom: 1.25rem; }
.mission blockquote { margin: 0; }
.mission blockquote p { font-size: clamp(1.5rem, 3.3vw, 2.75rem); line-height: 1.24; letter-spacing: -0.015em; max-width: 26em; }
.mission .voice-eng { font-size: 0.82em; letter-spacing: -0.01em; }
.mission ::selection { background: var(--black); color: var(--gold); }

/* ---------- Three-across lists ---------- */
.trio { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.trio li { border-top: 3px solid var(--black); padding-top: 1.1rem; }
.trio h3, .trio h4 { font-size: 1.3rem; margin-bottom: 0.6rem; }
@media (min-width: 48rem) {
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}

/* ---------- The venture path ---------- */
.path { position: relative; margin-block: 3rem 4.5rem; }
.path-lines { display: none; }
.pl { fill: none; stroke: var(--gold); stroke-width: 44; }
.ph { fill: var(--gold); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.step { --node: 4.25rem; position: relative; display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 1.1rem; align-items: start; }
.step-n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--node);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font: 900 1.9rem/1 var(--display);
  font-stretch: 108%;
}
/* phones: the path ends in a gold disc with the logo's upward arrow */
.step-arrow { position: relative; z-index: 1; width: var(--node); aspect-ratio: 1; border-radius: 50%; background: var(--gold); }
.step-b { padding-top: 0.35rem; }
.step-b strong { display: block; font: 800 1.2rem/1.15 var(--display); font-stretch: 112%; color: var(--black); }
.step-b p { margin: 0.3rem 0 0; font-size: 1.0625rem; line-height: 1.4; }
.step-go .step-b strong { font-size: 1.45rem; }
/* phones: one gold bar runs down behind the circles */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--node) / 2 - 0.45rem);
  top: calc(var(--node) / 2);
  bottom: calc(-1.6rem - var(--node) / 2);
  width: 0.9rem;
  background: var(--gold);
}

@media (min-width: 60rem) {
  /* wide screens: the steps sit on a drawing; sizes follow the drawing's width */
  .path { container-type: inline-size; aspect-ratio: 940 / 670; max-width: 66rem; }
  .path-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .steps { position: absolute; inset: 0; display: block; }
  .step { position: absolute; display: block; width: 0; height: 0; }
  .step:not(:last-child)::before { display: none; }
  .step-n { position: absolute; left: 0; top: 0; width: 14.043cqw; transform: translate(-50%, -50%); font-size: 6.3cqw; }
  .step-b { position: absolute; left: -7.02cqw; width: 21.9cqw; padding: 0; }
  .s-low .step-b { top: 8.3cqw; }
  .s-high .step-b { bottom: 8.3cqw; }
  .step-b strong { font-size: clamp(1rem, 1.85cqw, 1.25rem); }
  .step-b p { font-size: clamp(0.94rem, 1.62cqw, 1.0625rem); }
  .s1 { left: 11.702%; top: 66.567%; }
  .s2 { left: 23.404%; top: 30.746%; }
  .s3 { left: 35.106%; top: 66.567%; }
  .s4 { left: 46.809%; top: 30.746%; }
  .s5 { left: 58.511%; top: 66.567%; }
  .step-go { left: 76.2%; top: 17%; }
  .step-go .step-arrow { display: none; }
  .step-go .step-b { left: 0; top: 0; width: 23.4cqw; }
  .step-go .step-b strong { font-size: clamp(1.3rem, 2.7cqw, 1.9rem); }
}

/* The path draws itself the first time it scrolls into view. site.js adds
   .path-waiting, then swaps it for .path-go. Without the script, or with
   reduced motion, the path is simply drawn. */
.path-waiting .pl { stroke-dasharray: 1.02; stroke-dashoffset: 1.02; }
.path-waiting .ph { opacity: 0; }
.path-waiting .step:not(:last-child)::before { transform: scaleY(0); }
.path-go .pl { stroke-dasharray: 1.02; animation: lg-draw 0.38s cubic-bezier(0.55, 0, 0.3, 1) both; }
.path-go .ph { transform-box: fill-box; transform-origin: 50% 50%; animation: lg-pop 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: 1.72s; }
.path-go .pl2 { animation-delay: 0.32s; }
.path-go .pl3 { animation-delay: 0.64s; }
.path-go .pl4 { animation-delay: 0.96s; }
.path-go .pl5 { animation-delay: 1.28s; animation-duration: 0.46s; }
.path-go .step:not(:last-child)::before { transform-origin: 50% 0; animation: grow 0.34s ease-out both; }
.path-go .step:nth-child(2)::before { animation-delay: 0.3s; }
.path-go .step:nth-child(3)::before { animation-delay: 0.6s; }
.path-go .step:nth-child(4)::before { animation-delay: 0.9s; }
.path-go .step:nth-child(5)::before { animation-delay: 1.2s; }
.path-go .step-n { animation: bump 0.4s ease-out both; }
.path-go .step:nth-child(2) .step-n { animation-delay: 0.3s; }
.path-go .step:nth-child(3) .step-n { animation-delay: 0.62s; }
.path-go .step:nth-child(4) .step-n { animation-delay: 0.94s; }
.path-go .step:nth-child(5) .step-n { animation-delay: 1.26s; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bump { 0% { scale: 1; } 45% { scale: 1.09; } 100% { scale: 1; } }

/* ---------- What you can take ---------- */
.offer { display: grid; gap: 2.5rem; }
.catalog { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--black); }
.catalog li { display: grid; gap: 0.5rem 2rem; padding-block: 1.35rem; border-bottom: 1px solid var(--black); }
.catalog h4 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.status { margin: 0.5rem 0 0; font: 700 0.92rem/1.2 var(--display); font-stretch: 104%; color: var(--black); }
.status::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.5rem; vertical-align: -0.03rem; border: 2px solid var(--black); }
.status-on::before { background: var(--gold); border-color: var(--gold); }
.photo { position: relative; margin: 0; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.note { margin-top: 2.5rem; font-size: 1.125rem; }

@media (min-width: 60rem) {
  .offer { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: start; }
  .catalog li { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}

/* ---------- The Lab ---------- */
.rooms { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 2.5rem; }
.rooms h3 { margin: 1.1rem 0 0.4rem; font-size: 1.45rem; }
/* room numbers set like the signs beside the doors */
.plate {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  padding: 1rem 1.5rem 0.9rem;
  background: var(--black);
  color: var(--white);
  font-family: var(--display);
  line-height: 0.9;
}
.plate-b { font-weight: 700; font-stretch: 100%; font-size: clamp(1rem, 2vw, 1.35rem); }
.plate-n { font-weight: 900; font-stretch: 120%; font-size: clamp(4.25rem, 13vw, 8.5rem); letter-spacing: -0.03em; }
.rooms + .sub-h { margin-top: 4rem; }
.kit { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--black); }
.kit li { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.gallery { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.gallery figure { position: relative; margin: 0; height: 100%; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (min-width: 48rem) {
  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .kit { columns: 2; column-gap: 3rem; }
  /* 2.08 : 1 makes the two stacked photos exactly as tall as the large one */
  .gallery { grid-template-columns: minmax(0, 2.08fr) minmax(0, 1fr); }
  .gallery-big { grid-row: 1 / 3; }
  .gallery-big img { aspect-ratio: auto; }
}

/* ---------- Partner (black) ---------- */
.sec-dark { background: var(--black); color: var(--white); }
.sec-dark h2 { color: var(--white); }
.sec-dark h3 { color: var(--gold); }
.sec-dark .trio { margin-top: 3.5rem; }
.sec-dark .trio li { border-top-color: var(--gold); }
.sec-dark a { color: var(--gold); }
.sec-dark .button-gold { color: var(--black); }
.sec-dark :focus-visible { outline-color: var(--white); box-shadow: 0 0 0 6px var(--black); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 3.5rem 0 0; }

/* ---------- Contact ---------- */
.mail {
  margin: 1.5rem 0 2.5rem;
  font: 850 clamp(1.55rem, 6.6vw, 5.4rem)/1 var(--display);
  font-stretch: 112%;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.mail a {
  color: var(--black);
  text-decoration: none;
  padding-bottom: 0.1em;
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 100% 0.09em;
  transition: background-size 0.15s ease-out;
}
.mail a:hover { background-size: 100% 0.2em; }
.small-h { font-size: 1.1rem; margin-bottom: 0.5rem; }
address { font-style: normal; }
.contact-grid { border-top: 3px solid var(--black); padding-top: 1.5rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: #dcdcdc; padding-block: 2.75rem; border-top: 0.9rem solid var(--gold); font-size: 1rem; }
.footer-name { margin: 0 0 1rem; color: var(--gold); font: 850 1.2rem/1.2 var(--display); font-stretch: 114%; }
.footer-name span { display: block; margin-top: 0.2rem; color: var(--white); font: 600 0.9rem/1.3 var(--display); }
.disclaimer { max-width: 46em; margin: 0; }

/* ---------- Page not found ---------- */
.notfound { padding-block: 5rem; }
.notfound img { width: 9rem; margin-bottom: 2rem; }
.notfound h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); letter-spacing: -0.02em; }
.notfound p { margin: 1.25rem 0 2rem; font-size: 1.3rem; }

@media (max-width: 59.99rem) {
  :root { --header-h: 0rem; }
  .nav a { padding: 0.4rem 0.6rem; font-size: 0.9rem; }
}
@media (max-width: 30rem) {
  /* phones: the five links fit on one line */
  .nav-more { display: none; }
  .nav { margin-left: -0.4rem; gap: 0; }
  .nav a { padding-inline: 0.4rem; font-size: 0.875rem; background-position-x: 0.4rem; }
  .nav a:hover, .nav a:focus-visible { background-size: calc(100% - 0.8rem) 3px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav a, .button, .mail a, .film-play-disc { transition: none; }
}