/* ============================================================================
   NOVA — HOMEPAGE SECTIONS
   ----------------------------------------------------------------------------
   What this adds, and why the page needed it.

   The homepage was a hero plus four captions floating over one continuous
   particle field. Every section was the same shape — a left column of type on
   an empty ground — so scrolling it felt like one long slide rather than a
   page. Turning it white changed the colour and nothing else.

   The Mac mini page it is measured against alternates: a product moment, then
   a row of highlights, then hard numbers, then a specification, then a close.
   Eighteen sections, ten of them pinned at 100vh, and the grounds alternate
   between white and #F5F5F7 so the eye can tell one idea from the next. That
   alternation is doing more work than any effect on the page — it is what
   makes twenty-five screens legible.

   So the field keeps ONE job — the marking sequence, which is the only thing
   on the page that genuinely needs to move — and the rest of the page is
   ordinary sections with real content in them.
   ========================================================================= */

/* ---- Section grounds ------------------------------------------------------
   Two, alternating. #F5F5F7 is Apple's own second ground: barely a tint, but
   enough to separate one idea from the next without a rule or a border. */
/* Apple's exact pair: #FFFFFF and #F5F5F7. Taking the white from --bg-base
   (#FCFCFD) instead left a visible seam where a section met the body, because
   the body is pure white — two whites a shade apart read as a printing error
   rather than as a section change. */
:root { --home-ground-1: #FFFFFF; --home-ground-2: #F5F5F7; }
html[data-theme="dark"] { --home-ground-1: #000000; --home-ground-2: #0B0C0D; }

.hs { padding-block: clamp(72px, 12vh, 152px); position: relative; z-index: 1; }
.hs--tint { background: var(--home-ground-2); }
.hs__inner { width: min(1080px, calc(100% - 2 * clamp(20px, 5vw, 56px))); margin-inline: auto; }

/* An eyebrow states which part of the product this is. Not decoration: on a
   page this long it is the only thing telling you where you are. */
.hs__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 var(--s-4);
}

/* Apple's headline setting: 600 weight, tight negative tracking, line-height
   barely above 1. The tracking is what stops large type looking like body
   copy blown up. */
.hs__h {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.06;
  margin: 0; max-width: 18ch; text-wrap: balance;
}
.hs__sub {
  margin: var(--s-5) 0 0; max-width: 46ch;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55;
  color: var(--text-secondary);
}

/* ---- Highlights ----------------------------------------------------------
   Three cards, one per thing Nova actually does. Deliberately not a feature
   grid of six: three is what fits on one line at a readable size, and a page
   that claims three things convincingly beats one that lists six. */
.hs__cards {
  display: grid; gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(32px, 5vh, 56px);
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
.hcard {
  background: var(--home-ground-2); border: 1px solid var(--border-hairline);
  border-radius: 18px; padding: clamp(22px, 2.4vw, 30px);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: transform var(--dur-base) var(--ease-out),
            border-color var(--dur-base) var(--ease-out);
}
.hs--tint .hcard { background: var(--home-ground-1); }
@media (hover: hover) {
  .hcard:hover { transform: translateY(-3px); border-color: var(--border-strong); }
}
.hcard__n {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .18em; color: var(--accent);
}
.hcard__h { font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.hcard__p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* ---- The numbers ---------------------------------------------------------
   Every Apple product page has a moment of hard figures. These are counted
   from the shipped data, not rounded up for effect — the paper library really
   does hold 9,058 files. */
.hs__stats {
  display: grid; gap: clamp(20px, 3vw, 40px); margin-top: clamp(32px, 5vh, 56px);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat__n {
  font-size: clamp(38px, 5.6vw, 66px); font-weight: 600;
  letter-spacing: -.04em; line-height: 1;
  /* Proportional figures, deliberately. tabular-nums exists to line digits up
     in a column; on a standalone display number it just makes the spacing
     look loose. */
  font-variant-numeric: proportional-nums;
}
.stat__l {
  margin: var(--s-3) 0 0; font-size: 14px; line-height: 1.5;
  color: var(--text-secondary); max-width: 22ch;
}

/* ---- Boards --------------------------------------------------------------
   The concrete claim on the whole page: not "supports all boards" but the
   five of them, named, with what Nova actually has for each. */
.hs__boards {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 4vh, 44px);
}
.board {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 16px; border-radius: 50px;
  border: 1px solid var(--border-hairline); background: var(--home-ground-2);
  font-size: 14px; font-weight: 500;
}
.hs--tint .board { background: var(--home-ground-1); }
.board i {
  font-style: normal; font-size: 12px; color: var(--text-secondary);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* ---- Close ---------------------------------------------------------------- */
.hs--close { text-align: center; }
.hs--close .hs__h, .hs--close .hs__sub { margin-inline: auto; }
.hs--close .hs__sub { max-width: 38ch; }
.hs__cta { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap;
           margin-top: clamp(26px, 4vh, 40px); }
.hs__fine { margin: var(--s-5) 0 0; font-size: 13px; color: var(--text-secondary); }

/* ---- The field's own section ---------------------------------------------
   The particle field is fixed behind the whole document, so any section that
   is NOT its moment has to be opaque or the cloud shows through the copy.
   This is the one place it is meant to be seen. */
.hs { background: var(--home-ground-1); }
.hs--tint { background: var(--home-ground-2); }
.fieldtrack { position: relative; z-index: 0; }

@media (max-width: 640px) {
  .hs__h { max-width: none; }
  .stat__n { font-size: clamp(34px, 12vw, 48px); }
}