/* =====================================================================
   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 */
/* Laid out like the catalogue's own film cards - see .film-card in
   assets/css/components.css and includes/render_film_card.asp. Separate
   rounded tiles with real space between them, a 16:9 still on top and
   the words underneath.

   THE GAP WAS THE PROBLEM. This grid used gap:1px over a background
   colour, which is the hairline-divider trick: it draws one-pixel rules
   between cells and makes six tiles read as a single slab. Cards want
   air around them, so the gap is real and the divider background is
   gone. */
.mk .films-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    margin-top:36px;
}

/* A ladder rather than one breakpoint, because three narrow columns on a
   tablet is worse than two comfortable ones:
       under 600px   1 column
       600-899px     2 columns
       900px and up  3 columns  - six winners as two rows of three

   Deliberately NOT auto-fit. The prize columns next door use it because
   their count varies with the data; this grid takes a fixed six films
   and the row shape is a design decision, not something to let the
   viewport negotiate. */
@media(min-width:600px){
  .mk .films-grid {grid-template-columns:repeat(2, 1fr);}
}

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

/* Same construction as the catalogue card: tinted panel, hairline
   border, 14px radius, and overflow hidden so the still is clipped to
   the rounded corner instead of squaring it off. */
.mk .film-card {
    display:block;
    background:var(--card-bg);
    border:1px solid rgba(255,255,255,0.04);
    border-radius:14px;
    overflow:hidden;
    text-decoration:none;
    transition:transform .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.mk .film-card:hover {
    background:var(--card-hover);
    border-color:rgba(255,255,255,0.08);
    transform:translateY(-4px);
    box-shadow:0 20px 50px rgba(0,0,0,0.4);
}

/* The wrapper holds the ratio, not the image. An image that is slow,
   blocked or missing would otherwise collapse the box and the card would
   jump when it arrived. #111 shows through until it does. */
.mk .film-thumb-wrap {
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#111;
}

.mk .film-thumb {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .3s ease;
}

/* The still lifts slightly under the pointer, exactly as it does on the
   catalogue - the whole point of matching is that the two feel the
   same to use, not only to look at. */
.mk .film-card:hover .film-thumb {transform:scale(1.06);
}

.mk .film-card-text {padding:16px 18px 18px;
}

.mk .film-card .film-title {
    font-family:'Archivo',sans-serif;
    font-size:16px;
    font-weight:700;
    text-transform:none;
    letter-spacing:0;
    line-height:1.3;
}

.mk .film-card .film-meta {margin-top:10px;
}

/* The award, as a pill - the catalogue card puts its category in one and
   this is the same kind of label doing the same job. */
.mk .film-award {
    display:inline-block;
    padding:5px 12px;
    border:1px solid var(--gold);
    border-radius:999px;
    color:var(--gold);
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    line-height:1.3;
}

.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);
}

/* The same slot when it holds words rather than a short figure.
   "$100K+" is six characters and carries 120px; "Tens of thousands" is
   seventeen and at that size wraps across two lines and collides with
   the line under it. Smaller, and with the line height a phrase needs
   rather than the tight leading a numeral wants. */
.mk .prize-big.is-words {
    font-size: clamp(34px, 5.2vw, 62px);
    line-height: 1.08;
}

.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;
}

/* auto-fit, not repeat(3,1fr). The three columns were right when the
   three competitions were hardcoded; the sections now come from
   dbo.PrizeSections and there are already four, so a fixed three left
   one stranded on a row of its own. This adapts to however many exist -
   and the same grid carries the screenings list, whose length changes
   through the year. */
