/* ==========================================================================
   BeSpace Inc. — bespaceinc.com

   Design system measured from the Outgrid (UiCore) "Kindergarden" demo, the
   template the original bespaceinc.com was built on. Type sizes, weights and
   column offsets below are taken from the reference PDFs at a 1376px page
   width, so the proportions are the template's rather than an approximation.

   The language in one line: white ground, near-black ink, enormous Medium-
   weight display type, small black micro-labels, hairline rules, and a lot of
   deliberate empty space with content pushed into a right-hand column.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Satoshi — self-hosted

   Upright coverage is Regular (400) and Black (900); the italics run 300/400/
   500. These are registered under the real family name because 400 is present:
   a request for 500 resolves down to 400, never up to the Black. (An earlier
   pass had only the Black upright, and every heading rendered Black as a
   result — hence the care here.)

   STILL MISSING: upright Medium (500), the weight all display type asks for.
   The Fontshare <link> in each page supplies it, so the CDN is a genuine
   enhancement rather than load-bearing — if it fails, the page falls back to
   self-hosted Satoshi Regular rather than to a different typeface entirely.
   Drop Satoshi-Medium.woff2 in here, register it at 500, and the <link>s can
   go. Light (300) and Bold (700) uprights are unused by the current design.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: Satoshi;
  src: url("../fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../fonts/Satoshi-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../fonts/Satoshi-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../fonts/Satoshi-MediumItalic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../fonts/Satoshi-LightItalic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: Satoshi;
  src: url("../fonts/Satoshi-BlackItalic.woff2") format("woff2");
  font-weight: 900; font-style: italic; font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --bg:          #ffffff;
  --fg:          #111111;
  --muted-fg:    #6e6e6e;
  --line:        #e6e6e6;
  --line-strong: #d4d4d4;
  --panel:       #f7f7f7;   /* logo cards, quiet blocks */

  /* Brand, sampled from the BeSpace logo. The reference uses a small green
     for its accordion glyphs; BeSpace uses its own coral in that role. */
  --coral:       #ff5757;
  --coral-ink:   #c9351f;   /* 5.02:1 on white — small text and fills */
  --cyan:        #1ac8db;
  --cyan-ink:    #0e7f8c;   /* 4.55:1 on white */

  /* Satoshi is the reference face (Fontshare). Manrope is the fallback and
     renders the same proportions if Fontshare is ever unavailable. */
  --font: Satoshi, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale — reference px at 1376px wide, expressed as vw so the
     proportions hold, with sensible floors and ceilings. */
  --fs-hero:    clamp(2.75rem, 8vw,    7rem);      /* 110px */
  --fs-display: clamp(3rem,   13.1vw, 11.25rem);   /* 180px */
  --fs-h2:      clamp(1.85rem, 3.9vw,  3.375rem);  /* 54px  */
  --fs-h3:      clamp(1.3rem,  2.6vw,  2.25rem);   /* 36px  */
  --fs-body:    clamp(1.02rem, 1.75vw, 1.5rem);    /* 24px  */
  --fs-label:   clamp(0.78rem, 1.45vw, 1.25rem);   /* 20px  */
  --fs-link:    clamp(0.8rem,  1.16vw, 1rem);      /* 16px  */

  --gutter: clamp(1.25rem, 3.2vw, 2.75rem);        /* 44px  */
  --wrap:   1800px;

  --radius:      16px;
  --radius-pill: 999px;

  --gap-section: clamp(4.5rem, 11vw, 11rem);       /* the big vertical air */
  --footer-h: min(82vh, 760px);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--coral-ink); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--fg); color: #fff;
  padding: 0.75rem 1.25rem; font-weight: 700; border-radius: 6px;
  font-size: 1rem;
}
.skip-link:focus { left: 8px; top: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Typography — Medium (500) does all the display work
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}

.t-hero    { font-size: var(--fs-hero);    line-height: 1.02; letter-spacing: -0.025em; }
.t-display { font-size: var(--fs-display); line-height: 0.95; letter-spacing: -0.035em; }
h2, .t-h2  { font-size: var(--fs-h2);      line-height: 1.08; }
h3, .t-h3  { font-size: var(--fs-h3);      line-height: 1.12; }

