/* ==========================================================================
   Home page sections (Oct 2026 redesign). Loaded after site.css on the home
   page only (front matter `styles`).
     .hh-   hero: TOMMY GANTT with Tommy's cutout standing in front of GANTT
     .tgb-  record band: 13-0, win tally, method numbers, in one row
     .rs-   latest result photo sequence (partials/result-sequence.njk; no longer on
            the homepage since the Oct 30 redesign, kept for reuse)
     .hm-   homepage sections 3 to 10 and the hero buttons (Oct 30 2026 redesign)
   Both sit in the site's .container, so they share the content edge with the
   hero and every section below. Motion: js/motion.js sections 1, 2 and 4.
   Everything here is the static look; reduced motion keeps it.
   ========================================================================== */

/* ---------- Hero ----------
   --g is the size of GANTT and --hero-h the hero height; TOMMY and the figure are
   sized from them. The hero fills the screen under the top bar and nav (about 120px). */
.hh{
  --g:min(34vw, 46svh);
  --hero-h:clamp(560px, calc(100svh - 120px), 940px);
  --name-top:clamp(44px, 10svh, 104px);
  --fh:calc(var(--hero-h) * .84);                 /* figure height on desktop */
  /* The photo is a waist-up shot, so its bottom edge sits on the bottom of the hero.
     Desktop: his head lands about three quarters along GANTT, measured from --edge
     (styles.css), so it follows the container. Head centre is at 49% of the image
     width; width is 1.204 x height. */
  --fig-left:calc(var(--edge) + var(--g) * 1.72 - var(--fh) * .59);
  position:relative;overflow:hidden;isolation:isolate;
  min-height:var(--hero-h);background:#000;color:var(--white);
}
/* Before motion.js takes over, hide what it will animate (never under reduced motion). */
.tg-motion .hh [data-hh-in]:not(.tg-ready),
.tg-motion .hh .hh-l:not(.tg-ready){opacity:0;}
.hh-bg{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse at 50% 60%, #1c1c1c 0%, #090909 60%, #000 100%);
}
/* The text sits in the site's own .container, so it lines up with every section.
   No z-index or transform here, so the name can sit behind Tommy and the copy in front. */
.hh-text{
  position:absolute;top:0;bottom:0;left:0;right:0;
  display:flex;flex-direction:column;justify-content:space-between;
  padding-top:var(--name-top);padding-bottom:clamp(28px, 6svh, 64px);
  pointer-events:none;
}
/* Name block: TOMMY (small, normal spacing) above GANTT, both left-aligned. */
.hh-name{position:relative;z-index:1;align-self:flex-start;display:flex;flex-direction:column;width:max-content;margin:0;}
.hh-word{
  display:flex;overflow:hidden;padding:.02em .02em 0;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  line-height:.86;color:var(--white);white-space:nowrap;
}
/* Clear space between the lines: about 7% of GANTT (12px minimum). GANTT's line box
   carries about 14% of its size as empty space above the capitals, so the margin
   subtracts that. */
.hh-first{
  font-size:max(20px, calc(var(--g) * .1));letter-spacing:.02em;
  margin:0 0 calc(max(12px, var(--g) * .07) - var(--g) * .139);
}
/* GANTT's G carries built-in side space (5.3% of its size); pull it back so the ink
   sits on the content edge. */
.hh-last{font-size:var(--g);letter-spacing:-.005em;margin-left:calc(var(--g) * -.053);}
.hh-l{display:block;}
.hh-figure{
  position:absolute;bottom:0;z-index:2;
  height:var(--fh);width:auto;max-width:none;
  left:var(--fig-left);
  /* soft dark shadow cast left onto GANTT, so he reads as layered in front of it */
  filter:drop-shadow(-26px 18px 36px rgba(0,0,0,.72));
}
.hh-fade{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(0deg, #000 0%, rgba(0,0,0,.7) 8%, rgba(0,0,0,0) 18%);
}
.hh-copy{position:relative;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
/* Tagline and record line: archive labels (same values as .label-archive in site.css;
   the selector is longer to win over the global .hero-tagline / .hero-record rules) */
.hh .hh-copy .hero-tagline,.hh .hh-copy .hero-record{
  margin:0;font-family:var(--font-body);font-size:13px;font-weight:400;line-height:1.7;
  letter-spacing:.24em;text-transform:uppercase;opacity:1;
}
.hh .hh-copy .hero-tagline{color:var(--warm);}
.hh .hh-copy .hero-record{color:var(--warm);}
@media (max-width:767px){
  /* Centred and wide enough to fill the screen, but capped so his head stays below
     TOMMY and both gloves (27% to 70% of the image width) stay on screen. */
  .hh{
    --mh:min(calc(184vw / 1.204), calc(var(--hero-h) - var(--name-top) - 28px - var(--g) * .4));
    --fh:var(--mh);--fig-left:calc(50% - var(--mh) * .602);
  }
  .hh-fade{background:linear-gradient(0deg, #000 0%, rgba(0,0,0,.8) 10%, rgba(0,0,0,0) 22%);}
}

/* ---------- Record band ---------- */
.tgb{
  --tgb-ko:var(--redbar-a);
  --tgb-sub:var(--white);
  --tgb-dec:#6f6f6f;
  position:relative;background:#000;color:var(--white);
  padding:clamp(28px, 4vw, 44px) 0;
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
}
.tgb__inner{display:flex;align-items:flex-end;justify-content:space-between;gap:28px 48px;flex-wrap:wrap;}
.tgb__record{display:flex;align-items:flex-end;gap:clamp(16px, 2vw, 28px);flex-wrap:wrap;}
.tgb__digits{
  display:inline-flex;align-items:baseline;
  font-family:var(--font-display);font-weight:700;font-size:clamp(56px, 6vw, 84px);line-height:.8;
  font-variant-numeric:tabular-nums;color:var(--white);
}
.tgb__wins{display:inline-block;min-width:1.1ch;text-align:right;}
.tgb__sep{padding:0 .04em;color:inherit;}
/* One thin mark per win, as tall as the digits, coloured by method */
.tgb__tally{display:flex;align-items:flex-end;gap:5px;height:clamp(45px, 4.8vw, 67px);}
.tgb__tick{display:block;width:3px;height:100%;border-radius:1px;background:var(--tgb-sub);transform-origin:50% 100%;}
.tgb__tick--ko,.tgb__key--ko{background:var(--tgb-ko);}
.tgb__tick--sub,.tgb__key--sub{background:var(--tgb-sub);}
.tgb__tick--dec,.tgb__key--dec{background:var(--tgb-dec);}
.tgb__label{display:flex;flex-direction:column;color:var(--warm);white-space:pre;}
.tgb__label span:first-child{color:var(--white);}
.tgb__methods{display:flex;gap:clamp(28px, 4vw, 56px);}
.tgb__m{display:flex;flex-direction:column;gap:10px;}
.tgb__mnum{
  font-family:var(--font-display);font-weight:700;font-size:clamp(36px, 3.6vw, 48px);line-height:.8;
  font-variant-numeric:tabular-nums;color:var(--white);
}
.tgb__mlabel{display:inline-flex;align-items:center;gap:8px;color:var(--warm);}
.tgb__key{display:inline-block;width:3px;height:11px;border-radius:1px;}
@media (max-width:767px){
  .tgb__inner{flex-direction:column;align-items:flex-start;gap:24px;}
  .tgb__label{flex-basis:100%;}
  .tgb__methods{width:100%;justify-content:space-between;gap:12px;}
}

/* ---------- Latest result: photo sequence ----------
   Static look (reduced motion, no JS): only the last photo, with the result.
   .rs--seq (desktop, set by motion.js): every photo stacked in a pinned stage.
   Phones with motion: every photo, stacked in the page. */
.rs{
  --rs-h:clamp(560px, 100svh, 980px);   /* motion.js sets the exact height when it pins */
  position:relative;background:#000;color:var(--white);
}
.rs-stage{position:relative;}
.rs-frame{position:relative;display:none;height:var(--rs-h);margin:0;overflow:hidden;background:#000;}
/* Invisible copy of the result lines on earlier photos: keeps the heading at the same height */
.rs-ghost{visibility:hidden;}
.rs-frame--final{display:block;}
.rs-frame picture,.rs-frame img{display:block;}
.rs-frame--cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;}
/* Final photo is a tight portrait of Tommy: full height, at the right edge of the
   content width, fading into black on its left where the text sits. */
.rs-frame--portrait img{
  position:absolute;top:0;right:var(--edge);height:100%;width:auto;max-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 28%);mask-image:linear-gradient(90deg, transparent 0, #000 28%);
}
/* Dark gradient only at the bottom, where the text sits */
.rs-frame--cover:has(.rs-text)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:56%;z-index:1;pointer-events:none;
  background:linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,0) 100%);
}
.rs-text{position:absolute;left:0;right:0;bottom:clamp(36px, 8svh, 84px);z-index:2;}
.rs-kicker{color:var(--warm);margin:0 0 14px;}
.rs .rs-title{
  font-family:var(--font-display);font-weight:500;font-size:clamp(40px, 4.6vw, 64px);line-height:.95;
  letter-spacing:0;text-transform:uppercase;color:var(--white);margin:0 0 22px;max-width:12em;
}
.rs-line{color:var(--white);}
.rs-line span{color:var(--warm);padding:0 .3em;}
.rs-line--meta{color:var(--warm);margin-top:4px;}
.rs-actions{display:flex;gap:28px;flex-wrap:wrap;margin:22px 0 0;}
.rs .rs-actions .arrow-link{color:var(--white);}
.rs .rs-actions .arrow-link:hover{color:var(--warm);}

.rs--seq .rs-stage{height:var(--rs-h);overflow:hidden;}
.rs--seq .rs-frame{display:block;position:absolute;inset:0;}

@media (max-width:767px){
  .tg-motion .rs-frame{display:block;}
  .rs-frame{height:auto;}
  .rs-frame img,.rs-frame--cover img,.rs-frame--portrait img{
    position:static;width:100%;height:auto;-webkit-mask-image:none;mask-image:none;
  }
  .rs-frame:not(:first-child):not(.rs-frame--final) .rs-text,.rs-ghost{display:none;}
  .rs-frame--cover:not(:first-child):not(.rs-frame--final)::after{content:none;}
  .rs-frame:first-child::after,.rs-frame--final::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:72%;z-index:1;pointer-events:none;
    background:linear-gradient(0deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.7) 45%, rgba(0,0,0,0) 100%);
  }
  .rs-text{bottom:28px;}
  .rs .rs-title{font-size:clamp(34px, 10vw, 44px);margin-bottom:16px;}
}

