/* =============================================================================
   OLAMI DESIGN SYSTEM
   Derived strictly from: "Olami Brand Guidelines — Version 4, November 2025"
   + "Olami Master Color Palette" (Color System Reference R6V2)
   + Olami Web Font kit (Founders Grotesk).

   This file is the single source of truth for tokens, base styles, and
   primitive components. Do not introduce colors, fonts, or type styles that
   are not defined here. See DESIGN-SYSTEM.md for the written rules and the
   guideline page references behind each decision.
   ========================================================================== */

/* =============================================================================
   1. FONTS  —  Founders Grotesk is the ONLY font family Olami uses.
   Guidelines §05 Typography, p.76–79.
   Faces provided by the Olami web kit (fonts/*.woff2):
     - Founders Grotesk            Regular 400 / Medium 500   → body, sub-headings
     - Founders Grotesk Condensed  Regular 400                → dense body, tier-3
     - Founders Grotesk X-Condensed Regular 400 / Medium 500 / Semibold 600
                                                              → display, headlines
   No italic web face ships in the kit; quotes fall back to synthetic italic.
   ========================================================================== */

@font-face {
  font-family: "Founders Grotesk";
  src: url("../fonts/founders-grotesk-web-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk";
  src: url("../fonts/founders-grotesk-web-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk Condensed";
  src: url("../fonts/founders-grotesk-condensed-web-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk X-Condensed";
  src: url("../fonts/founders-grotesk-x-condensed-web-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk X-Condensed";
  src: url("../fonts/founders-grotesk-x-condensed-web-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Founders Grotesk X-Condensed";
  src: url("../fonts/founders-grotesk-x-condensed-web-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   2. PRIMITIVE TOKENS  —  the Olami Master Color Palette, verbatim.
   Guidelines §02 Color Palette, p.20–23. Hex values are the authoritative
   labels from the v4 guideline swatch page (p.21).

   Structure: 4 chromatic families × 5 tonal steps
       dark  ·  primary  ·  light  ·  neon  ·  pastel
   + Olami Black, White, and Gray.
   Gold is a SPECIAL-EVENT gradient asset only — it is deliberately NOT a
   token here (Guidelines p.111: "For usage reach out to your Brand Manager").
   ========================================================================== */

:root {
  /* --- Primary palette (leads every design) --- */
  --olami-black: #1e1e1e;   /* NOT pure black — Guidelines p.20 */
  --olami-white: #ffffff;
  --olami-gray:  #626063;

  /* --- Green family --- */
  --green-dark:    #20413a;
  --green-primary: #378600;
  --green-light:   #4ecf57;
  --green-neon:    #b4f100;
  --green-pastel:  #e3ead4;

  /* --- Blue / Purple family --- */
  --blue-dark:     #191975;
  --blue-primary:  #3e1bdc;
  --purple-light:  #8657f3;
  --blue-neon:     #89c9fe;
  --blue-pastel:   #c7e6fa;

  /* --- Red / Pink family --- */
  --red-dark:      #760a07;
  --pink-primary:  #c41551;
  --mauve-light:   #c9689a;
  --pink-neon:     #f677ed;
  --pink-pastel:   #f6cdd7;

  /* --- Orange / Yellow family --- */
  --rust-dark:     #bf4100;
  --orange-primary:#f14515;
  --orange-light:  #f48e00;
  --yellow-neon:   #f6ef00;
  --yellow-pastel: #fff8e5;
}

/* =============================================================================
   3. SEMANTIC TOKENS  —  how the palette is applied.

   COLOR RULES baked in here (Guidelines p.21–23, p.131):
   • Black + white lead. Color is an accent, not the ground.
   • A branch / chapter picks EXACTLY ONE core color from the palette.
     Olami Long Island's core color is PRIMARY BLUE (#3E1BDC).
     To re-theme a chapter, change ONLY the four --accent* lines below.
   • Tints: at most ONE color, tinted up to 50%, per design (p.21).
     --color-accent-tint is that single sanctioned tint.
   • Do not mix two colors from the same tonal step (two darks, two
     primaries, two lights). Neon + pastel may mix. Same-family
     (analogous) combinations are encouraged (p.23).
   ========================================================================== */

:root {
  /* Ground */
  --color-ink:        var(--olami-black);
  --color-ink-muted:  var(--olami-gray);
  --color-surface:    var(--olami-white);
  --color-surface-alt:#f4f4f3;              /* ~4% tint of Olami Black — within the 50% rule */
  --color-hairline:   var(--olami-black);

  /* Chapter accent — CHANGE THESE FOUR TO RE-THEME A CHAPTER.
     Olami Long Island's core colour is the blue of the "Long Island" wordmark
     beside the Olami logo: #3E19E0. Nearest Olami palette step is Primary Blue
     (#3E1BDC) — the two are visually indistinguishable; the wordmark value is
     used here so screen output matches the printed lockup exactly. */
  --color-accent:          #3e19e0;
  --color-accent-strong:   #2a11a8;
  --color-accent-contrast: var(--olami-white);
  --color-accent-tint:     color-mix(in srgb, #3e19e0 12%, var(--olami-white));

  /* Feedback (drawn from the palette so nothing off-brand appears) */
  --color-positive: var(--green-primary);
  --color-critical: var(--orange-primary);
  --color-notice:   var(--orange-light);

  /* Focus */
  --color-focus: var(--blue-primary);
}

/* Dark section theme — opt-in, for blocks set on Olami Black (hero, footer,
   full-bleed color bands). Olami designs in dark blocks, not a global dark
   mode, so this is a scoped class rather than a media query. On black, the
   accent shifts to a lighter palette step for contrast (p.23 same-family). */
.o-theme-dark {
  --color-ink:        var(--olami-white);
  --color-ink-muted:  #b8b8ba;
  --color-surface:    var(--olami-black);
  --color-surface-alt:#2a2a2a;
  --color-hairline:   var(--olami-white);
  --color-accent:          var(--blue-neon);
  --color-accent-strong:   var(--purple-light);
  --color-accent-contrast: var(--olami-black);
  --color-accent-tint:     color-mix(in srgb, var(--blue-neon) 18%, var(--olami-black));
  --color-focus: var(--blue-neon);
  background: var(--color-surface);
  color: var(--color-ink);
}

/* =============================================================================
   4. TYPOGRAPHY TOKENS
   Guidelines §05 p.76–79 and §08 p.123, p.126–127.

   • Display / all headlines  → Founders Grotesk X-Condensed Semibold (600)
   • Body / sub-headings      → Founders Grotesk Regular (400)
   • Dense body / tier-3      → Founders Grotesk Condensed Regular
   • Emphasis                 → Founders Grotesk Medium (500)
   • Quotes                   → italic (synthetic; no italic web face)
   • Letter-spacing / kerning → ALWAYS 0. Never positive, never negative (p.126)
   • Line-height / leading    → 1.0 min, 1.4 max (p.20–21, p.127)
   • Max 3 "font styles" (colour+face+weight+size) per composition (p.123)
   ========================================================================== */

:root {
  --font-display:   "Founders Grotesk X-Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-condensed: "Founders Grotesk Condensed", "Founders Grotesk X-Condensed", "Oswald", sans-serif;
  --font-text:      "Founders Grotesk", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Responsive type scale — headlines clamp large, mirroring Olami print
     display sizing. Values chosen so every heading stays within the
     1.0–1.4 leading band. */
  --text-display: clamp(3rem, 8vw, 7rem);      /* hero only */
  --text-h1:      clamp(2.5rem, 6vw, 5rem);
  --text-h2:      clamp(2rem, 4.5vw, 3.5rem);
  --text-h3:      clamp(1.5rem, 3vw, 2.25rem);
  --text-lead:    clamp(1.125rem, 1.6vw, 1.375rem);
  --text-body:    1.0625rem;                   /* 17px */
  --text-body-sm: 0.9375rem;                   /* 15px */
  --text-detail:  0.8125rem;                   /* 13px */
  --text-eyebrow: 0.75rem;                     /* 12px */

  --leading-tight:  1;      /* hard minimum */
  --leading-snug:   1.1;
  --leading-normal: 1.3;
  --leading-loose:  1.4;    /* hard maximum */

  --tracking: 0em;         /* the only permitted letter-spacing value (unitful so it never parses as invalid) */
}

/* =============================================================================
   5. SPACING, LAYOUT, SHAPE, MOTION
   The Olami grid divides a composition into 8 sections with a safety margin
   of 1/3 of one section (Guidelines §06 p.85–88). Digitally that becomes an
   8-based spacing scale and a fluid page margin.
   ========================================================================== */

:root {
  --space-0: 0;
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px — base unit */
  --space-3: 1rem;      /* 16px */
  --space-4: 1.5rem;    /* 24px */
  --space-5: 2rem;      /* 32px */
  --space-6: 3rem;      /* 48px */
  --space-7: 4rem;      /* 64px */
  --space-8: 6rem;      /* 96px */
  --space-9: 8rem;      /* 128px */

  --container-max: 1200px;
  --grid-sections: 8;                          /* the Olami 8-section grid */
  --layout-margin: clamp(1rem, 4vw, 3rem);     /* the 1/3-section safety margin */

  /* Shape — Olami geometry is hard-edged blocks + true circles.
     Rounding is reserved for pill chips / buttons and the "O". */
  --radius-none: 0;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --border-hairline: 1px solid var(--color-hairline);
  --border-block: 2px solid var(--color-hairline);

  /* Elevation — used sparingly; the brand is flat colour, not shadow. */
  --elevation-1: 0 1px 2px rgba(30, 30, 30, 0.08), 0 10px 30px rgba(30, 30, 30, 0.06);
  --elevation-2: 0 2px 6px rgba(30, 30, 30, 0.10), 0 24px 60px rgba(30, 30, 30, 0.12);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --duration-1: 120ms;
  --duration-2: 200ms;
  --duration-3: 320ms;

  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;
}

/* =============================================================================
   6. RESET + BASE ELEMENTS
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  /* Enforce the kerning-is-always-0 rule globally (Guidelines p.126). */
  letter-spacing: var(--tracking);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-loose);   /* 1.4 — body max */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  /* Headlines may be ALL CAPS or Title Case — never forced here.
     Use .o-caps / .o-title to choose. Guidelines p.11, p.79. */
  text-transform: none;
}

h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); line-height: var(--leading-snug); }
h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
h4 { font-size: var(--text-body); font-family: var(--font-condensed); text-transform: uppercase; }

p {
  margin: 0 0 var(--space-3);
  max-width: 68ch;              /* readable measure; never justified full-bleed */
  line-height: var(--leading-loose);
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
  transition: color var(--duration-1) var(--ease-standard);
}
a:hover { color: var(--color-accent-strong); }

strong, b { font-weight: var(--weight-medium); }

em, i, blockquote {
  font-style: italic;          /* synthetic — no italic web face in the kit */
}

blockquote {
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: var(--border-block);
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--color-ink);
}

small { font-size: var(--text-detail); }

ul, ol { padding-left: 1.25em; line-height: var(--leading-normal); }
li { margin-bottom: var(--space-1); }

img, svg, video { max-width: 100%; display: block; height: auto; }

hr {
  border: 0;
  border-top: var(--border-hairline);
  margin: var(--space-6) 0;
}

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   7. LAYOUT PRIMITIVES
   ========================================================================== */

.o-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--layout-margin);
}

/* Vertical section rhythm */
.o-section { padding-block: var(--space-8); }
.o-section--tight { padding-block: var(--space-6); }

/* The Olami 8-section grid, exposed for layout work. Place items on the
   start or middle of a column/row; scoot content to the margins, not past
   them (Guidelines p.118, p.122). */
.o-grid-8 {
  display: grid;
  grid-template-columns: repeat(var(--grid-sections), 1fr);
  gap: var(--space-3);
}
@media (max-width: 720px) {
  .o-grid-8 { grid-template-columns: repeat(4, 1fr); }
}

/* Simple composable helpers */
.o-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.o-stack--lg { gap: var(--space-5); }
.o-cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* =============================================================================
   8. TYPE STYLES  (use these instead of ad-hoc font declarations)
   ========================================================================== */

.o-display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
}

