/* Project Teleran: game page. Lantern gold on storm night, in the game's own fonts (Client/resources/ui/fonts). */

/* Cinzel 700 is declared in site.css for the home page's card. */
@font-face { font-family: "Cinzel"; src: url("../assets/fonts/cinzel-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("../assets/fonts/alegreya-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("../assets/fonts/alegreya-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

.tel {
  --void: #07080e;
  --ink: #0d0f18;
  --panel: #141621;
  --panel-2: #1b1d2a;
  --line: rgba(242, 196, 106, .14);
  --line-2: rgba(242, 196, 106, .3);
  --text: #f1e9d8;
  --muted: #b7ad98;
  --faint: #7f7867;
  --gold: #f2c46a;
  --gold-hi: #ffe7ae;
  --ember: #ff8a3d;
  --blood: #e0483e;
  --moss: #9bd36f;
  --water: #66c6cc;
  --parchment: #ecdfbf;
  --ink-brown: #3b2a17;
  --ice: var(--gold);
  --display-weight: 600;
  --body: var(--book);
  --label-font: 600 14px/1 var(--display);
  --label-track: .28em;
  --btn-font: 700 14px/1 var(--display);
  --btn-case: uppercase;
  --btn-track: .14em;
  --btn-radius: 0;
  --btn-clip: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --nav-font: 600 12.5px/1 var(--display);
  --nav-track: .2em;
  --frost: var(--gold-hi);
  --violet: #9a83ff;
  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --book: "Alegreya", Georgia, "Times New Roman", serif;
  background: var(--void);
  font-size: clamp(17px, .35vw + 15.5px, 20px);
}
.tel ::selection { background: var(--gold); color: var(--void); }
.tel h1, .tel h2, .tel h3 { letter-spacing: .01em; }
.tel .h-l { font-size: clamp(30px, 4.8vw, 64px); line-height: 1.04; }
.tel .lede { font-size: clamp(18px, 1vw + 13px, 23px); max-width: 44ch; }
.tel .eyebrow, .tel .section__num { font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .28em; }
.tel .section__num { color: var(--gold); }
.tel .btn { --bg: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #c98b37); --fg: #1d1206; background: var(--bg); font-family: var(--display); font-weight: 700; letter-spacing: .14em; box-shadow: 0 0 34px rgba(242, 180, 80, .3); }
.tel .btn--ghost { --bg: rgba(7, 8, 14, .55); --fg: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tel .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--gold), 0 0 26px rgba(242, 196, 106, .25); }
.tel .back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; min-height: 44px; font: 600 13px/1 var(--display); letter-spacing: .22em; color: var(--muted); text-decoration: none; transition: color .2s, gap .3s var(--ease); }
.tel .back:hover { color: var(--gold); gap: 12px; }

/* ---------- Hero: the storm over the Sleeping Stag ---------- */
.th { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--nav-h) + 40px) 0 clamp(64px, 9vh, 110px); overflow: hidden; isolation: isolate; background: var(--void); view-transition-name: tel-art; }
.th__scene { position: absolute; inset: -4%; z-index: -3; animation: drift 46s ease-in-out infinite alternate; }
.th__scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; }
.th__flash { opacity: 0; }
@keyframes drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-2.5%, -1.5%); } }
.th__rain { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
.th__bolt { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(80% 70% at 70% 10%, rgba(220, 230, 255, .55), rgba(180, 200, 255, .12) 60%, transparent); opacity: 0; mix-blend-mode: screen; }
.th::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 8, 14, .92) 0%, rgba(7, 8, 14, .6) 34%, transparent 62%),
    linear-gradient(180deg, rgba(7, 8, 14, .7) 0%, transparent 20%, transparent 55%, rgba(7, 8, 14, .85) 85%, var(--void) 100%);
}
.th__inner { width: 100%; }
.th__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 16px; }
.stamp { display: inline-block; padding: 7px 12px 6px; font: 700 12px/1 var(--display); letter-spacing: .3em; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 3px rgba(7, 8, 14, .8), inset 0 0 0 4px rgba(242, 196, 106, .45); transform: rotate(-3deg); background: rgba(7, 8, 14, .5); }
.th__genre { font: italic 400 clamp(18px, 1.4vw, 22px)/1.2 var(--book); color: var(--muted); }

