.howling-theme {
  --paper: #101713;
  --ink: #e9eadf;
  --muted: #a4afa4;
  --panel: #17261d;
  --accent: #d29a4c;
  background: #101713;
}

.howling-theme .project-nav {
  position: absolute;
  color: #f2eee2;
  border-color: rgba(255, 255, 255, .22);
}

.howling-threshold {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #f5f0e4;
  background: #09110f url("assets/howling/cave-traversal.png") center / cover no-repeat;
}

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

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

.howling-shade {
  background:
    linear-gradient(180deg, rgba(4, 9, 9, .12) 18%, rgba(5, 9, 8, .82) 100%),
    linear-gradient(90deg, rgba(4, 10, 9, .82), rgba(4, 10, 9, .12) 68%);
}

.howling-threshold::after {
  content: "";
  position: absolute;
  inset: 1.15rem;
  border: 1px solid rgba(225, 194, 132, .25);
  border-radius: 50% 50% 0 0 / 12% 12% 0 0;
  pointer-events: none;
}

.howling-branches {
  position: absolute;
  z-index: 2;
  top: 6.7rem;
  left: 50%;
  display: flex;
  align-items: center;
  gap: .85rem;
  color: rgba(237, 215, 171, .65);
  transform: translateX(-50%);
}

.howling-branches i { width: clamp(2rem, 5vw, 5rem); height: 1px; background: currentColor; }
.howling-branches span { font-size: .9rem; }

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

