/* ==========================================================================
   Studio Matchbox — Defense / Aerospace
   --------------------------------------------------------------------------
   Everything you are likely to want to change lives in the :root block below.
   No build step: edit this file and reload the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE KNOBS  —  colours, fonts, type sizes, spacing, grid
   --------------------------------------------------------------------------
   Values measured off the original Cargo site at 1440px wide. The odd
   decimals (12.96px, 194.4px …) are Cargo's — kept so the rebuild lines up.
   Round them if you prefer; nothing depends on the exact figures.
   -------------------------------------------------------------------------- */
:root {
  /* -- Colour ------------------------------------------------------------ */
  --bg:             #ffffff;
  --text:           rgba(0, 0, 0, 0.6);   /* body copy, captions, labels     */
  --text-strong:    rgba(0, 0, 0, 0.75);  /* headlines inside project panels */
  --text-black:     #000000;              /* the big intro paragraph         */
  --rule:           #808080;              /* horizontal rules                */
  --panel:          #ffffff;              /* project panel background        */
  --backdrop:       rgba(0, 0, 0, 0.1);   /* behind the panel                */
  --hero-ink:       #ffffff;

  /* -- Typeface ---------------------------------------------------------- *
   * The hero was already set in system fonts (Helvetica Neue / Times), so it
   * is unchanged. The rest of the site used Diatype and Diatype Semi-Mono
   * (Dinamo, commercial) via Cargo's licence, which does not travel off
   * Cargo. Geist and Geist Mono stand in for those two. To switch to the
   * real thing: drop the webfonts into assets/fonts/, add @font-face blocks
   * in section 2, and change these two lines.                              */
  --font:           "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:      "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-hero:      "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display:   "Times New Roman", Times, serif;   /* the hero headline  */

  /* -- Type sizes -------------------------------------------------------- */
  --fs-base:        12.96px;   /* captions, specs, credits, panel body       */
  --fs-lead:        25.92px;   /* the intro paragraph + panel headlines      */
  --fs-hero-eyebrow: 11px;     /* the two hero buttons                       */
  --fs-hero-label:  25.92px;   /* "MIXED MEDIA EXPERIENCES"                  */
  --fs-hero-brand:  12.96px;   /* the top-left brand line                    */
  --fs-hero-body:   14px;      /* hero tagline                               */
  --fs-hero-title:  clamp(44px, 8vw, 120px);

  --lh-base:        1.2;
  --lh-lead:        1.3;
  --lh-wide:        1.95;      /* the roomier body copy inside panels        */

  /* -- Spacing ----------------------------------------------------------- */
  --pad-x:          6.48px;    /* page gutter on the home page               */
  --hero-pad-y:     32px;
  --hero-pad-x:     40px;
  --intro-top:      31px;      /* hero to intro paragraph                    */
  --intro-bottom:   37.4px;    /* intro paragraph to gallery                 */
  --gallery-top:    217.4px;   /* total gap above the gallery (this margin
                                  collapses with --intro-bottom, so it is the
                                  whole distance, not an addition to it).
                                  The original leaves this gap but never grows
                                  the page to fit it, so its last tile and
                                  caption get clipped off the bottom. Same gap
                                  here, minus the clipping.                   */

  /* -- 12-column system -------------------------------------------------- */
  --cols:           12;
  --gutter:         12.96px;

  /* -- Gallery ----------------------------------------------------------- */
  --tile-cols:      3;
  --tile-gap-x:     13px;
  --tile-gap-y:     12.95px;
  --cap-top:        9.07px;    /* image to its caption                       */
  --cap-bottom:     38.88px;   /* caption to the bottom of the tile          */

  /* -- Project panels ---------------------------------------------------- */
  --panel-top:      194.4px;   /* hero showing above the panel (15rem)       */
  --panel-pad-t:    10.368px;
  --panel-pad-x:    12.96px;
  --panel-pad-b:    12.96px;
  --panel-head-gap: 10.3px;    /* header row to the rule                     */
  --panel-body-gap: 13px;      /* rule to the body columns                   */
}

