/* ————— HHG WEB · 2026 — page-scoped composition, tokens only —————
   the band grammar: 1991 self-paced training-manual cover, re-cut on EPOQ III.
   resting law: image at 0 on the glass stage · hover: image very dimmed, pills pop.
   the "new" mark: --novel (minted into epoq3 2026-07-08) — the apparatus's new reading. */
.hhg { max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* ONE rhythm: epoq3's generic section+section padding would stack on this page's
   own margins and double every gap — the composition owns the beat, margins only. */
.hhg section { padding-top: 0; }

/* masthead */
.hhg-mast { display: flex; justify-content: space-between; align-items: center;
  min-height: var(--space-4); border-bottom: var(--hairline) solid var(--line-box); }
.hhg-mast nav a { text-decoration: none; }

/* tier kickers + index rows */
.kick { display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--section-gap); color: var(--grey-51); }
.kick a { color: var(--grey-51); text-decoration: none; }
.ixrow { display: grid; grid-template-columns: calc(3 * var(--grid-unit)) 1fr max-content;
  align-items: center; height: var(--grid-unit);
  border-top: var(--hairline) solid var(--line-box); text-decoration: none; color: var(--ink); }
.ixrow:last-of-type { border-bottom: var(--hairline) solid var(--line-box); }

/* [4] the dispatch teaser row — real pull-quote + caption + Read Now, the way
   the previous site cross-promoted Substack. Cards, not a list — three per row
   (units never stretch, D-020 re-wraps). The button is epoq3's own .ctl-btn —
   print square, never the old site's rounded pill; content replicated, chrome is ours. */
.dcards { display: flex; flex-wrap: wrap; gap: var(--gutter); margin-top: var(--grid-unit); }
.dcard { width: var(--col); display: flex; flex-direction: column; }
.dquote { color: var(--ink); }
.dcap { color: var(--grey-51); margin-top: var(--space-2); }
.dcard .ctl-btn { margin-top: var(--space-2); align-self: flex-start; text-decoration: none; }
.ixrow .serif-8-caps { color: var(--grey-51); }
.ixrow .serif-8-caps, .ixrow .t { transition: color .15s ease; }
.ixrow:hover .serif-8-caps { color: var(--novel); }        /* the register lights its numerals */
.ixrow:active { background: var(--ink-03); }
.ix { margin-top: var(--grid-unit); }

/* definition rows — the principles register: numeral · term · meaning */
.defrow { display: grid;
  grid-template-columns: calc(3 * var(--grid-unit)) calc(6 * var(--grid-unit)) 1fr;
  align-items: baseline; padding-block: var(--grid-half);
  border-top: var(--hairline) solid var(--line-box); }
.defrow:last-of-type { border-bottom: var(--hairline) solid var(--line-box); }
.defrow .serif-8-caps { color: var(--grey-51); transition: color .15s ease; }
.defrow:hover .serif-8-caps { color: var(--novel); }
.defrow .d { max-width: var(--measure-reading); }
@media (max-width: 900px) { .defrow { grid-template-columns: calc(2 * var(--grid-unit)) 1fr; }
  .defrow .d { grid-column: 2; } }

/* hero block */
.hero-kick { margin-top: var(--space-4); color: var(--grey-51); }
.hero h1 { margin-top: var(--space-1); }
.hero .lede { margin-top: var(--space-2); max-width: var(--measure-reading); }
.prose { margin-top: var(--subsection-gap); }
.prose p { max-width: var(--measure-reading); margin-top: var(--space-2); }
/* index blocks entering straight after the hero take the subsection beat */
.hero + .cards, .hero + .tiles, .hero + .ix { margin-top: var(--space-4); }
.prose blockquote { max-width: var(--measure-reading); margin-top: var(--space-2); padding-left: var(--grid-half);
  border-left: var(--hairline) solid var(--line-box); }

/* the band stack */
.bstack { margin-top: var(--section-gap); }
.stage { position: relative; background: var(--glass-stage); display: block; overflow: hidden;
  border: 1px solid; border-color: var(--paper-90) var(--ink-03) var(--ink-03) var(--paper-90); }  /* the WIN95 relief, lightened — ink-12 read too dark against the near-white ascii ground */
