/* ============================================================
   MidKnight Devs — the single stylesheet.
   Order: fonts, tokens, reset+links, primitives, sections,
   breakpoints, print, reduced-motion.
   Invariant: border-radius is 0 everywhere. No exceptions.
   ============================================================ */

/* --- 1. Fonts (self-hosted; adjust filenames to Task 3 output) --- */
@font-face {
  font-family: 'Archivo Black';
  src: url('assets/fonts/ArchivoBlack-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBMPlexMono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBMPlexMono-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBMPlexMono-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- 2. Tokens --- */
:root {
  --ink: #0B0B0C;
  --ink-lift: #111113;
  --paper: #EFEEEA;
  --card-white: #FFFFFF;
  --blue: #1D4C8F;
  --blue-bright: #2E6FD0;
  --red: #E0342A;
  --navy: #0F2660;

  /* Muted text. These sit ABOVE the WCAG AA floors (.62 on paper, .58 on
     ink). Never inline a lower alpha; use these tokens. */
  --muted-paper: rgba(11, 11, 12, .68);
  --muted-ink: rgba(239, 238, 234, .75);

  /* Exactly at the ink floor (5.6:1). The approved design's footer colour. */
  --muted-ink-floor: rgba(239, 238, 234, .58);

  /* Hairlines are non-text and exempt from the contrast floors. */
  --rule-paper: rgba(11, 11, 12, .22);
  --rule-paper-strong: rgba(11, 11, 12, .3);
  --rule-ink: rgba(239, 238, 234, .15);

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: 'Archivo Black', 'Arial Black', sans-serif;
  --gutter: 44px;
}

/* --- 3. Reset and global links (B4: before anything else) --- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.75 var(--mono);
}
img { display: block; max-width: 100%; }

a { color: var(--blue); text-decoration: underline; transition: color 150ms ease; }
a:hover { color: var(--blue-bright); }
.on-ink a, a.on-ink { color: var(--blue-bright); }

:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 2px;
}
.on-ink :focus-visible { outline-color: var(--paper); }

/* Skip link — keyboard users should not tab the nav on every page. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--paper); color: var(--ink);
  padding: 12px 18px; font: 600 12px/1 var(--mono); letter-spacing: .12em;
}
.skip-link:focus { left: 0; }

/* --- 4. Layout primitives --- */
/* position context for the home page's overlay header, which now sits outside
   <main> so it is exposed as a banner landmark and the skip-link can skip it. */
.page { position: relative; max-width: 1180px; margin: 0 auto; background: var(--paper); }
.gutter { padding-left: var(--gutter); padding-right: var(--gutter); }

/* --- 5. Header --- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px var(--gutter);
  background: var(--ink);
}
.site-header--overlay {
  position: absolute; top: 0; left: 0; right: 0;
  background: none; z-index: 2;
}
.wordmark {
  font: 700 13px/1 var(--mono); letter-spacing: .16em;
  color: var(--paper); text-decoration: none;
}
.wordmark span { opacity: .5; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-item {
  display: inline-flex; align-items: center;
  padding: 9px 15px; min-height: 44px; min-width: 44px;
  background: rgba(239, 238, 234, .14);
  color: var(--paper); text-decoration: none;
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em;
  transition: background 150ms ease, color 150ms ease;
}
.nav-item:hover { background: rgba(239, 238, 234, .28); color: var(--paper); }
.nav-item.is-active {
  background: var(--paper); color: var(--ink); font-weight: 600;
}

/* --- 6. Footer --- */
.site-footer {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 26px var(--gutter);
  background: var(--ink);
  border-top: 1px solid var(--rule-ink);
  font: 400 11px/1.6 var(--mono);
  color: var(--muted-ink-floor);
}
.site-footer a { color: var(--muted-ink-floor); text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }

/* --- 7. Badges (stickers) --- */
.badge {
  display: inline-block; padding: 7px 13px;
  font: 600 10.5px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase;
}
.badge--red { background: var(--red); color: #fff; transform: rotate(-1.4deg); }
.badge--ink { background: var(--ink); color: var(--paper); transform: rotate(-1deg); }
.badge--blue { background: var(--blue); color: var(--paper); transform: rotate(-1deg); }
.badge--outline {
  background: none; color: var(--ink);
  border: 1px solid var(--rule-paper-strong); transform: none;
}

/* --- 8. Chips --- */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-block; padding: 6px 11px;
  border: 1px solid var(--rule-paper-strong);
  font: 500 10px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-paper);
}

/* --- 9. Cards and the hairline grid --- */
.card { background: var(--card-white); border: 2px solid var(--ink); }
.hairline-grid { display: grid; gap: 1px; background: var(--rule-paper); }
.hairline-grid > * { background: var(--paper); }
.hairline-grid--ink { background: rgba(239, 238, 234, .18); }
.hairline-grid--ink > * { background: var(--ink); }

/* --- 10. Email block --- */
.email-block {
  display: inline-block; padding: 18px 34px; min-height: 44px;
  background: var(--paper); color: var(--ink); text-decoration: none;
  font: 600 14px/1 var(--mono); letter-spacing: .08em;
  transition: background 150ms ease, color 150ms ease;
}
.email-block:hover { background: var(--blue-bright); color: var(--paper); }

/* --- 11. Unfilled image slots (PUNCH_LIST B8) --- */
/* Currently unused, deliberately retained: PUNCH_LIST B8 requires this exact
   treatment for any product image slot still unfilled at launch. */
.stripe-placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  background: repeating-linear-gradient(135deg,
    rgba(11, 11, 12, .08) 0 9px, transparent 9px 18px);
  font: 500 11px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-paper);
}

