/* ═══════════════════════════════════════════════════════════════
   THE CONCRETE WANDERERS · shared stylesheet
   A digital cavern. A tavern in the Himalayas with windows
   overlooking the cosmos.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* the tavern's palette */
  --void: #0a0a14;
  --void-warm: #14100c;
  --ember: #c97b4a;
  --ember-soft: #e89668;
  --candle: #f5e6c8;
  --candle-dim: #d9c8a3;
  --parchment: #e8d8b8;
  --rust: #8a4a32;
  --moss: #4a5240;
  --hearth: rgba(201, 123, 74, 0.12);
  --rule: rgba(245, 230, 200, 0.15);
  --rule-soft: rgba(245, 230, 200, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ─── ROOM ATMOSPHERES ─────────────────────────────────
   The Portal (default body) is OUTSIDE: cold, cosmic, the night.
   Once a visitor steps INSIDE a room, the mood shifts —
   each wall has its own colour, lit by a hanging tungsten
   lamp behind the visitor. Light falls on the wall from above.
   ───────────────────────────────────────────────────── */

/* DEFAULT — the Portal. Cold, dark, cosmic. The view from outside. */
body {
  background: var(--void);
  color: var(--candle);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 100%, rgba(201, 123, 74, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 0%, rgba(74, 82, 64, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(20, 16, 12, 0.4) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 2; }

/* ─── DIRECTIONAL TUNGSTEN — the standard interior light ──
   A hanging warm lamp behind the visitor, falling onto the
   wall from above. The wall is brightest at the top centre
   and darkens toward the bottom corners. The candle pulses
   slowly, breathing.
   ─────────────────────────────────────────────────────── */

/* shared "lit by tungsten" layer — applied via the body::before
   on each interior room. Each room only changes the underlying
   wall colour (the body background), not the light shape. */

/* STILLS — plastered ocean teal */
body[data-room="stills"] {
  background: #1d3a3e;  /* deep teal wall */
  color: #f5e6c8;
}
body[data-room="stills"]::before {
  background:
    /* tungsten lamp — hot warm pool spilling from above-centre,
       as if the light source hangs just behind the visitor's
       head, casting a circular halo onto the wall they face */
    radial-gradient(ellipse 70% 50% at 50% -5%, rgba(255, 180, 100, 0.55) 0%, rgba(255, 165, 80, 0.25) 25%, transparent 60%),
    /* secondary spill — softer, wider */
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(232, 165, 95, 0.20) 0%, transparent 70%),
    /* the floor in shadow */
    linear-gradient(180deg, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.35) 100%),
    /* corners receding */
    radial-gradient(ellipse at 0% 100%, rgba(0, 0, 0, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.4) 0%, transparent 50%);
}
body[data-room="stills"]::after {
  opacity: 0.5;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='plaster'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.75  0 0 0 0 0.78  0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23plaster)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ANECDOTES (master / landing wall) — elegant deep blue */
body[data-room="anecdotes"] {
  background: #1a2742;  /* deep midnight blue */
  color: #f5e6c8;
}
body[data-room="anecdotes"]::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% -5%, rgba(255, 175, 100, 0.50) 0%, rgba(255, 160, 75, 0.22) 25%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(232, 165, 95, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.40) 100%),
    radial-gradient(ellipse at 0% 100%, rgba(0, 0, 0, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.45) 0%, transparent 50%);
}
body[data-room="anecdotes"]::after {
  opacity: 0.5;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='blue'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.55  0 0 0 0 0.78  0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23blue)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='gn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gn)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ANECDOTE-SAMWISE — dusty terracotta, the colour of the piece's mood:
   Indian afternoon light, an old wedding photograph, slow warmth */
body[data-room="anecdote-samwise"] {
  background: #3a2418;  /* deep terracotta */
  color: #f5e6c8;
}
body[data-room="anecdote-samwise"]::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% -5%, rgba(255, 180, 100, 0.55) 0%, rgba(255, 165, 80, 0.28) 25%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(232, 165, 95, 0.22) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.40) 100%),
    radial-gradient(ellipse at 0% 100%, rgba(0, 0, 0, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.45) 0%, transparent 50%);
}
body[data-room="anecdote-samwise"]::after {
  opacity: 0.5;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='clay'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.50  0 0 0 0 0.32  0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23clay)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='gn2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gn2)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* CAVERN INTERIOR — for Alcove + Bio, the personal back rooms.
   Warm umber wall, same tungsten lighting from behind/above. */
