/* Wakestone - shared styles. High/dark fantasy: basalt, bone, brass and ember. */
:root {
  --basalt: #16110f;
  --basalt-2: #1f1916;
  --slate: #2c2a2e;
  --bone: #e8ddc6;
  --bone-dim: #b9ac94;
  --brass: #c8934a;
  --brass-hi: #f0c27a;
  --ember: #e3602a;
  --meadow: #b7b46a;
  --display: "IM Fell English SC", Georgia, serif;
  --body: "Alegreya", Georgia, serif;
  --measure: 36rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--basalt); color: var(--bone);
  font-family: var(--body); font-size: 1.125rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brass-hi); text-underline-offset: .2em; }
a:hover { color: #fff1d6; }
:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0 0 .5em; letter-spacing: .01em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--bone); }
h3 { font-size: 1.45rem; color: var(--brass-hi); }
p { margin: 0 0 1em; max-width: var(--measure); }
.skip { position: absolute; left: -999px; top: 0; background: var(--bone); color: var(--basalt); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

/* ---- top bar ---- */
.bar { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem clamp(1rem, 4vw, 3rem); z-index: 5; }
.bar .mark { font-family: var(--display); font-size: 1.35rem; color: var(--bone); text-decoration: none; letter-spacing: .06em; }
.bar nav a { color: var(--bone); text-decoration: none; font-family: var(--display); font-size: 1.1rem; margin-left: 1.5rem; }
.bar nav a:hover { color: var(--brass-hi); }

/* ---- buttons: a brass plate riveted on, ember glow on hover ---- */
.btn {
  display: inline-block; font-family: var(--display); font-size: 1.3rem; letter-spacing: .03em;
  color: #2a1606; text-decoration: none; cursor: pointer; border: 0;
  padding: .7rem 1.6rem .75rem; position: relative;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 55%, #8d5f27);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  box-shadow: 0 0 0 rgba(227,96,42,0);
  transition: filter .2s ease;
}
.btn:hover { filter: brightness(1.12) drop-shadow(0 0 14px rgba(227,96,42,.55)); color: #2a1606; }
.btn.ghost { background: transparent; color: var(--bone); clip-path: none; padding-left: 0; padding-right: 0;
  text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--brass); }

/* ---- hero: meadow to volcano panorama ---- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: grid; align-items: end; }
.hero svg.scene, .hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .copy::before { content: ""; position: absolute; inset: -6rem -8rem -4rem -6rem; z-index: -1;
  background: radial-gradient(closest-side, rgba(12,9,8,.62), rgba(12,9,8,0)); }
.hero .copy { position: relative; z-index: 2; padding: 0 clamp(1rem, 6vw, 5rem) clamp(3rem, 10vh, 6rem); max-width: 46rem; }
.hero h1 { font-size: clamp(3.2rem, 11vw, 7.5rem); letter-spacing: .04em; margin: 0;
  background: linear-gradient(180deg, #ffe2a6 0%, var(--brass) 60%, #7a4f1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(0,0,0,.6)); }
.hero .inscription { width: min(14rem, 50vw); margin: .3rem 0 1.4rem; opacity: .95; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); }
.hero .lede { font-size: clamp(1.15rem, 2.2vw, 1.4rem); text-shadow: 0 1px 12px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9); max-width: 34rem; }
.hero .actions { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; margin-top: 1.4rem; }

/* ---- the descent: features ordered by depth, page darkens as you go down ---- */
.descent { position: relative; }
.stratum { position: relative; padding: clamp(4rem, 10vw, 7rem) clamp(1rem, 6vw, 5rem) clamp(4rem, 10vw, 7rem) clamp(5.5rem, 12vw, 9rem); }
.stratum .depth { position: absolute; left: clamp(1rem, 4vw, 3rem); top: clamp(4.2rem, 10vw, 7.2rem); font-family: var(--display);
  font-size: 1.05rem; color: var(--bone-dim); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .08em; }
.stratum .depth::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 60vh; max-height: 26rem;
  background: linear-gradient(var(--bone-dim), transparent); transform: translateX(-50%) rotate(180deg); transform-origin: top; opacity: .35; }