/* --- 12. Marquee — the only motion on the site --- */
.marquee {
  overflow: hidden; background: var(--ink);
  padding: 14px 0; border-bottom: 1px solid var(--rule-ink);
}
.marquee-track {
  display: flex; gap: 44px; white-space: nowrap;
  padding-left: var(--gutter); width: max-content;
  animation: marquee-scroll 38s linear infinite;
}
.marquee-track span {
  font: 600 12px/1 var(--mono); letter-spacing: .2em; color: var(--paper);
}
.marquee-track .sep { color: var(--blue-bright); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- 13. Placeholder marker for A1/A2 --- */
.to-supply { color: var(--red); }

/* --- Home --- */

/* Product brand marks on the Shipped cards. The three cards stay structurally
   identical -- only the image inside each thumb differs. */
.product-card__thumb--mark {
  display: flex; align-items: center; justify-content: center;
  background: var(--card-white); padding: 0; overflow: hidden;
}
.product-card__thumb--mark img {
  display: block; width: 100%; height: 100%; object-fit: contain;
}

/* Hero */
.hero { position: relative; height: 600px; overflow: hidden; background: var(--ink); }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 22% 40%;
  transform: scale(1.25); transform-origin: 22% 40%;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, .74) 0%, rgba(11, 11, 12, .32) 45%, rgba(11, 11, 12, .92) 100%);
}
.hero__content { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 48px; }
.hero__badge { margin-bottom: 22px; }
.hero__title {
  margin: 0; font-family: var(--display); font-size: 104px; line-height: .85;
  letter-spacing: -.04em; text-transform: uppercase; color: var(--paper);
  text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
}
.hero__lede {
  margin: 26px 0 0; max-width: 56ch;
  font: 400 15px/1.75 var(--mono); color: rgba(239, 238, 234, .85);
}

/* Stat bar */
.stat-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--ink); color: var(--paper);
  border-bottom: 1px solid var(--rule-ink);
}
.stat-bar__cell { padding: 24px 30px; border-right: 1px solid var(--rule-ink); }
.stat-bar__cell:last-child { border-right: none; }
.stat-bar__num { font-family: var(--display); font-size: 32px; line-height: 1; }
.stat-bar__label {
  font: 500 10.5px/1.5 var(--mono); letter-spacing: .14em;
  color: var(--muted-ink); margin-top: 8px;
}

/* Shared section heads */
.section-head {
  margin: 0 0 8px; font-family: var(--display); font-size: 46px;
  text-transform: uppercase; letter-spacing: -.025em; line-height: .95;
}
.section-lede { margin: 0 0 38px; font: 400 13px/1.6 var(--mono); color: var(--muted-paper); }
.section-head-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 32px; }
.section-head-row .section-head { margin: 0; }