.stage-hero { height: calc(10 * var(--grid-unit)); }
.stage-card { height: calc(6 * var(--grid-unit)); }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 1; transition: opacity .15s ease; }   /* resting: the clean specimen */
.stage:hover img { opacity: .2; }                 /* hover: the image dims to the stage */
.stage .pl { position: absolute; left: var(--grid-unit); top: calc(var(--grid-unit) - 12px); display: flex; gap: var(--s-2); }
.stage .pr { position: absolute; right: var(--grid-unit); top: calc(var(--grid-unit) - 12px); }
.stage .bl { position: absolute; left: var(--grid-unit); bottom: calc(var(--grid-unit) - 12px); }
.stage .br { position: absolute; right: var(--grid-unit); bottom: calc(var(--grid-unit) - 12px); }
.stage-card .pl { left: var(--grid-half); }
.stage-card .br { right: var(--grid-half); }
/* the label DEVELOPS on hover (specimen grammar): hidden on the clean image,
   then the .on flip — ink chip, paper text — as the image dims */
.stage .ctl-pill { background: var(--paper-62); color: var(--graphite); white-space: nowrap;
  opacity: 0; transition: opacity .15s ease, background-color .15s ease, color .15s ease; }
.stage:hover .ctl-pill { opacity: 1; background: var(--paper); color: var(--ink); border-color: var(--ink-12); }
@media (hover: none) { .stage .ctl-pill { opacity: 1; } }  /* touch: the label is always developed */
/* the stripe is the stack's LED — it wears the relief and answers any hover
   in the [1] apparatus: the light rises into the colour; the press inks it. */
.stripe { height: var(--grid-quarter); background: var(--novel);
  border: 1px solid; border-color: var(--glass-tint) var(--ink-40) var(--ink-40) var(--glass-tint);
  transition: background-color .15s ease; }
.bstack:hover .stripe { background: color-mix(in srgb, var(--novel) 82%, var(--paper)); }
.bstack:active .stripe { background: var(--ink); }

/* the intro band — the taller box that says what the thing IS.
   Light tier — lighter than the manual rows below it (s1 sits at 16% ink;
   this sits at 8%) — black text, the light-chip bevel. */
.bintro { background: color-mix(in srgb, var(--ink) 8%, var(--paper)); color: var(--ink); padding: var(--grid-unit);
  border: 1px solid; border-color: var(--paper-90) var(--ink-12) var(--ink-12) var(--paper-90); }
.bintro .serif-8-caps { color: var(--grey-51); }
.bintro .serif-body-1 { color: var(--ink); max-width: var(--col-2); margin-top: var(--space-1); }

/* manual rows — with the WIN95 RELIEF (subtle): 1px bevel, light enters
   top-left, shadow exits bottom-right. Hover deepens the chip and lights the
   mono readout in --novel; press INVERTS the bevel and flips to ink (the
   epoq3 press law: a hard ink flip, not a bounce). Colour/opacity only,
   ≤.15s, staggered — no transforms. */
.brow { display: flex; justify-content: space-between; align-items: center;
  height: var(--grid-unit); padding-inline: var(--grid-unit); text-decoration: none; color: var(--ink);
  border: 1px solid;
  border-color: var(--paper-90) var(--ink-12) var(--ink-12) var(--paper-90);
  transition: background-color .12s ease, border-color .12s ease; }
.brow .serif-body-1, .brow .serif-8-caps { transition: color .15s ease .03s; }
.brow .serif-8-caps { color: var(--grey-51); }
.brow.s1 { background: color-mix(in srgb, var(--ink) 16%, var(--paper)); }
.brow.s2 { background: color-mix(in srgb, var(--ink) 11%, var(--paper)); }
.brow.s3 { background: color-mix(in srgb, var(--ink)  6%, var(--paper)); }
.brow.s4 { background: color-mix(in srgb, var(--ink)  2%, var(--paper)); }
a.brow:hover.s1 { background: color-mix(in srgb, var(--ink) 21%, var(--paper)); }
a.brow:hover.s2 { background: color-mix(in srgb, var(--ink) 15%, var(--paper)); }
a.brow:hover.s3 { background: color-mix(in srgb, var(--ink) 10%, var(--paper)); }
a.brow:hover.s4 { background: color-mix(in srgb, var(--ink)  6%, var(--paper)); }
a.brow:hover .serif-8-caps { color: var(--novel); }         /* the readout lights */
a.brow:active { background: var(--ink);
  border-color: var(--ink-12) var(--paper-90) var(--paper-90) var(--ink-12); }  /* the bevel sinks */
a.brow:active .serif-body-1, a.brow:active .serif-8-caps { color: var(--paper); transition-delay: 0s; }
a.brow:focus-visible { outline: var(--focus-ring) solid var(--ink); outline-offset: var(--focus-offset); }

/* venture cards — units never stretch, rows re-wrap (D-020) */
.cards { display: flex; flex-wrap: wrap; gap: var(--gutter); margin-top: var(--grid-unit); }
.card { width: var(--col); flex: 0 0 var(--col); min-width: 0; }
.card .brow { padding-inline: var(--grid-half); overflow: hidden; }