.o-h1 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h1); line-height: var(--leading-tight); }
.o-h2 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h2); line-height: var(--leading-snug); }
.o-h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h3); line-height: var(--leading-snug); }

.o-lead {
  font-family: var(--font-text);
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--color-ink);
}

.o-body        { font-family: var(--font-text); font-size: var(--text-body); line-height: var(--leading-loose); }
.o-body--sm    { font-size: var(--text-body-sm); }
.o-body--condensed { font-family: var(--font-condensed); }

.o-detail {
  font-family: var(--font-text);
  font-size: var(--text-detail);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}

/* Eyebrow / kicker — small, uppercase, Medium weight. Tracking still 0. */
.o-eyebrow {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: var(--weight-medium);
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

.o-quote {
  font-family: var(--font-text);
  font-style: italic;
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
}

/* Case + alignment helpers.
   Olami text is LEFT-aligned (or right). NEVER centered — the only
   exception is text inside a circle (Guidelines p.19, p.122). There is
   deliberately no .o-text-center utility; use .o-circle__label instead. */
.o-caps  { text-transform: uppercase; }
.o-title { text-transform: capitalize; }
.o-text-left  { text-align: left; }
.o-text-right { text-align: right; }
.o-measure { max-width: 60ch; }
.o-measure--wide { max-width: 75ch; }

/* =============================================================================
   9. COLOR / SURFACE UTILITIES
   Keep to ONE accent + black/white per view. For a palette colour block,
   set --block-color inline: <div class="o-block" style="--block-color:var(--green-primary)">
   ========================================================================== */

.o-surface-paper  { background: var(--color-surface);     color: var(--color-ink); }
.o-surface-alt    { background: var(--color-surface-alt);  color: var(--color-ink); }
.o-surface-ink    { background: var(--olami-black);        color: var(--olami-white); }
.o-surface-accent { background: var(--color-accent);       color: var(--color-accent-contrast); }
.o-surface-accent-tint { background: var(--color-accent-tint); color: var(--color-ink); }

.o-ink        { color: var(--color-ink); }
.o-ink-muted  { color: var(--color-ink-muted); }
.o-accent     { color: var(--color-accent); }

/* Hard-edged colour block — the core Olami compositional shape. */
.o-block {
  --block-color: var(--color-accent);
  background: var(--block-color);
  color: #fff;
  border-radius: var(--radius-none);
  padding: var(--space-5);
}

/* =============================================================================
   10. COMPONENTS
   ========================================================================== */

/* --- Button ---------------------------------------------------------------
   Pill shape, X-Condensed Semibold, uppercase label. Tracking 0. */
.o-btn {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-accent-contrast);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7em 1.6em;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--duration-1) var(--ease-standard),
              background-color var(--duration-2) var(--ease-standard),
              color var(--duration-2) var(--ease-standard);
}
.o-btn:hover { transform: translateY(-1px); }
.o-btn:active { transform: translateY(0); }
/* Hold the label colour when .o-btn is an <a> — beats the global `a:hover` rule. */
.o-btn:hover,
.o-btn:focus,
.o-btn:active { color: var(--btn-fg); }