/* What I do — numbered lane cards */
.what-i-do { padding: 64px var(--gutter) 0; }
.lane-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lane-card { background: var(--ink); color: var(--paper); padding: 32px 28px 36px; }
.lane-card--left { transform: rotate(-.7deg); }
.lane-card--right { transform: rotate(.7deg); }
.lane-card--blue { background: var(--blue); }
.lane-num {
  font-family: var(--display); font-size: 44px; line-height: 1;
  color: var(--blue-bright); margin-bottom: 20px;
}
.lane-card--blue .lane-num { color: var(--muted-ink); }
.lane-title {
  margin: 0 0 12px; font-family: var(--display); font-size: 20px;
  text-transform: uppercase; line-height: 1.15;
}
.lane-body { margin: 0; font: 400 13px/1.7 var(--mono); color: rgba(239, 238, 234, .72); }
.lane-card--blue .lane-body { color: rgba(239, 238, 234, .82); }

/* Shipped — product cards */
.shipped { padding: 70px var(--gutter) 0; }
.shipped-badge {
  display: inline-block; padding: 6px 12px; background: var(--red); color: #fff;
  font: 600 10px/1 var(--mono); letter-spacing: .14em; transform: rotate(-2deg);
}
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.product-card__thumb {
  height: 180px; min-height: 0;
  border-bottom: 2px solid var(--ink);
}
.product-card__body { padding: 22px 24px 24px; }
.product-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.product-card__title { font-family: var(--display); font-size: 20px; text-transform: uppercase; }
.product-card__arrow { flex: none; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; color: var(--blue); }
.product-card__url { font: 400 11px/1.5 var(--mono); color: rgba(11, 11, 12, .62); margin-top: 5px; }
.product-card__desc { margin: 12px 0 0; font: 400 12.5px/1.7 var(--mono); color: rgba(11, 11, 12, .68); }

.internal-strip {
  margin-top: 24px; border: 1px solid var(--rule-paper-strong); padding: 26px 28px;
  display: flex; gap: 32px; align-items: flex-start; background: rgba(11, 11, 12, .03);
}
.internal-badge {
  flex: none; padding: 6px 11px; border: 1px solid rgba(11, 11, 12, .4);
  font: 600 10px/1 var(--mono); letter-spacing: .14em; color: var(--muted-paper);
  margin-top: 3px; text-transform: uppercase;
}
.internal-strip__title { font: 700 14px/1.4 var(--mono); margin-bottom: 8px; }
.internal-strip__body { margin: 0; font: 400 13px/1.7 var(--mono); color: rgba(11, 11, 12, .65); max-width: 88ch; }

/* How I handle data */
.data-section { margin-top: 70px; background: var(--ink); color: var(--paper); padding: 60px var(--gutter); }
.data-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 36px; }
.data-section__head h2 {
  margin: 0; font-family: var(--display); font-size: 38px;
  text-transform: uppercase; letter-spacing: -.025em;
}
.data-eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--blue-bright); }
.hairline-grid--4col { grid-template-columns: repeat(4, 1fr); }
.data-cell { padding: 26px 24px 30px; }
.data-cell__num { font: 700 11px/1 var(--mono); letter-spacing: .16em; color: var(--blue-bright); margin-bottom: 16px; }
.data-cell h3 { margin: 0 0 10px; font: 700 13px/1.4 var(--mono); }
.data-cell p { margin: 0; font: 400 12.5px/1.7 var(--mono); color: rgba(239, 238, 234, .65); }

/* CTA */
.cta {
  position: relative; overflow: hidden; background: var(--ink-lift); color: var(--paper);
  padding: 72px var(--gutter); text-align: center;
}
.cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.cta__content { position: relative; }
.cta__title {
  margin: 0 0 18px; font-family: var(--display); font-size: 52px;
  text-transform: uppercase; letter-spacing: -.03em; line-height: .95;
}
.cta__lede { margin: 0 auto 30px; max-width: 52ch; font: 400 14px/1.75 var(--mono); color: var(--muted-ink); }

