/* ============================================================
   moth.css — Plate I · MOTH tactical RF spectrum analyzer
   Cover, § I In the field, § II Statement, § III Plate data,
   In service, Next plate, footer.
   Comp reference width: 1440px. Rail = 148/1440 = 10.28vw.
   ============================================================ */

/* 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{
  --mp-rail:clamp(72px,10.28vw,263px);
  /* one screen = the viewport below the 48px nav: every section is sized to it
     on desktop so the plate reads as a sequence of full-screen pages */
  --mp-screen:calc(100vh - 48px);
  /* one plate unit: 1vw on a ~2:1 screen, smaller on short windows so that
     type and vertical spacing shrink to keep each page inside one screen;
     horizontal positions and widths stay in vw */
  --mp-u:min(1vw,calc((100vh - 48px) * .02));
  --mp-ink:#1A1918;
  --mp-paper:#F1EBE3;
  --mp-amber:#D26928;
  --mp-sea:#4CA287;
  --mp-air:#C0302A;          /* TYR red for the Plate II hand-off: the hero's field (#7b1617) lifted so it reads on the dark ground — same as --ty-red */
}

.h-mp-sheet{position:relative;padding-top:48px;background:var(--bg);overflow:hidden}
/* page-snapping: each section is one screen; proximity snap settles the page
   on a section start when the scroll ends near one, never fights the wheel */
html{scroll-snap-type:y proximity;scroll-padding-top:48px}
.h-mp-cover,.h-mp-sec,.h-mp-statement,.h-mp-service{scroll-snap-align:start}

/* ============================================================
   COVER — full-bleed, fits one screen. The image is a pre-composed 2.5:1
   plate (R2 img/moth_cover.jpg, built by scripts/moth-composites.py): the
   portrait photograph's band (rows 11.5%–79.6%) at 51% with its background
   continued outward from its own edge tones — no CSS gradient join, so the
   field reads as one photograph at every width. The unit sits at 51% of the
   image, so object-position 51% keeps it centred as the sides crop. The
   gradient below only shows while the image loads.
   ============================================================ */
.h-mp-cover{
  position:relative;overflow:hidden;
  /* sampled from the plate's own outer columns: shows while it loads, and
     fills the side bars in the rare letterboxed case below */
  background:linear-gradient(180deg,#3d1511 0%,#451911 17%,#522011 33%,#5f2811 50%,#682d10 67%,#6a2f0f 83%,#73340e 100%);
  height:max(320px,var(--mp-screen));
}
.h-mp-cover-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:51% 50%;
  display:block;
}
/* Very short, wide windows: the 100vh cap makes the cover wider than the
   plate's 2.5:1, and `cover` would start cropping the unit top and bottom.
   Letterbox instead — the side bars take the sampled gradient above. */
@media (min-aspect-ratio: 12/5){
  .h-mp-cover-img{object-fit:contain}
}

/* SPINE — the name, running up the left edge of the cover. Inline SVG text
   (see moth.html) with textLength="600" in a 182×600 viewBox, as on the plate:
   the glyph run is pinned to the box whatever font the visitor's system
   substitutes, so it can never overshoot the cover or slide under the nav.
   The box is 85% of the cover height, centred (7.5% → 92.5%), width from the viewBox. */
.h-mp-spine{
  position:absolute;z-index:7;pointer-events:none;
  left:clamp(14px,2.5vw,64px);top:7.5%;height:85%;width:auto;   /* centred: 7.5% above and below */
  display:block;overflow:visible;
}
.h-mp-spine text{
  font-family:'Libre Franklin',var(--display-heavy);font-weight:900;
  font-size:212px;letter-spacing:-.035em;   /* user units — scales with the box */
  fill:var(--mp-ink);
}

/* ============================================================
   RAIL + PANEL frame (inset sections only)
   ============================================================ */
.h-mp-sec{display:grid;grid-template-columns:var(--mp-rail) 1fr;position:relative}
.h-mp-rail{
  position:relative;
  border-right:.5px solid rgba(146,192,171,.15);
  overflow:hidden;
}
.h-mp-rail-lbl{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-90deg);
  white-space:nowrap;
  font-size:clamp(.44rem,calc(.625 * var(--mp-u)),1rem);font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;
  color:rgba(146,192,171,.4);
}
.h-mp-rail-lbl.amber{color:rgba(210,105,40,.55)}
.h-mp-rail-num{
  position:absolute;bottom:clamp(20px,calc(2.4 * var(--mp-u)),61px);left:50%;transform:translateX(-50%);
  font-family:var(--display-heavy);font-weight:900;
  font-size:clamp(1.1rem,calc(1.8 * var(--mp-u)),2.88rem);letter-spacing:.02em;
  color:rgba(146,192,171,.22);
}
.h-mp-panel{position:relative;overflow:hidden;background:var(--bg)}

/* ============================================================
   § I — IN THE FIELD
   ============================================================ */
.h-mp-field{min-height:var(--mp-screen)}
/* Operator framing as on the designer's plate: the 606×900 box (aspect
   0.673 ≈ the photograph's 0.675) shows the whole frame, then a 1.16×
   scale about 60% 18% crops 2.5% off the top — the helmet crown (row 3.5%)
   stays inside — and ~11% off the bottom. */
.h-mp-operator{
  position:absolute;top:0;right:0;bottom:0;
  width:46.9%;height:100%;
  object-fit:cover;object-position:52% 0;      /* top-aligned: a shorter panel crops the belt, never the helmet */
  transform:scale(1.16);transform-origin:60% 18%;
  display:block;
}
.h-mp-fade{
  position:absolute;top:0;bottom:0;right:46.9%;width:11.6%;
  background:linear-gradient(90deg,var(--bg),rgba(22,17,8,0));
  pointer-events:none;
}
.h-mp-field-body{
  position:relative;z-index:1;
  padding:clamp(40px,calc(4.44 * var(--mp-u)),114px) 0 clamp(40px,calc(4.44 * var(--mp-u)),114px) clamp(24px,3.6vw,92px);   /* 64 / 52 @1440 */
  width:clamp(300px,38.9vw,996px);                                                       /* 560 @1440 */
}
.h-mp-secrow{display:flex;align-items:baseline;gap:22px}
.h-mp-secrow .n{
  font-size:clamp(.48rem,calc(.7 * var(--mp-u)),1.12rem);font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;color:var(--mp-amber);
}
.h-mp-secrow .ln{flex:1;height:.5px;background:rgba(210,105,40,.35)}
.h-mp-secrow .t{
  font-size:clamp(.48rem,calc(.7 * var(--mp-u)),1.12rem);font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:rgba(210,105,40,.6);
}
.h-mp-field-headline{
  margin-top:clamp(44px,calc(6.8 * var(--mp-u)),174px);
  font-family:var(--display-heavy);font-weight:900;
  /* 3.4u (not 3.75) so the headline sets in three lines in Libre Franklin too — the
     webfont is wider than the Windows Franklin Gothic Heavy, and at 3.75u it took a
     fourth line on Mac/phone and pushed § I past one screen at 2000×1040 */
  font-size:clamp(1.8rem,calc(3.4 * var(--mp-u)),5.44rem);
  line-height:1.05;letter-spacing:-.018em;
  color:var(--mp-paper);max-width:16ch;text-wrap:balance;
}
.h-mp-field-text{margin-top:clamp(24px,calc(2.8 * var(--mp-u)),72px);max-width:clamp(300px,30.7vw,786px)}   /* 442 @1440 — scales with the type */
.h-mp-field-text p{
  font-size:clamp(.6rem,calc(.87 * var(--mp-u)),1.39rem);font-weight:300;
  letter-spacing:.03em;line-height:2.05;color:rgba(241,235,227,.72);
}
.h-mp-field-text p + p{margin-top:clamp(14px,calc(1.4 * var(--mp-u)),36px)}

/* ============================================================
   § II — STATEMENT. full-bleed photograph, ink on paper
   ============================================================ */
