/* ═══════════════════════════════════════════════════════════
   WORLD ENGINE: the running layers (Built in Layers, Phase One: The Sky, Phase Two: The Climate)
   Brand guidelines Edition 1.0: shared.css tokens only, Veilstone only.
   Buttons on dark grounds: primary is a Parchment fill with Hearth caps; secondary is a
   Parchment outline with Parchment caps; hover turns both Gold with Hearth text.
   ═══════════════════════════════════════════════════════════ */

/* ── Shared pieces ── */
.we-eyebrow {
    font-family: 'Veilstone Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.section-dark .we-eyebrow { color: var(--gold); }
.section-parchment .we-eyebrow { color: var(--wood-light); }

.we-live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: none;
    background: var(--gold-light);
    animation: we-pulse 2.4s ease-out infinite;
}
.section-parchment .we-eyebrow .we-live-dot { background: var(--wood-light); animation: none; }
@keyframes we-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-light) 55%, transparent); }
    70%  { box-shadow: 0 0 0 0.7rem color-mix(in srgb, var(--gold-light) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-light) 0%, transparent); }
}

.we-btn {
    font-family: 'Veilstone Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--parchment);
    background: transparent;
    border: 1px solid var(--parchment);
    padding: 0.6rem 1rem;
    min-height: 2.6rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.we-btn[aria-pressed="true"],
.we-btn[aria-selected="true"],
.we-btn.is-primary {
    background: var(--parchment);
    color: var(--bg-dark);
}
.we-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg-dark);
}
.we-btn:focus-visible,
.we-range:focus-visible,
.we-tab:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

.we-group { display: inline-flex; flex-wrap: wrap; }
.we-group .we-btn + .we-btn { border-left-width: 0; }

.we-range { flex: 1 1 12rem; min-width: 0; accent-color: var(--gold); height: 2.6rem; margin: 0; }

/* A dark live panel, the same family as the site's guide visuals (.vg) */
.we-panel {
    position: relative;
    background: var(--bg-dark);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    color: var(--parchment);
    padding: 1.5rem;
}
.we-panel::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid color-mix(in srgb, var(--gold) 14%, transparent);
    pointer-events: none;
}
.section-parchment .we-panel {
    box-shadow: 0 16px 36px color-mix(in srgb, var(--text-dark) 35%, transparent),
                0 2px 6px color-mix(in srgb, var(--text-dark) 25%, transparent);
}
.we-panel > * { position: relative; }

.we-panel-title {
    font-family: 'Veilstone Sans', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--parchment);
    margin: 0 0 0.25rem;
}
.we-panel-kicker {
    font-family: 'Veilstone Sans', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 0.35rem;
}
.we-panel-note {
    font-family: 'Veilstone Text', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--parchment-dark);
    margin: 1rem 0 0;
    min-height: 1.6em;
}

/* Readout lists (label / value) */
.we-readout { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; }
.we-readout dt {
    font-family: 'Veilstone Sans', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--parchment-dark);
    align-self: center;
}
.we-readout dd {
    margin: 0;
    font-family: 'Veilstone Text', Georgia, serif;
    font-size: 1.1rem;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

.we-fine {
    font-family: 'Veilstone Sans', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    margin: 1.25rem 0 0;
    line-height: 1.6;
}
.section-dark .we-fine { color: var(--parchment-dark); }
.section-parchment .we-fine { color: var(--wood-light); }

/* ═══════════ BUILT IN LAYERS ═══════════ */
.we-layers {
    max-width: 720px;
    margin: 3.5rem auto 0;
    padding-top: 3rem;
    border-top: 1px solid color-mix(in srgb, var(--border-ornate) 35%, transparent);
}
.we-layers h3 {
    font-family: 'Veilstone Sans', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--parchment);
    text-align: center;
    margin: 0 0 1rem;
}
.we-layers > p {
    font-family: 'Veilstone Text', Georgia, serif;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--parchment);
    margin: 0 0 1.75rem;
}
/* The stack is drawn sky-down: the sky sits on top and constrains every layer below it. Reads I to V on screen and for screen readers. */
.we-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.we-layer {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--border-ornate) 45%, transparent);
    background: color-mix(in srgb, var(--parchment) 3%, transparent);
    color: inherit;
    text-decoration: none;
}
.we-layer-num { font-family: 'Veilstone Text', Georgia, serif; font-size: 1.3rem; color: var(--border-ornate); text-align: center; }
.we-layer strong { display: block; font-family: 'Veilstone Sans', sans-serif; font-size: 1.1rem; color: var(--parchment); }
.we-layer-desc { display: block; font-family: 'Veilstone Text', Georgia, serif; font-size: 1.02rem; line-height: 1.5; color: var(--parchment-dark); }
.we-layer-state {
    font-family: 'Veilstone Sans', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--parchment-dark);
}
a.we-layer.is-live { border-color: color-mix(in srgb, var(--gold) 70%, transparent); background: color-mix(in srgb, var(--gold) 7%, transparent); transition: background 0.2s ease; }
a.we-layer.is-live:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); }
a.we-layer.is-live .we-layer-num { color: var(--gold); }
a.we-layer.is-live .we-layer-state { color: var(--gold-light); }
.we-layer.is-sealed strong { color: var(--parchment-dark); }
.we-seal { width: 0.85rem; height: 0.85rem; border-radius: 50%; flex: none; background: var(--seal-crimson); box-shadow: inset 0 0 0 1px var(--border-ornate); }

