/* ==========================================================================
   Unbound Loreseekers · SeekUnbound.com
   Plain CSS, no framework. Sections: tokens, base, entrance, transition,
   welcome, notice board, charter, join, footer, motion, reduced motion.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/alegreya-latin-var-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --night: #070b16;
  --navy: #0e1a33;
  --royal: #1f3f80;
  --gem: #3a7bd5;
  --gem-light: #9cc3ff;

  --brass-hi: #d6b56f;
  --brass: #b08a47;
  --brass-mid: #8e6b30;
  --brass-dark: #5a4222;

  --ember: #f09a3e;
  --amber: #ffc574;

  --wood: #1a110b;
  --wood-deep: #0f0a06;

  --ink-light: #f1e6cc;      /* text on dark */
  --ink-light-muted: #cfc2a3;
  --ink: #2e2213;            /* text on parchment */
  --ink-muted: #56432b;

  --display: "Cinzel", "Trajan Pro", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "Alegreya", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 40rem;
  --radius: 6px;

  --tex-parchment: url("../img/tex-parchment.webp");
  --tex-wood: url("../img/tex-wood-dark.webp");
  --tex-board: url("../img/tex-wood-board.webp");

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--wood-deep);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;           /* belt and braces: nothing should ever scroll sideways */
  background-color: var(--wood-deep);
  color: var(--ink-light);
  font-family: var(--body);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

img, svg, picture { display: block; max-width: 100%; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--gem-light);
  outline-offset: 4px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--ink-light);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-150%);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Buttons: aged brass plates ---------- */
.btn {
  --btn-glow: rgba(255, 176, 84, 0);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3.25rem;
  padding: 0.85em 1.9em;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #1d1409;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255, 240, 200, 0.35), transparent 55%),
    linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 45%, var(--brass-mid) 100%);
  border: 1px solid #2c1f0d;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 190, 0.55),
    inset 0 -2px 0 rgba(60, 40, 15, 0.45),
    0 0 0 3px rgba(20, 13, 6, 0.65),
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 0 36px var(--btn-glow);
  text-shadow: 0 1px 0 rgba(255, 236, 190, 0.45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}
/* scuffs on the brass */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--tex-parchment);
  background-size: 180px;
  mix-blend-mode: multiply;
  opacity: 0.28;
  pointer-events: none;
}
.btn:hover { --btn-glow: rgba(255, 176, 84, 0.45); filter: brightness(1.06); }
.btn:active { transform: translateY(1px); filter: brightness(0.96); }
.btn:focus-visible { outline-offset: 6px; }

/* ==========================================================================
   ENTRANCE
   ========================================================================== */
.entrance {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(2rem, env(safe-area-inset-top)) var(--gutter) max(clamp(2.5rem, 9vh, 6.5rem), env(safe-area-inset-bottom));
  overflow: hidden;
  text-align: center;
  background: #0b0f1a url("data:image/webp;base64,UklGRl4AAABXRUJQVlA4IFIAAABwBACdASoYAA4APu1krU2ppaSiMAgBMB2JYwC7MoDMAB0bHwsUX9a10g7hQAD+wGLAPWFrOIWEvn3u95MO1LvffXsly9oh0WVIzSsCayG7gAAA") center / cover no-repeat;
}
@media (max-aspect-ratio: 4/5) {
  .entrance {
    background-image: url("data:image/webp;base64,UklGRpQAAABXRUJQVlA4IIgAAAAwBgCdASoYACsAPuVcpk2pJSOiOrM4ASAciWMAuwBE2sbsI0A3r3KXCsQ1V0eyeVZdIQBiAZcMnWAAAP73eBvvjrRtmS7KHYHONGcRPSIstLF/h76GvmOjNUogX+fRjSDPdeSd2vGeAjO7y8SkRJRqKnqaGd2csB+eRnOejkH8dZza5AdigAAA");
  }
}

.entrance__art,
.entrance__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.entrance__art { z-index: -3; transform-origin: 50% 62%; }
.entrance__art img { object-fit: cover; object-position: 50% 45%; }

/* readability scrim: dark at the bottom where the words sit, open in the middle */
.entrance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 45% at 50% 88%, rgba(5, 7, 12, 0.78) 0%, rgba(5, 7, 12, 0.45) 55%, transparent 100%),
    linear-gradient(180deg, rgba(5, 8, 16, 0.35) 0%, transparent 22%, transparent 48%, rgba(5, 7, 12, 0.55) 78%, rgba(5, 7, 12, 0.85) 100%);
  pointer-events: none;
}

