/* home.css. Owner: S2. The home page's own look (merge plan 3.3, "Home").
   Loaded after components.css on / only (shell.mjs, PAGES['']).

   Every full-bleed section is a .band with .band-ink or .band-ground (base.css)
   so the top bar tracks the field colour under it (public/js/chrome.js #3).
   Headings inside .band rise on scroll and .label rules draw themselves
   (sections.css, sections.js) with no data- attributes needed here: that
   wiring reads .band h2 and .label by selector alone. #hero-h rises
   unconditionally on load and #final-h rises with the curtain (CONTRACTS.md).

   Contents
     1  hero, and the three tiles (tools-grid treatment, .cards/.card)
     2  statement
     3  about teaser (band-ground, black and white photo)
     5  three ways (tools-grid treatment)
     6  dashboards / company brains sections
     7  final close
     8  marquee (F9: kept, restyled, drift under full motion only)

   Community band (was 4) removed entirely, 2026-09-26: the community no longer
   exists. Its only rule, .home-community-body, went with it. */

/* ── 1. hero ────────────────────────────────────────────────────────────── */

.home-hero h1 { max-width: 18ch; }
.home-hero .lede { max-width: 46ch; }

.home-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(32px, 4.5vw, 56px);
  /* Conner, 2026-09-26: no red border or box at rest, around the group or
     between the three tiles. Only the hover/focus highlight below shows. */
  background: none;
  border: 0;
}
/* Grid items default to min-width:auto, which floors their width at their
   content's intrinsic size. storyImage() sets width/height attributes from
   the largest srcset candidate, and without this override that intrinsic
   size wins over the 1fr track at narrow widths and forces the row to
   overflow (verified: caused documentElement.scrollWidth > clientWidth at
   375px). object-fit:cover already lets the image itself shrink freely. */
.home-tile { gap: 16px; min-width: 0; }
/* Hover/focus highlight replaces the red box (Conner, 2026-09-26): the tile
   itself lights up with the existing hover fill instead of a border ever
   sitting around it. :focus-within covers the Websites link; the other two
   tiles are not focusable, so :hover alone reaches them. */
:root[data-motion="full"] .home-tile { transition: background-color .15s ease; }
.home-tile:hover,
a.home-tile:focus-within {
  background: var(--ink-lift);
}
.home-tile-media img { min-width: 0; }
.home-tile-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
}
.home-tile-head b { font-size: 1.0625rem; }
.home-tile-head span {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(243, 242, 242, 0.72);
}
.home-tile-media {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border: 2px solid rgba(243, 242, 242, 0.16);
}
.home-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Websites tile sample: the image is the Offshoot home page's full height
   (public/assets/home/offshoot-full.webp, 800x5296, the whole page from the
   hero to the footer, captured at 1440 wide). object-fit:cover crops
   it to the 16/10 box at whatever slice object-position points at. At rest
   that is the top of the page, full width, nothing cut off at the sides
   (Conner, 2026-09-26). On hover or focus, with motion on, it drifts to the
   bottom over a slow linear transition, so the whole page scrolls past, and
   returns the same way on leave. Reduced motion and hover-less touch never
   move it: only :root[data-motion="full"] gets the transition and the
   hover/focus target, so object-position simply stays at top otherwise. */
.home-tile-scroll img { object-position: top; }
:root[data-motion="full"] .home-tile-scroll img { transition: object-position 12s linear; }
@media (hover: hover) {
  :root[data-motion="full"] .home-tile:hover .home-tile-scroll img { object-position: bottom; }
}
:root[data-motion="full"] a.home-tile:focus-within .home-tile-scroll img { object-position: bottom; }
.home-tile-wip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%; height: 100%; padding: 16px;
  background: var(--ink-lift); color: rgba(243, 242, 242, 0.72);
  font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  text-align: center;
}
.home-tile-wip img { width: clamp(56px, 9vw, 84px); height: auto; }

@media (max-width: 900px) { .home-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .home-tiles { grid-template-columns: 1fr; } }

