/* understanding.today — design tokens
   Source: moodboard sheets 1 + 2 (see README). Do not reinterpret. */

@font-face { font-family: "UT Dot Matrix"; src: url("../fonts/UTDotMatrix-Square.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "UT Dot Matrix Round"; src: url("../fonts/UTDotMatrix-Round.woff2") format("woff2"); font-display: block; }
/* Licensed Neue Haas Grotesk Display Pro: drop files into assets/fonts/licensed/ with these names */
@font-face { font-family: "NHG Display"; src: local("Neue Haas Grotesk Display Pro Light"), local("NHaasGroteskDSPro-45Lt"), url("../fonts/licensed/NHaasGroteskDSPro-45Lt.woff2") format("woff2"); font-weight: 300; }
@font-face { font-family: "NHG Display"; src: local("Neue Haas Grotesk Display Pro"), local("NHaasGroteskDSPro-55Rg"), url("../fonts/licensed/NHaasGroteskDSPro-55Rg.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "NHG Display"; src: local("Neue Haas Grotesk Display Pro Medium"), local("NHaasGroteskDSPro-65Md"), url("../fonts/licensed/NHaasGroteskDSPro-65Md.woff2") format("woff2"); font-weight: 500; }

:root {
  /* 03 COLOUR PALETTE */
  --ut-black: #111111;
  --ut-cypress: #073C32;
  --ut-lime: #B6FF00;
  --ut-bone: #E8E8DC;
  --ut-silver: #A8A8A8;
  --ut-silver-grad: linear-gradient(90deg, #8f8f8d 0%, #d6d5d2 38%, #f1f0ec 52%, #b4b3b0 70%, #9a9997 100%);
  /* observed supporting tones */
  --ut-sage: #576B46;
  --ut-paper: #EDECE8;
  --ut-rule: #D8D7D0;
  --ut-rule-dark: #2A2A2A;
  --ut-meta: #7A7A76;

  /* 04 TYPE SYSTEM */
  --f-grotesk: "NHG Display", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-dot: "UT Dot Matrix", ui-monospace, monospace;
  --f-dot-round: "UT Dot Matrix Round", ui-monospace, monospace;

  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --track-display: -0.025em;
  --track-label: 0.06em;

  --ease-resolve: cubic-bezier(.2, .7, .1, 1);
}

/* Section label: "01 BRAND IDEA" — lime number, caps label */
.ut-label { font: var(--fw-medium) 11px/1 var(--f-grotesk); letter-spacing: var(--track-label); text-transform: uppercase; display: flex; gap: .9em; }
.ut-label b { color: var(--ut-lime); font-weight: var(--fw-medium); }
.on-light .ut-label b { color: var(--ut-cypress); } /* cypress on bone/light grounds for clear legibility */

/* Crosshair marker */
.ut-plus { position: relative; width: 11px; height: 11px; color: var(--ut-lime); transition: transform .6s var(--ease-resolve); display: inline-block; overflow: visible; flex-shrink: 0; }
.ut-plus::before, .ut-plus::after { content: ""; position: absolute; background: currentColor; pointer-events: none; }
.ut-plus::before { left: 5px; top: 0; width: 1px; height: 11px; }
.ut-plus::after { top: 5px; left: 0; height: 1px; width: 11px; }
.ut-plus:hover, a:hover .ut-plus, .ut-card:hover .ut-plus { transform: rotate(90deg); }

.ut-dot { font-family: var(--f-dot); font-weight: 400; letter-spacing: 0; font-feature-settings: normal; }
.ut-dot-round { font-family: var(--f-dot-round); }

/* Film grain overlay — apply .ut-grain to any positioned container */
.ut-grain { position: relative; isolation: isolate; }
.ut-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; mix-blend-mode: overlay; opacity: .22;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}