/* ==========================================================================
   Homepage sections 3 to 10 (Oct 30 2026 redesign, .hm-). Spec:
   docs/superpowers/specs/2026-10-30-homepage-redesign-design.md. Colours are the
   palette tokens only; on dark, small labels are --warm and red text is 24px+.
   ========================================================================== */

/* ---------- Shared pieces ---------- */
.hm-sec{padding:72px 0;}
.hm-white{background:var(--white);color:var(--text);}
.hm-k{margin:0;font-family:var(--font-display);font-size:13px;font-weight:400;line-height:1.7;letter-spacing:3px;text-transform:uppercase;color:var(--warm);}
.hm-white .hm-k{color:var(--red-ink);}
.hm-h{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(44px, 6vw, 72px);line-height:.9;letter-spacing:-1px;text-transform:uppercase;color:inherit;}
.hm-h--48{font-weight:500;font-size:clamp(34px, 4vw, 48px);letter-spacing:0;}
.hm-h--88{font-size:clamp(52px, 7vw, 88px);}
/* Outlined word: transparent fill, 2px stroke in the text colour */
.hm-out{color:transparent;-webkit-text-stroke:2px var(--white);}
.hm-white .hm-out{-webkit-text-stroke-color:var(--text);}
.hm-lede{margin:0;max-width:520px;color:var(--warm);}
.hm-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px 24px;margin-bottom:28px;}
.hm-head-l{display:flex;flex-direction:column;gap:10px;}
.hm-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:12px;}
.hm-num{font-family:var(--font-display);font-weight:700;line-height:1;color:var(--red-on-ink);}
.hm-white .hm-num{color:var(--red-ink);}

.hm-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;background:var(--redbar-a);color:var(--white);font-family:var(--font-display);font-size:15px;font-weight:500;letter-spacing:2px;line-height:1;text-transform:uppercase;transition:background .2s ease,color .2s ease;}
.hm-btn:hover,.hm-btn:focus-visible{background:var(--redbar-b);color:var(--white);}
.hm-btn--w{background:var(--white);color:var(--text);}
.hm-btn--w:hover,.hm-btn--w:focus-visible{background:var(--warm);color:var(--text);}
.hm-ln{display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:2px solid var(--redbar-a);font-family:var(--font-display);font-size:14px;font-weight:500;letter-spacing:2px;line-height:1.4;text-transform:uppercase;color:inherit;}
.hm-ln:hover,.hm-ln:focus-visible{color:inherit;border-bottom-color:currentColor;}

/* ---------- 1. Hero buttons, under the record line ---------- */
.hh .hm-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;pointer-events:auto;}

/* ---------- 3 and 7. Tickers: two identical tracks drift left one track width per loop.
   js sets --tk-dur for about 40px a second. Static under reduced motion. ---------- */
.hm-tk{overflow:hidden;}
.hm-tk-move{display:flex;width:max-content;animation:hm-tk var(--tk-dur, 50s) linear infinite;}
.hm-tk:hover .hm-tk-move,.hm-tk:focus-within .hm-tk-move{animation-play-state:paused;}
@keyframes hm-tk{to{transform:translateX(-50%);}}
.hm-tk-track{display:flex;align-items:center;margin:0;padding:0;list-style:none;white-space:nowrap;}
.hm-tk--red{display:flex;align-items:center;min-height:52px;background:var(--redbar-a);color:var(--white);}
.hm-tk--red li{font-family:var(--font-display);font-size:17px;font-weight:600;line-height:1;letter-spacing:3px;text-transform:uppercase;}
.hm-tk--red li::after{content:"\00B7";margin:0 22px;}
.hm-tk--logos{border-top:1px solid var(--rule-ink);border-bottom:1px solid var(--rule-ink);}
.hm-tk--logos .hm-tk-track{gap:110px;padding:30px 110px 30px 0;}
.hm-logo{display:block;opacity:.92;transition:opacity .2s ease;}
.hm-logo:hover,.hm-logo:focus-visible{opacity:1;}
.hm-logo img{height:76px;width:auto;max-width:170px;object-fit:contain;}
.hm-logo-slot{display:inline-flex;align-items:center;padding:16px 24px;border:1.5px dashed var(--rule-ink-strong);font-family:var(--font-display);font-size:13px;letter-spacing:3px;line-height:1;text-transform:uppercase;color:var(--warm);transition:border-color .2s ease,color .2s ease;}
.hm-logo-slot:hover,.hm-logo-slot:focus-visible{border-color:var(--redbar-a);color:var(--white);}
@media (prefers-reduced-motion:reduce){
  .hm-tk-move{animation:none;width:auto;}
  .hm-tk .hm-dup{display:none;}
  .hm-tk-track{flex-wrap:wrap;justify-content:center;white-space:normal;width:100%;}
  .hm-tk--red .hm-tk-track{gap:8px 28px;padding:12px var(--gutter);}
  .hm-tk--red li::after{content:none;}
  .hm-tk--logos .hm-tk-track{gap:32px 64px;padding:30px var(--gutter);}
}

/* ---------- 4. Latest result / next fight: copy left, photo right with an angled edge ---------- */
/* The copy sits in the site .container (left half); the photo fills the right half of the screen. */
.hm-fight{position:relative;background:var(--ink);color:var(--white);}
.hm-fight-inner{display:flex;align-items:center;min-height:560px;}
.hm-fight-copy{display:flex;flex-direction:column;justify-content:center;gap:16px;width:50%;padding:72px 48px 72px 0;}
.hm-fight-meta{margin:0;color:var(--warm);}
.hm-stats{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:8px;}
.hm-stat{display:flex;flex-direction:column;}
.hm-stat-v{font-family:var(--font-display);font-size:34px;font-weight:700;line-height:1.2;text-transform:uppercase;}
.hm-stat-l{font-family:var(--font-display);font-size:11px;line-height:1.7;letter-spacing:3px;text-transform:uppercase;color:var(--warm);}
.hm-fight-fig{position:absolute;top:0;right:0;bottom:0;width:50%;margin:0;overflow:hidden;background:var(--ink);clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);}
.hm-fight-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;}
.hm-fight-fig .hf-video{position:absolute;inset:0;aspect-ratio:auto;box-shadow:none;}

