/* DMT RECORDING STUDIO — layout and component doctrine.

   The component layer is INVENTED, not ported: DESFASE has no navigation, no
   forms, no cards, no focus states and no breakpoints — it renders posters.
   What is inherited is the doctrine those components have to obey: one angular
   motif (the 45° chamfer), rules that read as circuit traces rather than
   dividers, display/meta contrast carried by weight and tracking, and the
   substrate crossing everything. */

/* =================================================================
   BASE
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  /* The masthead is sticky; anchored jumps must not land under it. */
  scroll-padding-top: calc(var(--s-9) + var(--s-3));
  -webkit-text-size-adjust: 100%;
}

/* The document default is the TEXT register, and the split it creates is the
   whole rule: anything that INHERITS this is prose, and everything that must be
   machine voice declares --font-mono for itself. That is why the mono
   declarations scattered through this file are not redundant — each one is a
   deliberate "this is not reading copy". If a rule sets a size or a colour but
   no family, it has claimed to be prose; check that it is. */
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--t-m);
  font-weight: var(--weight-text);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;      /* the field bleeds; the page must never scroll sideways */
}

::selection {
  background: var(--current);
  color: var(--void);
}

/* =================================================================
   THE LAYER STACK
   z0   field canvas       the cell-organism, WebGL -> 2D glyph raster
   z10  page content       real HTML. crisp, selectable, never glitched
   z50  substrate overlay  static grain + scanline, ABOVE the type

   That last one is the whole trick: the ink sits IN the substrate, not on
   it. Material crossing the glyph fills is a print impression; material
   sitting underneath them is a web overlay.
   ================================================================= */

#field-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background: var(--void);
}

#substrate-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.shell {
  position: relative;
  z-index: 10;
}

/* Screen-reader-only, for the skip link and for labels that are visually
   carried by position rather than by text. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--s-1);
  left: var(--s-1);
  z-index: 100;
  padding: var(--s-1) var(--s-2);
  background: var(--void);
  color: var(--current);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* =================================================================
   GRID — 12 columns, 24px gutters, fluid margins between the flyer's
   two margin values. The ratios survive the port; the poster pixels
   do not.
   ================================================================= */

.wrap {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--s-6);
}

/* The reading column never runs the full twelve. */
.col-main { grid-column: 1 / span 7; max-width: var(--measure); }
.col-side { grid-column: 9 / span 4; }
.col-full { grid-column: 1 / -1; }
.col-half { grid-column: 1 / span 6; }
/* A second half in the same grid has to be TOLD where to start. Both wear an
   explicit `grid-column: 1`, so without this the auto-placer pushes the second
   onto the next row and a deliberate side-by-side comparison silently renders
   as a stack — which is exactly how it failed on /system. */
.col-half + .col-half { grid-column: 7 / span 6; }

@media (max-width: 900px) {
  .grid { row-gap: var(--s-4); }
  .col-main, .col-side, .col-half,
  .col-half + .col-half { grid-column: 1 / -1; }
}

section { padding-block: clamp(var(--s-9), 11vh, var(--s-24)); }

/* =================================================================
   TYPE
   Display/meta contrast is WEIGHT + TRACKING, never bold-vs-bolder,
   and the scale has a deliberate hole in it — see tokens.css.
   ================================================================= */

.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  font-stretch: var(--stretch-display);
  line-height: calc(0.88 * var(--display-leading));
  text-transform: uppercase;
  color: var(--text-strong);
  margin: 0;
  /* Print misregistration — a hard offset impression, NEVER a soft glow.
     Soft shadows read as web overlay; this reads as ink. */
  text-shadow: 1px 0 0 rgba(174, 182, 194, 0.22);
}

.d1 { font-size: var(--t-d1); line-height: calc(0.82 * var(--display-leading)); }
.d2 { font-size: var(--t-d2); }
.d3 { font-size: var(--t-d3); }

/* Display type needs air beneath it before the mono register starts. The gap
   scales with the heading: a d1 masthead sitting one leading unit off its
   body copy reads as a caption, not as a masthead. */
.display + * { margin-top: var(--s-4); }
.d1 + * { margin-top: var(--s-6); }
.label + .display { margin-top: var(--s-2); }

/* A bleed title runs to the viewport edge — but its TYPE sets ON the grid
   margin, flush with everything below it. Nearly-but-not-quite alignment reads
   as a mistake: commit to the margin, or break it unmistakably. */
.bleed { margin-inline: calc(var(--grid-margin) * -1); padding-inline: var(--grid-margin); }

/* .meta is the machine folio: a datum, a location, a count, a link label.
   It is uppercase, tracked out, and set in --text-dim, which is 4.25:1 and
   FAILS AA at this size. That is legal for a folio and illegal for a sentence,
   so the moment a run of .meta becomes something you read rather than something
   you check, it is the wrong class — use .note. */
.meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--weight-meta);
  letter-spacing: var(--tracking-meta);
  line-height: var(--leading-mono);
  text-transform: uppercase;
  color: var(--text-dim);          /* large/UI role — never body copy */
  margin: 0;
}

