.babel-theme {
  --paper: #100f0d;
  --ink: #eee2ca;
  --muted: #a99c87;
  --panel: #1b1915;
  --accent: #c5923e;
  background:
    radial-gradient(circle at 80% 8%, rgba(40, 72, 104, .18), transparent 28rem),
    #100f0d;
}

.babel-theme .project-nav {
  position: absolute;
  color: #f6ead3;
  border-color: rgba(255,255,255,.24);
}

.babel-threshold {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #090908;
}

.babel-film,
.babel-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.babel-film { object-fit: cover; }

.babel-shade {
  background:
    linear-gradient(180deg, rgba(5,5,4,.08) 20%, rgba(6,6,5,.88) 100%),
    linear-gradient(90deg, rgba(5,5,4,.74), transparent 70%);
}

.babel-title {
  position: relative;
  z-index: 2;
  width: var(--wrap);
  margin: 0 auto 7vh;
}

.babel-title .project-kicker { color: #dfc38e; }

.babel-title h1 {
  max-width: 1100px;
  margin: 1.2rem 0 2.5rem;
  font: 300 clamp(6rem, 15vw, 15rem)/.67 var(--serif);
  letter-spacing: -.075em;
  text-transform: uppercase;
  text-shadow: 0 5px 50px rgba(0,0,0,.45);
}

.babel-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .65fr);
  gap: 8vw;
  align-items: end;
}

.babel-intro > p {
  max-width: 760px;
  margin: 0;
  font: 300 clamp(1.45rem, 2.5vw, 2.7rem)/1.15 var(--serif);
}

.babel-intro > div {
  display: flex;
  gap: .65rem 1.2rem;
  flex-wrap: wrap;
  color: rgba(255,255,255,.65);
  font: .62rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .09em;
}

.babel-sound {
  position: absolute;
  z-index: 4;
  top: 7rem;
  right: 5vw;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(8,8,7,.68);
  color: #f4ead7;
  backdrop-filter: blur(14px);
}

.babel-sound button {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: .62rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}

.babel-sound > span {
  padding-left: 1rem;
  border-left: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.5);
  font: .53rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.babel-bars { height: 14px; display: flex; align-items: end; gap: 2px; }
.babel-bars i { display: block; width: 2px; height: 5px; background: currentColor; }
.babel-bars i:nth-child(2) { height: 11px; }
.babel-bars i:nth-child(3) { height: 8px; }
.babel-sound.playing .babel-bars i { animation: babel-levels .7s infinite alternate ease-in-out; }
.babel-sound.playing .babel-bars i:nth-child(2) { animation-delay: -.3s; }
.babel-sound.playing .babel-bars i:nth-child(3) { animation-delay: -.5s; }
@keyframes babel-levels { to { height: 14px; } }

.babel-theme .case-index {
  background: rgba(13,13,11,.9);
  border-color: rgba(197,146,62,.35);
  backdrop-filter: blur(16px);
}

.babel-theme .project-section:nth-of-type(even),
.babel-theme .world-context,
.babel-theme .faction-roster {
  position: relative;
}

.babel-theme .chapter,
.babel-theme .card-grid span,
.babel-theme .design-proof span { color: #d3a95d; }

.babel-story-pair,
.babel-life-gallery,
.babel-region-gallery {
  display: grid;
  gap: .7rem;
  padding: .7rem;
  background: #080807;
}

.babel-story-pair { grid-template-columns: 1fr 1fr; }
.babel-life-gallery { grid-template-columns: .8fr .8fr 1.4fr; }
.babel-region-gallery { grid-template-columns: repeat(2, 1fr); }

.babel-story-pair figure,
.babel-life-gallery figure,
.babel-region-gallery figure,
.babel-banner,
.babel-finale {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.babel-story-pair figure { height: 74svh; }
.babel-life-gallery figure { height: 68svh; }
.babel-region-gallery figure { height: 72svh; }
.babel-banner { height: 88svh; }
.babel-finale { height: 100svh; }

.babel-story-pair img,
.babel-life-gallery img,
.babel-region-gallery img,
.babel-banner img,
.babel-finale img { width: 100%; height: 100%; object-fit: cover; }

.babel-story-pair figcaption,
.babel-life-gallery figcaption,
.babel-region-gallery figcaption,
.babel-banner figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: .48rem .65rem;
  background: rgba(8,8,7,.72);
  color: #eee2ca;
  font: .58rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.babel-cosmology {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 9vw;
  padding: clamp(7rem, 12vw, 13rem) max(6vw, calc((100vw - 1380px)/2));
  color: #e7eff2;
  background:
    linear-gradient(90deg, rgba(6,15,20,.95), rgba(11,23,30,.78)),
    url("assets/blood-of-babel/under-babel.png") center/cover;
}

.babel-cosmology h2 {
  margin: 0 0 2rem;
  font: 300 clamp(4rem, 8vw, 9rem)/.82 var(--serif);
  letter-spacing: -.055em;
}

.babel-cosmology .large {
  color: #c9d7db;
  font: 300 clamp(1.5rem, 2.3vw, 2.5rem)/1.25 var(--serif);
}

.babel-cosmology-copy { max-width: 760px; align-self: end; }
.babel-cosmology-copy p { color: #abbabe; font-size: 1.05rem; line-height: 1.9; }

.babel-finale:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,5,4,.82), transparent 70%), linear-gradient(0deg, rgba(5,5,4,.75), transparent 55%);
}

