/* theawazonmirrors.store
   One typeface, one weight, no rounded corners, no blur.
   Rules and offset blocks do the work that fills and shadows usually do. */

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/font/geistmono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/font/geistmono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #141414;
  --mute: #808080;
  --paper: #ffffff;
  --rule: #e0e0e0;
  --glow: #39ff44;
  --neon-text: #0d7323;
  --neon-bg: #38ff6314;
  --neon-bg-hover: #38ff6326;
  --neon-border: #38ff6340;
  --hard: rgb(180, 180, 180);
  --red: #ff0000;
  --lh: 17.5px;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.25 var(--mono);
  font-variant-ligatures: none;
  letter-spacing: 0;
}

b, strong, th, h1, h2, h3, h4, em, i, dt { font-weight: 400; }
em, i { font-style: normal; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--neon-text); background: var(--neon-bg); }

code, kbd, samp, pre { font-family: var(--mono); font-size: 13px; }

/* ---------- shell ---------- */
.grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--rule);
  padding: calc(var(--lh) * 1.5) 2ch calc(var(--lh) * 2) 2ch;
}

.page { padding: calc(var(--lh) * 1.5) 4ch calc(var(--lh) * 3) 4ch; min-width: 0; }

/* ---------- rail ---------- */
.wm {
  display: block;
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: calc(var(--lh) * 0.6) 1.5ch;
  box-shadow: 3px 3px 0 0 var(--hard);
}
.wm:hover { background: var(--neon-bg); color: var(--ink); }
.wm img { display: block; margin-bottom: calc(var(--lh) * 0.4); }
.wm-n { display: block; font-size: 14px; }
.wm-s { display: block; font-size: 12px; color: var(--mute); text-transform: uppercase; margin-top: 2px; }

.rail-tag {
  color: var(--mute);
  font-size: 12px;
  line-height: 1.35;
  margin: calc(var(--lh) * 1) 0 0 0;
  padding-bottom: calc(var(--lh) * 1);
  border-bottom: 1px solid var(--rule);
}

.rail-h {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--mute);
  margin: calc(var(--lh) * 1.2) 0 calc(var(--lh) * 0.5) 0;
}