/* .note — secondary prose. The correct home for every sentence that was
   previously wearing .meta because it sat in a footer or a caption slot:
   TEXT register, sentence case, and --text at 9.90:1 instead of a folio grey
   that never cleared AA. Small is a SIZE, not a licence to drop contrast. */
.note {
  font-size: var(--t-s);
  color: var(--text);
  margin: 0;
  max-width: var(--measure);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  display: block;
}

/* [ UNVERIFIED ] — a build-time chip on unfilled content. Owner-facing, not
   visitor-facing: it exists so a placeholder cannot ship by accident, and it
   disappears on its own as content/*.json is filled. Infrared is correct here —
   this is a genuine alarm state, not decoration. */
.chip {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--infrared);
  border: 1px solid rgba(255, 42, 77, 0.45);
  padding: 1px 6px;
  white-space: nowrap;
  vertical-align: 2px;
  text-transform: none;
}

.lede { font-size: var(--t-m); color: var(--text); max-width: var(--measure); }
.small { font-size: var(--t-s); }
p { margin: 0 0 var(--s-3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--t-cut) var(--ease-cut);
}
a:hover { color: var(--text-strong); }

/* THE CATALOGUE REFERENCE — the one surviving house mark, because a catalogue
   number carries real information. Set once per item as an oversized numeral,
   a print registration mark. Never repeated as decorative metadata. */
.mark {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--t-numeral);
  line-height: calc(0.78 * var(--display-leading));
  letter-spacing: var(--tracking-display);
  color: transparent;
  background: var(--chrome-grad);
  -webkit-background-clip: text;
  background-clip: text;
  display: block;
}

/* =================================================================
   RULES — circuit traces with square terminal nodes.
   Never a 1px divider box. Rules read as traces.
   ================================================================= */

.rule {
  position: relative;
  height: var(--hairline);
  background: rgba(174, 182, 194, 0.18);
  border: 0;
  margin: 0;
}
.rule::before,
.rule::after {
  content: "";
  position: absolute;
  top: -2px;
  width: var(--node);
  height: var(--node);
  background: var(--accent);
  opacity: 0.85;
}
.rule::before { left: -2px; }
.rule::after { right: -2px; }

.rule-heavy {
  height: 2px;
  background: var(--accent);
}
.rule-heavy::before,
.rule-heavy::after { width: 7px; height: 7px; top: -3px; opacity: 1; }

/* A rule always sits inside its own .wrap so it starts and ends ON the grid
   margin — the terminal nodes mark the margin, which is the point of them.
   Putting .wrap on the <hr> itself would paint the rule across its own padding
   box and the nodes would land on the viewport edge instead. */
.rule-row { padding-block: 0; }

/* =================================================================
   LISTS — no bullets. A disc is a second motif, and a round one at that.
   The trace-node square already carries that job where a marker is needed.
   ================================================================= */

.plain { list-style: none; margin: 0; padding: 0; }
.plain > li { margin-bottom: var(--s-2); }
.plain > li:last-child { margin-bottom: 0; }

.meta-list > li {
  font-size: var(--t-s);
  color: var(--text);
  padding-left: var(--s-2);
  position: relative;
}
.meta-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  background: var(--accent);
}

/* =================================================================
   THE RACK — the catalogue. Reads as a tracklist of machines: a fixed
   reference column on the left, the machine set at display scale on the
   right. The reference is the studio's equivalent of a DMTR catalogue
   number, which is exactly why it gets its own column and never wraps
   into the prose.
   ================================================================= */

.rack-row {
  display: grid;
  grid-template-columns: 8ch 1fr;
  column-gap: var(--grid-gutter);
  padding-block: var(--s-4);
  border-top: 1px solid rgba(174, 182, 194, 0.14);
  margin-bottom: 0;
}
.rack-row:last-child { border-bottom: 1px solid rgba(174, 182, 194, 0.14); }

.rack-ref {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  padding-top: 0.5em;
}

.rack-body { display: block; min-width: 0; }
.rack-name { display: block; margin-top: var(--s-1); }
.rack-note { display: block; margin-top: var(--s-1); }

@media (max-width: 560px) {
  .rack-row { grid-template-columns: 1fr; row-gap: var(--s-1); }
  .rack-ref { padding-top: 0; }
}

/* =================================================================
   RATES — state the price, do not sell it. The number is set at display
   scale because it is the answer the reader came for; everything else
   around it stays in the mono register.
   ================================================================= */

.rate-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--grid-gutter);
  padding-block: var(--s-3);
  border-top: 1px solid rgba(174, 182, 194, 0.14);
  margin-bottom: 0;
}
.rate-row:last-child { border-bottom: 1px solid rgba(174, 182, 194, 0.14); }

.rate-name {
  font-family: var(--font-mono);
  font-size: var(--t-s);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-strong);
}
.rate-hours {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-label);
}
/* The price is TABULAR DATA at display scale, not a heading — mono, explicitly.
   It inherits from body, so when reading copy moved to the TEXT register this
   silently became a 56px line of Archivo: a display-size heading in the one
   face barred from display sizes. Declared here so it cannot drift again. */
