/* Every number here was read out of hellome.studio's shipped bundle, not
   eyeballed. docs/REFERENCE.md records what came from where. */

@font-face {
  font-family: 'Favorit';
  src: url('../fonts/CargoFavoritVariable.woff2') format('woff2-variations'),
       url('../fonts/CargoFavoritVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Favorit';
  src: url('../fonts/CargoFavoritItalicVariable.woff2') format('woff2-variations'),
       url('../fonts/CargoFavoritItalicVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  /* Ioskeley Mono v2.1.0: an Iosevka build tuned to Berkeley Mono's forms.
     OFL 1.1, licence beside the file. Swapped in for DM Mono 28 Sep 2026. */
  font-family: 'Ioskeley Mono';
  src: url('../fonts/IoskeleyMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- face -------------------------------------------------------------
     The reference runs one variable font (HM-001-010GX) for everything, with
     italic as a variation axis rather than a second file. Favorit is the
     nearest thing already vendored here and matches its neo-grotesque colour.
     Swap this one line to change the whole site's voice. */
  --font: 'Favorit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Ioskeley Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- ink --------------------------------------------------------------- */
  --ink: #232323;          /* reference's text colour, not pure black */
  --ink-dim: #a5a5a5;      /* the greyed current-section item in the nav */
  --paper: #ffffff;
  --pill: #ebebeb;         /* the ••• pill ground */

  /* --- grid -------------------------------------------------------------
     25 columns inside a 98px page margin, hairline gutters. Straight out of
     the laygridder CSS:
       .lg-span-N { width: calc((100% - 196px) / 25 * N - 0.096%) }
       .lg-push-N.first-child { margin-left: calc(98px + (100% - 196px)/25*N + 0.004%) } */
  --cols: 25;
  --page-margin: 98px;
  --col-shave: 0.096%;     /* taken off every span */
  --col-nudge: 0.004%;     /* added to every push */
  --gutter: 0.1%;          /* between two columns in the same row */

  /* --- vertical rhythm, from #laygrid_post_24 .lg-row-N margin-bottom ----- */
  --row-gap-tight: 0.4%;   /* media -> its caption */
  --row-gap: 5%;           /* caption -> next work */

  /* --- type -------------------------------------------------------------
     The reference's text-format roles, verbatim. Sizes are the >=1025px step. */
  --t-body: 17px;          /* Default / Bodytext / Index / Menu */
  --t-body-lh: 1.1;
  --t-medium: 15px;        /* Medium / Projecttitle */
  --t-caption: 13px;       /* Captions */
  --t-big: 21px;           /* Bodytext_Big */
  --t-punch: 50px;         /* Punchline, lh 1 */
  --t-index: 80px;         /* Index_Big, lh .85 */
  --track: 0.0125em;       /* on everything up to Bodytext_Big */
  --track-punch: -0.009em;
  --track-index: -0.02em;
  --para-gap: 20px;        /* every role's margin-bottom */

  /* --- chrome ------------------------------------------------------------ */
  --nav-line: 30px;        /* #nav a.frontpage line-height; the slider steps by this */
  --nav-pad: 10px 10px 8px 10px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --t-fast: 200ms;         /* #nav colour/opacity */
  --t-mid: 300ms;          /* caption fade, content fade-in */
}

/* The reference's own breakpoints: the desktop grid starts at 701px, the type
   scale steps at 1025px. */
@media (max-width: 1024px) {
  :root { --t-body: 17px; --t-punch: 40px; --t-index: 56px; }
}
@media (max-width: 700px) {
  :root {
    --page-margin: 15px;
    --cols: 1;
    --t-punch: 30px;
    --t-index: 40px;
    --row-gap: 12%;
  }
}