.tel-logo { margin: 0; font-family: var(--display); line-height: .9; }
.tel-logo__pre { display: block; font-size: clamp(18px, 2.4vw, 32px); font-weight: 600; letter-spacing: .5em; color: var(--text); margin: 0 0 .3em .1em; }
.tel-logo__name {
  display: block; font-size: clamp(56px, 12.5vw, 184px); font-weight: 700; letter-spacing: .02em;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%) -200% 0 / 250% 100% no-repeat, linear-gradient(180deg, #fff4d2 8%, var(--gold) 52%, #b06f27 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(20, 10, 0, .6)) drop-shadow(0 0 34px rgba(242, 170, 70, .35));
  /* Risen on the word itself: Chrome drops clipped-gradient text inside an animated child. */
  opacity: 0;
  animation: nameRise 1.2s var(--ease) calc(.3s + var(--boot, 0s)) forwards, sheenGold 7s 1.8s var(--ease) infinite;
}
@keyframes nameRise { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }
@keyframes sheenGold { 0% { background-position: -200% 0, 0 0; } 30%, 100% { background-position: 250% 0, 0 0; } }
.tel-logo .rise { display: inline-block; opacity: 0; transform: translateY(.3em); filter: blur(10px); animation: telRise 1.2s var(--ease) forwards; animation-delay: calc(var(--i, 0) * .14s + .15s + var(--boot, 0s)); }
@keyframes telRise { to { opacity: 1; transform: none; filter: none; } }

