/* Latent Dreams — latentdreams.studio
   Built 2026-09-02. Visual language taken from the deck: near-black ground,
   impasto hero art, warm bronze accent, small-caps serif display. */

:root {
  --ink:        #0a0a0a;
  --ink-2:      #121110;
  --bronze:     #c2a05a;
  --bronze-dim: #8f7640;
  --bronze-lit: #dcc186;
  --paper:      #e8e4dc;
  --paper-dim:  #9d968a;
  --rule:       #2a2622;
  --measure:    38rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin: 0 0 0.6em;
}

a { color: var(--bronze); text-decoration: none; }
a:hover { color: var(--paper); }

/* ---------- top bar ---------- */

.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 2rem;
  padding: 1rem clamp(1.2rem, 5vw, 4rem);
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.bar img { height: 26px; width: auto; display: block; }
.bar nav { margin-left: auto; display: flex; gap: 1.6rem; align-items: center; }
.bar nav a {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-dim);
}
.bar nav a:hover, .bar nav a.on { color: var(--bronze); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: calc(100vh - 59px);
  display: flex; align-items: center;
  padding: clamp(3rem, 10vh, 8rem) clamp(1.2rem, 5vw, 4rem);
  background: var(--ink) url("hero.jpg") center / cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.78) 42%, rgba(10,10,10,.10) 100%);
}
.hero > * { position: relative; z-index: 1; max-width: var(--measure); }
.hero h1 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); }
.hero .lede { color: var(--paper-dim); font-size: 1.08rem; }

.kicker {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bronze-dim); margin-bottom: 1.4rem;
}

/* ---------- sections ---------- */

section { padding: clamp(3.5rem, 9vh, 7rem) clamp(1.2rem, 5vw, 4rem); }
section + section { border-top: 1px solid var(--rule); }
.wrap { max-width: 62rem; margin: 0 auto; }
.narrow { max-width: var(--measure); }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
p { margin: 0 0 1.15rem; }
.dim { color: var(--paper-dim); }

.cols { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .cols.two { grid-template-columns: 1fr 1fr; } }

.pillar h3 { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze); }
.pillar p { font-size: 0.97rem; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.85em 1.7em;
  border: 1px solid var(--bronze-dim);
  background: transparent;
  color: var(--bronze);
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

/* EMPHASIS is fill vs outline, and it never changes.
   INTERACTION is brightness, and it moves the same direction for both.
   Keeping these on separate axes stops the two buttons swapping identities on hover. */

.btn:hover {
  border-color: var(--bronze);
  color: var(--bronze-lit);
  background: rgba(194,160,90,0.10);
}

.btn.solid {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--ink);
}
.btn.solid:hover {
  background: var(--bronze-lit);
  border-color: var(--bronze-lit);
  color: var(--ink);
}

.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--bronze-lit); outline-offset: 3px; }

/* ---------- forms ---------- */

.field { margin-bottom: 1.4rem; }
.field label {
  display: block;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-dim); margin-bottom: 0.5rem;
}
.field input, .field textarea {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  color: var(--paper);
  font-family: inherit; font-size: 1rem;
  padding: 0.8rem 0.9rem;
  border-radius: 2px;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--bronze-dim); }
.field textarea { min-height: 8.5rem; resize: vertical; }
.hint { font-size: 0.87rem; color: var(--paper-dim); margin-top: 0.45rem; }

/* ---------- notice panel ---------- */

.panel {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--bronze-dim);
  background: var(--ink-2);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  margin: 2rem 0;
}
.panel h3 {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 0.9rem;
}
.panel ul { margin: 0; padding-left: 1.1rem; }
.panel li { margin-bottom: 0.6rem; font-size: 0.95rem; color: var(--paper-dim); }
.panel li:last-child { margin-bottom: 0; }
.panel strong { color: var(--paper); font-weight: 600; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--rule);
  padding: 2.5rem clamp(1.2rem, 5vw, 4rem);
  font-size: 0.85rem; color: var(--paper-dim);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center;
}
footer .spacer { margin-left: auto; }

/* ---------- narrow screens ---------- */

@media (max-width: 44rem) {
  /* the bar must wrap, or the nav forces the whole page wider than the viewport */
  .bar { flex-wrap: wrap; gap: .75rem 1rem; padding: .85rem 1.1rem; }
  .bar img { height: 22px; }
  .bar nav { margin-left: auto; gap: 1rem; flex-wrap: wrap; }
  .bar nav a { font-size: .7rem; letter-spacing: .1em; }

  /* horizontal gradient leaves text over bright paint on a narrow screen */
  .hero { min-height: calc(100vh - 96px); padding: 3.2rem 1.1rem 3.6rem; background-position: 62% center; }
  .hero::after {
    background: linear-gradient(180deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.80) 55%, rgba(10,10,10,.92) 100%);
  }
  .hero h1 { font-size: 1.65rem; }
  .hero .lede { font-size: 1rem; }

  section { padding: 2.8rem 1.1rem; }
  .btn { padding: .8em 1.2em; font-size: .74rem; letter-spacing: .12em; }
  .btn + .btn { margin-left: 0 !important; margin-top: .7rem; }
  footer { padding: 2rem 1.1rem; gap: .6rem; }
  footer .spacer { margin-left: 0; }
}

@media (max-width: 26rem) {
  .bar nav { gap: .7rem; }
  .bar nav a { font-size: .64rem; }
  .hero h1 { font-size: 1.45rem; }
}

/* nothing may exceed the viewport */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* ---------- copyright: sits at the foot of the hero, no footer band ---------- */

.legal {
  position: absolute;
  left: clamp(1.2rem, 5vw, 4rem);
  bottom: clamp(1.2rem, 4vh, 2.2rem);
  z-index: 1;
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--paper-dim);
  opacity: 0.7;
}
@media (max-width: 44rem) {
  .legal { position: static; margin-top: 3rem; font-size: 0.72rem; }
}
.legal.inline { position: static; margin-top: 2rem; opacity: 0.7; }

/* divider between nav items, drawn in the gap so it is not part of the link */
.bar nav { position: relative; }
.bar nav a + a { position: relative; }
.bar nav a + a::before {
  content: "|";
  position: absolute;
  left: -0.85rem;
  color: var(--rule);
  pointer-events: none;
}
@media (max-width: 44rem) { .bar nav a + a::before { left: -0.55rem; } }