@charset "utf-8";

/* ==========================================================================
   RUNT — youbettarun.com

   This is a film poster, not a product page. The rules it obeys, from
   Graphics/style-guide.md:

     "Set it too big, then go bigger. If a headline looks comfortable it is
      too small."
     "Two sizes, not five. One huge thing and one small thing. Middling
      sizes are where the energy dies."
     "The punk is not in applied graphic devices; it is in the scale, the
      confidence and the dirt."

   So: no hairline feature tables, no middling type, no polite margins.
   Full-bleed bands, enormous capitals, and grain you can actually see.
   ========================================================================== */

@font-face {
  font-family: "Archivo Black";
  src: url("../fonts/archivo-black-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2010-2027, U+2030-205E, U+20AC, U+2122;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --bg: #fdf2e0;
  --ink: #141312;
  --ink-muted: #6b6259;
  --hairline: #e4d8c4;

  /* Fixed poster colours — these do NOT follow the theme. A black panel is
     black on cream paper too; that is what a one-sheet does. */
  --void: #0b0b0c;
  --bone: #f6e3c6;
  --bone-muted: #8c837a;
  --pink: #fa1478;
  --on-pink: #141312;

  --grain-img: url("../img/grain-light.png");
  --grain-opacity: 0.11;

  --display: "Archivo Black", "Helvetica Neue", Impact, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 32rem;
  --wide: 80rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0c;
    --ink: #f6e3c6;
    --ink-muted: #8c837a;
    --hairline: #2a2724;

    --grain-img: url("../img/grain-dark.png");
    --grain-opacity: 0.09;
  }
}

/* --- Reset -------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* --- Grain -------------------------------------------------------------- */

/* Every band is printed on the same sheet, so the grain layer belongs to the
   band, above its ground and below its content. Static, never animated. */
.band { position: relative; isolation: isolate; }

.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--grain-img);
  background-repeat: repeat;
  background-size: 96px 96px;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.band > * { position: relative; z-index: 1; }

/* --- Bands -------------------------------------------------------------- */

.band {
  padding-block: clamp(4rem, 11vw, 9rem);
  padding-inline: var(--gutter);
}

.band--void {
  background: var(--void);
  color: var(--bone);
  --grain-img: url("../img/grain-dark.png");
  --grain-opacity: 0.1;
  --ink-muted: var(--bone-muted);
}

.band--pink {
  background: var(--pink);
  color: var(--on-pink);
  /* Ink on pink is 4.80:1 — a pass, but not a generous one, so the small
     text on this band gets full ink rather than a muted tint (that was
     4.16:1 and failed AA body), and the grain is eased off so it cannot
     nibble at the margin. Cream on pink is 3.49:1 and never appears. */
  --grain-opacity: 0.12;
  --ink-muted: var(--on-pink);
}

.band--flush { padding-block: 0; padding-inline: 0; }

.inner {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
}

/* --- Type --------------------------------------------------------------- */

h1, h2, h3, .shout, .statement {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  /* Flat and matte. No gloss, bevel, glow or drop shadow, ever. */
}

