/* ==========================================================================
   KOAN DESIGN SYSTEM
   One source of truth for colour, type, spacing and motion on /koan.
   Loaded last: it standardises every section. New sections should be built
   from the k-* components below (see docs/koan-design-system.md).
   ========================================================================== */

:root {
  /* Colour — night is the default surface; paper is reserved for the dream (section 04) */
  --k-bg: #080808;
  --k-bg-raised: #0f0f11;
  --k-ink: #f2f2f2;
  --k-ink-2: rgba(242, 242, 242, .74);      /* body copy */
  --k-ink-3: rgba(242, 242, 242, .5);       /* labels, captions */
  --k-line: rgba(255, 255, 255, .16);
  --k-line-strong: rgba(255, 255, 255, .42);
  --k-paper: #ece9e2;
  --k-paper-ink: #111111;
  --k-paper-ink-2: rgba(17, 17, 17, .72);
  --k-paper-ink-3: rgba(17, 17, 17, .5);
  --k-paper-line: rgba(17, 17, 17, .18);

  /* Type families */
  --k-font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;  /* titles */
  --k-font-logo: 'Libre Caslon Display', Didot, 'Times New Roman', serif;   /* KOΛN, numerals */
  --k-font-mono: 'IBM Plex Mono', 'Courier New', monospace;                 /* labels, links */
  --k-font-body: Arial, Helvetica, sans-serif;                              /* reading text */

  /* Type scale (fluid) */
  --k-t-title: clamp(46px, calc(5.6vw + 22px), 100px);   /* titles in full-width sections */
  --k-t-title-split: clamp(46px, calc(3.2vw + 26px), 76px); /* titles beside an image (split sections) */
  --k-t-numeral: clamp(96px, 14vw, 220px);               /* big display numbers (2046, ₹20) */
  --k-t-h3: clamp(30px, 2.6vw, 40px);
  --k-t-body: 17px;
  --k-t-small: 14px;
  --k-t-label: 11px;

  /* Spacing */
  --k-gutter: clamp(22px, 6vw, 104px);                   /* left/right edge of all content */
  --k-section-y: clamp(88px, 13vh, 150px);               /* top/bottom of a section */
  --k-gap-kicker: 26px;                                  /* kicker → title */
  --k-gap-title: 30px;                                   /* title → text */
  --k-gap-para: 16px;
  --k-measure: 34em;                                     /* comfortable line length */

  /* Motion: one curve, one rise, one stagger */
  --k-ease: cubic-bezier(.16, 1, .3, 1);
  --k-dur: .9s;
  --k-rise: 20px;
  --k-stagger: .08s;
}
@media (max-width: 800px) {
  :root { --k-t-body: 16px; --k-section-y: 76px; --k-gap-kicker: 20px; --k-gap-title: 24px; }
}

/* ── Components ─────────────────────────────────────────────────────────── */

/* Section wrapper for new sections */
.k-section { position: relative; background: var(--k-bg); color: var(--k-ink); padding: var(--k-section-y) var(--k-gutter); }
.k-section.k-paper { background: var(--k-paper); color: var(--k-paper-ink); }
.k-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
@media (max-width: 800px) { .k-grid-2 { grid-template-columns: 1fr; } }