.th__lede { margin: 22px 0 0; max-width: 38ch; font-size: clamp(18px, 1vw + 13px, 23px); color: #e2d9c4; text-shadow: 0 2px 16px var(--void), 0 0 4px var(--void); }
.tel .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.tel .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font: 600 11px/1 var(--display); letter-spacing: .2em; color: var(--muted); background: rgba(7, 8, 14, .66); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tel .chip--live { color: var(--gold); }
.tel .chip--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 1.6s ease-in-out infinite; }
.th__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- Marquee ---------- */
.tel .marquee { background: #0b0c14; border-color: var(--line); }
.tel .marquee__track span { font-family: var(--display); letter-spacing: .26em; }
.tel .marquee__track span::after { background: var(--gold); box-shadow: 0 0 10px var(--gold); }

/* ---------- Waking: the journal page ---------- */
.wake { display: grid; grid-template-columns: 1fr minmax(0, 470px); gap: clamp(36px, 6vw, 96px); align-items: center; }
.wake__copy p { color: var(--muted); max-width: 46ch; }
.wake__copy p:first-of-type { margin-top: 26px; }
.wake__big { font: 600 clamp(32px, 5.2vw, 70px)/1.02 var(--display); }
.wake__big em { font-style: normal; color: var(--gold); text-shadow: 0 0 30px rgba(242, 196, 106, .35); }

/* The torn parchment is a layer behind, so the clip doesn't cut off the seal. */
.journal { position: relative; isolation: isolate; padding: 34px 34px 30px; color: var(--ink-brown); transform: rotate(1.6deg); filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .55)); }
.journal::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 250, 230, .7), transparent 60%),
    radial-gradient(90% 80% at 80% 90%, rgba(150, 100, 40, .25), transparent 70%),
    var(--parchment);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 20, .35), inset 0 0 70px rgba(120, 72, 22, .45);
  clip-path: polygon(0 1%, 4% 0, 18% .8%, 33% 0, 51% .9%, 70% .2%, 86% 1%, 100% 0, 99.4% 18%, 100% 41%, 99.2% 63%, 100% 86%, 99.5% 100%, 80% 99.2%, 61% 100%, 43% 99.1%, 22% 100%, 6% 99.3%, 0 100%, .7% 77%, 0 52%, .8% 30%);
}
.journal__kind { font: 700 12px/1 var(--display); letter-spacing: .32em; color: #8a5a1d; }
.journal h3 { margin: 8px 0 16px; font: 700 clamp(28px, 3vw, 38px)/1 var(--display); color: #2b1c0b; }
.journal blockquote { margin: 0 0 22px; padding-left: 14px; border-left: 2px solid rgba(138, 90, 29, .6); font: italic 400 clamp(18px, 1.3vw, 21px)/1.4 var(--book); color: #4a3520; }
.journal__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.journal__steps li { position: relative; padding-left: 34px; font-size: 18px; line-height: 1.3; }
.journal__steps li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; box-shadow: inset 0 0 0 1.5px #6b4a22; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.journal__steps li::after { content: ""; position: absolute; left: 4px; top: 3px; width: 13px; height: 7px; border-left: 3px solid #7a2c14; border-bottom: 3px solid #7a2c14; transform: rotate(-45deg) scale(0); transform-origin: 30% 70%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.journal.is-in li::after { transform: rotate(-45deg) scale(1); }
.journal.is-in li:nth-child(1)::after { transition-delay: 1s; }
.journal.is-in li:nth-child(2)::after { transition-delay: 1.6s; }
.journal.is-in li:nth-child(3)::after { transition-delay: 2.2s; }
.journal footer { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 14px; border-top: 1px dashed rgba(107, 74, 34, .5); font: 600 12px/1 var(--display); letter-spacing: .2em; color: #8a5a1d; }
.seal { position: absolute; right: -18px; top: -22px; width: 78px; height: 78px; display: grid; place-items: center; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; background: radial-gradient(circle at 35% 30%, #e0574a, #a3231a 55%, #6d130d); box-shadow: 0 6px 14px rgba(0, 0, 0, .45), inset 0 0 0 6px rgba(0, 0, 0, .12), inset 0 0 0 9px rgba(255, 160, 140, .15); font: 700 30px/1 var(--display); color: rgba(60, 8, 4, .75); text-shadow: 0 1px 0 rgba(255, 170, 150, .35); transform: rotate(-12deg); }
@media (max-width: 900px) { .wake { grid-template-columns: 1fr; } .journal { max-width: 500px; } }

/* ---------- Every hour: one plaza, sunrise to storm ---------- */
.hours { position: relative; }
.hours__view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; cursor: ew-resize; touch-action: pan-y; box-shadow: 0 0 0 1px var(--line-2), 0 40px 90px rgba(0, 0, 0, .6); user-select: none; -webkit-user-select: none; }
.hours__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.hours__view img.is-base { opacity: 1; }
.hours__view::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(0, 0, 0, .55); }
.hours__badge { position: absolute; left: 18px; top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; font: 700 12px/1 var(--display); letter-spacing: .26em; color: var(--gold-hi); background: rgba(7, 8, 14, .7); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hours__badge i { width: 10px; height: 10px; border-radius: 50%; background: var(--sky, var(--gold)); box-shadow: 0 0 12px var(--sky, var(--gold)); }
.hours__hint { position: absolute; right: 18px; bottom: 16px; z-index: 2; font: italic 400 16px/1 var(--book); color: rgba(241, 233, 216, .8); text-shadow: 0 1px 8px #000; pointer-events: none; transition: opacity .5s; }
.hours.is-touched .hours__hint { opacity: 0; }
.hours__dial { margin-top: 26px; }
.hours__range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
}
.hours__range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #f4a86a, #8ec8ff 25%, #ff7a3d 50%, #233064 75%, #4b5468); }
.hours__range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #f4a86a, #8ec8ff 25%, #ff7a3d 50%, #233064 75%, #4b5468); }
.hours__range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6d8, var(--gold) 60%, #b8782c); box-shadow: 0 0 0 4px rgba(7, 8, 14, .9), 0 0 24px rgba(242, 196, 106, .7); }
.hours__range::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6d8, var(--gold) 60%, #b8782c); box-shadow: 0 0 0 4px rgba(7, 8, 14, .9), 0 0 24px rgba(242, 196, 106, .7); }
.hours__range:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.hours__marks { display: grid; grid-template-columns: repeat(5, 1fr); margin: 6px 0 0; padding: 0; list-style: none; }
.hours__marks li { text-align: center; }
.hours__marks li:first-child { text-align: left; } .hours__marks li:last-child { text-align: right; }
.hours__marks button { min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; font: 600 12px/1.2 var(--display); letter-spacing: .18em; color: var(--faint); transition: color .3s; }
.hours__marks button:hover, .hours__marks button[aria-pressed="true"] { color: var(--gold); }
@media (max-width: 520px) { .hours__marks button { font-size: 10px; letter-spacing: .08em; } .hours__hint { display: none; } }

/* ---------- Together: solo, co-op, dedicated ---------- */
.together { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.modes { display: grid; gap: 12px; margin-top: 30px; }
.mode { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 20px 22px; background: linear-gradient(120deg, var(--panel), rgba(20, 22, 33, .3)); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .4s, transform .5s var(--ease); }
.mode:hover { box-shadow: inset 0 0 0 1px var(--line-2), 0 0 40px rgba(242, 196, 106, .08); transform: translateX(6px); }
.mode svg { width: 44px; height: 44px; color: var(--gold); filter: drop-shadow(0 0 10px rgba(242, 196, 106, .4)); }
.mode h3 { font: 700 18px/1.1 var(--display); letter-spacing: .08em; margin-bottom: 6px; }
.mode p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.45; }
.mode--server { box-shadow: inset 0 0 0 1px var(--line-2), 0 0 50px rgba(242, 196, 106, .07); }
.mode--server::after { content: "Host it yourself"; position: absolute; top: -9px; right: 16px; padding: 4px 8px; font: 700 10px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: #1d1206; background: var(--gold); }

.net { position: relative; aspect-ratio: 1; width: min(100%, 520px); justify-self: center; }
.net svg { width: 100%; height: 100%; overflow: visible; }
.net__ring { fill: none; stroke: var(--line); stroke-dasharray: 2 8; }
.net__ring--spin { transform-origin: 250px 250px; animation: spin 80s linear infinite; }
.net__link { stroke: rgba(242, 196, 106, .28); stroke-width: 1.5; }
.net__pulse { stroke: var(--gold-hi); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 300; filter: drop-shadow(0 0 6px var(--gold)); animation: packet 2.8s linear infinite; animation-delay: var(--d, 0s); }
.net__pulse--back { animation-direction: reverse; stroke: var(--water); filter: drop-shadow(0 0 6px var(--water)); }
@keyframes packet { from { stroke-dashoffset: 310; } to { stroke-dashoffset: 0; } }
.net__core { fill: #12131d; stroke: var(--gold); stroke-width: 2; }
.net__core-glow { fill: rgba(242, 196, 106, .14); animation: corePulse 2.4s ease-in-out infinite; transform-origin: 250px 250px; }
@keyframes corePulse { 50% { transform: scale(1.18); opacity: .5; } }
.net__node circle { fill: #12131d; stroke: var(--line-2); stroke-width: 1.5; }
.net__node path { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.net__node text, .net__label { font: 700 13px var(--display); letter-spacing: .18em; fill: var(--muted); text-anchor: middle; }
.net__label { fill: var(--gold); font-size: 15px; }
.net__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 18px; background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.net__facts div { padding: 16px 18px; background: var(--void); }
.net__facts b { display: block; font: 700 clamp(24px, 2.6vw, 34px)/1 var(--display); color: var(--gold-hi); text-shadow: 0 0 22px rgba(242, 196, 106, .35); }
.net__facts span { display: block; margin-top: 6px; font-size: 15px; color: var(--muted); }
@media (max-width: 900px) { .together { grid-template-columns: 1fr; } .net { order: -1; width: min(100%, 420px); } }

/* ---------- Systems: the RPG ---------- */
.systems { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.sys { --c: var(--gold); position: relative; padding: 26px 24px 26px; background: linear-gradient(165deg, var(--panel-2), var(--ink)); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), box-shadow .4s; }
.sys::before { content: ""; position: absolute; inset: auto -30% -70% -30%; height: 120%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent); opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .8s var(--ease); }
.sys:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.sys:hover::before { opacity: 1; transform: none; }
.sys svg { width: 40px; height: 40px; margin-bottom: 16px; color: var(--c); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 60%, transparent)); }
.sys h3 { font: 700 18px/1.15 var(--display); letter-spacing: .06em; margin-bottom: 8px; }
.sys p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; }
@media (min-width: 1100px) { .systems { grid-template-columns: repeat(4, 1fr); } }
.sys--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px 40px; align-items: center; }
.profs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.profs li { padding: 12px 14px; background: rgba(7, 8, 14, .6); box-shadow: inset 2px 0 0 var(--pc, var(--gold)); }
.profs b { display: block; font: 700 13px/1.2 var(--display); letter-spacing: .14em; color: var(--pc, var(--gold)); }
.profs span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.35; color: var(--muted); }
@media (max-width: 760px) { .sys--wide { grid-template-columns: 1fr; } }

/* The d20 in the section head. */
.roll { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; max-width: 420px; }
.roll__die { position: relative; width: 96px; height: 96px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--gold); transition: transform .2s; }
.roll__die:hover { transform: scale(1.05) rotate(-4deg); }
.roll__die svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 16px rgba(242, 196, 106, .45)); }
.roll__die path { fill: rgba(242, 196, 106, .1); stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.roll__die .face { fill: rgba(242, 196, 106, .2); }
.roll__die text { font: 700 26px var(--display); fill: var(--gold-hi); text-anchor: middle; dominant-baseline: central; }
.roll__die.is-rolling svg { animation: tumble .6s var(--ease); }
@keyframes tumble { 0% { transform: rotate(0) scale(1); } 40% { transform: rotate(200deg) scale(.86); } 100% { transform: rotate(360deg) scale(1); } }
.roll__out { margin: 0; font-size: 17px; line-height: 1.4; color: var(--muted); }
.roll__out b { display: block; font: 700 15px/1.2 var(--display); letter-spacing: .14em; color: var(--text); text-transform: uppercase; margin-bottom: 4px; }
.roll__out b.crit { color: var(--gold-hi); text-shadow: 0 0 18px var(--gold); }
.roll__out b.glance { color: var(--water); }

/* ---------- The first journey ---------- */
.road { position: relative; list-style: none; margin: 0; padding: 0; --p: 0; }
.road::before, .road::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line); }
.road::after { bottom: auto; height: calc(var(--p) * 100%); background: linear-gradient(var(--gold), var(--ember)); box-shadow: 0 0 14px var(--gold); }
.stop { position: relative; width: 50%; padding: 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 44px) 0; text-align: right; }
.stop:nth-child(even) { margin-left: 50%; padding: 0 0 clamp(28px, 4vw, 44px) clamp(28px, 4vw, 56px); text-align: left; }
.stop__lv { position: absolute; top: -4px; right: -24px; z-index: 1; width: 48px; height: 54px; display: grid; place-items: center; padding-bottom: 6px; font: 700 15px/1 var(--display); color: #1d1206; background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #b8782c); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); filter: drop-shadow(0 0 12px rgba(242, 196, 106, .4)); }
.stop:nth-child(even) .stop__lv { right: auto; left: -24px; }
.stop__lv small { display: block; font-size: 8px; letter-spacing: .2em; margin-bottom: 2px; }
.stop h3 { font: 700 clamp(18px, 1.7vw, 22px)/1.2 var(--display); letter-spacing: .04em; margin-bottom: 6px; }
.stop p { margin: 0 0 0 auto; max-width: 40ch; color: var(--muted); font-size: 17px; line-height: 1.45; }
.stop:nth-child(even) p { margin: 0; }
.stop__tag { display: inline-block; margin-top: 10px; padding: 5px 9px; font: 700 10px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--tc, var(--gold)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc, var(--gold)) 50%, transparent); }
.stop--memory .stop__lv { background: linear-gradient(180deg, #e8f7ff, var(--water) 60%, #2f8c92); filter: drop-shadow(0 0 14px rgba(102, 198, 204, .6)); }
.stop--memory { --tc: var(--water); }
.stop--boss .stop__lv { background: linear-gradient(180deg, #ffd0b8, var(--blood) 60%, #8d1d17); filter: drop-shadow(0 0 16px rgba(224, 72, 62, .6)); color: #fff2ea; }
.stop--boss { --tc: var(--blood); }
.stop--boss h3 { color: #ffb3a6; }
.road__end { text-align: center; padding-top: 10px; font: italic 400 19px/1.4 var(--book); color: var(--muted); }
@media (max-width: 760px) {
  .road::before, .road::after { left: 24px; }
  .stop, .stop:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 30px 70px; text-align: left; }
  .stop__lv, .stop:nth-child(even) .stop__lv { left: 0; right: auto; }
  .stop p { margin: 0; }
}

/* ---------- Gallery frames ---------- */
.tel .shot button { position: relative; }
.frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px rgba(0, 0, 0, .55); transition: transform .6s var(--ease), box-shadow .5s; }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.frame::after { content: ""; position: absolute; inset: 8px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(242, 196, 106, .25); }
.shot:hover .frame, .shot button:focus-visible .frame { transform: translateY(-8px); box-shadow: 0 0 0 1px var(--gold), 0 40px 70px rgba(0, 0, 0, .6), 0 0 50px rgba(242, 196, 106, .18); }
.shot:hover .frame img { transform: scale(1.05); }
.tel .shot figcaption b { font-family: var(--display); font-weight: 700; color: var(--text); }
.tel .shot figcaption span { font-size: 16px; }
.tel .lightbox p { font: 700 14px/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; }
.tel .lightbox__close { font-family: var(--book); }

/* ---------- Ledger (specs) ---------- */
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.ledger { margin: 0; padding: 10px 26px; background: linear-gradient(160deg, var(--panel), var(--ink)); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 0 0 5px var(--void), inset 0 0 0 6px var(--line); }
.ledger div { display: grid; grid-template-columns: 12ch 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.ledger div:last-child { border: 0; }
.ledger dt { font: 700 12px/1.6 var(--display); letter-spacing: .2em; color: var(--gold); }
.ledger dd { margin: 0; font-size: 18px; color: var(--text); }
.ledger dd em { color: var(--gold-hi); }
@media (max-width: 860px) { .specs { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .ledger div { grid-template-columns: 1fr; gap: 2px; } }

.tel .cta { background: linear-gradient(120deg, #1d1408, #0d0f18 50%, #0a1a1c); }
.tel .cta::before { background: repeating-linear-gradient(90deg, rgba(242, 196, 106, .06) 0 1px, transparent 1px 56px), repeating-linear-gradient(0deg, rgba(242, 196, 106, .05) 0 1px, transparent 1px 56px); }
.tel .footer__big:hover span { color: rgba(242, 196, 106, .06); -webkit-text-stroke-color: rgba(242, 196, 106, .4); }

@media (prefers-reduced-motion: reduce) {
  .tel-logo .rise, .tel-logo__name { opacity: 1; transform: none; filter: none; }
  .journal li::after { transform: rotate(-45deg) scale(1); }
}