/* ==========================================================================
   base.css — shared by every page on devkrity.com, kautuka.dev,
   docs.kautuka.dev, devkrity.com/narad/ and /narad/docs/.
   Load order: base.css → tokens-<brand>.css → <page>.css → navigation.css
   Contains: @font-face, shared scale tokens, reset, layout primitives,
   shared components (header, footer, buttons, links, command block,
   table, disclosure, figure frames), focus, motion. No brand colours:
   every colour below is a var() that a tokens-<brand>.css file sets.
   ========================================================================== */

/* ---------- Fonts: family names match the stacks exactly -------------- */
/* Files live in /fonts/ (served on all hosts by worker/index.js).          */
@font-face { font-family:'Source Sans 3'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Source Sans 3'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/source-sans-3-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Source Sans 3'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/source-sans-3-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/newsreader-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap; src:url('/fonts/newsreader-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/newsreader-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* ---------- Shared system tokens (identical on every brand) ------------ */
:root {
  /* families */
  --font-sans: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* fluid type scale: value at 390px → value at 1280px */
  --step--1: 0.875rem;                                          /* 14 → 14 */
  --step-0: clamp(1rem, 0.9726rem + 0.1124vw, 1.0625rem);       /* 16 → 17 */
  --step-1: clamp(1.125rem, 1.07rem + 0.2247vw, 1.25rem);       /* 18 → 20 */
  --step-2: clamp(1.3125rem, 1.23rem + 0.3371vw, 1.5rem);       /* 21 → 24 */
  --step-3: clamp(1.625rem, 1.461rem + 0.6742vw, 2rem);         /* 26 → 32 */
  --step-4: clamp(2rem, 1.671rem + 1.348vw, 2.75rem);           /* 32 → 44 */
  --step-5: clamp(2.375rem, 1.772rem + 2.472vw, 3.75rem);       /* 38 → 60 */
  --step-6: clamp(2.75rem, 1.654rem + 4.494vw, 5.25rem);        /* 44 → 84 */
  --leading-tight: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --measure: 38rem;          /* ~68 characters at 17px */
  --measure-wide: 46rem;

  /* spacing scale (4px base) */
  --space-3xs: 0.25rem;  /*  4 */
  --space-2xs: 0.5rem;   /*  8 */
  --space-xs: 0.75rem;   /* 12 */
  --space-s: 1rem;       /* 16 */
  --space-m: 1.5rem;     /* 24 */
  --space-l: 2rem;       /* 32 */
  --space-xl: 3rem;      /* 48 */
  --space-2xl: 4rem;     /* 64 */
  --space-3xl: 6rem;     /* 96 */
  --space-4xl: 8rem;     /* 128 */
  --section: clamp(4rem, 2.247rem + 7.191vw, 8rem);      /* 64 → 128 */
  --gutter: clamp(1.25rem, 0.4831rem + 3.146vw, 3rem);    /* 20 → 48 */
  --gap: clamp(1.5rem, 0.8427rem + 2.697vw, 3rem);        /* 24 → 48 */
  --wrap: 75rem;            /* 1200 content width */
  --wrap-narrow: 50rem;     /*  800 */

  /* borders (colours come from brand tokens) */
  --border-hair: 1px;
  --border-ui: 1px;
  --border-strong: 2px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --tap: 44px;

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 160ms;
}

/* ---------- Reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; font-synthesis:none; scroll-padding-top:5rem; }
body { margin:0; background:var(--color-bg); color:var(--color-text); font:400 var(--step-0)/var(--leading-body) var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-wrap:break-word; }
img, svg, video { display:block; max-width:100%; height:auto; }
h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote, pre { margin:0; }
:where(ul[class], ol[class]) { padding:0; list-style:none; }
a { color:var(--color-link); text-decoration-thickness:1px; text-underline-offset:.2em; }
a:hover { color:var(--color-link-hover); text-decoration-thickness:2px; }
strong, b { font-weight:600; }
/* IBM Plex Mono ships 400/500 only: never synthesise or fall back to a heavier mono.
   Covers code in headings, bold, table headers, and bold inside code. */
:is(h1, h2, h3, h4, h5, h6, b, strong, th) :is(code, kbd, samp), :is(code, kbd, samp, pre) :is(b, strong) { font-weight:500; }
code, kbd, samp, pre { font-family:var(--font-mono); font-size:.9em; }
table { border-collapse:collapse; }
button { font:inherit; color:inherit; }
del { text-decoration-thickness:.08em; }
[hidden] { display:none !important; }

/* ---------- Headings: family/weight/tracking set per brand ------------- */
h1, h2, h3, h4 { font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-tracking); line-height:var(--leading-heading); color:var(--color-heading); text-wrap:balance; }
h1 { font-size:var(--step-6); line-height:var(--leading-tight); }
h2 { font-size:var(--step-5); line-height:1.08; }
h3 { font-size:var(--step-2); font-family:var(--font-h3, var(--font-display)); font-weight:var(--h3-weight, 600); letter-spacing:-.005em; }
h1 em, h2 em { font-style:var(--em-style, normal); font-weight:inherit; color:inherit; }
p { text-wrap:pretty; }

/* ---------- Layout primitives ------------------------------------------ */
.wrap { width:100%; max-width:calc(var(--wrap) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow { max-width:calc(var(--wrap-narrow) + 2 * var(--gutter)); }
.section, [data-section] { padding-block:var(--section); }
.section-alt, [data-tone="alt"] { background:var(--color-surface); }
.section-ink, [data-tone="ink"] { background:var(--color-ink-bg); color:var(--color-ink-text); --color-heading:var(--color-ink-text); --color-text:var(--color-ink-text); --color-muted:var(--color-ink-muted); --color-link:var(--color-ink-link); --color-link-hover:var(--color-ink-text); --color-focus:var(--color-ink-focus); --color-line:var(--color-ink-line); --color-line-ui:var(--color-ink-line-ui); }
.section-head { display:grid; gap:var(--space-s); max-width:var(--measure-wide); margin-bottom:var(--space-xl); }
.lede { font-size:var(--step-1); color:var(--color-muted); max-width:var(--measure); }
.muted { color:var(--color-muted); }
.measure { max-width:var(--measure); }
.stack > * + * { margin-top:var(--space-s); }
.split { display:grid; gap:var(--gap); grid-template-columns:repeat(12, minmax(0,1fr)); }
.split > .span-5 { grid-column:span 5; } .split > .span-6 { grid-column:span 6; } .split > .span-7 { grid-column:span 7; } .split > .span-4 { grid-column:span 4; } .split > .span-8 { grid-column:span 8; }
@media (max-width:860px) { .split > [class*="span-"] { grid-column:1 / -1; } }
.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ---------- Skip link ---------------------------------------------------- */
.skip { position:absolute; left:var(--space-s); top:-100px; z-index:100; padding:var(--space-xs) var(--space-s); background:var(--color-heading); color:var(--color-bg); border-radius:var(--radius-s); }
.skip:focus { top:var(--space-s); }

/* ---------- Eyebrow (at most one per section type; often none) ---------- */
.eyebrow { font:600 var(--step--1)/1.3 var(--font-sans); letter-spacing:.02em; color:var(--color-muted); }
.eyebrow-data { font:500 .8125rem/1.3 var(--font-mono); letter-spacing:.04em; color:var(--color-muted); }

/* ---------- Site header (same pattern on every brand) ------------------- */
.site-header { position:sticky; top:0; z-index:50; background:var(--color-header-bg); border-bottom:var(--border-hair) solid var(--color-line); }
.site-header-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-m); min-height:4rem; }
.brand { display:inline-flex; align-items:center; gap:.625rem; min-height:var(--tap); color:var(--color-heading); text-decoration:none; font:var(--brand-weight, 700) 1.25rem/1 var(--font-brand, var(--font-sans)); letter-spacing:var(--brand-tracking, -.02em); }
.brand:hover { color:var(--color-heading); }
.brand-mark { height:var(--brand-mark-size, 28px); width:auto; flex:none; }
/* Kautuka wordmark: the kept logo's vermilion-to-turmeric thread, carried over from
   .kautuka .k-wordmark > span:last-child (old --k-thread). The only gradient text allowed
   besides the Kautuka hero <em>. --thread-gradient lives in tokens-kautuka.css and
   tokens-devkrity.css (company Kautuka door); use .brand-word only on pages loading one. */
.brand-word { background:var(--thread-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.site-nav { display:flex; align-items:center; gap:clamp(.25rem, 1.2vw, 1rem); }
.site-nav a { display:inline-flex; align-items:center; min-height:var(--tap); padding:0 .5rem; color:var(--color-nav); text-decoration:none; font:600 .9375rem/1 var(--font-sans); border-radius:var(--radius-s); }
.site-nav a:hover { color:var(--color-heading); text-decoration:underline; text-decoration-color:var(--color-accent-line); text-underline-offset:.45em; }
.site-nav a[aria-current="page"] { color:var(--color-heading); text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:var(--color-accent-line); text-underline-offset:.45em; }
.site-nav .nav-cta { margin-left:.5rem; padding:0 1rem; border:var(--border-ui) solid var(--color-line-ui); border-radius:var(--radius-button); color:var(--color-heading); }
.site-nav .nav-cta:hover { border-color:var(--color-heading); text-decoration:none; }

/* ---------- Site footer ------------------------------------------------- */
.site-footer { border-top:var(--border-hair) solid var(--color-line); background:var(--color-footer-bg); color:var(--color-muted); font-size:var(--step--1); }
.site-footer-inner { display:grid; gap:var(--space-l); grid-template-columns:minmax(0,1.2fr) minmax(0,2fr); padding-block:var(--space-2xl) var(--space-l); }
.site-footer .footer-brand p { margin-top:var(--space-xs); max-width:26rem; }
.site-footer nav { display:grid; grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr)); gap:0 var(--space-m); align-content:start; }
.site-footer nav a { display:flex; align-items:center; min-height:var(--tap); color:var(--color-text); text-decoration:none; }
.site-footer nav a:hover { text-decoration:underline; }
.site-footer-base { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-s); padding-block:var(--space-m) var(--space-l); border-top:var(--border-hair) solid var(--color-line); }
.site-footer-base small { font-size:var(--step--1); }
/* The Devkrity mark appears in every footer: the family signature. */
.made-by { display:inline-flex; align-items:center; gap:.5rem; color:var(--color-text); text-decoration:none; min-height:var(--tap); }
.made-by img { width:20px; height:20px; }
@media (max-width:760px) { .site-footer-inner { grid-template-columns:1fr; } }