/* ═══════════ PHASE ONE: THE SKY ═══════════ */
#phase-one, #phase-two { scroll-margin-top: 80px; }
.we-phase-intro { max-width: 720px; margin: 0 auto; }
.we-phase-intro p { font-family: 'Veilstone Text', Georgia, serif; font-size: 1.125rem; line-height: 1.7; margin: 0 0 1.4rem; }
.section-parchment .we-phase-intro p { color: var(--text-dark); }
.section-dark .we-phase-intro p { color: var(--parchment); }
.we-sky-cards { margin: 2rem 0 3rem; }

.sky-panel { max-width: 1000px; margin: 0 auto; }
.sky-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.sky-places { margin-bottom: 1rem; }
.sky-places .we-btn { padding: 0.55rem 0.85rem; }
.sky-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.sky-chart { width: 100%; height: auto; display: block; }
.sky-chart .sky-ground { fill: var(--bg-frame); }
.sky-chart .sky-horizon { stroke: var(--border-ornate); stroke-width: 1.5; }
.sky-chart .sky-ref { fill: none; stroke: var(--border-ornate); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: 0.8; }
.sky-chart .sky-path-night { fill: none; stroke: var(--parchment-dark); stroke-width: 1.5; stroke-dasharray: 2 6; opacity: 0.5; }
.sky-chart .sky-path-day { fill: none; stroke: var(--gold-light); stroke-width: 3; stroke-linecap: round; }
.sky-chart .sky-sun { fill: var(--gold-light); }
.sky-chart .sky-sun-glow { fill: var(--gold); opacity: 0.25; }
.sky-chart .sky-sun.is-down { fill: var(--border-ornate); }
.sky-chart text { font-family: 'Veilstone Sans', sans-serif; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--parchment-dark); }
.sky-chart .sky-ref-label { fill: var(--border-ornate); letter-spacing: 0.06em; }
.sky-season { font-family: 'Veilstone Text', Georgia, serif; font-style: italic; font-size: 1.35rem; color: var(--text-light); }
.sky-day { font-family: 'Veilstone Sans', sans-serif; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.sky-lat { font-family: 'Veilstone Sans', sans-serif; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-left: 0.35rem; }
.sky-bar { height: 0.6rem; border: 1px solid var(--border-ornate); margin: 1rem 0 0.4rem; background: var(--bg-frame); overflow: hidden; }
.sky-bar i { display: block; height: 100%; background: var(--gold); width: 0; transition: width 0.15s linear; }
.sky-bar-label { font-family: 'Veilstone Sans', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--parchment-dark); }
.sky-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.25rem; }