/* warm light breathing out of the doorway */
.entrance__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(38% 42% at 50% 68%, rgba(255, 170, 80, 0.16), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.entrance__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 64rem;
}

.entrance__title {
  font-size: clamp(2.35rem, min(8.4vw, 11.5vh), 6.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.02;
  text-transform: uppercase;
  color: #f3e6c4;
  text-shadow:
    0 2px 0 rgba(20, 12, 4, 0.9),
    0 0 2px rgba(0, 0, 0, 0.9),
    0 4px 24px rgba(0, 0, 0, 0.85),
    0 0 60px rgba(255, 170, 80, 0.18);
}
.entrance__title-break { display: inline; }

.flourish {
  width: clamp(9rem, 26vw, 15rem);
  height: auto;
  margin: clamp(0.6rem, 1.8vh, 1.1rem) auto;
  color: var(--brass-hi);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.entrance__motto {
  margin: 0 0 clamp(1.4rem, 4vh, 2.4rem);
  font-style: italic;
  font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.6rem);
  line-height: 1.35;
  color: #e9dcbc;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px #000, 0 2px 18px rgba(0, 0, 0, 0.9);
  max-width: 34ch;
  text-wrap: balance;
}

.btn--enter { min-width: min(100%, 17rem); }

/* Tall / portrait screens: title on two lines */
@media (max-aspect-ratio: 4/5), (max-width: 560px) {
  .entrance__title { font-size: clamp(2.3rem, 11.5vw, 5rem); }
  .entrance__title-break { display: block; }
  .entrance { padding-bottom: max(clamp(2.5rem, 11vh, 7rem), env(safe-area-inset-bottom)); }
}
/* Short landscape screens (phones on their side, small laptops) */
@media (max-height: 500px) and (orientation: landscape) {
  .entrance { padding-top: 1rem; padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
  .entrance__title { font-size: clamp(1.9rem, 10vh, 3.2rem); }
  .flourish { margin: 0.4rem auto; width: 8rem; }
  .entrance__motto { margin-bottom: 0.9rem; font-size: 1.05rem; }
  .btn--enter { min-height: 2.9rem; padding-block: 0.6em; }
}

/* ---------- floating dust (decorative) ---------- */
.motes {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.motes i {
  position: absolute;
  bottom: 18%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd9a0;
  box-shadow: 0 0 6px 1px rgba(255, 190, 110, 0.6);
  opacity: 0;
}

/* ==========================================================================
   THRESHOLD TRANSITION (JS adds classes; nothing here is required to read the site)
   ========================================================================== */
.threshold {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(60% 60% at 50% 55%, #ffd38c 0%, #f0a24a 35%, #8a4a17 75%, #2a1508 100%);
}
html.is-entering .threshold,
html.is-arriving .threshold { visibility: visible; }

/* ==========================================================================
   GUILD HALL (shared)
   ========================================================================== */
main {
  position: relative;
  display: block;
  background-color: var(--wood-deep);
  background-image:
    linear-gradient(180deg, rgba(8, 5, 3, 0.55), rgba(8, 5, 3, 0.8)),
    var(--tex-wood);
  background-size: auto, 512px 512px;
}
main:focus { outline: none; }

.eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.78rem, 0.72rem + 0.25vw, 0.92rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-hi);
}

section h2 {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.3rem);
  letter-spacing: 0.03em;
}

/* ---------- A. Welcome ----------
   The hall painting sits at the top at its natural proportions; the welcome
   text starts on the floorboards in front of the hearth. */
.welcome {
  --art-h: 50vw;          /* wide painting is 2:1 */
  --text-start: 0.84;     /* start the text at the floor line */
  position: relative;
  isolation: isolate;
  padding: calc(var(--art-h) * var(--text-start)) var(--gutter) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  background: var(--wood-deep);
}
@media (max-aspect-ratio: 4/5) {
  .welcome { --art-h: 150vw; --text-start: 0.76; } /* tall painting is 2:3 */
}
.welcome__art {
  position: absolute;
  z-index: -3;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--art-h);
  background: #120c08 url("data:image/webp;base64,UklGRlwAAABXRUJQVlA4IFAAAADQAwCdASoYAAwAPu1kqk2ppaQiMAgBMB2JZgC/OB6RjyKx4aiwx8AA/vDfgopsbs8NBVY1ttuBua5szNkbygCL7BJThvdkeU4E3a1XevwAAA==") center / cover no-repeat;
}
@media (max-aspect-ratio: 4/5) {
  .welcome__art {
    background-image: url("data:image/webp;base64,UklGRp4AAABXRUJQVlA4IJIAAAAQBgCdASoYACQAPu1iqE2ppaOiMBVdUTAdiUAU4oXNsfRaieepsZX3I2CXrPNFTx4xe4rooDhlSpgA/vWUD38Ij2pSNT6zAc9Cm1yP8LeFPXTlc9ueH7MK1pyZcWr8i7FuSEUYe6Ud+t6odZ5mJAWomwQRWRvc8OPTBNIff9SEoM9i0ott3ipZpvhIQbRzRZXEAA==");
  }
}
.welcome__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.welcome::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--art-h);
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 6, 3, 0.35) 0%, transparent 14%, transparent 62%, rgba(15, 10, 6, 0.8) 84%, var(--wood-deep) 100%);
  pointer-events: none;
}
.welcome__hearth {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--art-h);
  z-index: -2;
  background: radial-gradient(22% 30% at 50% 72%, rgba(255, 160, 70, 0.25), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}
