/* nerrdalerrt.com / nerrdalerrt.xyz: NerrdAlerrt LLC's own look, from the final logo (docs/brand/BRAND.md, NerrdAlerrt).
   Near-black, off-white, coral on dark only (deep coral on any light surface). Navy and gold appear only inside the
   Lanyardly mark in its card (Kyle, 19 Oct 2026). Contrast (WCAG 2.x) is noted next to each text color. */
:root {
  --bg: #0E0F12;
  --line: #2A2D34;
  --text: #F4F1EA;           /* 17.0:1 on --bg */
  --muted: #A6A39B;          /* 7.6:1 on --bg */
  --coral: #FF5A36;          /* 6.2:1 on --bg; never on a light surface */
  --coral-deep: #C23A1A;     /* text and small marks on light: 4.76:1 on #F4F1EA */
  --card: #15171C;           /* an app's card (BRAND.md, Kyle 19 Oct 2026) */
  --coral-hover: #FF7556;    /* the coral button's hover: near-black on it 7.24:1 */
  --clear: 30px;             /* the mark's clear space at 96 px: 31 % of its height (BRAND.md) */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
main { flex: 1; }
img { max-width: 100%; }
a { color: var(--text); text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--coral); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--coral); color: var(--bg);
  padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }

/* the trademark mark (BRAND.md): small, raised, regular weight, the word's color at 70 % */
.tm { font-size: .4em; font-weight: 400; line-height: 0; vertical-align: baseline; position: relative; top: -1.15em;
  margin-left: .08em; opacity: .7; letter-spacing: 0; font-family: var(--body); }

/* ---- header: the symbol */
.site-header { border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.home { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.home img { display: block; width: 27px; height: auto; }
.nav { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 500; text-decoration: none; }

/* ---- hero: the C1 mark, then "NerrdAlerrt™ LLC" as the heading */
.hero { padding: clamp(56px, 11vw, 120px) 0 clamp(44px, 8vw, 88px); border-bottom: 1px solid var(--line); }
/* the mark keeps its clear space on every side: the gap to the heading, and from the page edge on a phone */
.symbol { display: block; width: auto; height: 96px; margin-inline-start: max(0px, calc(var(--clear) - var(--gutter))); }
.title { margin-top: var(--clear); font-size: clamp(40px, 8vw, 72px); }
.notfound { font-size: clamp(48px, 11vw, 112px); }
.tagline { margin-top: clamp(22px, 3.5vw, 34px); font-size: clamp(18px, 2.4vw, 22px); color: var(--muted); max-width: 32em; }

/* ---- our apps: one card per app (add an <li> to the list) */
.section { padding: clamp(40px, 7vw, 72px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.label { font: 700 14px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--coral); margin-bottom: 20px; }
.apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.app-card { display: grid; gap: 20px; align-content: start; height: 100%; padding: 24px; border-radius: 16px; }
.app-card .icon { width: 72px; height: 72px; border-radius: 16px; }
.app-card h3 { font-size: 30px; }
.app-card p { margin-top: 8px; }
.app-card .btn { justify-self: start; }

/* the card is NerrdAlerrt's; the app's own colors stay inside its mark (Kyle, 19 Oct 2026) */
.app-card { border: 1px solid var(--line); background: var(--card); }
.app-card p { color: var(--muted); }               /* 7.1:1 on --card */
.app-card .btn { background: var(--coral); color: var(--bg); }   /* 6.2:1 */
.app-card .btn:hover { background: var(--coral-hover); color: var(--bg); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: 999px; font: 700 16px/1 var(--body); text-decoration: none; transition: background-color .15s ease; }

/* ---- contact */
.contact p { color: var(--muted); }
.contact .email { display: inline-block; margin-top: 6px; color: var(--text); font: 800 clamp(22px, 3.4vw, 30px)/1.2 var(--display);
  letter-spacing: -0.02em; overflow-wrap: anywhere; }

/* ---- footer */
.site-footer { padding: 28px 0 36px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot { display: grid; gap: 8px; }
.soon { white-space: nowrap; }

@media (min-width: 760px) {
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-card { padding: 32px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }