/* ============================================================
   Lintel — brand components. Load after tokens.css.
   Additive: nothing in styles.css is redefined.
   ============================================================ */

/* ---------- mark and lockup ---------- */
.lintel-mark{height:var(--mark-h);width:auto;display:block;color:var(--verm)}
.lintel-mark--lg{height:var(--mark-h-lg)}
.lintel-mark--white{color:var(--softw)}

/* Wordmark is live text: Geist, weight 600, tight tracking, sentence case.
   Mark sits to the RIGHT of the word, baseline-aligned — the reverse of the
   usual order, and the thing that makes the lockup read as one object. */
.lintel-lockup{display:inline-flex;align-items:center;gap:.42em;
  font-family:var(--wordmark-family);font-weight:var(--wordmark-weight);
  font-size:22px;letter-spacing:var(--wordmark-tracking);
  color:var(--text);text-decoration:none;padding:12px}
.lintel-lockup .lintel-mark{height:.62em}
.lintel-lockup:hover{color:var(--verm)}

/* ---------- grounds ---------- */
/* The flow field is the brand's imagery. Hero and cover surfaces only:
   never behind body copy, a table, or a diagram plate.
   The grounds are stretch-to-fit (100x100 viewBox, preserveAspectRatio none),
   so they take 100% 100% — cover would crop the fold composition. */
.bg-flow{background:var(--charcoal) var(--flow) no-repeat 0 0/100% 100%}
.bg-flow-wide{background:var(--charcoal) var(--flow-wide) no-repeat 0 0/100% 100%}
.bg-grid{background-image:var(--grid);background-repeat:repeat;background-size:128px 128px}

/* A plate: the light card the system drops onto the dark field. */
.plate{background:var(--softw);color:#141517;padding:var(--s7)}
.plate--found{background:var(--found);color:var(--softw)}

/* ---------- the square ---------- */
/* One 8px vermilion square opens a block. It is the system's only ornament. */
.sq{display:inline-block;width:8px;height:8px;background:var(--verm);flex:none}
.sq--stone{background:var(--stone)}

/* ---------- hairline rule ---------- */
.hr-line{border:0;height:1px;background:var(--line-strong);opacity:.55;margin:var(--s6) 0}

/* ---------- index list ---------- */
/* Numbered rows separated by hairlines — the reference's contents page.
   Use for the seven doors, the register summary, any ordered set. */
.index{list-style:none;margin:0;padding:0;
  font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase}
.index li{display:flex;align-items:center;gap:24px;
  padding:15px 0;border-bottom:1px solid var(--line)}
.index li:first-child{border-top:1px solid var(--line)}
.index a{color:var(--text-2);text-decoration:none;flex:1}
.index li:hover a{color:var(--text)}
.index .n{color:var(--text-3);font-variant-numeric:tabular-nums}
.index li:hover .n{color:var(--verm)}

/* ---------- corner labels ---------- */
/* Mono micro-type pinned to the edges of a surface, the way a drawing is
   stamped. Two or three per surface, never more. */
.stamp{font-family:var(--f-mono);font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);line-height:1.7}
.stamp b{color:var(--text-2);font-weight:var(--w-mono-b)}

/* ---------- evidence-grade badges ---------- */
/* Each badge carries its word; colour is a second channel, never the only one.
   Amber is allowed here and nowhere else on the site. */
.lb{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-weight:var(--w-mono-b);font-size:var(--t-micro);
  letter-spacing:.13em;text-transform:uppercase;
  padding:3px 8px 3px 7px;border:1px solid currentColor;white-space:nowrap;line-height:1.5}
.lb::before{content:"";width:5px;height:5px;background:currentColor;flex:none}
.lb-conf{color:var(--slate)}
.lb-supp{color:var(--text-2)}
.lb-cont{color:var(--stone)}
.lb-open{color:var(--signal);background:var(--signal-wash)}
.lb-open::before{background:none;border:1px solid currentColor}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-sans);font-weight:var(--w-semi);font-size:.95rem;
  padding:13px 24px;border-radius:999px;text-decoration:none;
  background:var(--verm);color:var(--verm-ink);border:1px solid var(--verm)}
.btn:hover{background:transparent;color:var(--verm)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--text);color:var(--text)}

/* ---------- icons ---------- */
/* <svg class="licon"><use href="/assets/icons.svg#i-evidence"/></svg> */
.licon{width:20px;height:20px;display:block;color:inherit}
.licon--lg{width:28px;height:28px}