/* OnsiteHub — Brand System v2.1 tokens
 * These are the in-code source of truth for the code components.
 * Names mirror what we'll register as Webflow Variables later, so the
 * components inherit the site's values when present and fall back to these.
 *
 * Fonts (Quicksand, Montserrat, JetBrains Mono) are loaded by the Webflow site
 * itself — we only reference the families here, never @import them. */

:host {
  /* Primary */
  --oh-cadmium: #ffec00; /* signature yellow — accent only, ~10% coverage */
  --oh-sun-soft: #fff7a8; /* tint: backgrounds, hover washes */

  /* Dark surface (replaces black) */
  --oh-adriatic: #0e5b7a;

  /* Neutrals — warm, replace pure black/white */
  --oh-paper: #faf6ec;
  --oh-cream: #f4eddf;
  --oh-stone: #dcd7cc;
  --oh-mist: #d7d4cc;
  --oh-slate: #6b6b72;
  --oh-charcoal: #2a2a2e;
  --oh-ink: #0e0e10; /* text only — never a surface */

  /* Supporting */
  --oh-olive: #6f8f3a;
  --oh-terracotta: #d96b3f;

  /* Type */
  --oh-font-display: "Quicksand", system-ui, sans-serif; /* headings */
  --oh-font-body: "Montserrat", system-ui, sans-serif; /* body */
  --oh-font-mono: "JetBrains Mono", ui-monospace, monospace; /* tags/labels */
}

/* ============================================================
   OnsiteHub Design Tokens — v2.1
   Refined with feedback: no black backgrounds, Adriatic for
   dark surfaces, light grey replaces mustard-deep, original
   logo asset, scratchy highlighter texture.
   ============================================================ */

/* ---- COLOR ---- */
:host, :host {
  /* Primary — signature highlighter */
  --oh-yellow:        #FFEC00;
  --oh-yellow-soft:   #FFFEEF;   /* Sunsoft — almost-white warm tint */
  --oh-stone:         #F4F4F4;   /* neutral light grey */

  /* Ink & paper (warm neutrals, for TEXT — not for surfaces) */
  --oh-ink:           #0E0E10;   /* text only */
  --oh-charcoal:      #2A2A2E;
  --oh-slate:         #6B6B72;
  --oh-mist:          #D7D4CC;
  --oh-paper:         #FAF6EC;   /* default page bg */
  --oh-cream:         #F4EDDF;   /* card bg */
  --oh-sand:          #E8D4A8;
  --oh-white:         #FFFFFF;

  /* Adriatic blue — the new DARK surface.
     Replaces black/ink for any tinted background. */
  --oh-adriatic:      #0E5B7A;
  --oh-adriatic-deep: #0A4359;
  --oh-adriatic-soft: #B9D4DE;

  /* Secondary support colours — no archetype mapping, just names */
  --oh-olive:         #6F8F3A;
  --oh-olive-soft:    #C9D6A8;
  --oh-terracotta:    #D96B3F;
  --oh-terracotta-soft:#F4C9B5;

  /* Semantic */
  --oh-success: var(--oh-olive);
  --oh-warning: #E8A33A;
  --oh-error:   #C9402E;
}

/* ---- TYPE ---- */

/* Self-hosted Montserrat — heavy weights uploaded by the brand owner.
   Lighter weights (300–600) still come from the Google Fonts CDN link. */







/* Self-hosted JetBrains Mono — uploaded by the brand owner.
   Regular (400) and Medium (500) still come from the Google Fonts CDN link. */










/* Self-hosted Quicksand — uploaded by the brand owner.
   Bold (700) still comes from the Google Fonts CDN link. */






:host, :host {
  --oh-font-display: 'Quicksand', system-ui, sans-serif;
  --oh-font-body:    'Montserrat', system-ui, sans-serif;
  --oh-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  /* Scale */
  --oh-d1: clamp(56px, 6vw, 96px); /* @kind spacing */
  --oh-d2: clamp(40px, 4.4vw, 64px); /* @kind spacing */
  --oh-d3: clamp(28px, 3vw, 40px); /* @kind spacing */

  --oh-t-xl: 22px;
  --oh-t-l:  18px;
  --oh-t-m:  16px;
  --oh-t-s:  14px;
  --oh-t-xs: 12px;

  /* Tracking */
  --oh-track-tight:  -0.02em;
  --oh-track-wide:   0.08em;
}

