/* Match Day Media website.
   Restrained editorial layout: dark charcoal, warm ivory type, thin rules, one muted sage accent,
   large photographs. System fonts only; nothing is loaded from outside the site. */

:root {
  color-scheme: dark;
  /* Surfaces, darkest to lightest. "paper" names are kept for a small diff; they are charcoal now. */
  --paper: #141513;
  --paper-deep: #1c1e1b;
  /* Text: warm ivory, softer ivory, muted. */
  --ink: #f2ede3;
  --ink-soft: #d4cec2;
  --muted: #a9a499;
  --rule: #353831;
  /* Sage accent for text, links, rules and focus. Solid buttons use their own tokens with dark text. */
  --green: #a9c4a3;
  --green-dark: #c4d8bf;
  --button-bg: #a9c4a3;
  --button-bg-hover: #c4d8bf;
  --button-ink: #121411;
  --wrap: 1320px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --gap: 1.5rem;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
figure { margin: 0; }
p { margin: 0 0 1rem; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--green); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  text-wrap: balance;
}

h3 { font-size: 1.1875rem; letter-spacing: -0.012em; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

.grid > * { grid-column: 1 / -1; }

/* Skip link: off screen until focused. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 6px;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--paper); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 21, 19, 0.96);
  border-bottom: 1px solid var(--rule);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(20, 21, 19, 0.84);
    backdrop-filter: saturate(1.4) blur(14px);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  min-height: 3.75rem;
}

.wordmark {
  margin: 0 auto 0 0;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; }

.nav-list {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.nav-list a {
  display: inline-block;
  padding-block: 0.35rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.nav-list a:hover { color: var(--ink); }
.nav-list a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--green); }

/* Only shown once nav.js is running; see the narrow-screen rules below. */
.nav-toggle {
  display: none;
  align-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 500 0.9375rem/1 var(--text);
  cursor: pointer;
}

.nav-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Type */
.display {
  font-size: clamp(2.6rem, 7vw, 6rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.h-section {
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  letter-spacing: -0.03em;
}

.kicker {
  margin-bottom: 1.1rem;
  color: var(--green);
  font-size: 0.9375rem;
  font-weight: 600;
}

.lede {
  max-width: 34ch;
  margin-top: 1.5rem;
  color: var(--ink-soft);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.45;
}

.caption {
  display: block;
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.fine { color: var(--muted); font-size: 0.875rem; }

/* Actions */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--button-bg);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-ink);
  font: 500 1rem/1.2 var(--text);
  text-decoration: none;
  cursor: pointer;
}

.button:hover { background: var(--button-bg-hover); border-color: var(--button-bg-hover); color: var(--button-ink); }
.button-small { min-height: 2.75rem; padding: 0.4rem 1.1rem; font-size: 0.875rem; }
.button-quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.button-quiet:hover { background: var(--paper-deep); color: var(--ink); border-color: var(--muted); }

.text-link {
  color: var(--green);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.text-link:hover { text-decoration: underline; }

/* Sections */
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.rule-top { border-top: 1px solid var(--rule); }

.section-head { align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-aside { color: var(--ink-soft); }
.section-aside .text-link { display: inline-block; margin-top: 0.35rem; }

.split-intro p { color: var(--ink-soft); max-width: 40ch; margin-top: 1.25rem; }
.split-intro .text-link, .split-intro .button { margin-top: 0.5rem; }

/* Home hero */
.hero-text {
  padding-block: clamp(3rem, 8vw, 7rem) clamp(2rem, 5vw, 4rem);
  row-gap: 2rem;
  align-items: end;
}

.hero-aside {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9375rem;
}

.hero-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 60%;
}

/* Selected work on the home page: an offset, uneven arrangement rather than equal tiles. */
.selected { row-gap: 3rem; align-items: start; }
.selected-b { grid-column: 4 / -1; }
.selected-c { grid-column: 1 / 10; }

/* Coverage summary on the home page */
.coverage-summary { margin: 2.5rem 0 0; }

.coverage-summary > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule);
}
.coverage-summary > div:last-child { border-bottom: 1px solid var(--rule); }
.coverage-summary dt, .coverage-summary dd { min-width: 0; overflow-wrap: break-word; }
.coverage-summary dt { font-weight: 600; }
.coverage-summary dd { margin: 0; }

