/* Utterly Dark: a wall of ink plates, read by the lamp you carry. */

@font-face {
  font-family: 'Alike Angular';
  src: url('fonts/alike-angular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('fonts/spectral.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --oak: #0b0806;
  --blood: #4a1915;
  --bone: #e4dcc7;
  --bone-dim: #b9ae98;
  --bog: #142019;

  --display: 'Alike Angular', 'Times New Roman', serif;
  --text: 'Spectral', Georgia, serif;

  --gutter: clamp(20px, 5vw, 72px);

  /* Lamp state, driven by main.js. The defaults are a closed, dark wall. */
  --lx: 70vw;
  --ly: 40vh;
  --r: 0px;
  --veil: 1;

  /* Stronger than the built-in ease-out: starts fast, settles softly. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--oak);
  color: var(--bone);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: #3b2a22 var(--oak);
  caret-color: var(--bone);
}

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: clip;
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.55;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--blood); color: var(--bone); }

/* One language at a time. The head script sets <html lang> before first paint. */
html:not([lang="es"]) [data-lang="es"],
html[lang="es"] [data-lang="en"] { display: none; }

/* -------------------------------------------------------------------- name */

/* The name is the largest thing on the page: plain incised capitals at the top left, stacked in
   two lines. Not fixed; it leaves with the first screen. */
.mark {
  position: absolute;
  top: clamp(14px, 2.4vw, 32px);
  left: var(--gutter);
  z-index: 10;
  max-width: 6.4em;
  margin: 0;
  color: var(--bone);
  font-family: var(--display);
  font-size: clamp(2.5rem, 12.5vw, 6rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ language */

.lang {
  position: fixed;
  top: clamp(12px, 2.4vw, 28px);
  right: clamp(12px, 2.4vw, 28px);
  z-index: 20;
  display: none;
  background: var(--oak);
  border: 1px solid rgba(228, 220, 199, 0.3);
}
.js .lang { display: flex; }

.lang button {
  min-width: 46px;
  min-height: 44px;
  padding: 0 0.7rem;
  border: 0;
  background: none;
  color: var(--bone-dim);
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 150ms ease, box-shadow 150ms ease, transform 140ms var(--ease-out);
}
.lang button:active { transform: scale(0.97); }
.lang button[aria-pressed="true"] {
  color: var(--bone);
  box-shadow: inset 0 -2px 0 var(--bone);
}
.lang button:focus-visible { outline: 2px solid var(--bone); outline-offset: -5px; }
/* Hover only where there is a hover: touch taps would leave it stuck. */
@media (hover: hover) and (pointer: fine) {
  .lang button:hover { color: var(--bone); }
}

/* ----------------------------------------------------------------- the lamp */

/* A fixed veil with one soft hole. Plates sit under it; text and the form sit above it. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: none;
  pointer-events: none;
  background: radial-gradient(
    circle var(--r) at var(--lx) var(--ly),
    rgba(11, 8, 6, 0) 0,
    rgba(11, 8, 6, 0) 38%,
    rgba(11, 8, 6, calc(var(--veil) * 0.22)) 58%,
    rgba(11, 8, 6, calc(var(--veil) * 0.62)) 80%,
    rgba(11, 8, 6, var(--veil)) 100%
  );
}
.js .veil { display: block; }

/* ------------------------------------------------------------------- plates */

.wall { position: absolute; inset: 0; }
/* Plates fade in as they arrive instead of popping in. main.js adds .is-in on load;
   without JavaScript they are simply there. */
.js .plate,
.js .slot img { opacity: 0; transition: opacity 360ms var(--ease-out); }
.js .plate.is-in,
.js .slot img.is-in { opacity: 1; }

/* Screen blend lets each plate's black melt into the wall: only the bone line remains. */
.plate {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  mix-blend-mode: screen;
  user-select: none;
  -webkit-user-drag: none;
}

/* ------------------------------------------------------------------- display */

.hook,
.last {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  text-wrap: balance;
}

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--gutter) * 2) var(--gutter) clamp(36px, 8vh, 88px);
  overflow: hidden;
}
/* Keeps the hook readable over the dim plates behind it, and only there. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 52% 62% at 16% 86%, rgba(11, 8, 6, 0.92) 0, rgba(11, 8, 6, 0.7) 55%, rgba(11, 8, 6, 0) 100%);
}
.hero .p-crag    { right: -4%; top: 4%;  width: 50%; }
.hero .p-bell    { left: 5%;  top: 30%; width: 12.5%; }
.hero .p-village { left: 21%; top: 31%; width: 25%; }

.hero .copy {
  position: relative;
  z-index: 10;
  max-width: min(49vw, 46rem);
}
/* Smaller than before and well below the name's scale; face, case and leading as they were. */
.hook {
  font-size: clamp(1.5rem, 2.9vw, 3.25rem);
  line-height: 1.02;
}
.sub {
  margin: clamp(20px, 3.4vh, 32px) 0 0;
  max-width: 32rem;
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);
  line-height: 1.45;
  color: var(--bone-dim);
}

