/* =========================================================================
   Frege — landing page
   Aesthetic: a real CLI. Departure Mono. Black text, BLUE links. Wall to
   wall — no centered column, no void margins. Output reflows to the viewport
   so there is never a horizontal scrollbar. Links are numbered; press a
   digit to follow one (see nav.js). Reference: terminal / sandbox mono look.
   ========================================================================= */

@font-face {
  font-family: "Departure Mono";
  src: url("fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --fg:    #000000;   /* body ink — true black */
  --fg-2:  #6b6b6b;   /* dim: comments, paths, secondary */
  --fg-3:  #9a9a9a;   /* faintest */
  --bg:    #ffffff;   /* true white */
  --line:  #e2e2e2;   /* hairline rules */
  --link:  #0033cc;   /* link blue */
  --link-bg:#0033cc;  /* hover fill */

  --mono: "Departure Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad:  clamp(14px, 3vw, 32px);   /* edge gutter, small — wall to wall */
  --fs:   16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs);
  line-height: 1.55;
  -webkit-font-smoothing: none;   /* keep Departure Mono pixel crispness */
  font-smooth: never;
  letter-spacing: 0;
  overflow-x: hidden;             /* belt-and-suspenders: never scroll sideways */
}

::selection { background: #000; color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── links: blue, numbered ── */
.lnk {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lnk:hover, .lnk:focus { background: var(--link-bg); color: #fff; text-decoration: none; }
.lnk.strong { font-size: 1.05em; }
/* the [n] badge injected before each nav link */
.lnk__num {
  color: var(--fg-2);
  text-decoration: none;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.lnk:hover .lnk__num, .lnk:focus .lnk__num { color: #fff; }
/* the link currently targeted by a typed digit */
.lnk.is-armed { background: var(--link-bg); color: #fff; text-decoration: none; }
.lnk.is-armed .lnk__num { color: #fff; }

.skip {
  position: absolute; left: 8px; top: -40px;
  background: #000; color: #fff; padding: 6px 10px; text-decoration: none; z-index: 10;
}
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ── top status line — full width ── */
.bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.bar__dots { letter-spacing: 2px; color: var(--fg); }
.bar__title { flex: 1 1 auto; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .lnk { white-space: nowrap; }

/* ── the screen — wall to wall, just an edge gutter ── */
.screen { padding: 22px var(--pad) 48px; max-width: none; }

/* command line: prompt + typed command. wraps if needed. */
.line { margin: 0 0 4px; word-break: break-word; }
.prompt { color: var(--fg); }
.path   { color: var(--fg-2); }
.sigil  { color: var(--fg); margin: 0 8px 0 2px; }
.cmd    { color: var(--fg); }

/* output paragraphs — always wrap, full width, no scroll */
.out {
  margin: 6px 0 20px;
  line-height: 1.55;
  color: var(--fg);
  max-width: 92ch;          /* readable measure, but content still reflows */
}
.out.wrap { white-space: normal; }
.muted { color: var(--fg-2); }
.cmt   { color: var(--fg-2); }

/* a highlighted "stdout" headline line */
.say { margin: 14px 0 12px; font-size: clamp(15px, 2.6vw, 19px); }

/* hero: big Departure Mono. fills the width, reflows on small screens. */
.hero-h {
  margin: 10px 0 4px;
  font-weight: 400;            /* Departure Mono is single-weight */
  font-size: clamp(40px, 12vw, 132px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.hero-tag {
  margin: 0 0 18px;
  font-size: clamp(18px, 4vw, 34px);
  line-height: 1.1;
  color: var(--fg);
}

/* bullet list (problem.txt) */
.bul { list-style: none; margin: 8px 0 20px; padding: 0; max-width: 92ch; }
.bul li { padding-left: 1.4em; text-indent: -1.4em; margin: 0 0 4px; }
.bul li::before { content: "- "; color: var(--fg-2); }

/* ── reflowing label/value rows (replaces space-aligned pre output) ── */
.rows { margin: 8px 0 20px; max-width: 92ch; }
.rows > div {
  display: grid;
  grid-template-columns: 13ch 1fr;
  gap: 4px 1.5ch;
  padding: 1px 0;
}
.rows dt { color: var(--fg); margin: 0; }
.rows dd { color: var(--fg); margin: 0; }
.rows.steps > div { grid-template-columns: 11ch 1fr; }
.rows.acl > div   { grid-template-columns: 1fr auto; }
.rows.acl dt { color: var(--fg); }
/* policy rows: wider label gutter, generous value measure, comfortable spacing */
.rows.policy { max-width: 100ch; }
.rows.policy > div { grid-template-columns: 22ch 1fr; gap: 6px 2ch; padding: 4px 0; align-items: start; }
.rows.policy dt { color: var(--fg-2); }
.rows.policy dd { color: var(--fg); }

/* granted / denied — monochrome; denied struck through, not red */
.ok { color: var(--fg); }
.no { color: var(--fg); text-decoration: line-through; text-decoration-thickness: 1px; }

/* on narrow screens the rows stack: label above value, still no scroll */
@media (max-width: 560px) {
  .rows > div, .rows.steps > div, .rows.acl > div, .rows.policy > div {
    grid-template-columns: 1fr;
    gap: 2px;
    margin-bottom: 10px;
  }
  .rows dt { color: var(--fg); }
  .rows dd { color: var(--fg-2); padding-left: 1.4ch; }
  .rows.acl dd, .rows.policy dd { padding-left: 1.4ch; }
  .rows.policy dt { color: var(--fg); }
}

/* dashed rule between command blocks — full bleed within gutter */
.rule { border: 0; border-top: 1px dashed var(--line); margin: 2px 0 18px; }

/* blinking block cursor */
.cursor { display: inline-block; margin-left: 2px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ── footer ── */
.foot { padding-top: 8px; border-top: 1px solid var(--line); }
.links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 14px; }
.hint { color: var(--fg-3); font-size: 12px; margin: 0; }
.hint b { color: var(--fg-2); font-weight: 400; }

/* top link index — sits right under the status bar */
.links--top { margin: 4px 0 8px; }
.hint--top { margin: 0 0 4px; }

/* the final pilot CTA — give it room and weight */
.cta-big { margin: 16px 0 6px; font-size: clamp(16px, 2.4vw, 21px); }
.cta-big .lnk.strong { font-size: 1em; }

@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

@media print {
  .bar .lnk, .cursor, .hint { display: none; }
  .lnk { color: #000; }
}