@font-face { font-family: "Anton"; src: url("assets/Anton-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

  /* Palette: App/TitleScreen.swift and App/SettingsScreen.swift */
  :root {
    --ground: #0C0C0D;      /* title screen ground */
    --ground-2: #1A1B1E;    /* settings ground */
    --panel: #26282C;       /* settings row panel */
    --amber: #FFB000;       /* selected item */
    --amber-dim: #C49440;   /* section heading */
    --amber-deep: #786846;  /* settings footer */
    --cream: #F6F6F2;       /* unselected item */
    --ink: #E8E9EC;         /* settings bright ink */
    --quiet: #8C8F96;       /* settings quiet ink */
    --dim: #808084;         /* dim item */
    --footer: #5C5C60;      /* title footer */
    --display: "Anton", "Impact", "Arial Narrow Bold", "Helvetica Neue", sans-serif;
    --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  }
  /* The title screen's reference frame is 960x600; one menu unit is 1/12 of height. Capped so a tall
     window does not stretch the hero past a 900pt desktop frame. */
  :root { --frame: min(100vh, 900px); --unit: calc(var(--frame) / 12); }
  @media (max-width: 719px) { :root { --frame: min(100vh, 720px); } }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--ground); color: var(--cream); font-family: var(--body); }
  a { color: inherit; text-decoration: none; }

  /* Halftone: white at 5.5% alpha, staggered rows, spacing .625% and radius .25% of width (TitleScreen.dot*) */
  .halftone {
    background-color: var(--ground);
    background-image:
      radial-gradient(circle at 25% 25%, rgba(255,255,255,0.055) 0.25vw, transparent 0.27vw),
      radial-gradient(circle at 75% 75%, rgba(255,255,255,0.055) 0.25vw, transparent 0.27vw);
    background-size: 1.25vw 1.25vw;
  }

  /* HERO — the title screen's proportions: lockup 62% of width, top at 7% of height, one unit = 1/12 height */
  .hero {
    min-height: var(--frame);
    display: flex; flex-direction: column; align-items: center;
    padding: calc(var(--frame) * 0.07) 16px calc(var(--unit) * 1.2);
    position: relative;
  }
  .hero img.lockup { width: 62vw; max-width: 1200px; height: auto; display: block; }
  @media (max-width: 719px) { .hero img.lockup { width: 84vw; } }
  /* The lockup asset carries empty space below its rule (the rule sits at 0.81 of the asset's height),
     so the column hangs off the rule rather than off the asset's box, as TitleScreen.ruleCentreOfLockupHeight does. */
  .hero .tag {
    margin-top: calc(var(--unit) * 0.35 - 62vw * 0.07);
    font-family: var(--body);
    font-size: clamp(14px, 1.5vw, 20px);
    letter-spacing: 0.06em;
    color: var(--quiet);
    text-align: center;
    max-width: 44ch;
  }
  .menu {
    list-style: none; margin: calc(var(--unit) * 0.5) 0 0; padding: 0;
    display: flex; flex-direction: column; align-items: center;
  }
  .menu li { margin: 0 0 calc(var(--unit) - 1.4em); }
  .menu a {
    font-family: var(--display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cream);
    font-size: clamp(22px, calc(var(--frame) * 0.0433), 42px);
    position: relative;
    padding-left: 0.9em;
  }
  .menu li:first-child a { font-size: clamp(26px, calc(var(--frame) * 0.05), 50px); color: var(--amber); }
  .menu a::before { content: "\203A"; position: absolute; left: 0; color: var(--amber); opacity: 0; }
  .menu a:hover::before, .menu li:first-child a::before { opacity: 1; }
  .menu a:hover { color: var(--amber); }
  .hero .foot {
    position: absolute; bottom: calc(var(--unit) * 0.4); left: 0; right: 0;
    text-align: center;
    font-size: clamp(10px, calc(var(--frame) * 0.0183), 13px);
    color: var(--footer);
    letter-spacing: 0.04em;
    padding: 0 16px;
  }

  /* SECTIONS — the settings screen: ground 1A1B1E, square panels 26282C, 60/960 margins */
  section { background: var(--ground-2); padding: calc(var(--unit) * 1.1) 6.25vw; }
  section + section { border-top: 1px solid #000; }
  .kicker {
    font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--amber-dim); font-size: 15px; margin: 0 0 0.6em;
  }
  h2 {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(30px, 4.6vw, 56px); line-height: 1; letter-spacing: 0.02em;
    color: var(--ink); margin: 0 0 0.6em;
  }
  p.lead { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; color: var(--ink); max-width: 62ch; margin: 0 0 2em; }
  .rows { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
  .row {
    background: var(--panel);
    padding: 18px 24px;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
  }
  @media (min-width: 720px) { .row { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: baseline; } }
  .row .name { font-weight: 700; color: var(--ink); font-size: 16.5px; }
  .row .desc { color: var(--quiet); font-size: 15px; line-height: 1.45; }

  /* Calendar badge pair, from App/CampaignCalendarBadge.swift */
  .calendar { display: flex; align-items: center; gap: 20px; margin: 2em 0 0; }
  .leaf {
    width: 68px; height: 78px; background: var(--ground); border-radius: 4px;
    border: 1px solid rgba(255,176,0,0.8); display: flex; flex-direction: column; align-items: center; overflow: hidden;
  }
  .leaf .m { width: 100%; height: 21px; background: var(--amber); color: var(--ground);
    font-size: 10px; font-weight: 900; letter-spacing: 1.5px; text-align: center; line-height: 21px; }
  .leaf .d { font-size: 29px; font-weight: 700; color: var(--cream); padding-top: 2px; line-height: 1; }
  .leaf .y { font-size: 10px; font-weight: 600; color: var(--dim); padding-bottom: 5px; margin-top: auto; }
  .calendar .arrow { color: var(--amber); font-size: 22px; font-weight: 600; }
  .calendar .where { color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: 2px; margin-left: 8px; }

  .platforms { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 0; }
  .platforms li {
    background: var(--panel); padding: 14px 20px; color: var(--ink); font-weight: 700; font-size: 15px;
  }
  .platforms li span { display: block; color: var(--quiet); font-weight: 400; font-size: 13px; margin-top: 2px; }

  footer {
    background: var(--ground); padding: 6vh 6.25vw 8vh; color: var(--amber-deep);
    font-size: 12.3px; line-height: 1.6;
  }
  footer p { margin: 0 0 0.6em; max-width: 70ch; }
  footer .mark { display: flex; align-items: center; gap: 14px; margin-bottom: 2em; }
  footer .mark img { width: 44px; height: 44px; border-radius: 9px; }
  footer .mark span { color: var(--footer); letter-spacing: 0.04em; }

  /* Approved Mac launch preview, 22 October 2026. */
  :root { --quiet: #ADB0B7; }
  .hero { min-height: min(100svh, 900px); padding-bottom: 48px; }
  .hero img.lockup { max-width: 900px; }
  .hero .tag { max-width: 74ch; margin-top: 8px; letter-spacing: 0; line-height: 1.5; }
  .tag strong { display: block; margin-bottom: 14px; color: var(--cream); font-family: var(--display); font-size: clamp(25px, 2.5vw, 34px); font-weight: 400; }
  .menu { gap: 24px; margin-top: 20px; }
  .menu li { margin: 0; text-align: center; }
  .menu a, .menu li:first-child a { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: 0.02em; }
  .launch-strip { text-align: center; padding: 26px 24px 38px; background: var(--ground-2); }
  .launch-strip strong { display: block; color: var(--amber); font: 400 19px var(--display); margin-bottom: 16px; }
  .launch-strip p { color: var(--quiet); font-size: 17px; line-height: 1.5; margin: 0; }
  .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .gallery figure { margin: 0; min-width: 0; }
  .gallery img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; }
  .gallery figcaption { padding-top: 14px; }
  .gallery strong { color: var(--amber); font: 400 20px var(--display); }
  .gallery p, .gallery-note { color: var(--quiet); font-size: 16px; line-height: 1.5; margin: 12px 0 0; }
  .gallery-note { margin-top: 30px; }
  .row .desc { font-size: 17px; }
  .row .name { font-size: 18px; }
  .platforms li { flex: 1 1 250px; padding: 24px; font-size: 22px; }
  .platforms li span { margin-top: 12px; font-size: 15px; }
  footer .mark span { font: 400 20px var(--display); color: var(--cream); }
  footer nav { margin: 8px 0 28px; display: flex; flex-wrap: wrap; gap: 20px; }
  footer nav a { color: var(--quiet); font-size: 15px; }
  footer p { color: var(--quiet); }
  a:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; }
  a:hover { color: var(--amber); }
  @media (max-width: 719px) {
    .hero { min-height: auto; padding-top: 40px; padding-bottom: 48px; }
    .hero .tag { margin-top: 4px; max-width: 30ch; font-size: 17px; }
    .hero .tag strong { font-size: 28px; }
    .menu { gap: 24px; margin-top: 24px; }
    section { padding: 48px 6.25vw; }
    .gallery { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .row { padding: 20px; gap: 12px; }
    .halftone { background-size: 15px 15px; background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,.055) 3px, transparent 3.3px),radial-gradient(circle at 75% 75%, rgba(255,255,255,.055) 3px, transparent 3.3px); }
  }