@media (max-aspect-ratio: 4/5) {
  .welcome__hearth { background: radial-gradient(40% 16% at 50% 64%, rgba(255, 160, 70, 0.25), transparent 70%); }
}

.welcome__inner {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}
.welcome h2 {
  color: #f3e6c4;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8), 0 4px 22px rgba(0, 0, 0, 0.9);
  margin-bottom: clamp(1rem, 2.5vw, 1.6rem);
}
.welcome h2:focus { outline: none; }
.welcome__copy {
  max-width: var(--measure);
  margin: 0 auto;
  color: #eadfc4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.welcome__copy p:first-child { font-size: 1.08em; }

/* ---------- B. Notice board ---------- */
.notices {
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
}
.board {
  position: relative;
  max-width: 70rem;
  margin: 0 auto;
  padding: clamp(3.75rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(255, 180, 100, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35)),
    var(--tex-board);
  background-size: auto, auto, 420px 420px;
  border-radius: 8px;
  /* heavy timber frame */
  border: clamp(12px, 2vw, 20px) solid #2a1a0e;
  border-image: none;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.6),
    inset 0 10px 30px rgba(0, 0, 0, 0.55),
    inset 0 -10px 30px rgba(0, 0, 0, 0.45),
    0 0 0 2px #0b0704,
    0 0 0 5px rgba(150, 110, 60, 0.18),
    0 24px 60px rgba(0, 0, 0, 0.6);
}
/* corner iron brackets on the frame.
   Absolutely positioned children start inside the border, so the offset is
   exactly one frame-border width: the bracket then sits flush on the frame's
   outer edge and follows the frame's own 8px corner radius. */
.board::before,
.board::after {
  content: "";
  position: absolute;
  width: 46px;
  height: 46px;
  top: calc(-1 * clamp(12px, 2vw, 20px));
  left: calc(-1 * clamp(12px, 2vw, 20px));
  border: 7px solid #19191c;
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px 0 0 0;
  box-shadow: inset 1px 1px 0 rgba(120, 120, 128, 0.25);
}
.board::after {
  left: auto;
  right: calc(-1 * clamp(12px, 2vw, 20px));
  border-left: 0;
  border-right: 7px solid #19191c;
  border-radius: 0 8px 0 0;
  box-shadow: inset -1px 1px 0 rgba(120, 120, 128, 0.25);
}

