/* INFR LAB — Light Room final studio layer
   Visual-only override. No API, no deploy, no structure changes. */

:root {
  --black: #0b0b0a !important;
  --ink: #111111 !important;
  --bone: #f2f0eb !important;
  --paper: #ede7dc !important;
  --paper-soft: #f8f4ed !important;
  --dim: #514c45 !important;
  --muted: #746c62 !important;
  --line: rgba(17, 17, 17, .18) !important;
  --line-2: rgba(17, 17, 17, .10) !important;
  --cyan: #111111 !important;
  --copper: #6f675e !important;
}

html,
body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  overflow-x: hidden !important;
  text-rendering: optimizeLegibility;
}

/* Remove unresolved template/startup glow */
.glow,
body::before,
body::after {
  opacity: 0 !important;
}

.grid-guides {
  opacity: .14 !important;
  mix-blend-mode: multiply !important;
}

.grid-guides i {
  background: rgba(17, 17, 17, .08) !important;
}

/* Header: black studio bar */
.top {
  background: var(--black) !important;
  color: var(--bone) !important;
  border-bottom: 1px solid rgba(242, 240, 235, .16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.top a,
.top .osc,
.top .status,
.top .social,
.top .social svg {
  color: var(--bone) !important;
}

.top .social {
  background: transparent !important;
  border: 1px solid rgba(242, 240, 235, .18) !important;
}

.top .social:hover {
  background: var(--bone) !important;
  color: var(--black) !important;
}

/* Logo containers: keep SVG proportions, no stretching */
.brand {
  background: var(--black) !important;
  color: var(--bone) !important;
  border: 1px solid rgba(242, 240, 235, .18) !important;
}

.brand-logo {
  display: block !important;
  width: clamp(34px, 4vw, 44px) !important;
  height: auto !important;
  aspect-ratio: 160 / 210 !important;
  object-fit: contain !important;
}

.hero-logo {
  display: block !important;
  width: min(100%, clamp(136px, 18vw, 248px)) !important;
  height: auto !important;
  aspect-ratio: 160 / 210 !important;
  object-fit: contain !important;
}

/* Hero: black room */
.hero {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100svh - 76px - var(--transport, 60px)) !important;
  margin-inline: 0 !important;
  padding-left: max(var(--pad, 24px), env(safe-area-inset-left)) !important;
  padding-right: max(var(--pad, 24px), env(safe-area-inset-right)) !important;
  background: var(--black) !important;
  color: var(--bone) !important;
  border-bottom: 1px solid rgba(242, 240, 235, .16) !important;
}

.hero .lock,
.lock {
  background: var(--black) !important;
  color: var(--bone) !important;
  border: 1px solid rgba(242, 240, 235, .18) !important;
}

.hero .hero-line,
.hero .hero-line em,
.hero .hero-meta,
.hero-title,
.hero-title span,
.hero-title .reveal {
  color: var(--bone) !important;
}

.hero .hero-meta {
  opacity: .68 !important;
}

/* Body: light room */
.section,
main > section:not(.hero),
footer {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.title,
h1,
h2,
h3,
h4,
.cell-name,
.founder-text,
.about-text {
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

p,
.note,
.meta,
.tags,
.hero-meta,
.stream-tag,
.cell-desc,
.row p,
.footer-note,
.example-line,
.result-text,
.cc-intro {
  color: var(--dim) !important;
}

.addr,
.num,
.idx,
.state,
.cell-cta,
.tag,
.accent,
.reveal {
  color: var(--ink) !important;
}

/* Cards: editorial, not template */
.card,
.event,
.now,
.tile,
.row,
.cell,
.contact,
.drawer-panel,
.result,
.preview-card,
.select,
input,
textarea,
select {
  background: rgba(255, 252, 246, .56) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

input,
textarea,
select {
  background: rgba(255, 252, 246, .86) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(17, 17, 17, .48) !important;
}

button,
.btn,
.bio-btn,
.contact button {
  background: var(--ink) !important;
  color: var(--bone) !important;
  border-color: var(--ink) !important;
}

button:hover,
.btn:hover,
.bio-btn:hover,
.contact button:hover {
  background: #4e4942 !important;
  border-color: #4e4942 !important;
  color: #ffffff !important;
}

/* Bottom nav */
.bottom,
.transport {
  background: var(--black) !important;
  color: var(--bone) !important;
  border-color: rgba(242, 240, 235, .16) !important;
}

.bottom a,
.transport a {
  color: rgba(242, 240, 235, .72) !important;
}

.bottom a:hover,
.transport a:hover {
  background: var(--bone) !important;
  color: var(--black) !important;
}

/* Mobile hero correction */
@media (max-width: 920px) {
  .hero {
    min-height: calc(100svh - 68px - var(--transport, 64px)) !important;
  }

  .hero .hero-line {
    width: min(100%, 520px) !important;
    max-width: 100% !important;
    font-size: clamp(26px, 7.4vw, 35px) !important;
    line-height: 1.05 !important;
    text-wrap: balance !important;
  }

  .hero .hero-line br {
    display: none !important;
  }

  .hero .hero-meta {
    max-width: 100% !important;
    row-gap: 10px !important;
  }
}

@media (max-width: 520px) {
  .hero {
    padding-top: 44px !important;
    padding-bottom: 54px !important;
  }

  .hero .hero-line {
    width: min(100%, 340px) !important;
    font-size: clamp(23px, 6.6vw, 28px) !important;
    line-height: 1.08 !important;
  }

  .hero .hero-meta {
    font-size: 9px !important;
    letter-spacing: .05em !important;
    gap: 10px 18px !important;
  }

  .transport a,
  .bottom a {
    font-size: 8.5px !important;
    letter-spacing: 0 !important;
  }
}