/* Creativefuel OS - download page.
   The tokens are lifted VALUE FOR VALUE from macos/Sources/Design.swift, so the
   page and the app are the same object seen twice rather than two things that
   look similar. If a colour changes there, change it here; nothing syncs.
   No external fonts, no CDNs: the CSP is default-src 'self'. */

:root {
  /* Surfaces: four steps of depth, no material anywhere. */
  --surface:          #0A0E17;
  --surface-raised:   #141829;
  --surface-sunken:   #070A11;
  --surface-hover:    #161B2E;
  --surface-selected: #1A2035;

  /* Depth is a hairline, never a shadow. */
  --border:           #1E2538;
  --border-strong:    #2A3550;

  /* Ink, three levels, and the third is genuinely quiet. */
  --ink:              #E2E8F0;
  --ink-2:            #94A3B8;
  --ink-3:            #64748B;

  /* Accent discipline, same rule as the app: amber is the primary action and
     the focus ring, and nothing else. In CONTENT, amber means warning. */
  --accent:           #F0B734;
  --accent-pressed:   #D9A32B;
  --on-accent:        #0A0E17;

  --success:          #69AA72;
  --danger:           #EF4F2B;
  --info:             #5C8BB0;

  --brand-navy:       #18374B;
  --brand-green:      #69AA72;
  --brand-vermilion:  #EF4F2B;

  /* The app's serif is SwiftUI's .serif design. Iowan Old Style is what that
     resolves to on a Mac, so the page reads in the same voice. */
  --font-serif: "Iowan Old Style", Georgia, "Times New Roman", Times, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Seven steps of space and four radii. Only these. */
  --s-xs: 4px; --s-s: 8px; --s-m: 12px; --s-l: 16px;
  --s-xl: 24px; --s-xxl: 32px; --s-huge: 48px;
  --r-row: 8px; --r-card: 12px; --r-sheet: 16px; --r-hero: 20px;
}

:root { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: 940px; margin: 0 auto; padding: 0 var(--s-xl); }

/* ------------------------------------------------------------------ header */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-l);
  padding: var(--s-xl) var(--s-xl) var(--s-l);
  max-width: 940px; margin: 0 auto;
}
.site-header .lockup { height: 26px; width: auto; }
.site-header .header-note {
  font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
}

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-hero);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(24, 55, 75, 0.85) 0%, rgba(10, 14, 23, 0) 62%),
    radial-gradient(90% 70% at 92% 8%, rgba(240, 183, 52, 0.10) 0%, rgba(10, 14, 23, 0) 55%),
    var(--surface-raised);
  padding: var(--s-huge) var(--s-huge) var(--s-xxl);
  margin-bottom: var(--s-xxl);
}
/* One hairline of amber along the top edge. The app does the same on its
   selected pill: the accent is a stroke, not a fill, until you click it. */
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,183,52,0.55) 22%, rgba(240,183,52,0.55) 55%, transparent);
}

.overline {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 var(--s-l);
}
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-l);
  max-width: 14em;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .sub {
  font-size: 16px; color: var(--ink-2);
  max-width: 34em; margin: 0 0 var(--s-xl);
}

.cta-row { display: flex; align-items: center; gap: var(--s-m); flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: var(--s-s);
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--r-row);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-pressed); }
.btn-quiet {
  background: transparent; color: var(--ink);
  border-color: var(--border-strong);
}
.btn-quiet:hover { background: var(--surface-hover); }
.btn:focus-visible { outline: 2px solid rgba(240,183,52,0.7); outline-offset: 2px; }

/* The live version, read out of the feed itself. A number typed into this page
   by hand is wrong the moment the next release goes out, and being wrong here
   is worse than being absent: it is the page telling somebody they are up to
   date when they are not. */
.version-chip {
  display: inline-flex; align-items: center; gap: var(--s-s);
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--ink-2);
  background: var(--surface-selected);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
}
.version-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); flex: 0 0 auto;
}
.version-chip.is-unknown .dot { background: var(--ink-3); }
.hero .req {
  margin: var(--s-l) 0 0;
  font-size: 13px; color: var(--ink-3);
}

/* ---------------------------------------------------------------- sections */

section { margin-bottom: var(--s-xxl); }
.section-head { margin-bottom: var(--s-xl); }
.section-head h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(24px, 3.2vw, 30px); line-height: 1.2;
  margin: 0 0 var(--s-s);
}
.section-head p { margin: 0; color: var(--ink-2); max-width: 44em; }

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s-xl);
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-l); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-l); }

.step .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-selected);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
  margin-bottom: var(--s-m);
}
.step h3 { font-size: 15px; font-weight: 600; margin: 0 0 var(--s-s); }
.step p { margin: 0; font-size: 14px; color: var(--ink-2); }

kbd {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-row);
  padding: 2px 7px;
  color: var(--ink);
}

/* The update story, which is the reason this page exists at all. */
.update-card {
  background:
    linear-gradient(180deg, rgba(24,55,75,0.35) 0%, rgba(20,24,41,0) 70%),
    var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sheet);
  padding: var(--s-huge) var(--s-xl);
  text-align: center;
}
.update-card h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 var(--s-m);
}
.update-card p { margin: 0 auto; max-width: 40em; color: var(--ink-2); }

/* A note, not an alarm. Amber in content means warning in this system, so the
   Gatekeeper block gets the quiet treatment: it is information about a thing
   that does not happen, and dressing it in warning colours would say the
   opposite of what it means. */
.note {
  border: 1px solid var(--border);
  border-left: 2px solid var(--info);
  border-radius: var(--r-row);
  background: var(--surface-sunken);
  padding: var(--s-l) var(--s-xl);
  font-size: 14px; color: var(--ink-2);
}
.note h3 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 var(--s-s); }
.note p { margin: 0 0 var(--s-m); }
.note p:last-child { margin-bottom: 0; }
.note ol { margin: 0 0 var(--s-m); padding-left: 1.2em; }
.note li { margin-bottom: var(--s-xs); }
.note strong { color: var(--ink); font-weight: 600; }

.reqs dt {
  font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: var(--s-xs);
}
.reqs dd { margin: 0 0 var(--s-l); font-size: 14px; color: var(--ink-2); }
.reqs dd:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ footer */

.site-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-l); flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding: var(--s-xl) 0 var(--s-huge);
  font-size: 13px; color: var(--ink-3);
}
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

@media (max-width: 780px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero { padding: var(--s-xxl) var(--s-xl); }
  .wrap { padding: 0 var(--s-l); }
  .site-header { padding: var(--s-l); }
}