/* --- Services --- */

/* Masthead */
.services-masthead { padding: 64px var(--gutter) 0; }
.services-masthead__badge { margin-bottom: 24px; }
.services-masthead__title {
  margin: 0; font-family: var(--display); font-size: 76px; line-height: .88;
  letter-spacing: -.035em; text-transform: uppercase;
}
.strike-wrap { position: relative; display: inline-block; }
.strike-rule {
  position: absolute; left: -2%; top: 52%; width: 104%; height: 8px;
  background: var(--blue); transform: rotate(-1deg);
}
.services-masthead__lede {
  margin: 30px 0 0; max-width: 60ch; font: 400 15px/1.8 var(--mono);
  color: rgba(11, 11, 12, .72);
}

/* Service rows */
.services-rows { padding: 58px var(--gutter) 0; }
.services-rows__list { border-top: 2px solid var(--ink); }
.service-row {
  /* 260px, not the design's 200px: ORCHESTRATION in Archivo Black 24px renders
     231px and overflowed the 176px content box, bleeding across the divider.
     Widened rather than shrinking the type, which the design fixes at 24px. */
  display: grid; grid-template-columns: 260px 1fr;
  border-bottom: 1px solid var(--rule-paper);
}
.service-row__left { padding: 32px 24px 36px 0; }
.service-row__num {
  font: 700 11px/1 var(--mono); letter-spacing: .16em; color: var(--blue);
  margin-bottom: 12px;
}
.service-row__title {
  margin: 0; font-family: var(--display); font-size: 24px;
  text-transform: uppercase; line-height: 1.1;
  /* README type scale gives card titles -.02em; the design file omitted it. */
  letter-spacing: -.02em;
}
.service-row__right { padding: 32px 0 36px 28px; border-left: 1px solid var(--rule-paper); }
.service-row__body {
  margin: 0 0 20px; max-width: 70ch;
  font: 400 14px/1.8 var(--mono); color: rgba(11, 11, 12, .72);
}

/* CTA band — page-agnostic; reused by Work (Task 8) */
.cta-band {
  margin: 64px 0 0; background: var(--blue); color: var(--paper);
  padding: 52px var(--gutter); display: flex; align-items: center;
  justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.cta-band__title {
  margin: 0 0 10px; font-family: var(--display); font-size: 30px;
  text-transform: uppercase; letter-spacing: -.01em;
}
.cta-band__lede { margin: 0; font: 400 14px/1.7 var(--mono); color: rgba(239, 238, 234, .85); }
.cta-band__email { flex: none; padding: 17px 30px; font: 600 13px/1 var(--mono); }

/* --- About --- */

/* Masthead */
.about-masthead { display: grid; grid-template-columns: 1.1fr .9fr; }
.about-masthead__left { padding: 64px 40px 60px 44px; }
.about-masthead__badge { margin-bottom: 24px; }
.about-masthead__title {
  margin: 0 0 30px; font-family: var(--display); font-size: 66px; line-height: .9;
  letter-spacing: -.035em; text-transform: uppercase;
}
.about-masthead__body {
  margin: 0 0 20px; font: 400 14.5px/1.85 var(--mono); color: rgba(11, 11, 12, .78);
}
.about-masthead__body:last-child { margin-bottom: 0; }
.about-masthead__media {
  position: relative; background: var(--ink); overflow: hidden; min-height: 560px;
}
/* Direct child only -- the portrait figure below also holds an img, and the
   descendant selector was capturing it and rendering it as the cover art. */
.about-masthead__media > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 30% 45%;
  transform: scale(1.3); transform-origin: 30% 45%;
}
.about-masthead__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(11, 11, 12, .25) 0%, rgba(11, 11, 12, .85) 100%);
}

/* Portrait pasted onto the wall art -- the zine/sticker treatment the brand
   sheet already uses, rather than a floating cutout. Monochrome so it sits in
   the ink/paper palette; hard edge and negative rotation per the sticker rule. */
.about-portrait {
  position: absolute; left: 50%; bottom: 0;
  width: 66%; max-width: 300px; margin: 0;
  transform: translateX(-50%) rotate(-1.4deg); transform-origin: bottom center;
}
.about-portrait img {
  display: block; width: 100%; height: auto;
  border: 6px solid var(--paper); border-bottom: 0;
}
.about-portrait figcaption {
  position: absolute; left: 6px; bottom: 10px; right: 6px;
  padding: 7px 10px; background: var(--ink);
  font: 600 10px/1.3 var(--mono); letter-spacing: .12em;
  color: var(--paper); text-align: center;
}

/* How I work */
.about-how { padding: 36px var(--gutter) 64px; border-top: 2px solid var(--ink); }
.about-how__head {
  margin: 0 0 28px; font-family: var(--display); font-size: 30px;
  text-transform: uppercase; letter-spacing: -.02em;
}
.about-how__grid { grid-template-columns: repeat(3, 1fr); background: rgba(11, 11, 12, .18); }
.about-how__grid > div:first-child { padding: 26px 26px 30px 0; }
.about-how__grid > div:nth-child(2) { padding: 26px 26px 30px; }
.about-how__grid > div:last-child { padding: 26px 0 30px 26px; }
.about-cell h3 { margin: 0 0 10px; font: 700 13px/1.4 var(--mono); letter-spacing: .04em; }
.about-cell p { margin: 0; font: 400 13px/1.75 var(--mono); color: var(--muted-paper); }

/* Closing band — reuses .cta-band's flex/padding/gap, overrides background and alignment */
.about-closing { background: var(--ink); align-items: flex-end; margin-top: 0; }
.about-closing__title {
  margin: 0; font-family: var(--display); font-size: 34px;
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1;
}
.about-closing__contact { flex: none; text-align: right; }
.about-closing__email {
  display: block; font: 600 16px/1.4 var(--mono); color: var(--paper); text-decoration: none;
  margin: -12px 0 -2px; padding: 12px 0; min-height: 44px;
}
.about-closing__email:hover { color: var(--blue-bright); text-decoration: underline; }
.about-closing__note { margin-top: 8px; font: 400 11.5px/1.7 var(--mono); color: var(--muted-ink); }

/* --- Work --- */

/* Internal-tooling marks. Both are hexagonal monoline badges in the same
   gunmetal weight, so they read as a matched pair rather than two logos.
   Talon's is from its brand kit; Janus's was generated to sit beside it. */
.work-internal-card__mark {
  display: block; width: 58px; height: 58px; object-fit: contain;
  margin: 0 0 16px; mix-blend-mode: multiply;
}

/* Real product screenshots in the panel media slots. Zero radius, no shadow,
   no browser chrome or perspective mockup -- the crop is the whole treatment. */
.work-panel__media--shot { padding: 0; background: var(--card-white); }
.work-panel__media--shot img {
  display: block; width: 100%; height: 100%;
  /* contain, not cover: each panel's height is driven by its own copy, so slot
     aspect varies per product (measured 1.47 / 1.35 / 1.09). cover cropped the
     left edge off the UI. contain never crops and survives copy edits. */
  object-fit: contain; object-position: center;
}

/* Masthead */
.work-masthead { padding: 64px var(--gutter) 0; }
.work-masthead__badge { margin-bottom: 24px; }
.work-masthead__title {
  margin: 0; font-family: var(--display); font-size: 76px; line-height: .88;
  letter-spacing: -.035em; text-transform: uppercase;
}
.work-masthead__lede {
  margin: 30px 0 0; max-width: 62ch; font: 400 15px/1.8 var(--mono);
  color: rgba(11, 11, 12, .72);
}

