:root {
  --ink: #0c0a08;
  --bone: #e8e2d6;
  --ash: #8b8378;
  --ash-dim: #5a544c;
  --copper: #c9752e;
  --brass: #e0a552;
  --rule: rgba(232, 226, 214, 0.1);
  --empire: "SangBleu Empire", ui-serif, Georgia, serif;
  --kingdom: "SangBleu Kingdom", ui-serif, Georgia, serif;
  --republic: "SangBleu Republic", ui-serif, Georgia, serif;
  --versailles: "SangBleu Versailles", ui-serif, Georgia, serif;
  --sunrise: "SangBleu Sunrise", ui-sans-serif, system-ui, sans-serif;
  --caveman: "Modern Caveman", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
html { background: var(--ink) }

body {
  min-height: 100dvh;
  background:
    radial-gradient(1200px 700px at 18% -10%, rgba(201, 117, 46, 0.09), transparent 55%),
    radial-gradient(900px 600px at 92% 110%, rgba(224, 165, 82, 0.06), transparent 50%),
    var(--ink);
  color: var(--bone);
  font-family: var(--republic);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

body.has-field {
  background: var(--ink);
}
body.has-field::before { opacity: 0.07 }

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

a { color: inherit; text-decoration: none }
:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px }

.page {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 5vh, 56px) clamp(20px, 5vw, 64px) 28px;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

.mast {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(8px, 1.6vh, 16px);
}

h1 {
  font-family: var(--empire);
  font-weight: 900;
  font-size: clamp(64px, 13vw, 128px);
  line-height: 0.8;
  letter-spacing: -0.042em;
  margin: 0 0 clamp(10px, 1.8vh, 18px);
}

.stage {
  position: relative;
  flex: 1;
  min-height: 420px;
  height: min(68vh, 680px);
}

.nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.stage svg#canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.rib {
  fill: none;
  stroke: var(--copper);
  stroke-width: 1.15;
  stroke-linecap: round;
  opacity: 0.38;
  vector-effect: non-scaling-stroke;
}
.rib.quiet { opacity: 0.16 }
.wave {
  fill: none;
  stroke: var(--copper);
  stroke-width: 1.35;
  stroke-linecap: round;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}
