/* ==========================================================================
   KATARI JYOTHSNA - base.css
   Reset, document defaults, typography, links, forms, utility classes.
   Load order: tokens.css -> base.css -> layout.css -> components.css ...
   ========================================================================== */

/* --------------------------------------------------------------- 1. Reset */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Clip on the root as well as on body. A decorative pseudo-element can
     still widen the scroll area even when no real element does, and this
     guarantees the page can never be dragged sideways. */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  hanging-punctuation: first last;
}

body {
  min-height: 100svh;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color var(--dur-slow) var(--ease-out-expo),
              color var(--dur-slow) var(--ease-out-expo);
}

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

/* Icon slots filled by main.js. Without an explicit inline-flex box the
   span stays inline while the svg inside it is block, which pushed the
   arrow onto its own line inside every button. */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 0;
}
[data-icon] svg { width: 1em; height: 1em; }

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6, li, figcaption {
  overflow-wrap: break-word;
}

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

:where(ul, ol):not([role="list"]) { padding-left: 1.15em; }

hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin-block: var(--sp-l);
}

::selection {
  background: color-mix(in oklab, var(--accent) 30%, transparent);
  color: var(--ink-strong);
}

/* --------------------------------------------- 2. Focus + skip navigation */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed;
  top: var(--sp-s);
  left: var(--sp-s);
  z-index: 9999;
  padding: .75rem 1.25rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.skip-link:focus { transform: translateY(0); }

/* ---------------------------------------------------------- 3. Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink-strong);
  text-wrap: balance;
}

h1 { font-size: var(--step-7); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
h6 { font-size: var(--step-0); }

p { text-wrap: pretty; }

/* Emphasis inside display type - the italic "signature" word */
.script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}

.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -0.028em;
}

.serif { font-family: var(--font-accent); font-weight: 400; }

/* Small caps eyebrow above a heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: clamp(1.6rem, 4vw, 3rem);
  height: 1px;
  background: currentColor;
  opacity: .65;
}
.eyebrow--center::after {
  content: "";
  width: clamp(1.6rem, 4vw, 3rem);
  height: 1px;
  background: currentColor;
  opacity: .65;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 56ch;
}

.muted { color: var(--ink-muted); }
.soft  { color: var(--ink-soft); }
.gold  { color: var(--gold); }
.accent-text { color: var(--accent); }

.measure { max-width: var(--measure); }
.measure-tight { max-width: 46ch; }

/* Gold gradient text - used on hero words + big numbers */
.text-gold-sheen {
  background: linear-gradient(
      100deg,
      var(--brand-amber-500) 0%,
      var(--brand-marigold) 32%,
      var(--brand-amber-500) 52%,
      var(--brand-marigold-200) 72%,
      var(--brand-amber-500) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen-drift 9s linear infinite;
}
[data-theme="dark"] .text-gold-sheen,
.invert .text-gold-sheen {
  background: linear-gradient(
      100deg,
      var(--brand-marigold) 0%,
      #FFF3D2 34%,
      var(--brand-marigold) 55%,
      #FFF9E8 74%,
      var(--brand-marigold) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----------------------------------------------------------- 4. Link base */
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  transition: color var(--dur-fast) var(--ease-out-quint);
}
a:hover { color: var(--accent); }

/* Animated underline that wipes in from the left */
.link-wipe {
  position: relative;
  text-decoration: none;
  display: inline-block;
  padding-bottom: 2px;
}
.link-wipe::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.link-wipe:hover::after,
.link-wipe:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-strong);
}
.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--ease-out-expo); }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover svg { transform: translateX(.35em); }

/* --------------------------------------------------------- 5. Form basics */
label { display: block; font-size: var(--step--1); font-weight: 600; letter-spacing: .02em; }

input, textarea, select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: .95rem 1.1rem;
  color: var(--ink);
  transition: border-color var(--dur-base) var(--ease-out-quint),
              box-shadow  var(--dur-base) var(--ease-out-quint),
              background-color var(--dur-base) var(--ease-out-quint);
}
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: 1; }

input:hover, textarea:hover, select:hover { border-color: var(--line-strong); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 16%, transparent);
}

textarea { min-height: 9rem; resize: vertical; }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 3rem;
}

button { cursor: pointer; border: 0; background: none; }

/* ---------------------------------------------------------- 6. Utilities */
.u-hidden      { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-center     { text-align: center; }
.u-right      { text-align: right; }
.u-mx-auto    { margin-inline: auto; }
.u-relative   { position: relative; }
.u-nowrap     { white-space: nowrap; }
.u-uppercase  { text-transform: uppercase; letter-spacing: .16em; }
.u-full       { width: 100%; }

.mt-0  { margin-top: 0; }
.mt-xs { margin-top: var(--sp-xs); }
.mt-s  { margin-top: var(--sp-s); }
.mt-m  { margin-top: var(--sp-m); }
.mt-l  { margin-top: var(--sp-l); }
.mt-xl { margin-top: var(--sp-xl); }
.mt-2xl{ margin-top: var(--sp-2xl); }
.mb-s  { margin-bottom: var(--sp-s); }
.mb-m  { margin-bottom: var(--sp-m); }
.mb-l  { margin-bottom: var(--sp-l); }
.mb-xl { margin-bottom: var(--sp-xl); }

/* Vertical rhythm helper: space children evenly */
.flow > * + * { margin-top: var(--flow-space, 1.15em); }
.flow-l > * + * { margin-top: var(--flow-space, 1.85em); }

/* A thin gold hairline used as a section separator */
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold) 18%, var(--line-gold) 82%, transparent);
  border: 0;
}

/* ------------------------------------------- 7. Film grain + mesh ambience */
.grain {
  position: fixed;
  /* inset:0, NOT -50%. An oversized fixed layer still counts toward
     scrollWidth, and this one alone was making the page scroll sideways.
     The drift is done with background-position instead of transform. */
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: grain-drift 8s steps(10) infinite;
  will-change: background-position;
}

/* Soft coloured light-bloom behind sections */
.mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.mesh::before,
.mesh::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .85;
  will-change: transform;
}
.mesh::before {
  width: 46vw; height: 46vw;
  min-width: 320px; min-height: 320px;
  top: -14%; left: -10%;
  background: radial-gradient(circle at 40% 40%, var(--mesh-1), transparent 68%);
  animation: orb-a 22s var(--ease-in-out) infinite alternate;
}
.mesh::after {
  width: 40vw; height: 40vw;
  min-width: 280px; min-height: 280px;
  bottom: -18%; right: -8%;
  background: radial-gradient(circle at 60% 60%, var(--mesh-2), transparent 68%);
  animation: orb-b 26s var(--ease-in-out) infinite alternate;
}

/* -------------------------------------------------- 8. Scrollbar (webkit) */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--surface-sunk); }
  ::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--accent) 55%, var(--surface-sunk));
    border-radius: var(--r-pill);
    border: 3px solid var(--surface-sunk);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
}

/* ---------------------------------------------------------- 9. Print */
@media print {
  .grain, .site-header, .site-footer, .cursor, .scroll-progress,
  .mobile-bar, .to-top, .preloader { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; }
}