/* VEIL Detail, holding page.
   The idea: an engineering drawing sheet with an instrument screen set into it.
   Paper and ink for the page, one black viewfinder for the zoom, and the thermal
   orange as the only colour. Small mono capitals carry the labels, one big
   grotesk sentence carries the message. */

:root {
  --paper: #ecebe5;
  --paper-2: #e3e2da;
  --ink: #121211;
  --mute: #8d8c85;
  --rule: rgba(18, 18, 17, .16);
  --rule-strong: rgba(18, 18, 17, .5);
  --hot: #ff5a1f;
  --screen: #0a0b0b;
  --hud: #ecebe5;
  --gutter: clamp(16px, 3vw, 40px);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-inline: var(--gutter);
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--hot); color: var(--ink); }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }

.mono, .lbl {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.lbl { color: var(--mute); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--ink); color: var(--paper); padding: 6px 10px; z-index: 10; }

/* ───────── status bar ───────── */
.status {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1fr 1.1fr;
  gap: 12px 24px;
  padding-block: 18px 16px;
  border-bottom: 1px solid var(--rule-strong);
}
.status p { margin: 0; }
.status a { text-decoration: none; white-space: nowrap; }
.status a:hover { color: var(--hot); }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 17px/1 var(--sans); letter-spacing: -.01em; text-decoration: none;
  text-transform: none;
}
.brand svg { width: 22px; height: 22px; flex: none; }
.dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--hot); margin-left: 6px; vertical-align: 1px;
  animation: blink 1.6s steps(2, jump-none) infinite;
}
@keyframes blink { 50% { opacity: .15; } }

/* ───────── the scope ───────── */
.scope-wrap { position: relative; margin-top: 22px; }
/* registration marks at the four corners, like a print sheet */
.scope-wrap::before, .scope-wrap::after,
.stage::before, .stage::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat;
}
.scope-wrap::before { left: -7px; top: -7px; }
.scope-wrap::after  { right: -7px; top: -7px; }
.stage::before { left: -7px; bottom: -7px; z-index: 3; }
.stage::after  { right: -7px; bottom: -7px; z-index: 3; }

.stage {
  position: relative;
  background: var(--screen);
  aspect-ratio: 16 / 8.2;
  max-height: 76vh;
  width: 100%;
  overflow: visible;
  cursor: crosshair;
  touch-action: pan-y;
}
.stage canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  transition: filter .2s linear;
}
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.62) 100%);
  opacity: var(--vig, .35);
}
.hud {
  position: absolute; inset: 0; pointer-events: none;
  color: var(--hud);
  font-family: var(--mono); font-size: 11px; line-height: 1.45;
  letter-spacing: .04em; text-transform: uppercase;
}
.hud b { font-weight: 500; color: #fff; }
.hud .c { position: absolute; padding: 12px 14px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hud .tl { left: 0; top: 0; }
.hud .tr { right: 0; top: 0; text-align: right; }
.hud .bl { left: 0; bottom: 0; }
.hud .br { right: 0; bottom: 0; text-align: right; opacity: .6; }
.hud .cap {
  left: 50%; bottom: 46px; transform: translateX(-50%);
  width: min(92%, 640px); text-align: center;
  font-size: 12.5px; color: #fff; text-transform: none; letter-spacing: .01em;
  font-family: var(--mono);
}
.hud .cap span { background: rgba(10, 11, 11, .72); padding: 4px 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.scalebar { display: flex; flex-direction: column; gap: 4px; }
.scalebar i { display: block; height: 5px; border: 1px solid var(--hud); border-top: 0; }
.reticle { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); opacity: .8; }
.spot {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  font-family: var(--mono); font-size: 11px; color: #fff; white-space: nowrap;
  padding-bottom: 14px; opacity: 0; transition: opacity .3s;
}
.spot::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 12px; height: 12px;
  transform: translate(-50%, 50%) rotate(45deg); border: 1.5px solid #fff;
}
.spot span { background: rgba(0,0,0,.55); padding: 2px 5px; }
.flash { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; }

.controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
}
.group { display: flex; align-items: center; gap: 8px; }
.btns { display: flex; }
.btn {
  font-family: var(--mono); font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule-strong); margin-left: -1px;
  padding: 8px 12px; min-width: 52px; cursor: pointer;
}
.btn:first-child { margin-left: 0; }
.btn:hover { background: var(--paper-2); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); position: relative; }
.btn.hot[aria-pressed="true"] { background: var(--hot); color: var(--ink); border-color: var(--hot); }
.controls .hint { margin-left: auto; }

/* ───────── statement ───────── */
.statement {
  font: 500 clamp(36px, 6.4vw, 96px)/1.0 var(--sans);
  letter-spacing: -.037em;
  color: var(--mute);
  margin: clamp(56px, 10vw, 140px) 0 clamp(36px, 5vw, 64px);
  max-width: 15.5em;
  text-wrap: balance;
}
.statement b { font-weight: 500; color: var(--ink); }

