/* KING Studios — Cinematic Creative Agency
   Design system: warm-black cinematic editorial with molten amber accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ink:      oklch(0.13 0.008 60);
  --ink-2:    oklch(0.16 0.008 60);
  --char:     oklch(0.19 0.008 60);
  --char-2:   oklch(0.24 0.008 60);
  --line:     oklch(0.32 0.008 60 / 0.55);
  --line-soft:oklch(0.32 0.008 60 / 0.28);
  --bone:     oklch(0.72 0.015 70);
  --ivory:    oklch(0.94 0.012 80);
  --white:    oklch(0.985 0.005 80);
  --ember:    oklch(0.75 0.14 55);
  --ember-2:  oklch(0.68 0.16 45);
  --ember-glow: oklch(0.75 0.14 55 / 0.35);

  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans:  'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --pad-x: clamp(20px, 4vw, 72px);
  --sec-y: clamp(80px, 10vw, 160px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html, body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* Grain overlay — subtle film texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Typographic primitives */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--ember);
}
.eyebrow.no-mark::before { display: none; }

.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;               /* was 0.98 — clipped descenders like 'gg' */
  letter-spacing: -0.02em;
  color: var(--ivory);
  padding-bottom: 0.22em;          /* generous safety for descender clipping */
}
/* Undo the mask/clip that hid descenders during split-letter reveal. */
.split-word,
.split-char {
  overflow: visible !important;
  line-height: inherit;
  vertical-align: baseline;
}
.split-line { overflow: visible; padding-bottom: 0.2em; }
/* Extra hero-H1 safety: the last line contains 'bigger stories' whose g/p descenders sit
   below the baseline and were being cropped by transforms + tight leading. */
h1.hero-title { line-height: 1.14; padding-bottom: 0.28em; }
.display .it { font-style: italic; color: var(--bone); }
.display .em { color: var(--ember); }

h1.display { font-size: clamp(56px, 9vw, 148px); }
h2.display { font-size: clamp(44px, 6.4vw, 96px); }
h3.display { font-size: clamp(28px, 3.4vw, 48px); }

.body-lg {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--bone);
  max-width: 62ch;
  text-wrap: pretty;
}
.body { color: var(--bone); text-wrap: pretty; }

.meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone);
}

/* Section chrome */
.section {
  padding: var(--sec-y) var(--pad-x);
  position: relative;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: clamp(48px, 6vw, 96px);
  max-width: 1600px;
}
/* Numbered section index removed \u2014 per direction */
.section-index { display: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s, color .35s, border-color .35s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ivory);
  color: var(--ink);
}
.btn-primary:hover { background: var(--ember); color: var(--ink); transform: translateY(-2px); }
.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ivory);
}
.btn-ghost:hover { border-color: var(--ivory); transform: translateY(-2px); }
.btn .arrow {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: currentColor;
  color: var(--ink);
  display: grid; place-items: center;
  transition: transform .35s;
}
.btn-primary .arrow { background: var(--ink); color: var(--ivory); }
.btn-ghost .arrow { background: var(--ember); color: var(--ink); }
.btn:hover .arrow { transform: translateX(4px); }
.btn .arrow svg { width: 10px; height: 10px; }

/* Cinematic frame placeholder — used everywhere in lieu of portfolio */
.frame {
  position: relative;
  aspect-ratio: 2.39 / 1;
  background: var(--char);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line-soft);
}
.frame.sq { aspect-ratio: 1 / 1; }
.frame.portrait { aspect-ratio: 3 / 4; }
.frame.wide { aspect-ratio: 16 / 9; }

.frame .grade {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 30% 30%, oklch(0.4 0.09 55 / 0.55), transparent 60%),
    radial-gradient(60% 80% at 80% 90%, oklch(0.3 0.06 260 / 0.6), transparent 60%),
    linear-gradient(180deg, oklch(0.22 0.02 55) 0%, oklch(0.15 0.01 260) 100%);
}
.frame .grade.b {
  background:
    radial-gradient(70% 60% at 70% 30%, oklch(0.55 0.12 55 / 0.5), transparent 60%),
    radial-gradient(90% 80% at 20% 90%, oklch(0.2 0.02 30 / 0.9), transparent 60%),
    linear-gradient(180deg, oklch(0.28 0.04 45) 0%, oklch(0.12 0.01 30) 100%);
}
.frame .grade.c {
  background:
    radial-gradient(60% 60% at 50% 40%, oklch(0.5 0.02 220 / 0.6), transparent 65%),
    linear-gradient(180deg, oklch(0.2 0.008 260) 0%, oklch(0.1 0.005 260) 100%);
}
.frame .grade.d {
  background:
    radial-gradient(70% 60% at 60% 40%, oklch(0.6 0.14 60 / 0.55), transparent 60%),
    linear-gradient(180deg, oklch(0.25 0.03 40) 0%, oklch(0.14 0.01 40) 100%);
}
.frame .grade.e {
  background:
    radial-gradient(60% 60% at 30% 70%, oklch(0.45 0.08 160 / 0.4), transparent 65%),
    linear-gradient(180deg, oklch(0.18 0.01 200) 0%, oklch(0.11 0.005 200) 100%);
}
.frame .grade.f {
  background:
    radial-gradient(80% 60% at 50% 50%, oklch(0.4 0.05 320 / 0.5), transparent 65%),
    linear-gradient(180deg, oklch(0.2 0.02 300) 0%, oklch(0.12 0.01 300) 100%);
}

.frame::after {
  /* film grain per-frame */
  content: '';
  position: absolute; inset: 0;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  z-index: 4;
}

/* Frame media (img / video) — real cinematic content */
.frame .frame-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter 1s;
  filter: saturate(0.95) contrast(1.02);
}
.create-card:hover .frame-media,
.ind-card:hover .frame-media { transform: scale(1.03); }

.frame .frame-vignette {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 40%, oklch(0.08 0.005 60 / 0.5) 100%),
    linear-gradient(180deg, transparent 40%, oklch(0.08 0.005 60 / 0.65) 100%);
}
.frame .frame-vignette.strong {
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 30%, oklch(0.08 0.005 60 / 0.65) 100%),
    linear-gradient(180deg, transparent 30%, oklch(0.08 0.005 60 / 0.8) 100%);
}

/* Frame HUD — label only (larger, cleaner) */
.frame .hud {
  position: absolute;
  inset: 0;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;         /* label sits at bottom-left */
  color: var(--ivory);
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
}
.frame .hud .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0.85;
}
/* Hide the second column (timecodes, aspect ratios, lens info, REC blob)
   AND the whole second row (technical camera info). Leaves only the label. */
.frame .hud .row > *:nth-child(n+2) { display: none; }
.frame .hud .row + .row              { display: none; }

/* Corner tick marks removed */
.frame .corners { display: none; }

.frame .center-title {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 2;
  padding: 24px;
  text-align: center;
  color: var(--ivory);
}
.frame .center-title .t {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 56px);
  letter-spacing: -0.01em;
  line-height: 1;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.frame .center-title .st {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.75;
}

/* Rule line */
.rule {
  height: 1px;
  background: var(--line-soft);
  width: 100%;
}

/* Utility */
.max { max-width: 1600px; margin: 0 auto; }
.center { text-align: center; }
.mono { font-family: var(--mono); }

/* Reveal animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0ms);
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}