/* ============================================================
   DEALS TO GROW — v2 ELEVATION LAYER (Stage 2, D1)
   Component + layout classes for redesigned pages ONLY.
   Load AFTER dtg.css + pages.css. Consumes tokens exclusively
   (see dtg.css :root + audit/DESIGN_SYSTEM.md for usage rules).
   Mobile-first: crafted at 390px, expanded at 720px / 1080px.
   ============================================================ */

/* ============================================================
   1. TYPE SCALE — fluid modular scale classes
   ============================================================ */
.t-mega,.t-display,.t-h1,.t-h2,.t-h3{
  font-family:var(--head);font-weight:700;text-transform:uppercase;
  line-height:var(--lh-display);letter-spacing:var(--ls-display);
  margin:0;text-wrap:balance;
}
.t-mega{font-size:var(--fs-mega);line-height:.88;}
.t-display{font-size:var(--fs-display);line-height:.92;}
.t-h1{font-size:var(--fs-h1);}
.t-h2{font-size:var(--fs-h2);}
.t-h3{font-size:var(--fs-h3);line-height:var(--lh-tight);}
.t-stat{font-family:var(--head);font-weight:700;font-size:var(--fs-stat);line-height:1;
  font-variant-numeric:tabular-nums;}
.t-lede{font-size:var(--fs-lede);line-height:1.5;color:var(--text-soft);max-width:34em;}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body);}
.t-small{font-size:var(--fs-small);line-height:1.55;}
.t-micro{font-size:var(--fs-micro);line-height:1.4;}
/* spec/data voice — IBM Plex Mono */
.t-mono{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:0;}
.t-mono-micro{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;}
/* mono eyebrow — the v2 alternative to .label (breaks the eyebrow monoculture) */
.kicker{
  font-family:var(--mono);font-weight:600;font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:.12em;color:var(--text-mute);
  display:inline-flex;align-items:center;gap:.7em;
}
.kicker::before{content:"//";color:var(--orange-text);font-weight:600;}
.kicker.on-dark{color:var(--text-on-dark-soft);}
.kicker.on-dark::before{color:var(--orange);}
/* weight + tone modifiers (Oswald variable axis) */
.w-med{font-weight:500;}
.w-semi{font-weight:600;}
.measure{max-width:38em;}
.measure-tight{max-width:28em;}

/* ============================================================
   2. SURFACE BANDS — section system with rhythm control
   ============================================================ */
