/*
  LastLogoff brand stylesheet.

  This is the single source of the locked visual identity in code. The
  decisions it encodes live in Brand/wordmark.md and WEBSITE.md (D8, decided
  2026-06-10): architectural-quiet, Frank Lloyd Wright-inspired, Cherokee red
  as the sole accent, golden-ratio proportions, the Halmos square as the only
  mark. If you change a value here, change it in the docs too, or the docs stop
  being the source of truth.

  Layered on top of Bootstrap (loaded first in _Layout). We override Bootstrap's
  defaults with brand tokens rather than fighting it component by component.
*/

/* ---- Design tokens -------------------------------------------------------- */
:root {
  /* Palette — Brand/wordmark.md. Bone is the primary surface, sand the quiet
     secondary band, sumi-ink the text, Cherokee red the only accent. */
  --bone: #f7f3eb;
  --sand: #ece4d4;
  --sumi: #1a1a1a;
  --cherokee: #9a3324;
  --cherokee-deep: #7e2a1e;     /* hover/active for accent surfaces */
  --muted: #5c574e;             /* captions: sumi softened toward the bone */

  /* Type scale — amended 2026-06-10 to 13/16/21/34 so both heading steps hit
     phi (34/21 = 1.619, 21/13 = 1.615). Two heading sizes only, one body, one
     caption. Do not add a fifth size. */
  --fs-caption: 0.8125rem;      /* 13px */
  --fs-body:    1rem;           /* 16px */
  --fs-h2:      1.3125rem;      /* 21px */
  --fs-h1:      2.125rem;       /* 34px */

  /* Spacing rhythm — Fibonacci, in px: 8 / 13 / 21 / 34 / 55. */
  --sp-1: 0.5rem;    /* 8  */
  --sp-2: 0.8125rem; /* 13 */
  --sp-3: 1.3125rem; /* 21 */
  --sp-4: 2.125rem;  /* 34 */
  --sp-5: 3.4375rem; /* 55 */

  /* Single-column reading measure. */
  --measure: 640px;

  --rule: 2px;       /* Prairie horizontal weight (1.5-2px per spec) */
}

/* ---- Base ---------------------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  font-size: 16px;
}

body {
  background-color: var(--bone);
  color: var(--sumi);
  font-family: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* Headings: humanist sans at Medium/500, slightly tight. Two sizes only. */
h1, .h1, h2, .h2 {
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--sumi);
  line-height: 1.2;
}
h1, .h1 { font-size: var(--fs-h1); margin: 0 0 var(--sp-3); }
h2, .h2 { font-size: var(--fs-h2); margin: var(--sp-4) 0 var(--sp-2); }

p { margin: 0 0 var(--sp-3); }
.caption { font-size: var(--fs-caption); color: var(--muted); }

a {
  color: var(--cherokee);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--cherokee-deep); }

/* ---- The Halmos mark ------------------------------------------------------
   The square is the only mark in the system. Two uses:
   - .wordmark   the terminal square after "Last Logoff"
   - .halmos     a heading that ENDS A SENTENCE takes the square instead of a
                 period. Apply this class only to such headings; a heading that
                 is a fragment keeps no terminal punctuation.
   Implemented as an ::after with background:currentColor so it always inherits
   the text color (Brand/wordmark.md, decided 2026-06-10). ~20% of font size,
   sitting on the baseline, tight ~0.14em gap. */
.wordmark::after,
.halmos::after {
  content: "";
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.14em;
  background: currentColor;
  vertical-align: baseline;
}

/* ---- Wordmark ------------------------------------------------------------- */
.wordmark {
  font-family: "Inter Display", "Inter", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--sumi);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--sumi); }

/* ---- Prairie rule ---------------------------------------------------------
   Full-width Cherokee red horizontal. The FLW gesture: a line where a division
   is needed, never a box. Used under the nav and as a section divider. */