/* The micro-label: small, Black weight, uppercase, wide-tracked, in ink —
   not a coloured eyebrow. */
.label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--fg);
}
.label--light { color: #fff; }
.label--muted { color: var(--muted-fg); }

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

.body   { font-size: var(--fs-body); line-height: 1.5; }
.muted  { color: var(--muted-fg); }
.measure { max-width: 34ch; }
.measure-wide { max-width: 52ch; }

/* Underlined uppercase text link — the reference's call to action. There are
   no filled pill buttons in this design. */
.link {
  display: inline-block;
  font-size: var(--fs-link);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.link:hover { color: var(--coral-ink); }
.link--light { color: #fff; }
.link--light:hover { color: #fff; opacity: 0.75; }

.link-row { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }

/* --------------------------------------------------------------------------
   4. Grid — 12 columns, content pushed right
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--gap-section); }
.section--half { padding-block: calc(var(--gap-section) / 2); }

.g12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(2rem, 4vw, 3.5rem);
}
/* Reference offsets: label at 3.2%, content at 27% (col 4), accordion at
   33.5% (col 5), right block at 58.7% (col 8). */
.c-label   { grid-column: 1 / span 3; }
.c-content { grid-column: 4 / span 9; }
.c-inset   { grid-column: 5 / span 8; }
.c-right   { grid-column: 8 / span 5; }
.c-left    { grid-column: 1 / span 6; }
.c-full    { grid-column: 1 / -1; }

.center { text-align: center; }

/* The page name, moved out of the hero into the white body below it. */
.page-marker { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 30;
  color: #fff;
}
.site-header--ink { color: var(--fg); position: relative; }

/* Logo centred with three links either side, as the original site had it.
   The two lists stay in one <div> for the mobile dropdown; display:contents
   lifts them into the nav's grid on desktop so nothing is duplicated. */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2vw, 1.75rem);
}
.nav__menu { display: contents; }

.brand {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand__logo { width: clamp(112px, 12vw, 152px); height: auto; display: block; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Explicit rows: with only a column set, grid auto-placement cannot go back
   to column 1 once the brand has taken column 2, and drops the lists onto a
   second row. */
.nav__links--left  { grid-column: 1; grid-row: 1; justify-content: flex-start; }
.nav__links--right { grid-column: 3; grid-row: 1; justify-content: flex-end; }
.nav__links a {
  text-decoration: none;
  font-size: var(--fs-link);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
}
.nav__links a:hover { border-bottom-color: currentColor; }
.nav__links a[aria-current="page"] { border-bottom-color: var(--coral); }

.nav__toggle { display: none; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  min-height: 100svh;
  color: #fff;
  /* Reserves room for the absolutely-positioned header. Without it a long
     headline on a short viewport rides up underneath the nav. */
  padding-top: clamp(9rem, 26vh, 17rem);
}
.hero--inner { min-height: 88svh; }

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.55),
    rgba(10, 10, 10, 0.12) 38%,
    rgba(10, 10, 10, 0.55)
  );
}
.hero__body { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.hero__title { max-width: 16ch; }
/* The headline's last line is underlined in the reference. */
.hero__title .rule-under {
  box-shadow: inset 0 -0.06em 0 0 currentColor;
  padding-bottom: 0.04em;
}
.hero__lede { margin-top: 1.5rem; max-width: 42ch; color: rgba(255,255,255,0.9); }

/* Bottom meta strip with small icons */
.hero__meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1rem, 2vw, 1.6rem);
  border-top: 1px solid rgba(255,255,255,0.25);
}
.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-size: var(--fs-label);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
.meta-item svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* Anything over the hero keeps its own shadow — the background moves. */
.site-header:not(.site-header--ink) .brand__logo { filter: drop-shadow(0 2px 8px rgba(10,10,10,0.5)); }
.site-header:not(.site-header--ink) .nav__links a,
.hero__body, .hero__meta { text-shadow: 0 1px 8px rgba(10,10,10,0.45); }