/* Kicker: "0N / SECTION NAME" above every section title */
.k-kicker {
  display: block;
  margin: 0 0 var(--k-gap-kicker) !important;
  font: 400 var(--k-t-label)/1.6 var(--k-font-mono) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--k-ink-2) !important;
}
/* Title: every section heading (extra specificity beats legacy !important size rules) */
.k-title, main h2.k-title {
  margin: 0 0 var(--k-gap-title) !important;
  font-family: var(--k-font-display) !important;
  font-weight: 600 !important;
  font-size: var(--k-t-title) !important;
  line-height: .92 !important;
  letter-spacing: -.015em !important;
  text-transform: uppercase !important;
  color: var(--k-ink) !important;
  max-width: 14ch;
}
.contact-intro h2.k-title, .universe h2.k-title, .funding h2.k-title, .filmmakers h2.k-title { font-size: var(--k-t-title-split) !important; max-width: 16ch; }
.k-title em, main h2.k-title em { font-style: normal !important; color: inherit !important; }
/* Body copy */
.k-body {
  margin: 0 0 var(--k-gap-para) !important;
  max-width: var(--k-measure) !important;
  font: 400 var(--k-t-body)/1.65 var(--k-font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--k-ink-2) !important;
}
/* Small label: metadata, captions, credits terms */
.k-label {
  font: 400 var(--k-t-label)/1.6 var(--k-font-mono) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--k-ink-3) !important;
}
/* Link: every text call-to-action */
.k-link {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  min-height: 0 !important;
  margin-top: 22px;
  padding: 0 0 9px !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--k-line-strong) !important;
  font: 400 var(--k-t-label)/1.4 var(--k-font-mono) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--k-ink) !important;
  cursor: pointer;
  transition: border-color .3s ease, opacity .3s ease;
}
.k-link:hover { border-bottom-color: var(--k-ink) !important; }
.k-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* Pull quote */
.k-quote {
  max-width: 26em;
  margin: 28px 0 0 !important;
  font: 400 italic 19px/1.5 var(--k-font-body) !important;
  color: var(--k-ink) !important;
}
/* Big display numeral */
.k-numeral {
  font-family: var(--k-font-display) !important;
  font-weight: 600 !important;
  font-size: var(--k-t-numeral) !important;
  line-height: .9 !important;
  letter-spacing: -.03em !important;
}

/* Paper surface flips the inks */
.k-paper .k-kicker, .universe .k-kicker { color: var(--k-paper-ink-2) !important; }
.k-paper .k-title, .universe .k-title { color: var(--k-paper-ink) !important; }
.k-paper .k-body, .universe .k-body { color: var(--k-paper-ink-2) !important; }
.k-paper .k-label, .universe .k-label { color: var(--k-paper-ink-3) !important; }
.k-paper .k-quote, .universe .k-quote { color: var(--k-paper-ink) !important; }

/* ── Motion: the single reveal used for ordinary content ─────────────────────
   Elements with [data-k-reveal] fade and rise once when they enter the view.
   Two signature moments keep their own treatment: the eye journey (01→02)
   and section 01 developing out of the white-out. */
html.k-motion [data-k-reveal] {
  opacity: 0;
  translate: 0 var(--k-rise);
  transition: opacity var(--k-dur) ease, translate var(--k-dur) var(--k-ease);
  transition-delay: calc(var(--k-i, 0) * var(--k-stagger));
}
html.k-motion [data-k-reveal].k-in { opacity: 1; translate: 0 0; }
@media all {
  html:where([data-koan-motion="reduced"]).k-motion [data-k-reveal] { opacity: 1; translate: none; transition: none; }
}

/* ── Standardisation of the existing sections ───────────────────────────── */

/* One surface colour for every night section; no per-section dimming or blur on entry */
.contact-intro, .trailer-section, .stills-section.patreon-style, .funding, .posters, .filmmakers, footer { background: var(--k-bg) !important; }
.intro-copy, .universe-copy, .funding-copy, .filmmakers-copy, .crown-art, .filmmakers-image { filter: none !important; }

/* Every small .eyebrow that is not a kicker is a label */
main .eyebrow:not(.k-kicker), footer .eyebrow { font: 400 var(--k-t-label)/1.6 var(--k-font-mono) !important; letter-spacing: .16em !important; color: var(--k-ink-3) !important; }
.universe .eyebrow:not(.k-kicker) { color: var(--k-paper-ink-3) !important; }

/* Shared edges */
.intro-copy { padding-left: var(--k-gutter) !important; padding-right: var(--k-gutter) !important; }
.universe-copy { padding: var(--k-section-y) var(--k-gutter) !important; }
.funding { padding: var(--k-section-y) var(--k-gutter) !important; }
.posters { padding: var(--k-section-y) 0 calc(var(--k-section-y) * .7) !important; }
.posters .section-heading { padding-left: var(--k-gutter) !important; padding-right: var(--k-gutter) !important; }
.poster-rail { padding-left: var(--k-gutter) !important; padding-right: var(--k-gutter) !important; scroll-padding-left: var(--k-gutter); }
.poster-hint { margin-left: var(--k-gutter) !important; margin-right: var(--k-gutter) !important; }
.filmmakers-copy { padding: var(--k-section-y) var(--k-gutter) !important; }
.stills-editorial-header { left: var(--k-gutter) !important; }
footer { padding: 64px var(--k-gutter) !important; border-top: 1px solid var(--k-line); }

