/* ============================================================================
   Magnetic North Designs — shared stylesheet
   ----------------------------------------------------------------------------
   Locked design system as of 3 August 2026:
     - Subdued sand palette (grey-leaning warm; no yellow-gold)
     - Burnt orange (#c25a2a) reserved for hover wash + small caps card-titles
     - Header + footer bands in warm grey-stone
     - Gallery-card project page pattern:
         header → intro strip → hero → body card → support figures/cards
         → prev-next nav → footer
   ============================================================================ */

/* ---------- Webfont ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600&display=swap');

/* Handwriting font — self-hosted Caveat (WOFF2, subsetted to characters used).
   Applied only to meta-ribbon values on project pages via .meta-ribbon.handwritten.
   Rationale: introduces human hand into the otherwise rigid 90-degree design order;
   completes the paper-artefact metaphor started by the paper texture on cards. */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Palette */
  --body-bg: #ebe6dc;
  --intro-bg: #ddd6cb;
  --band-bg: #807872;
  --ink: #2b2622;
  --ink-soft: #6f665e;
  --ink-faint: #a59b90;
  --rule: #cfc7b9;
  --brand: #c25a2a;
  --ink-blue: #1e3a5f;  /* Ballpoint blue — handwriting on project page meta values */

  /* Layout */
  --gutter: 2rem;
  --body-max: 56rem;
  --page-max: 68rem;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

/* Sticky-footer scaffolding — body is a vertical flex container spanning
   at least the viewport height. Combined with margin-top: auto on the
   footer (further down), this ensures the footer sits at the bottom of
   the viewport when page content is short (e.g. Contact page).
   Long-content pages (homepage grid, Bayer, Shell, About) are unaffected —
   the auto margin has no space to consume there. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--body-bg);
  color: var(--ink);
  font-family: "Inter Tight", "Söhne", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   HEADER + FOOTER BANDS
   ============================================================================ */
.mnd-band {
  background: var(--band-bg);
  color: var(--body-bg);
  padding: 1.125rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mnd-band .wm {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--body-bg);
  text-decoration: none;
  transition: color 120ms ease;
}

.mnd-band .wm:hover { color: var(--brand); }

.mnd-band nav {
  display: flex;
  gap: 1.75rem;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mnd-band nav a {
  color: rgba(235, 230, 220, 0.72);
  text-decoration: none;
  transition: color 120ms ease;
}

.mnd-band nav a:hover,
.mnd-band nav a.current {
  color: var(--body-bg);
}

.mnd-foot {
  background: var(--band-bg);
  color: rgba(235, 230, 220, 0.75);
  padding: 1.125rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;  /* sticky-footer pairing with body flex column above */
}

.mnd-foot a { color: var(--body-bg); text-decoration: none; }

.mnd-foot .foot-mid {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: rgba(235, 230, 220, 0.55);
  font-style: italic;
}

.mnd-foot .foot-mid.pending::before {
  content: "\25cc\00a0";
  color: rgba(235, 230, 220, 0.4);
}

/* ============================================================================
   INTRO STRIP — sand background above the hero
   ============================================================================ */
.intro-strip {
  background: var(--intro-bg);
  padding: 4rem 0 3.5rem;
  border-bottom: 1px solid var(--rule);
}

.intro-strip .strip-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.intro-strip .crumb {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
}

.intro-strip .crumb a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 120ms ease;
}

.intro-strip .crumb a:hover { color: var(--brand); }

.intro-strip h1 {
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin: 0 0 1.5rem;
  color: var(--ink);
  max-width: 46rem;
}

.intro-strip .label {
  font-size: 1.3125rem;
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  max-width: 46rem;
}

/* ============================================================================
   HERO
   ============================================================================ */
.hero {
  background: #1a1614;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 78vh;
}

/* ============================================================================
   STAGE — max-width wrapper for cards + figures
   ============================================================================ */
.stage {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============================================================================
   GALLERY CARDS
   ============================================================================ */
.gallery-card {
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06),
              0 2px 6px rgba(0, 0, 0, 0.04);
}

.gallery-card.body {
  max-width: 46rem;
  margin: 3.5rem auto 4rem;
  padding: 3rem 3.75rem;
  position: relative;
}