/* Product panels — image side and text side alternate panel to panel */
.work-panels { padding: 56px 0 0; }
.work-panel { border: 2px solid var(--ink); background: var(--card-white); margin: 0 var(--gutter) 28px; }
.work-panel__grid { display: grid; grid-template-columns: 1fr 1fr; }
.work-panel__media--divide-r { border-right: 2px solid var(--ink); }
.work-panel__media--divide-l { border-left: 2px solid var(--ink); }
.work-panel__media--poli {
  background: var(--navy); padding: 40px; min-height: 320px;
  display: flex; align-items: center; justify-content: center;
}
.work-panel__media--poli img { max-width: 150px; width: 100%; height: auto; }
.work-panel__body { padding: 36px 34px; }
.work-panel__status { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.work-panel__platform { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--muted-paper); }
.work-panel__title {
  margin: 0 0 8px; font-family: var(--display); font-size: 32px;
  text-transform: uppercase; letter-spacing: -.02em;
}
.work-panel__link {
  display: block; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-decoration: none;
  margin: -12px 0 -2px; padding: 12px 0; min-height: 44px;
}
.work-panel__link:hover { text-decoration: underline; }
.work-panel__note { font: 600 12px/1 var(--mono); letter-spacing: .08em; color: rgba(11, 11, 12, .62); }
.work-panel__desc {
  margin: 20px 0 22px; font: 400 13.5px/1.8 var(--mono); color: rgba(11, 11, 12, .72);
}

/* Internal tooling */
.work-internal { padding: 34px var(--gutter) 0; }
.work-internal__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.work-internal__head h2 {
  margin: 0; font-family: var(--display); font-size: 30px;
  text-transform: uppercase; letter-spacing: -.02em;
}
.work-internal__aside { font: 400 11.5px/1.5 var(--mono); color: var(--muted-paper); }
.work-internal__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.work-internal-card {
  border: 1px solid var(--rule-paper-strong); padding: 28px 26px 30px;
  background: rgba(11, 11, 12, .03);
}
.work-internal-card__badge-row { margin-bottom: 16px; }
.work-internal-card h3 { margin: 0 0 12px; font-family: var(--display); font-size: 22px; text-transform: uppercase; }
.work-internal-card p { margin: 0; font: 400 13px/1.8 var(--mono); color: rgba(11, 11, 12, .68); }

/* --- Support --- */

/* Masthead */
.support-masthead { padding: 64px var(--gutter) 0; }
.support-masthead__badge { margin-bottom: 24px; }
.support-masthead__title {
  margin: 0; font-family: var(--display); font-size: 76px; line-height: .88;
  letter-spacing: -.035em; text-transform: uppercase;
}
.support-masthead__lede {
  margin: 30px 0 0; max-width: 62ch; font: 400 15px/1.8 var(--mono);
  color: rgba(11, 11, 12, .72);
}

/* Contact cards */
.support-cards { padding: 52px var(--gutter) 0; }
.support-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.support-card { padding: 30px 26px 32px; }
.support-card__eyebrow {
  font: 700 10.5px/1 var(--mono); letter-spacing: .16em; color: var(--blue);
  margin-bottom: 18px;
}
.support-card__email {
  display: block; font: 600 15px/1.5 var(--mono); margin: -12px 0 -2px; padding: 12px 0;
  min-height: 44px; box-sizing: border-box;
  color: var(--ink); text-decoration: none;
}
.support-card__email:hover { color: var(--blue-bright); text-decoration: underline; }
.support-card__note { margin: 0; font: 400 12.5px/1.7 var(--mono); color: rgba(11, 11, 12, .65); }

/* How I handle data (light variant — see .data-section for the on-ink equivalent) */
.support-data { padding: 56px var(--gutter) 0; }
.support-data__inner { border-top: 2px solid var(--ink); padding-top: 34px; }
.support-data__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.support-data__head h2 {
  margin: 0; font-family: var(--display); font-size: 32px;
  text-transform: uppercase; letter-spacing: -.02em;
}
.support-data__eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--blue); }
.support-data__grid { grid-template-columns: repeat(2, 1fr); background: rgba(11, 11, 12, .18); }
.support-data__grid > div:nth-child(odd) { padding: 26px 26px 30px 0; }
.support-data__grid > div:nth-child(even) { padding: 26px 0 30px 26px; }
.support-data__grid > div:nth-child(3), .support-data__grid > div:nth-child(4) {
  border-top: 1px solid rgba(11, 11, 12, .18);
}
.support-data-cell h3 { margin: 0 0 10px; font: 700 13px/1.4 var(--mono); letter-spacing: .04em; }
.support-data-cell p { margin: 0; font: 400 13px/1.75 var(--mono); color: var(--muted-paper); }

