/* ============================================================================
   RAVINI · Brutalist canonical design system  —  base layer
   Tokens + base components + animation primitives.
   Source of truth for the showcase landing page. Section-scoped CSS is
   appended in sections.css; never redefine anything in here downstream.
   ========================================================================== */

:root {
  /* ---- Surfaces (bone family) ---- */
  --bone:        #F4F0E6;
  --bone-2:      #ECE5D2;
  --bone-3:      #E5DCC2;

  /* ---- Ink ---- */
  --ink:         #0A0A0A;   /* never pure #000 */
  --ink-soft:    #2A2925;
  --ink-mute:    #6B6855;

  /* ---- Brand orange (page accent — punchier than the wordmark gradient) ---- */
  --orange:      #F45A1F;
  --orange-deep: #C34010;
  --orange-soft: #FFE4D1;

  /* ---- Wordmark gradient (logo only) ---- */
  --logo-o-1:    #E8792B;
  --logo-o-2:    #D4651A;

  /* ---- Rules / hairlines ---- */
  --rule:        rgba(10,10,10,0.12);
  --rule-strong: rgba(10,10,10,0.85);
  --ink-line:    var(--ink);

  /* ---- Spacing scale ---- */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);   /* expo-ish, the house ease */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 150ms;
  --t-med:  280ms;

  /* ---- Layout ---- */
  --maxw: 1280px;
  --maxw-narrow: 920px;
  --gutter: clamp(20px, 5vw, 56px);
  --border: 2px solid var(--ink);
}

* { box-sizing: border-box; }

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

html, body {
  margin: 0; padding: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
}