.gallery-card.body .card-body p {
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 1rem;
  color: var(--ink);
}

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

.gallery-card.body .meta-ribbon {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.gallery-card.body .meta-ribbon > div {
  display: flex;
  gap: 0.5rem;
}

.gallery-card.body .meta-ribbon strong {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 12px;
}

/* Handwritten variant — used on project pages to give meta values a ballpoint-pen feel.
   Applied by adding `handwritten` to the .meta-ribbon element in project page HTML.
   Deliberately scoped to this modifier so About page's .meta-ribbon stays typeset.
   Note: selector matches the specificity of `.gallery-card.body .meta-ribbon strong`
   from above (both are 0,3,1 with strong tag added) then wins on cascade order. */
.gallery-card.body .meta-ribbon.handwritten strong {
  font-family: "Caveat", cursive;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ink-blue);
  letter-spacing: 0.005em;
  line-height: 1;
  text-transform: none;
}

/* A-full layout — one item per row, label/value column-aligned.
   Overrides the base flex-wrap layout for the handwritten variant.
   Chosen after mobile comparison against A-compact (2×2 with fixed label column):
   A-compact clipped right-column values on all mobile viewports (right cell had
   only ~48px for values after label column), while A-full behaves gracefully at
   every viewport width. Values wrap within the value column when they exceed
   available width — expected and legible. Same rhythm on Bayer (4 items) and Shell
   (5 items) — one row per item throughout. */
.gallery-card.body .meta-ribbon.handwritten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.gallery-card.body .meta-ribbon.handwritten > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  align-items: baseline;
  gap: 0.75rem;
}

/* ============================================================================
   SUPPORT FIGURES + SUPPORT CARDS
   ============================================================================ */
.support-figure {
  margin: 0 auto;
  max-width: 52rem;
  display: block;
}

.support-figure img,
.support-figure video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink);
}

.support-card {
  background: #ffffff;
  border-radius: 3px;
  padding: 2rem 2.5rem;
  margin: 1.25rem auto 4.5rem;
  max-width: 40rem;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05),
              0 2px 6px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 2;
}

.support-card .card-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.support-card p {
  font-size: 1.0625rem;
  line-height: 1.55;
  margin: 0;
  color: var(--ink);
}

/* ============================================================================
   PAPER TEXTURE — subtle watercolour-paper surface on all white cards.
   Applied via ::before pseudo-element with multiply blend mode so the paper
   darkens the white toward warmth rather than replacing it. Opacity tuned
   to 0.35 — genuine paper character present, restrained enough to sit under
   text and other content without competing. Uses ../images/paper.jpg (800x600
   ~120KB, cached across all pages after first load).
   ============================================================================ */
.gallery-card.body,
.support-card,
.contact-body,
.about-body {
  position: relative;
  overflow: hidden;
}

.gallery-card.body::before,
.support-card::before,
.contact-body::before,
.about-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/paper.jpg");
  background-size: 400px 300px;
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: multiply;
  border-radius: 3px;
}

.gallery-card.body > *,
.support-card > *,
.contact-body > *,
.about-body > * {
  position: relative;
  z-index: 1;
}

/* ============================================================================
   TWIN FIGURE — side-by-side pair, stacks on mobile
   ============================================================================ */
.twin-figure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 auto;
  max-width: 52rem;
}

.twin-figure figure { margin: 0; }

.twin-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink);
}

.twin-figure figcaption {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.75rem;
  font-weight: 500;
}

/* ============================================================================
   VIDEO FIGURE — click-to-play
   ============================================================================ */
.video-figure {
  position: relative;
  margin: 0 auto;
  max-width: 52rem;
  cursor: pointer;
}

.video-figure .player {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.video-figure.wide .player {
  aspect-ratio: 1374 / 281;
}

.video-figure .player > img.poster,
.video-figure .player > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ink);
}

.video-figure .player > video {
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}

.video-figure.playing .player > video {
  opacity: 1;
  pointer-events: auto;
}

.video-figure.playing .player > img.poster { opacity: 0; }

.video-figure .play-button {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(235, 230, 220, 0.92);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 200ms ease;
  z-index: 3;
}