/* ventures page — the apparatus register: title bands on the ink scale, the new reading in --novel */
.vband { display: flex; align-items: center; gap: var(--s-2); height: var(--space-4);
  padding-inline: var(--grid-half); color: var(--paper);
  border: 1px solid;
  border-color: var(--glass-tint) var(--ink-40) var(--ink-40) var(--glass-tint);  /* the title-bar relief */
  transition: border-color .12s ease; }
.vband .serif-8-caps { color: inherit; opacity: .82; }
.vband .serif-heading-3 { color: inherit; }   /* the band's ink rules the type, not the role's default */
a.vband { transition: border-color .12s ease, background-color .15s ease .03s; }
a.vband:hover { border-color: var(--paper-62) var(--ink-40) var(--ink-40) var(--paper-62); }  /* the light rises */
a.vband:active { border-color: var(--ink-40) var(--glass-tint) var(--glass-tint) var(--ink-40); }  /* the press sinks */
/* the breath — hover lifts paper into each band's own ink; the pill-breath grammar */
a.vband.v-novel:hover    { background: color-mix(in srgb, var(--novel)    84%, var(--paper)); }
a.vband.v-ink:hover      { background: color-mix(in srgb, var(--ink)      84%, var(--paper)); }
a.vband.v-graphite:hover { background: color-mix(in srgb, var(--graphite) 84%, var(--paper)); }
a.vband.v-grey:hover     { background: color-mix(in srgb, var(--grey-51)  84%, var(--paper)); }
/* the press: the new reading presses DEEP but stays itself; the ink-scale presses to ink */
a.vband.v-novel:active   { background: color-mix(in srgb, var(--novel) 60%, var(--ink)); }
a.vband.v-ink:active, a.vband.v-graphite:active, a.vband.v-grey:active { background: var(--ink); }
.vband.v-novel { background: var(--novel); }
.vband.v-ink { background: var(--ink); }
.vband.v-graphite { background: var(--graphite); }
.vband.v-grey { background: var(--grey-51); }
.vband.v-ink60 { background: var(--ink-60); }
.vband.v-ink40 { background: var(--ink-40); color: var(--ink); }

/* playground — the contact sheet: 180 tiles (--viewport-thumb) */
.tiles { display: flex; flex-wrap: wrap; gap: var(--gutter); margin-top: var(--grid-unit); }
.tile { width: var(--viewport-thumb); text-decoration: none; color: var(--ink); }
.tile .stage { height: var(--viewport-thumb); }
.tile .stage .ctl-pill { position: absolute; left: var(--grid-half); top: var(--grid-half); }
.tile .tname { display: block; margin-top: var(--s-1); }
.tile .ttag { display: block; color: var(--grey-51); }

/* project plates — 3 × 400×480 figures; >3 slides vertically */
.plates { display: flex; gap: var(--gutter); margin-top: var(--space-4);
  max-height: calc(var(--stage) + var(--space-4)); overflow-y: auto; flex-wrap: wrap; }
.plate { width: var(--col); }
.plate .stage { height: var(--stage); }
.plate .figcap { display: block; margin-top: var(--s-1); color: var(--grey-51); }
.plate .stage .ctl-pill { position: absolute; left: var(--grid-half); top: var(--grid-half); }
.plate .stage .pn { position: absolute; right: var(--grid-half); bottom: var(--grid-half); left: auto; top: auto; }

/* request-access — the epoq3 field register */
.rform { max-width: var(--measure-reading); margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--grid-half); }
.rform .field input, .rform .field textarea { width: 100%; }
.rform .ctl-btn.primary { margin-top: var(--grid-half); align-self: flex-start; }

/* footer */
.hhg-foot { margin-top: var(--section-gap); border-top: var(--hairline) solid var(--line-box);
  min-height: var(--space-4); display: flex; justify-content: space-between; align-items: center;
  color: var(--grey-51); flex-wrap: wrap; gap: var(--s-1); }
.hhg-foot a { color: var(--grey-51); text-decoration: none; }
.hhg-colophon { color: var(--grey-51); padding-bottom: var(--s-2); }

@media (max-width: 900px) {
  .stage-hero { height: calc(8 * var(--grid-unit)); }
  .stage .pr { display: none; }
  .ixrow { grid-template-columns: calc(2 * var(--grid-unit)) 1fr max-content; }
}
@media (max-width: 480px) {
  .card { width: 100%; }
  .stage-hero { height: calc(6 * var(--grid-unit)); }
  .hhg-mast nav { display: none; }
}