/* ============================================================
   tyr.css — Plate II · TYR miniaturized loitering munition
   Cover, intro + "In flight" strip, § I pair, Releasable specification
   (Specifications), closing image, Next plate, footer.
   Comp reference width: 1440px. Rail = 148/1440 = 10.28vw.
   Built in the same idiom as moth.css: on desktop every section is one
   screen (100vh − 48px nav) and the page snaps to section starts.
   (The pre-launch "Launching at AUSA" sheet this replaced is archived in
   outputs/archive/tyr-launch-sheet/.)
   ============================================================ */

/* 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{
  --ty-rail:clamp(72px,10.28vw,263px);
  --ty-red:#C0302A;          /* TYR accent (eyebrow, catalog line, § I tag) */
  --ty-ink:#1A1918;
  --ty-paper:#F1EBE3;
  --ty-sea:#4CA287;
  --ty-amber:#D26928;
  --ty-cream:#E9E2D3;        /* Specifications ground */
  /* one screen = the viewport below the 48px nav */
  --ty-screen:calc(100vh - 48px);
  /* plate unit: 1vw on a ~1.6:1 window, smaller on wider/shorter ones so the
     intro + "In flight" screen (the densest) still fits one screen; every
     vertical size and type size below is in it, widths stay in vw */
  --ty-u:min(1vw,calc((100vh - 48px) * .0155));
  --ty-v:min(1vw,calc((100vh - 48px) * .02));       /* MOTH-sized unit — used by the Specifications screen so it matches Plate I */
}

html{scroll-snap-type:y proximity;scroll-padding-top:48px}
html,body{background:#0f0c07}
.h-ty-cover,.h-ty-intro,.h-ty-pair,.h-ty-data,.h-ty-service{scroll-snap-align:start}

.h-ty-sheet{position:relative;padding-top:48px;background:var(--bg);overflow:hidden}

/* ============================================================
   COVER — operator on red. Pre-composed 2.5:1 plate (R2 img/tyr_cover.jpg,
   scripts/tyr-images.py): the whole photograph at full height, centred, red
   field continued from its own edges, so the operator is never cropped and
   the spine sits on clean red. Gradient shows only while it loads.
   ============================================================ */
.h-ty-cover{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#6f1619 0%,#7d1417 45%,#7a1518 70%,#721b1e 100%);   /* tyr_hero.jpg edge tones, shown until the plate loads */
  height:max(320px,var(--ty-screen));
}
.h-ty-cover-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;display:block;
}
@media (min-aspect-ratio: 12/5){
  .h-ty-cover-img{object-fit:contain}
}
/* SPINE — SVG text with a fixed textLength (run pinned whatever font the
   system substitutes). Comp: 230×540 box, 232px glyphs, run 540 of 708
   (12% → 88% of the cover), 40px from the left edge. */
.h-ty-spine{
  position:absolute;z-index:7;pointer-events:none;
  left:clamp(14px,2.8vw,72px);top:12%;height:76%;width:auto;
  display:block;overflow:visible;
}
.h-ty-spine text{
  font-family:'Libre Franklin',var(--display-heavy);font-weight:900;
  font-size:232px;letter-spacing:-.03em;
  fill:var(--ty-ink);
}

/* ============================================================
   INTRO + § IN FLIGHT — one screen: statement on top, the four-view strip
   filling the rest.
   ============================================================ */