.board__plaque {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  width: max-content;
  max-width: calc(100% - 1rem);
  padding: 0.7rem clamp(1.7rem, 5vw, 2.8rem) 0.65rem;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255, 240, 200, 0.3), transparent 55%),
    linear-gradient(180deg, var(--brass-hi), var(--brass) 50%, var(--brass-mid));
  border: 1px solid #2c1f0d;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 238, 190, 0.5), 0 0 0 3px rgba(20, 13, 6, 0.7), 0 10px 22px rgba(0, 0, 0, 0.55);
}
.board__plaque::before,
.board__plaque::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7a7a80, #1b1b1e 70%);
  left: 0.55rem;
}
.board__plaque::after { left: auto; right: 0.55rem; }
.board__plaque h2 {
  font-size: clamp(1.15rem, 0.95rem + 1.2vw, 1.8rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #24180a;
  text-shadow: 0 1px 0 rgba(255, 236, 190, 0.5);
  white-space: nowrap;
}

.board__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.6rem) clamp(1.25rem, 3vw, 2.4rem);
  align-items: start;
}
@media (min-width: 900px) {
  .board__notes { grid-template-columns: repeat(3, 1fr); }
}

.note {
  --tilt: -1.2deg;
  position: relative;
  padding: 2.1rem 1.35rem 1.5rem;
  color: var(--ink);
  text-align: center;
  background:
    radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(110, 70, 25, 0.35) 100%),
    var(--tex-parchment);
  background-size: auto, 300px 300px;
  /* rough, hand-cut paper edge */
  clip-path: polygon(0% 2%, 6% 0%, 14% 1.5%, 27% 0.2%, 40% 1.8%, 55% 0%, 70% 1.4%, 86% 0.3%, 100% 1.6%, 99.2% 18%, 100% 38%, 99% 60%, 100% 82%, 99.4% 98.5%, 88% 100%, 72% 98.6%, 58% 100%, 41% 98.8%, 25% 100%, 11% 98.5%, 0.6% 100%, 0% 80%, 0.9% 58%, 0% 36%, 0.8% 16%);
  transform: rotate(var(--tilt));
  transition: transform 0.35s ease;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}
.note:nth-child(2) { --tilt: 1.4deg; }
.note:nth-child(3) { --tilt: -0.6deg; }
.note:nth-child(4) { --tilt: 0.9deg; }
.note:nth-child(5) { --tilt: -1.6deg; }
.note:nth-child(6) { --tilt: 1deg; }

/* iron pin (drawn inside the note so the clip-path doesn't cut it) */
.note::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9a9aa2 0%, #3a3a40 40%, #121214 75%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
}
/* some notes get a blue wax seal instead of a pin */
.note--seal::before {
  width: 30px;
  height: 30px;
  top: 0.35rem;
  margin-left: -15px;
  background:
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(0, 0, 0, 0.25) 42%, transparent 48%),
    radial-gradient(circle at 38% 32%, #5d8fe0 0%, #26508f 45%, #16305e 80%);
  border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}
.note__icon {
  width: 3rem;
  height: 3rem;
  margin: 0.4rem auto 0.7rem;
}
.note h3 {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2a1d0e;
  margin-bottom: 0.45rem;
}
.note p {
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

@media (hover: hover) and (pointer: fine) {
  .note:hover { transform: rotate(0deg) translateY(-4px); }
}

/* ---------- C. Charter ---------- */
.about {
  padding: clamp(2rem, 6vw, 4rem) var(--gutter) clamp(3.5rem, 9vw, 7rem);
}
.charter {
  position: relative;
  max-width: 58rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 4.75rem) clamp(1.25rem, 6vw, 4.5rem) clamp(3.25rem, 7vw, 5rem);
  color: var(--ink);
  background:
    radial-gradient(130% 110% at 50% 45%, transparent 55%, rgba(95, 58, 18, 0.45) 100%),
    var(--tex-parchment);
  background-size: auto, 360px 360px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(60, 40, 15, 0.35);
}
/* rolled ends of the scroll */
.charter::before,
.charter::after {
  content: "";
  position: absolute;
  left: -0.9rem;
  right: -0.9rem;
  height: clamp(1.4rem, 3vw, 1.9rem);
  border-radius: 999px;
  background:
    linear-gradient(180deg, #8a6d42 0%, #d9c49a 30%, #efe0bc 45%, #b8986a 70%, #6e5330 100%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(60, 40, 15, 0.45);
}
.charter::before { top: calc(-1 * clamp(0.7rem, 1.5vw, 0.95rem)); }
.charter::after { bottom: calc(-1 * clamp(0.7rem, 1.5vw, 0.95rem)); }

.charter h2 {
  text-align: center;
  color: #24180a;
  margin-bottom: 0.4rem;
}
.charter__intro {
  text-align: center;
  font-style: italic;
  color: var(--ink-muted);
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
  max-width: 32rem;
}
.charter__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.4rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem);
}
.charter__list li {
  position: relative;
  padding-left: 2.1rem;
}
.charter__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.35rem;
  height: 1.35rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.2 7.8L22 12l-7.8 2.2L12 23l-2.2-8.8L2 12l7.8-3.2Z' fill='%23a8843f' stroke='%235a4222' stroke-width='1'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23274a8c'/%3E%3C/svg%3E") center / contain no-repeat;
}
.charter__list h3 {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  letter-spacing: 0.03em;
  color: #2a1d0e;
  margin-bottom: 0.3rem;
}
.charter__list p {
  color: var(--ink-muted);
  line-height: 1.5;
}
.charter__closing {
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  text-align: center;
  font-style: italic;
  font-size: 1.12em;
  color: var(--ink);
  max-width: 30rem;
}
.charter__seal {
  width: 3.6rem;
  height: 3.6rem;
  margin: 1.1rem auto 0;
  border-radius: 47% 53% 50% 50% / 52% 46% 54% 48%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l1.7 6.3L20 12l-6.3 1.7L12 21l-1.7-7.3L4 12l6.3-2.7Z' fill='%2393b6ee' fill-opacity='.55'/%3E%3C/svg%3E") center / 58% no-repeat,
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.22) 56%, transparent 62%),
    radial-gradient(circle at 38% 32%, #5d8fe0 0%, #26508f 45%, #142c58 85%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.45), inset 0 -3px 5px rgba(0, 0, 0, 0.35);
}