.band{padding:var(--band-y) 0;position:relative;}
.band--sm{padding:var(--band-y-sm) 0;}
.band--flush{padding:0;}
.band--cream{background:var(--beige);}
.band--deep{background:var(--beige-deep);}
.band--paper{background:var(--paper);}
.band--white{background:var(--white);}
.band--black{background:var(--black);color:var(--text-on-dark);}
.band--black .t-mega,.band--black .t-display,.band--black .t-h1,
.band--black .t-h2,.band--black .t-h3,.band--black .t-stat{color:#fff;}
.band--black .t-lede{color:var(--text-on-dark-soft);}
.band--black .accent{color:var(--orange);}              /* 5.69:1 on black */
/* band joins: heavy industrial rules between contrasting surfaces */
.band--rule-top{border-top:var(--bw-brand) solid var(--black);}
.band--rule-bottom{border-bottom:var(--bw-brand) solid var(--black);}
.band--slab-top{border-top:var(--bw-slab) solid var(--black);}
.band--black.band--slab-top{border-top-color:var(--orange);}

/* ============================================================
   3. GRID — 12-col editorial grid + breakout rules
   ============================================================ */
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-4) var(--sp-5);}
/* mobile: spans collapse to full width; named spans engage at 1080 */
[class*="col-"]{grid-column:1 / -1;min-width:0;}
/* asymmetric editorial splits — single column at 390, split at 1080 */
.split-75,.split-57,.split-66{display:grid;grid-template-columns:1fr;gap:var(--sp-6);align-items:start;}
.split-75.v-center,.split-57.v-center,.split-66.v-center{align-items:center;}
/* full-bleed breakout band inside a container */
.bleed{width:100vw;margin-left:calc(50% - 50vw);}
/* offset pull-quote row */
.pull-row{
  border-top:var(--bw-rule) solid var(--orange);
  padding:var(--sp-5) 0 0;margin:var(--sp-7) 0;
  max-width:560px;
}
.pull-row blockquote,.pull-row .pq{
  font-family:var(--head);font-weight:500;text-transform:uppercase;
  font-size:var(--fs-h3);line-height:1.12;letter-spacing:0;
  color:var(--ink);margin:0;
}
.pull-row .pq-src{margin-top:var(--sp-3);display:block;}
@media(min-width:1080px){
  .col-1{grid-column:span 1;}  .col-2{grid-column:span 2;}
  .col-3{grid-column:span 3;}  .col-4{grid-column:span 4;}
  .col-5{grid-column:span 5;}  .col-6{grid-column:span 6;}
  .col-7{grid-column:span 7;}  .col-8{grid-column:span 8;}
  .col-9{grid-column:span 9;}  .col-10{grid-column:span 10;}
  .col-12{grid-column:span 12;}
  .col-start-2{grid-column-start:2;} .col-start-3{grid-column-start:3;}
  .col-start-6{grid-column-start:6;} .col-start-7{grid-column-start:7;}
  .split-75{grid-template-columns:7fr 5fr;gap:var(--sp-8);}
  .split-57{grid-template-columns:5fr 7fr;gap:var(--sp-8);}
  .split-66{grid-template-columns:1fr 1fr;gap:var(--sp-8);}
  /* pull-quote escapes the column to the right/left */
  .pull-row.pull-right{margin-right:calc(-1 * var(--sp-9));}
  .pull-row.pull-left{margin-left:calc(-1 * var(--sp-9));}
}

/* ============================================================
   4. SIGNATURE COMPONENTS
   ============================================================ */

/* ---- 4a. Stat strip — full-bleed black proof band, mono meta ---- */
.stat-strip{
  background:var(--black);color:#fff;
  border-top:var(--bw-rule) solid var(--orange);
  border-bottom:var(--bw-brand) solid var(--black);
}
.stat-strip .ss-in{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
}
.stat-strip .ss-cell{
  padding:var(--sp-5) var(--sp-4);
  border-bottom:var(--bw-hair) solid var(--line-on-dark);
}
.stat-strip .ss-cell:nth-child(odd){border-right:var(--bw-hair) solid var(--line-on-dark);}
.stat-strip .ss-v{
  font-family:var(--head);font-weight:600;font-size:var(--fs-stat);
  line-height:1;color:#fff;font-variant-numeric:tabular-nums;
}
.stat-strip .ss-v .o{color:var(--orange);}
.stat-strip .ss-l{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-on-dark-soft);margin-top:var(--sp-2);
}
@media(min-width:720px){
  .stat-strip .ss-in{grid-template-columns:repeat(var(--ss-cols,4),1fr);}
  .stat-strip .ss-cell{border-bottom:0;border-right:var(--bw-hair) solid var(--line-on-dark);padding:var(--sp-6) var(--sp-5);}
  .stat-strip .ss-cell:last-child{border-right:0;}
}

/* ---- 4b. Ledger — ruled spec rows, mono index column ---- */
.ledger{border-top:var(--bw-heavy) solid var(--black);}
.ledger .lg-row{
  display:grid;grid-template-columns:1fr;gap:var(--sp-2);
  padding:var(--sp-5) 0;border-bottom:var(--bw-hair) solid var(--line);
}
.ledger .lg-row:last-child{border-bottom:var(--bw-heavy) solid var(--black);}
.ledger .lg-i{
  font-family:var(--mono);font-weight:600;font-size:var(--fs-micro);
  color:var(--orange-text);letter-spacing:.06em;
}
.ledger .lg-t{font-family:var(--head);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-h3);line-height:var(--lh-tight);color:var(--ink);}
.ledger .lg-d{font-size:var(--fs-small);color:var(--text-soft);line-height:1.55;max-width:54em;}
.ledger .lg-meta{font-family:var(--mono);font-size:var(--fs-micro);color:var(--text-mute);
  text-transform:uppercase;letter-spacing:.06em;}
