/* ==========================================================================
   The Harbour — design tokens
   Vendored from the design system at design-import/portfolio-page-v2/_ds/.
   Self-contained on purpose: this page deploys as a standalone folder and
   must not reach outside itself for anything.
   ========================================================================== */

/* Display face: Bricolage Grotesque, not Harbour's specified Space Grotesk.
   The system calls for "a geometric grotesque over a serif" and this keeps
   that structure; what changes is which grotesque. Space Grotesk is one of
   the faces every generated interface converges on, which is the opposite of
   what a page arguing for one person should sound like. Bricolage carries an
   optical-size axis, so the 12px tracked labels and the display headline get
   separately drawn cuts instead of one outline stretched across both.
   Serif and mono are unchanged.

   The opsz range starts at 12. An earlier revision of this file requested
   10..48; Google returns HTTP 400 for that family and — because this is a
   multi-family request — silently drops it and serves the other two with a
   200. There is no console error and no failed request, so the page rendered
   every heading in Arial with nothing to indicate it. Do not lower this
   number without checking what the URL actually returns. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..48,400..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ---------------------------------------------------------------------------
   LOCAL HOSTING — prepared, not yet active.

   This file's own header states the page "must not reach outside itself for
   anything", and the @import above breaks that: it render-blocks on a third
   party that fails open and silent, and a recruiter on a locked-down
   corporate network or hotel wifi gets Arial and Georgia.

   To switch: download the three families into assets/fonts/, uncomment the
   block below, and delete the @import above. woff2 only — every browser that
   matters has supported it for years, and a second format doubles the weight
   for no one. Keep font-display: swap so text paints immediately in the
   fallback rather than staying invisible.

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-variable.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italic-variable.woff2") format("woff2-variations");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
--------------------------------------------------------------------------- */

:root {
  /* base inks — sampled from Monet, Impression, Sunrise */
  --fog: #DCE4E8;
  --night: #1E2B38;
  --ink: #2C3A47;
  --mist: #6D89A0;
  --sun: #E0552C;
  --sun-deep: #C9430F;
  --sun-lift: #DD4B1F;
  --sky: #E6CBB3;
  --sky-head: #F0DDC4;

  /* mixes derived from the base inks — no new hues are introduced */
  --fog-edge: color-mix(in srgb, var(--mist) 18%, var(--fog));
  --tag-fill: color-mix(in srgb, var(--mist) 34%, var(--fog));
  --night-edge: color-mix(in srgb, var(--sky) 22%, var(--night));
  --ink-quiet: color-mix(in srgb, var(--ink) 55%, var(--fog));

  /* semantic — light ground (default) */
  --surface-page: var(--fog);
  --text-heading: var(--ink);
  --text-body: var(--ink);
  --text-quiet: var(--mist);
  --accent: var(--sun);
  --accent-press: var(--sun-deep);
  /* Dark ink on the hot fill. Harbour's own pairing (fog on sun) measures
     2.96:1 — the primary call to action and the "Open to work" state were the
     two least legible things on a page whose job is to deliver exactly those
     two. The fill is untouched, so the accent still reads as the accent. */
  --on-accent: var(--night);
  --rule: var(--fog-edge);
  --tag-bg: var(--tag-fill);
  --tag-text: var(--ink);

  /* type — grotesk declares, serif explains, mono annotates */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --w-display: 700;
  --w-label: 500;
  --w-body: 400;
  --w-body-strong: 600;

  --track-display: -0.03em;
  --track-heading: -0.02em;
  --track-eyebrow: 0.16em;
  --track-mono: 0.01em;

  --size-display: 64px;
  --size-h1: 44px;
  --size-h2: 30px;
  --size-h3: 22px;
  --size-lead: 20px;
  --size-body: 18px;
  --size-small: 15px;
  --size-eyebrow: 12px;
  --size-mono: 12px;

  --lh-display: 1.04;
  --lh-heading: 1.14;
  --lh-body: 1.55;

  --measure-body: 62ch;
  --measure-lead: 46ch;

  /* spacing — 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* page frame */
  --page-max: 1160px;
  --page-gutter: var(--s-8);
  --label-col: 200px;
  /* Nested label column, one level down from --label-col — used where a
     .beat's own heading sits beside its content, inside #work only. */
  --beat-label-col: 176px;

  /* structure — sharp corners, no shadows, hairlines only */
  --radius: 0px;
  --shadow: none;
  --border-rule: 1px solid var(--rule);
  /* The ring uses the pressed accent, not the accent: --sun against --fog is
     2.96:1, under WCAG 1.4.11's 3:1 floor for a non-text indicator. --sun-deep
     clears it on fog, and on the night ground --accent-press resolves to
     --sun, which clears it there. An outer ink hairline (see :focus-visible in
     page.css) guarantees an edge on either ground regardless. */
  --focus-ring: 2px solid var(--accent-press);
  --focus-offset: 3px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 160ms;

  /* two-ink plate */
  --plate-dot: 1px;
  --plate-ink-a: var(--sun);
  --plate-ink-b: var(--ink);
}

/* semantic — dark ground. Applied by scope, never hard-coded per component. */
.harbour-night {
  --surface-page: var(--night);
  --text-heading: var(--sky-head);
  --text-body: var(--sky);
  --text-quiet: var(--mist);
  --accent: var(--sun-lift);
  --accent-press: var(--sun);
  /* Same correction on the night ground: sky-head on sun-lift was 3.11:1. */
  --on-accent: var(--night);
  --rule: var(--night-edge);
  --tag-bg: color-mix(in srgb, var(--mist) 30%, var(--night));
  --tag-text: var(--sky-head);
  background: var(--night);
  color: var(--text-body);
}