/* Section 02 — trailer: same title treatment as every other section */
.trailer-section .k-title { margin-left: auto; margin-right: auto; max-width: none; }
.trailer-section .k-body { margin-left: auto !important; margin-right: auto !important; }

/* Section 03 — stills keep their signature title, with the standard kicker above it */
.stills-editorial-header .k-kicker { color: #fff !important; }

/* Section 04 — the dream (paper surface) */
.universe .year { margin: 0 0 18px !important; color: var(--k-paper-ink) !important; }
.universe .series-label { border-color: var(--k-paper-line) !important; }

/* Section 05 — funding */
.funding-number { border-color: var(--k-line) !important; }
.funding-number strong { font-family: var(--k-font-display) !important; font-weight: 600 !important; }
.film-plans h3 { font: 600 var(--k-t-h3)/1.05 var(--k-font-display) !important; text-transform: uppercase; letter-spacing: -.01em; }
.campaign-status { border-color: var(--k-line-strong) !important; }
.campaign-status strong { font: 600 22px/1.2 var(--k-font-display) !important; text-transform: uppercase; letter-spacing: .01em; }
.campaign-status p, .funding-copy .development-note { font: 400 var(--k-t-small)/1.6 var(--k-font-body) !important; color: var(--k-ink-3) !important; }
.basilisk-premise { border-color: var(--k-line) !important; }
.basilisk-premise summary { font: 400 var(--k-t-label)/1.6 var(--k-font-mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--k-ink) !important; }
.basilisk-premise p { font: 400 var(--k-t-small)/1.7 var(--k-font-body) !important; color: var(--k-ink-2) !important; }

/* Section 06 — posters: captions are labels */
.poster-card > span { font: 400 var(--k-t-label)/1.6 var(--k-font-mono) !important; letter-spacing: .08em; color: var(--k-ink-3) !important; }

/* Section 07 — credits */
.filmmakers-byline { font: 400 var(--k-t-small)/1.6 var(--k-font-mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--k-ink-2) !important; margin: 0 0 40px !important; }
.credits-list { border-top: 1px solid var(--k-line); padding-top: 22px; }
.credits-list dt { font: 400 var(--k-t-label)/1.6 var(--k-font-mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--k-ink-3) !important; }
.credits-list dd { font: 400 var(--k-t-small)/1.6 var(--k-font-body) !important; color: var(--k-ink) !important; }

/* Footer */
footer p { font: 400 var(--k-t-label)/1.6 var(--k-font-mono) !important; letter-spacing: .16em; color: var(--k-ink-3) !important; }

/* The KOΛN logogram stays inline inside captions and labels */
.poster-card .koan-mark, .poster-card .koan-mark > span[aria-hidden] { display: inline !important; margin-top: 0 !important; }

/* Split sections stack on phones with one standard gap between image and copy */
@media (max-width: 800px) {
  .funding { row-gap: 72px !important; }
  .crown-art > .eyebrow { margin-top: 18px !important; text-align: center; }
}

/* Section 02 — About the film: one note from the writer-director */
.statements .k-title { margin-bottom: clamp(36px, 5vw, 64px) !important; }
.statement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
.statement { max-width: 44em; border-top: 1px solid var(--k-line); padding-top: 22px; }
.statement .statement-label { display: block; margin: 0 0 22px !important; color: var(--k-ink-2) !important; }
.statement .statement-sign { margin-top: 26px !important; color: var(--k-ink-2) !important; }
@media (max-width: 800px) { .statement-grid { grid-template-columns: 1fr; } }
/* Landscape / desktop: the vase fills the whole left half, edge to edge; title and note on the right */
@media (min-width: 801px) and (orientation: landscape) {
  .statements {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;   /* spacer rows centre the note vertically beside the vase */
    padding: 0 !important;
    align-items: start;
  }
  .statements > .statement-vase {
    grid-column: 1; grid-row: 1 / -1;
    align-self: stretch;
    margin: 0; max-width: none; width: 100%; height: 100%;
    min-height: 100svh; aspect-ratio: auto;
    box-shadow: none;
  }
  .statements > .k-kicker, .statements > .k-title, .statements > .statement {
    grid-column: 2;
    padding-left: clamp(48px, 6vw, 110px) !important;
    padding-right: var(--k-gutter) !important;
  }
  .statements > .k-kicker { grid-row: 2; padding-top: var(--k-section-y) !important; }
  .statements > .k-title { grid-row: 3; font-size: var(--k-t-title-split) !important; }
  .statements > .statement { grid-row: 4; max-width: none; border-top: 0; padding-top: 0; padding-bottom: var(--k-section-y); }
  .statements > .statement > * { max-width: calc(52 * var(--k-t-body)); }   /* same measure for the quote and the text (em would scale with the quote's big type) */
  .statements > .statement .statement-label { border-top: 1px solid var(--k-studio-line); padding-top: 22px; }
}


/* ── Studio surface: the film's white room ───────────────────────────────
   Sections alternate between night (--k-bg) and the studio white the film is shot in. */
:root {
  --k-studio: var(--k-paper);     /* one light surface for the whole page: the warm paper */
  --k-studio-ink: var(--k-paper-ink);
  --k-studio-ink-2: var(--k-paper-ink-2);
  --k-studio-ink-3: var(--k-paper-ink-3);
  --k-studio-line: rgba(18, 20, 22, .16);
  --k-studio-line-strong: rgba(18, 20, 22, .42);
}
main section.k-studio { background: var(--k-studio) !important; color: var(--k-studio-ink) !important; }
main section.k-studio .k-kicker { color: var(--k-studio-ink-2) !important; }
main section.k-studio .k-title, main section.k-studio h2, main section.k-studio .k-pull { color: var(--k-studio-ink) !important; }
main section.k-studio .k-body, main section.k-studio .k-label { color: var(--k-studio-ink-2) !important; }
main section.k-studio .eyebrow:not(.k-kicker), main section.k-studio .poster-card > span { color: var(--k-studio-ink-3) !important; }
main section.k-studio .k-link { color: var(--k-studio-ink) !important; border-bottom-color: var(--k-studio-line-strong) !important; }
main section.k-studio .statement { border-top-color: var(--k-studio-line); }
main section.k-studio .poster-nav button { color: var(--k-studio-ink) !important; border-color: var(--k-studio-line-strong) !important; background: transparent; }
main section.k-studio .poster-nav button:hover { background: rgba(18, 20, 22, .06); border-color: var(--k-studio-ink) !important; }
main section.k-studio .poster-card img { box-shadow: 0 24px 60px rgba(18, 20, 22, .18); }

/* In the director's note the quote sits on exactly the same measure as the text below it */
.statement .k-pull, .statements > .statement > .k-pull { max-width: calc(44 * var(--k-t-body)); }

/* Pull quote: one large line that carries a section instead of paragraphs */
.k-pull {
  margin: 0 0 28px !important;
  max-width: 22em;
  font: 400 clamp(26px, 2.6vw, 38px)/1.22 var(--k-font-logo) !important;
  letter-spacing: -.005em !important;
  color: var(--k-ink) !important;
}
/* "Read more" fold: keeps long text available without putting it on screen */
.k-more { margin-top: 6px !important; border: 0 !important; padding: 0 !important; }
.k-more > summary { list-style: none; cursor: pointer; margin: 6px 0 22px !important; }
.k-more > summary::-webkit-details-marker { display: none; }
.k-more[open] > summary { opacity: .6; }

/* The vase: the image the film grew from */
.statement-vase { margin: 0 0 40px; aspect-ratio: 4 / 5; max-width: 420px; overflow: hidden; background: #d8d3c8; box-shadow: 0 30px 70px rgba(18, 20, 22, .22); }
.statement-vase img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 800px) { .statement-vase { max-width: none; aspect-ratio: 2 / 3; } }

/* Section 01: the two links stack, left-aligned, at every width (a link and a button never
   share a baseline cleanly side by side) */
.intro-copy .k-link { display: flex !important; width: max-content; margin-top: 18px !important; }
.intro-copy .k-body + .k-link { margin-top: 30px !important; }

/* Language switch (English ⇄ हिन्दी) */
.site-header .lang-switch {
  font: 400 11px/1 var(--k-font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 13px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  color: #fff; background: rgba(8, 8, 10, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  white-space: nowrap; transition: border-color .25s, background .25s;
}
.site-header .lang-switch:hover { border-color: rgba(255, 255, 255, .7); background: rgba(8, 8, 10, .6); }
.site-header .lang-switch:lang(hi) { letter-spacing: 0; font-size: 13px; text-transform: none; }

/* Hero: a quiet credit block in the same white as KOΛN. No halos or boxes: one crisp,
   tight shadow (not a glow) keeps the small type legible where it crosses the pale wall. */
.hero-title .subtitle {
  display: flex; width: max-content; align-items: center; gap: 1.6em;
  margin: 22px auto 0; padding: 0; /* matches the byline-to-KOΛN gap above */
  background: none !important; border: 0; box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #fff !important; font: 500 clamp(11px, .9vw, 14px)/1 var(--k-font-mono) !important;
  letter-spacing: .62em !important; text-indent: .62em; /* balances the trailing tracking */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45) !important;
}
.hero-title .subtitle::before, .hero-title .subtitle::after {
  content: ""; width: clamp(24px, 3vw, 56px); height: 1px; background: currentColor; opacity: .8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.hero-title .subtitle::after { margin-left: -.62em; }
@media (max-width: 800px) {
  .hero-title .subtitle { gap: 1.1em; letter-spacing: .4em !important; text-indent: .4em; margin-top: 19px; }
  .hero-title .subtitle::after { margin-left: -.4em; }
}
html body .hero-title > p.eyebrow, html body .hero-bottom .enter {
  color: #fff !important; opacity: 1 !important; font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45) !important;
}
/* Bottom row: only the way in, dead centre */
html body .hero-bottom { justify-content: center !important; }
html body .hero-bottom .enter {
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.6 !important; white-space: nowrap;
  margin: 0 !important; font: 500 11px/1 var(--k-font-mono) !important; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase;
  text-decoration: none; transition: opacity .3s ease;
}
html body .hero-bottom .enter:hover { opacity: .7 !important; }
@media (max-width: 600px) { html body .hero-bottom { left: calc(4vw + 58px) !important; } }
html body .hero-bottom .scroll-line {
  width: 1px; height: 44px; margin: 16px 0 0; text-indent: 0;
  background: linear-gradient(#fff, transparent) !important;
  transform-origin: top; animation: k-hero-scroll 2.6s cubic-bezier(.6, 0, .2, 1) infinite;
}
@keyframes k-hero-scroll { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media all { html:where([data-koan-motion="reduced"]) body .hero-bottom .scroll-line { animation: none; } }

/* Spacing consistency: kicker → title uses the same gap in the overlay sections as everywhere else */
.after-body .eyebrow { margin-bottom: calc(var(--k-gap-kicker) - 16px) !important; }

/* Touch targets: text links and small buttons get a 44px hit area on touch screens */
@media (pointer: coarse), (max-width: 700px) {
  html body .research-trigger, html body .k-link { display: inline-flex !important; align-items: center; min-height: 44px !important; }
}

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Lighter chrome: on desktop the sound control rests as a small icon pill and opens on hover or focus */
@media (hover: hover) and (min-width: 801px) {
  .music-dock { opacity: .72; transition: opacity .35s ease, background .35s ease; }
  .music-dock:hover, .music-dock:focus-within { opacity: 1; }
  .music-dock .music-text, .music-dock .volume-divider, .music-dock .music-volume-ctrl { display: none !important; }
  .music-dock:hover .music-text, .music-dock:focus-within .music-text, .music-dock:hover .volume-divider, .music-dock:focus-within .volume-divider { display: block !important; }
  .music-dock:hover .music-volume-ctrl, .music-dock:focus-within .music-volume-ctrl { display: flex !important; }
}

/* No live blur behind the sound control: a backdrop blur over moving content is redone on every scroll frame */
.music-dock { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(12, 12, 14, .9) !important; }

/* Desktop: the eye journey covers half the scroll distance it did */

/* Phones: no double-tap zoom (a stray double tap on Enter zoomed the entry card 2x and left the title off-screen); pinch zoom still works */
html, body, .k-gate, .k-gate button, .k-gate a { touch-action: manipulation; }

/* phones: the eye opening covers 30% less scroll distance (485svh -> 340svh), so it moves faster */