/* ── 2. statement ───────────────────────────────────────────────────────── */
/* .statement-section is the shared component (components.css). Nothing extra
   is needed: one large line, left-aligned in the 1200px column. */

/* ── 3. about teaser ────────────────────────────────────────────────────── */

.home-about {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.home-about-copy > p:not(.home-about-by) {
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem); line-height: 1.4; font-weight: 400;
  max-width: 34ch;
}
.home-about-copy > p:not(.home-about-by) + p:not(.home-about-by) { margin-top: 1em; }
.home-about-by {
  margin-top: 18px;
  font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.home-about-photo { margin: 0; border: 2px solid var(--ink); }
/* Photography prints black and white (brand-visual.md). */
.home-about-photo img { width: 100%; height: auto; display: block; filter: grayscale(1); }

@media (max-width: 860px) {
  .home-about { grid-template-columns: 1fr; }
  .home-about-photo { max-width: 420px; }
}

/* ── 5. three ways ──────────────────────────────────────────────────────── */

.home-ways {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(32px, 4.5vw, 56px);
}
.home-way { min-width: 0; }
.home-way-index {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--red-300);
}
.home-way-tag { color: rgba(243, 242, 242, 0.86); }
.home-way h3 { margin-top: 2px; }
.home-way-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: auto;
  font-weight: 800; font-size: 0.9375rem; color: var(--ground);
}
.home-way-cta span { display: inline-block; }
:root[data-motion="full"] .home-way-cta span { transition: transform 250ms cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  :root[data-motion="full"] .home-way:hover .home-way-cta span { transform: translate(3px, -3px); }
}

@media (max-width: 900px) { .home-ways { grid-template-columns: 1fr; } }

/* ── 6. dashboards / company brains ─────────────────────────────────────── */

.home-tool {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.home-tool-copy p { max-width: 46ch; }
/* O5, 2026-09-25, from Fable's visual review: the description sat directly
   under the h2. It now takes the design system's heading-to-text gap, the
   same one .lede uses (base.css), and paragraphs after it keep a small gap
   of their own. */
.home-tool-copy h2 + p { margin-top: clamp(20px, 2.5vw, 28px); }
.home-tool-copy h2 ~ p + p:not(.eyebrow):not(.soon) { margin-top: 12px; }
.home-tool-copy .eyebrow { margin-top: 4px; }
.home-tool-media {
  aspect-ratio: 16 / 10; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--ink);
}
.home-tool-media .home-tile-wip { background: transparent; color: var(--muted); }
.home-tool-media .home-tile-wip img { width: clamp(90px, 10vw, 140px); }

@media (max-width: 860px) { .home-tool { grid-template-columns: 1fr; } }

/* ── 7. final close ─────────────────────────────────────────────────────── */

.home-final-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px); align-items: end;
}
.home-final-copy h2 { max-width: 16ch; }
.home-final-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

@media (max-width: 800px) {
  .home-final-grid { grid-template-columns: 1fr; row-gap: 28px; }
}

/* ── 8. marquee ──────────────────────────────────────────────────────────
   F9: kept, restyled with the tokens and Archivo 800, same words in the same
   order. .band .band-ink (base.css) supplies the field colour so the top bar
   tracks it correctly; this file only overrides the band's own padding and
   adds the strip's frame and its content. Drift is scoped to full motion
   only: under reduced motion the words simply sit still, never removed. */

.marquee {
  overflow: hidden;
  padding-block: clamp(14px, 2vw, 22px);
  border-block: 2px solid var(--red-300);
}
.marquee-track { display: inline-flex; white-space: nowrap; will-change: transform; }
.marquee-track > span {
  display: inline-flex; align-items: center; gap: 28px; padding-right: 28px;
  font-weight: 800; font-size: clamp(1.15rem, 2.1vw, 2rem);
  letter-spacing: -0.03em; line-height: 1;
}
.marquee-track > span::after {
  content: ""; width: 8px; height: 8px; flex-shrink: 0; background: var(--red-300);
}
:root[data-motion="full"] .marquee-track { animation: home-marquee 32s linear infinite; }
@keyframes home-marquee { to { transform: translateX(-50%); } }