/* Phone. The original scaled its type with the viewport below ~640px, which
   makes text shrink on small handsets; these are the values it reaches at
   390px, held steady instead. Identical at 390px, more readable below it. */
@media (max-width: 640px) {
  :root {
    --fs-base:      12.2304px;
    --fs-lead:      24.4608px;
    --fs-hero-eyebrow: 10px;
    --fs-hero-label: 24.4608px;
    --fs-hero-brand: 12.2304px;
    --fs-hero-body: 13px;
    --fs-hero-title: clamp(40px, 12vw, 64px);

    --pad-x:        3.67px;
    --hero-pad-y:   22px;
    --hero-pad-x:   24px;

    --gutter:       7.34px;

    --gallery-top:  201px;

    --tile-cols:    1;
    --tile-gap-y:   7.3px;
    --cap-top:      8.5px;
    --cap-bottom:   36px;

    --panel-top:    110.07px;
    --panel-pad-t:  5.87px;
    --panel-pad-x:  7.34px;
    --panel-pad-b:  7.34px;
  }
}

/* --------------------------------------------------------------------------
   2. FONTS
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* The 12-column grid used by the intro and the project panels. */
.cols {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gutter);
  align-items: start;
}
.col { grid-column: span var(--span, 12); min-width: 0; }

/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: #0a0a0a;
  color: var(--hero-ink);
  font-family: var(--font-hero);
}
@supports (height: 100svh) { .hero { height: 100svh; } }

.hero__media {
  position: absolute; inset: 0; z-index: 0;
  background-color: #111;
  background-image: url("../img/hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition: transform 8s ease-out;
}
.hero:hover .hero__media { transform: scale(1.06); }

/* The original ships a portrait crop of the hero for phones but never
   reaches it — a later stylesheet overrides the rule. Uncomment to use it. */
/* @media (max-width: 640px) {
  .hero__media { background-image: url("../img/hero-mobile.jpg"); }
} */

.hero__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%,
    rgba(0,0,0,0.30) 65%, rgba(0,0,0,0.85) 100%);
}

.hero__inner {
  position: relative; z-index: 3;
  width: 100%; height: 100%;
  padding: var(--hero-pad-y) var(--hero-pad-x);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.hero__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  font-size: var(--fs-hero-brand);
  letter-spacing: 0.153em;
  text-transform: uppercase;
}
.hero__brand { font-weight: 600; }
.hero__brand .on-phone { display: none; }

.hero__center { align-self: end; max-width: 880px; }

.hero__label {
  font-family: var(--font);   /* the original set this line in Diatype, not Helvetica */
  font-size: var(--fs-hero-label);
  line-height: 1.3;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 18px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero-title);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.hero__tagline {
  max-width: 560px;
  font-size: var(--fs-hero-body);
  line-height: 1.55;
  opacity: 0.88;
  margin-bottom: 28px;
}

.hero__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: var(--fs-hero-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.hero__btn::after {
  content: "\2192";
  font-size: 13px;
  display: inline-block;
  transition: transform 0.3s ease;
}
.hero__btn:hover { background: #fff; color: #0a0a0a; border-color: #fff; }
.hero__btn:hover::after { transform: translateX(4px); }

.hero__bottom {
  display: flex; justify-content: space-between; align-items: flex-end;
  font-size: var(--fs-hero-brand);
  letter-spacing: 0.153em;
  text-transform: uppercase;
}
/* Reproduces the run of spacer breaks the original used to lift the centre
   block off the bottom of the hero. Adjust to move the headline up or down. */
.hero__meta { opacity: 0.7; padding-top: 93px; }

.hero__scroll {
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 12px;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}
.hero__scroll:hover { opacity: 1; }
.hero__arrow { animation: arrowBounce 1.8s ease-in-out infinite; }
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50%      { transform: translateY(6px); opacity: 1; }
}

@media (max-width: 640px) {
  .hero__brand .on-desktop { display: none; }
  .hero__brand .on-phone { display: block; }
  .hero__title { margin-bottom: 18px; }
  .hero__tagline { line-height: 1.5; margin-bottom: 22px; }
  .hero__buttons { flex-direction: column; gap: 10px; align-items: flex-start; }
  .hero__btn { padding: 13px 18px; }
  .hero__meta { padding-top: 66.8px; }
  .hero__scroll span { display: none; }   /* arrow only on phones */
}

/* --------------------------------------------------------------------------
   5. INTRO PARAGRAPH
   -------------------------------------------------------------------------- */
.wrap { padding-left: var(--pad-x); padding-right: var(--pad-x); }

.intro { margin-top: var(--intro-top); margin-bottom: var(--intro-bottom); }
.intro p {
  font-family: var(--font);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-black);
  font-weight: 400;
}
.intro b { font-weight: 600; }