.stratum .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2.4rem 3rem; margin-top: 2.2rem; max-width: 70rem; }
.stratum .grid p { font-size: 1.05rem; color: var(--bone-dim); }
.stratum .intro { font-size: 1.25rem; }
.surface { background: linear-gradient(180deg, #24201a 0%, #1d1915 100%); }
.hold { background: linear-gradient(180deg, #1d1915 0%, #181412 100%); }
.deep { background: linear-gradient(180deg, #181412 0%, #120e0d 100%); }
.bottom { background: radial-gradient(ellipse at 70% 120%, rgba(227,96,42,.28), transparent 60%), linear-gradient(180deg, #120e0d 0%, #0d0908 100%); }
.bottom h2 { color: #f2b089; }
.rule { height: 4px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, rgba(200,147,74,.6), transparent); }
.inscribed { display: flex; justify-content: center; padding: 2.5rem 1rem 0; }
.inscribed img { width: min(30rem, 80vw); opacity: .9; }
.inscribed + p { text-align: center; margin: .6rem auto 0; color: var(--bone-dim); font-style: italic; }

/* ---- early build ---- */
.build { padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 6vw, 5rem); background: #0d0908; }
.build figure { margin: 1.5rem 0 0; max-width: 64rem; }
.build img { border: 1px solid #3a2c22; box-shadow: 0 30px 60px -30px #000; }
.build figcaption { color: var(--bone-dim); font-size: .98rem; margin-top: .7rem; }

/* ---- final call ---- */
.call { text-align: center; padding: clamp(4rem, 10vw, 7rem) 1rem; background: radial-gradient(ellipse at 50% 100%, rgba(227,96,42,.22), transparent 65%), #0d0908; }
.call p { margin-left: auto; margin-right: auto; }
footer { padding: 2rem clamp(1rem, 6vw, 5rem); color: var(--bone-dim); font-size: .92rem; background: #0a0706; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
footer a { color: var(--bone-dim); }

/* ---- forms (sign-up page) ---- */
.page { min-height: 100vh; display: grid; place-items: center; padding: 6rem 1rem 3rem;
  background: radial-gradient(ellipse at 50% 110%, rgba(227,96,42,.25), transparent 60%), linear-gradient(#1b1512, #0d0908); }
.panel { width: min(34rem, 100%); padding: 2.2rem clamp(1.2rem, 5vw, 2.6rem) 2rem; position: relative;
  background: linear-gradient(180deg, #2a2420, #1d1916); border: 1px solid #4a3a2a;
  box-shadow: inset 0 0 0 6px #17120f, inset 0 0 0 7px #5a4430, 0 40px 80px -40px #000; }
.panel h1 { font-size: clamp(2.2rem, 7vw, 3rem); color: var(--brass-hi); }
.panel .ember { width: 3rem; height: 3rem; margin: 0 0 1rem; }
form { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
label { font-family: var(--display); font-size: 1.15rem; display: block; margin-bottom: .3rem; }
.hint { font-size: .95rem; color: var(--bone-dim); margin: .2rem 0 0; }
input[type=email], input[type=text], select {
  width: 100%; font: inherit; color: var(--bone); background: #0f0c0b; border: 1px solid #4d3d2d;
  padding: .7rem .85rem; border-radius: 2px; box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
}
input:focus, select:focus { border-color: var(--brass-hi); outline: none; box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 2px rgba(240,194,122,.35); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-family: var(--display); font-size: 1.15rem; margin-bottom: .4rem; }
.choices { display: grid; gap: .45rem; }
.choices label, .check label { font-family: var(--body); font-size: 1.02rem; display: flex; gap: .6rem; align-items: flex-start; margin: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--brass); width: 1.1rem; height: 1.1rem; margin-top: .3rem; flex: none; }
.error { color: #ff9a76; font-size: .98rem; min-height: 1.2em; margin: 0; }
.hidden-field { position: absolute; left: -9999px; }
.fineprint { font-size: .9rem; color: var(--bone-dim); }

@media (max-width: 40rem) {
  .hero .inscription { width: 9rem; }
  .bar nav a:not(.cta) { display: none; }
  .stratum { padding-left: 3.4rem; }
  .stratum .depth { left: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim { animation: none !important; }
}
.descent > .rule, .descent > .inscribed, .descent > .inscribed + p { background: #0d0908; }
.descent > .inscribed + p { padding: .6rem 1rem 3rem; margin: 0; max-width: none; }