.o-btn--primary { --btn-bg: var(--color-accent);  --btn-fg: var(--color-accent-contrast); }
.o-btn--ink     { --btn-bg: var(--olami-black);   --btn-fg: var(--olami-white); }
.o-btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--color-ink);
  --btn-border: var(--color-ink);
}
.o-btn--outline:hover { --btn-bg: var(--color-ink); --btn-fg: var(--color-surface); }
.o-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-accent);
  --btn-border: transparent;
  padding-inline: 0.4em;
  border-radius: var(--radius-none);
}
.o-btn--lg { font-size: 1.125rem; padding: 0.85em 2em; }
.o-btn--sm { font-size: 0.8125rem; padding: 0.6em 1.2em; }
.o-btn[disabled],
.o-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* --- Hashtag / tag  (program promotion, Guidelines p.62–65) --------------
   Two forms: a plain pill, or a hard rectangle with equal padding. */
.o-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.9em;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-detail);
  text-transform: uppercase;
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}
.o-tag--rect { border-radius: var(--radius-none); }
.o-tag--outline {
  color: var(--color-ink);
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}

/* --- The "O" / circle  (Guidelines §01 p.17–18, §06 p.81, §08 p.120) -----
   One circle per composition. It must touch at least two edges of its
   container and never float in the centre. Text inside a circle is the
   ONLY place centered type is allowed. */