.video-figure .play-button::before {
  content: "";
  width: 0; height: 0;
  border-left: 18px solid var(--ink);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}

.video-figure.playing .play-button { opacity: 0; pointer-events: none; }

.video-figure .hint {
  position: absolute;
  bottom: 1rem; left: 1rem;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body-bg);
  background: rgba(43, 38, 34, 0.55);
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 3;
  transition: opacity 200ms ease;
}

.video-figure.playing .hint { opacity: 0; }

/* ============================================================================
   PROJECT NAV
   ============================================================================ */
.project-nav {
  padding: 3rem var(--gutter) 4rem;
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}

.project-nav a {
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: color 120ms ease;
}

.project-nav a:hover { color: var(--brand); }

.project-nav a .lbl {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}

.project-nav .mid { text-align: center; }
.project-nav .nxt { text-align: right; }

/* ============================================================================
   MOBILE (≤ 720px)
   ----------------------------------------------------------------------------
   Project-page width model:
   - viewport owns the outer width
   - .stage owns the page gutter
   - children never add a second horizontal gutter
   - intrinsic child widths are allowed to shrink
   - media cannot enlarge the layout viewport
   ============================================================================ */
@media (max-width: 720px) {

  :root {
    --gutter: 1.25rem;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .mnd-band {
    width: 100%;
    min-width: 0;
  }

  .mnd-band .wm {
    font-size: 11px;
    min-width: 0;
  }

  .mnd-band nav {
    min-width: 0;
    gap: 1.25rem;
    font-size: 11px;
  }

  .intro-strip {
    width: 100%;
    min-width: 0;
    padding: 2.5rem 0 2.25rem;
  }

  .intro-strip .strip-inner {
    width: 100%;
    min-width: 0;
  }

  .intro-strip .crumb,
  .intro-strip h1,
  .intro-strip .label {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .intro-strip h1 {
    font-size: 1.75rem;
  }

  .intro-strip .label {
    font-size: 1.1875rem;
  }

  /* The stage is the single owner of the mobile horizontal gutter. */
  .stage {
    width: 100%;
    max-width: var(--page-max);
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .stage > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Main project card: no additional horizontal mobile margin. */
  .gallery-card.body {
    width: 100%;
    max-width: 46rem;
    min-width: 0;
    margin: 2rem auto 2.5rem;
    padding: 2rem 1.5rem;
  }

  .gallery-card.body .card-body,
  .gallery-card.body .card-body p {
    min-width: 0;
    max-width: 100%;
  }

  .gallery-card.body .card-body p {
    font-size: 1rem;
    overflow-wrap: anywhere;
  }

  /* Metadata value column is explicitly shrinkable. */
  .gallery-card.body .meta-ribbon,
  .gallery-card.body .meta-ribbon.handwritten {
    width: 100%;
    min-width: 0;
    gap: 1.25rem;
  }

  .gallery-card.body .meta-ribbon.handwritten > div {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr);
  }

  .gallery-card.body .meta-ribbon span,
  .gallery-card.body .meta-ribbon strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Supporting media */
  .support-figure,
  .video-figure,
  .twin-figure,
  .support-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .support-figure img,
  .support-figure video,
  .video-figure img,
  .video-figure video,
  .twin-figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
  }

  .support-card {
    margin: 1rem auto 3rem;
    padding: 1.5rem;
  }

  .support-card p {
    font-size: 1rem;
    overflow-wrap: anywhere;
  }

  /* Shell twin image: the stage already supplies the gutter. */
  .twin-figure {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
  }

  .twin-figure figure,
  .twin-figure figcaption {
    min-width: 0;
  }

  .twin-figure figcaption {
    overflow-wrap: anywhere;
  }

  /* Video */
  .video-figure .player {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Project navigation is outside .stage, so it owns its own gutter. */
  .project-nav {
    width: 100%;
    max-width: var(--page-max);
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: left;
    padding: 2rem var(--gutter) 3rem;
  }

  .project-nav > * {
    min-width: 0;
    max-width: 100%;
  }

  .project-nav .mid,
  .project-nav .nxt {
    text-align: left;
  }

  .project-nav a {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}