/* ---------- D. Join ---------- */
.join {
  position: relative;
  isolation: isolate;
  padding: clamp(4rem, 10vw, 8rem) var(--gutter) clamp(4.5rem, 11vw, 8.5rem);
  text-align: center;
  overflow: hidden;
}
.join::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 55% at 50% 32%, rgba(255, 164, 72, 0.22), transparent 70%),
    radial-gradient(90% 60% at 50% 100%, rgba(31, 63, 128, 0.25), transparent 70%);
  pointer-events: none;
}
.join__inner {
  max-width: 44rem;
  margin: 0 auto;
}
.join__crest {
  width: clamp(6.5rem, 16vw, 9.5rem);
  height: auto;
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6)) sepia(0.12) saturate(0.9);
}
.join h2 {
  color: #f3e6c4;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8), 0 4px 22px rgba(0, 0, 0, 0.85);
  margin-bottom: 1.1rem;
}
.join__copy {
  max-width: 36rem;
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
  color: var(--ink-light-muted);
}
.btn--join {
  min-height: 3.75rem;
  padding: 1em 2.3em;
  font-size: clamp(1rem, 0.92rem + 0.45vw, 1.25rem);
  max-width: 100%;
}
.join__note {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  color: #a99a7c;
}
.join__note.is-warning {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px dashed rgba(240, 154, 62, 0.7);
  border-radius: var(--radius);
  color: #ffcf92;
  background: rgba(60, 30, 8, 0.5);
}