/* ---- SHAPE ---- */
:host, :host {
  --oh-r-sm: 4px;
  --oh-r-md: 10px;
  --oh-r-lg: 18px;
  --oh-r-pill: 999px;

  --oh-stroke: 2.25px;
  --oh-shadow-card: 0 1px 0 #00000010, 0 12px 32px -16px #0E0E1024;
}

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

:host, .vco-root {
  margin: 0;
  background: var(--oh-paper);
  color: var(--oh-ink);
  font-family: var(--oh-font-body);
  font-size: var(--oh-t-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--oh-font-display);
  font-weight: 700;
  letter-spacing: var(--oh-track-tight);
  line-height: 1.05;
  margin: 0;
}

.oh-eyebrow {
  font-family: var(--oh-font-mono);
  font-size: var(--oh-t-xs);
  font-weight: 500;
  letter-spacing: var(--oh-track-wide);
  text-transform: uppercase;
  color: var(--oh-slate);
}

.oh-mono { font-family: var(--oh-font-mono); }

/* ---- SIGNATURE: SCRATCHY HIGHLIGHTER MOTIF ---- */
/* The brand's signature mark. Used behind words, behind icons,
   under text, around numbers. Real-marker texture — irregular
   edges, internal streaks, slight overflow. */

/* Behind type — horizontal swipe */
.oh-swipe {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.oh-swipe::before {
  content: "";
  position: absolute;
  inset: 6% -5% 4% -5%;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCAxOCAzIDYgOCAxMiAxNCAyIDIyIDkgMzAgMCAzOCA4IDQ2IDMgNTQgMTAgNjIgMSA3MCA5IDc4IDQgODYgMTEgOTIgMiA5NyA5IDEwMCA2IDEwMCA4NiA5NiA5NiA5MCA5MCA4NCA5OCA3NiA5MiA2OCAxMDAgNjAgOTMgNTIgOTkgNDQgOTIgMzYgMTAwIDI4IDkzIDIwIDk5IDEyIDkyIDYgOTggMiA5MCAwIDk2WiIgZmlsbD0iI0ZGRUMwMCIvPjwvc3ZnPg==) center/100% 100% no-repeat;
  z-index: -1;
  transform: rotate(-1.5deg);
}

/* Smaller compact swipe (for inline .vco-root type) */
.oh-swipe--sm::before {
  inset: 14% -3% 6% -3%;
  transform: rotate(-1deg);
}

/* Behind an icon — scratchy blob */
.oh-blob {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.oh-blob::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNNTAgM0M3MSAyIDkwIDE1IDkzIDM1IDk3IDU2IDg5IDc2IDcwIDg2IDUyIDk2IDI4IDk1IDE1IDgxIDMgNjkgMiA0NSAxMiAyOCAyMCAxMyAzNCA0IDUwIDNaIiBmaWxsPSIjRkZFQzAwIi8+PC9zdmc+) center/100% 100% no-repeat;
  z-index: -1;
  transform: rotate(-6deg);
}

/* Under a word */
.oh-under {
  position: relative;
  display: inline-block;
}
.oh-under::after {
  content: "";
  position: absolute;
  left: -6%; right: -6%; bottom: -8%; height: 18%;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCAzMCA0IDYwIDEwIDI1IDE4IDcwIDI2IDM1IDM0IDY1IDQyIDMwIDUwIDYwIDU4IDMwIDY2IDcwIDc0IDM1IDgyIDYwIDkwIDMwIDk2IDY1IDEwMCA0MCAxMDAgMTAwIDAgMTAwWiIgZmlsbD0iI0ZGRUMwMCIvPjwvc3ZnPg==) center/100% 100% no-repeat;
  transform: rotate(-1deg);
}

/* Circle annotation (around numbers, key words) */
.oh-circle {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.oh-circle::before {
  content: "";
  position: absolute;
  inset: -22% -14% -22% -14%;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48ZWxsaXBzZSBjeD0iNTAiIGN5PSI1MCIgcng9IjQ2IiByeT0iNDIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRUMwMCIgc3Ryb2tlLXdpZHRoPSI2IiB0cmFuc2Zvcm09InJvdGF0ZSgtMyA1MCA1MCkiLz48L3N2Zz4=) center/100% 100% no-repeat;
  z-index: -1;
}

/* ---- LOGO — USE THE ORIGINAL PNG ---- */
/* Never recreate the wordmark in CSS/SVG — always reference the
   master asset. The PNG has black wordmark + yellow scratch baked in. */
.oh-logo {
  height: 44px;
  width: auto;
  display: inline-block;
}
.oh-logo--sm { height: 28px; }
.oh-logo--lg { height: 96px; }
.oh-logo--xl { height: 140px; }