.h-ty-intro{
  min-height:var(--ty-screen);
  display:flex;flex-direction:column;
  background:var(--bg);
}
.h-ty-intro-body{
  padding:clamp(32px,calc(4 * var(--ty-u)),104px) clamp(24px,4vw,102px) clamp(22px,calc(2.6 * var(--ty-u)),66px) clamp(24px,3.6vw,92px);
}
.h-ty-eyebrow{
  font-size:clamp(.5rem,calc(.76 * var(--ty-u)),1.22rem);font-weight:700;
  letter-spacing:.4em;text-transform:uppercase;color:var(--ty-red);
}
.h-ty-headline{
  margin-top:clamp(16px,calc(2.1 * var(--ty-u)),54px);
  font-family:var(--display-heavy);font-weight:900;
  font-size:clamp(2.2rem,calc(6.1 * var(--ty-u)),9.8rem);
  line-height:.98;letter-spacing:-.025em;
  color:var(--ty-paper);max-width:13ch;
}
.h-ty-lead{
  margin-top:clamp(16px,calc(2 * var(--ty-u)),52px);
  max-width:clamp(300px,48vw,1200px);                /* 68ch @1440 */
  font-size:clamp(.62rem,calc(.9 * var(--ty-u)),1.44rem);font-weight:300;
  line-height:2.05;color:rgba(241,235,227,.72);
}
.h-ty-catalog{
  margin-top:clamp(14px,calc(1.8 * var(--ty-u)),46px);
  font-size:clamp(.44rem,calc(.625 * var(--ty-u)),1rem);font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ty-red);
}
.h-ty-flight{
  flex:1;display:flex;flex-direction:column;
  background:#11161a;
  padding:clamp(24px,calc(2.8 * var(--ty-u)),76px) clamp(24px,3.6vw,92px) clamp(22px,calc(2.4 * var(--ty-u)),62px);
}
.h-ty-secrow{display:flex;align-items:baseline;gap:22px;margin-bottom:clamp(14px,calc(1.8 * var(--ty-u)),46px)}
.h-ty-secrow .n{
  font-size:clamp(.48rem,calc(.7 * var(--ty-u)),1.12rem);font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ty-sea);white-space:nowrap;
}
.h-ty-secrow .ln{flex:1;height:.5px;background:rgba(76,162,135,.3)}
.h-ty-secrow .t{
  font-size:clamp(.48rem,calc(.7 * var(--ty-u)),1.12rem);font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:rgba(76,162,135,.6);white-space:nowrap;
}
.h-ty-flight-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.h-ty-flight-grid figure{margin:0;display:flex;flex-direction:column;min-width:0}
/* photos are re-cropped 16:10 with the aircraft centred and ~15% clear air on every
   side, so object-fit:cover can trim either axis (frame ratios run 1.3–2.0 across
   desktop sizes) without ever cutting the air vehicle */
.h-ty-flight-grid .ph{
  position:relative;overflow:hidden;background:#aeb9bf;
  height:clamp(140px,calc(19 * var(--ty-u)),460px);
}
.h-ty-flight-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.h-ty-flight-grid figcaption{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:clamp(10px,calc(1.1 * var(--ty-u)),28px);
  font-size:clamp(.54rem,calc(.8 * var(--ty-u)),1.28rem);font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(241,235,227,.92);text-align:center;
}
.h-ty-flight-grid figcaption::before{content:'';width:5px;height:5px;background:var(--ty-sea);flex-shrink:0}

/* ============================================================
   § I — THE PAIR: two portrait operator shots side by side, one screen,
   headline + two-column text + tag over a bottom shade
   ============================================================ */
.h-ty-pair{
  position:relative;overflow:hidden;
  height:var(--ty-screen);
  display:flex;gap:3px;background:#0f0c07;
}
.h-ty-pair-img{flex:1;min-width:0;height:100%;object-fit:cover;object-position:center 28%;display:block}
.h-ty-pair-shade{
  position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(180deg,rgba(15,12,7,0),rgba(15,12,7,.92));
  pointer-events:none;
}
.h-ty-pair-body{
  position:absolute;z-index:2;
  left:clamp(24px,3.6vw,92px);right:clamp(24px,3.6vw,92px);bottom:clamp(24px,calc(3.6 * var(--ty-u)),92px);
}
.h-ty-pair-headline{
  font-family:var(--display-heavy);font-weight:900;
  font-size:clamp(1.6rem,calc(3.47 * var(--ty-u)),5.6rem);
  line-height:1;letter-spacing:-.02em;color:var(--ty-paper);max-width:16ch;
}
.h-ty-pair-text{
  margin-top:clamp(12px,calc(1.5 * var(--ty-u)),40px);max-width:50vw;
  column-count:2;column-gap:clamp(20px,2.8vw,72px);column-fill:balance;
  font-size:clamp(.58rem,calc(.83 * var(--ty-u)),1.33rem);font-weight:300;
  line-height:1.95;color:rgba(241,235,227,.8);
}
.h-ty-pair-tag{
  margin-top:clamp(14px,calc(1.9 * var(--ty-u)),50px);
  font-size:clamp(.48rem,calc(.7 * var(--ty-u)),1.12rem);font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ty-red);
}

/* ============================================================
   SPECIFICATIONS — ink on cream, set in the MOTH unit (--ty-v) so the two plates match
   ============================================================ */
