/* ============================================================================
   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;
  --col: 48rem; /* unified content column: hero image, cards, figures, video, twin */
}

/* ---------- 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;
  position: relative;  /* anchor for the mobile nav dropdown panel */
}

.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); }

/* Mobile nav toggle button — hidden by default; revealed inside the ≤720px
   media query. Same visual language as the desktop nav links (Inter Tight,
   12px, uppercase, letter-spaced) so the mobile header reads as a coherent
   extension of the design, not a bolt-on. Estate parity with nearself's
   hamburger pattern: same behaviour, MND's own skin. */
.mnd-band .nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(235, 230, 220, 0.72);
  color: var(--body-bg);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.mnd-band .nav-toggle:hover {
  color: var(--brand);
  border-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 {
  width: var(--col);
  display: block;
  max-width: 100%;
  height: auto;
  max-height: none;
}

/* ============================================================================
   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: var(--col);
  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: var(--col);
  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: var(--col);
  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: var(--col);
}

.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: var(--col);
  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; }

/* Middle cell (Back to Work) — global rule (applies at all viewports).
   Text centred, arrow offset via ::before as an affordance. On desktop,
   `align-self: end` pushes the middle cell content to the bottom of the
   grid row so "← Back to Work" sits in line with the project names in
   .prev and .nxt cells rather than at the top with their small-caps labels.
   Delivers "action and result familiarity": returning to Work looks the
   same visual pattern regardless of which page the visitor is on. */
.project-nav .mid {
  position: relative;
  display: inline-block;
  justify-self: center;
  align-self: end;
}
.project-nav .mid::before {
  content: "\2190";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0.5em;
  line-height: 1;
  color: inherit;
}

/* ============================================================================
   MOBILE (≤ 720px)
   ============================================================================ */
@media (max-width: 720px) {
  :root { --gutter: 1.25rem; }

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

  /* Mobile hamburger nav — replaces the horizontal nav below 720px.
     Pattern matches nearself's collapse behaviour for estate parity;
     skinned in MND's own stone band + sand text + burnt-orange hover.
     Panel is absolutely positioned below the header band and only shown
     when .mnd-band.open is toggled (via the .nav-toggle button click). */
  .mnd-band .nav-toggle { display: block; }

  .mnd-band nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--band-bg);
    flex-direction: column;
    gap: 0;
    padding: 0.4rem var(--gutter) 1rem;
    border-top: 1px solid rgba(235, 230, 220, 0.25);
    z-index: 20;
  }

  .mnd-band.open nav { display: flex; }

  .mnd-band nav a { padding: 0.55rem 0; }

  .intro-strip { padding: 2.5rem 0 2.25rem; }
  .intro-strip h1 { font-size: 1.75rem; }
  .intro-strip .label { font-size: 1.1875rem; }

  /* Universal mobile content width — .stage handles the sole horizontal inset;
     every child stretches to fill within it. Delivers consistent card/figure/nav
     widths across the page so the eye reads one system, not several competing
     margin decisions. The 16px inset provides breathing room around all content
     while keeping cards prominent — chosen after mobile testing showed 4px felt
     edge-to-edge in a way that jarred against the site's considered border.
     `width: 100%; max-width: 100%; margin: 0` overrides the desktop `margin: 0 auto`
     which, in a flex-column body, forces .stage to fit-content sizing on pages
     where the widest child is short (e.g. Contact's signature block). */
  .stage {
    padding: 0 1rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .gallery-card.body {
    max-width: 100%;
    margin: 2rem 0 2.5rem;
    padding: 2rem 1.25rem;
  }
  .gallery-card.body .card-body p { font-size: 1rem; }
  .gallery-card.body .meta-ribbon { gap: 1.25rem; }

  /* Handwritten meta ribbon at mobile — wider label column shifts values
     rightward within their column, balancing vacant space to the left and
     right of the ink pen values. Labels stay left-aligned at card content
     edge (consistent with body prose above). */
  .gallery-card.body .meta-ribbon.handwritten > div {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 0.5rem;
  }

  .support-card {
    max-width: 100%;
    margin: 1rem 0 3rem;
    padding: 1.5rem 1.25rem;
  }
  .support-card p { font-size: 1rem; }

  .support-figure { max-width: 100%; }

  .twin-figure {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 100%;
    padding: 0;
  }

  .video-figure { max-width: 100%; }

  .project-nav {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
    padding: 2rem 1rem 3rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .project-nav .prev,
  .project-nav .mid,
  .project-nav .nxt { text-align: center; }
}

/* ============================================================================
   FOOTER — centred column below 1040px
   ============================================================================
   Content-driven breakpoint, distinct from the site's general 720px mobile
   breakpoint. The middle credit line ("a parallel practice runs at nearself.com…")
   is long enough that the three footer items stop fitting on a single row well
   before the 720px mobile break — copyright wraps to its own left-aligned row
   at approximately 1088px viewport. Switching to centred column at 1040px
   (per Jeremy's on-device test call, 17 Aug 2026) catches most of that range;
   a small 1041-1088 window may still show wrapping if viewed at those exact
   widths — bump this breakpoint to 1100px if that becomes a visible issue.
   ============================================================================ */
@media (max-width: 1040px) {
  .mnd-foot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }
}