/* Lenis smooth-scroll body lock */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::selection { background: var(--orange); color: #fff; }

/* ---------------------------------------------------------------- TYPOGRAPHY */
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.font-serif-italic,
.serif-i {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400; letter-spacing: -0.01em;
}

.display {
  font-family: 'Inter', sans-serif; font-weight: 900;
  letter-spacing: -0.035em; line-height: 0.88;
  text-transform: uppercase; color: var(--ink);
  text-wrap: balance;
}
.display-xl { font-size: clamp(56px, 9vw, 148px); }
.display-lg { font-size: clamp(40px, 6.5vw, 92px);  line-height: 0.9; }
.display-md { font-size: clamp(30px, 4.4vw, 64px);  line-height: 0.94; }
.display-sm { font-size: clamp(22px, 2.6vw, 38px);  line-height: 1.04; }

.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-soft); font-weight: 500; }
.body { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.measure { max-width: 60ch; } .measure-tight { max-width: 46ch; }

/* mono meta crumbs */
.meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.meta-lg { font-size: 12px; letter-spacing: 0.16em; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: var(--border); background: var(--bone);
}
.chip--ink    { background: var(--ink);    color: var(--bone); border-color: var(--ink); }
.chip--orange { background: var(--orange); color: #fff;        border-color: var(--ink); }

/* headline emphasis treatments */
.accent-block {
  background: var(--orange); color: #fff;
  padding: 0 .28em; display: inline-block;
  font-weight: 900; font-style: normal;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.accent-block--ink { background: var(--ink); color: var(--bone); }
.accent-i {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  color: var(--orange); text-transform: none; letter-spacing: -0.01em;
}
.accent-u { box-shadow: inset 0 -0.14em 0 var(--orange); }

/* hand-drawn squiggle underline that draws in (used on one word per page max) */
.squiggle { position: relative; display: inline-block; white-space: nowrap; padding-bottom: 6px; }
.squiggle::after {
  content: ''; position: absolute; left: -2%; right: -2%; bottom: -8px; height: 14px;
  background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M3,9 Q22,3 44,7 T90,6 T140,8 T197,5' fill='none' stroke='%23F45A1F' stroke-width='5' stroke-linecap='round'/></svg>");
  clip-path: inset(0 100% 0 0);
}
html.js .squiggle.is-in::after { animation: squiggleDraw 820ms var(--ease-out) forwards; }
@keyframes squiggleDraw { to { clip-path: inset(0 0 0 0); } }

/* ------------------------------------------------------------------- LAYOUT */
.wrap        { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--maxw-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section     { position: relative; padding-block: clamp(72px, 11vw, 168px); }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }
.edge        { border-top: var(--border); }
.edge-soft   { border-top: 1px solid var(--rule); }
.hr-ink      { height: 0; border: 0; border-top: var(--border); margin: 0; }

.grid { display: grid; gap: var(--s-4); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------- COMPONENTS */
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff;
  padding: 18px 28px; border: var(--border);
  font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase;
  cursor: pointer; transition: background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.cta:hover { background: var(--orange); border-color: var(--ink); }
.cta--orange { background: var(--orange); color: #fff; }
.cta--orange:hover { background: var(--ink); }
.cta--ghost { background: transparent; color: var(--ink); }
.cta--ghost:hover { background: var(--ink); color: var(--bone); }
.cta--xl { padding: 26px 52px; font-size: 19px; gap: 16px; }
.cta svg { transition: transform var(--t-med) var(--ease-out); }
.cta:hover svg { transform: translateX(5px); }

/* brutalist card: 2px ink border, NO radius, hover warms the fill */
.card {
  background: var(--bone); border: var(--border); padding: clamp(22px, 2.4vw, 34px);
  transition: background var(--t-fast) ease, transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.card:hover { background: var(--bone-2); }
.card--2 { background: var(--bone-2); } .card--2:hover { background: var(--bone-3); }

/* hard offset drop-block shadow (the signature brutalist depth) */
.offset       { box-shadow: 14px 14px 0 var(--orange); }
.offset-sm    { box-shadow: 8px 8px 0 var(--orange); }
.offset-lg    { box-shadow: 20px 20px 0 var(--orange); }
.offset-ink   { box-shadow: 14px 14px 0 var(--ink); }
.bordered     { border: var(--border); }

/* architectural grid backdrop (decorative) */
.gridlines { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 80px 80px; }
.gridlines--fine { background-size: 40px 40px; opacity: .6; }

/* marquee strip */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 0; will-change: transform; }

/* --------------------------------------------------------------------- NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px var(--gutter);
  background: rgba(244,240,230,0.82); backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: var(--border);
  transform: translateY(0); transition: transform var(--t-med) var(--ease-out);
}
.nav.is-hidden { transform: translateY(-102%); }
.nav__links { display: flex; gap: 28px; align-items: center; }
.nav__link {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
  position: relative; padding: 4px 0; transition: color var(--t-fast) ease;
}
.nav__link::after { content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: var(--orange); transition: right var(--t-med) var(--ease-out); }
.nav__link:hover { color: var(--ink); } .nav__link:hover::after { right: 0; }

/* scroll progress bar */
.scroll-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--orange); z-index: 90; }

/* ------------------------------------------------------------------ FOOTER */
.footer { background: var(--ink); color: var(--bone); padding: clamp(48px, 7vw, 96px) var(--gutter); }
.footer a { color: rgba(244,240,230,0.7); transition: color var(--t-fast) ease; }
.footer a:hover { color: #fff; }
.footer .meta { color: rgba(244,240,230,0.5); }

/* ------------------------------------------------- CUSTOM CURSOR (fine ptr) */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; will-change: transform; }
.cursor-dot  { width: 7px; height: 7px; background: #fff; margin: -3.5px 0 0 -3.5px; }
.cursor-ring { width: 38px; height: 38px; border: 1.5px solid #fff; margin: -19px 0 0 -19px; transition: width .2s var(--ease-out), height .2s var(--ease-out), margin .2s var(--ease-out), background .2s ease; }
.cursor-ring.is-hot { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(244,90,31,0.18); border-color: var(--orange); }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ----------------------------------------------------- ANIMATION PRIMITIVES */
/* Initial hidden states only apply when JS is on; no-JS shows everything.    */
html.js [data-reveal]            { opacity: 0; }
html.js [data-reveal="up"]       { transform: translateY(34px); }
html.js [data-reveal="down"]     { transform: translateY(-34px); }
html.js [data-reveal="left"]     { transform: translateX(40px); }
html.js [data-reveal="right"]    { transform: translateX(-40px); }
html.js [data-reveal="scale"]    { transform: scale(0.92); }
/* clip: hidden via the blanket opacity:0 above. Do NOT hide it with clip-path —
   a clip-path-clipped element reports intersectionRatio 0, so its IO reveal
   never fires. The clip-wipe is applied by the reveal tween (app.js clip branch). */
html.js [data-reveal-stagger] > * { opacity: 0; transform: translateY(28px); }

[data-reveal], [data-reveal-stagger] > * { will-change: transform, opacity; }

/* respect reduced motion: reveal instantly, kill decorative motion */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .cursor-dot, .cursor-ring { display: none; }
  .squiggle::after { clip-path: inset(0 0 0 0) !important; animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ----------------------------------------------------------- RESPONSIVE */
@media (max-width: 880px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .gridlines { background-size: 56px 56px; }
}

/* Tailwind utility shims (Play CDN dropped; only these utilities are used in markup) */
.grid{display:grid}.relative{position:relative}.hidden{display:none}.block{display:block}