/* The Three Sisters */
.sisters-panel { max-width: 1000px; margin: 2.5rem auto 0; }
.sisters-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; align-items: center; }
.sisters-chart { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
.sisters-chart .orbit { fill: none; stroke: var(--border-ornate); stroke-width: 1; opacity: 0.8; }
.sisters-chart .world { fill: var(--parchment); }
.sisters-chart .moon { fill: var(--text-light); }
.sisters-chart .moon-glow { fill: var(--parchment); opacity: 0.18; }
.sisters-chart text { font-family: 'Veilstone Sans', sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--gold); }
.sisters-list { list-style: none; margin: 0; padding: 0; }
.sisters-list li { padding: 0.85rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border-ornate) 40%, transparent); }
.sisters-list li:last-child { border-bottom: 0; }
.sisters-list strong { font-family: 'Veilstone Sans', sans-serif; font-size: 1.05rem; color: var(--parchment); }
.sisters-list .sis-period { font-family: 'Veilstone Sans', sans-serif; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-left: 0.5rem; }
.sisters-list p { font-family: 'Veilstone Text', Georgia, serif; font-size: 1.05rem; line-height: 1.55; color: var(--parchment-dark); margin: 0.25rem 0 0; }
.sisters-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.sisters-controls span { font-family: 'Veilstone Text', Georgia, serif; font-style: italic; color: var(--parchment-dark); font-size: 0.98rem; }

/* ═══════════ PHASE TWO: THE CLIMATE (The Turning Year) ═══════════ */
.ty { max-width: 1100px; margin: 2.5rem auto 0; }
.we-tabs { display: flex; justify-content: center; margin: 0 0 1.25rem; }
.we-tabs .we-btn { min-width: 11rem; }
.we-tabs .we-btn + .we-btn { border-left-width: 0; }

.ty-film-wrap, .ty-stage {
    position: relative;
    border: 1px solid var(--border-ornate);
    background: var(--bg-frame);
    padding: 0.5rem;
    box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--bg-dark) 70%, transparent);
}
.ty-film { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--bg-dark); }
.ty-canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; cursor: crosshair; touch-action: manipulation; }
.ty-hud {
    position: absolute;
    left: 1.25rem;
    top: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: color-mix(in srgb, var(--bg-dark) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-ornate) 60%, transparent);
    padding: 0.55rem 0.95rem 0.55rem 0.6rem;
    pointer-events: none;
}
.ty-dial { width: 4.2rem; height: 4.2rem; flex: none; }
.ty-dial .dial-ring { fill: none; stroke: var(--border-ornate); stroke-width: 1.5; }
.ty-dial .dial-tick { fill: var(--border-ornate); }
.ty-dial .dial-winter { fill: var(--text-light); }
.ty-dial .dial-summer { fill: var(--gold); }
.ty-dial .dial-dot { fill: var(--gold-light); stroke: var(--bg-dark); stroke-width: 1.5; }
.ty-season { font-family: 'Veilstone Text', Georgia, serif; font-size: 1.35rem; font-style: italic; color: var(--text-light); line-height: 1.15; min-width: 8.5rem; }
.ty-season small { display: block; font-family: 'Veilstone Sans', sans-serif; font-style: normal; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-top: 0.2rem; }

.ty-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.5rem; margin-top: 0.9rem; }
.ty-scale { display: flex; flex-direction: column; gap: 0.25rem; min-width: 15rem; flex: 0 1 22rem; }
.ty-scale-bar { height: 0.55rem; border: 1px solid var(--border-ornate); }
.ty-scale-ticks { display: flex; justify-content: space-between; font-family: 'Veilstone Sans', sans-serif; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--parchment-dark); font-variant-numeric: tabular-nums; }
.ty-key { display: inline-flex; align-items: center; gap: 0.45rem; font-family: 'Veilstone Sans', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--parchment-dark); }
.ty-key i { width: 0.9rem; height: 0.9rem; border: 1px solid var(--border-ornate); }
.ty-key .k-snow { background: var(--text-light); }
.ty-key .k-rain { background: var(--wood-dark); }

.ty-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.1rem; }
.ty-hint { font-family: 'Veilstone Text', Georgia, serif; font-style: italic; font-size: 1.02rem; color: var(--parchment-dark); text-align: center; margin: 0.9rem 0 0; }

.ty-places { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 1.5rem;
    background: color-mix(in srgb, var(--border-ornate) 40%, transparent); border: 1px solid color-mix(in srgb, var(--border-ornate) 40%, transparent); }