.amount {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.note { display: block; color: var(--muted); font-size: 0.875rem; }
.package-link { display: inline-block; margin-top: 0.25rem; padding-block: 0.35rem; font-size: 0.875rem; }
.package-mail { display: inline-block; padding-block: 0.35rem; white-space: normal; }
.coverage-row .scope .text-link { white-space: normal; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Founder */
.founder { align-items: center; row-gap: 2.5rem; }
.founder-copy p { max-width: 40ch; color: var(--ink-soft); }
.founder-copy h2 { margin-bottom: 1.5rem; }

/* Closing call to action */
.closing { background: var(--paper-deep); }
.closing-title { margin-bottom: 1.5rem; }
.closing-copy p { max-width: 38ch; color: var(--ink-soft); }
.closing-copy .button { margin-top: 0.5rem; }
.closing-copy .actions { margin-top: 0.5rem; }

/* Inner page introductions */
.page-intro .grid {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem);
  row-gap: 2.5rem;
  align-items: end;
}

.page-intro-aside { color: var(--ink-soft); max-width: 40ch; margin: 0; }

.page-intro-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.status-note {
  max-width: 46ch;
  margin-top: 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--green);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* Work gallery: column flow keeps each photo's own proportions. */
.gallery {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 1;
  column-gap: var(--gap);
}

.gallery li { break-inside: avoid; margin-bottom: 2rem; }
.gallery a { display: block; text-decoration: none; color: inherit; }
.gallery a img { transition: opacity 0.2s ease; }
.gallery a:hover img { opacity: 0.88; }
.gallery-more { margin: 1rem 0 0; }

/* Coverage */
.coverage-rows { margin-top: 2.5rem; }

.coverage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--rule);
}
.coverage-row:last-child { border-bottom: 1px solid var(--rule); }
.coverage-row h3 { font-size: 1.375rem; }
.coverage-row .quote-label { margin: 0; color: var(--green); }
.coverage-row .amount { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.coverage-row .scope { margin: 0; max-width: 46ch; color: var(--ink-soft); }

.plain-list { margin: 0; padding: 0; list-style: none; }
.plain-list li { padding-block: 0.7rem; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.plain-list li:last-child { border-bottom: 1px solid var(--rule); }

.factor-list { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.factor-list li {
  display: grid;
  gap: 0.25rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--rule);
}
.factor-list li:last-child { border-bottom: 1px solid var(--rule); }
.factor-list p { margin: 0; color: var(--muted); }

.steps { margin: 2.5rem 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  position: relative;
  padding: 1.5rem 0 1.25rem 3rem;
  border-top: 1px solid var(--rule);
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1.5rem;
  color: var(--green);
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 600;
}
.steps p { margin: 0.5rem 0 0; color: var(--ink-soft); max-width: 52ch; }

.faq-list { margin-top: 2.5rem; border-bottom: 1px solid var(--rule); }
.faq-list details { border-top: 1px solid var(--rule); }
.faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--green); font-weight: 400; font-size: 1.25rem; line-height: 1; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 60ch; margin: 0 0 1.25rem; color: var(--ink-soft); }

/* Contact */
.email-line { margin-top: 2rem; }
.email-link {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--green);
  overflow-wrap: anywhere;
}

.contact-options { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; color: var(--ink-soft); }
.contact-options .text-link { white-space: normal; }

.send-list h2 { font-size: 1.1875rem; margin-bottom: 0.75rem; }
.send-list .fine { margin-top: 1rem; }

/* Privacy */
.prose { max-width: 64ch; }
.prose h2 { font-size: 1.375rem; margin: 2.25rem 0 0.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); }

/* 404 */
.recovery .plain-list a { font-weight: 600; color: var(--green); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 3rem 2.5rem;
  font-size: 0.9375rem;
}

.footer-grid { display: grid; gap: 1.75rem; }
.footer-brand p { margin: 0 0 0.25rem; color: var(--muted); }
.footer-brand .wordmark { color: var(--ink); }
.footer-nav ul, .footer-contact { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.footer-nav a, .footer-contact a { text-decoration: none; color: var(--ink-soft); }
.footer-nav a:hover, .footer-contact a:hover { color: var(--green); text-decoration: underline; }
.footer-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
.footer-contact a { overflow-wrap: anywhere; }
.footer-fine { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.8125rem; }

/* Lightbox (native dialog) */
.lightbox {
  width: min(94vw, 1100px);
  max-height: 94vh;
  padding: 1rem;
  border: 0;
  border-radius: 14px;
  background: var(--paper-deep);
  color: var(--ink);
}
.lightbox::backdrop { background: rgba(8, 9, 8, 0.88); }
.lightbox img { width: 100%; max-height: 74vh; object-fit: contain; background: var(--paper); }
.lightbox figcaption { margin-top: 0.75rem; color: var(--ink-soft); font-size: 0.9375rem; }
.lightbox-count { color: var(--muted); margin-left: 0.5rem; }
.lightbox-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; margin-top: 0.75rem; }