/* Business information */
.support-business { padding: 52px var(--gutter) 0; }
.support-business__panel {
  border: 1px solid var(--rule-paper-strong); background: rgba(11, 11, 12, .03);
  padding: 30px 30px 32px;
}
.support-business__eyebrow {
  font: 700 10.5px/1 var(--mono); letter-spacing: .16em; color: var(--muted-paper);
  margin-bottom: 20px;
}
.support-business__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; }
.support-spec-row { display: grid; grid-template-columns: 130px 1fr; gap: 14px; font: 400 13px/1.7 var(--mono); }
.support-spec-row__label { color: var(--muted-paper); }

/* CTA — reuses .cta's positioning/background/image; overrides padding and title size */
.support-cta { margin-top: 64px; padding: 64px var(--gutter); }
.support-cta__title { font-size: 44px; margin-bottom: 16px; }

/* --- Prose pages (privacy, terms, 404) --- */
.prose { max-width: 74ch; padding: 56px var(--gutter) 72px; }
.prose h1 {
  font: 400 46px/0.95 var(--display); letter-spacing: -.025em;
  text-transform: uppercase; margin: 0 0 10px;
}
.prose h2 {
  font: 400 22px/1.15 var(--display); letter-spacing: -.02em;
  text-transform: uppercase; margin: 40px 0 12px;
}
.prose p, .prose li { font: 400 14px/1.8 var(--mono); color: var(--muted-paper); }
.prose ul { padding-left: 20px; }
.prose .updated {
  font: 500 11px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-paper); margin-bottom: 36px;
}

/* --- 404 --- */
.notfound {
  background: var(--ink); color: var(--paper);
  min-height: 70vh; padding: 72px var(--gutter);
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 20px;
}
.notfound h1 {
  font: 400 64px/0.9 var(--display); letter-spacing: -.035em;
  text-transform: uppercase; margin: 0;
}
.notfound p { font: 400 14px/1.7 var(--mono); color: var(--muted-ink); margin: 0; }

/* ============================================================
   Breakpoints — resolves PUNCH_LIST B7. The design canvas was a
   fixed 1180px desktop frame with no mobile layout.
   No hamburger: four nav pills plus the wordmark measure ~374px
   against ~335px usable at 375px, so the nav wraps to its own
   row instead. A hamburger would require JavaScript and forfeit
   the zero-JS invariant.
   ============================================================ */
