/* The Realm: the illuminated map. The route inks itself, a knight rides it. */

/* the fixed map paints inside main (z 3) which covers the sibling header;
   lift the nav back above the kingdom on this page only */
header { position: relative; z-index: 12; }

/* ---------- the living map under everything ---------- */
.questline { position: relative; }
.ql-map { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ql-map-art { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover;
  filter: saturate(.92) brightness(.9); will-change: transform;
  transition: transform 2.4s cubic-bezier(.4,.08,.2,1), transform-origin 2.4s cubic-bezier(.4,.08,.2,1); }
.ql-map-shade { position: absolute; inset: 0;
  background:
    radial-gradient(90% 80% at 50% 44%, transparent 42%, rgba(16, 12, 8, .66) 92%),
    linear-gradient(180deg, rgba(16, 12, 8, .5), transparent 24%, transparent 72%, rgba(16, 12, 8, .6)); }
.ql-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-plan { fill: none; stroke: rgba(58, 42, 20, .4); stroke-width: 2.4px;
  stroke-dasharray: 3 14; stroke-linecap: round; }
.rt-ink { fill: none; stroke: #d4a84c; stroke-width: 4px;
  stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(212, 168, 76, .55)); }
.ql-rider { position: absolute; left: 0; top: 0; width: clamp(104px, 9vw, 180px); z-index: 2;
  transform: translate(-50%, -82%); will-change: transform; }
.ql-rider img { width: 100%; height: auto; animation: rider-trot .8s ease-in-out infinite;
  filter: drop-shadow(0 12px 20px rgba(16, 12, 8, .65)); transition: none; }
.ql-rider.face-east img { transform: scaleX(-1); animation: rider-trot-east .8s ease-in-out infinite; }
@keyframes rider-trot-east { 0%, 100% { transform: scaleX(-1) translateY(0) rotate(2deg); }
  50% { transform: scaleX(-1) translateY(-5px) rotate(-2deg); } }
@keyframes rider-trot { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.ql-compass { position: absolute; right: 2.2vw; top: 10vh; width: clamp(90px, 8vw, 150px);
  opacity: .85; animation: compass-drift 60s linear infinite;
  filter: drop-shadow(0 8px 20px rgba(16, 12, 8, .6)); }
@keyframes compass-drift { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ql-candle { position: absolute; inset: 0;
  background: radial-gradient(60% 52% at 50% 46%, rgba(255, 214, 130, .1), transparent 74%);
  animation: candle-breathe 5.5s ease-in-out infinite; }
@keyframes candle-breathe { 0%, 100% { opacity: .75; } 42% { opacity: 1; } 68% { opacity: .6; } }

.ql-flow { position: relative; z-index: 1; }

/* ---------- reveals ---------- */
.questline .rv { opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity 1s ease, transform 1s ease, filter 1s ease; }
.questline .rv.on { opacity: 1; transform: none; filter: none; }

/* ---------- the charter intro ---------- */
.charter { position: fixed; inset: 0; z-index: 10000; overflow: hidden;
  display: grid; place-items: center; transition: opacity 1.1s ease; }
.charter.fade { opacity: 0; }
.charter.gone { display: none; }
.ch-dark { position: absolute; inset: 0;
  background: radial-gradient(60% 52% at 50% 44%, #221c15, #100c08 82%); }
.ch-seal { position: absolute; left: 50%; top: 50%; width: min(46vh, 38vw); aspect-ratio: 1;
  transform: translate(-50%, -50%); z-index: 3; }
.ch-seal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: transform 1.5s cubic-bezier(.6,.04,.3,1), opacity 1.2s ease .3s; }
.ch-seal-l { clip-path: inset(0 50% 0 0); }
.ch-seal-r { clip-path: inset(0 0 0 50%); }
.charter.crack .ch-seal-l { transform: translateX(-56%) rotate(-24deg); opacity: 0; }
.charter.crack .ch-seal-r { transform: translateX(56%) rotate(22deg); opacity: 0; }
.ch-burst { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  border-radius: 50%; transform: translate(-50%, -50%); opacity: 0;
  box-shadow: 0 0 0 0 rgba(212, 168, 76, .55); }
.charter.crack .ch-burst { animation: seal-burst 1.4s ease-out forwards; }
@keyframes seal-burst { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(212, 168, 76, .55); }
  100% { opacity: 0; box-shadow: 0 0 0 46vmin rgba(212, 168, 76, 0); } }
.ch-scrollband { position: relative; z-index: 2; width: min(860px, 88vw); text-align: center;
  transform: scaleY(0); transform-origin: 50% 0%; transition: transform 1.4s cubic-bezier(.2,.7,.2,1) .3s; }
.charter.crack .ch-scrollband { transform: scaleY(1); }
.ch-rod { display: block; width: 72%; margin: 0 auto 8px; }
.ch-titles { background:
    linear-gradient(180deg, rgba(244, 236, 216, .07), rgba(244, 236, 216, .03));
  border: 1px solid rgba(239, 226, 195, .16); border-radius: 6px; padding: 34px 28px 40px; }
.ch-plate { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .38em;
  text-transform: uppercase; color: #d4a84c; opacity: 0; animation: ch-in .8s ease forwards 2s; }
.ch-title { font-family: "Uncial Antiqua", "Almendra", serif; font-weight: 700; color: #efe2c3;
  font-size: clamp(52px, 8vw, 120px); line-height: 1.02; margin: 14px 0 8px; }
.cw { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(1deg);
  clip-path: inset(0 0 100% 0); animation: cw-rise .9s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--cd); }
.cw.gold { background: linear-gradient(100deg, #d4a84c 20%, #f4e3ae 42%, #d4a84c 60%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: cw-rise .9s cubic-bezier(.2,.7,.2,1) forwards,
    gold-sweep 5s ease-in-out 4s infinite; animation-delay: var(--cd), 4s; }
@keyframes cw-rise { to { opacity: 1; transform: none; clip-path: inset(-12% -6% -14% -6%); } }
@keyframes gold-sweep { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes ch-in { to { opacity: 1; } }
.ch-line { font-family: "IM Fell English", "Cardo", serif; font-style: italic; color: #b8a888;
  font-size: clamp(16px, 1.6vw, 22px); }
.ch-invite { font-family: "IM Fell English", "Cardo", serif; font-style: italic; color: #e6c070;
  font-size: clamp(15px, 1.4vw, 19px); margin-top: 20px; opacity: 0;
  animation: ch-in 1s ease forwards; animation-delay: var(--cd); }
.ch-skip { position: absolute; right: 26px; bottom: 22px; z-index: 4; background: none;
  border: 1px solid rgba(239, 226, 195, .25); color: #b8a888; font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 9px 14px; cursor: pointer;
  opacity: 0; animation: ch-in .8s ease forwards; animation-delay: var(--cd); }
.ch-skip:hover { color: #efe2c3; border-color: #d4a84c; }

/* ---------- placeholders ---------- */
.ph { background:
    radial-gradient(42% 34% at 32% 30%, rgba(212, 168, 76, .16), transparent 70%),
    linear-gradient(160deg, #221c15, #171310 70%);
  border: 1px solid rgba(239, 226, 195, .1); position: relative; min-height: 320px; }
.ph::after { content: "the illumination is on its way"; position: absolute; inset: auto 0 12px 0;
  text-align: center; font-family: var(--mono, ui-monospace, monospace); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(239, 226, 195, .38); }

/* ---------- the war table hero ---------- */
.wartable { min-height: 94vh; display: grid; align-content: end; position: relative;
  isolation: isolate; overflow: hidden; }
.wt-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.wt-haze { position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(180deg, rgba(16, 12, 8, .34), transparent 30%, rgba(16, 12, 8, .9) 92%); }
.wt-copy { max-width: 780px; padding: 0 min(7vw, 90px) 96px; position: relative; z-index: 4; }
.wt-copy::before { content: ""; position: absolute; inset: -8% -10%; z-index: -1;
  background: radial-gradient(70% 80% at 40% 60%, rgba(16, 12, 8, .62), transparent 78%); }
.wt-plate { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .32em;
  text-transform: uppercase; color: #d4a84c; }
.wt-title { font-family: "Uncial Antiqua", "Almendra", serif; font-weight: 700; color: #f4ead0;
  font-size: clamp(46px, 6.2vw, 92px); line-height: 1.02; margin: 12px 0 14px;
  text-shadow: 0 2px 28px rgba(16, 12, 8, .8); }
.wt-tag { font-family: "IM Fell English", "Cardo", serif; color: #ddd0b0; max-width: 58ch;
  font-size: clamp(15px, 1.3vw, 19px); line-height: 1.78; }
.wt-ctas { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.wt-cta { display: inline-block; font-family: var(--mono, ui-monospace, monospace); font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; color: #171310; background: #d4a84c;
  padding: 13px 22px; border-radius: 3px; text-decoration: none; }
.wt-cta:hover { background: #e6c070; }
.wt-cta-2 { background: transparent; color: #ddd0b0; border: 1px solid rgba(239, 226, 195, .3); }
.wt-cta-2:hover { border-color: #d4a84c; color: #f4ead0; background: transparent; }
.wt-cue { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4;
  font-family: "IM Fell English", "Cardo", serif; font-style: italic; font-size: 13px; color: #b8a888;
  animation: cue-bob 3.4s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }

/* ---------- waystones: the borders are proclaimed, not whispered ---------- */
.waystone { min-height: 62vh; display: flex; flex-direction: column; z-index: 6;
  align-items: center; justify-content: center; gap: 10px; padding: 8vh 6vw;
  position: relative; }
.ws-seal { position: relative; width: min(24vh, 20vw); aspect-ratio: 1; }
.ws-seal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: transform 1.4s cubic-bezier(.3, .05, .2, 1), opacity 1.2s ease; }
.ws-l { clip-path: inset(0 50% 0 0); }
.ws-r { clip-path: inset(0 0 0 50%); }
.waystone.open .ws-l { transform: translateX(-60%) rotate(-21deg); opacity: 0; }
.waystone.open .ws-r { transform: translateX(60%) rotate(19deg); opacity: 0; }
.ws-titles { display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; position: relative; padding: 30px 60px; }
.ws-titles::before { content: ""; position: absolute; inset: -18% -30%; z-index: -1;
  background: radial-gradient(58% 60% at 50% 50%, rgba(24, 15, 5, .58), transparent 72%); }
.ws-name { font-family: "Uncial Antiqua", "Almendra", serif;
  font-size: clamp(46px, 6vw, 110px); line-height: 1.08; color: var(--wsa, #d4a84c);
  text-shadow: 0 0 50px rgba(212, 168, 76, .35), 0 3px 14px rgba(20, 12, 4, .6);
  opacity: 0; transform: translateY(22px) scale(.95); filter: blur(5px);
  transition: opacity 1.2s ease .35s, transform 1.4s cubic-bezier(.2, .8, .25, 1) .35s,
    filter 1.2s ease .35s; }
.ws-name::before, .ws-name::after { content: "\2766"; font-size: .32em;
  vertical-align: middle; opacity: .65; margin: 0 .5em; color: #a5906a; }
.waystone.open .ws-name { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

/* ---------- the legends ---------- */
.legend { padding: clamp(48px, 8vh, 110px) min(5vw, 70px); min-height: 88vh;
  display: grid; align-items: center; }
.lg-panel { position: relative; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 56px); align-items: center;
  background: #f0e6cc var(--parch, none) center / cover;
  border: 1px solid rgba(58, 42, 20, .35); border-radius: 4px;
  box-shadow: 0 30px 70px rgba(16, 12, 8, .55), inset 0 0 0 1px rgba(244, 236, 216, .5),
    inset 0 0 90px rgba(58, 42, 20, .22);
  padding: clamp(22px, 3vw, 46px); max-width: 1780px; margin: 0 auto; width: 100%; }
.lg-panel::after { content: ""; position: absolute; left: 0; top: 0; width: 68px; height: 68px;
  background: radial-gradient(circle at 0 0, var(--ra, #d4a84c) 0 30%, transparent 62%);
  opacity: .5; border-radius: 4px 0 0 0; pointer-events: none; }
.legend.lg-flip .lg-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.legend.lg-flip .lg-art-wrap { order: 2; }
.lg-art-wrap { text-align: center; }
.lg-art { display: inline-block; max-width: 100%; max-height: 74vh;
  box-shadow: 0 16px 40px rgba(58, 42, 20, .4); }
.lg-art.lg-bordered { border-style: solid; border-color: transparent;
  border-width: clamp(40px, 3.6vw, 64px); border-image-slice: 225;
  border-image-width: clamp(40px, 3.6vw, 64px); border-image-repeat: round;
  box-shadow: none; filter: drop-shadow(0 18px 38px rgba(58, 42, 20, .5)); }
.lg-cartouche { display: inline-flex; align-items: baseline; gap: 12px; padding: 7px 15px;
  background: linear-gradient(174deg, rgba(58, 42, 20, .92), rgba(40, 29, 14, .92));
  border: 1px solid var(--ra, #d4a84c); border-radius: 3px;
  box-shadow: 0 2px 0 rgba(16, 12, 8, .4); }
.lg-no { font-family: "Uncial Antiqua", "Almendra", serif; font-weight: 700; font-size: 20px; color: #f4e3ae; }
.lg-region { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ra, #d4a84c);
  filter: brightness(1.5); }
.lg-title { font-family: "Uncial Antiqua", "Almendra", serif; font-weight: 700; color: #2c2216;
  font-size: clamp(30px, 3vw, 46px); line-height: 1.08; margin: 14px 0 12px; }
.lg-tale { background: rgba(244, 236, 216, .6); border: 1px solid rgba(58, 42, 20, .28);
  border-radius: 4px; padding: 15px 17px; }
.tl { font-family: "IM Fell English", "Cardo", serif; color: #3a2f22; font-size: 15.5px; line-height: 1.7; margin: 0 0 10px; }
.tl:last-child { margin-bottom: 0; }
.tl b { display: block; font-family: var(--mono, ui-monospace, monospace); font-weight: 500;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: #8a6a1e; margin-bottom: 3px; }
.lg-crew { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.lg-crew form { display: contents; }
.crew-chip { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: #f4ead0; background: #6a4e1c; border: 0; border-radius: 3px;
  padding: 10px 15px; cursor: pointer; text-decoration: none; display: inline-block; }
.crew-chip:hover { background: #8a6a1e; }
.crew-wait { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: #6d5c42; }
.legend-tag { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: #8a2f3c; border: 1px dashed rgba(138, 47, 60, .5);
  padding: 7px 11px; border-radius: 3px; }

/* ---------- the commissions ---------- */
.looms, .chronicle { padding: clamp(60px, 10vh, 130px) min(6vw, 84px); position: relative; }
.loom-head { max-width: 720px; margin-bottom: 34px; }
.loom-plate { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: #e6c070; }
.loom-note { font-family: "IM Fell English", "Cardo", serif; font-style: italic; color: #cabfa2; margin-top: 8px; font-size: 15px; }
.loom-row, .chron-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.loom, .chron { position: relative; display: block; text-decoration: none;
  transition: transform .35s ease; transition-delay: var(--ld); }
.loom:hover, .chron:hover { transform: translateY(-5px); }
.loom-rod { display: block; width: 106%; margin: 0 -3% -6px; }
.loom-cloth { display: block; aspect-ratio: 16 / 11; overflow: hidden;
  border: 1px solid rgba(58, 42, 20, .5); background: #221c15;
  box-shadow: 0 16px 34px rgba(16, 12, 8, .55); }
.loom-cloth img, .chron-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chron-img { aspect-ratio: 16 / 11; border: 1px solid rgba(58, 42, 20, .5);
  box-shadow: 0 16px 34px rgba(16, 12, 8, .55); }
.loom-dark { display: block; width: 100%; height: 100%;
  background: radial-gradient(60% 60% at 50% 44%, #2c2216, #171310 80%); }
.loom-plate2 { display: block; margin-top: 10px; }
.loom-plate2 b { display: block; font-family: "Uncial Antiqua", "Almendra", serif; font-weight: 700;
  color: #efe2c3; font-size: 16px; }
.loom-plate2 i { font-family: var(--mono, ui-monospace, monospace); font-style: normal; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: #b8a888; }
.chron-title { display: block; margin-top: 9px; font-family: "IM Fell English", "Cardo", serif; font-style: italic;
  color: #ddd0b0; font-size: 14px; text-align: center; }
.empty { font-family: "IM Fell English", "Cardo", serif; font-style: italic; color: #b8a888; }

/* ---------- the hearth ---------- */
.hearth { min-height: 56vh; display: grid; place-items: center; text-align: center; }
.hearth-copy { padding: 60px 24px; }
.hearth-line { font-family: "Uncial Antiqua", "Almendra", serif; font-style: italic; color: #f4e3ae;
  font-size: clamp(22px, 2.6vw, 38px); margin-bottom: 26px;
  text-shadow: 0 2px 24px rgba(16, 12, 8, .8); }
.hearth-hall { display: block; margin-top: 18px; font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #cabfa2; text-decoration: none; }
.hearth-hall:hover { color: #e6c070; }

/* ---------- whispers and cast ---------- */
.whisper { position: absolute; font-family: "IM Fell English", "Cardo", serif; font-style: italic; font-size: 13px;
  color: rgba(239, 226, 195, .45); pointer-events: none; }
.rl-wsp { right: 7%; bottom: 26px; transform: rotate(-1.2deg); }
.rl-mg { position: absolute; z-index: 5; pointer-events: none; opacity: 0; }
.rl-mg img { width: 100%; height: auto; animation: rl-mg-bob 4.8s ease-in-out infinite; }
@keyframes rl-mg-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
.rl-mg.mg-run { animation: rl-mg-cross var(--rlt, 28s) linear forwards; }
@keyframes rl-mg-cross { 0% { opacity: 0; }
  7% { opacity: .9; } 92% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--rlx, 40vw), var(--rly, -5vh)); } }

/* ---------- reduced motion and small screens ---------- */
@media (prefers-reduced-motion: reduce) {
  .charter { display: none; }
  .questline .rv { opacity: 1; transform: none; filter: none; transition: none; }
  .ql-rider img, .ql-compass, .ql-candle, .wt-cue { animation: none; }
  .waystone .ws-l { transform: translateX(-46%) rotate(-19deg); opacity: 0; transition: none; }
  .waystone .ws-r { transform: translateX(46%) rotate(17deg); opacity: 0; transition: none; }
  .rl-mg { display: none; }
  .cw.gold { animation: cw-rise .9s forwards; }
}
@media (max-width: 900px) {
  .lg-panel, .legend.lg-flip .lg-panel { grid-template-columns: 1fr; }
  .legend.lg-flip .lg-art-wrap { order: 0; }
  .legend { min-height: 0; }
  .waystone { min-height: 40vh; }
  .ql-compass { width: 64px; right: 8px; top: 8vh; opacity: .7; }
  .wt-copy { padding-bottom: 72px; }
}

/* ---- the seal breaks open onto the country you are crossing into ----
   An illuminated miniature, framed the same way the legends are framed, with
   the region's name written under it. The map stays visible all around, so a
   border crossing reads as a plate laid on the map rather than a banner. */
.waystone.has-land { min-height: 80vh; }
.ws-land { position: relative; z-index: 0; width: min(58vw, 940px); max-width: 92vw;
  aspect-ratio: 2 / 1; background-size: cover; background-position: center;
  box-shadow: 0 18px 44px rgba(20, 12, 4, .7);
  opacity: 0; transform: scale(.93); filter: blur(5px) saturate(.75);
  transition: opacity 1.2s ease .2s, transform 1.6s cubic-bezier(.2, .7, .2, 1) .2s,
    filter 1.3s ease .2s; }
.waystone.has-frame .ws-land { border-style: solid; border-color: transparent;
  border-width: clamp(26px, 2.5vw, 48px); border-image-source: var(--bord);
  border-image-slice: 225; border-image-width: clamp(26px, 2.5vw, 48px);
  border-image-repeat: round; box-shadow: none;
  filter: blur(5px) saturate(.75) drop-shadow(0 18px 40px rgba(20, 12, 4, .6)); }
.waystone.open .ws-land { opacity: 1; transform: scale(1); filter: blur(0) saturate(1); }
.waystone.open.has-frame .ws-land { filter: blur(0) saturate(1)
  drop-shadow(0 18px 40px rgba(20, 12, 4, .6)); }
/* the seal breaks across the middle of the plate */
.waystone.has-land .ws-seal { position: absolute; left: 50%; top: 50%; z-index: 3;
  transform: translate(-50%, -50%); }
.waystone.has-land .ws-veil { display: none; }
/* the name is the plate's caption, not a banner across it */
.waystone.has-land .ws-titles { padding: 22px 40px 0; }
.waystone.has-land .ws-name { font-size: clamp(34px, 4.4vw, 78px);
  text-shadow: 0 2px 3px rgba(12, 7, 2, .95), 0 6px 24px rgba(12, 7, 2, .85),
    0 0 46px rgba(12, 7, 2, .7); }
.waystone.has-land .ws-titles::before { background:
  radial-gradient(56% 62% at 50% 50%, rgba(14, 8, 3, .62), transparent 78%); }
@media (max-width: 900px) {
  .ws-land { width: 88vw; }
  .waystone.has-frame .ws-land { border-width: 18px; border-image-width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-land { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ---- the entrance sign, and the moment it breaks ----
   Each border carries its own boundary sign. Reaching it splits the board down
   the middle: the halves crack apart, twist off their post and drop out of
   frame, and the country behind is left standing open. The wax seal is the
   fallback for any border whose sign has not been painted yet. */
.ws-sign { width: min(40vw, 620px); aspect-ratio: 3 / 2; }
.ws-sign img { object-fit: contain;
  filter: drop-shadow(0 16px 30px rgba(14, 8, 3, .8)); }
.ws-sign .ws-l { clip-path: polygon(0 0, 52% 0, 47% 100%, 0 100%); }
.ws-sign .ws-r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 47% 100%); }
.waystone.open .ws-sign .ws-l { transform: translate(-46%, 26%) rotate(-24deg); opacity: 0; }
.waystone.open .ws-sign .ws-r { transform: translate(46%, 30%) rotate(21deg); opacity: 0; }
.ws-sign img { transition: transform 1.5s cubic-bezier(.45, .02, .35, 1),
  opacity 1.3s ease .25s; }
/* the split itself: a hairline of light down the break, gone once it is open */
.ws-crack { position: absolute; left: 49.5%; top: 4%; bottom: 4%; width: 3px; z-index: 2;
  transform: translateX(-50%) scaleY(0); transform-origin: 50% 0;
  background: linear-gradient(180deg, transparent, rgba(255, 240, 200, .95) 12%,
    rgba(255, 224, 150, 1) 50%, rgba(255, 240, 200, .95) 88%, transparent);
  box-shadow: 0 0 22px 6px rgba(255, 214, 140, .55); opacity: 0; }
.waystone.open .ws-crack { animation: ws-split 1.5s cubic-bezier(.3, .05, .2, 1) forwards; }
@keyframes ws-split {
  0% { transform: translateX(-50%) scaleY(0); opacity: 0; }
  22% { transform: translateX(-50%) scaleY(1); opacity: 1; }
  55% { opacity: .9; }
  100% { transform: translateX(-50%) scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ws-crack { display: none; } }

/* ---- the site writes each region onto its own board ----
   The boards were painted blank for exactly this. Every half holds the whole
   sign and the whole name and is then clipped, so the lettering tears down
   the middle with the wood when the border breaks. Writing areas and ink
   colour are measured off each painting. */
.ws-half { position: absolute; inset: 0; }
.ws-half img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; }
.ws-word { position: absolute; display: flex; align-items: center;
  justify-content: center; text-align: center; line-height: 1.02;
  font-family: "Uncial Antiqua", "Almendra", serif;
  font-size: clamp(19px, 3.1vw, 58px); letter-spacing: .01em;
  pointer-events: none; }
.ws-sign .ws-l { clip-path: polygon(0 0, 52% 0, 47% 100%, 0 100%); }
.ws-sign .ws-r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 47% 100%); }
.ws-half { transition: transform 1.5s cubic-bezier(.45, .02, .35, 1), opacity 1.3s ease .25s; }
.waystone.open .ws-sign .ws-l { transform: translate(-46%, 26%) rotate(-24deg); opacity: 0; }
.waystone.open .ws-sign .ws-r { transform: translate(46%, 30%) rotate(21deg); opacity: 0; }
/* dark boards take pale lettering, light boards take burnt ink */
.ws-word { color: #2a1a0e; text-shadow: 0 1px 0 rgba(255, 250, 235, .35),
  0 -1px 1px rgba(0, 0, 0, .35); }
.waystone[data-ink="light"] .ws-word { color: #f0dfae;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 18px rgba(240, 223, 174, .3); }
.waystone[data-r="dragon_coast"] .ws-word { left: 16%; top: 32%; width: 64%; height: 32%; }
.waystone[data-r="fae_wood"] .ws-word { left: 26%; top: 24%; width: 50%; height: 32%; }
.waystone[data-r="crown_city"] .ws-word { left: 14%; top: 20%; width: 72%; height: 36%; }
.waystone[data-r="wizards_spire"] .ws-word { left: 16%; top: 16%; width: 68%; height: 27%; }
.waystone[data-r="underhalls"] .ws-word { left: 22%; top: 32%; width: 56%; height: 36%; }
.waystone[data-r="sky_isles"] .ws-word { left: 20%; top: 40%; width: 59%; height: 28%; }
.waystone[data-r="northern_edge"] .ws-word { left: 18%; top: 26%; width: 60%; height: 30%; }
.waystone[data-r="crossroads_tavern"] .ws-word { left: 33%; top: 37%; width: 42%; height: 32%; }
.waystone[data-r="pantheon"] .ws-word { left: 20%; top: 32%; width: 60%; height: 30%; }
.waystone.has-land .ws-titles { opacity: 0; transition: opacity .9s ease .55s; }
.waystone.open.has-land .ws-titles { opacity: 1; }

/* the quill: wet ink from the cursor, drying into the vellum */
.rl-ink { position: absolute; z-index: 6; pointer-events: none; }
.ink-stroke { width: var(--qw, 22px); height: 0;
  border-top: 2px solid rgba(74, 48, 22, .55);
  transform: translate(-50%, -50%) rotate(var(--qa, 0deg));
  animation: ink-dry 1.7s ease-out forwards; }
.ink-blot { width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(58, 36, 16, .6), rgba(74, 48, 22, .35) 70%, transparent);
  transform: translate(-50%, -50%);
  animation: ink-dry 1.9s ease-out forwards; }
@keyframes ink-dry { 0% { opacity: 0; } 10% { opacity: 1; }
  60% { opacity: .5; } 100% { opacity: 0; filter: blur(1px); } }
@media (prefers-reduced-motion: reduce) { .rl-ink { display: none; } }