.wave.river {
  stroke-width: 1.7;
}
.tenure {
  fill: none;
  stroke: var(--ash);
  stroke-width: 1.15;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.tenure.live {
  stroke: var(--copper);
  stroke-width: 1.45;
}
.era-tick {
  stroke: var(--ash-dim);
  stroke-width: 0.55;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.eras {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.eras[hidden] { display: none }
.era {
  position: absolute;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.82;
  color: var(--ash);
}
.era-c {
  font-family: var(--kingdom);
  font-weight: 300;
  font-size: clamp(10px, 1.15vw, 13px);
  letter-spacing: 0.08em;
  color: var(--ash);
}
.era-d {
  font-family: var(--empire);
  font-weight: 400;
  font-size: clamp(20px, 2.45vw, 28px);
  letter-spacing: -0.04em;
  color: var(--bone);
}

.node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  z-index: 1;
  pointer-events: auto;
  will-change: left, top, transform, opacity;
}

.node.work { z-index: 3 }
.node.parent { z-index: 2; pointer-events: none; color: var(--ash-dim) }
.node.post { z-index: 2 }

.node.work .wordmark,
.node.post .wordmark {
  display: block;
  color: var(--bone);
  line-height: 1;
}
.node.work .wordmark { white-space: nowrap }
.node.work .brand {
  display: block;
  height: clamp(68px, 10.8vw, 116px);
  width: auto;
  max-width: min(300px, 46vw);
  object-fit: contain;
}
.node.work[data-id="adl"] .brand,
.node.work[data-id="thh"] .brand {
  height: clamp(91px, 14.5vw, 156px);
  max-width: min(400px, 58vw);
}
.node.work.quiet .brand { opacity: 0.88 }
.node.work.quiet .wordmark { color: var(--ash) }
.node.work[data-id="woa"] .brand {
  height: clamp(28px, 4.2vw, 46px);
  max-width: none;
  overflow: visible;
  filter:
    drop-shadow(0 0 5px rgba(107, 18, 32, 0.92))
    drop-shadow(0 0 12px rgba(72, 8, 18, 0.55));
}

.stage[data-mode="works"] .node.work .brand {
  filter:
    drop-shadow(0 0 10px rgba(201, 117, 46, 0.22))
    drop-shadow(0 0 22px rgba(232, 226, 214, 0.1));
  animation: work-alive 7.2s ease-in-out infinite;
}
.stage[data-mode="works"] .node.work[data-id="woa"] .brand {
  filter:
    drop-shadow(0 0 7px rgba(107, 18, 32, 0.95))
    drop-shadow(0 0 16px rgba(72, 8, 18, 0.58));
  animation: work-woa-alive 7.2s ease-in-out infinite;
}

@keyframes work-alive {
  0%, 100% {
    filter:
      drop-shadow(0 0 8px rgba(201, 117, 46, 0.16))
      drop-shadow(0 0 18px rgba(232, 226, 214, 0.08));
  }
  50% {
    filter:
      drop-shadow(0 0 16px rgba(201, 117, 46, 0.36))
      drop-shadow(0 0 30px rgba(232, 226, 214, 0.16));
  }
}
@keyframes work-woa-alive {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px rgba(107, 18, 32, 0.88))
      drop-shadow(0 0 14px rgba(72, 8, 18, 0.5));
  }
  50% {
    filter:
      drop-shadow(0 0 11px rgba(140, 24, 42, 1))
      drop-shadow(0 0 22px rgba(107, 18, 32, 0.7));
  }
}

.node.parent .brand {
  display: block;
  height: 22px;
  width: auto;
  max-width: 88px;
  object-fit: contain;
  opacity: 0.78;
  filter: drop-shadow(0 0 8px rgba(245, 227, 199, 0.45));
}
.node.parent .wordmark {
  color: #f4efe4;
  text-shadow:
    0 0 8px rgba(245, 227, 199, 0.55),
    0 0 18px rgba(245, 227, 199, 0.28);
}

.face-empire { font-family: var(--empire); font-weight: 700; font-size: clamp(22px, 3.1vw, 38px); letter-spacing: -0.02em; }
.face-kingdom { font-family: var(--kingdom); font-weight: 100; font-size: clamp(20px, 2.7vw, 32px); letter-spacing: -0.01em; }
.face-sunrise { font-family: var(--sunrise); font-weight: 300; font-size: clamp(16px, 2.1vw, 24px); letter-spacing: 0.06em; text-transform: lowercase; }
.face-aswritten { font-family: var(--sunrise); font-weight: 300; font-size: clamp(16px, 2.1vw, 24px); letter-spacing: 0.04em; text-transform: none; }
.face-versailles { font-family: var(--versailles); font-weight: 400; font-size: clamp(18px, 2.3vw, 28px); letter-spacing: 0.01em; }
.node.post .face-kingdom,
.node.post .face-empire {
  font-size: clamp(15px, 1.85vw, 22px);
}
.face-republic { font-family: var(--republic); font-weight: 450; }
.face-caveman {
  font-family: var(--caveman);
  font-weight: 400;
  font-size: clamp(13px, 1.6vw, 18px);
  letter-spacing: 0.18em;
}

.node.post {
  font-family: var(--kingdom);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ash);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.node.post .brand {
  height: 22px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
  opacity: 0.88;
}
.node.post .wordmark {
  font-size: 13px;
  color: var(--ash);
  white-space: normal;
  max-width: 14ch;
  text-align: center;
  line-height: 1.15;
}
.node.post.quiet { opacity: 0.55 }
.node.post:hover { color: var(--bone) }
.node.post:hover .wordmark,
.node.post:hover .name { color: var(--bone) }