/* The original serves a separate hero page to phones, and that one has no
   intro paragraph — so this copy is invisible below 640px. That looks like an
   oversight rather than a decision: comment the `display:none` out and the
   paragraph appears on phones too, stacked full width. */
@media (max-width: 640px) {
  .intro { display: none; }
  .intro .col { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   6. GALLERY
   --------------------------------------------------------------------------
   Each tile is its own image plus caption, so a row is as tall as its tallest
   tile and every caption sits directly under its own picture — the behaviour
   the original had.
   -------------------------------------------------------------------------- */
.gallery {
  margin-top: var(--gallery-top);
  display: grid;
  grid-template-columns: repeat(var(--tile-cols), 1fr);
  column-gap: var(--tile-gap-x);
  row-gap: var(--tile-gap-y);
  align-items: start;
}

.tile { display: block; text-decoration: none; color: inherit; }
.tile img, .tile video { width: 100%; background: #eee; }
.tile__cap {
  display: block;
  margin: var(--cap-top) 0 var(--cap-bottom);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: 1.1;
  font-weight: 700;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   7. PROJECT / ABOUT PANELS
   -------------------------------------------------------------------------- */
.panel-page { min-height: 100vh; background-color: var(--backdrop); }

/* The strip of hero showing above the panel. The original stacked the panel
   over the real 100vh hero and let its top 194.4px show, gradient and brand
   line included — so this clips the actual hero rather than faking a crop. */
.panel-hero {
  height: var(--panel-top);
  overflow: hidden;
  position: relative;
}
.panel-hero .hero { height: 100vh; min-height: 600px; }
.panel-hero .hero:hover .hero__media { transform: scale(1.02); }  /* no zoom here */

.panel {
  background: var(--panel);
  padding: var(--panel-pad-t) var(--panel-pad-x) var(--panel-pad-b);
  min-height: calc(100vh - var(--panel-top));
}

.panel__head { margin-bottom: var(--panel-head-gap); }
.panel__title { font-weight: 700; }
.panel__close { display: block; text-align: right; text-decoration: none; }
.panel__close:hover { color: var(--text-black); }

.panel__body { margin-top: var(--panel-body-gap); }

.panel h2 {
  font-family: var(--font);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 400;
  color: var(--text-strong);
  margin: 0 0 var(--gutter);
}
.panel .lead { line-height: var(--lh-wide); display: block; }
.panel .scaled { font-size: 0.86em; }
.panel b { font-weight: 700; }
.panel .media img, .panel .media video { width: 100%; margin-bottom: 26px; }

/* A film that waits for a click (the two big ones on About). */
.panel .video { position: relative; margin-bottom: 26px; }
.panel .video video { margin-bottom: 0; }
.video__play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; background: transparent; cursor: pointer; color: #fff;
}
.video__play::before {
  content: ""; width: 74px; height: 74px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.9); background: rgba(0,0,0,0.28);
  transition: background 0.2s ease, transform 0.2s ease;
}
.video__play::after {
  content: ""; position: absolute;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
  transform: translateX(3px);
}
.video__play:hover::before { background: rgba(0,0,0,0.5); transform: scale(1.04); }
.video__play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.panel .media figcaption { margin: var(--cap-top) 0 26px; }

@media (max-width: 640px) {
  /* The header row keeps its three columns on phones; the body stacks. */
  .panel__body .col { grid-column: 1 / -1; }
  .panel__body { row-gap: 29.3px; }
}

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 48px var(--pad-x);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--text);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   9. MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}