/* --------------------------------------------------------------------------
   7. Media — rounded, and parallaxed by main.js
   -------------------------------------------------------------------------- */
.media {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel);
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--tall  { aspect-ratio: 3 / 4; }
.media--wide  { aspect-ratio: 4 / 3; }
.media--square{ aspect-ratio: 1 / 1; }

/* The parallax wrapper crops; the inner image is oversized and shifted. */
.parallax { overflow: hidden; }
.parallax > img { will-change: transform; transform: translate3d(0, 0, 0); }
.js .parallax > img { height: 116%; margin-top: -8%; }

/* Staggered trio, as on the reference's story section */
.trio { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 1.5rem; align-items: start; }
.trio > *:nth-child(1) { grid-column: 4 / span 5; }
.trio > *:nth-child(2) { grid-column: 9 / span 2; margin-top: clamp(3rem, 7vw, 7rem); }
.trio > *:nth-child(3) { grid-column: 11 / span 2; margin-top: clamp(1rem, 3vw, 3rem); }

/* --------------------------------------------------------------------------
   8. Accordion — chunky rows, glyph on the right as the reference has it
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.75rem, 3.6vw, 2.75rem);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "";
  flex-shrink: 0;
  width: clamp(2.75rem, 3.6vw, 3.5rem);
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(var(--coral), var(--coral)) center / 40% 1.5px no-repeat,
    linear-gradient(var(--coral), var(--coral)) center / 1.5px 40% no-repeat;
  transition: border-color 0.25s ease;
}
.acc details[open] summary::after {
  background: linear-gradient(var(--coral), var(--coral)) center / 40% 1.5px no-repeat;
  border-color: var(--coral);
}
.acc summary:hover::after { border-color: var(--coral); }
.acc__body {
  padding-bottom: clamp(1.75rem, 3.6vw, 2.75rem);
  padding-right: clamp(3.5rem, 8vw, 7rem);
  color: var(--muted-fg);
  max-width: 68ch;
}


/* --------------------------------------------------------------------------
   9. Panels — the quiet grey cards used for the logo/brand row
   -------------------------------------------------------------------------- */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.panel {
  background: var(--panel);
  border-radius: var(--radius);
  min-height: clamp(11rem, 20vw, 17rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(1.25rem, 2vw, 2rem);
  text-align: center;
}
.panel__num {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--coral-ink);
}
.panel__label { font-size: var(--fs-link); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.panel p { font-size: 0.95rem; color: var(--muted-fg); line-height: 1.45; }

/* Editorial list: hairline-separated rows, number + text */
.rows { border-top: 1px solid var(--line); }
.rows > li {
  list-style: none;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.rows__num { font-size: var(--fs-link); font-weight: 700; color: var(--muted-fg); letter-spacing: 0.06em; }
.rows h3 { margin-bottom: 0.6rem; }
.rows p { color: var(--muted-fg); max-width: 60ch; font-size: 1rem; }

/* Tick list */
.ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.ticks li { position: relative; padding-left: 1.75rem; color: var(--muted-fg); font-size: 1rem; line-height: 1.5; }
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 0.6rem; height: 0.6rem; border-radius: var(--radius-pill);
  background: var(--cyan);
}

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }
.field label { font-size: var(--fs-link); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1rem;
  color: inherit;
  width: 100%;
  padding: 0.9rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-bottom-color: var(--coral);
}
.field__hint { font-size: 0.9rem; color: var(--muted-fg); }

.form-note {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--panel);
  border-left: 3px solid var(--cyan);
  font-size: 1rem;
}

.contact-email {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.2rem;
}
.contact-email:hover { border-bottom-color: var(--coral); }

.detail { margin: 0 0 1.5rem; }
.detail dt { font-size: var(--fs-link); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.detail dd { margin: 0.4rem 0 0; color: var(--muted-fg); font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   11. Footer — a chunky colour slab the page scrolls away to reveal.

   The footer is fixed behind the page; <main> carries a solid background and a
   bottom margin the same height, so scrolling to the end slides the content up
   off it. Below 900px it reverts to an ordinary block, because fixed elements
   and mobile address bars do not mix.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--coral-ink);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  position: relative;
}