.o-circle {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-circle);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.o-circle__label {
  text-align: center;                 /* sanctioned exception */
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  padding: 12%;
}
.o-circle--image { background: none; }
.o-circle--image > img { width: 100%; height: 100%; object-fit: cover; }

/* --- Card --------------------------------------------------------------- */
.o-card {
  background: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-block);
  border-radius: var(--radius-none);   /* hard edges */
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.o-card--flat { border: 0; background: var(--color-surface-alt); }
.o-card--accent {
  border: 0;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

/* --- Logo lockup wrapper ------------------------------------------------
   The supplied logo files already contain clear space equal to the width
   of the final "I". Do not add padding that eats into it; if you need
   breathing room, add it OUTSIDE this box (Guidelines p.11, p.16, p.128). */
.o-logo { display: inline-block; }
.o-logo svg,
.o-logo img { display: block; height: auto; }
.o-logo--sm  { width: 96px; }
.o-logo--md  { width: 160px; }
.o-logo--lg  { width: 240px; }

/* --- Divider for co-branding lockups (Guidelines p.68) ----------------
   Gap each side = width of "I"; rule = 1/4 that width. Approximated with
   an em-based lockup. */
.o-cobrand {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.o-cobrand__rule {
  width: 0.15em;
  align-self: stretch;
  min-height: 1.4em;
  background: var(--color-ink);
}

/* --- Form controls ---------------------------------------------------- */
.o-field { display: flex; flex-direction: column; gap: var(--space-1); }
.o-label {
  font-family: var(--font-text);
  font-weight: var(--weight-medium);
  font-size: var(--text-detail);
  text-transform: uppercase;
}
.o-input,
.o-textarea,
.o-select {
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--color-ink);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-none);
  padding: 0.65em 0.85em;
}
.o-input:focus-visible,
.o-textarea:focus-visible,
.o-select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 0;
}
.o-textarea { min-height: 8em; resize: vertical; }

