:root {
  color-scheme: light;
  --bg: #F6F1E9;
  --surface: #FFFDF9;
  --ink: #2A2522;
  --muted: #6B625B;
  --line: #E3D8CA;
  --terracotta: #B65A36;
  --slate: #50657A;
  --sage: #657D60;
  --sand: #9C7843;
  --accent: var(--terracotta);
  --font: "Times New Roman", Times, Georgia, serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1D1916; --surface: #27221E; --ink: #F2EBE2; --muted: #B3A79B; --line: #3B342E;
    --terracotta: #E0896A; --slate: #9AB0C4; --sage: #A6BF9F; --sand: #D8B983;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1D1916; --surface: #27221E; --ink: #F2EBE2; --muted: #B3A79B; --line: #3B342E;
  --terracotta: #E0896A; --slate: #9AB0C4; --sage: #A6BF9F; --sand: #D8B983;
}
:root[data-path="mind"], :root[data-path="home"][data-pick="mind"] { --accent: var(--slate); }
:root[data-path="movement"], :root[data-path="home"][data-pick="movement"] { --accent: var(--sage); }
:root[data-path="bahja"], :root[data-path="home"][data-pick="bahja"] { --accent: var(--sand); }

*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1.15rem; line-height: 1.55; transition: background-color .4s ease, color .4s ease; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cartoon placeholders (drawn in by script) */
.ph { position: relative; overflow: hidden; background: #F0DFC8; }
.ph > svg.cartoon { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 66px; }
.brand { font-weight: 700; font-size: 1.3rem; text-decoration: none; white-space: nowrap; }
.brand span { color: var(--accent); transition: color .4s ease; }
.nav { display: flex; gap: 2px; align-items: center; }
.nav a { text-decoration: none; color: var(--muted); font-size: 1.05rem; padding: 7px 12px; border-radius: 999px; transition: background-color .2s ease, color .2s ease; }
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.nav a[aria-current="page"] { color: var(--surface); background: var(--accent); }
.nav .hello { margin-left: 6px; color: var(--surface); background: var(--ink); }
.nav .hello:hover { color: var(--surface); background: var(--accent); }
.theme { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 5px 10px 5px 6px; cursor: pointer; font-size: .95rem; color: var(--muted); }
.theme .track { width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; transition: background-color .3s ease; }
.theme .knob { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .3s ease; }
.theme[aria-pressed="true"] .track { background: var(--accent); }
.theme[aria-pressed="true"] .knob { transform: translateX(14px); }
@media (max-width: 860px) { .nav .hello { display: none; } .theme .tlabel { display: none; } .theme { padding: 5px 6px; margin-left: 4px; } }
@media (max-width: 640px) { .nav a { padding: 6px 7px; font-size: .95rem; } .brand { font-size: 1.1rem; } }
@media (max-width: 420px) { .nav a { padding: 5px 5px; font-size: .88rem; } }

/* Views */
.view { display: none; }
.view.on { display: block; animation: viewIn .4s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view.on { animation: none; } }
section.block { padding-top: clamp(60px, 8vw, 100px); }
h1, h2, h3 { letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 3.8vw, 2.8rem); line-height: 1.1; margin: 0 0 8px; font-weight: 700; }
.lede { color: var(--muted); max-width: 60ch; margin: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }

/* Living field */
.field-box { position: relative; overflow: hidden; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); touch-action: pan-y; }
.field-box > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.field-hint { position: absolute; right: 18px; bottom: 14px; margin: 0; font-size: .95rem; color: var(--muted); z-index: 2; pointer-events: none; font-style: italic; }