@media(min-width:720px){
  .ledger .lg-row{grid-template-columns:64px 1fr;gap:var(--sp-3) var(--sp-6);align-items:baseline;}
  .ledger .lg-row .lg-d,.ledger .lg-row .lg-meta{grid-column:2;}
}
@media(min-width:1080px){
  .ledger .lg-row{grid-template-columns:64px 5fr 6fr;}
  .ledger .lg-row .lg-d{grid-column:3;grid-row:1 / span 2;}
  .ledger .lg-row .lg-meta{grid-column:2;}
}

/* ---- 4c. Case file — framed dossier with mono meta header ---- */
.case-file{
  background:var(--white);
  border:var(--bw-brand) solid var(--black);
  box-shadow:var(--card-shadow);
  position:relative;
}
.case-file .cf-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:var(--bw-brand) solid var(--black);
  background:var(--beige);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);
}
.case-file .cf-head .cf-no{color:var(--orange-text);font-weight:600;}
.case-file .cf-body{padding:var(--sp-5) var(--sp-4) var(--sp-6);}
.case-file .cf-body > image-slot,.case-file > image-slot{border:0;width:100%;}
.case-file .cf-foot{
  border-top:var(--bw-hair) solid var(--line);
  padding:var(--sp-3) var(--sp-4);
  font-family:var(--mono);font-size:var(--fs-micro);color:var(--text-mute);
  display:flex;gap:var(--sp-4);flex-wrap:wrap;
}
/* corner ticks (heavier evolution of .spec-corner) */
.case-file::before,.case-file::after{
  content:"";position:absolute;width:12px;height:12px;
  border:var(--bw-heavy) solid var(--orange);pointer-events:none;
}
.case-file::before{top:-2px;left:-2px;border-right:0;border-bottom:0;}
.case-file::after{bottom:-2px;right:-2px;border-left:0;border-top:0;}
@media(min-width:720px){
  .case-file .cf-body{padding:var(--sp-6) var(--sp-6) var(--sp-7);}
}

/* ---- 4d. Oversized numeral — editorial index moment ---- */
.num-xl{
  font-family:var(--head);font-weight:500;font-size:var(--fs-mega);
  line-height:.8;color:var(--ink);letter-spacing:var(--ls-display);
  font-variant-numeric:tabular-nums;
}
.num-xl.outline{
  color:transparent;
  -webkit-text-stroke:1.5px var(--ink);
}
.num-xl.orange{color:var(--orange-display);}
.band--black .num-xl{color:#fff;}
.band--black .num-xl.outline{color:transparent;-webkit-text-stroke:1.5px var(--steel-on-dark);}
.band--black .num-xl.orange{color:var(--orange);}
/* numeral pinned behind/beside content */
.num-row{display:grid;grid-template-columns:1fr;gap:var(--sp-3);align-items:start;}
@media(min-width:720px){
  .num-row{grid-template-columns:auto 1fr;gap:var(--sp-6);}
  .num-row .num-xl{margin-top:-.06em;}
}

/* ---- 4e. Sticky side-rail (desktop) — section wayfinding/meta ---- */
.rail-layout{display:grid;grid-template-columns:1fr;gap:var(--sp-6);}
.side-rail{display:none;}
@media(min-width:1080px){
  .rail-layout{grid-template-columns:minmax(180px,3fr) 9fr;gap:var(--sp-8);align-items:start;}
  .side-rail{
    display:block;position:sticky;top:106px;
    border-top:var(--bw-heavy) solid var(--black);
    padding-top:var(--sp-4);
  }
  .side-rail .sr-t{font-family:var(--head);font-weight:600;text-transform:uppercase;
    font-size:var(--fs-small);letter-spacing:.06em;color:var(--ink);margin:0 0 var(--sp-3);}
  .side-rail .sr-meta{font-family:var(--mono);font-size:var(--fs-micro);color:var(--text-mute);
    text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:var(--sp-2);}
  .side-rail nav a{display:block;padding:7px 0;font-family:var(--mono);font-size:var(--fs-micro);
    letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute);
    border-bottom:var(--bw-hair) solid var(--line);}
  .side-rail nav a:hover,.side-rail nav a.active{color:var(--orange-text);}
}