.h-mp-statement{
  position:relative;overflow:hidden;
  background:#f2e4c3;                      /* shows only while the image loads */
  min-height:var(--mp-screen);
  padding:clamp(24px,calc(2.5 * var(--mp-u)),64px) clamp(24px,4vw,102px) clamp(24px,calc(2.2 * var(--mp-u)),56px) clamp(24px,3.6vw,92px);
}
/* Pre-composed 2.2:1 plate (R2 img/moth_statement.jpg, built by
   scripts/moth-composites.py): the photograph at 1.073× the section height,
   its top 7.7% down and flush right (the forearm runs off the panel), with
   the cream continued left and up from the photograph's own edge tones. Right-
   anchored so the hand stays put and only spare cream crops away. */
.h-mp-st-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:right center;
  display:block;z-index:0;pointer-events:none;
}
.h-mp-st-brand{
  position:relative;z-index:1;
  font-size:clamp(.5rem,calc(.76 * var(--mp-u)),1.22rem);font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mp-ink);
}
.h-mp-st-body{
  position:relative;z-index:1;
  margin-top:clamp(56px,calc(10.9 * var(--mp-u)),279px);   /* headline top lands at 206/740 as on the plate */
  width:clamp(300px,41.7vw,1068px);
}
.h-mp-st-headline{
  font-family:var(--display-heavy);font-weight:900;
  font-size:clamp(1.9rem,calc(3.9 * var(--mp-u)),6.24rem);
  line-height:1.02;letter-spacing:-.018em;color:var(--mp-ink);
}
.h-mp-st-cols{
  margin-top:clamp(26px,calc(3 * var(--mp-u)),77px);max-width:37.8vw;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.36vw,60px);
}
.h-mp-st-cols p{
  font-size:clamp(.58rem,calc(.83 * var(--mp-u)),1.33rem);font-weight:400;
  line-height:1.95;letter-spacing:.01em;color:var(--mp-ink);
}
.h-mp-st-foot{
  position:absolute;z-index:1;
  left:clamp(24px,3.6vw,92px);right:clamp(24px,4vw,102px);bottom:clamp(20px,calc(2.2 * var(--mp-u)),56px);
}
.h-mp-st-foot .ln{display:block;width:min(100%,55.6vw);height:1px;background:var(--mp-ink);margin-bottom:13px}
.h-mp-st-foot .t{
  font-size:clamp(.48rem,calc(.7 * var(--mp-u)),1.12rem);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mp-ink);
}

/* ============================================================
   § III — PLATE DATA (releasable specification)
   ============================================================ */
.h-mp-data{
  background:var(--bg-2);
  min-height:var(--mp-screen);
  padding:clamp(40px,calc(4.44 * var(--mp-u)),114px) clamp(24px,4vw,102px) clamp(36px,calc(3.9 * var(--mp-u)),100px) clamp(24px,3.6vw,92px);
}
.h-mp-data-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2vw;
  padding-bottom:16px;border-bottom:.5px solid rgba(210,105,40,.3);
}
.h-mp-data-head h2{
  font-family:var(--display-heavy);font-weight:900;
  font-size:clamp(1.3rem,calc(2.36 * var(--mp-u)),3.78rem);
  letter-spacing:.005em;text-transform:uppercase;color:rgba(241,235,227,.92);
}
.h-mp-data-grid{
  margin-top:clamp(22px,calc(2.36 * var(--mp-u)),60px);
  /* photo column is exactly 3:2 of the kit height so mothpage_3.jpg shows its whole
     frame; the table takes what's left (capped) and is stretched to the photo's height —
     the same build as the TYR plate */
  display:grid;grid-template-columns:clamp(450px,calc(51.3 * var(--mp-u)),1314px) minmax(0,clamp(300px,40vw,1024px));
  justify-content:space-between;gap:clamp(28px,4.2vw,108px);align-items:stretch;
}
.h-mp-kit{
  position:relative;margin:0;
  height:auto;min-height:clamp(300px,calc(34.2 * var(--mp-u)),876px);
  background:#c9ccce;border:.5px solid rgba(210,105,40,.28);
}
.h-mp-kit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.h-mp-kit .tick{position:absolute;width:14px;height:14px;border:.5px solid rgba(243,228,196,.6);z-index:2}
.h-mp-kit .tick.tl{top:-1px;left:-1px;border-right:none;border-bottom:none}
.h-mp-kit .tick.br{bottom:-1px;right:-1px;border-left:none;border-top:none}
.h-mp-spec{margin:0;display:flex;flex-direction:column}
/* the rows share the photo's height evenly; the first sits on its top edge and the
   last on its bottom edge, so the table spans exactly the photograph */