@media(min-width:700px){
  .mk .prize-cols {grid-template-columns:repeat(auto-fit, minmax(240px, 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;
}

/* The award list under each competition. No bullets: the names are long
   enough to wrap, and a wrapped bullet list in a narrow column reads as
   a wall. A rule between items does the separating instead. */
.mk .prize-list {
    margin-top:12px;
    list-style:none;
    padding:0;
}

.mk .prize-list li {
    padding:8px 0;
    border-top:1px solid var(--rule);
    font-size:14px;
    line-height:1.4;
}

.mk .prize-list li:first-child {border-top:0;padding-top:4px;
}

/* "Runner Up" and the like, after the award name. Set quieter so the
   award itself is what the eye lands on. */
.mk .prize-level {
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--cream-dim);
    white-space:nowrap;
}

.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;
}

/* :not(.btn) IS LOAD-BEARING. This rule and .mk .btn-primary have equal
   specificity and this one comes later, so it was overriding the
   button's dark label with gold - on a gold button. The text was there
   the whole time and invisible.

   It predates the contact-form change: the email address that used to
   sit on this button was gold-on-gold too. Nobody noticed because a
   Cloudflare email-obfuscation span was wrapping it on the live site.
   Plain links in the contact row still want gold; buttons bring their
   own colours. */
.mk .contact-row a:not(.btn) {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;
}

/* The line under the partnership button, since the button no longer
   spells out an address and a reader is entitled to know where the form
   goes. */
.mk .contact-note {
    margin-top: 14px;
    font-size: 13px;
    color: var(--muted, #8a8578);
}

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


/* =====================================================================
   PRINT - this is the "Full media kit (PDF)".

   There is no PDF file and deliberately so: one built in September is
   wrong by October, while the page reads its winners, prizes and dates
   from the database and is right whenever somebody prints it.

   Everything below exists because the screen design is the opposite of
   what paper wants. White text on near-black costs a fortune in toner
   and reads badly; the site header, footer, donate button and download
   tiles are all navigation, which is meaningless once printed.
   ===================================================================== */
@media print {

  /* Ink. Dark backgrounds are dropped by most browsers' "background
     graphics" default anyway, which would leave white text on white
     paper - so the colours are inverted explicitly rather than left to
     a setting nobody checks. */
  .mk {
    background: #fff !important;
    color: #000 !important;
  }

  .mk .hero,
  .mk section {
    border-bottom: 1px solid #ccc !important;
    padding: 18pt 0 !important;
  }

  .mk h1, .mk h2, .mk h3 { color: #000 !important; }
  .mk .kicker,
  .mk .stat .num,
  .mk .prize-big { color: #6b5220 !important; }   /* gold, darkened for paper */

  .mk .hero-lede,
  .mk .stat .label,
  .mk .prize-sub,
  .mk .film-meta,
  .mk .prize-list li { color: #333 !important; }

  /* Panels become outlines. A filled tile is a solid block of ink for no
     information. */
  .mk .stat,
  .mk .prize-col,
  .mk .film-card,
  .mk .press-item {
    background: transparent !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }

  /* Navigation, and anything that only works by being clicked. The site
     header and footer come from layout_top/layout_bottom and are not
     part of .mk, hence the bare selectors. */
  header, footer, nav,
  .floating-donate,
  .mk .hero-ctas,
  .mk .press-grid,
  .mk #press .kicker,
  .mk #press h2 { display: none !important; }

  /* Thumbnails stay - they are the point of the film section - but at a
     size that does not give each card its own page. */
  .mk .films-grid { gap: 8pt !important; }
  .mk .film-thumb-wrap { aspect-ratio: 16 / 9 !important; }

  /* Nothing should straddle a page break mid-thought. */
  .mk section,
  .mk .film-card,
  .mk .prize-col { break-inside: avoid; page-break-inside: avoid; }

  /* A URL is unusable on paper unless it is written out. Applied only to
     links inside the body copy - doing it to every link would print the
     full href after all six film titles. */
  .mk .section-inner p a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  /* WAS a[href^="mailto"], printing the address after the button. There
     are no mailto links left on these pages - the addresses were removed
     - so that selector now matches nothing, and a printed page reading
     "Start a conversation" with no destination is a dead end on paper.
     attr(href) is no use either: the link is relative, so it would print
     "/contact" without the domain. Written out in full instead. */
  .mk .contact-row a[href*="/contact"]::after {
    content: " (focusonability.com.au/contact)";
    font-size: 9pt;
    color: #555;
  }

  @page { margin: 14mm; }
}