/* Fonts, page colours and the four product colour worlds. Every other stylesheet reads these names. */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-display: swap; src: url("../../fonts/bricolage-grotesque-200-800-normal.woff2") format("woff2"); } /* display face for names and titles */
@font-face { font-family: "Geist"; font-weight: 100 900; font-display: swap; src: url("../../fonts/geist-100-900-normal.woff2") format("woff2"); } /* body text */
@font-face { font-family: "Geist Mono"; font-weight: 100 900; font-display: swap; src: url("../../fonts/geist-mono-100-900-normal.woff2") format("woff2"); } /* labels, dates, numbers */
:root { /* page-wide tokens */
  --ink: #0f0d0b; /* warm film-base black, the page ground */
  --ink-raised: #1a1714; /* cards and bands one step above the ground */
  --ink-line: rgb(243 239 230 / 0.13); /* hairlines on the ink */
  --paper: #f3efe6; /* warm off-white text */
  --paper-soft: rgb(243 239 230 / 0.72); /* secondary text */
  --paper-faint: rgb(243 239 230 / 0.5); /* labels and dates */
  --amber: #f2b544; /* the page accent: links, focus, the hero eyebrow */
  --live: #57d98b; /* status dot: you can use it now */
  --recording: #ff6a55; /* status dot: plays here */
  --code: #b8a6ff; /* status dot: source on GitHub */
  --display: "Bricolage Grotesque", "Arial Narrow", sans-serif; /* display stack */
  --body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; /* body stack */
  --mono: "Geist Mono", ui-monospace, Menlo, monospace; /* label stack */
  --gutter: clamp(18px, 4.4vw, 64px); /* page side margin */
  --radius: 18px; /* panel and card corners */
  --sprocket-holes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='12'%3E%3Crect x='10' y='1' width='14' height='9' rx='2.5' fill='%23f3efe6' fill-opacity='.55'/%3E%3C/svg%3E"); /* one film hole every 34px */
}
.world-gourmetai { /* GourmetAI: gold, like its live site (gold on black) */
  --world-background: #edb93e; /* panel field */
  --world-deep: #2b1d05; /* bezels, shadows, dark text */
  --world-tint: #fbe7b2; /* light gold */
  --world-on-color: #17120c; /* text on gold */
  --world-chip: rgb(23 18 12 / 0.1); /* stack chip fill */
}
.world-esims5g { /* eSIMs5G: the app's blue */
  --world-background: #1a74e8; /* panel field */
  --world-deep: #06214a; /* bezels, shadows, dark text */
  --world-tint: #cfe3ff; /* rings and soft text */
  --world-on-color: #ffffff; /* text on blue */
  --world-chip: rgb(255 255 255 / 0.16); /* stack chip fill */
}
.world-ka2s { /* Ka2s menus: brick red with the menu's cream */
  --world-background: #b7281c; /* panel field */
  --world-deep: #3e0b07; /* bezels, shadows, dark text */
  --world-tint: #f6ecdc; /* cream */
  --world-on-color: #fff3dc; /* warm white text */
  --world-chip: rgb(255 243 220 / 0.16); /* stack chip fill */
}
.world-gpt2 { /* GPT-2: violet with the orange of the attention film */
  --world-background: #5a3fd8; /* panel field */
  --world-deep: #170e3d; /* bezels, shadows, dark text */
  --world-tint: #dad2ff; /* lilac */
  --world-on-color: #ffffff; /* text on violet */
  --world-chip: rgb(255 255 255 / 0.16); /* stack chip fill */
}
.world-agentic-card { /* Agentic Workflows: Claude's coral, warmer and lighter than the Ka2s red */
  --world-background: #d97757; /* panel field */
  --world-deep: #2a1004; /* bezels, shadows, dark text */
  --world-tint: #fbd9c9; /* light coral */
  --world-on-color: #1c0f08; /* text on coral */
  --world-chip: rgb(28 15 8 / 0.12); /* stack chip fill */
}
.world-msc { /* M.Sc. research: its own green, so it never reads as the GPT-2 work */
  --world-background: #1f6b52; /* card field */
  --world-deep: #062a1f; /* shadows */
  --world-tint: #cdeede; /* soft green */
  --world-on-color: #f2fff8; /* text on green */
  --world-chip: rgb(242 255 248 / 0.16); /* chip fill */
}