/* ---------- 5. The Story: six era tiles ---------- */
.hm-story .hm-k{color:var(--text);}
.hm-story .hm-h{font-weight:600;letter-spacing:0;}
.hm-story-line{margin:0;max-width:360px;}
.hm-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;}
.hm-tile{display:flex;flex-direction:column;gap:10px;color:var(--text);}
.hm-tile:hover,.hm-tile:focus-visible{color:var(--text);}
.hm-tile-img{display:block;height:220px;overflow:hidden;background:var(--text);}
.hm-tile-img picture,.hm-tile-img img{display:block;width:100%;height:100%;}
.hm-tile-img img{object-fit:cover;transition:transform .5s ease;}
.hm-tile:hover .hm-tile-img img{transform:scale(1.04);}
.hm-tile-label{font-family:var(--font-display);font-size:14px;line-height:1.3;letter-spacing:2px;text-transform:uppercase;}

/* ---------- 6. Latest coverage ---------- */
.hm-press-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.hm-press-note{margin:0;font-size:13px;color:var(--muted);}
.hm-press-note a{color:var(--red-ink);border-bottom:1px solid var(--red-ink);}
.hm-pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--text);}
.hm-pcard{display:flex;flex-direction:column;gap:14px;padding:24px 24px 28px;border-right:1px solid var(--rule-paper);color:var(--text);}
.hm-pcard:first-child{padding-left:0;}
.hm-pcard:last-child{padding-right:0;border-right:0;}
.hm-pcard:hover,.hm-pcard:focus-visible{color:var(--text);}
.hm-pcard-img{display:block;height:200px;overflow:hidden;background:var(--ink);}
.hm-pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.hm-pcard:hover .hm-pcard-img img{transform:scale(1.04);}
.hm-pcard-meta{font-family:var(--font-display);font-size:13px;line-height:1.4;letter-spacing:3px;text-transform:uppercase;color:var(--gray-text);}
.hm-pcard-title{font-size:18px;font-weight:500;line-height:1.35;}

/* ---------- 7. In the Corner ---------- */
.hm-corner{background:var(--ink);color:var(--white);border-top:1px solid var(--rule-ink);}
.hm-corner-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start;padding-top:72px;padding-bottom:56px;}
.hm-corner-l{display:flex;flex-direction:column;gap:16px;}
.hm-corner .hm-lede{max-width:400px;}
.hm-perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;border-left:1px solid var(--rule-ink);}
.hm-perks li{display:flex;flex-direction:column;gap:12px;padding:8px 28px;border-right:1px solid var(--rule-ink);}
.hm-perks li:last-child{border-right:0;}
.hm-perks .hm-num{font-size:44px;}
.hm-perk-t{font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.1;text-transform:uppercase;}
.hm-perk-d{font-size:14px;line-height:1.6;color:var(--warm);}

/* ---------- 8. Quote strip ---------- */
.hm-quote{background:var(--panel);color:var(--white);border-top:1px solid var(--rule-ink);border-bottom:1px solid var(--rule-ink);}
.hm-quote-grid{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:40px;align-items:center;min-height:120px;padding-top:28px;padding-bottom:28px;}
.hm-q{display:flex;flex-direction:column;gap:8px;margin:0;}
.hm-q blockquote{margin:0;}
.hm-q blockquote p{margin:0;font-family:var(--font-display);font-size:22px;font-weight:500;line-height:1.25;text-transform:uppercase;color:var(--white);}
.hm-q figcaption{font-family:var(--font-display);font-size:12px;line-height:1.6;letter-spacing:3px;text-transform:uppercase;color:var(--warm);}
.hm-q cite{font-style:normal;}
.hm-q-nav{display:flex;gap:10px;}
.hm-q-nav button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--rule-ink-strong);background:transparent;color:var(--white);cursor:pointer;transition:border-color .2s ease;}
.hm-q-nav button:hover,.hm-q-nav button:focus-visible{border-color:var(--white);}

/* ---------- 9. Work with Tommy ---------- */
.hm-work-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start;}
.hm-work-l{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px;}
.hm-work .hm-h{line-height:1;}
.hm-rows{display:flex;flex-direction:column;}
.hm-row{display:grid;grid-template-columns:72px minmax(0,1fr) 48px;gap:24px;align-items:center;padding:18px 0;border-top:1px solid var(--text);color:var(--text);transition:transform .25s ease,border-color .25s ease;}
.hm-row:first-child{border-top-width:2px;}
.hm-row:last-child{border-bottom:2px solid var(--text);}
.hm-row:hover,.hm-row:focus-visible{color:var(--text);transform:translateX(8px);border-top-color:var(--redbar-a);}
.hm-row .hm-num{font-size:40px;}
.hm-row-t{font-family:var(--font-display);font-size:34px;font-weight:600;line-height:1;text-transform:uppercase;}
.hm-row-arrow{justify-self:end;}
@media (prefers-reduced-motion:reduce){.hm-row{transition:none;}.hm-row:hover,.hm-row:focus-visible{transform:none;}}