.h-ty-data{
  background:var(--ty-cream);color:var(--ty-ink);
  min-height:var(--ty-screen);
  padding:clamp(40px,calc(4.44 * var(--ty-v)),114px) clamp(24px,4vw,102px) clamp(36px,calc(3.9 * var(--ty-v)),100px) clamp(24px,3.6vw,92px);
}
.h-ty-data-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2vw;
  padding-bottom:16px;border-bottom:.5px solid rgba(26,25,24,.3);
}
.h-ty-data-head h2{
  font-family:var(--display-heavy);font-weight:900;
  font-size:clamp(1.3rem,calc(2.36 * var(--ty-v)),3.78rem);
  letter-spacing:.005em;text-transform:uppercase;color:var(--ty-ink);
}
.h-ty-data-grid{
  margin-top:clamp(22px,calc(2.36 * var(--ty-v)),60px);
  /* photo column is exactly 3:2 of the kit height (34.2v) so tyr_spec.jpg shows its whole
     frame; the table takes what's left, capped, and any surplus opens the gutter */
  display:grid;grid-template-columns:clamp(450px,calc(51.3 * var(--ty-v)),1314px) minmax(0,clamp(300px,40vw,1024px));
  justify-content:space-between;gap:clamp(28px,4.2vw,108px);align-items:stretch;   /* table runs the full height of the photo */
}
.h-ty-kit{
  position:relative;margin:0;
  height:auto;min-height:clamp(300px,calc(34.2 * var(--ty-v)),876px);
  background:#d9d2c4;border:.5px solid rgba(26,25,24,.25);
}
.h-ty-kit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.h-ty-spec{margin:0;display:flex;flex-direction:column}
/* twelve rows share the photo's height evenly; the first sits on the top edge and the
   last on the bottom edge so the table spans exactly the photograph */
.h-ty-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(26,25,24,.14);
}
.h-ty-spec-row:first-child{align-content:start;padding-top:0}
.h-ty-spec-row:last-child{align-content:end;padding-bottom:0;border-bottom:none}
.h-ty-spec-row dt{
  flex-shrink:0;
  font-size:clamp(.46rem,calc(.68 * var(--ty-v)),1.1rem);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(26,25,24,.6);
}
.h-ty-spec-row dd{
  margin:0;text-align:right;text-wrap:pretty;
  font-size:clamp(.62rem,calc(.9 * var(--ty-v)),1.44rem);font-weight:300;
  letter-spacing:.05em;color:var(--ty-ink);
}

/* ============================================================
   IN SERVICE — the closing image. Shares the last screen with the
   next-plate strip (52) and footer (76).
   ============================================================ */
.h-ty-service{
  position:relative;overflow:hidden;background:#20242a;
  /* one screen less the next-strip and footer, but never wider than 2.3:1 — on a short,
     wide window the photo would otherwise be cropped to a band with no room under the wings */
  min-height:max(calc(var(--ty-screen) - 128px),43.5vw);
  /* where the underside of the wing tips lands in this box, as a fraction of its height:
     the photo is 1.482:1 and sits at object-position 44%; the tips end at 66% of its
     height. --sv-ar is the box's own width:height ratio. The static value is the 2.3:1
     worst case (safe everywhere); browsers with tan()/atan2() get the exact figure. */
  --sv-ar:calc(100 / 43.5);
  --sv-vis:calc(1.482 / var(--sv-ar));
  --sv-wing:calc((0.66 - 0.44 * (1 - var(--sv-vis))) / var(--sv-vis));
}
@supports (width:calc(tan(atan2(1px,1px)) * 1px)){
  .h-ty-service{--sv-ar:min(tan(atan2(100vw,calc(100vh - 176px))),calc(100 / 43.5))}
}
.h-ty-service > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 44%;display:block;   /* helmet close to the top, air above the wings' underside */
}
.h-ty-service-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,16,18,.25) 0%,rgba(16,16,18,0) 20%,rgba(16,16,18,0) 50%,rgba(16,16,18,.72) 100%);
}
/* the two features sit centred in the band between the wing tips and the bottom edge */
.h-ty-feat{position:absolute;top:calc((var(--sv-wing) + 1) * 50%);transform:translateY(-50%);max-width:36vw}
.h-ty-feat.left{left:clamp(24px,4vw,102px)}
.h-ty-feat.right{right:clamp(24px,4vw,102px);text-align:right}
.h-ty-feat h3{
  font-family:var(--display-heavy);font-weight:800;
  font-size:clamp(.9rem,calc(1.25 * var(--ty-u)),2rem);line-height:1.25;color:var(--ty-paper);
}
.h-ty-feat p{
  margin-top:clamp(6px,calc(.76 * var(--ty-u)),20px);
  font-size:clamp(.56rem,calc(.8 * var(--ty-u)),1.28rem);font-weight:300;
  line-height:1.95;color:rgba(241,235,227,.82);
}

