/* PENNANT site: one stylesheet for index.html, support.html and privacy.html.
   Floodlight look: night ground, cream ink, coral signal. No build step. */

:root {
  color-scheme: dark;
  --ground: #0a0c10;
  --panel: #10141a;
  --panel-2: #0d1015;
  --line: #232a34;
  --edge: rgba(241, 234, 217, 0.12);
  --ink: #f1ead9;
  --ink-2: #c9c2b2;
  --dim: #a39c8c;
  --coral: #ff5c38;
  --coral-soft: rgba(255, 92, 56, 0.12);
  --focus: #ffd2c4;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 68ch;
  --gutter: 16px;
  --radius: 12px;
}

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

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

body {
  margin: 0;
  background-color: var(--ground);
  background-image: radial-gradient(1100px 520px at 70% -10%, rgba(190, 225, 255, 0.07), transparent 62%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

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

a {
  color: var(--ink);
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--coral); }

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--ground);
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

/* ---- header ---- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(10, 12, 16, 0.92);
}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.mark { width: 26px; height: 26px; flex: none; }
.wordmark {
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  font-size: 18px;
}
.nav {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  display: inline-block;
  padding: 10px 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink-2);
  border-radius: 8px;
}
.nav a:hover { color: var(--ink); background: var(--panel); }
.nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--coral);
  border-radius: 0;
}

/* ---- type ---- */
h1, h2, h3 {
  line-height: 1.2;
  margin: 0;
  font-weight: 800;
}
h1 { font-size: clamp(32px, 7vw, 52px); letter-spacing: -0.01em; }
h2 { font-size: clamp(23px, 4vw, 30px); margin-top: 56px; }
h3 { font-size: 19px; margin-top: 32px; font-weight: 700; }
p { margin: 14px 0 0; }
ul, ol { margin: 14px 0 0; padding-left: 1.3em; }
li { margin-top: 8px; }
li::marker { color: var(--coral); }
strong { font-weight: 700; color: var(--ink); }
code, .path {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 0.9em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  overflow-wrap: anywhere;
}
.email { overflow-wrap: anywhere; }

.eyebrow {
  display: block;
  color: var(--coral);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lede {
  font-size: clamp(18px, 2.4vw, 21px);
  color: var(--ink-2);
  max-width: 60ch;
}
.muted { color: var(--dim); }
.small { font-size: 15px; }

/* ---- page frame ---- */
main { display: block; padding-bottom: 72px; }
.page-head { padding: 48px 0 8px; }
.page-head p { color: var(--dim); }
.prose { max-width: var(--measure); }
.prose h2 { scroll-margin-top: 16px; }

/* ---- hero (index) ---- */
.hero { padding: 64px 0 24px; }
.hero h1 { margin-top: 14px; }
.hero-word {
  display: block;
  font-size: clamp(48px, 13vw, 104px);
  font-weight: 800;
  font-stretch: 115%;
  letter-spacing: 0.08em;
  line-height: 1;
}
.hero-sub {
  display: block;
  margin-top: 14px;
  font-size: clamp(14px, 2.6vw, 20px);
  font-weight: 600;
  letter-spacing: 0.38em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.hero .lede { margin-top: 28px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 32px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 10px;
  background: var(--coral);
  color: var(--ground);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.btn:hover { color: var(--ground); background: #ff7656; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--edge);
}
.btn-ghost:hover { background: var(--panel); color: var(--ink); }
.note {
  font-size: 15px;
  color: var(--dim);
}

/* ---- cards and panels ---- */
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 24px;
}
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
}
.card h3 { margin-top: 0; }
.card p { color: var(--ink-2); }
.card .kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--coral);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.panel {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
  margin-top: 24px;
}
.panel h2 { margin-top: 0; font-size: 20px; }
.panel ul { padding-left: 1.2em; }

.toc {
  margin-top: 28px;
  padding: 18px 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.toc h2 { margin: 0; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.toc ol { columns: 1; margin-top: 10px; }
@media (min-width: 720px) { .toc ol { columns: 2; column-gap: 40px; } }
.toc li { margin-top: 6px; break-inside: avoid; }

.ways { margin: 20px 0 0; }
.ways dt { font-weight: 800; margin-top: 18px; }
.ways dd { margin: 4px 0 0; color: var(--ink-2); }

.split {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 56px;
}
.split .card h2 { margin-top: 0; }
@media (min-width: 860px) {
  .split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
}

.faq h3 { margin-top: 36px; }

/* ---- footer ---- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 48px;
  color: var(--dim);
  font-size: 15px;
}
.site-footer .foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer .foot-links li { margin: 0; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--coral); }
.site-footer p { margin-top: 14px; max-width: 72ch; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media print {
  :root { --ink: #000; --ink-2: #222; --dim: #444; --coral: #b3341a; }
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .skip, .actions { display: none; }
  a { color: #000; }
  .card, .panel, .toc { border-color: #999; background: none; }
}