.babel-finale > div {
  position: absolute;
  z-index: 2;
  left: 6vw;
  bottom: 8vh;
  max-width: 800px;
}

.babel-finale span {
  display: block;
  margin-bottom: 1rem;
  color: #ddb56d;
  font: .65rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.babel-finale strong {
  font: 300 clamp(3.5rem, 7vw, 8rem)/.88 var(--serif);
  letter-spacing: -.05em;
}

@media(max-width: 820px) {
  .babel-title { width: 90vw; margin-bottom: 7rem; }
  .babel-title h1 { font-size: 20.5vw; line-height: .76; }
  .babel-intro { grid-template-columns: 1fr; gap: 1.5rem; }
  .babel-sound { top: auto; right: auto; left: 5vw; bottom: 1rem; }
  .babel-story-pair,
  .babel-life-gallery,
  .babel-region-gallery { grid-template-columns: 1fr; }
  .babel-story-pair figure,
  .babel-life-gallery figure,
  .babel-region-gallery figure { height: 56svh; }
  .babel-banner { height: 65svh; }
  .babel-cosmology { grid-template-columns: 1fr; }
  .babel-cosmology-copy { margin-top: 2rem; }
}

@media(max-width: 560px) {
  .babel-sound > span { display: none; }
  .babel-finale { height: 78svh; }
  .babel-finale strong { font-size: 14vw; }
}

@media(prefers-reduced-motion: reduce) {
  .babel-film { display: none; }
  .babel-bars i { animation: none !important; }
}

/* Blood of Babel: carved monument and lapis-clay atmosphere */
.babel-theme {
  --paper:#101820;
  --panel:#18232d;
  background:
    radial-gradient(circle at 72% 7%, rgba(45, 101, 148, .38), transparent 32rem),
    radial-gradient(circle at 12% 44%, rgba(146, 84, 30, .22), transparent 38rem),
    #101820;
}
.babel-theme main { background: linear-gradient(120deg, rgba(43,91,130,.09), transparent 34%), linear-gradient(25deg, transparent 68%, rgba(145,85,33,.08)); }
.babel-title { text-align: center; }
.babel-title h1 { max-width: none; color:#ead6a5; font-family:"Cinzel",serif; font-weight:500; font-size:clamp(5rem,12.5vw,12.5rem); line-height:.78; letter-spacing:-.045em; text-shadow:0 5px 0 rgba(48,25,12,.42),0 0 5rem rgba(38,79,118,.5); }
.babel-title h1:after { content:"◆"; display:block; margin:1.3rem auto 0; color:#c7923e; font:400 .75rem serif; }
.babel-intro { text-align:left; }
.babel-theme main>.project-section{width:100%;padding-inline:max(5vw,calc((100vw - 1380px)/2));border-top:1px solid rgba(197,146,62,.16);background-color:#101922;background-image:radial-gradient(circle at 90% 16%,rgba(46,94,132,.2),transparent 28rem)}
.babel-theme main>.project-section:nth-of-type(even){background-color:#19150f;background-image:radial-gradient(circle at 8% 20%,rgba(145,85,32,.2),transparent 28rem)}
.babel-theme .world-context{width:100%;padding-inline:max(5vw,calc((100vw - 1380px)/2));border-top:1px solid rgba(82,139,180,.22);background:linear-gradient(115deg,rgba(19,43,61,.95),rgba(13,25,34,.98))}
.babel-theme .faction-roster{width:100%;padding-inline:max(5vw,calc((100vw - 1380px)/2));border-top:1px solid rgba(197,146,62,.2);background:linear-gradient(115deg,#1c160f,#12171a)}
.babel-sound button{padding:.55rem .85rem .55rem .55rem;border:1px solid #d2ab60;background:rgba(8,8,7,.82);box-shadow:0 0 0 3px rgba(8,8,7,.34);transition:.2s ease}.babel-sound button:hover,.babel-sound button:focus-visible{background:#c99543;color:#100f0d;outline:none;box-shadow:0 0 0 3px rgba(201,149,67,.25)}
.babel-play{width:1.9rem;height:1.9rem;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%}.babel-play i{width:0;height:0;margin-left:2px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}.babel-sound.playing .babel-play i{width:8px;height:10px;margin:0;border:0;border-inline:3px solid currentColor}
@media(max-width:820px){.babel-title{text-align:left}.babel-title h1{font-size:17vw}.babel-title h1:after{margin-left:.2rem}.babel-intro{text-align:left}}