/* ---------- Buttons and links (shared names, tested on company page) --- */
.button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:3rem; padding:0 1.375rem; border:var(--border-ui) solid transparent; border-radius:var(--radius-button); font:600 1.0625rem/1 var(--font-sans); text-decoration:none; cursor:pointer; transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.button-primary { background:var(--color-action); color:var(--color-on-action); }
.button-primary:hover { background:var(--color-action-hover); color:var(--color-on-action); text-decoration:none; }
.button-secondary { background:transparent; color:var(--color-heading); border-color:var(--color-line-ui); }
.button-secondary:hover { border-color:var(--color-heading); color:var(--color-heading); text-decoration:none; }
.text-link { display:inline-flex; align-items:center; gap:.375rem; min-height:var(--tap); color:var(--color-link); font-weight:600; text-decoration:underline; text-decoration-color:var(--color-accent-line); text-decoration-thickness:1px; text-underline-offset:.3em; }
.text-link:hover { color:var(--color-link-hover); text-decoration-thickness:2px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-s) var(--space-m); }

/* ---------- Command / code block --------------------------------------- */
.command { display:flex; align-items:stretch; max-width:100%; border:var(--border-ui) solid var(--color-line-ui); border-radius:var(--radius-s); background:var(--color-code-bg); color:var(--color-code-text); }
.command pre { flex:1; min-width:0; overflow-x:auto; padding:.875rem 1rem; font:400 .875rem/1.5 var(--font-mono); white-space:pre; }
.command .copy { flex:none; min-width:var(--tap); min-height:var(--tap); padding:0 1rem; border:0; border-left:var(--border-ui) solid var(--color-line-ui); background:transparent; color:var(--color-code-text); font:600 .875rem/1 var(--font-sans); cursor:pointer; border-radius:0 var(--radius-s) var(--radius-s) 0; }
.command .copy:hover { background:var(--color-code-hover); }
.no-js .command .copy, .command .copy[hidden] { display:none; }
pre.code { overflow-x:auto; padding:var(--space-s) var(--space-m); border:var(--border-hair) solid var(--color-line); border-radius:var(--radius-s); background:var(--color-code-bg); color:var(--color-code-text); font:400 .875rem/1.6 var(--font-mono); }
:not(pre) > code { padding:.1em .3em; border-radius:3px; background:var(--color-code-inline-bg); color:var(--color-code-inline-text); font-size:.875em; overflow-wrap:anywhere; }