.rate-price {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-family: var(--font-mono);
  font-weight: var(--weight-display);
  font-size: var(--t-d3);
  line-height: 1;
  color: var(--text-strong);
  text-align: right;
}
/* An unset placeholder value. Rendered dim so an em-dash at display scale
   reads as "not filled in yet" rather than as a broken element — the chip
   beside it carries the actual message. */
.is-unset { color: var(--text-dim); }

.rate-cur {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--text-dim);
}

/* =================================================================
   PANELS — washed gradient with the 45° chamfer, top-right.
   No hairline border: edges come from typography, the trace rules, or
   the wash. A 1px box would be a second motif.
   Never chamfer a transparent panel: there is nothing to cut but glyphs.
   ================================================================= */

.panel {
  background: linear-gradient(180deg, rgba(8, 10, 16, 0.62), rgba(8, 10, 16, 0.34) 70%, rgba(8, 10, 16, 0.12));
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  padding: var(--s-4);
}
@media (max-width: 640px) { .panel { padding: var(--s-3); } }

/* =================================================================
   CONTROLS
   ================================================================= */

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--weight-meta);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  background: rgba(242, 244, 248, 0.03);
  border: 1px solid rgba(174, 182, 194, 0.28);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-4);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  transition: background var(--t-cut) var(--ease-cut), color var(--t-cut) var(--ease-cut);
}
.btn:hover {
  background: rgba(46, 230, 255, 0.10);
  border-color: var(--accent);
  color: var(--text-strong);
}
.btn-primary {
  background: rgba(46, 230, 255, 0.12);
  border-color: var(--accent);
}

/* FOCUS — invented here. 2px Current, zero offset, zero radius. A rounded
   focus ring would break --radius: 0 at the exact moment the user most needs
   the system to look deliberate. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: 2px;
  border-radius: 0;
}

/* =================================================================
   FORMS
   Mono labels tracked out, above the field. NO floating labels and NO
   placeholder-as-label: both destroy the label the moment the field has
   content, which is precisely when a user re-reads it.
   ================================================================= */

.field { display: block; margin-bottom: var(--s-4); }

.field > label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--s-1);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--t-s);
  color: var(--text-strong);
  background: rgba(5, 6, 10, 0.72);
  border: 1px solid rgba(174, 182, 194, 0.28);
  border-radius: var(--radius);
  padding: var(--s-2);
  clip-path: polygon(0 0, calc(100% - var(--chamfer-s)) 0, 100% var(--chamfer-s), 100% 100%, 0 100%);
}
.field input:hover,
.field textarea:hover { border-color: rgba(174, 182, 194, 0.5); }
.field textarea { min-height: calc(var(--s-3) * 5); resize: vertical; }
.field .hint { font-size: var(--t-2xs); color: var(--text-dim); margin-top: var(--s-1); }

/* =================================================================
   MASTHEAD + FOOTER
   No hamburger. Five links wrap honestly on a small screen; a menu that
   hides five items is startup chrome, not editorial.
   ================================================================= */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5, 6, 10, 0.82);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(174, 182, 194, 0.16);
}

.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-2);
}

.wordmark {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--accent); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-left: auto;
}
.nav a {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
}
.nav a:hover { color: var(--text-strong); }
.nav a[aria-current="page"] { color: var(--accent); }

@media (max-width: 560px) {
  .nav { margin-left: 0; width: 100%; gap: var(--s-2) var(--s-3); }
}

.colophon {
  border-top: 1px solid rgba(174, 182, 194, 0.16);
  padding-block: var(--s-6) var(--s-9);
}
.colophon .meta { color: var(--text-dim); }

/* =================================================================
   PHASE REACTIONS — the foreground answers the field.
   Hard-cut misregistration only: alpha and offset shadows, nothing that
   touches layout. CALM needs no rule — the base .display misregistration
   IS the resting telegraph.
   ================================================================= */

:root[data-phase="escalation"] .display { text-shadow: 1px 0 0 rgba(46, 230, 255, 0.5); }
:root[data-phase="failure"] .display {
  text-shadow: 2px 0 0 rgba(255, 42, 77, 0.85), -2px 0 0 rgba(46, 230, 255, 0.6);
}
:root[data-phase="recovery"] .display { text-shadow: 1px 0 0 rgba(46, 230, 255, 0.28); }

/* The .mark is gradient-filled via background-clip:text, so its glyphs are
   transparent and text-shadow paints behind nothing. Use drop-shadow instead. */
:root[data-phase="failure"] .mark { filter: drop-shadow(2px 0 0 rgba(255, 42, 77, 0.7)); }

@media (prefers-reduced-motion: reduce) {
  :root[data-phase] .display {
    text-shadow: 1px 0 0 rgba(174, 182, 194, 0.22);
  }
  :root[data-phase] .mark { filter: none; }
  * { animation: none !important; transition: none !important; }
}