.stages { display: block; border-top: 1px solid var(--rule); }
.stages a {
  display: flex;
  justify-content: space-between;
  gap: 1ch;
  text-decoration: none;
  padding: calc(var(--lh) * 0.35) 1ch;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.stages a i { color: var(--mute); font-size: 12px; }
.stages a:hover { background: var(--neon-bg); color: var(--neon-text); }
.stages a.on { background: var(--rule); }
.stages a.on:hover { background: var(--rule); color: var(--ink); }

.switch { display: flex; border: 1px solid var(--rule); margin-bottom: calc(var(--lh) * 0.6); }
.switch button {
  flex: 1 1 50%;
  font: 400 11px/1.25 var(--mono);
  text-transform: uppercase;
  color: var(--mute);
  background: var(--paper);
  border: 0;
  border-right: 1px solid var(--rule);
  padding: calc(var(--lh) * 0.35) 0.5ch;
  cursor: pointer;
  border-radius: 0;
}
.switch button:last-child { border-right: 0; }
.switch button.on { background: var(--rule); color: var(--ink); }

.inv { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.inv li { border-bottom: 1px solid var(--rule); }
.inv a {
  display: block;
  text-decoration: none;
  font-size: 12px;
  color: var(--mute);
  padding: calc(var(--lh) * 0.3) 1ch;
}
.inv a:hover { color: var(--neon-text); background: var(--neon-bg); }
.inv a.on { color: var(--ink); border-left: 2px solid var(--glow); }

.rail-foot {
  margin-top: calc(var(--lh) * 1.5);
  padding-top: calc(var(--lh) * 1);
  border-top: 1px solid var(--rule);
  color: var(--mute);
  font-size: 11px;
  line-height: 1.35;
}
.rail-foot a { color: var(--mute); }

/* ---------- page head ---------- */
.path { font-size: 12px; text-transform: uppercase; color: var(--mute); margin-bottom: calc(var(--lh) * 1); }
.path a { color: var(--mute); }
.path span { color: var(--rule); }

h1 { font-size: 30px; line-height: 1.15; margin: 0 0 calc(var(--lh) * 1) 0; }
.intro { font-size: 15px; line-height: 1.4; margin: 0 0 calc(var(--lh) * 1.2) 0; }

.stamp { display: flex; gap: 1.5ch; align-items: center; margin-bottom: calc(var(--lh) * 1.2); }
.stamp-s { font-size: 11px; text-transform: uppercase; color: var(--mute); }

.chip {
  display: inline-block;
  border: 1px solid var(--rule);
  color: var(--mute);
  font-size: 11px;
  text-transform: uppercase;
  padding: 2px 1ch;
  white-space: nowrap;
}
.chip.acc { border-color: var(--neon-border); color: var(--neon-text); }

/* ---------- addresses ---------- */
.doors {
  border: 1px solid var(--rule);
  padding: calc(var(--lh) * 0.9) 2ch;
  margin: 0 0 calc(var(--lh) * 2) 0;
  box-shadow: 4px 4px 0 0 var(--hard);
}
.doors-h { display: flex; justify-content: space-between; align-items: center; gap: 2ch; flex-wrap: wrap; margin-bottom: calc(var(--lh) * 0.8); }
.doors-h h2 { font-size: 12px; text-transform: uppercase; color: var(--mute); margin: 0; }
.door {
  display: flex;
  align-items: center;
  gap: 1.5ch;
  border-top: 1px solid var(--rule);
  padding: calc(var(--lh) * 0.45) 0;
}
.door code { flex: 1 1 auto; word-break: break-all; line-height: 1.3; }
.doors-f { color: var(--mute); font-size: 12px; line-height: 1.4; margin: calc(var(--lh) * 0.7) 0 0 0; border-top: 1px solid var(--rule); padding-top: calc(var(--lh) * 0.7); }
.doors-f a { color: var(--mute); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  padding: calc(var(--lh) * 0.3) 1.5ch;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  border-radius: 0;
  font-family: var(--mono);
  font-weight: 400;
  line-height: 1.25;
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn.sec { background: var(--paper); color: var(--ink); border-color: var(--rule); }
.btn.sec:hover { background: var(--rule); color: var(--ink); }
.btn.acc { background: var(--ink); color: var(--glow); border-color: var(--ink); }
.btn.acc:hover { background: var(--paper); color: var(--neon-text); border-color: var(--neon-border); }
.btn.dash { background: var(--paper); color: var(--ink); border: 1px dashed var(--mute); }
.btn.dash:hover { border-color: var(--ink); background: var(--neon-bg); }
.btnrow { display: flex; flex-wrap: wrap; gap: 1.5ch; margin: calc(var(--lh) * 1.2) 0; }

/* ---------- body ---------- */
main { max-width: 88ch; }
main h2 {
  font-size: 17px;
  margin: calc(var(--lh) * 2) 0 calc(var(--lh) * 0.7) 0;
  padding-top: calc(var(--lh) * 0.7);
  border-top: 1px solid var(--rule);
}
main h3 { font-size: 14px; text-transform: uppercase; color: var(--mute); margin: calc(var(--lh) * 1.4) 0 calc(var(--lh) * 0.4) 0; }
main p { margin: 0 0 calc(var(--lh) * 0.9) 0; line-height: 1.45; }
main ul, main ol { margin: 0 0 calc(var(--lh) * 0.9) 0; padding-left: 3ch; }
main li { margin-bottom: calc(var(--lh) * 0.3); line-height: 1.45; }

blockquote {
  margin: calc(var(--lh) * 1) 0;
  padding: calc(var(--lh) * 0.5) 2ch;
  border-left: 2px solid var(--ink);
  color: var(--mute);
}

.facts { margin: 0 0 calc(var(--lh) * 1.2) 0; border-top: 1px solid var(--rule); }
.facts > div { display: grid; grid-template-columns: 22ch minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
.facts dt { padding: calc(var(--lh) * 0.45) 1.5ch calc(var(--lh) * 0.45) 0; font-size: 11px; text-transform: uppercase; color: var(--mute); }
.facts dd { margin: 0; padding: calc(var(--lh) * 0.45) 0; line-height: 1.4; border-left: 1px solid var(--rule); padding-left: 2ch; }

.note {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--ink);
  padding: calc(var(--lh) * 0.6) 2ch;
  margin: calc(var(--lh) * 1) 0;
  line-height: 1.45;
}
.note em { display: block; font-size: 11px; text-transform: uppercase; color: var(--mute); margin-bottom: calc(var(--lh) * 0.3); }
.note.acc { border-left-color: var(--glow); background: var(--neon-bg); }
.note.acc em { color: var(--neon-text); }
.note.bad { border-left-color: var(--red); }
.note.bad em { color: var(--red); }

.tscroll { overflow-x: auto; margin: 0 0 calc(var(--lh) * 1.2) 0; border: 1px solid var(--rule); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: calc(var(--lh) * 0.4) 1.5ch; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); line-height: 1.4; vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; color: var(--mute); background: var(--paper); border-bottom: 1px solid var(--ink); }
tr td:last-child, tr th:last-child { border-right: 0; }
tbody tr:last-child td { border-bottom: 0; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr)); gap: 2ch; margin: calc(var(--lh) * 1) 0 calc(var(--lh) * 1.5) 0; }
.tile {
  display: block;
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: calc(var(--lh) * 0.7) 1.5ch;
  box-shadow: 3px 3px 0 0 var(--hard);
}
.tile:hover { background: var(--paper); box-shadow: 5px 5px 0 0 var(--hard); color: var(--ink); }
.tile b { display: block; margin-bottom: calc(var(--lh) * 0.35); }
.tile span { display: block; color: var(--mute); font-size: 12px; line-height: 1.4; }
.tile i { display: block; margin-top: calc(var(--lh) * 0.5); font-size: 11px; text-transform: uppercase; text-decoration: underline; }
.tile.acc { border-color: var(--neon-border); }
.tile.acc i { color: var(--neon-text); }