/* ---------- Footer ---------- */
.footer {
  padding: clamp(2.5rem, 6vw, 3.5rem) var(--gutter) max(2.5rem, env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(4, 3, 2, 0.75), rgba(4, 3, 2, 0.92)),
    var(--tex-wood);
  background-size: auto, 512px 512px;
  border-top: 1px solid rgba(176, 138, 71, 0.25);
  color: #a99a7c;
  font-size: 0.95rem;
  text-align: center;
}
.footer__inner {
  max-width: 48rem;
  margin: 0 auto;
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  text-align: left;
  margin-bottom: 1.5rem;
  padding: 0.25rem;
}
.footer__brand img { width: 56px; height: 56px; flex: none; }
.footer__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.footer__motto {
  display: block;
  font-style: italic;
  color: #b9aa8a;
  font-size: 0.95rem;
}
.footer__legal {
  max-width: 40rem;
  margin: 0 auto 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #8f8269;
}
.footer__meta { margin: 0; font-size: 0.88rem; color: #8f8269; }
.footer__meta a {
  color: #c9b78f;
  text-underline-offset: 3px;
  display: inline-block;
  padding: 0.35rem 0.1rem;
}
.footer__meta a:hover { color: var(--ink-light); }

/* ==========================================================================
   MOTION (only when the visitor hasn't asked for less of it)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* lantern / doorway light flicker */
  .entrance__glow { animation: flicker 5.5s ease-in-out infinite; }
  .welcome__hearth { animation: flicker 3.8s ease-in-out infinite; }

  /* drifting dust */
  .motes i { animation: drift 14s linear infinite; }
  .motes i:nth-child(1)  { left: 44%; animation-delay: -1s;  animation-duration: 13s; }
  .motes i:nth-child(2)  { left: 52%; animation-delay: -4s;  animation-duration: 16s; width: 2px; height: 2px; }
  .motes i:nth-child(3)  { left: 57%; animation-delay: -7s;  animation-duration: 12s; }
  .motes i:nth-child(4)  { left: 47%; animation-delay: -10s; animation-duration: 18s; width: 2px; height: 2px; }
  .motes i:nth-child(5)  { left: 39%; animation-delay: -2s;  animation-duration: 15s; }
  .motes i:nth-child(6)  { left: 61%; animation-delay: -12s; animation-duration: 14s; width: 2px; height: 2px; }
  .motes i:nth-child(7)  { left: 50%; animation-delay: -6s;  animation-duration: 17s; }
  .motes i:nth-child(8)  { left: 35%; animation-delay: -9s;  animation-duration: 19s; width: 2px; height: 2px; }
  .motes i:nth-child(9)  { left: 65%; animation-delay: -3s;  animation-duration: 16s; }
  .motes i:nth-child(10) { left: 54%; animation-delay: -14s; animation-duration: 13s; width: 2px; height: 2px; }

  /* gentle arrival of the entrance text */
  .entrance__content > * { animation: rise 1s cubic-bezier(.2, .7, .2, 1) both; }
  .entrance__content > :nth-child(2) { animation-delay: 0.15s; }
  .entrance__content > :nth-child(3) { animation-delay: 0.3s; }
  .entrance__content > :nth-child(4) { animation-delay: 0.45s; }

  /* scroll reveal: JS adds .reveal, then .is-visible. Without JS nothing is hidden. */
  .js .reveal {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 0.8s ease, translate 0.8s cubic-bezier(.2, .7, .2, 1);
  }
  .js .reveal.is-visible { opacity: 1; translate: 0 0; }

  
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  18% { opacity: 0.82; }
  22% { opacity: 0.95; }
  47% { opacity: 0.78; }
  52% { opacity: 1; }
  74% { opacity: 0.86; }
}
@keyframes drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: translate(18px, -32vh); opacity: 0.55; }
  90%  { opacity: 0; }
  100% { transform: translate(-12px, -60vh); opacity: 0; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Reduced motion: no zoom, no drifting, no flicker. A short fade is all. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .motes { display: none; }
  html.is-entering .threshold {
    background: #120c08;
    transition: opacity 0.18s linear;
    opacity: 1;
  }
  html.is-arriving .threshold {
    background: #120c08;
    opacity: 0;
    transition: opacity 0.25s linear;
  }
}

/* Windows high contrast */
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .note, .charter { border: 1px solid CanvasText; }
}

