/* ==========================================================================
   Harry's Websites — brand tokens (the single source of truth)
   Used by the website, the brand book, the templates and client handover pages.
   Full rules: docs/brand/BRAND.md
   ========================================================================== */
:root{
  /* ---- colour: the room (always) ---- */
  --hw-blue:  #2D6DAB;   /* the backdrop. White text on it passes AA (5.4:1) */
  --hw-ink:   #123E74;   /* deep blue for type on white (10.7:1) and white-on-ink panels */
  --hw-white: #FFFFFF;

  /* ---- colour: the pop (exactly ONE per piece, taken from the photo's subject) ----
     Mostly for photos and large graphic moments, not running text. Text-safe pairings only:
       martini / lemon → large type (24px+ or 19px bold) on blue, any size on ink
       chilli          → any size on white only (never on blue: 1.1:1)
       scotch          → large type on ink only */
  --hw-martini: #8BD56E;
  --hw-chilli:  #D8322A;
  --hw-scotch:  #D98B2B;
  --hw-lemon:   #F2C94C;

  /* ---- the sun: one hard light from the top-left, shadows fall down-right ---- */
  --hw-shade:    rgba(6,24,58,0.42);
  --hw-sun-sm:   7px 9px 0 var(--hw-shade);    /* buttons, small objects */
  --hw-sun:      16px 20px 0 var(--hw-shade);  /* slabs, dialogs, photos on blue */
  --hw-sun-lift: 10px 12px 0 var(--hw-shade);  /* hover: the object lifts toward the sun */

  /* ---- type: Jost only (free, OFL, Futura-like) ---- */
  --hw-font: 'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --hw-display-weight: 800;   /* uppercase, tight, always ends with a full stop */
  --hw-label-weight:   700;   /* uppercase, wide tracking */
  --hw-body-weight:    400;   /* sentence case */
  --hw-display-track: -0.02em;
  --hw-label-track:    0.18em;
  --hw-display-leading: 0.92;
  --hw-body-leading:    1.5;

  /* ---- layout ---- */
  --hw-margin: 7%;          /* poster / art-board margin (7cqw inside a container) */
  --hw-a-ratio: 1 / 1.414;  /* A-series portrait: every poster and print ad */
  --hw-radius: 0;           /* no rounded corners, ever */

  /* ---- texture: film grain, laid over photos and blue fields ---- */
  --hw-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.2 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --hw-grain-opacity: 0.4;  /* mix-blend-mode: overlay */
}

/* ---- the wordmark: HARRY’S WEBSITES. — the only logo ---- */
.hw-wordmark{font-family:var(--hw-font);font-weight:var(--hw-display-weight);text-transform:uppercase;letter-spacing:-0.015em;line-height:1;white-space:nowrap;}
.hw-wordmark--stacked{white-space:normal;display:inline-block;text-align:left;line-height:0.9;}