/* ============================================================
   nyx.css — Plate III · NYX unmanned underwater vehicle
   Single-screen statement sheet: outlined spine, "In development",
   plate status row, footer. Comp reference: 1440 × 756.
   ============================================================ */

/* PAPER GRAIN — heavier, as on the flagship page */
body::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.65 0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.42'/></svg>");
  opacity:0.1;
}

:root{
  --nx-sea:#4CA287;
  /* one sheet unit: 1vw at the comp's 1440×756 aspect, but it shrinks with the
     viewport height — (100vh − nav 48 − footer 52) ÷ the comp's 656px band —
     so type, spacing and spine always fit one screen with no scrolling.
     Horizontal positions (--nx-col, --nx-pad) stay in vw. */
  --nx-u:min(1vw,calc((100vh - 100px) * .02195));
  --nx-col:clamp(200px,25.8vw,660px);   /* 372/1440 — where the sheet's rule sits */
  --nx-pad:clamp(28px,6.9vw,177px);      /* 100/1440 */
}

html,body{background:#0f0c07}

.h-nx-sheet{
  position:relative;overflow:hidden;
  height:100vh;padding-top:48px;            /* one screen, never scrolls (mobile: auto) */
  display:flex;flex-direction:column;
  background:#0f0c07;
}

/* ============================================================
   SPINE — outlined NYX riding the sheet
   ============================================================ */
/* Inline SVG text (289×600 viewBox, textLength="600") as on the comp: the glyph
   run is pinned to the box whatever font the system substitutes, so it never
   slides under the nav. Box height 600/1440 = 41.7vw; width from the viewBox.
   Outlined: no fill, 2.4-unit stroke (scales with the box). */
.h-nx-spine{
  position:absolute;z-index:5;pointer-events:none;
  left:clamp(14px,2.4vw,61px);
  top:calc(48px + clamp(16px,calc(3.3 * var(--nx-u)),84px));
  height:clamp(200px,calc(41.7 * var(--nx-u)),1068px);width:auto;
  display:block;overflow:visible;
}
.h-nx-spine text{
  font-family:'Libre Franklin',var(--display-heavy);font-weight:900;
  font-size:316px;letter-spacing:-.035em;   /* user units — scales with the box */
  fill:none;stroke:rgba(76,162,135,.4);stroke-width:2.4px;
  paint-order:stroke;
}
.h-nx-rule{
  position:absolute;z-index:5;pointer-events:none;
  left:var(--nx-col);top:calc(48px + clamp(10px,calc(1.4 * var(--nx-u)),36px));bottom:clamp(40px,calc(4.3 * var(--nx-u)),110px);
  width:1px;background:rgba(241,235,227,.16);
}

/* ============================================================
   STATEMENT
   ============================================================ */
.h-nx-statement{
  flex:1;position:relative;z-index:1;
  margin-left:var(--nx-col);
  display:flex;flex-direction:column;justify-content:center;
  min-height:0;
  padding:clamp(16px,calc(4 * var(--nx-u)),103px) var(--nx-pad) clamp(40px,calc(10 * var(--nx-u)),256px);   /* status row sits inside the bottom pad */
}
.h-nx-title{display:flex;flex-direction:column;margin:0}
.h-nx-title .eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(.5rem,calc(.76 * var(--nx-u)),1.22rem);font-weight:700;
  letter-spacing:.44em;text-transform:uppercase;color:var(--nx-sea);
}
.h-nx-title .big{
  margin-top:clamp(16px,calc(2.8 * var(--nx-u)),72px);
  font-family:var(--display-heavy);font-weight:900;
  font-size:clamp(2.4rem,calc(5.4 * var(--nx-u)),8.64rem);
  line-height:.96;letter-spacing:-.022em;color:#D2B98C;
}
.h-nx-tag{margin-top:clamp(20px,calc(3.2 * var(--nx-u)),82px);display:flex;align-items:baseline;gap:24px}
.h-nx-tag .ln{display:inline-block;width:72px;height:1px;background:rgba(76,162,135,.55);flex-shrink:0}
.h-nx-tag .t{
  font-family:var(--display-heavy);font-weight:800;
  font-size:clamp(.95rem,calc(1.53 * var(--nx-u)),2.45rem);letter-spacing:.03em;
  color:rgba(146,192,171,.82);
}
.h-nx-note{
  margin-top:clamp(12px,calc(2.08 * var(--nx-u)),53px);
  font-size:clamp(.48rem,calc(.7 * var(--nx-u)),1.12rem);font-weight:300;font-style:italic;
  letter-spacing:.08em;color:rgba(146,192,171,.4);
}

/* ============================================================
   PLATE STATUS — publication metadata, not navigation
   ============================================================ */
.h-nx-status{
  position:absolute;z-index:6;
  left:calc(var(--nx-col) + var(--nx-pad));right:var(--nx-pad);
  bottom:clamp(60px,calc(7.2 * var(--nx-u)),184px);
}
.h-nx-status .ln{display:block;height:.5px;background:rgba(146,192,171,.16);margin-bottom:15px}
.h-nx-status .row{
  display:flex;flex-wrap:wrap;gap:12px clamp(24px,3.75vw,96px);
  font-size:clamp(.42rem,calc(.59 * var(--nx-u)),0.944rem);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(146,192,171,.38);
}

/* ============================================================
   FOOTER
   ============================================================ */
.h-nx-footer{
  position:relative;z-index:6;
  min-height:52px;
  display:flex;justify-content:space-between;align-items:center;gap:2vw;
  padding:12px clamp(24px,4vw,102px);
  border-top:.5px solid rgba(146,192,171,.09);
}
.h-nx-back{
  display:inline-flex;align-items:center;gap:10px;
  font-size:clamp(.4rem,0.56vw,0.896rem);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;
  color:rgba(146,192,171,.38);text-decoration:none;cursor:crosshair;
  transition:color .2s;white-space:nowrap;
}
.h-nx-back:hover{color:var(--mint)}
.h-nx-back .h-cta-arrow{transform:rotate(180deg)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px){
  .h-nx-sheet{height:auto;min-height:100vh}
  .h-nx-spine,.h-nx-rule{display:none}
  .h-nx-statement{margin-left:0;padding:14vw 6vw 10vw;justify-content:flex-start}
  .h-nx-title .big{font-size:clamp(2.6rem,14vw,4.5rem)}
  .h-nx-status{position:static;padding:0 6vw 10vw}
  .h-nx-footer{padding:14px 6vw;flex-wrap:wrap}
}