.prairie-rule {
  border: 0;
  border-top: var(--rule) solid var(--cherokee);
  margin: 0;
  opacity: 1; /* override Bootstrap's hr { opacity: .25 }, which washes the red out */
}

/* ---- Navigation ----------------------------------------------------------- */
.site-nav {
  background: var(--bone);
  padding: var(--sp-3) 0;
}
.site-nav .nav-link {
  color: var(--sumi);
  font-size: var(--fs-caption);
  letter-spacing: 0.01em;
  padding: 0 0 0 var(--sp-3);
}
.site-nav .nav-link:hover { color: var(--cherokee); }

/* ---- Buttons --------------------------------------------------------------
   Cherokee red fill passes contrast on bone (~5.5:1, per wordmark.md). Squared
   corners — the brand has no rounded geometry. */
.btn-cherokee {
  background: var(--cherokee);
  border: var(--rule) solid var(--cherokee);
  color: var(--bone);
  border-radius: 0;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: var(--sp-1) var(--sp-3);
}
.btn-cherokee:hover { background: var(--cherokee-deep); border-color: var(--cherokee-deep); color: var(--bone); }

.btn-quiet {
  background: transparent;
  border: var(--rule) solid var(--sumi);
  color: var(--sumi);
  border-radius: 0;
  font-weight: 500;
  padding: var(--sp-1) var(--sp-3);
}
.btn-quiet:hover { background: var(--sumi); color: var(--bone); }

/* ---- Layout helpers ------------------------------------------------------- */
.measure { max-width: var(--measure); margin-left: auto; margin-right: auto; }

main { padding: var(--sp-5) var(--sp-3); }

/* Quiet sand band between bone sections. */
.band-sand { background: var(--sand); }

/* Product blocks on the Open-a-case page — hairline-divided (Prairie), price in
   Cherokee red. No heavy card chrome. */
.product { padding: var(--sp-3) 0; border-top: 1px solid var(--sand); }
.product:first-of-type { border-top: 0; }
.product-name { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 var(--sp-1); }
.product-price { color: var(--cherokee); margin-left: var(--sp-1); }

/* Golden-ratio split for the hero: text column : motif panel = 1.618 : 1.
   Collapses to a single column below the md breakpoint (still responsive;
   desktop is the design target per WEBSITE.md D6). */
.phi-split {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .phi-split { grid-template-columns: 1.618fr 1fr; align-items: center; }
}

/* ---- Art-glass motif ------------------------------------------------------
   One panel per page at most. Built ONLY from the brand's own vocabulary:
   Halmos squares (filled ink, filled red, outlined red) and hairlines on sand.
   A static SVG lives in the markup; this just frames it as a golden rectangle. */
.motif {
  background: var(--sand);
  aspect-ratio: 1.618 / 1;
  width: 100%;
}
.motif svg { display: block; width: 100%; height: 100%; }

/* ---- Guides (growth batch 8 Part 2) --------------------------------------- */
/* The executor's checklist: an empty box per item, drawn here so the page
   prints as a checklist and still reads as a plain list. */
.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 1.75em; margin-bottom: var(--sp-1); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 0.9em;
  height: 0.9em;
  border: 1.5px solid var(--sumi);
}
/* /professionals' ready-made text: set apart as something to copy. */
.ready-text {
  border-left: var(--rule) solid var(--cherokee);
  padding-left: var(--sp-2);
  margin: 0 0 var(--sp-3);
}

/* ---- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--bone);
  padding: var(--sp-4) var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--muted);
}
.site-footer a { color: var(--cherokee); }

/* The 988 line — one step more muted than caption text (WEBSITE.md D9,
   added 2026-06-10). Care, not a directory. */
.crisis-line {
  font-size: var(--fs-caption);
  color: var(--muted);
  opacity: 0.85;
  margin-top: var(--sp-3);
}

/* ---- Focus ---------------------------------------------------------------- */
:focus-visible { outline: var(--rule) solid var(--cherokee); outline-offset: 2px; }