/* Narrow screens: no-JS shows the links wrapped under the header; with JS they collapse. */
@media (max-width: 759px) {
  .header-inner { flex-wrap: wrap; gap: 0.75rem 1rem; padding-block: 0.6rem; }
  .site-nav { order: 3; width: 100%; }
  .nav-list { gap: 1.25rem; }
  .nav-list a { display: inline-flex; align-items: center; min-height: 2.75rem; }

  .has-js .header-inner { flex-wrap: nowrap; padding-block: 0; }
  .has-js .site-nav { order: 0; width: auto; }
  .has-js .nav-toggle { display: inline-flex; }
  .has-js .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--pad) 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 16px 24px -16px rgba(0, 0, 0, 0.6);
  }
  .has-js .nav-list[data-open="true"] { display: flex; }
  .has-js .nav-list a { display: flex; min-height: 2.75rem; padding-block: 0.8rem; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; }
  .has-js .nav-list a[aria-current="page"] { border-bottom-color: var(--rule); color: var(--green); font-weight: 600; }
}

@media (max-width: 519px) {
  .header-cta { display: none; }
}

@media (min-width: 520px) and (max-width: 759px), (min-width: 1100px) {
  .coverage-summary > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .coverage-summary dd { text-align: right; }
}

@media (min-width: 640px) {
  .gallery { columns: 2; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.4fr; }
  .footer-fine { grid-column: 1 / -1; }
}

@media (min-width: 760px) {
  .hero-copy { grid-column: 1 / span 9; }
  .hero-aside { grid-column: 10 / -1; }
  .hero-photo img { aspect-ratio: 3 / 2; max-height: 82vh; }

  .section-head h2 { grid-column: 1 / 8; }
  .section-aside { grid-column: 8 / -1; margin: 0; }

  .selected-a { grid-column: 1 / 8; }
  .selected-b { grid-column: 9 / -1; margin-top: clamp(4rem, 12vw, 10rem); }
  .selected-c { grid-column: 3 / 8; }

  .split-intro { grid-column: 1 / 6; }
  .coverage-summary, .coverage-rows, .factor-list, .steps, .faq-list { grid-column: 7 / -1; margin-top: 0; }

  .founder-photo { grid-column: 1 / 7; }
  .founder-copy { grid-column: 8 / -1; }

  .closing-title { grid-column: 1 / 7; margin: 0; }
  .closing-copy { grid-column: 8 / -1; }

  .page-intro-copy { grid-column: 1 / 9; }
  .page-intro-copy.split { grid-column: 1 / 7; }
  .page-intro-aside { grid-column: 9 / -1; }
  .page-intro-photo { grid-column: 9 / -1; }
  .send-list, .recovery { grid-column: 8 / -1; }
  .page-intro-copy.split + .send-list, .page-intro-copy.split + .recovery { grid-row: 1; }
  .prose { grid-column: 1 / 9; }

  .coverage-row { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 2rem; }
  .coverage-row h3, .coverage-row .scope { grid-column: 1; }
  .coverage-row .quote-label { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
}

@media (min-width: 1000px) {
  .gallery { columns: 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Recent work: one small Instagram photo, shown full frame and never wider than its 512 px source.
   It fills the column on narrow screens and stays near 360 px beside its note from 640 px up. */
.recent-feature { row-gap: 2rem; align-items: end; }
.recent-feature-copy p { margin: 0; color: var(--ink-soft); max-width: 38ch; }
.recent-feature-copy .h-section + p { margin-top: 1rem; }
.social-single { width: 100%; max-width: 512px; margin: 0; }
.social-single img { width: 100%; }
.social-single figcaption { display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem; margin-top: 0.7rem; color: var(--muted); font-size: 0.8125rem; }
.social-title { flex-basis: 100%; color: var(--ink-soft); }
.social-single .text-link { display: inline-block; padding-block: 0.35rem; font-size: 0.8125rem; }

/* On the home page the recent photo follows the selected work as a short teaser. */
.recent-teaser { margin-top: clamp(3rem, 6vw, 5rem); }
.recent-teaser-title { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 600; }

@media (min-width: 640px) {
  .social-single { max-width: 360px; }
}

@media (min-width: 760px) {
  .recent-feature-copy { grid-column: 1 / 8; }
  .social-single { grid-column: 8 / -1; justify-self: end; }
}