.h-mp-spec-row{
  flex:1 1 0;padding:4px 0;   /* min-height stays auto: a row never gets shorter than its text */
  display:grid;grid-template-columns:auto 1fr;column-gap:22px;
  align-items:baseline;align-content:center;
  border-bottom:.5px solid rgba(146,192,171,.1);
}
.h-mp-spec-row:first-child{align-content:start;padding-top:0}
.h-mp-spec-row:last-child{align-content:end;padding-bottom:0;border-bottom:none}
.h-mp-spec-row dt{
  font-size:clamp(.46rem,calc(.68 * var(--mp-u)),1.1rem);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(146,192,171,.55);
}
.h-mp-spec-row dd{
  margin:0;text-align:right;text-wrap:pretty;
  font-size:clamp(.62rem,calc(.9 * var(--mp-u)),1.44rem);font-weight:300;
  letter-spacing:.05em;color:rgba(241,235,227,.84);
}

/* ============================================================
   IN SERVICE — the rig, full bleed, the closing image
   ============================================================ */
.h-mp-service{
  position:relative;overflow:hidden;background:#243a4e;
  min-height:calc(var(--mp-screen) - 128px);   /* + next-plate strip 52 + footer 76 = one screen */
}
.h-mp-service > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
  transform:scale(1.06);transform-origin:50% 46%;display:block;
}
.h-mp-service-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,28,40,.44) 0%,rgba(18,28,40,0) 22%,rgba(18,28,40,0) 48%,rgba(18,28,40,.84) 100%);
}
.h-mp-features{
  position:absolute;left:clamp(24px,3.6vw,92px);right:clamp(24px,3.6vw,92px);bottom:clamp(28px,calc(3.6 * var(--mp-u)),92px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.05vw,78px);
}
.h-mp-features h3{
  font-family:var(--display-heavy);font-weight:800;
  font-size:clamp(.85rem,calc(1.18 * var(--mp-u)),1.89rem);letter-spacing:.005em;color:var(--mp-paper);
}
.h-mp-features p{
  margin-top:10px;
  font-size:clamp(.56rem,calc(.8 * var(--mp-u)),1.28rem);font-weight:300;
  letter-spacing:.03em;line-height:1.95;color:rgba(241,235,227,.78);
}

/* ============================================================
   NEXT PLATE — hand-off strip
   ============================================================ */