body[data-room="cavern"] {
  background: #2a1f15;
  color: #f5e6c8;
}
body[data-room="cavern"]::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% -5%, rgba(255, 180, 100, 0.50) 0%, rgba(255, 165, 80, 0.25) 25%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(232, 165, 95, 0.20) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.35) 100%),
    radial-gradient(ellipse at 0% 100%, rgba(0, 0, 0, 0.40) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, 0.40) 0%, transparent 50%);
}
body[data-room="cavern"]::after {
  opacity: 0.55;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='wall'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.62  0 0 0 0 0.35  0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wall)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* candle pulse — applies to all rooms with directional tungsten */
@keyframes candle-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.94; }
}
body[data-room="cavern"]::before,
body[data-room="stills"]::before,
body[data-room="anecdotes"]::before,
body[data-room="anecdote-samwise"]::before {
  animation: candle-breathe 6s ease-in-out infinite;
}

/* nav adapts to the warmer palette in interior rooms */
body[data-room="cavern"] nav,
body[data-room="stills"] nav,
body[data-room="anecdotes"] nav,
body[data-room="anecdote-samwise"] nav {
  background: rgba(20, 14, 8, 0.75);
  border-bottom-color: rgba(232, 165, 95, 0.15);
}

/* ─── THE NIGHT — for the Colophon only ─────────────────
   Stepping out of the cavern's back door, looking up.
   ─────────────────────────────────────────────────────── */

body[data-room="night"] {
  background: linear-gradient(180deg, #1a1428 0%, #20182e 40%, #1a1220 100%);
}
body[data-room="night"]::before {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(120, 90, 160, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(60, 40, 80, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(15, 10, 25, 0.4) 0%, transparent 70%);
}
body[data-room="night"]::after {
  opacity: 0.4;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='nightgrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.5  0 0 0 0 0.7  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23nightgrain)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.mono {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
}

a { color: inherit; text-decoration: none; }

/* ─── NAVIGATION ────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 1.4rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  background: rgba(10, 10, 20, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-soft);
  transition: all 0.4s ease;
}

.logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--candle);
  letter-spacing: 0.02em;
}
.logo em {
  font-style: italic;
  color: var(--ember-soft);
}

.nav-links {
  display: flex;
  gap: 2.4rem;
  list-style: none;
}
.nav-links a {
  color: var(--candle-dim);
  transition: color 0.3s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--ember-soft); }

/* ─── SHARED PAGE ELEMENTS ──────────────────────────── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ember);
  margin-bottom: 1.2rem;
}
.section-label::before, .section-label::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--ember);
  opacity: 0.5;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.section-title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}
.section-title em {
  font-style: italic;
  color: var(--ember-soft);
}

.tagline {
  font-style: italic;
  color: var(--candle-dim);
  font-size: 1.15rem;
  max-width: 50ch;
  line-height: 1.7;
}

/* ─── BREADCRUMB (used on inner pages) ──────────────── */
.breadcrumb {
  padding: 7rem 2.5rem 0;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--candle-dim);
  opacity: 0.7;
}
.breadcrumb a:hover { color: var(--ember-soft); }
.breadcrumb .sep { color: var(--ember); }

/* ─── FOOTER (the hearth) ───────────────────────────── */
footer {
  margin-top: 6rem;
  padding: 4rem 2.5rem 2.5rem;
  border-top: 1px solid var(--rule-soft);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(201, 123, 74, 0.15) 0%, transparent 60%);
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.footer-brand h3 {
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
}
.footer-brand h3 em { font-style: italic; color: var(--ember-soft); }
.footer-brand p {
  color: var(--candle-dim);
  font-style: italic;
  max-width: 36ch;
  font-size: 1rem;
}
.footer-col h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 500;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a {
  color: var(--candle-dim);
  font-size: 1rem;
  transition: color 0.3s ease;
}
.footer-col a:hover { color: var(--ember-soft); }

.footer-bottom {
  max-width: 1400px;
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  justify-content: space-between;
  color: var(--candle-dim);
  opacity: 0.6;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ─── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 900px) {
  nav { padding: 1rem 1.3rem; }
  .nav-links { display: none; }
  .breadcrumb { padding: 6rem 1.3rem 0; flex-wrap: wrap; }
  footer { padding: 3rem 1.3rem 2rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}