/* ============================================================
   NEXT PLATE — hand-off strip (→ NYX)
   ============================================================ */
.h-ty-next{
  margin-left:var(--ty-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-ty-next:hover{background:rgba(146,192,171,.04)}
.h-ty-next .pl{
  font-family:var(--display-heavy);font-weight:700;
  font-size:clamp(.6rem,calc(.76 * var(--ty-u)),1.22rem);letter-spacing:.06em;color:var(--mint);
}
.h-ty-next .dm{
  font-size:clamp(.4rem,calc(.56 * var(--ty-u)),0.896rem);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(146,192,171,.55);white-space:nowrap;
}
.h-ty-next .tx{
  font-size:clamp(.46rem,calc(.625 * var(--ty-u)),1rem);font-weight:300;
  letter-spacing:.04em;color:rgba(241,235,227,.55);
}
.h-ty-next .go{
  display:inline-flex;align-items:center;gap:10px;
  font-size:clamp(.38rem,calc(.52 * var(--ty-u)),0.832rem);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(146,192,171,.75);white-space:nowrap;
  transition:color .2s;
}
.h-ty-next:hover .go{color:var(--mint)}

/* ============================================================
   FOOTER
   ============================================================ */
.h-ty-footer{
  margin-left:var(--ty-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-ty-footer .mark{
  font-size:clamp(.52rem,calc(.76 * var(--ty-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-ty-cover{height:clamp(320px,49.2vw,calc(100vh - 48px))}
  .h-ty-intro{min-height:auto}
  .h-ty-flight-grid{grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,30px) 4px}
  .h-ty-flight-grid .ph{height:auto;aspect-ratio:16/10}
  .h-ty-pair{height:clamp(480px,52.8vw,900px)}
  .h-ty-data{min-height:auto}
  .h-ty-data-grid{grid-template-columns:1fr 1fr;justify-content:normal}
  .h-ty-kit{height:auto;min-height:0;aspect-ratio:3/2}
  .h-ty-service{min-height:clamp(420px,48.6vw,800px);--sv-ar:calc(100 / 48.6)}
  .h-ty-pair-text{max-width:none}
  .h-ty-feat{max-width:42vw}
}
@media (max-width: 760px){
  :root{--ty-rail:0px}
  .h-ty-cover{height:60vw;min-height:200px}
  .h-ty-cover-img{object-position:54% 50%}      /* keeps the whole air vehicle right of the spine, clear of the right edge */
  .h-ty-spine{left:3.6vw;top:19%;height:62%}

  .h-ty-intro-body{padding:8vw 6vw 6vw}
  .h-ty-headline{max-width:none}
  .h-ty-lead{max-width:none}
  .h-ty-flight{padding:7vw 6vw 8vw}
  .h-ty-flight-grid{grid-template-columns:1fr;gap:6vw 0}
  .h-ty-flight-grid .ph{height:auto;aspect-ratio:16/10}
  .h-ty-flight-grid figcaption{margin-top:3vw}

  .h-ty-pair{height:auto;flex-direction:column;gap:3px}
  .h-ty-pair-img{height:auto;aspect-ratio:4/5;object-position:center 20%}
  .h-ty-pair-shade{display:none}
  .h-ty-pair-body{position:static;padding:7vw 6vw 9vw;background:#0f0c07}
  .h-ty-pair-text{column-count:1}

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

  .h-ty-service{min-height:auto}
  .h-ty-service > img{position:static;width:100%;height:auto;aspect-ratio:3/2}
  .h-ty-service-shade{display:none}
  .h-ty-feat{position:static;transform:none;max-width:none;padding:0 6vw}
  .h-ty-feat.left{padding-top:8vw}
  .h-ty-feat.right{text-align:left;padding-top:6vw;padding-bottom:10vw}

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

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