@media (min-width: 901px) {
  main { position: relative; z-index: 1; background: var(--bg); margin-bottom: var(--footer-h); }
  .site-footer {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 0;
    min-height: var(--footer-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Giant repeating wordmark: two identical tracks slide left, so when the first
   has travelled its own width the pair is back where it began. */
.marquee {
  display: flex;
  width: max-content;
  user-select: none;
  margin-block: clamp(1.25rem, 3vw, 2.5rem);
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  animation: marquee 30s linear infinite;
}
.marquee span {
  font-size: clamp(3.25rem, 11vw, 10rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
  padding-inline: 0.22em;
  white-space: nowrap;
}
.marquee span:nth-child(even) { color: var(--cyan); }
@keyframes marquee { to { transform: translateX(-100%); } }

.footer-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(0.85rem, 3vw, 2.25rem);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-link); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.footer-row a { text-decoration: none; }
.footer-row a:hover { color: var(--cyan); }
.footer-row li + li {
  border-left: 1px solid rgba(255,255,255,0.35);
  padding-left: clamp(0.85rem, 3vw, 2.25rem);
}

.footer-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.1rem, 2.5vw, 2.5rem);
  list-style: none; padding: 0; margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
}
.footer-nav a {
  text-decoration: none; font-size: var(--fs-link); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.footer-nav a:hover { color: var(--cyan); }

.footer-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
}

.to-top {
  position: absolute; right: var(--gutter); bottom: var(--gutter);
  width: 3rem; height: 3rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--coral-ink);
  border-radius: 8px; text-decoration: none;
}
.to-top:hover { background: var(--cyan); color: #fff; }
.to-top svg { width: 1.1rem; height: 1.1rem; }


/* --------------------------------------------------------------------------
   12. Reveal
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .c-label, .c-content, .c-inset, .c-right, .c-left { grid-column: 1 / -1; }
  .trio { grid-template-columns: 1fr 1fr; }
  .trio > *:nth-child(1) { grid-column: 1 / -1; }
  .trio > *:nth-child(2) { grid-column: 1 / span 1; margin-top: 0; }
  .trio > *:nth-child(3) { grid-column: 2 / span 1; margin-top: 0; }
  .acc__body { padding-left: 0; }
}

@media (max-width: 900px) {
  :root { --fs-display: clamp(2.75rem, 13vw, 5rem); --fs-hero: clamp(2.5rem, 11vw, 4.5rem); }

  .nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(10,10,10,0.35);
    border: 1px solid rgba(255,255,255,0.5);
    color: inherit; border-radius: var(--radius-pill);
    padding: 0.5rem 0.95rem; cursor: pointer;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .site-header--ink .nav__toggle { background: transparent; border-color: var(--line-strong); }
  .nav__toggle svg { width: 1rem; height: 1rem; }

  .nav__menu {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fg); color: #fff; border-radius: var(--radius);
    padding: 1.25rem;
  }
  .nav__menu.is-open { display: flex; }
  .nav__links,
  .nav__links--left,
  .nav__links--right {
    flex-direction: column; align-items: stretch; gap: 0.25rem;
    grid-column: auto; grid-row: auto; justify-content: flex-start;
  }
  .nav__links a { padding: 0.7rem 0.25rem; text-shadow: none; }

  .hero__meta { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .rows > li { grid-template-columns: 1fr; gap: 0.5rem; }
}

@media (max-width: 620px) {
  .trio { grid-template-columns: 1fr; }
  .trio > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
}

/* --------------------------------------------------------------------------
   14. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero__media video { display: none; }
  .marquee__track { animation: none; }
  /* No parallax drift; main.js also skips it, this is the belt-and-braces. */
  .js .parallax > img { height: 100%; margin-top: 0; transform: none !important; }
}

@media print {
  .site-header, .hero__meta { display: none !important; }
  body { color: #000; background: #fff; }
  .hero::after { display: none; }
}