.listing { border-top: 1px solid var(--rule); margin: calc(var(--lh) * 1) 0 calc(var(--lh) * 1.5) 0; }
.listing a {
  display: grid;
  grid-template-columns: 26ch minmax(0, 1fr) 14ch;
  gap: 2ch;
  align-items: baseline;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding: calc(var(--lh) * 0.45) 1ch;
}
.listing a:hover { background: var(--neon-bg); color: var(--ink); }
.listing b { text-decoration: underline; }
.listing span { color: var(--mute); font-size: 12px; line-height: 1.4; }
.listing .chip { justify-self: end; }

.stepnav { display: flex; gap: 2ch; border-top: 1px solid var(--rule); margin-top: calc(var(--lh) * 2); padding-top: calc(var(--lh) * 1); }
.stepnav a { flex: 1 1 50%; text-decoration: none; border: 1px solid var(--rule); padding: calc(var(--lh) * 0.5) 1.5ch; }
.stepnav a:hover { background: var(--neon-bg); color: var(--ink); }
.stepnav a.nx { text-align: right; }
.stepnav i { display: block; font-size: 11px; text-transform: uppercase; color: var(--mute); }
.stepnav b { display: block; text-decoration: underline; font-size: 13px; }

/* ---------- foot ---------- */
.pagefoot { border-top: 1px solid var(--rule); margin-top: calc(var(--lh) * 3); padding-top: calc(var(--lh) * 1.5); }
.fcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(28ch, 1fr)); gap: 2ch calc(var(--lh) * 2); }
.fcols h2 { font-size: 11px; text-transform: uppercase; color: var(--mute); margin: 0 0 calc(var(--lh) * 0.5) 0; padding-bottom: calc(var(--lh) * 0.3); border-bottom: 1px solid var(--rule); }
.fcols a { display: block; font-size: 12px; color: var(--ink); padding: 2px 0; }
.fine { color: var(--mute); font-size: 11px; line-height: 1.45; margin: calc(var(--lh) * 1.5) 0 0 0; border-top: 1px solid var(--rule); padding-top: calc(var(--lh) * 1); }

/* ---------- narrow ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: minmax(0, 1fr); border-left: 0; border-right: 0; }
  .rail { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--rule); }
  .page { padding: calc(var(--lh) * 1.5) 2ch calc(var(--lh) * 2) 2ch; }
  .facts > div { grid-template-columns: minmax(0, 1fr); }
  .facts dd { border-left: 0; padding-left: 0; padding-top: 0; }
  .listing a { grid-template-columns: minmax(0, 1fr); gap: calc(var(--lh) * 0.2); }
  .listing .chip { justify-self: start; }
  .door { flex-wrap: wrap; }
}