.ty-place { background: var(--bg-dark); padding: 1rem 1.15rem; min-width: 0; }
.ty-place h4 { font-family: 'Veilstone Sans', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--parchment); margin: 0 0 0.15rem; }
.ty-place .ty-lat { font-family: 'Veilstone Sans', sans-serif; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.ty-place .ty-type { font-family: 'Veilstone Text', Georgia, serif; font-style: italic; font-size: 0.98rem; line-height: 1.4; color: var(--parchment-dark); margin: 0.45rem 0 0; min-height: 2.8em; }
.ty-place .we-readout { margin-top: 0.6rem; }
.ty-place .we-readout dd { font-size: 1.05rem; }
.ty-place.is-pick { background: color-mix(in srgb, var(--gold) 8%, var(--bg-dark)); }
.ty-place.is-pick.is-empty .we-readout { display: none; }
.ty-place.is-pick.is-empty .ty-type { min-height: 0; }

@media (max-width: 900px) {
    .sky-body, .sisters-body { grid-template-columns: minmax(0, 1fr); }
    .ty-places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .ty-hud { position: static; margin-top: 0.5rem; }
    .we-panel { padding: 1.15rem; }
    .we-layer { grid-template-columns: 2rem minmax(0, 1fr); }
    .we-layer-state { grid-column: 2; }
}
@media (max-width: 600px) {
    .sky-chart text { font-size: 22px; }
    .sisters-chart text { font-size: 17px; }
}
@media (max-width: 480px) {
    .ty-places { grid-template-columns: minmax(0, 1fr); }
    .we-tabs .we-btn { min-width: 0; flex: 1; }
    .ty-place .ty-type { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .we-live-dot { animation: none; }
    .sky-bar i { transition: none; }
}

.ty-caption { font-family: 'Veilstone Text', Georgia, serif; font-style: italic; font-size: 1.02rem; color: var(--parchment-dark); text-align: center; margin: 0.9rem 0 0; }

/* ── The climate in pictures (Phase Two) ── */
.we-gallery { max-width: 1100px; margin: 4rem auto 0; padding-top: 3rem; border-top: 1px solid color-mix(in srgb, var(--border-ornate) 35%, transparent); }
.we-gallery h3 { font-family: 'Veilstone Sans', sans-serif; font-size: 1.375rem; font-weight: 700; color: var(--parchment); text-align: center; margin: 0 0 0.6rem; }
.we-gallery-lede { font-family: 'Veilstone Text', Georgia, serif; font-style: italic; font-size: 1.05rem; color: var(--parchment-dark); text-align: center; margin: 0 auto 2rem; max-width: 640px; }
.we-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2rem; }
.we-figure { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.we-figure-link { display: block; border: 1px solid var(--border-ornate); background: var(--parchment); padding: 0.4rem; aspect-ratio: 1000 / 688; max-width: 100%;
    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--bg-dark) 70%, transparent); transition: border-color 0.2s ease, transform 0.2s ease; cursor: zoom-in; }
.we-figure-link img { display: block; width: 100%; height: 100%; object-fit: contain; }
.we-figure-link:hover { border-color: var(--gold); transform: translateY(-3px); }
.we-figure-link:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.we-figure figcaption { margin-top: 1rem; }
.we-figure h4 { font-family: 'Veilstone Sans', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--parchment); margin: 0 0 0.35rem; }
.we-figure p { font-family: 'Veilstone Text', Georgia, serif; font-size: 1.05rem; line-height: 1.6; color: var(--parchment-dark); margin: 0; }
@media (max-width: 760px) {
    .we-gallery-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .we-figure-link, .we-figure-link:hover { transition: none; transform: none; }
}
/* Fallback viewer, only used where the site's own zoom viewer (pwa.js) isn't loaded */
.we-lightbox { position: fixed; inset: 0; z-index: 10001; background: color-mix(in srgb, var(--bg-dark) 96%, transparent); display: flex; align-items: center; justify-content: center; padding: 3.5rem 1rem 1rem; }
.we-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.we-lightbox .we-btn { position: absolute; top: calc(0.75rem + env(safe-area-inset-top, 0px)); right: 0.75rem; }