/* ---------- Figures: real screenshots vs illustrations ------------------ */
.frame { margin:0; }
.frame img { width:100%; border:var(--border-hair) solid var(--color-line); border-radius:var(--radius-m); background:var(--color-card); box-shadow:var(--shadow-frame); }
.frame figcaption { margin-top:var(--space-xs); color:var(--color-muted); font-size:var(--step--1); }
/* A slot waiting for a real screenshot. Never ship a mock-up in its place. */
.placeholder-frame { display:grid; place-items:center; aspect-ratio:16/10; padding:var(--space-m); border:2px dashed var(--color-line-ui); border-radius:var(--radius-m); background:repeating-linear-gradient(135deg, transparent 0 12px, var(--color-placeholder-stripe) 12px 13px); color:var(--color-muted); text-align:center; font:600 var(--step--1)/1.4 var(--font-sans); }
.placeholder-frame b { display:block; color:var(--color-heading); }

/* ---------- Table (comparison, spec tables) ----------------------------- */
.table-scroll { overflow-x:auto; border:var(--border-hair) solid var(--color-line); border-radius:var(--radius-m); background:var(--color-card); }
.table { width:100%; min-width:44rem; font-size:var(--step--1); line-height:1.45; }
.table th, .table td { padding:.875rem 1rem; text-align:left; vertical-align:top; border-bottom:var(--border-hair) solid var(--color-line); }
.table thead th { font-weight:600; color:var(--color-muted); background:var(--color-surface); }
.table tbody th { font-weight:600; color:var(--color-heading); }
.table tr:last-child > * { border-bottom:0; }