/* Material refinements: the hall's oak, iron and blue/gold heraldry. */
body { overflow-x: clip; }
.entrance__title { font-size: clamp(2.3rem, 6.6vw, 5.4rem); }
.entrance { min-height: max(680px, 100svh); padding-bottom: max(2.5rem, 6svh); }
.entrance::before { background: linear-gradient(180deg,rgba(5,8,16,.08),transparent 45%,rgba(5,7,12,.72) 76%,#0f0a06); }
.entrance__art img { object-position: 50% 35%; }
.entrance__glow { background: radial-gradient(10% 18% at 32% 43%,#ffaa5020,transparent),radial-gradient(10% 18% at 68% 43%,#ffaa5020,transparent); }
.welcome { --text-start: .92; }
.welcome__copy { color: #ded1b7; }
.notices { background: radial-gradient(ellipse at 50% 10%,#a36f3020,transparent 65%); }
.board { --frame: clamp(12px,2vw,20px); border-width: var(--frame); border-color: #38271b; background-size: auto,auto,640px 640px; box-shadow: inset 0 0 0 2px #100c09,inset 0 0 50px #000b,0 0 0 2px #120e0b,0 0 0 5px #8c6b3d40,0 28px 60px #000b; }
.board::before,.board::after,.board__foot { width: 48px; height: 48px; border-color: #292a29; background: radial-gradient(circle at 5px 5px,#b8a17a 0 2px,#131617 3px 4px,transparent 5px); pointer-events:none; }
.board::before,.board::after { top:calc(-1 * var(--frame)); }
.board::before { left:calc(-1 * var(--frame)); }
.board::after { right:calc(-1 * var(--frame)); }
.board__foot { position:absolute; bottom:calc(-1 * var(--frame)); border:7px solid #292a29; border-top:0; border-radius:0 0 0 8px; box-shadow:inset 1px -1px 0 #b0a08040; }
.board__foot--left { left:calc(-1 * var(--frame)); border-right:0; }
.board__foot--right { right:calc(-1 * var(--frame)); border-left:0; border-radius:0 0 8px 0; }
.board__plaque { background:linear-gradient(115deg,#99805b,#d0b480 42%,#927548); }
.board__plaque h2 { white-space:normal; text-align:center; }
.note { clip-path:polygon(0 .5%,100% 0,99.6% 99%,.5% 100%); border:1px solid #a98a56; box-shadow:inset 0 0 24px #80501824,2px 8px 12px #0008; filter:none; background-color:#e1cca3; }
.note p { font-size:1.08rem; color:#493820; }
.note--seal::before { background: url('../img/crest.svg') center/78% no-repeat,radial-gradient(circle at 35% 30%,#426797,#192f51 75%); }
.about { padding-top:clamp(3rem,7vw,6rem); }
.charter { border:1px solid #8a7047; outline:8px solid #241a12; outline-offset:5px; background-color:#e3d1ad; box-shadow:inset 0 0 65px #72512135,0 26px 65px #000b; }
.charter::before,.charter::after { left:0;right:0;height:9px;border-radius:0;background:linear-gradient(180deg,#b69a60,#604828 45%,#2c2115 50%,#96764a); }
.charter::before { top:0; }.charter::after { bottom:0; }
.charter h2 { padding-bottom:.6rem; }
.charter__list li { border-top:1px solid #876b3c45;padding-top:1rem; }
.charter__list li::before { top:1.2rem; }
.charter__list p,.charter__intro { color:#493820; }
.charter__seal { width:4.5rem;height:4.5rem;background:url('../img/crest.svg') center/74% no-repeat,radial-gradient(circle at 35% 30%,#426797,#192f51 75%); }
.join { padding-block:clamp(4rem,9vw,7rem);border-top:1px solid #b08a4740; }
.join::before { background:linear-gradient(180deg,#0f0a0699,#0a0c10b8 45%,#0f0a06e8),image-set(url('../img/hall-wide-1920.avif') type('image/avif'),url('../img/hall-wide-1920.webp') type('image/webp')) center 65%/cover no-repeat; }
.join__inner { padding:clamp(1.5rem,4vw,3rem);max-width:49rem;background:linear-gradient(110deg,#0c1521e8,#152133eb,#0c1521ed);border:1px solid #b08a4770;outline:1px solid #b08a472e;outline-offset:7px;box-shadow:0 24px 70px #0009,inset 0 0 60px #0005; }
.join__crest { width:7rem;margin-bottom:1rem; }
.join__copy { color:#e1d4ba; }
.join__note { color:#c9b999; }
.btn--join { box-shadow:0 0 0 3px #17100b,0 0 0 4px #c2a36a65,0 8px 30px #dc9e3430; }
.footer__legal,.footer__meta { color:#b4a68d; }
@media (max-aspect-ratio:4/5) {
 .entrance { min-height:max(700px,100svh);padding-bottom:3rem; }
 .entrance__title { font-size:clamp(2.15rem,10vw,4rem); }
 .entrance__art img { object-position:center top; }
 .welcome { --text-start:.90; }
 .join::before { background-image:linear-gradient(180deg,#0f0a0699,#0a0c10b8 45%,#0f0a06e8),image-set(url('../img/hall-tall-1200.avif') type('image/avif'),url('../img/hall-tall-1200.webp') type('image/webp')); }
}
@media (max-height:500px) and (orientation:landscape) { .entrance { min-height:560px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }
@media (forced-colors:active) { .board,.charter,.join__inner { border:2px solid CanvasText; } }

.is-resting .motes i,.is-resting .entrance__glow,.is-resting .welcome__hearth,.is-background * { animation-play-state:paused!important; }