/* Danipa fallback one-page site: plain CSS, no build step. System font stacks by choice, so the
   fallback has no font files to ship (the live site uses DM Sans, Fraunces and JetBrains Mono).
   Colours are the brand tokens from src/app/globals.css. Contrast rules:
   - text on --orange is always --ink, never white (white on #FF6B00 is 2.9:1, fails WCAG AA);
   - on light surfaces, links are --ink and underlined (the darker brand orange #D55400 on bone is
     about 3.6:1, too low for body text). */
:root {
  --ink: #0a1930;
  --ink-deeper: #060f1f;
  --bone: #f4efe5;
  --paper: #faf6ee;
  --cream: #f8f1e2;
  --line-bone: #c9bfaa;
  --muted-ink: #6e6452;
  --muted-cream: #9aa0ae;
  --orange: #ff6b00;
  --orange-2: #d55400;
  --orange-3: #ffa45b;
  --cream-88: rgba(248, 241, 226, 0.88);
  --cream-82: rgba(248, 241, 226, 0.82);
  --hairline-dark: rgba(255, 255, 255, 0.12);
  --panel-dark: rgba(255, 255, 255, 0.04);
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
}

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

a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, .button:focus-visible {
  outline: 3px solid var(--orange-3);
  outline-offset: 3px;
  border-radius: 2px;
}
.light a:focus-visible { outline-color: var(--ink); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  background: var(--orange);
  color: var(--ink);
  padding: 8px 14px;
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 24px; } }

/* Header */
.site-header { background: var(--ink); color: var(--cream); border-bottom: 1px solid var(--hairline-dark); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-top: 6px; padding-bottom: 6px; }
@media (min-width: 640px) { .site-header .wrap { gap: 12px 24px; padding-top: 14px; padding-bottom: 14px; } }
.brand img { width: 112px; }
@media (min-width: 640px) { .brand img { width: 150px; } }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 14px; }
@media (min-width: 640px) { .site-nav ul { gap: 4px 20px; } }
.site-nav a { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--cream); padding: 12px 0; display: inline-block; }
.site-nav a:hover { color: var(--orange-3); text-decoration: underline; }

/* Sections */
.dark { background: var(--ink); color: var(--cream); }
.dark.deeper { background: var(--ink-deeper); }
.light { background: var(--bone); color: var(--ink); }
.light.paper { background: var(--paper); }
section { padding: 64px 0; }
section.hero { padding: 32px 0 48px; }
@media (min-width: 768px) { section { padding: 88px 0; } }
@media (min-width: 768px) { section.hero { padding: 88px 0; } }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none; }
.dark .eyebrow { color: var(--muted-cream); }
.light .eyebrow { color: var(--muted-ink); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(2.25rem, 8vw, 4.75rem); margin-top: 16px; max-width: 16ch; }
@media (min-width: 768px) { h1 { margin-top: 24px; } }
h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); margin-top: 14px; max-width: 24ch; }
h3 { font-size: 1.3rem; }
em.accent { font-style: italic; }
.light em.accent { color: var(--orange-2); }
.dark em.accent { color: var(--orange-3); }
.story { max-width: 58ch; margin-top: 16px; }
.story p { margin: 0 0 12px; font-size: 1.05rem; }
.dark .story p { color: var(--cream-88); }

.status { margin: 12px 0 0; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--orange-3); }
.lede { font-size: 1.05rem; max-width: 58ch; margin: 16px 0 0; }
@media (min-width: 768px) { .lede { margin-top: 24px; } }
.dark .lede { color: var(--cream-88); }
.sub { max-width: 58ch; margin: 14px 0 0; font-size: 0.95rem; }
.dark .sub { color: var(--cream-82); }
.light .sub, .light .lede { color: var(--muted-ink); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (min-width: 768px) { .cta-row { margin-top: 32px; } }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  background: var(--orange);
  color: var(--ink);
  border: 1px solid var(--orange);
}
.button:hover { background: var(--orange-3); border-color: var(--orange-3); }

.notice { margin: 14px 0 0; max-width: 58ch; font-size: 0.85rem; }
.dark .notice { color: var(--cream-82); }

.company-tag {
  display: inline-block;
  margin-top: 28px;
  padding: 6px 14px;
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-88);
}

/* Card grids */
.grid { display: grid; grid-template-columns: 1fr; margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-bone); border-left: 1px solid var(--line-bone); }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.grid li { border-right: 1px solid var(--line-bone); border-bottom: 1px solid var(--line-bone); background: var(--bone); padding: 28px; position: relative; }
.grid li::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 1px; background: var(--orange); }
.grid .ix { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--muted-ink); margin: 0 0 10px; }
.grid p { margin: 12px 0 0; color: var(--muted-ink); font-size: 0.95rem; }

/* 404 ways forward: the whole card is the link */
.grid.ways a { display: block; margin: -28px; padding: 28px; color: inherit; text-decoration: none; }
.grid.ways a:hover h2, .grid.ways a:focus-visible h2 { text-decoration: underline; text-underline-offset: 4px; }
.grid.ways h2 { font-size: 1.3rem; margin-top: 0; max-width: none; display: flex; justify-content: space-between; gap: 8px; }
.grid.ways h2 span { color: var(--orange); }

/* Contact */
.contact-card { margin-top: 32px; padding: 28px; border: 1px solid var(--hairline-dark); border-radius: 6px; background: var(--panel-dark); max-width: 40rem; }
.contact-card p { margin: 0; }
.contact-card .address { font-family: var(--mono); font-size: 0.95rem; margin-top: 18px; }
.contact-card .address a { color: var(--orange-3); }

/* Footer */
.site-footer { background: var(--ink); color: var(--cream); padding: 40px 0; border-top: 1px solid var(--hairline-dark); font-size: 0.875rem; }
.site-footer p { margin: 0 0 10px; }
.site-footer .meta { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-cream); }
.site-footer ul { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.site-footer a { color: var(--cream); display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a:hover { color: var(--orange-3); }

/* Legal pages */
.legal-body { max-width: 52rem; }
.legal-card { background: var(--bone); border: 1px solid var(--line-bone); padding: 24px; margin-top: 8px; }
@media (min-width: 640px) { .legal-card { padding: 44px; } }
.legal-card .dated { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-ink); margin: 0; }
.legal-card ol { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line-bone); }
.legal-card ol > li { padding: 24px 0; border-bottom: 1px solid var(--line-bone); }
.legal-card h2 { font-size: 1.35rem; margin: 0; max-width: none; }
.legal-card p { margin: 12px 0 0; }
.legal-card ul { margin: 12px 0 0; padding-left: 1.25rem; }
.legal-card ul li { margin: 6px 0; }
.legal-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 32px; }
.legal-links a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }