/* ==========================================================================
   NYTHRASYN — production stylesheet
   Composition source: design-reference/README.md, locked frames 4a/3a/5a/5b/6a
   Base composition below is frame 3a (desktop master, 1280–1727)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Colour tokens
   -------------------------------------------------------------------------- */

:root {
  --plate:        #16181A;
  --engraved:     #1C1E21;
  --bone-hi:      #EAE7E0;
  --bone:         #E8E5DE;
  --bone-2:       #DCD9D3;
  --bone-focus:   #F0EDE6;
  --amber:        #C8853A;

  --grain-line:      rgba(255,255,255,.022);
  --specular:        rgba(255,255,255,.05);
  --vignette:        rgba(0,0,0,.62);
  --top-lit-edge:    rgba(255,255,255,.05);
  --rule-lit-edge:   rgba(255,255,255,.045);
  --rule:            rgba(226,223,216,.26);
  --datum-rule:      rgba(226,223,216,.30);
  --record-rule:     rgba(226,223,216,.16);
  --description:     rgba(226,223,216,.54);
  --legal-text:      rgba(226,223,216,.55);
  --legal-plate:     rgba(10,11,12,.55);
  --legal-lit-edge:  rgba(255,255,255,.055);
  --statement-shadow: 0 0 26px rgba(8,9,10,.98), 0 0 9px rgba(8,9,10,.95), 0 1px 0 rgba(0,0,0,.55);
  --monument-shadow:  0 2px 0 rgba(255,255,255,.07), 0 -2px 1px rgba(0,0,0,.7);
  --datum-tick-color: rgba(226,223,216,.50);
}

/* --------------------------------------------------------------------------
   2 · Font faces — self-hosted WOFF2 subsets in assets/fonts/
   Archivo carries the wdth + wght axes and is the display face: it is
   preloaded and uses font-display: block so the monument crop never
   reflows from a fallback metric. IBM Plex Mono may swap.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-variable-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-300-subset.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-400-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   3 · Typography tokens
   -------------------------------------------------------------------------- */

:root {
  --face-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --face-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --monument-size:   300px;
  --monument-track:  -.045em;
  --monument-align:  center;
  --monument-shift:  0;

  --statement-size:  19px;
  --statement-track: .42em;
  --statement-lh:    1;
  --statement-color: var(--bone);

  --mark-size:       12.5px;
  --mark-track:      .40em;
  --mark-track-active: .46em;

  --contact-size:    10.5px;
  --contact-track:   .30em;

  --description-size:  11.5px;
  --description-lh:    2.05;
  --description-track: .015em;

  --legal-size:  10px;
  --legal-track: .28em;
}

/* --------------------------------------------------------------------------
   4 · Geometry tokens — frame 3a (1440 × 900 master)
   Absolute artifact sizes (crosses, ticks, measure pitch, rule weights)
   are constant at every breakpoint: the frame scales, the artifact does not.
   -------------------------------------------------------------------------- */

:root {
  --margin:          64px;
  --header-height:   104px;

  --mark-top:        36px;
  --mark-rule-dy:    34px;
  --mark-rule-a:     96px;
  --mark-rule-gap:   14px;
  --mark-rule-b:     86px;

  --contact-top:     34px;
  --contact-row-dy:  36px;
  --contact-gap:     10px;
  --contact-rule:    92px;

  --signal-break:      1070px;
  --signal-u:          57px;
  --signal-cap:        404px;
  --signal-base-left:  728px;
  --signal-continuation-gradient: linear-gradient(90deg,
    rgba(226,223,216,.10) 0%, rgba(226,223,216,.34) 40%, rgba(226,223,216,.34) 100%);

  --monument-inset:  -24px;
  --monument-top:    352px;
  --monument-height: 300px;

  --datum-top:       492px;
  --datum-height:    30px;
  --datum-lead:      40px;
  --datum-tick-w:    18px;
  --datum-tick-h:    2px;
  --datum-tick-gap:  22px;
  --statement-pad:   24px;
  --statement-tick:  -10px;

  --record-bottom:   124px;
  --record-width:    530px;
  --record-rule-a:   96px;
  --record-rule-gap: 14px;
  --record-gap:      20px;
  --record-indent:   64px;
  --record-measure:  392px;

  --legal-height:    58px;
  --vignette-blur:   190px;
  --specular-field:  ellipse 62% 56% at 26% 22%;
}

/* --------------------------------------------------------------------------
   5 · Base reset
   -------------------------------------------------------------------------- */

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

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

h1,
p,
figure,
blockquote { margin: 0; }

a { color: inherit; text-decoration: none; }

svg { display: block; }

/* --------------------------------------------------------------------------
   6 · Full-viewport surface
   One viewport tall at every breakpoint. No scroll, no overflow, no second screen.
   -------------------------------------------------------------------------- */

:root { color-scheme: dark; }

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  position: relative;
  height: 100svh;
  margin: 0;
  background: var(--plate);
  color: var(--bone);
  font-family: var(--face-mono);
}

/* --------------------------------------------------------------------------
   7 · Material layer structure
   plate · vertical grain · specular field · edge vignette
   No images, no canvas, no filters on text. The grain never animates.
   -------------------------------------------------------------------------- */

.grain,
.specular,
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.grain {
  background-image: repeating-linear-gradient(90deg,
    var(--grain-line) 0 1px, transparent 1px 3px);
}

.specular {
  background: radial-gradient(var(--specular-field), var(--specular), transparent 68%);
}

.vignette {
  box-shadow:
    inset 0 0 var(--vignette-blur) var(--vignette),
    inset 0 1px 0 var(--top-lit-edge);
}

.sweep {
  position: absolute;
  top: -25%;
  left: 0;
  width: 26%;
  height: 150%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, var(--specular), transparent);
  filter: blur(10px);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   8 · Header rail
   Not a navbar: no bar, no fill, no border. Two anchors, ≥44px effective target.
   -------------------------------------------------------------------------- */

.rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--header-height);
}

.mark,
.contact {
  position: absolute;
  height: 44px;
  --fg: var(--bone-2);
}

.mark {
  left: var(--margin);
  top: var(--mark-top);
  --trk: var(--mark-track);
  --interrupt: transparent;
}

.mark:hover,
.mark:focus-visible {
  --fg: var(--bone-focus);
  --trk: var(--mark-track-active);
  --interrupt: rgba(200,133,58,.9);
}

.mark-word {
  display: block;
  font-family: var(--face-display);
  font-variation-settings: "wdth" 84, "wght" 700;
  font-weight: 700;
  font-size: var(--mark-size);
  line-height: 1;
  letter-spacing: var(--trk);
  text-transform: uppercase;
  color: var(--fg);
  transition: letter-spacing .45s steps(4), color .3s linear;
}

.mark-rule {
  position: absolute;
  left: 0;
  top: var(--mark-rule-dy);
  display: flex;
  align-items: center;
}

.mark-rule-a,
.mark-rule-b,
.contact-rule {
  height: 1px;
  background: var(--rule);
  box-shadow: 0 1px 0 var(--rule-lit-edge);
}

.mark-rule-a { width: var(--mark-rule-a); }
.mark-rule-b { width: var(--mark-rule-b); }

.mark-rule-gap {
  width: var(--mark-rule-gap);
  height: 1px;
  background: var(--interrupt);
  transition: background-color .2s steps(1);
}

.contact {
  right: var(--margin);
  top: var(--contact-top);
  --rule-state: var(--rule);
}

.contact:hover,
.contact:focus-visible {
  --fg: var(--bone-focus);
  --rule-state: rgba(240,237,230,.7);
}

.contact-word {
  display: block;
  text-align: right;
  font-family: var(--face-mono);
  font-weight: 400;
  font-size: var(--contact-size);
  line-height: 1;
  letter-spacing: var(--contact-track);
  color: var(--fg);
  transition: color .3s linear;
}

.contact-row {
  position: absolute;
  right: 0;
  top: var(--contact-row-dy);
  display: flex;
  align-items: center;
  gap: var(--contact-gap);
}

.contact-rule {
  width: var(--contact-rule);
  background: var(--rule-state);
  transition: background-color .3s linear;
}

/* --------------------------------------------------------------------------
   9 · Signal zone — D0R
   One line, one authored break, one displaced continuation, one amber
   state. The base and continuation overlap horizontally by --signal-u;
   the continuation is registered to the monument's cap-line via
   --signal-cap. No connector, stub, tick or cross bridges the break.
   -------------------------------------------------------------------------- */

.signal {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.signal-base,
.signal-continuation,
.signal-index {
  position: absolute;
  pointer-events: none;
}

.signal-base {
  left: var(--signal-base-left);
  top: calc(var(--signal-cap) - var(--signal-u));
  width: calc(var(--signal-break) - var(--signal-base-left));
  height: 1px;
  background: linear-gradient(90deg,
    rgba(226,223,216,.34) 0%, rgba(226,223,216,.34) 62%, rgba(226,223,216,.10) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}

.signal-continuation {
  left: calc(var(--signal-break) - var(--signal-u));
  top: var(--signal-cap);
  right: 0;
  height: 1px;
  background: var(--signal-continuation-gradient);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}

.signal-index {
  left: calc(var(--signal-break) - var(--signal-u));
  top: calc(var(--signal-cap) - 1px);
  width: var(--signal-u);
  height: 2px;
  background: var(--amber);
}

/* --------------------------------------------------------------------------
   10 · Monument container
   Live text, one line, always cropped past both edges. Never wraps, never shrinks.
   -------------------------------------------------------------------------- */

.monument {
  position: absolute;
  left: var(--monument-inset);
  right: var(--monument-inset);
  top: var(--monument-top);
  height: var(--monument-height);
  overflow: hidden;
  display: flex;
  justify-content: var(--monument-align);
  align-items: flex-start;
}

.monument span {
  flex: none;
  width: max-content;
  margin-left: var(--monument-shift);
  font-family: var(--face-display);
  font-variation-settings: "wdth" 116, "wght" 800;
  font-weight: 800;
  font-size: var(--monument-size);
  line-height: 1;
  letter-spacing: var(--monument-track);
  white-space: nowrap;
  color: var(--engraved);
  text-shadow: var(--monument-shadow);
  user-select: none;
  -webkit-user-select: none;
}

/* --------------------------------------------------------------------------
   11 · Statement datum
   A hairline crossing the full width, interrupted by the statement,
   registered between two 1px vertical ticks, terminating on a cross.
   -------------------------------------------------------------------------- */

.datum {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--datum-top);
  height: var(--datum-height);
  display: flex;
  align-items: center;
}

.datum-lead,
.datum-rule {
  height: 1px;
  background: var(--datum-rule);
  box-shadow: 0 1px 0 var(--top-lit-edge);
}

.datum-lead { width: var(--datum-lead); }
.datum-rule { flex: 1; }

.datum-tick {
  width: var(--datum-tick-w);
  height: var(--datum-tick-h);
  margin-right: var(--datum-tick-gap);
  background: var(--datum-tick-color);
}

.statement {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 var(--statement-pad);
  white-space: nowrap;
  font-family: var(--face-display);
  font-variation-settings: "wdth" 88, "wght" 500;
  font-weight: 500;
  font-size: var(--statement-size);
  line-height: var(--statement-lh);
  letter-spacing: var(--statement-track);
  text-transform: uppercase;
  color: var(--statement-color);
  text-shadow: var(--statement-shadow);
}

.statement::before,
.statement::after {
  content: "";
  position: absolute;
  top: var(--statement-tick);
  bottom: var(--statement-tick);
  width: 1px;
  background: var(--datum-rule);
}

.statement::before { left: 0; }
.statement::after  { right: 0; }

.statement-break { display: none; }

/* --------------------------------------------------------------------------
   12 · Description record
   Supporting sentence hung from an interrupted measure line, lower left.
   -------------------------------------------------------------------------- */

.record {
  position: absolute;
  left: 0;
  bottom: var(--record-bottom);
  width: var(--record-width);
}

.record-measure {
  display: flex;
  align-items: center;
  margin-bottom: var(--record-gap);
}

.record-rule-a,
.record-rule-b {
  height: 1px;
  background: var(--record-rule);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}

.record-rule-a   { width: var(--record-rule-a); }
.record-rule-gap { width: var(--record-rule-gap); }
.record-rule-b   { flex: 1; }

.record p {
  margin-left: var(--record-indent);
  width: var(--record-measure);
  font-family: var(--face-mono);
  font-weight: 300;
  font-size: var(--description-size);
  line-height: var(--description-lh);
  letter-spacing: var(--description-track);
  color: var(--description);
}

/* --------------------------------------------------------------------------
   13 · Legal rail
   -------------------------------------------------------------------------- */

.legal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--legal-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--margin);
  background: var(--legal-plate);
  box-shadow: inset 0 1px 0 var(--legal-lit-edge);
  font-family: var(--face-mono);
  font-weight: 300;
  font-size: var(--legal-size);
  letter-spacing: var(--legal-track);
  color: var(--legal-text);
}

.legal span {
  flex: none;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   14 · Calibration and resting state
   Stillness is the default. Calibration runs once and never replays.
   At rest, only the amber index cell moves.
   -------------------------------------------------------------------------- */

@keyframes surface-calibrate { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes monument-calibrate { from { opacity: 0; } to { opacity: 1; } }
@keyframes specular-sweep {
  0%   { transform: translateX(-40%); }
  100% { transform: translateX(150%); }
}

.monument { animation: monument-calibrate 1.6s ease-out both; }
.datum    { animation: surface-calibrate 1.4s steps(5) .2s both; }
.sweep    { animation: specular-sweep 1.9s linear .1s both; }

/* --------------------------------------------------------------------------
   15 · Reduced motion
   The page arrives already calibrated; the index rests at position 1.
   Hover and focus states remain, applied instantly.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .sweep { display: none; }
}

/* ==========================================================================
   16 · Breakpoints — five compositions, not a fluid layout.
   Between boundaries the values hold. Nothing interpolates.
   ========================================================================== */

/* --- ≥ 1728 · frame 4a (1920 × 1000) ------------------------------------- */

@media (min-width: 1728px) {
  :root {
    --margin:          88px;
    --header-height:   104px;

    --mark-size:       13px;
    --mark-track:      .42em;
    --mark-track-active: .48em;
    --mark-top:        44px;
    --mark-rule-dy:    36px;
    --mark-rule-a:     120px;
    --mark-rule-gap:   14px;
    --mark-rule-b:     100px;

    --contact-size:    11px;
    --contact-top:     42px;
    --contact-row-dy:  38px;
    --contact-rule:    98px;

    --signal-break:      1428px;
    --signal-u:          76px;
    --signal-cap:        461px;
    --signal-base-left:  972px;

    --monument-size:   400px;
    --monument-track:  -.05em;
    --monument-inset:  -30px;
    --monument-top:    392px;
    --monument-height: 400px;
    --monument-shadow: 0 3px 0 rgba(255,255,255,.07), 0 -3px 1px rgba(0,0,0,.7);

    --datum-top:       552px;
    --datum-height:    32px;
    --datum-lead:      56px;
    --datum-tick-w:    20px;
    --datum-tick-gap:  24px;
    --datum-rule:      rgba(226,223,216,.28);
    --statement-size:  22px;
    --statement-track: .44em;
    --statement-pad:   26px;
    --statement-tick:  -11px;
    --statement-shadow: 0 0 28px rgba(8,9,10,.98), 0 0 10px rgba(8,9,10,.95);

    --record-bottom:   150px;
    --record-width:    620px;
    --record-rule-a:   120px;
    --record-gap:      22px;
    --record-indent:   88px;
    --record-measure:  452px;
    --description-size: 12px;

    --legal-height:    62px;
    --legal-size:      10.5px;

    --vignette-blur:   210px;
    --specular-field:  ellipse 60% 56% at 24% 20%;
  }
}

/* --- 1280–1727 · frame 3a (desktop master) -------------------------------
   Defined as the base composition above. No overrides.
   ------------------------------------------------------------------------- */

/* --- 1024–1279 · frame 5a (1024 × 768) ----------------------------------- */

@media (max-width: 1279px) {
  :root {
    --margin:          48px;
    --header-height:   96px;

    --mark-size:       11.5px;
    --mark-track:      .40em;
    --mark-track-active: .46em;
    --mark-top:        36px;
    --mark-rule-dy:    32px;
    --mark-rule-a:     72px;
    --mark-rule-gap:   12px;
    --mark-rule-b:     64px;

    --contact-size:    10px;
    --contact-top:     34px;
    --contact-row-dy:  34px;
    --contact-gap:     9px;
    --contact-rule:    76px;

    --signal-break:      640px;
    --signal-u:          57px;
    --signal-cap:        352px;
    --signal-base-left:  298px;

    --monument-size:   300px;
    --monument-track:  -.045em;
    --monument-inset:  0px;
    --monument-top:    300px;
    --monument-height: 300px;

    --datum-top:       448px;
    --datum-height:    28px;
    --datum-lead:      32px;
    --datum-tick-w:    16px;
    --datum-tick-gap:  18px;
    --datum-rule:      rgba(226,223,216,.28);
    --statement-size:  15px;
    --statement-track: .34em;
    --statement-pad:   20px;
    --statement-tick:  -9px;
    --statement-shadow: 0 0 22px rgba(8,9,10,.98), 0 0 8px rgba(8,9,10,.95);

    --record-bottom:   104px;
    --record-width:    440px;
    --record-rule-a:   72px;
    --record-rule-gap: 12px;
    --record-gap:      16px;
    --record-indent:   48px;
    --record-measure:  360px;
    --description-lh:  2;
    --description:     rgba(226,223,216,.58);

    --legal-height:    52px;
    --legal-size:      9.5px;
    --legal-track:     .24em;

    --vignette-blur:   150px;
    --specular-field:  ellipse 64% 58% at 26% 20%;
  }
}

/* --- 768–1023 · frame 5b (834 × 1112) ------------------------------------ */

@media (max-width: 1023px) {
  :root {
    --margin:          40px;
    --header-height:   96px;

    --mark-rule-a:     64px;
    --mark-rule-b:     56px;

    --contact-rule:    72px;

    --signal-break:      451px;
    --signal-u:          57px;
    --signal-cap:        648px;
    --signal-base-left:  109px;

    --monument-top:    596px;
    --monument-align:  flex-start;
    --monument-shift:  -52px;

    --datum-top:       742px;
    --datum-lead:      26px;
    --datum-tick-gap:  16px;
    --statement-track: .30em;
    --statement-pad:   18px;

    --record-bottom:   118px;
    --record-width:    520px;
    --record-rule-a:   64px;
    --record-gap:      18px;
    --record-indent:   40px;
    --record-measure:  420px;

    --legal-height:    54px;
    --legal-track:     .22em;

    --specular-field:  ellipse 70% 44% at 26% 16%;
  }
}

/* --- ≤ 767 · frame 6a (390 × 844) ---------------------------------------- */

@media (max-width: 767px) {
  :root {
    --margin:          24px;
    --header-height:   90px;

    --mark-size:       10.5px;
    --mark-track:      .36em;
    --mark-track-active: .42em;
    --mark-top:        28px;
    --mark-rule-dy:    26px;
    --mark-rule-a:     44px;
    --mark-rule-gap:   10px;
    --mark-rule-b:     36px;

    --contact-size:    9.5px;
    --contact-track:   .28em;
    --contact-top:     26px;
    --contact-row-dy:  28px;
    --contact-gap:     8px;
    --contact-rule:    52px;

    --signal-break:      217px;
    --signal-u:          62px;
    --signal-cap:        288px;
    --signal-base-left:  24px;
    --signal-continuation-gradient: linear-gradient(90deg,
      rgba(226,223,216,.10) 0%, rgba(226,223,216,.34) 79%, rgba(226,223,216,.34) 100%);

    --monument-size:   520px;
    --monument-track:  -.05em;
    --monument-top:    260px;
    --monument-height: 584px;
    --monument-align:  flex-start;
    --monument-shift:  -236px;
    --monument-shadow: 0 4px 0 rgba(255,255,255,.075), 0 -4px 2px rgba(0,0,0,.72);

    --datum-top:       352px;
    --datum-height:    auto;
    --datum-lead:      24px;
    --datum-tick-w:    14px;
    --datum-tick-gap:  12px;

    --statement-size:  17px;
    --statement-track: .24em;
    --statement-lh:    1.62;
    --statement-pad:   16px;
    --statement-tick:  -6px;
    --statement-color: var(--bone-hi);
    --statement-shadow: 0 0 22px rgba(8,9,10,.99), 0 0 8px rgba(8,9,10,.97);

    --record-width:    100%;
    --record-rule-a:   44px;
    --record-rule-gap: 10px;
    --record-gap:      16px;
    --record-indent:   24px;
    --record-measure:  342px;
    --description-lh:  1.95;
    --description-track: .01em;
    --description:     rgba(226,223,216,.62);

    --legal-height:    72px;
    --legal-size:      9px;
    --legal-track:     .20em;
    --legal-plate:     rgba(10,11,12,.6);

    --vignette:        rgba(0,0,0,.66);
    --vignette-blur:   120px;
    --specular-field:  ellipse 90% 34% at 30% 10%;
  }

  .statement {
    position: absolute;
    left: var(--margin);
    top: 24px;
    display: block;
    white-space: nowrap;
  }

  .statement-break { display: inline; }

  .datum-tick { margin-right: var(--datum-tick-gap); }

  .record {
    top: 664px;
    bottom: auto;
    right: 0;
  }

  .record-measure { margin-right: var(--margin); }

  .record p {
    margin-left: var(--record-indent);
    margin-right: var(--record-indent);
    width: auto;
    max-width: var(--record-measure);
  }

  .legal {
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    row-gap: 7px;
  }

  .legal span:nth-child(1) { grid-column: 1; grid-row: 1; justify-self: start; }
  .legal span:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
  .legal span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}