/* Artiflix affiliate landing page.
   Built to Ryan's mockup: near-black ground, Georgia display type, Helvetica text,
   one gold accent. Sizes, tracking and spacing were measured off the mockup at 1x.

   Georgia is on macOS, Windows and iOS. Everywhere else the self-hosted Gelasio takes
   over — it is metric-compatible with Georgia, so line breaks don't move, and the
   browser only downloads it when Georgia is missing. */

@font-face {
  font-family: "Gelasio";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/gelasio-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  --serif: Georgia, "Gelasio", "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --bg: #121212;
  --gold: #e6be6c;
  --gold-hover: #efcd88;

  --text: #fffefa;
  --text-body: #e0e0e0;
  --text-muted: #bdbdbd;
  --text-quiet: #b8b8b8;
  --text-fine: #c2c2c2;
  --text-label: #d6d6d6;

  --line: #353535;
  --rule: #262626;

  --content: 1068px;
  --wide: 1172px;
  --gutter: 24px;

  color-scheme: dark;
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nowrap {
  white-space: nowrap;
}

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

/* Two measures: content sits at 1068px, the hero breaks out to 1172px. */
.wrap,
.wrap-wide {
  width: min(var(--content), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.wrap-wide {
  width: min(var(--wide), 100% - 2 * var(--gutter));
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  padding-top: 14px;
}

.brand {
  flex: none;
  line-height: 0;
}

.brand svg {
  width: 96px;
  height: auto;
}

.tagline {
  margin: 0 0 0 20px;
  font-size: 13px;
  color: var(--text-quiet);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  padding: 9px 0 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.header-cta svg {
  width: 11px;
  height: 11px;
  color: rgba(255, 254, 250, 0.62);
  transition: transform 0.15s ease;
}

.header-cta:hover {
  border-bottom-color: var(--gold);
}

.header-cta:hover svg {
  color: var(--gold);
  transform: translate(2px, -2px);
}

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

.hero {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 60px;
}

.eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

h1,
h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--text);
}

h1 {
  /* Wide enough for "movie night.", too narrow for "Make it a movie" — the mockup's break. */
  max-width: 6em;
  margin-top: 29px;
  font-size: clamp(2.6rem, 5.5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.lede {
  max-width: 387px;
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-body);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  min-height: 50px;
  margin-top: 25px;
  padding: 12px 21px;
  /* Transparent until forced-colors mode, which paints it so the button keeps an edge. */
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--gold);
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.button svg {
  flex: none;
  width: 18px;
  height: 10px;
  margin-top: 3px;
  transition: transform 0.15s ease;
}

.button:hover {
  background: var(--gold-hover);
}

.button:hover svg {
  transform: translateX(3px);
}

.price {
  margin: 13px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-body);
}

.price strong {
  color: var(--text);
}

.fine {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-fine);
}

.apps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  font-size: 11px;
  color: var(--text-label);
}

.apps span {
  margin-right: 2px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.pill:hover {
  border-color: var(--gold);
}

.hero-art {
  /* The mockup sits the art a few px below the copy's center. */
  margin: 14px 0 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.hero-art img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 1px;
}

/* ---------- More after the credits ---------- */

.more {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 86px;
  align-items: center;
  margin-top: 115px;
}

h2 {
  max-width: 8em;
  margin-top: 26px;
  font-size: clamp(1.9rem, 3.1vw, 2.375rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.more-copy {
  max-width: 404px;
  margin: -4px 0 0;
  font-size: 16px;
  line-height: 23px;
  color: var(--text-muted);
}

.rule {
  /* A border, not a background, so it survives forced-colors mode. */
  height: 0;
  margin-top: 61px;
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

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

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  padding: 28px 0 40px;
  font-size: 12px;
  color: var(--text-fine);
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
}

/* ---------- Smaller screens ---------- */

@media (max-width: 900px) {
  .hero,
  .more {
    grid-template-columns: 1fr;
  }

  .hero {
    gap: 48px;
    margin-top: 44px;
  }

  .hero-art {
    margin-top: 0;
  }

  .more {
    gap: 24px;
    margin-top: 80px;
  }

  .more-copy {
    max-width: 34rem;
    margin-top: 0;
  }
}

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

  .tagline {
    display: none;
  }

  /* Long eyebrows wrap on small phones; give them room and an even break. */
  .eyebrow {
    margin-block: -3px;
    line-height: 1.5;
    text-wrap: balance;
  }

  /* Thumb-sized targets on the one layout that's tapped. */
  .header-cta {
    padding-block: 13px 10px;
  }

  .apps {
    gap: 10px;
  }

  .pill {
    min-height: 40px;
    padding: 0 16px;
    font-size: 13px;
  }

  .brand svg {
    width: 80px;
  }

  .lede {
    max-width: none;
  }

  .button {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}