/* brand.css — the reading pages (About, Thoughts, posts) re-tokened to the
   Nate Herk brand kit so they match the new home page. Loaded AFTER the
   reading pages' own pages.css; it only overrides tokens, the bar and the
   accent stops. Layout stays as it was. */

:root {
  --sc-canvas:     #F5F6F8;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #0B0D10;
  --sc-ink-soft:   #5A6472;
  --sc-accent:     #0B72CC;      /* deep stop: links and fills on a light ground */
  --sc-accent-ink: #FFFFFF;
  --nh-blue:       #3BAAFF;      /* brand stop: marks, hairlines, the period */

  --sc-font-display: "Inter", system-ui, sans-serif;
  --sc-font-text:    "Inter", system-ui, sans-serif;
  --sc-font-mono:    "Inter", ui-monospace, monospace;

  --sc-hairline: rgb(11 13 16 / 0.10);
  --sc-hairline-strong: rgb(11 13 16 / 0.18);
  --sc-shadow-color: 214 32% 28%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.08), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.06);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.07), 0 12px 28px -8px hsl(var(--sc-shadow-color) / 0.14);
  --sc-e3: 0 4px 10px hsl(var(--sc-shadow-color) / 0.08), 0 26px 56px -14px hsl(var(--sc-shadow-color) / 0.20);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.9);
}

body { background: var(--sc-canvas); color: var(--sc-ink); }
.sc-grain { opacity: 0.03; }
.sc-display, h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; }
::selection { background: var(--nh-blue); color: #fff; }

/* A faint wash of the brand blue at the top of each document, so the light
   from the home page's glass is remembered without running a shader here. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 28rem at 78% -8rem, rgb(59 170 255 / 0.16), transparent 70%),
    radial-gradient(40rem 20rem at 10% 0, rgb(59 170 255 / 0.08), transparent 70%);
}

/* the bar: same treatment as the home page's pill, docked as a bar */
.nh-bar::before {
  background: linear-gradient(to bottom,
    rgb(245 246 248 / 0.94) 0px, rgb(245 246 248 / 0.88) 34px,
    rgb(245 246 248 / 0.26) 58px, transparent 74px);
}
.nh-mark { font-family: var(--sc-font-display); letter-spacing: -0.02em; font-weight: 700; }
.nh-mark i { color: var(--nh-blue); }
.nh-bar__nav a[aria-current="page"] { color: var(--sc-accent); }
.nh-bar__cta {
  background: var(--sc-accent) !important; color: #fff !important;
  border-radius: 999px !important;
  width: auto !important; min-width: 0 !important; padding: 0.55em 1.05em !important;
  white-space: nowrap; overflow: visible !important; text-overflow: clip !important;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.25) inset, 0 8px 22px -8px rgb(11 114 204 / 0.55) !important;
}
.nh-bar__cta:hover { background: #0A66B8 !important; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--nh-blue); outline-offset: 3px; }