/* ============================================================
   5. BUTTON / CTA REFINEMENT (extends existing .btn system)
   ============================================================ */
.btn-lg{padding:18px 30px;font-size:16px;letter-spacing:.05em;}
/* bare directional link — for secondary actions inside dense sections */
.btn-bare{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--head);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-small);letter-spacing:.08em;color:var(--ink);
  border-bottom:var(--bw-heavy) solid var(--orange);padding-bottom:4px;
  transition:color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);
}
.btn-bare:hover{color:var(--orange-text);border-color:var(--ink);}
.btn-bare .arw{transition:transform var(--t-fast) var(--ease-out);}
.btn-bare:hover .arw{transform:translateX(3px);}
.band--black .btn-bare{color:#fff;}
.band--black .btn-bare:hover{color:var(--orange);}
/* mono micro-caption under a CTA (risk-reversal line) */
.cta-fineprint{font-family:var(--mono);font-size:11px;color:var(--text-mute);
  margin-top:var(--sp-3);letter-spacing:.04em;}
.band--black .cta-fineprint{color:var(--text-on-dark-soft);}

/* ============================================================
   6. UTILITIES
   ============================================================ */
.flow > * + *{margin-top:var(--sp-4);}
.flow-lg > * + *{margin-top:var(--sp-6);}
.rule-heavy{height:var(--bw-rule);background:var(--black);border:0;width:64px;margin:0;}
.rule-slab{height:var(--bw-slab);background:var(--orange);border:0;width:100%;margin:0;}
.text-green{color:var(--green-text);}        /* accessible "available/open" text */
.text-orange{color:var(--orange-text);}
.text-mute{color:var(--text-mute);}
.tabular{font-variant-numeric:tabular-nums;}
/* icon box — codified 2.5px-stroke/24-box icon chip */
.ico-24{width:44px;height:44px;border:var(--bw-brand) solid var(--black);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  color:var(--ink);background:var(--white);}
.ico-24 svg{width:24px;height:24px;stroke-width:2.5;}
.ico-24.orange{color:var(--orange-btn);}
.band--black .ico-24{background:transparent;border-color:var(--line-on-dark);color:#fff;}

/* ============================================================
   7. SCROLL-REVEAL (CSS side of motion.js)
   Gated behind html.dtg-motion — motion.js adds the class only
   when IntersectionObserver exists AND the user allows motion.
   Without motion.js (or with reduced motion) everything is
   fully visible: zero risk of hidden content.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  html.dtg-motion [data-reveal]{
    opacity:0;
    transform:translateY(var(--reveal-y));
    transition:
      opacity var(--t-reveal) var(--ease-out),
      transform var(--t-reveal) var(--ease-out);
    transition-delay:var(--reveal-delay,0ms);
  }
  html.dtg-motion [data-reveal="fade"]{transform:none;}
  html.dtg-motion [data-reveal="left"]{transform:translateX(calc(-1 * var(--reveal-x)));}
  html.dtg-motion [data-reveal="right"]{transform:translateX(var(--reveal-x));}
  html.dtg-motion [data-reveal].is-revealed{
    opacity:1;transform:none;
  }
}