.node.craft {
  font-family: var(--sunrise);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash);
  pointer-events: none;
  opacity: 0;
}

.stage[data-mode="time"] .node.post {
  opacity: 0.72;
}
.node.is-off { opacity: 0; pointer-events: none }
.stage.is-dim .node { opacity: 0.2 }
.stage.is-dim .node.is-on { opacity: 1 }
.stage.is-dim .rib { opacity: 0.05 }
.stage.is-dim .rib.is-on { opacity: 0.82 }

.dial {
  margin: 0 auto;
  width: min(420px, 86vw);
}
.dial-stops {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dial-stops button {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sunrise);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash-dim);
  cursor: pointer;
}
.dial-stops button:hover { color: var(--ash) }
.dial-stops button[aria-pressed="true"] { color: var(--copper); font-weight: 400 }

#blend {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--copper), rgba(201, 117, 46, 0.25));
  border-radius: 2px;
  outline: none;
}
#blend::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--copper);
  box-shadow: 0 0 12px rgba(201, 117, 46, 0.35);
  cursor: pointer;
}
#blend::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--copper);
  cursor: pointer;
}

.marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: auto;
  padding: 28px 0 0;
}
.mark {
  position: relative;
  color: var(--ash-dim);
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.mark svg { width: 18px; height: 18px; fill: currentColor; display: block }
.mark:hover, .mark:focus-visible { color: var(--copper) }
.mark .label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  font-family: var(--sunrise);
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.mark:hover .label, .mark:focus-visible .label { opacity: 1 }

dialog.card {
  position: relative;
  width: min(520px, calc(100vw - 40px));
  border: 1px solid var(--rule);
  background: #120f0c;
  color: var(--bone);
  padding: 40px 36px 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
dialog.card::backdrop { background: rgba(8, 6, 5, 0.72) }
.card-mark {
  margin: 0 0 20px;
  line-height: 1;
  color: var(--bone);
}
.card-mark .brand {
  display: block;
  height: clamp(48px, 8vw, 72px);
  width: auto;
  max-width: 280px;
  object-fit: contain;
}
.card-mark .brand[src*="woaaow"] {
  height: clamp(22px, 3.5vw, 34px);
  filter:
    drop-shadow(0 0 6px rgba(107, 18, 32, 0.9))
    drop-shadow(0 0 14px rgba(72, 8, 18, 0.5));
}
.card-line {
  font-family: var(--versailles);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.4;
  color: var(--ash);
  margin: 0 0 22px;
  max-width: 42ch;
}
.card-href {
  font-family: var(--kingdom);
  font-weight: 100;
  font-size: 17px;
  color: var(--brass);
  letter-spacing: 0.01em;
}
.card-href:hover { color: var(--copper) }
.card-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: 0;
  color: var(--ash-dim);
  font-family: var(--sunrise);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.card-close:hover { color: var(--bone) }

.noscript { font-family: var(--republic); font-weight: 450; line-height: 1.7; color: var(--ash); list-style: none; padding: 0 }

@media (max-width: 640px) {
  .stage { min-height: 520px; height: min(72vh, 720px); }
  .face-empire { font-size: 26px }
  .face-kingdom { font-size: 22px }
  .face-sunrise { font-size: 18px }
  .face-versailles { font-size: 20px }
  .node.post { font-size: 9px }
  .node.post .wordmark { font-size: 11px; max-width: 12ch; }
  .node.work .brand { height: clamp(54px, 16vw, 86px) }
  .node.work[data-id="adl"] .brand,
  .node.work[data-id="thh"] .brand { height: clamp(72px, 21.4vw, 115px) }
  .node.work[data-id="woa"] .brand { height: clamp(24px, 7.4vw, 36px); }
}

@media (prefers-reduced-motion: reduce) {
  .node { transition: none }
  .stage[data-mode="works"] .node.work .brand,
  .stage[data-mode="works"] .node.work[data-id="woa"] .brand { animation: none }
}