/* ------------------------------------------------------------------- stand */

.stand {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  column-gap: clamp(32px, 5vw, 80px);
  padding: clamp(72px, 12vh, 128px) var(--gutter) clamp(56px, 9vh, 112px);
}
/* The two long statements are ordinary body text, as they were. */
.value,
.close {
  position: relative;
  z-index: 10;
  margin: 0;
  font-size: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4rem);
  line-height: 1.55;
}
.value { max-width: 36rem; }
/* Only the opening phrase of each statement is capitals and larger; the rest stays plain text.
   Its own line-height keeps the larger type from stretching the first line. The size follows the
   width of the column so the phrase holds to two lines in both languages. */
.lead {
  font-size: clamp(1.2em, 2.9vw, 1.65em);
  line-height: 1.1;
  text-transform: uppercase;
}

/* Two plates, the poles of the spectrum, beside the statement so neither side is ever empty. */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.2vw, 32px);
  align-items: end;
  width: 100%;
  outline-offset: 12px;
}
.pair:focus-visible { outline: 2px solid var(--bone); }

.slot {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--blood);
  cursor: pointer;
}
.slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  user-select: none;
}
.slot.s1 { margin-bottom: clamp(28px, 5.4vw, 80px); }
.slot.s1 img { object-position: 14% 50%; }
.slot.s2 { margin-bottom: clamp(0px, 2.2vw, 32px); }

/* ------------------------------------------------------------------ forest */

.forest {
  position: relative;
  min-height: 118svh;
  display: flex;
  align-items: flex-start;
  padding: clamp(88px, 14vh, 160px) var(--gutter);
  overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 72% 42%, var(--bog), rgba(20, 32, 25, 0) 72%);
}
/* Wide enough for the opening phrase to take two lines, never reaching the church plate at 50%. */
.close { max-width: min(36rem, calc(50vw - var(--gutter) - 24px)); }
.forest .p-church   { left: 50%; top: 4%;  width: 28%; }
.forest .p-skeleton { left: 80%; top: 24%; width: 19%; }
.forest .p-tower    { left: 40%; top: 55%; width: 22%; }
.forest .p-beast    { left: 66%; top: 62%; width: 26%; }
.forest .p-coast    { left: 6%;  top: 42%; width: 20%; }

/* ------------------------------------------------------------------- final */

.final {
  position: relative;
  min-height: 46svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--gutter) var(--gutter) clamp(56px, 12vh, 120px);
}
.last {
  position: relative;
  z-index: 10;
  margin-bottom: clamp(28px, 6vh, 56px);
  font-size: clamp(2.3rem, 7vw, 6rem);
  line-height: 1;
}

/* Kit's HTML embed goes here. Hidden until it has content. */
.kit-slot {
  position: relative;
  z-index: 10;
  width: min(100%, 30rem);
  padding: clamp(18px, 2.4vw, 28px);
  background: var(--blood);
}
.kit-slot:empty { display: none; }