.row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 3fr;
  gap: 8px 24px;
  padding-block: 18px;
  border-top: 1px solid var(--rule);
}
.row > .lbl { padding-top: 5px; }
.lede { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.42; max-width: 34em; margin: 0; letter-spacing: -.01em; }

/* ───────── the WhatsApp bar ───────── */
.cta {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 20px;
  text-decoration: none;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding-block: 22px; margin-block: 34px 0;
  transition: background .15s, color .15s, padding .2s;
}
.cta strong { font: 500 clamp(26px, 3.6vw, 48px)/1.05 var(--sans); letter-spacing: -.03em; }
.cta:hover { background: var(--hot); padding-inline: 14px; }
.cta:hover .lbl { color: var(--ink); }

/* ───────── sections ───────── */
section.sheet { margin-top: clamp(64px, 9vw, 120px); }
.sheet-head {
  display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-strong);
}
.sheet-head h2 { margin: 0; font-weight: 400; }

.index { list-style: none; margin: 0; padding: 0; }
.index li {
  display: grid;
  grid-template-columns: 56px minmax(160px, 1.1fr) 2fr;
  gap: 6px 24px;
  align-items: baseline;
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
}
.index .n { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.index li:hover .n { color: var(--hot); }
.index h3 { margin: 0; font: 500 clamp(24px, 2.6vw, 34px)/1.1 var(--sans); letter-spacing: -.025em; }
.index p { margin: 0; font-size: 18px; max-width: 36em; }
.foot-note { margin: 14px 0 0; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.steps div { padding: 18px 20px 26px 0; border-right: 1px solid var(--rule); }
.steps div + div { padding-left: 20px; }
.steps div:last-child { border-right: 0; }
.steps p { margin: 10px 0 0; font-size: 18px; line-height: 1.4; }

.register { width: 100%; border-collapse: collapse; }
.register th, .register td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.register th { font-weight: 400; }
.register td { font-size: 16px; }
.register .empty td { color: var(--mute); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.table-scroll { overflow-x: auto; }

.built li { grid-template-columns: 56px minmax(160px, 1.1fr) 2fr auto; }
.links { display: flex; gap: 14px; white-space: nowrap; }
.links a { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.links a:hover { color: var(--hot); border-color: var(--hot); }
.links .muted { font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--mute); }

.coffee { margin-top: 40px; }

/* ───────── title block footer ───────── */
.titleblock {
  margin-top: clamp(72px, 10vw, 140px); margin-bottom: var(--gutter);
  display: grid; grid-template-columns: 1.2fr 1fr 1.3fr .7fr 1.1fr .8fr;
  border: 1px solid var(--rule-strong);
}
.titleblock > * {
  padding: 10px 12px 12px; margin: 0;
  border-right: 1px solid var(--rule-strong);
}
.titleblock > *:last-child { border-right: 0; }
.titleblock span { display: block; color: var(--mute); font-size: 9.5px; margin-bottom: 3px; }
.titleblock a { text-decoration: none; }
.titleblock a:hover { color: var(--hot); }

/* ───────── plain pages (privacy, 404) ───────── */
.doc { max-width: 44em; margin-top: clamp(40px, 7vw, 90px); }
.doc h1 { font: 500 clamp(40px, 6vw, 80px)/1 var(--sans); letter-spacing: -.035em; margin: 0 0 28px; }
.doc h2 { font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; margin: 40px 0 8px; padding-top: 12px; border-top: 1px solid var(--rule); }
.doc p, .doc li { font-size: 18px; line-height: 1.55; }
.doc ul { padding-left: 1.1em; }

/* ───────── narrow ───────── */
@media (max-width: 900px) {
  .status { grid-template-columns: 1fr 1fr; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock > * { border-bottom: 1px solid var(--rule-strong); }
  .titleblock > *:nth-child(2n) { border-right: 0; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps div:nth-child(2n) { border-right: 0; }
  .steps div:nth-child(3) { padding-left: 0; }
  .steps div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .built li { grid-template-columns: 40px 1fr; }
  .built li p, .built li .links { grid-column: 2; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .stage { aspect-ratio: 4 / 4.6; max-height: 70vh; }
  .hud .cap { bottom: 40px; font-size: 12px; }
  .hud .br { display: none; }
  .row { grid-template-columns: 1fr; }
  .index li { grid-template-columns: 40px 1fr; }
  .index li p { grid-column: 2; }
  .steps { grid-template-columns: 1fr; }
  .steps div, .steps div + div { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .controls .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
  .stage canvas { transition: none; }
  .cta { transition: none; }
}