/* ==========================================================================
   KRIYA over LUZEN — theme layer

   Loaded AFTER the Luzen stylesheet. Luzen is entirely CSS-variable driven,
   so retheming is a matter of re-pointing ~10 base variables rather than
   overriding component rules. Almost nothing below targets a component.

   Token values are the same ones in assets/brand/kriya-brand.css and in the
   Figma "Kriya · primitives" collection. Keep the three in step.
   ========================================================================== */

:root {
  /* --- Kriya tokens ------------------------------------------------------ */
  --k-ink:            #4E554C;   /* MEASURED, from the mark                  */
  --k-laterite:       #784628;   /* MEASURED, Bakers Arch brickwork          */
  --k-ground:         #F4F2ED;   /* MEASURED                                 */
  --k-ink-deep:       #2E352F;
  --k-ink-soft:       #6E756C;
  --k-ink-mute:       #A8ADA3;
  --k-laterite-light: #CD8F6A;   /* the dark-surface accent — see the rule   */
  --k-ground-warm:    #FBF9F5;
  --k-rule-light:     #D9D6CE;

  /* --- re-point Luzen's base palette -------------------------------------- */
  --base--white:            #FFFFFF;
  --base--soft-beige:       var(--k-ground);
  --base--bold-black:       var(--k-ink-deep);
  --base--soft-black:       var(--k-ink-deep);
  --base--secondary-black:  #39423B;
  --base--black:            #232823;
  --base--dark-grey:        var(--k-ink);
  --base--mid-grey:         var(--k-ink-soft);
  --base--grey:             var(--k-ink-mute);
  --base--secondary-grey:   var(--k-rule-light);

  /* text on light grounds is ink, not near-black */
  --text-color--text-primary: var(--k-ink);
  --text-color--text-dark:    var(--k-ink);

  /* --- type -------------------------------------------------------------- */
  --k-font-sans:  Geist, "Helvetica Neue", Arial, sans-serif;
  --_typography---font-family--headers: var(--k-font-sans);
  --_typography---font-family--body:    var(--k-font-sans);

  /* --- tweak-panel driven ------------------------------------------------- */
  --k-scale: 1;        /* global type multiplier   */
  --k-bleed: 1;        /* hero/image bleed         */
  --k-accent-weight: 1;/* how loudly laterite talks*/
}

/* ---- type scale multiplier ------------------------------------------------ */
html { font-size: calc(16px * var(--k-scale)); }

/* ==========================================================================
   THE LATERITE RULE, in CSS
   #784628 on the dark ground is 1.62:1 — invisible. Luzen's dark sections are
   .bg-primary (Selected Work, footer) and anything inside them must use the
   light tint instead. This is the only place the two values are chosen.
   ========================================================================== */
.project_link,
a.button,
.kriya-movement,
.heading_number .text-6xl {
  color: var(--k-laterite);
}
.bg-primary .project_link,
.bg-primary a.button,
.bg-primary .kriya-movement,
.bg-primary .heading_number .text-6xl,
.section_footer .project_link {
  color: var(--k-laterite-light);
}
.link-line { background-color: var(--k-laterite-light); }

/* the five-movement lead-in word */
.kriya-movement { font-weight: 500; }

/* section numerals sit quieter than Luzen has them */
.heading_number .text-6xl { opacity: calc(0.45 + 0.55 * var(--k-accent-weight)); }

/* ---- hero: image + one line, per the wireframe ---------------------------- */
.section_home .max-description,
.section_home .button-wrapper { display: none; }
.section_home .max-heading {
  max-width: 40rem; position: relative; z-index: 2;
  text-shadow: 0 1px 40px rgba(30,36,31,.55), 0 1px 4px rgba(30,36,31,.35);
}
/* Luzen animates this line per-word with GSAP SplitText on a scroll trigger.
   In a static mock the trigger can settle mid-reveal, leaving words at partial
   opacity. Legibility matters more here than the intro flourish. */
.section_home .max-heading,
.section_home .max-heading * { opacity: 1 !important; }

/* Luzen's hero image is a CSS background on an otherwise empty div, so the
   swap happens here rather than in the markup. Periyar River Lodge: a building
   emerging from its landscape — the concept in one frame. */
.home_one-bg {
  background-image: url("img/hero-periyar.jpg") !important;
  background-position: 50% 62% !important;
}

/* Scrim. The photograph is daylit and mid-toned; white display type needs help
   or the one line we have gets lost. Kept as a gradient so the foreground
   planting stays readable at the base of the frame. */
.section_home::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(30,36,31,.72) 0%,
    rgba(30,36,31,.42) 55%,
    rgba(30,36,31,.70) 100%);
}
/* NOTE: forcing color/-webkit-text-fill-color on the split children made the
   headline vanish entirely — Luzen's GSAP SplitText appears to manage those
   nodes in a way that fights the override. Left alone deliberately; the hero
   headline treatment is the one open item on this mock. See docs/19. */

/* ---- image bleed ---------------------------------------------------------- */
.section_home { min-height: calc(78vh * var(--k-bleed)); }

/* ---- template furniture that must not survive ----------------------------- */
.w-webflow-badge { display: none !important; }
.navbar_content .button { display: none; }        /* the emptied "Buy template" */
.kriya-footer-mark { width: 76px; color: var(--k-ground); }
.kriya-footer-mark svg { width: 100%; height: auto; display: block; }
.nav_svg { width: 42px; height: auto; }

/* ---- movements read as a list, not as statistics -------------------------- */
.stats-item .stats_data .text-5xl {
  font-size: 1.05rem;
  letter-spacing: .14em;
  opacity: .55;
}

/* ---- project cards: name and meta ---------------------------------------- */
.project_title > div:first-child { font-size: 1.35rem; }
.project_link { letter-spacing: 0; font-size: .95rem; }

/* ---- rich text on the project page ---------------------------------------- */
.rich-text h6 {
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--k-ink-soft);
  margin-bottom: .6rem;
}
.rich-text p { margin-bottom: 2.4rem; max-width: 34rem; }

/* ==========================================================================
   Tweak panel — mock-only chrome. Never ships to Webflow.
   ========================================================================== */
#k-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  width: 264px; padding: 16px 18px 18px;
  background: rgba(46, 53, 47, .94);
  color: #F4F2ED;
  font: 12px/1.45 Geist, system-ui, sans-serif;
  border-radius: 4px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
#k-panel h4 {
  margin: 0 0 12px; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: #A8ADA3; font-weight: 500;
}
#k-panel label { display: block; margin: 11px 0 3px; color: #C9CDC5; }
#k-panel input[type=range] { width: 100%; accent-color: #CD8F6A; }
#k-panel .k-row { display: flex; gap: 6px; margin-top: 6px; }
#k-panel button {
  flex: 1; padding: 6px 4px; cursor: pointer;
  background: transparent; color: #F4F2ED;
  border: 1px solid #576055; border-radius: 3px;
  font: inherit;
}
#k-panel button[aria-pressed="true"] { background: #CD8F6A; color: #2E352F; border-color: #CD8F6A; }
#k-panel .k-val { float: right; color: #CD8F6A; }
#k-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 10000;
  padding: 8px 12px; cursor: pointer;
  background: #2E352F; color: #F4F2ED; border: 0; border-radius: 3px;
  font: 12px Geist, system-ui, sans-serif;
}
@media print { #k-panel, #k-toggle { display: none; } }