/* ═══════════ PHASE THREE: THE LAND ═══════════ */
#phase-three { scroll-margin-top: 80px; }
.ld { max-width: 1100px; margin: 2.5rem auto 0; padding: 1.25rem; }
.ld-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.ld-views .we-btn { padding: 0.55rem 0.85rem; }
.ld-stage { border: 1px solid var(--border-ornate); background: var(--bg-frame); padding: 0.5rem; }
.ld-canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; cursor: crosshair; touch-action: manipulation; }
.ld-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.25rem; margin-top: 0.9rem; min-height: 1.4rem; }
.ld-key { display: inline-flex; align-items: center; gap: 0.45rem; font-family: 'Veilstone Sans', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--parchment-dark); }
.ld-key i { width: 0.9rem; height: 0.9rem; border: 1px solid var(--border-ornate); flex: none; }
.ld-key i.ld-line { width: 1.6rem; height: 0.3rem; border: 0; }
.ld-key i.ld-dash { background: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 11px); }
.ld-key i.ld-dot { background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 8px); }
.ld-key-plain { text-transform: none; letter-spacing: 0.02em; font-family: 'Veilstone Text', Georgia, serif; font-style: italic; font-size: 0.98rem; }
.ld-scale { display: flex; flex-direction: column; gap: 0.25rem; min-width: 15rem; flex: 0 1 26rem; }
.ld-scale-bar { height: 0.55rem; border: 1px solid var(--border-ornate); }
.ld-scale-ticks { display: flex; justify-content: space-between; font-family: 'Veilstone Sans', sans-serif; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--parchment-dark); }
.ld-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1rem; margin-top: 1rem; }
.ld-controls[hidden], .ld-seasons[hidden], .ld-route[hidden] { display: none; }
.ld-route { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 0.75rem; margin-top: 1rem; }
.ld-route label { font-family: 'Veilstone Sans', sans-serif; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--parchment-dark); display: inline-flex; align-items: center; gap: 0.5rem; }
.ld-route select { font-family: 'Veilstone Text', Georgia, serif; font-size: 1.02rem; color: var(--parchment); background: var(--bg-frame); border: 1px solid var(--border-ornate); padding: 0.45rem 0.6rem; min-height: 2.6rem; max-width: 12rem; }
.ld-route select:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.ld-route-out { flex-basis: 100%; text-align: center; font-family: 'Veilstone Text', Georgia, serif; font-size: 1.1rem; color: var(--text-light); margin: 0.25rem 0 0; min-height: 1.6em; }
.ld-route-out strong { color: var(--gold-light); }
.ld-hint { font-family: 'Veilstone Text', Georgia, serif; font-style: italic; font-size: 1.02rem; color: var(--parchment-dark); text-align: center; margin: 0.9rem 0 0; min-height: 1.6em; }
.ld-place { margin-top: 1.25rem; padding: 1.1rem 1.25rem; background: color-mix(in srgb, var(--gold) 8%, var(--bg-dark)); border: 1px solid color-mix(in srgb, var(--border-ornate) 40%, transparent); }
.ld-place h4 { font-family: 'Veilstone Sans', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--parchment); margin: 0 0 0.2rem; }
.ld-place-type { font-family: 'Veilstone Text', Georgia, serif; font-style: italic; font-size: 1.02rem; line-height: 1.45; color: var(--parchment-dark); margin: 0; }
.ld-facts { margin-top: 0.85rem; grid-template-columns: 9.5rem 1fr; }
.ld-facts dt { align-self: start; padding-top: 0.2rem; }
.ld-facts dd { font-size: 1.02rem; line-height: 1.5; }
.ld-facts dd strong { color: var(--gold-light); font-weight: 400; }
.ld-place.is-empty .ld-facts { display: none; }
@media (max-width: 600px) {
    .ld { padding: 0.75rem; }
    .ld-bar { justify-content: center; }
    .ld-views { justify-content: center; }
    .ld-facts { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
    .ld-facts dd { margin-bottom: 0.5rem; }
}

/* Galleries and closing pieces on a parchment ground */
.section-parchment .we-gallery h3, .section-parchment .we-figure h4 { color: var(--text-dark); }
.section-parchment .we-gallery-lede, .section-parchment .we-figure p { color: var(--wood-light); }
.section-parchment .we-figure-link { box-shadow: 0 1rem 2rem color-mix(in srgb, var(--text-dark) 35%, transparent); }
.section-parchment .we-gallery { border-top-color: color-mix(in srgb, var(--wood-light) 35%, transparent); }