/* =====================================================================
   mediakit.css - the media kit and partnership pages

   Loaded ONLY by media_kit.asp and partnership.asp. They share one
   design system - dark charcoal, warm gold, Anton display type - which
   is deliberately louder than the rest of the site, because they are
   what gets sent to a journalist or a prospective sponsor.

   EVERY SELECTOR IS SCOPED UNDER .mk, AND THAT IS NOT COSMETIC.
   The original standalone pages carried a global reset -
       *{box-sizing:border-box;margin:0;padding:0}
   - plus :root variable overrides and bare element rules on
   section/h1/h2/h3. Those were harmless when the file was the whole
   page. Now that these pages sit inside layout_top/layout_bottom, an
   unscoped reset would strip the margins off the site header and footer
   and an unscoped --gold would repaint them, on these two pages only,
   which is the kind of fault that gets blamed on the header.

   So the page content is wrapped in <div class="mk"> and every rule
   below is prefixed. :root, html and body all became .mk, since the
   wrapper is now what those rules were really describing.

   FONTS ARE SELF-HOSTED. The originals pulled three families from
   fonts.googleapis.com, which the site's CSP blocks - style-src does not
   list that host and font-src does not list fonts.gstatic.com - so the
   type would have fallen back silently and the design would have looked
   broken with nothing in the console to explain why. Serving them from
   /assets/fonts keeps the CSP exactly as tight as it is and removes a
   third-party request. All three are Open Font License.

   Archivo is a VARIABLE font: one file covers 400 through 700, which is
   why the weight range below is 100-900 rather than four separate faces.
   Four files, 81KB in total.
   ===================================================================== */

/* font-display:swap - text is readable in the fallback face immediately
   and reflows when the webfont lands. The alternative, invisible text
   for up to three seconds, is worse on a page whose job is to be read. */
@font-face {
  font-family: 'Anton';
  src: url('/assets/fonts/anton-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  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;
}

/* Anchor scrolling for the in-page nav. Safe unscoped: this stylesheet
   is only ever loaded by the two pages that want it. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   THE SITE'S PALETTE, NOT A SECOND ONE.

   These pages arrived with their own colours - a warm charcoal #15130f,
   cream text #f2ecde and a brighter gold #c89b3c - which read fine while
   they were standalone documents and read as a different website once
   the real header and footer were above and below them. The seam was
   visible: the page background did not match the header's.

   So the names stay and the values become the site's. Every rule below
   already goes through these variables, which is why re-pointing eight
   declarations restyles the whole of both pages.

   --gold AND --max ARE DELETED, NOT REMAPPED. base.css already defines
   both at :root with exactly those names, so leaving them out lets them
   inherit. Writing --gold: var(--gold) here would be a custom property
   referring to itself, which is invalid - the browser discards it and
   every gold on the page falls back to nothing. Dropping --max also
   widens the content from 1180px to the site's 1300px, so it lines up
   with the header instead of sitting narrower than it.

   NO LITERAL COLOURS REMAIN. --gold-dim was dropped with the nav and
   footer rules that were its only users, and the gold button hover is a
   brightness filter rather than a second hand-picked gold - which is the
   idiom film.css already uses for the same job.
   --------------------------------------------------------------------- */
.mk {
    --charcoal:   var(--bg);          /* #0b0b0b - same as the site body,
                                         so there is no seam under the
                                         header */
    --charcoal-2: var(--card-bg);     /* the panel tint film cards use */
    --cream:      var(--text);        /* #ffffff */
    --cream-dim:  var(--muted);       /* #aaa - lighter than the cream-dim
                                         it replaces, which on the darker
                                         background is a contrast gain */
    --rule:       var(--line);        /* #222 */
}

.mk * {box-sizing:border-box;margin:0;padding:0;
}

.mk {scroll-behavior:smooth;
}

.mk {
    background:var(--charcoal);
    color:var(--cream);
    font-family:'Archivo',sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

.mk a {color:inherit;
}

.mk .wrap {max-width:var(--max);margin:0 auto;padding:0 32px;
}

.mk h1, .mk h2, .mk h3 {font-family:'Anton',sans-serif;font-weight:400;letter-spacing:0.01em;line-height:1.02;text-transform:uppercase;
}

.mk .mono {font-family:'IBM Plex Mono',monospace;
}

/* nav */









/* hero */
.mk .hero {padding:96px 32px 80px;border-bottom:1px solid var(--rule);
}

.mk .hero-inner {max-width:var(--max);margin:0 auto;
}

.mk .hero h1 {font-size:clamp(46px,8vw,104px);max-width:820px;
}

.mk .hero-lede {margin-top:28px;max-width:560px;font-size:19px;color:var(--cream-dim);font-weight:400;
}

.mk .hero-lede strong {color:var(--cream);font-weight:600;
}

.mk .hero-ctas {margin-top:40px;display:flex;flex-wrap:wrap;gap:16px;
}

.mk .btn {
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 26px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.02em;
    text-decoration:none;border-radius:2px;transition:transform .15s, background .15s;
}

.mk .btn-primary {background:var(--gold);color:var(--charcoal);font-weight:500;
}

.mk .btn-primary:hover {filter:brightness(1.08);
}

.mk .btn-ghost {border:1px solid var(--rule);color:var(--cream);
}

.mk .btn-ghost:hover {border-color:var(--gold);color:var(--gold);
}

.mk section {padding:80px 32px;border-bottom:1px solid var(--rule);
}

.mk .section-inner {max-width:var(--max);margin:0 auto;
}

.mk .kicker {font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--gold);letter-spacing:0.04em;margin-bottom:14px;
}

/* stat grid */
.mk .stats {display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:40px;
}

@media(min-width:700px){
  .mk .stats {grid-template-columns:repeat(4,1fr);}
}

.mk .stat {background:var(--charcoal);padding:32px 24px;
}

.mk .stat .num {font-family:'Anton',sans-serif;font-size:clamp(34px,4.5vw,52px);color:var(--gold);line-height:1;
}

.mk .stat .label {margin-top:10px;font-size:14px;color:var(--cream-dim);
}

.mk .stat .note {margin-top:2px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--cream-dim);
}