@media (max-width: 1024px) {
  :root { --gutter: 32px; }
  .hero__title { font-size: 80px; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }

  /* The home page composes its hero by absolute positioning: a transparent
     header overlaid on the image, with the content anchored to bottom: 48px.
     That only holds while both stay short. On a narrow screen the nav wraps to
     a second row (header grows to ~115px) while the badge, headline and lede
     all wrap taller (content grows to ~400px) -- inside a 520px hero they
     collide, and the badge lands on top of the nav.
     Absolute positioning cannot express "don't overlap", so drop the overlay
     here: the header becomes a normal ink bar as on every other page, and the
     hero content returns to normal flow where overlap is impossible. It also
     fixes legibility -- nav pills over graffiti are hard to read. */
  .site-header--overlay { position: static; background: var(--ink); }
  /* The desktop scrim eases to .32 opacity at 45% because the content used to
     sit at the bottom, where it reaches .92. In flow the lede now sits in that
     light band and washes out over the graffiti, so hold the scrim dark across
     the whole hero on mobile. */
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(11, 11, 12, .80) 0%, rgba(11, 11, 12, .76) 45%, rgba(11, 11, 12, .94) 100%);
  }
  .hero { height: auto; min-height: 0; }
  .hero__content {
    position: relative; z-index: 1;
    left: auto; right: auto; bottom: auto;
    padding: 40px var(--gutter) 46px;
  }
  .hero__title { font-size: 56px; }

  /* Every multi-column grid collapses to one column. */
  .stat-bar,
  .lane-grid,
  .product-grid,
  .support-cards__grid,
  .work-internal__grid,
  .hairline-grid--4col,
  .about-how__grid,
  .support-data__grid,
  .support-business__grid,
  .about-masthead {
    grid-template-columns: 1fr;
  }

  .stat-bar__cell { border-right: 0; border-bottom: 1px solid var(--rule-ink); }
  .stat-bar__cell:last-child { border-bottom: 0; }

  .about-how__grid > div:first-child,
  .about-how__grid > div:nth-child(2),
  .about-how__grid > div:last-child {
    padding: 26px 0 30px;
  }

  .support-data__grid > div:nth-child(odd),
  .support-data__grid > div:nth-child(even) {
    padding: 22px 0;
  }
  .support-data__grid > div:not(:first-child) {
    border-top: 1px solid rgba(11, 11, 12, .18);
  }

  .about-masthead__left { padding: 44px var(--gutter) 40px; }
  /* Taller than the 320px the layout would otherwise take, so the pasted
     portrait fits without the wall art disappearing behind it. */
  .about-masthead__media { min-height: 400px; }
  /* The 1fr track's min-content floor is set by info@midknightdev.com, which is
     unbreakable in mono (~164px). Against a 258px content box that forced every
     row past the panel border below ~410px -- on the page reviewers read. */
  .support-spec-row { grid-template-columns: 1fr; gap: 4px; }
  .about-portrait { max-width: 210px; }
  .about-masthead__title { font-size: 40px; }

  /* Services rows stack; the left cell becomes a heading. */
  .service-row { grid-template-columns: 1fr; }
  .service-row__right { border-left: 0; padding-left: 0; padding-top: 18px; }

  /* Work panels stack image above text, regardless of source order —
     panels 2 and 4 place the media element after the body in the
     markup, so it needs reordering to stay on top when stacked. */
  .work-panel__grid { grid-template-columns: 1fr; }
  .work-panel__media--divide-r,
  .work-panel__media--divide-l {
    border-left: 0; border-right: 0;
    border-bottom: 2px solid var(--ink);
  }
  .work-panel__media--divide-l { order: -1; }

  .cta-band, .about-closing, .site-footer {
    flex-direction: column; align-items: flex-start;
  }
  .cta__title { font-size: 34px; }
  .support-cta__title { font-size: 28px; }

  .services-masthead__title,
  .work-masthead__title,
  .support-masthead__title {
    font-size: 44px;
  }

  /* .strike-wrap is inline-block, so wrapped text collapses to one box and
     .strike-rule's top:52% cuts across the line boundary instead of
     underlining "volunteers for." — drop the decoration once the title
     wraps rather than let it strike through the wrong line. */
  .strike-rule { display: none; }

  .section-head-row,
  .data-section__head,
  .work-internal__head,
  .support-data__head {
    flex-wrap: wrap; row-gap: 8px;
  }
}

@media (max-width: 480px) {
  .site-header { flex-wrap: wrap; gap: 14px; }
  .nav { width: 100%; }
  .nav-item { flex: 1 1 auto; justify-content: center; padding: 12px 10px; }
  .hero__title { font-size: 42px; }
  .services-masthead__title,
  .work-masthead__title,
  .support-masthead__title {
    font-size: 36px;
  }
  .about-masthead__title { font-size: 34px; }
}

/* ============================================================
   Print — reviewers occasionally print or PDF the Support page.
   Ink on white, no artwork, URLs shown in full.
   ============================================================ */
@media print {
  * {
    background: transparent !important; color: #000 !important;
    box-shadow: none !important; text-shadow: none !important;
  }
  body { background: #fff; color: #000; }
  .site-header, .marquee, .skip-link,
  .hero__img, .hero__scrim, .cta__img,
  .about-masthead__media, .stripe-placeholder,
  .work-panel__media, .product-card__thumb--mark,
  .work-panel__media--poli img {
    display: none !important;
  }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after,
  a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 10px; }
  .page { max-width: none; }
  .badge, .chip, .card, .support-card, .support-business__panel,
  .work-internal-card, .lane-card {
    border: 1px solid #000;
  }
}

/* ============================================================
   Reduced motion — the marquee is the site's only animation and
   MUST stop here (PUNCH_LIST B6).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .marquee-track { animation: none !important; transform: none; }
}