/* Generated by tools/build.mjs from design/Beeber Links.dc.html.
   Do not edit — edit the design and rebuild. */

/* Beeber colour — four colours, no fifth. OKLCH is the master value; hex is the print/legacy approximation. */
:root{
  /* base ramp */
  --charcoal: oklch(0.20 0.015 60);        /* #231F1A */
  --charcoal-lift: oklch(0.26 0.015 60);   /* #2F2A24 one step up, for hairline separation on dark */
  --charcoal-deep: oklch(0.14 0.012 60);   /* #16130F pressed / video letterbox */
  --honey: oklch(0.74 0.12 78);            /* #D49B41 */
  --honey-dim: oklch(0.66 0.11 78);        /* #BC8535 hover on honey fills */
  --honey-deep: oklch(0.48 0.09 78);       /* #8A6224 honey type on cream (links only) */
  --cream: oklch(0.95 0.02 85);            /* #F4EEE1 */
  --cream-shade: oklch(0.96 0.01 80);      /* #F7F3EA quiet panel on light ground */
  --slate: oklch(0.42 0.02 240);           /* #4A5462 */
  --slate-light: oklch(0.72 0.02 240);     /* #A8B0BC slate that survives on charcoal */

  /* neutral hairlines */
  --line-light: oklch(0.86 0.01 70);
  --line-light-soft: oklch(0.88 0.01 70);
  --line-dark: oklch(0.32 0.012 60);

  /* semantic — ground */
  --surface-default: var(--charcoal);
  --surface-raised: var(--charcoal-lift);
  --surface-light: var(--cream);
  --surface-panel: var(--cream-shade);
  --surface-accent: var(--honey);
  --surface-media: var(--charcoal-deep);

  /* semantic — ink */
  --text-body: var(--cream);
  --text-body-on-light: var(--charcoal-lift);
  --text-display: var(--cream);
  --text-display-on-light: var(--charcoal);
  --text-muted: oklch(0.72 0.02 85);
  --text-muted-on-light: oklch(0.42 0.02 60);
  --text-data: var(--honey);
  --text-data-on-light: var(--charcoal-lift);
  --text-status: var(--slate-light);
  --text-status-on-light: var(--slate);
  --text-on-accent: var(--charcoal);
  --text-link: var(--honey);
  --text-link-on-light: var(--honey-deep);

  /* semantic — lines */
  --border-hairline: var(--line-dark);
  --border-hairline-light: var(--line-light);
  --border-accent: var(--honey);

  /* image treatment */
  --img-grade-artist: grayscale(0.8) contrast(1.15) brightness(0.72); /* @kind other */
  --img-grade-portrait: grayscale(0.75) contrast(1.1); /* @kind other */
  --img-grade-crowd: grayscale(0.4) contrast(1.08); /* @kind other */
  --img-protect: linear-gradient(to top, oklch(0.20 0.015 60 / 0.95) 0%, oklch(0.20 0.015 60 / 0.72) 28%, oklch(0.20 0.015 60 / 0) 62%); /* @kind other */
}

/* Two faces. Space Grotesk sets what a person reads; IBM Plex Mono sets what a machine produced. */
:root{
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, monospace;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* display — always caps, always bold, always tight */
  --size-display-xl: 120px;
  --size-display-lg: 72px;
  --size-display-md: 48px;
  --size-display-sm: 32px;
  --tracking-display: -0.055em;   /* the signature: the name reads as a stamp, not a caption */
  --tracking-display-tight: -0.06em;
  --leading-display: 0.92;

  /* heading — sentence case */
  --size-heading-lg: 28px;
  --size-heading-md: 22px;
  --size-heading-sm: 17px;
  --tracking-heading: -0.035em;
  --leading-heading: 1.12;

  /* body */
  --size-body-lg: 18px;
  --size-body-md: 16px;
  --size-body-sm: 14px;
  --leading-body: 1.55;
  --tracking-body: 0;

  /* data / mono — always tracked open, always caps */
  --size-data-md: 13px;
  --size-data-sm: 11px;
  --size-data-xs: 10px;
  --tracking-data: 0.16em;
  --tracking-data-wide: 0.26em;
  --tracking-hive: 0.34em;
  --leading-data: 1.3;

  --text-min-screen: 14px;
  --text-min-print: 12pt;
  --text-min-stage: 24px;
}

/* 4px base. Full-bleed layouts; margins are the only container. */
:root{
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --gutter-mobile: 20px;
  --gutter-desktop: 48px;
  --section-gap: 96px;
  --measure: 62ch;

  --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* @kind other */
  --hex-ratio: 1 / 1.131; /* @kind other */
  --mark-min-size: 90px;      /* below this, swap the bee for the B monogram */
  --mark-clearspace: 0.5; /* @kind other */     /* × hexagon width, all four sides */

  --control-height-sm: 34px;
  --control-height-md: 44px;
  --control-height-lg: 54px;
}

/* Rules, not boxes. Square corners everywhere; hairlines only. */
:root{
  --radius-none: 0;
  --radius-avatar: 50%;        /* the only curve in the system: YouTube-style circular avatar */
  --border-width-hairline: 1px;
  --border-width-accent: 3px;  /* honey rule that opens a pull-quote or panel */
  --rule-dark: var(--border-width-hairline) solid var(--line-dark);
  --rule-light: var(--border-width-hairline) solid var(--line-light);
  --rule-accent: var(--border-width-hairline) solid var(--honey);
  --shadow-none: none; /* @kind shadow */         /* the system has no shadow scale — do not add one */
}

/* Fades and hard colour swaps. Nothing bounces. */
:root{
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --duration-fast: 90ms; /* @kind other */
  --duration-base: 160ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
  --transition-control: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); /* @kind other */
  --press-scale: 1; /* @kind other */            /* controls do not shrink; they change colour */
  --press-shift: 1px;          /* text-only controls nudge down 1px instead */
}

body { margin: 0; background: var(--charcoal); }

a { color: var(--honey); }

a:hover { color: var(--honey-dim); }

.link-row { transition: var(--transition-control); }

.link-row:hover { background: var(--charcoal-lift); border-color: var(--honey); }

.link-row:hover .link-arrow { color: var(--honey); transform: translateX(2px); }

.icon-btn { transition: var(--transition-control); }

.icon-btn:hover { background: var(--honey); color: var(--charcoal); border-color: var(--honey); }