/* =============================================================================
   11. DESIGN-ELEMENT TEXTURES  (Guidelines §07 p.103–107)
   Lightweight CSS stand-ins for the "lines / dots / speckles" texture set.
   For print-fidelity work use the real PNG/vector files in
   "Olami Asset Pack/Textures". Apply as a faint background layer only.
   ========================================================================== */

.o-texture-dots {
  background-image: radial-gradient(currentColor 1px, transparent 1.4px);
  background-size: 14px 14px;
  opacity: 0.12;
}
.o-texture-lines {
  background-image: repeating-linear-gradient(
    45deg, currentColor 0 1px, transparent 1px 10px);
  opacity: 0.1;
}
.o-texture-speckle {
  background-image:
    radial-gradient(currentColor 0.5px, transparent 0.5px),
    radial-gradient(currentColor 0.5px, transparent 0.5px);
  background-size: 22px 22px, 34px 34px;
  background-position: 0 0, 11px 17px;
  opacity: 0.14;
}

/* =============================================================================
   12. ACCESSIBILITY HELPERS
   ========================================================================== */

.o-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.o-skip-link {
  position: absolute;
  left: var(--space-3);
  top: -3rem;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--olami-black);
  color: var(--olami-white);
  border-radius: var(--radius-none);
  transition: top var(--duration-2) var(--ease-standard);
}
.o-skip-link:focus { top: var(--space-3); }