/* ---------- 10. Be first to know ---------- */
.hm-alerts{background:var(--ink);color:var(--white);border-top:14px solid var(--redbar-a);}
.hm-alerts-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center;padding-top:72px;padding-bottom:64px;}
.hm-alerts-grid--solo{grid-template-columns:minmax(0,1fr);}
.hm-alerts-l{display:flex;flex-direction:column;gap:18px;}
.hm-signup{position:relative;max-width:560px;margin-top:6px;}
.hm-hp{display:none;}
.hm-signup-row{display:flex;}
.hm-signup input[type="email"]{flex:1;min-width:0;height:52px;padding:0 16px;border:1.5px solid var(--white);border-right:0;border-radius:0;background:transparent;color:var(--white);font:inherit;font-size:15px;}
.hm-signup input[type="email"]::placeholder{color:var(--warm);opacity:.75;}
.hm-signup input[type="email"]:focus{outline:2px solid var(--warm);outline-offset:2px;}
.hm-signup button{height:52px;padding:0 26px;border:0;border-radius:0;background:var(--redbar-a);color:var(--white);font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .2s ease;}
.hm-signup button:hover,.hm-signup button:focus-visible{background:var(--redbar-b);}
.hm-signup button:disabled{opacity:.6;cursor:wait;}
.hm-ts:empty{display:none;}
.hm-signup-msg{min-height:1.6em;margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--warm);}
.hm-signup-msg.is-error{color:var(--white);}
.hm-ig{align-self:flex-start;margin:6px 0 0 52px;}
.hm-post{display:flex;flex-direction:column;gap:14px;padding-left:48px;border-left:1px solid var(--rule-ink);color:var(--white);}
.hm-post:hover,.hm-post:focus-visible{color:var(--white);}
.hm-post-img{display:block;height:220px;overflow:hidden;background:var(--text);}
.hm-post-img picture,.hm-post-img img{display:block;width:100%;height:100%;object-fit:cover;}
.hm-post-t{font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.05;text-transform:uppercase;}
.hm-post-d{font-size:14px;color:var(--warm);}
.hm-post .hm-ln{align-self:flex-start;}

/* ---------- Tablet and phone: every split stacks, photo first ---------- */
@media (max-width:900px){
  .hm-fight{display:flex;flex-direction:column;}
  .hm-fight-fig{position:relative;order:-1;width:100%;height:min(72vw, 460px);clip-path:none;}
  .hm-fight-inner{min-height:0;}
  .hm-fight-copy{width:100%;padding:48px 0 56px;}
  .hm-corner-grid,.hm-work-grid,.hm-alerts-grid{grid-template-columns:minmax(0,1fr);gap:40px;}
  .hm-perks{grid-template-columns:minmax(0,1fr);border-left:0;}
  .hm-perks li{padding:20px 0;border-right:0;border-top:1px solid var(--rule-ink);}
  .hm-work-l{position:static;}
  .hm-post{padding:32px 0 0;border-left:0;border-top:1px solid var(--rule-ink);}
  .hm-quote-grid{grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;}
  .hm-quote-grid > .hm-k{grid-column:1 / -1;}
  .hm-tiles{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:767px){
  .hm-sec{padding:56px 0;}
  .hm-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;}
  .hm-tile-img{height:200px;}
  .hm-press-side{align-items:flex-start;}
  .hm-pcards{grid-template-columns:minmax(0,1fr);}
  .hm-pcard,.hm-pcard:first-child,.hm-pcard:last-child{padding:24px 0;border-right:0;border-bottom:1px solid var(--rule-paper);}
  .hm-row{grid-template-columns:44px minmax(0,1fr) 28px;gap:14px;}
  .hm-row .hm-num{font-size:28px;}
  .hm-row-t{font-size:24px;}
  .hm-row-arrow{width:24px;height:24px;}
  .hm-corner-grid{padding-top:56px;padding-bottom:48px;}
  .hm-alerts-grid{padding-top:56px;padding-bottom:56px;}
  .hm-signup button{padding:0 18px;}
}