.howling-title .project-kicker { color: #e4bd79; }

.howling-title h1 {
  max-width: 1100px;
  margin: 1rem 0 2rem;
  color: #f0eadb;
  font: 400 clamp(5.5rem, 12.5vw, 13rem) / .67 "IM Fell English", Georgia, serif;
  letter-spacing: -.045em;
  text-shadow: 0 8px 45px rgba(0, 0, 0, .58);
}

.howling-title h1 span {
  display: block;
  margin: 0 0 .32em .12em;
  color: #dfbd7b;
  font: italic 400 .24em / 1 "IM Fell English", Georgia, serif;
  letter-spacing: .08em;
  text-transform: none;
}

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

.howling-intro > p {
  max-width: 800px;
  margin: 0;
  font: 300 clamp(1.35rem, 2.25vw, 2.4rem) / 1.22 var(--serif);
}

.howling-intro > div {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  color: rgba(255, 255, 255, .7);
  font: .61rem var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.howling-sound {
  position: absolute;
  z-index: 5;
  top: 6.55rem;
  right: 5vw;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem;
  color: #f3ecde;
  border: 1px solid rgba(220, 181, 112, .42);
  background: rgba(6, 13, 11, .74);
  box-shadow: 0 0 0 3px rgba(4, 9, 8, .25);
  backdrop-filter: blur(14px);
}

.howling-sound button {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .45rem .65rem .45rem .45rem;
  color: inherit;
  border: 1px solid #d7a85d;
  background: rgba(10, 20, 16, .85);
  cursor: pointer;
  font: .61rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: .2s ease;
}

.howling-sound button:hover,
.howling-sound button:focus-visible { color: #101712; background: #d7a85d; outline: none; }
.howling-sound > span { color: rgba(255, 255, 255, .5); font: .52rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.howling-play { width: 1.95rem; height: 1.95rem; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.howling-play i { width: 0; height: 0; margin-left: 2px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.howling-sound.playing .howling-play i { width: 8px; height: 10px; margin: 0; border: 0; border-inline: 3px solid currentColor; }
.howling-bars { height: 14px; display: flex; align-items: end; gap: 2px; }
.howling-bars i { display: block; width: 2px; height: 5px; background: currentColor; }
.howling-bars i:nth-child(2) { height: 12px; }
.howling-bars i:nth-child(3) { height: 8px; }
.howling-sound.playing .howling-bars i { animation: howling-levels .65s infinite alternate ease-in-out; }
.howling-sound.playing .howling-bars i:nth-child(2) { animation-delay: -.2s; }
.howling-sound.playing .howling-bars i:nth-child(3) { animation-delay: -.4s; }
@keyframes howling-levels { to { height: 14px; } }

.howling-theme .case-index {
  background: rgba(12, 24, 18, .91);
  border-color: rgba(210, 154, 76, .3);
}

.howling-theme .chapter,
.howling-theme .card-grid span,
.howling-theme .design-proof span,
.howling-theme .faction-list span { color: #d5a45e; }

.howling-theme main > .project-section {
  width: 100%;
  padding-inline: max(5vw, calc((100vw - 1380px) / 2));
  background:
    radial-gradient(circle at 88% 15%, rgba(77, 126, 88, .13), transparent 29rem),
    #122018;
}

.howling-theme main > .project-section:nth-of-type(even) {
  background:
    radial-gradient(circle at 12% 18%, rgba(185, 116, 47, .11), transparent 30rem),
    #171c1a;
}

.howling-theme .world-context,
.howling-theme .faction-roster {
  width: 100%;
  padding-inline: max(5vw, calc((100vw - 1380px) / 2));
}

.howling-theme .world-context { background: linear-gradient(120deg, #14251c, #111b18); }
.howling-theme .faction-roster { background: linear-gradient(120deg, #181b18, #102019); }

.howling-story-pair,
.howling-traversal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  padding: .7rem;
  background: #080d0b;
}

.howling-story-pair figure,
.howling-traversal figure,
.howling-world-gallery figure,
.howling-banner { position: relative; margin: 0; overflow: hidden; background: #09100d; }
.howling-story-pair figure,
.howling-traversal figure { height: auto; aspect-ratio: 16 / 9; }
.howling-story-pair img,
.howling-traversal img,
.howling-world-gallery img,
.howling-banner img { width: 100%; height: 100%; object-fit: cover; }

.howling-story-pair figcaption,
.howling-traversal figcaption,
.howling-world-gallery figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  width: fit-content;
  max-width: calc(100% - 2rem);
  padding: .6rem .75rem;
  color: #f0eadf;
  background: rgba(6, 12, 10, .78);
  font: .57rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.howling-world-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 46svh 46svh;
  gap: .7rem;
  padding: .7rem;
  background: #080d0b;
}

.howling-world-gallery .tall { grid-row: span 2; }

.howling-banner { height: 92svh; }
.howling-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 9, 7, .9), transparent 58%); }
.howling-banner figcaption { position: absolute; z-index: 2; left: 6vw; bottom: 7vh; max-width: 680px; }
.howling-banner figcaption span { color: #dda860; font: .63rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.howling-banner figcaption p { margin: .8rem 0 0; color: #f2eee4; font: 300 clamp(1.5rem, 2.5vw, 2.7rem) / 1.2 var(--serif); }

@media (max-width: 820px) {
  .howling-threshold { min-height: 92svh; }
  .howling-threshold::after { inset: .65rem; border-radius: 36% 36% 0 0 / 6% 6% 0 0; }
  .howling-branches { display: none; }
  .howling-title { margin-bottom: 5vh; }
  .howling-title h1 { font-size: 17vw; line-height: .72; }
  .howling-intro { grid-template-columns: 1fr; gap: 1.4rem; }
  .howling-intro > p { font-size: 1.2rem; }
  .howling-sound { top: 4.8rem; right: 5vw; }
  .howling-sound > span,
  .howling-bars { display: none; }
  .howling-story-pair,
  .howling-traversal,
  .howling-world-gallery { grid-template-columns: 1fr; grid-template-rows: auto; }
  .howling-story-pair figure,
  .howling-traversal figure,
  .howling-world-gallery figure,
  .howling-world-gallery .tall { grid-row: auto; height: 58svh; }
  .howling-story-pair figure,
  .howling-traversal figure { height: auto; }
  .howling-banner { height: 72svh; }
}

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