/* Powers Of Tau. One Carrd era profile card, except the profile belongs to the ceremony.
   Built flat off art/ref/matrix-carrd-profile.jpg: a dashed frame on a living field, a bar, bands of
   hairline cells, three faces with one job each. Nothing here has volume: no radius, no shadow, no gradient
   except the dash patterns and the field.
   Scale follows his order of 2026-10-19: base 14, labels 11, ONE display element per screen, the card a
   column of about 1100 with the field eating the rest. His own reference page is set at 13 px, so the two
   agree. */

@font-face { font-family: Array; src: url(/fonts/Array-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Array; src: url(/fonts/Array-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Lineal; src: url(/fonts/Lineal-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Lineal; src: url(/fonts/Lineal-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Lineal; src: url(/fonts/Lineal-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Tau Mono; src: url(/fonts/IntelOneMono-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Tau Mono; src: url(/fonts/IntelOneMono-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --void: #050a05;
  --card: #000000;
  --ink: #c3d4c5;
  --ink-dim: #7d8e7f;
  --rule: #26422a;
  --rule-lit: #3b6440;
  --green: #3bdc4a;
  --green-deep: #1d8a2b;
  --key: #1c5324;
  --key-lit: #2a7a33;
  --white: #e8f2e6;
  --red: #e3522f;

  --display: Array, "Courier New", monospace;
  --text: Lineal, "Segoe UI", system-ui, sans-serif;
  --mono: "Tau Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-display: 44px;   /* one per screen */
  --t-mast: 20px;
  --t-figure: 28px;
  --t-head: 15px;
  --t-body: 14px;
  --t-meta: 12px;
  --t-label: 11px;

  --s1: 3px; --s2: 6px; --s3: 10px; --s4: 14px; --s5: 20px; --s6: 28px; --s7: 40px;
  --pad: 20px;
  --pad-y: 16px;
  --pad-lead: 34px;
  --gap: 9px;
  --bar-h: 48px;
  --key-h: 40px;
  --row-h: 44px;

  --dash: repeating-linear-gradient(90deg, var(--green-deep) 0 6px, transparent 6px 11px);
  --dash-v: repeating-linear-gradient(180deg, var(--green-deep) 0 6px, transparent 6px 11px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--text);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.frame {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 30px auto 34px;
  padding: 11px;
}
@media (max-width: 1560px) { .frame { margin-left: clamp(14px, 4.2vw, 64px); margin-right: clamp(14px, 4.2vw, 64px); } }

.frame-edge { position: absolute; }
.frame-edge-t, .frame-edge-b { left: 0; right: 0; height: 2px; background-image: var(--dash); }
.frame-edge-l, .frame-edge-r { top: 0; bottom: 0; width: 2px; background-image: var(--dash-v); }
.frame-edge-t { top: 0; } .frame-edge-b { bottom: 0; }
.frame-edge-l { left: 0; } .frame-edge-r { right: 0; }

.card { position: relative; background: var(--card); display: flex; flex-direction: column; gap: var(--gap); }

/* ---------- the bar ---------------------------------------------------- */

.bar {
  height: var(--bar-h);
  border: 1px solid var(--rule-lit);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 5px 0 17px;
  gap: var(--s4);
}
.bar-phase { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lamp { width: 7px; height: 7px; flex: none; background: var(--rule-lit); }
.lamp[data-phase="open"] { background: var(--green); animation: pulse 2.6s steps(2, end) infinite; }
.lamp[data-phase="sealing"] { background: var(--red); animation: pulse 1.3s steps(2, end) infinite; }
.lamp[data-phase="sealed"] { background: var(--green-deep); }
@keyframes pulse { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .22; } }
.bar-phase-word {
  font: 400 var(--t-label)/1 var(--mono);
  letter-spacing: .14em;
  color: var(--green);
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-name { display: flex; align-items: baseline; gap: 10px; justify-content: center; white-space: nowrap; }
.mark { font: 700 var(--t-mast)/1 var(--display); color: var(--green); letter-spacing: .01em; }
.bar-sub { font: 400 var(--t-label)/1 var(--mono); color: var(--ink-dim); letter-spacing: .12em; text-transform: uppercase; }
.key-bar { justify-self: end; }

/* ---------- keys ------------------------------------------------------- */

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--key-h);
  padding: 0 17px;
  background: var(--key);
  color: var(--white);
  font: 500 var(--t-meta)/1 var(--text);
  letter-spacing: .06em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  text-align: center;
  transition: background .12s linear, transform .08s ease-out, color .12s linear;
}
.key:hover, .key:focus-visible { background: var(--key-lit); }
.key:active { transform: translateY(1px); background: var(--green-deep); }
.key-big { min-height: 44px; width: 100%; font-size: var(--t-body); font-weight: 700; letter-spacing: .04em; }
.key-ghost { background: transparent; color: var(--green); border: 1px solid var(--rule-lit); }
.key-ghost:hover, .key-ghost:focus-visible { background: #0a1f0e; color: var(--white); }
.key[aria-disabled="true"], .key:disabled {
  background: transparent; color: var(--ink-dim); border: 1px solid var(--rule); cursor: not-allowed; transform: none;
}
.key[aria-disabled="true"]:hover, .key:disabled:hover { background: transparent; color: var(--ink-dim); }
.key-mark { width: 15px; height: 15px; flex: none; object-fit: contain; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- the nav: one running line, the open word selected ---------- */

.pick { border: 1px solid var(--rule); padding: 3px 6px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; }
.pick a {
  display: inline-block;
  padding: 7px 2px;
  color: var(--ink);
  font: 500 var(--t-body)/1.2 var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color .12s linear;
}
.pick a span { padding: 8px 16px; display: inline-block; }
.pick a:hover span, .pick a:focus-visible span { color: var(--green); }
.pick a[aria-current="page"] span { background: var(--green); color: #04140a; font-weight: 700; }
.pick .dot { color: var(--rule-lit); font-size: var(--t-body); user-select: none; }

/* ---------- bands and cells -------------------------------------------- */

.band { display: grid; gap: var(--gap); align-items: stretch; }
.band-3 { grid-template-columns: 268px minmax(0, 1fr) 316px; }
.band-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.band-1 { grid-template-columns: minmax(0, 1fr); }

.cell { border: 1px solid var(--rule); padding: var(--pad-y) var(--pad); min-width: 0; display: flex; flex-direction: column; }
/* The one cell on a screen that carries the display line keeps its text clear of the edge at that size. */
.cell-lead { padding-left: var(--pad-lead); padding-right: var(--pad-lead); }
.cell-lead > .cell-title { margin-left: calc(-1 * var(--pad-lead)); margin-right: calc(-1 * var(--pad-lead)); padding-left: var(--pad-lead); padding-right: var(--pad-lead); }
.cell-tight { padding: 0; }

.cell-title {
  font: 700 var(--t-label)/1 var(--text);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 11px var(--pad);
  border-bottom: 1px solid var(--rule);
  margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad)) var(--s5);
}
.cell-tight > .cell-title { margin: 0; }

h1, h2, h3, p, dl, ul { margin: 0; }
h1, h2, h3 { font-weight: 700; }
.lede + .lede { margin-top: 10px; }
.head {
  font: 700 var(--t-head)/1.2 var(--text);
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  margin-bottom: var(--s4);
}
.display { font: 700 var(--t-display)/1.02 var(--display); color: var(--green); letter-spacing: 0; text-wrap: balance; }
.figure { font: 700 var(--t-figure)/1 var(--mono); color: var(--green); font-variant-numeric: tabular-nums; }
.lede { font-size: var(--t-body); line-height: 1.6; color: var(--ink); text-wrap: pretty; max-width: 66ch; }
.dim { color: var(--ink-dim); }
.green { color: var(--green); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- labelled rows ---------------------------------------------- */

.rows { display: flex; flex-direction: column; margin: 0; }
.row {
  position: relative;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: var(--s4);
  padding: 11px 0;
  min-height: var(--row-h);
  align-items: baseline;
}
.row + .row::before, .rows > * + *::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--rule);
}
.row dt, .row-label {
  font: 500 var(--t-label)/1.5 var(--text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
}
.row dd, .row-value { margin: 0; font-size: var(--t-body); min-width: 0; overflow-wrap: anywhere; }

/* ---------- the proportion bar ----------------------------------------- */

.bar-gauge { display: flex; gap: 2px; margin-top: var(--s3); }
.bar-gauge i { height: 7px; flex: 1 1 0; background: var(--rule); transition: background .18s linear; }
.bar-gauge i.on { background: var(--green); }

/* ---------- the tape ---------------------------------------------------- */

.tape { display: flex; flex-direction: column; }
.tape-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px var(--pad);
  font: 400 var(--t-label)/1.2 var(--mono);
  color: var(--green-deep);
  white-space: nowrap;
  letter-spacing: .04em;
}
.tape-row + .tape-row::before, .tape .tape-row::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--rule);
}
.tape .tape-row:first-child::before { display: none; }
.tape-row b { font-weight: 400; color: var(--ink-dim); }
.tape-row em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.tape-row.lit { color: var(--green); }
.tape-row.lit b { color: var(--white); }
.tape-row.root { color: var(--ink-dim); border-top: 1px solid var(--rule-lit); padding-top: 11px; }
a.tape-row { text-decoration: none; transition: color .12s linear; }
a.tape-row:hover { color: var(--green); }

/* ---------- the object cell -------------------------------------------- */

.object { display: block; width: 100%; height: auto; align-self: stretch; }
.object-band { display: block; width: 100%; height: auto; max-height: none; }
.object-wrap { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 150px; overflow: hidden; }
.object-wrap .object { max-height: 300px; width: auto; max-width: 100%; align-self: center; }

/* ---------- the marquee strip ------------------------------------------ */

.strip {
  border: 1px dashed var(--green-deep);
  padding: 11px 17px;
  overflow: hidden;
  font: 400 var(--t-label)/1.3 var(--mono);
  color: var(--green);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.strip { text-align: center; }
/* The line under a section head: big enough to lead, small enough to stay inside its cell at 320. */
.lead-line { font: 700 clamp(17px, 4.4vw, 20px)/1.25 var(--text); color: var(--white); margin: 0 0 8px; }

/* ---------- the coin cell ---------------------------------------------- */

.mint {
  font: 400 var(--t-meta)/1.55 var(--mono);
  color: var(--white);
  background: #071407;
  border: 1px solid var(--rule);
  padding: 12px 17px;
  overflow-wrap: anywhere;
  user-select: all;
  margin: var(--s4) 0 var(--s3);
}
.marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: var(--s3); }
.marks .key { padding: 10px 17px; flex-direction: column; gap: 6px; min-height: 62px; font-size: var(--t-label); letter-spacing: .06em; }

/* ---------- the risk line ---------------------------------------------- */

.risk { margin: var(--s5) 0 0; padding: 9px 17px 11px; font-size: var(--t-label); color: #56664f; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- utility ----------------------------------------------------- */

.spacer { flex: 1; }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack-s { display: flex; flex-direction: column; gap: var(--s2); }
.keys { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--s5); }
.divider { height: 9px; margin: var(--s5) 0; background-image: var(--dash); opacity: .55; }
.note { font-size: var(--t-meta); color: var(--ink-dim); line-height: 1.5; }
.field {
  width: 100%; display: block; margin: 0;
  font: 400 var(--t-body)/1.5 var(--text);
  background: #071407; color: var(--white);
  border: 1px solid var(--rule); padding: 12px 17px;
}
.field:focus { border-color: var(--rule-lit); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- widths ------------------------------------------------------ */

@media (max-width: 1280px) {
  .band-3 { grid-template-columns: 240px minmax(0, 1fr) 280px; }
  :root { --t-display: 44px; }
}
@media (max-width: 1080px) {
  .band-3 { grid-template-columns: 236px minmax(0, 1fr); }
  .band-3 > .band-3-tape { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  :root { --t-display: 32px; --t-figure: 24px; --t-mast: 17px; --bar-h: auto; --pad: 17px; --pad-y: 14px; --pad-lead: 34px; }
  .band-3, .band-2 { grid-template-columns: minmax(0, 1fr); }
  .frame { margin: 14px 10px 18px; padding: 8px; }
  .bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: 10px 11px 12px; gap: 9px 10px; }
  .bar-phase { grid-column: 1; grid-row: 1; }
  .bar-name { justify-content: flex-start; grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; white-space: normal; }
  .key-bar { grid-column: 2; grid-row: 1; justify-self: end; min-height: 36px; padding: 0 17px; white-space: nowrap; }
  .object-wrap .object { max-height: 220px; }
  .pick .dot { display: none; }
  .pick { padding: 4px; }
  .pick a { padding: 4px 2px; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 10px 0; min-height: 0; }
  .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  :root { --t-display: 28px; --pad: 20px; --pad-lead: 34px; }
  .mark { font-size: 15px; }
  .bar { padding: 14px 17px 15px; grid-template-columns: minmax(0, 1fr); }
  .key-bar { grid-row: 3; justify-self: stretch; min-height: 42px; }
  .bar-phase { padding-left: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .lamp { animation: none !important; }
  .key, .pick a, .bar-gauge i, a.tape-row { transition: none; }
}

[hidden] { display: none !important; }