.h-mp-next{
  margin-left:var(--mp-rail);min-height:52px;
  display:grid;grid-template-columns:auto auto 1fr auto;gap:26px;align-items:center;
  padding:10px clamp(24px,4vw,102px) 10px clamp(24px,3.6vw,92px);
  border-top:.5px solid rgba(146,192,171,.09);
  text-decoration:none;cursor:crosshair;
  transition:background .2s;
}
.h-mp-next:hover{background:rgba(146,192,171,.04)}
.h-mp-next .pl{
  font-family:var(--display-heavy);font-weight:700;
  font-size:clamp(.6rem,calc(.76 * var(--mp-u)),1.22rem);letter-spacing:.06em;color:var(--mp-air);
}
.h-mp-next .dm{
  font-size:clamp(.4rem,calc(.56 * var(--mp-u)),0.896rem);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(192,48,42,.78);white-space:nowrap;
}
.h-mp-next .tx{
  font-size:clamp(.46rem,calc(.625 * var(--mp-u)),1rem);font-weight:300;
  letter-spacing:.04em;color:rgba(241,235,227,.55);
}
.h-mp-next .go{
  display:inline-flex;align-items:center;gap:10px;
  font-size:clamp(.38rem,calc(.52 * var(--mp-u)),0.832rem);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(192,48,42,.9);white-space:nowrap;
  transition:color .2s;
}
.h-mp-next:hover .go{color:#d8463f}

/* ============================================================
   FOOTER
   ============================================================ */
.h-mp-footer{
  margin-left:var(--mp-rail);min-height:76px;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px clamp(24px,4vw,102px) 16px clamp(24px,3.6vw,92px);
}
.h-mp-footer .mark{
  font-size:clamp(.52rem,calc(.76 * var(--mp-u)),1.22rem);font-weight:300;
  letter-spacing:.5em;color:rgba(146,192,171,.38);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  /* tablets: comp proportions, free scrolling */
  html{scroll-snap-type:none}
  .h-mp-cover{height:clamp(320px,49.2vw,calc(100vh - 48px))}
  .h-mp-field{min-height:clamp(520px,62.5vw,1600px)}
  .h-mp-statement,.h-mp-data,.h-mp-service{min-height:clamp(480px,51.4vw,1316px)}
  .h-mp-field-body{width:52%}
  .h-mp-operator{width:44%}
  .h-mp-fade{right:44%}
  .h-mp-st-body{width:56%}
  .h-mp-data-grid{grid-template-columns:1fr 1fr;justify-content:normal}
  .h-mp-kit{height:auto;min-height:0;aspect-ratio:3/2}
}
@media (max-width: 760px){
  :root{--mp-rail:0px}
  /* cover keeps the desktop composition in miniature: unit centred, the name
     running up the left edge (spine box = 85% of cover height, ~21vw wide) */
  .h-mp-cover{height:80vw;min-height:280px}
  .h-mp-spine{left:3.6vw}

  .h-mp-sec{grid-template-columns:1fr}
  .h-mp-rail{display:none}

  .h-mp-field{min-height:auto;display:flex;flex-direction:column}
  .h-mp-operator{position:static;width:100%;height:auto;aspect-ratio:3/4;object-position:50% 12%;transform:none}
  .h-mp-fade{display:none}
  .h-mp-field-body{width:auto;padding:8vw 6vw 10vw}
  .h-mp-field-headline{margin-top:8vw;max-width:none}
  .h-mp-field-text{max-width:none}

  .h-mp-statement{min-height:auto;padding:0}
  /* the 2.2:1 plate in a 4:5 box, right-anchored: shows the hand + unit (the
     plate's right ~36%) with the cream field above it */
  .h-mp-st-img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/5;object-position:right center}
  .h-mp-st-brand{padding:8vw 6vw 0}
  .h-mp-st-body{margin-top:6vw;width:auto;padding:0 6vw}
  .h-mp-st-cols{grid-template-columns:1fr;max-width:none}
  .h-mp-st-foot{position:static;padding:8vw 6vw 6vw}
  .h-mp-st-foot .ln{width:100%}

  .h-mp-data{min-height:auto;padding:8vw 6vw}
  .h-mp-data-grid{grid-template-columns:1fr}
  .h-mp-kit{height:auto;min-height:0;aspect-ratio:3/2}
  .h-mp-spec-row{grid-template-columns:1fr;row-gap:6px;padding:12px 0}
  .h-mp-spec-row:first-child{padding-top:0}
  .h-mp-spec-row dd{text-align:left}

  .h-mp-service{min-height:auto}
  .h-mp-service > img{position:static;width:100%;height:auto;aspect-ratio:3/2;transform:none}
  .h-mp-service-shade{display:none}
  .h-mp-features{position:static;grid-template-columns:1fr;gap:6vw;padding:8vw 6vw 10vw}

  .h-mp-next{grid-template-columns:auto auto 1fr;grid-template-areas:"pl dm go" "tx tx tx";gap:10px 16px;padding:14px 6vw}
  .h-mp-next .pl{grid-area:pl}.h-mp-next .dm{grid-area:dm}.h-mp-next .tx{grid-area:tx}.h-mp-next .go{grid-area:go;justify-self:end}

  .h-mp-footer{padding:16px 6vw}
}