/* story */
.mk .story-headline {font-size:clamp(32px,5vw,58px);max-width:760px;margin-top:6px;
}

.mk .story-body {margin-top:28px;max-width:640px;color:var(--cream-dim);font-size:17px;
}

.mk .story-body p+p {margin-top:16px;
}

/* reach */
.mk .reach-grid {display:grid;gap:40px;margin-top:36px;
}

@media(min-width:800px){
  .mk .reach-grid {grid-template-columns:1.1fr 0.9fr;align-items:start;}
}

.mk .reach-map {
    border:1px solid var(--rule);background:var(--charcoal-2);
    aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono',monospace;color:var(--cream-dim);font-size:13px;text-align:center;padding:24px;
}

.mk .reach-list {display:flex;flex-direction:column;gap:18px;
}

.mk .reach-item {display:flex;gap:16px;align-items:baseline;padding-bottom:18px;border-bottom:1px solid var(--rule);
}

.mk .reach-item:last-child {border-bottom:none;
}

.mk .reach-item .n {font-family:'Anton',sans-serif;color:var(--gold);font-size:22px;min-width:64px;
}

.mk .reach-item .t {font-size:15px;color:var(--cream-dim);
}

/* films */
.mk .films-grid {display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:36px;
}

@media(min-width:700px){
  .mk .films-grid {grid-template-columns:1fr 1fr;}
}

.mk .film-card {background:var(--charcoal-2);padding:32px;min-height:180px;display:flex;flex-direction:column;justify-content:flex-end;
}

.mk .film-card .film-title {font-family:'Anton',sans-serif;font-size:24px;text-transform:none;letter-spacing:0;
}

.mk .film-card .film-meta {margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--cream-dim);
}

/* prizes */
.mk .prize-big {font-size:clamp(56px,9vw,120px);color:var(--gold);
}

.mk .prize-sub {font-size:16px;color:var(--cream-dim);margin-top:6px;max-width:420px;
}

.mk .prize-cols {display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:40px;
}

@media(min-width:700px){
  .mk .prize-cols {grid-template-columns:repeat(3,1fr);}
}

.mk .prize-col {background:var(--charcoal);padding:28px;
}

.mk .prize-col h3 {font-size:16px;letter-spacing:0;text-transform:none;font-family:'Archivo',sans-serif;font-weight:600;
}

.mk .prize-col p {margin-top:10px;font-size:14px;color:var(--cream-dim);
}

/* dates */
.mk .dates-note {margin-top:28px;padding:24px;border:1px dashed var(--rule);color:var(--cream-dim);font-size:15px;max-width:560px;
}

/* press */
.mk .press-grid {display:grid;gap:12px;margin-top:36px;
}

@media(min-width:700px){
  .mk .press-grid {grid-template-columns:repeat(2,1fr);}
}

.mk .press-item {
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 22px;border:1px solid var(--rule);background:var(--charcoal-2);
}

.mk .press-item .t {font-size:15px;
}

.mk .press-item .t small {display:block;margin-top:3px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--cream-dim);
}

.mk .press-item .go {font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--gold);text-decoration:none;white-space:nowrap;margin-left:16px;
}

.mk .boilerplate {margin-top:32px;max-width:680px;color:var(--cream-dim);font-size:15px;
}

.mk .contact-row {margin-top:28px;display:flex;flex-wrap:wrap;gap:32px;font-family:'IBM Plex Mono',monospace;font-size:13px;
}

.mk .contact-row a {color:var(--gold);text-decoration:none;
}







.mk .hero {padding:96px 32px 72px;border-bottom:1px solid var(--rule);
}

.mk .why-headline {font-size:clamp(30px,4.5vw,48px);max-width:760px;
}

.mk .why-body {margin-top:24px;max-width:620px;color:var(--cream-dim);font-size:17px;
}

.mk .why-body p+p {margin-top:14px;
}

.mk .tier-grid {display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:40px;
}

.mk .tier {background:var(--charcoal-2);padding:30px 24px;display:flex;flex-direction:column;
}

.mk .tier h3 {font-family:'Archivo',sans-serif;font-weight:700;text-transform:none;font-size:17px;letter-spacing:0;
}

.mk .tier .note {margin-top:12px;font-size:14px;color:var(--cream-dim);flex-grow:1;
}

.mk .tier .footnote {margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--cream-dim);
}

.mk .approval-note {margin-top:28px;padding:22px 24px;border:1px dashed var(--rule);color:var(--cream-dim);font-size:14.5px;max-width:640px;
}

.mk .contact-block {margin-top:8px;
}

.mk .contact-block .big {font-size:clamp(26px,3.6vw,36px);font-family:'Anton',sans-serif;text-transform:uppercase;max-width:600px;
}