/* On dark surfaces, the logo needs a paper chip behind it */
.oh-logo-chip {
  display: inline-flex;
  background: var(--oh-paper);
  padding: 10px 14px;
  border-radius: 8px;
}
.oh-logo-chip .oh-logo { display: block; }

/* ---- KEYCAP — for Ctrl·Alt·Retreat tagline ---- */
.oh-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18em 0.55em;
  border: 2px solid var(--oh-ink);
  border-radius: 8px;
  background: var(--oh-paper);
  font-family: var(--oh-font-mono);
  font-weight: 600;
  font-size: 0.85em;
  box-shadow: 0 3px 0 var(--oh-ink);
  position: relative;
  top: -2px;
}


:host, :host { color-scheme: light; }
* { box-sizing: border-box; }
.vco-root { margin:0; font-family: var(--oh-font-body); color: var(--oh-ink); background: var(--oh-white); }
h1,h2,h3 { font-family: var(--oh-font-display); margin:0; }
a { color: var(--oh-adriatic); }
a:hover { color: var(--oh-adriatic-deep); }
.oh-crumb-link { color:var(--oh-slate); text-decoration:none; }
.oh-crumb-link:hover { color:var(--oh-adriatic); text-decoration:underline; }
.oh-switch-pill { display:inline-block; text-decoration:none; font-family:var(--oh-font-mono); font-size:13px; font-weight:600; letter-spacing:0.02em; padding:9px 18px; border-radius:999px; border-width:2px; border-style:solid; transition:transform .15s ease; }
.oh-switch-pill:hover { transform:translateY(-1px); }
.oh-catcard { position:relative; display:block; border:2.25px solid var(--oh-ink); border-radius:18px; overflow:hidden; text-decoration:none; box-shadow:var(--oh-shadow-card); min-height:400px; }
.oh-catcard-img { transition:transform .5s ease; }
.oh-catcard:hover .oh-catcard-img { transform:scale(1.04); }
.oh-field { width:100%; padding:13px 14px; border:2px solid var(--oh-ink); border-radius:8px; background:var(--oh-paper); font-family:var(--oh-font-body); font-size:15px; color:var(--oh-ink); }
.oh-field:focus { outline:none; box-shadow:0 0 0 4px var(--oh-yellow-soft); }
.oh-venue { border:2.25px solid var(--oh-ink); border-radius:18px; background:var(--oh-cream); box-shadow:var(--oh-shadow-card); overflow:hidden; display:flex; flex-wrap:wrap; }
.oh-venue-media { flex:1 1 520px; min-width:320px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.oh-venue-body { flex:1 1 420px; min-width:320px; padding:36px 40px 40px; display:flex; flex-direction:column; gap:14px; }
.oh-venue-primary { width:100%; height:340px; object-fit:cover; border-radius:12px; display:block; background:var(--oh-mist); }
.oh-venue-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.oh-venue-thumbs img { width:100%; height:88px; object-fit:cover; border-radius:10px; display:block; background:var(--oh-mist); }
.oh-chip { font-family:var(--oh-font-mono); font-size:12px; font-weight:500; padding:5px 11px; border-radius:999px; border:1.5px solid var(--oh-mist); color:var(--oh-charcoal); }
.oh-chip-cat { font-family:var(--oh-font-mono); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:999px; border:1.5px solid var(--oh-ink); color:var(--oh-ink); }
.oh-btn { display:inline-block; font-family:var(--oh-font-display); font-weight:700; font-size:17px; color:var(--oh-ink); background:var(--oh-yellow); border:2.25px solid var(--oh-ink); border-radius:10px; padding:16px 32px; text-decoration:none; }
.oh-stat-n { font-family:var(--oh-font-display); font-size:32px; font-weight:700; color:var(--oh-ink); }
.oh-stat-l { font-family:var(--oh-font-mono); font-size:12px; color:var(--oh-slate); text-transform:uppercase; letter-spacing:.04em; }


/* Mobile - the source design ships no breakpoints */
.vco-root, .vco-root *, .vco-root *::before, .vco-root *::after { box-sizing: border-box; }
@media (max-width: 720px) {
  .vco-root [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .vco-root [style*="grid-template-columns"] > * { min-width: 0 !important; }
  .vco-root [style*="padding:56px 32px"],
  .vco-root [style*="padding:80px 32px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .vco-root h1 { font-size: clamp(32px, 9vw, 44px) !important; }
}

/* JetBrains Mono has no glyph for the plane symbol - fall back for emoji/symbols */
.oh-chip, .oh-chip-cat { font-family: var(--oh-font-mono), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", monospace; }