/* The author's note sits above the embed and stays quieter than it: small, Dim Bone, plain text. */
.kit-slot .note {
  margin: 0 0 18px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bone-dim);
}
.kit-slot .note:last-child { margin-bottom: 0; }

.kit-slot form { display: grid; gap: 14px; margin: 0; }
.kit-slot label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9375rem;
  color: var(--bone-dim);
}
.kit-slot input[type="email"],
.kit-slot input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(228, 220, 199, 0.4);
  border-radius: 0;
  background: var(--oak);
  color: var(--bone);
  font: inherit;
}
.kit-slot input::placeholder { color: #a79c86; opacity: 1; }
.kit-slot input:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.kit-slot button,
.kit-slot input[type="submit"] {
  min-height: 48px;
  padding: 0 1.6rem;
  border: 0;
  border-radius: 0;
  background: var(--bone);
  color: var(--oak);
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 150ms ease, transform 140ms var(--ease-out);
}
.kit-slot button:active,
.kit-slot input[type="submit"]:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .kit-slot button:hover,
  .kit-slot input[type="submit"]:hover { background: #f1ead8; }
}
.kit-slot button:focus-visible,
.kit-slot input[type="submit"]:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.kit-slot [role="alert"] { color: var(--bone); }

/* Reduced motion keeps the colour and opacity changes, which help comprehension,
   and drops the movement. */
@media (prefers-reduced-motion: reduce) {
  .lang button:active,
  .kit-slot button:active,
  .kit-slot input[type="submit"]:active { transform: none; }
}

/* ---------------------------------------------------------------- tablet */

/* Below 900px the half-width columns are too narrow for the opening phrases, so the stand and the
   forest stack their statement over their plates, as they do on a phone. The hero keeps its wide
   wall down to 760px. */
@media (max-width: 899px) {
  .lead { font-size: 1.65em; }

  .stand { display: block; padding-top: 72px; padding-bottom: 72px; }
  .value { max-width: 40rem; margin-bottom: 40px; }

  .forest { display: block; min-height: 0; padding-top: 72px; padding-bottom: 0; }
  .close { max-width: 36rem; }
  .forest .wall { position: relative; height: 138vw; margin: 40px calc(var(--gutter) * -1) 0; }
  .forest .p-church   { left: 6%;  top: 0;    width: 52%; }
  .forest .p-skeleton { left: 56%; top: 20%;  width: 42%; }
  .forest .p-tower    { left: 2%;  top: 50%;  width: 46%; }
  .forest .p-beast    { left: 44%; top: 66%;  width: 54%; }
  .forest .p-coast    { display: none; }
}

@media (min-width: 760px) and (max-width: 899px) {
  .hero .p-crag { top: 19%; width: 62%; }
}

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

@media (max-width: 759px) {
  .lead { font-size: clamp(1.2em, 5.9vw, 1.65em); }

  .hero {
    display: block;
    padding: 0 var(--gutter) 44px;
  }
  .hero .wall {
    position: relative;
    height: 70svh;
    margin: 0 calc(var(--gutter) * -1);
  }
  .hero::after {
    inset: auto 0 0 0;
    height: 62%;
    background: linear-gradient(0deg, rgba(11, 8, 6, 0.96) 0, rgba(11, 8, 6, 0.8) 55%, rgba(11, 8, 6, 0) 100%);
  }
  .hero .p-crag    { left: -8%; right: auto; top: 22%; width: 116%; }
  .hero .p-bell    { left: auto; right: -9%; top: 10%; width: 30%; }
  .hero .p-village { display: none; }
  .hero .copy { max-width: none; margin-top: -9svh; }

  .value { max-width: none; margin-bottom: 32px; }
  .pair {
    display: flex;
    gap: 12px;
    width: auto;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    outline-offset: -4px;
  }
  .pair::-webkit-scrollbar { display: none; }
  .slot { flex: 0 0 72vw; scroll-snap-align: center; margin: 0 !important; }

  .forest .wall { height: 168vw; }

  .final { min-height: 52svh; padding-top: 40px; }
  .kit-slot { width: 100%; }
}