/* ══════════════════════════════════════════
   SITE SYSTEM
   Shared by every page. Page stylesheets load after this
   and only hold what is unique to that page.
══════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --bg:        #f6f6f6;
  --ink:       #000;

  --rail:      200px;   /* outer page margin either side of main */
  --gutter:    18px;    /* text indent inside each column */
  --header-h:  78px;

  --rule:      0.5px solid var(--ink);
  --col-line:  rgba(0, 0, 0, 0.15);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
html, body { background: var(--bg); color: var(--ink); }

/* ── Typography helpers ── */
.t-switzer-medium   { font-family: 'Switzer', sans-serif; font-weight: 500; }
.t-switzer-semibold { font-family: 'Switzer', sans-serif; font-weight: 600; }
.t-switzer-light    { font-family: 'Switzer', sans-serif; font-weight: 300; }
.t-switzer-regular  { font-family: 'Switzer', sans-serif; font-weight: 400; }
.t-mono-regular     { font-family: 'Geist Mono', monospace; font-weight: 400; }
.t-mono-medium      { font-family: 'Geist Mono', monospace; font-weight: 500; }
.t-mono-light       { font-family: 'Geist Mono', monospace; font-weight: 300; }
.t-jetbrains        { font-family: 'JetBrains Mono', monospace; font-weight: 400; }

/* ─────────────────────────
   SITE HEADER (sticky nav)
   Side padding = rail + gutter, so the name and nav line up
   with the text inside the grid on every page.
───────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-h);
  background: var(--bg);
  border-bottom: var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--rail) + var(--gutter));
  color: var(--ink);
}

/* Over full-bleed video (home): see-through, white text */
.header--overlay {
  background: transparent;
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.35);
  transition: color 0.5s ease, border-bottom-color 0.5s ease;
}

/* Switched on by JS when the video behind the header is light */
.header--overlay.header--dark {
  color: #000;
  border-bottom-color: rgba(0, 0, 0, 0.35);
}

.site-name {
  font-family: 'Switzer', sans-serif;
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -2.16px;
  color: inherit;
  text-decoration: none;
  line-height: normal;
}

.header-nav {
  display: flex;
  gap: 51px;
  align-items: center;
}

.header-nav a {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -1.6px;
  color: inherit;
  text-decoration: none;
  line-height: normal;
}

.header-nav a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   MASTER 4-COLUMN GRID
   margin positions the grid; the outer rails are real borders,
   so they match every other 0.5px rule on the site.
   Only the inner column lines are lighter (--col-line).
   Each column = (1920 - 400) / 4 = 380px.
   --inner-line-start pushes the faint column lines down;
   case studies set it from JS to the bottom of the meta strip.
══════════════════════════════════════════ */
main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 var(--rail);
  border-left:  var(--rule);
  border-right: var(--rule);
  --inner-line-start: 0px;

  /* Inner 3 column dividers */
  background-image:
    linear-gradient(to right,
      transparent 25%,  var(--col-line) 25%,  var(--col-line) calc(25% + 1px),  transparent calc(25% + 1px),
      transparent 50%,  var(--col-line) 50%,  var(--col-line) calc(50% + 1px),  transparent calc(50% + 1px),
      transparent 75%,  var(--col-line) 75%,  var(--col-line) calc(75% + 1px),  transparent calc(75% + 1px)
    );
  background-size:     100% calc(100% - var(--inner-line-start));
  background-position: left var(--inner-line-start);
  background-repeat: no-repeat;
  background-origin: content-box;
  background-clip:   content-box;
}

/* ─────────────────────────
   SECTION DIVIDERS
───────────────────────── */
.section-divider {
  grid-column: 1 / -1;
  height: 0.5px;
  background: var(--ink);
  position: relative;
}

.divider-mark,
.corner-cross {
  position: absolute;
  width: 11px;
  height: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-weight: 300;
  font-size: 11px;
  line-height: 1;
  color: var(--ink);
  user-select: none;
}
.divider-mark::before,
.corner-cross::before { content: '+'; }

.divider-mark { top: -5.5px; }
.divider-mark--left,
.corner-cross--left  { left:  -5.5px; }
.divider-mark--right,
.corner-cross--right { right: -5.5px; }

/* ─────────────────────────
   CASE STUDY HEADER BOX
   One component for every page header box.
   Subgrid: title in cols 1–2, description in col 4 (344px, per Figma).
   Solid background hides the column lines inside the box only;
   its sides are main's rails, so it has no side borders of its own.
───────────────────────── */
.cs-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: end;
  background: var(--bg);
  border-bottom: var(--rule);
  padding: 148px 0 var(--gutter);
  position: relative;
}

.cs-header .corner-cross { bottom: -5.5px; z-index: 1; }

.cs-title-col {
  grid-column: 1 / 3;
  padding-left: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.cs-date-row {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
}

.cs-title {
  font-family: 'Switzer', sans-serif;
  font-weight: 500;
  font-size: 128px;
  line-height: 1;
  letter-spacing: -3.84px;
  color: var(--ink);
  white-space: nowrap;
}

.cs-desc {
  grid-column: 4;
  padding: 0 var(--gutter) 2px;
  font-size: 16px;
  letter-spacing: -1.28px;
  line-height: normal;
  color: var(--ink);
}