/* ---------- Disclosure (FAQ) -------------------------------------------- */
.faq details { border-top:var(--border-hair) solid var(--color-line); }
.faq details:last-child { border-bottom:var(--border-hair) solid var(--color-line); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-m); min-height:3.5rem; padding:var(--space-s) 0; cursor:pointer; list-style:none; font:600 var(--step-1)/1.3 var(--font-sans); color:var(--color-heading); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; flex:none; width:1.5rem; text-align:center; font:400 1.5rem/1 var(--font-sans); color:var(--color-muted); }
.faq details[open] summary::after { content:"−"; }
.faq details p { max-width:var(--measure); padding:0 0 var(--space-m); color:var(--color-muted); }

/* ---------- Numbered list: the ONE numbered style in the system --------- */
.num-list { display:grid; gap:var(--space-l) var(--gap); grid-template-columns:repeat(2, minmax(0,1fr)); counter-reset:n; }
.num-list > * { padding-top:var(--space-s); border-top:var(--border-hair) solid var(--color-line); }
.num-list > * > span:first-child { display:block; margin-bottom:var(--space-xs); font:500 .8125rem/1 var(--font-mono); color:var(--color-muted); font-variant-numeric:tabular-nums; }
.num-list p { margin-top:var(--space-2xs); color:var(--color-muted); }
@media (max-width:760px) { .num-list { grid-template-columns:1fr; } }

/* ---------- Focus: visible on every interactive element ---------------- */
:focus { outline:none; }
:focus-visible { outline:var(--focus-width) solid var(--color-focus); outline-offset:var(--focus-offset); }
.table-scroll:focus-visible, [tabindex]:focus-visible { outline:var(--focus-width) solid var(--color-focus); }
summary:focus-visible { outline-offset:2px; }

/* ---------- Motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }

/* ---------- Mobile ------------------------------------------------------ */
@media (max-width:760px) {
  .button { width:100%; min-height:3rem; }
  .actions { flex-direction:column; align-items:stretch; }
  .actions .text-link { justify-content:flex-start; }
}

/* ---------- Sanskrit name line: Source Sans 3 has no Devanagari ------- */
:lang(sa), :lang(hi) { font-family:'Noto Sans Devanagari', 'Nirmala UI', 'Kohinoor Devanagari', 'Devanagari Sangam MN', var(--font-sans); }

/* ---------- Illustration tag (product-UI illustrations, never screenshots) */
.illustration { margin:0; }
.illustration img { width:100%; border-radius:var(--radius-m); }
.illustration figcaption { margin-top:var(--space-2xs); color:var(--color-muted); font-size:var(--step--1); }


/* ---------- Plain pages (privacy.html, terms.html: <body> with no class) ---- */
/* They load base.css + tokens-devkrity.css only; no page CSS needed.          */
:where(body:not([class])) > main { max-width:calc(var(--measure) + 2 * var(--gutter)); margin-inline:auto; padding:var(--space-2xl) var(--gutter); }
:where(body:not([class])) > main h1 { font-size:var(--step-5); }
:where(body:not([class])) > main h2 { margin-top:var(--space-xl); font-size:var(--step-3); }
:where(body:not([class])) > main p { margin-top:var(--space-s); }
:where(body:not([class])) > footer { max-width:calc(var(--measure) + 2 * var(--gutter)); margin-inline:auto; padding:var(--space-l) var(--gutter); border-top:var(--border-hair) solid var(--color-line); color:var(--color-muted); }
:where(body:not([class])) > footer a { display:inline-flex; align-items:center; min-height:var(--tap); }