/* The one enormous thing. Tracking tight but never touching. */
.shout {
  font-size: clamp(2.75rem, 11.5vw, 10rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.statement {
  font-size: clamp(2.25rem, 7.5vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
}

/* …and the one small thing. Nothing lives in between. */
.small {
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: var(--measure);
  color: var(--ink-muted);
  margin: 0;
}

.label {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.25rem;
}

a { color: inherit; }

a:focus-visible,
:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pink);
  color: var(--on-pink);
  padding: 0.75rem 1rem;
  z-index: 10;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* --- Hero --------------------------------------------------------------- */

.hero { padding: 0; background: var(--void); }

/* The one-sheet, edge to edge. It is the page's first and loudest move, so
   nothing is cropped off it and nothing is laid over it. */
.hero img {
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  margin-inline: auto;
}

/* --- The pitch ---------------------------------------------------------- */

.pitch .shout { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.pitch .small { font-size: 1.1875rem; }

.badge-slot {
  display: inline-block;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1rem 1.6rem;
  border: 3px solid currentColor;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
  letter-spacing: 0.02em;
}

/* --- Statement list ----------------------------------------------------- */

/* One enormous line, then a drop straight to small. No boxes, no rules,
   no middle. */
.says { list-style: none; margin: 0; padding: 0; }

.says li + li { margin-top: clamp(2.75rem, 7vw, 5rem); }

.says .statement { margin-bottom: 0.75rem; }

.says .statement em {
  font-style: normal;
  color: var(--pink);
}

/* --- Packs -------------------------------------------------------------- */

.packs {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.pack img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.pack h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 1.1rem 0 0.5rem;
}

.pack p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.also {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 46rem;
}

.also strong { font-family: var(--display); font-weight: 400; }

/* --- The claims band ---------------------------------------------------- */

.claims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 52rem) {
  .claims { grid-template-columns: repeat(3, 1fr); }
}

.claims .statement { font-size: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: 0.6rem; }

/* --- Ad slot ------------------------------------------------------------ */

.spot {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  border: 3px solid currentColor;
  aspect-ratio: 16 / 9;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 2rem;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(0.9375rem, 2vw, 1.25rem);
  letter-spacing: 0.02em;
}

/* --- Links that look like links ----------------------------------------- */

.linkrow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  margin: 0;
  padding: 0;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.linkrow a {
  display: inline-block;
  padding-block: 0.5rem;
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.2em;
}

.linkrow a:hover,
.linkrow a:focus-visible {
  background: var(--pink);
  color: var(--on-pink);
  text-decoration-color: transparent;
}

/* --- Footer ------------------------------------------------------------- */

.foot { background: var(--void); color: var(--bone); --ink-muted: var(--bone-muted); }
.foot .shout { font-size: clamp(1.75rem, 8vw, 6rem); word-break: break-word; }
.foot .linkrow { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.foot .small { margin-top: 1.5rem; }

/* --- Prose pages -------------------------------------------------------- */

/* Privacy and support have to be readable — they are the two pages Apple
   reads and the two with Alan's name on them. They get the poster masthead
   and the grain, then get out of the way. */

.masthead {
  background: var(--void);
  color: var(--bone);
  --grain-img: url("../img/grain-dark.png");
  --grain-opacity: 0.1;
  --ink-muted: var(--bone-muted);
  padding-block: clamp(2.5rem, 7vw, 5rem);
  padding-inline: var(--gutter);
}

/* Line the masthead up with the prose column beneath it. */
.masthead .inner { max-width: calc(var(--measure) + 14rem); margin-inline: 0; }
.masthead .lede { max-width: 36rem; }

.masthead a {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.2em;
  display: inline-block;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  padding-block: 0.35rem;
}

.masthead a:hover,
.masthead a:focus-visible { background: var(--pink); color: var(--on-pink); }

.masthead .shout { font-size: clamp(2.5rem, 8.5vw, 6.5rem); }
.masthead .small { margin-top: 1.5rem; color: var(--bone-muted); }

.prose {
  padding-inline: var(--gutter);
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4rem, 9vw, 7rem);
  max-width: calc(var(--measure) + var(--gutter) * 2 + 14rem);
  margin-inline: auto;
}

.prose h2 {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: clamp(3rem, 7vw, 4.5rem) 0 1.25rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 3px solid var(--pink);
}

.prose h2:first-of-type { margin-top: clamp(1.5rem, 3vw, 2rem); }

.prose h3 {
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  margin: 2.25rem 0 0.5rem;
}

.prose p, .prose ul, .prose dd { max-width: var(--measure); }
.prose p { margin: 0 0 1.1em; }
.prose ul { padding-left: 1.1rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.5em; }

.prose .lede {
  font-size: clamp(1.125rem, 2.2vw, 1.3125rem);
  line-height: 1.5;
  max-width: 36rem;
}

.prose dt {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  margin-top: 2rem;
}

.prose dd { margin: 0.5rem 0 0; color: var(--ink-muted); }

.prose a {
  text-decoration: underline;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.18em;
}

.prose a:hover,
.prose a:focus-visible {
  background: var(--pink);
  color: var(--on-pink);
  text-decoration-color: transparent;
}

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

/* --- 404 ---------------------------------------------------------------- */

.oops {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}