/* Home hero */
.hero { margin-top: 20px; min-height: min(84vh, 760px); display: flex; align-items: center; }
.hero-fade { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 88%, transparent) 36%, color-mix(in srgb, var(--surface) 0%, transparent) 68%); }
.hero-copy { position: relative; z-index: 2; padding: clamp(28px, 5vw, 64px); max-width: 660px; }
.hero-copy h1 { font-size: clamp(3rem, 7vw, 5.6rem); line-height: .98; margin: 0 0 16px; letter-spacing: -0.02em; font-weight: 700; }
.hero-copy > p { margin: 0 0 28px; font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: var(--muted); max-width: 44ch; }
.ask { font-size: 1.35rem; margin: 0 0 12px; font-weight: 700; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 9px 18px; cursor: pointer; font-size: 1.05rem; transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .15s ease; }
.choice:hover { border-color: var(--ink); transform: translateY(-1px); }
.choice[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.answer { margin-top: 18px; min-height: 130px; }
.answer-card { position: relative; overflow: hidden; border-radius: 18px; padding: 18px 20px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); animation: rise .35s ease; }
.answer-card h3 { margin: 0 0 4px; font-size: 1.5rem; color: var(--accent); }
.answer-card p { margin: 0 0 14px; max-width: 40ch; position: relative; }
.answer-card .glyph { position: absolute; right: -18px; bottom: -26px; width: 140px; height: 140px; color: var(--accent); opacity: .18; }
.go-btn { position: relative; display: inline-block; text-decoration: none; font-weight: 700; background: var(--accent); color: var(--surface); padding: 9px 20px; border-radius: 999px; transition: transform .15s ease; border: 0; cursor: pointer; font-size: 1.05rem; }
.go-btn:hover { transform: translateY(-1px); }
.ghost-btn { display: inline-block; text-decoration: none; background: transparent; color: var(--ink); border: 1.5px solid var(--line); padding: 8px 18px; border-radius: 999px; cursor: pointer; font-size: 1.05rem; }
.ghost-btn:hover { border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .answer-card { animation: none; } }
@media (max-width: 760px) { .hero { min-height: 0; flex-direction: column; align-items: stretch; } .hero-fade { background: color-mix(in srgb, var(--surface) 72%, transparent); } .field-hint { position: relative; right: auto; bottom: auto; padding: 0 28px 20px; } }

/* Doors (with icons, like the first version) */
.doors { border-top: 1px solid var(--line); }
.door { --c: var(--accent); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 120px; gap: 24px; align-items: center; padding: 24px 8px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .3s ease; }
.door[data-c="mind"] { --c: var(--slate); }
.door[data-c="movement"] { --c: var(--sage); }
.door[data-c="bahja"] { --c: var(--sand); }
.door[data-c="travel"] { --c: var(--terracotta); }
.door .name { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; line-height: 1; transition: color .25s ease, transform .3s ease; }
.door .what { color: var(--muted); margin: 0; }
.door .thumb { width: 120px; height: 84px; border-radius: 14px; overflow: hidden; justify-self: end; transform: scale(.92); opacity: .8; transition: transform .3s ease, opacity .3s ease; }
.door:hover, .door:focus-visible { background: color-mix(in srgb, var(--c) 7%, transparent); }
.door:hover .name, .door:focus-visible .name { color: var(--c); transform: translateX(10px); }
.door:hover .thumb, .door:focus-visible .thumb { transform: scale(1) rotate(-3deg); opacity: 1; }
@media (max-width: 700px) { .door { grid-template-columns: minmax(0, 1fr) 88px; gap: 6px 16px; } .door .what { grid-column: 1; grid-row: 2; } .door .thumb { grid-column: 2; grid-row: 1 / span 2; width: 88px; height: 66px; } }
.peek { position: fixed; left: 0; top: 0; z-index: 30; width: 250px; height: 180px; border-radius: 18px; pointer-events: none; opacity: 0; transition: opacity .25s ease; box-shadow: 0 24px 50px -18px rgba(40,25,15,.45); }
.peek.show { opacity: 1; }

.now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.now-card { border-radius: 18px; padding: 22px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: transform .25s ease, border-color .25s ease; display: block; }
.now-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.now-card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--accent); }
.now-card p { margin: 0; font-size: 1.2rem; line-height: 1.4; }
@media (max-width: 760px) { .now { grid-template-columns: 1fr; } }

/* Page heads */
.page-head { margin-top: 20px; min-height: 340px; display: flex; align-items: flex-end; }
.page-fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 70%, transparent) 38%, color-mix(in srgb, var(--surface) 0%, transparent) 75%); }
.page-copy { position: relative; z-index: 2; padding: clamp(26px, 4vw, 48px); }
.page-copy h1 { font-size: clamp(3.4rem, 9vw, 6.8rem); line-height: .92; margin: 0 0 14px; letter-spacing: -0.02em; font-weight: 700; color: var(--accent); }
.page-copy h1 .ar { font-size: .4em; letter-spacing: 0; color: var(--muted); font-weight: 400; margin-left: .3em; vertical-align: .6em; }
.page-copy .lede { color: var(--ink); font-size: 1.25rem; }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 16px; cursor: pointer; color: var(--muted); font-size: 1.02rem; transition: all .2s ease; }
.tab:hover { color: var(--ink); border-color: var(--ink); }
.tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.text-link { font-weight: 700; color: var(--accent); text-decoration: none; border-bottom: 1.5px solid currentColor; }

/* Mind */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.feature .ph { aspect-ratio: 4 / 3; border-radius: 20px; }
.feature .kicker { color: var(--accent); font-weight: 700; }
.feature h3 { font-size: 1.9rem; margin: 6px 0 10px; }
.feature p { margin: 0 0 12px; color: var(--muted); max-width: 48ch; }
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; } }
.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.timeline > li { position: relative; }
.timeline > li::before { content: ""; position: absolute; left: -22px; top: 27px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); transition: background-color .25s ease; }
.timeline > li.open::before { background: var(--accent); }
.tl-btn { width: 100%; display: grid; grid-template-columns: 110px minmax(0, 1fr) 20px; gap: 14px; align-items: center; text-align: left; padding: 16px 14px; background: none; border: 0; border-radius: 14px; cursor: pointer; transition: background-color .2s ease; }
.tl-btn:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tl-btn .yr { color: var(--accent); font-weight: 700; }
.tl-btn .tt { font-size: 1.25rem; }
.tl-btn .pm { width: 14px; height: 14px; position: relative; justify-self: end; }
.tl-btn .pm::before, .tl-btn .pm::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: var(--muted); transition: transform .25s ease; }
.tl-btn .pm::after { transform: rotate(90deg); }
.tl-btn[aria-expanded="true"] .pm::after { transform: rotate(0deg); }
.tl-body { padding: 0 14px 18px 138px; color: var(--muted); max-width: 74ch; animation: rise .3s ease; }
.tl-body[hidden] { display: none; }
@media (max-width: 600px) { .tl-btn { grid-template-columns: 72px minmax(0,1fr) 18px; } .tl-body { padding-left: 100px; } }
.library { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.lib-item { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s ease; }
.lib-item:hover { transform: translateY(-4px) rotate(-.4deg); border-color: var(--accent); }
.lib-item[hidden] { display: none; }
.lib-item .ph { height: 130px; display: grid; place-items: center; }
.lib-item .body { padding: 14px 18px 18px; }
.lib-item .type { font-size: .95rem; color: var(--accent); font-weight: 700; }
.lib-item h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.lib-item p { margin: 0; color: var(--muted); font-size: 1.02rem; }
.play { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,251,245,.95); position: relative; z-index: 1; box-shadow: 0 4px 14px rgba(0,0,0,.15); transition: transform .2s ease; }
.play::after { content: ""; position: absolute; left: 18px; top: 14px; border-left: 13px solid #2A2522; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.lib-item:hover .play { transform: scale(1.1); }

/* Movement */
.mv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.aside { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 88px); }
@media (max-width: 980px) { .mv-grid { grid-template-columns: 1fr; } .aside { position: static; } }
.strand { padding-top: 24px; animation: rise .35s ease; }
.strand[hidden] { display: none; }
.strand > p { margin: 0 0 16px; max-width: 62ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.chips li { font-size: 1rem; padding: 5px 14px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.strip { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.strip .ph { border-radius: 16px; aspect-ratio: 4 / 5; transition: transform .3s ease; }
.strip .ph:first-child { aspect-ratio: auto; }
.strip .ph:hover { transform: scale(1.03) rotate(-1deg); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 12px; border-radius: 12px; border-bottom: 1px solid var(--line); transition: background-color .2s ease; }
.rows li:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rows li b { font-weight: 700; }
.rows li small { display: block; color: var(--muted); font-size: 1rem; }
.rows li > span { color: var(--muted); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); }
@media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.flip { perspective: 900px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; height: 290px; }
.flip-in { position: relative; display: block; height: 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.flip[aria-pressed="true"] .flip-in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 18px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); padding: 10px 10px 14px; }
.face .ph { flex: 1; border-radius: 12px; margin-bottom: 10px; }
.face b { display: block; padding: 0 4px; font-size: 1.1rem; }
.face span.s { color: var(--muted); padding: 0 4px; }
.back { transform: rotateY(180deg); background: color-mix(in srgb, var(--sage) 14%, var(--surface)); justify-content: flex-end; padding: 20px; }
.back p { margin: 6px 0 0; }
@media (prefers-reduced-motion: reduce) { .flip-in { transition: none; } }
.breathe { border-radius: 22px; padding: 24px; background: color-mix(in srgb, var(--sage) 12%, var(--surface)); border: 1px solid var(--line); }
.breathe h3 { margin: 0 0 4px; font-size: 1.45rem; }
.breathe > p { margin: 0; color: var(--muted); }
.orb-stage { display: grid; place-items: center; height: 260px; position: relative; margin: 8px 0 14px; }
.orb-ring { position: absolute; width: 230px; height: 230px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--sage) 50%, transparent); }
.orb { width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--sage) 45%, var(--surface)), var(--sage) 72%); transform: scale(.5); transition-property: transform; transition-timing-function: ease-in-out; box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--sage) 75%, transparent); }
.cue { position: absolute; text-align: center; color: var(--surface); pointer-events: none; }
.cue strong { display: block; font-size: 1.15rem; }
.cue span { font-size: 2.2rem; font-weight: 700; line-height: 1.1; }
.btn-row { display: flex; gap: 8px; }
.btn { border: 0; cursor: pointer; border-radius: 999px; padding: 9px 22px; font-weight: 700; background: var(--sage); color: var(--surface); font-size: 1.05rem; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.rounds { margin-top: 10px; color: var(--muted); min-height: 1.4em; }

/* Bahja */
.story { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.story-photo { position: relative; border-radius: 22px; aspect-ratio: 4 / 3; }
.story-copy h3 { font-size: 1.8rem; margin: 0 0 10px; }
.story-copy p { color: var(--muted); margin: 0 0 12px; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } }
.hotspot { position: absolute; z-index: 3; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; background: rgba(255,248,240,.35); display: grid; place-items: center; }
.hotspot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #FFF8F0; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
.hotspot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,248,240,.9); animation: ping 2.4s ease-out infinite; }
.hotspot[aria-expanded="true"]::before { background: var(--terracotta); }
.hotspot[aria-expanded="true"]::after { animation: none; opacity: 0; }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hotspot::after { animation: none; opacity: .6; } }
.note { position: absolute; z-index: 4; width: min(280px, calc(100% - 24px)); background: var(--surface); color: var(--ink); border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 18px 40px -14px rgba(30,20,12,.5); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.note.open { opacity: 1; transform: none; pointer-events: auto; }
.note h4 { margin: 0 0 4px; font-size: 1.15rem; }
.note p { margin: 0; color: var(--muted); line-height: 1.45; }
.note .close { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; color: var(--muted); font-size: 1.3rem; }
@media (max-width: 600px) { .note { left: 12px !important; right: 12px; top: 12px !important; width: auto; } }
.series { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.serie { border: 0; padding: 0; background: none; text-align: left; cursor: pointer; grid-column: span 2; }
.serie:nth-child(1), .serie:nth-child(2) { grid-column: span 3; }
.serie .ph { border-radius: 18px; aspect-ratio: 4 / 3; transition: transform .4s ease; }
.serie:hover .ph { transform: scale(.98) rotate(-.6deg); }
.serie b { display: block; margin-top: 10px; font-size: 1.2rem; }
.serie span { color: var(--muted); }
@media (max-width: 760px) { .series { grid-template-columns: 1fr 1fr; } .serie, .serie:nth-child(1), .serie:nth-child(2) { grid-column: span 1; } }
.cta-band { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 24px; align-items: center; border-radius: 22px; padding: 18px; background: color-mix(in srgb, var(--terracotta) 9%, var(--surface)); border: 1px solid var(--line); }
.cta-band .ph { height: 120px; border-radius: 14px; }
.cta-band h3 { margin: 0 0 4px; font-size: 1.5rem; }
.cta-band p { margin: 0; color: var(--muted); }
@media (max-width: 700px) { .cta-band { grid-template-columns: 1fr; } }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(20,15,12,.94); display: none; place-items: center; padding: 24px; }
.lightbox.open { display: grid; }
.lb-frame { width: min(1000px, 100%); }
.lb-img { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; max-height: 74vh; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #EFE5DA; margin-top: 14px; flex-wrap: wrap; }
.lb-bar p { margin: 0; }
.lb-bar small { color: #B6A99B; }
.lb-ctrl { display: flex; gap: 8px; }
.lb-ctrl button { border: 1px solid rgba(255,255,255,.25); background: transparent; color: #FFF8F0; border-radius: 999px; padding: 7px 16px; cursor: pointer; }
.lb-ctrl button:hover { background: rgba(255,255,255,.1); }

/* Travel atlas */
.map-tools { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.atlas-wrap { position: relative; }
.atlas { position: relative; height: min(80vh, 760px); min-height: 480px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: color-mix(in srgb, var(--slate) 15%, var(--surface)); }
.zoom-ctrl { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.zoom-ctrl button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 1.4rem; line-height: 1; box-shadow: 0 4px 12px -6px rgba(0,0,0,.25); }
.zoom-ctrl button.txt { font-size: .85rem; }
.zoom-ctrl button:hover { border-color: var(--ink); }
.atlas-hint { position: absolute; left: 14px; bottom: 12px; margin: 0; font-size: .95rem; color: var(--muted); font-style: italic; z-index: 2; background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 2px 10px; border-radius: 8px; }
.compass { position: absolute; right: 18px; bottom: 16px; width: 64px; height: 64px; z-index: 1; color: var(--ink); opacity: .55; pointer-events: none; }
.info { position: absolute; right: 14px; top: 14px; width: 320px; max-height: calc(100% - 28px); overflow: auto; z-index: 3; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 16px; box-shadow: 0 20px 40px -20px rgba(30,20,12,.4); }
.info > * { animation: rise .3s ease; }
.info .ph { height: 130px; border-radius: 14px; margin-bottom: 12px; }
.info .tag { display: inline-block; font-size: .9rem; font-weight: 700; color: var(--surface); background: var(--terracotta); border-radius: 999px; padding: 1px 10px; }
.info .tag.k-place { background: var(--sage); }
.info .tag.k-roadtrip { background: var(--sand); }
.info h3 { margin: 6px 0 2px; font-size: 1.55rem; line-height: 1.15; }
.info .where { margin: 0 0 8px; color: var(--muted); }
.info p { margin: 0 0 10px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 0 0 14px; font-size: 1rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; }
.info .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.soon { color: var(--muted); font-style: italic; align-self: center; }
.legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend svg { width: 28px; height: 28px; flex: none; }
.info .x { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--surface) 80%, transparent); cursor: pointer; font-size: 1.3rem; z-index: 2; }
@media (max-width: 860px) {
  .atlas { height: 62vh; min-height: 400px; }
  .info { position: static; width: auto; max-height: none; margin-top: 12px; box-shadow: none; }
  .compass { display: none; }
}
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.tcard { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s ease; }
.tcard:hover { transform: translateY(-4px) rotate(-.4deg); border-color: var(--accent); }
.tcard[hidden] { display: none; }
.tcard .ph { height: 150px; }
.tcard .body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tcard h3 { margin: 0; font-size: 1.35rem; }
.tcard .where { color: var(--muted); margin: 0; }
.tcard p { margin: 0; }
.tcard .acts { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.tcard .go-btn, .tcard .ghost-btn, .info .go-btn, .info .ghost-btn { font-size: .98rem; padding: 6px 14px; }

/* Itinerary page */
.trip-top { margin-top: 20px; }
.back-link { display: inline-block; margin: 0 0 14px; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.back-link:hover { color: var(--ink); border-color: var(--ink); }
.trip-hero { position: relative; border-radius: 24px; overflow: hidden; height: min(56vh, 520px); min-height: 340px; }
.trip-hero .ph { position: absolute; inset: 0; }
.trip-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,20,14,.6) 0%, rgba(30,20,14,0) 55%); pointer-events: none; }
.trip-hero .cap { position: absolute; left: clamp(20px, 4vw, 44px); bottom: clamp(20px, 4vw, 40px); z-index: 2; color: #FFF8F0; max-width: min(720px, 80%); }
.trip-hero h1 { margin: 6px 0 6px; font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: .95; }
.trip-hero .sample { display: inline-block; background: rgba(255,248,240,.9); color: #2A2522; border-radius: 999px; padding: 1px 12px; font-size: .95rem; }
.trip-hero p { margin: 0; color: #F5E8DA; font-size: 1.2rem; }
.fact-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.fact-row div { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); padding: 14px 16px; }
.fact-row span { display: block; color: var(--muted); font-size: .95rem; }
.fact-row b { font-size: 1.2rem; }
@media (max-width: 760px) { .fact-row { grid-template-columns: 1fr 1fr; } }
.trip-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.trip-aside { margin-top: 0; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 88px); display: grid; gap: 14px; }
.mini { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: color-mix(in srgb, var(--slate) 15%, var(--surface)); }
.mini svg { width: 100%; height: 260px; display: block; }
.mini svg .land { fill: color-mix(in srgb, var(--sand) 28%, var(--surface)); stroke: color-mix(in srgb, var(--sand) 70%, transparent); stroke-width: 1.5; }
.mini svg .route-line { fill: none; stroke: var(--terracotta); stroke-width: 3; stroke-dasharray: 6 6; stroke-linecap: round; }
.mini svg .stop { fill: var(--terracotta); stroke: var(--surface); stroke-width: 2; }
.mini svg text { font-family: var(--font); font-weight: 700; font-size: 14px; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.mini .acts { padding: 12px 14px; display: flex; gap: 8px; flex-wrap: wrap; background: var(--surface); }
.box { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); padding: 16px 18px; }
.box h3 { margin: 0 0 8px; font-size: 1.25rem; }
@media (max-width: 960px) { .trip-grid { grid-template-columns: 1fr; } .trip-aside { position: static; } }

footer { margin-top: clamp(72px, 10vw, 128px); border-top: 1px solid var(--line); padding: 36px 0 44px; }
footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; }
footer .big { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; margin: 0 0 6px; }
footer p { margin: 0; color: var(--muted); }
footer .links { display: flex; gap: 20px; }
footer .links a { text-decoration: none; }
footer .links a:hover { color: var(--accent); }
@media (max-width: 640px) { footer .wrap { grid-template-columns: 1fr; } }

/* ---------- Additions for the live site ---------- */
.ph { position: relative; overflow: hidden; background: #F0DFC8; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ph[data-label]::after { content: attr(data-label); position: absolute; left: 12px; bottom: 10px; font-size: .85rem; color: #FFFBF5; background: rgba(42,37,34,.45); padding: 2px 8px; border-radius: 6px; z-index: 1; }
.fill { position: absolute; inset: 0; }
.brand .short { display: none; }
@media (max-width: 980px) { .brand .full { display: none; } .brand .short { display: inline; } }
.thumb-wrap { position: relative; height: 130px; display: grid; place-items: center; }
.thumb-wrap .ph { position: absolute; inset: 0; }
.lib-item a.cover-link { text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.loading, .oops { padding: 120px 0; text-align: center; color: var(--muted); }
.story-photo { position: relative; border-radius: 22px; aspect-ratio: 4 / 3; overflow: hidden; }

/* Real map (Leaflet) */
#map { width: 100%; height: 100%; background: color-mix(in srgb, var(--slate) 15%, var(--surface)); }
.leaflet-container { font-family: var(--font); font-size: 1rem; }
.leaflet-tile-pane { filter: sepia(.25) saturate(.85) brightness(1.02); }
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(.92) hue-rotate(180deg) sepia(.2) brightness(.85) contrast(.9); }
.pin-icon { background: none; border: 0; }
.pin-icon svg { width: 30px; height: 40px; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); transition: transform .2s ease; transform-origin: 50% 100%; }
.pin-icon.active svg, .pin-icon:hover svg { transform: scale(1.25); }
.leaflet-tooltip.stop-tip { font-family: var(--font); font-weight: 700; font-size: .95rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.map-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--muted); }
.leaflet-control-zoom a { width: 38px !important; height: 38px !important; line-height: 36px !important; font-size: 20px !important; }

/* Post page */
.post { max-width: 760px; margin: 0 auto; padding-top: 40px; }
.post h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; margin: 6px 0 12px; }
.post .meta { color: var(--accent); font-weight: 700; }
.post .cover { aspect-ratio: 16 / 9; border-radius: 20px; margin: 22px 0; }
.post .video { aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; margin: 22px 0; background: #000; }
.post .video iframe { width: 100%; height: 100%; border: 0; display: block; }
.prose { font-size: 1.2rem; line-height: 1.65; }
.prose img { max-width: 100%; border-radius: 14px; }
.prose a { color: var(--accent); }
.prose h2 { font-size: 1.8rem; margin: 1.6em 0 .4em; }
.tl-body p:first-child, .prose p:first-child { margin-top: 0; }