:root {
  --c-bg:#E7D8BC; --c-panel:#F1E7D3; --c-ink:#2A2016; --c-inkSoft:#5B4A37; --c-accent:#8C7456; --c-accentInk:#FBF5EA;
  --c-label:#B49D7E; --c-card:#8C7456; --c-cardInk:#FBF5EA; --c-footer:#EADCC2; --c-pin:#1F6FD1;
  --warn-bg:#7A2E1F; --warn-ink:#FFF1E6; --new:#2F6B3A;
  --u: clamp(14px, 0.95vw, 22px);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit }
html { height: 100%; scroll-padding-top: env(safe-area-inset-top, 0px) }
body { margin: 0; height: 100%; font-family: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif; font-size: var(--u);
  color: var(--c-ink); background: var(--c-bg); overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #2E5E8C; outline-offset: 2px }
[hidden] { display: none !important }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--c-bg) }
.surface { background-color: var(--c-bg) }
.textured .surface {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .12  0 0 0 .22 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at 50% 40%, rgba(255,250,235,.3), rgba(120,90,50,.22) 90%); }

.loading { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25) }
.spin { width: 56px; height: 56px; border-radius: 50%; border: 6px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin 1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

.btn { background: var(--c-accent); color: var(--c-accentInk); border-radius: 6px; padding: .55em 1.1em; font-weight: 600;
  display: inline-flex; align-items: center; gap: .5em; min-height: 2.6em; box-shadow: 0 2px 0 rgba(0,0,0,.25) }
.btn:active { transform: translateY(2px); box-shadow: none }
.btn svg { width: 1.1em; height: 1.1em; flex: none }
.btn.on { background: var(--c-panel); color: var(--c-ink); box-shadow: inset 0 0 0 2px var(--c-accent) }

/* sign in */
#login { align-items: center; justify-content: center; background: #1E1710; color: #FBF5EA }
.login-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 2.4em; width: min(92vw, 26em); text-align: center }
.login-card h1 { font-family: Montserrat, sans-serif; font-weight: 600; margin: 0 0 .2em }
.login-card p { opacity: .75; margin: .2em 0 1.4em }
.login-card input { width: 100%; font: inherit; font-size: 1.2em; padding: .6em; border-radius: 6px; border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.3); color: inherit; text-align: center; margin-bottom: .6em }
.login-card .btn { width: 100%; justify-content: center; margin-top: .4em; background: #8C7456; color: #FBF5EA }
.login-err { color: #F2A08A; min-height: 1.4em; margin-top: .6em }

/* welcome + slides */
#welcome, #menu { background: #000 }
.slides { position: absolute; inset: 0; z-index: 5; pointer-events: none }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s; background: #000; display: flex; align-items: center; justify-content: center }
.slide.show { opacity: 1 }
.slide img { width: 100%; height: 100%; object-fit: contain }
.slide .yt { width: 100%; height: 100%; }
.slide .yt iframe { width: 100%; height: 100%; border: 0 }
.lock-note { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 6; text-align: center; color: #fff; font-size: 1.2em; opacity: .85; text-shadow: 0 1px 8px rgba(0,0,0,.7) }
#welcome.locked .mb-hint { display: none }

/* content pages */
.page { flex: 1; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { .page { scroll-behavior: auto } }
.sheet { width: min(96vw, 1760px); margin: 1.4em auto; background: var(--c-panel); border-radius: 10px; box-shadow: 0 6px 30px rgba(40,25,5,.18); padding: 0 1.6em 2em }
.sheet-head { position: sticky; top: 0; z-index: 5; background: var(--c-panel); padding: 1.2em 0 .9em; border-bottom: 2px solid var(--c-ink); margin-bottom: .4em }
.sheet-head h1 { font-family: Montserrat, sans-serif; font-weight: 700; text-align: center; margin: 0 0 .6em; font-size: 1.9em }
.sub { text-align: center; color: var(--c-inkSoft); margin: -.2em 0 .8em }
.filters { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; justify-content: center }
.letters { display: flex; gap: .35em; flex-wrap: wrap; justify-content: center }
.letters button { min-width: 2.6em; height: 2.6em; border-radius: 6px; background: var(--c-accent); color: var(--c-accentInk); font-weight: 700 }
.letters button.all { padding: 0 .9em }
.letters button:disabled { background: transparent; color: var(--c-inkSoft); opacity: .45; cursor: default; box-shadow: inset 0 0 0 1px var(--c-label) }
.country { display: flex; align-items: center; gap: .5em; font-weight: 600 }
.country select { font: inherit; padding: .5em .8em; min-height: 2.6em; border-radius: 6px; border: 2px solid var(--c-accent); background: var(--c-panel); color: var(--c-ink); min-width: 14em }
.group-bar { background: var(--c-label); color: var(--c-ink); text-align: center; font-weight: 700; padding: .3em; border-radius: 4px; margin: 1.4em 0 .9em; font-size: 1.1em }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1em; margin-top: 1em }
.card { background: var(--c-card); border-radius: 8px; overflow: hidden; box-shadow: 0 3px 10px rgba(40,25,5,.2); display: flex; flex-direction: column }
.card:active { transform: scale(.97) }
.card .ph { aspect-ratio: 1/1; width: 100%; position: relative; display: block; background: var(--c-label) }
.card .ph img { width: 100%; height: 100%; object-fit: cover; display: block }
.card .cap { color: var(--c-cardInk); font-weight: 700; padding: .55em .7em; text-align: center; line-height: 1.2 }
.card .cap small { display: block; font-weight: 400; opacity: .85 }
.initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 3em; color: var(--c-cardInk); background: var(--c-accent) }
.badge { position: absolute; top: .5em; left: .5em; background: var(--new); color: #fff; font-weight: 700; font-size: .8em; padding: .15em .6em; border-radius: 4px }
.badge.lock { left: auto; right: .5em; background: var(--warn-bg) }
.months { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap }
.months .btn { min-width: 8em; justify-content: center }
.empty { text-align: center; color: var(--c-inkSoft); padding: 3em 1em; font-size: 1.1em; grid-column: 1 / -1 }

.footer { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .6em 1.4em; background: var(--c-footer); border-top: 1px solid var(--c-label); position: relative; z-index: 6 }
.footer.center { justify-content: center; flex-wrap: wrap }
.footer .mid { display: flex; gap: .8em }
.footer .spacer { width: 5.5em }

/* popup */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(20,12,4,.55); display: flex; align-items: center; justify-content: center; padding: 2vh 2vw }
.mbox { width: min(1280px, 94vw); height: min(88vh, 920px); background: var(--c-panel); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.45); display: flex; flex-direction: column; overflow: hidden; position: relative }
.restricted { background: var(--warn-bg); color: var(--warn-ink); padding: .7em 4.5em .7em 1.2em; display: flex; gap: .7em; align-items: center; font-size: 1.05em }
.restricted svg { width: 1.4em; height: 1.4em; flex: none }
.tabs { display: flex; justify-content: center; gap: .6em; padding: 1em 4.5em .4em; flex-wrap: wrap }
.tabs button { padding: .6em 1.5em; min-height: 2.8em; border-radius: 6px; background: var(--c-accent); color: var(--c-accentInk); font-weight: 700; display: inline-flex; gap: .5em; align-items: center }
.tabs button svg { width: 1.1em; height: 1.1em }
.tabs button.on { background: var(--c-panel); color: var(--c-ink); box-shadow: inset 0 0 0 2px var(--c-accent) }
.mbody { flex: 1; overflow: auto; padding: 1em 2em 1.4em }
.mclose { position: absolute; top: .7em; right: .7em; width: 3em; height: 3em; border-radius: 50%; background: var(--c-ink); color: var(--c-panel); z-index: 3; display: flex; align-items: center; justify-content: center }
.mclose svg { width: 1.3em; height: 1.3em }
.info { display: grid; grid-template-columns: minmax(220px, 32%) 1fr; gap: 2em; align-items: start }
.info .ph { border-radius: 8px; overflow: hidden; box-shadow: 0 4px 14px rgba(40,25,5,.25); aspect-ratio: 1/1 }
.info .ph img { width: 100%; height: 100%; object-fit: cover; display: block }
.info h2 { font-family: Montserrat, sans-serif; margin: 0; font-size: 1.9em }
.info .loc { font-size: 1.2em; color: var(--c-inkSoft); margin: .2em 0 1em; display: flex; gap: .4em; align-items: center }
.info .loc svg { width: 1em; height: 1em }
.info .bio { line-height: 1.55; max-width: 44em; white-space: pre-line }
.letters-row { display: flex; gap: 2.2em; justify-content: center; flex-wrap: wrap; padding-top: 1em }
.letters-row h3 { width: 100%; text-align: center; font-family: Montserrat, sans-serif; margin: 0 0 .4em }
.thumb { width: clamp(150px, 13vw, 240px); text-align: center }
.thumb .pg { background: #fff; aspect-ratio: 8.5/11; border-radius: 3px; box-shadow: 0 6px 16px rgba(40,25,5,.3); overflow: hidden; display: flex; align-items: center; justify-content: center; color: #999 }
.thumb .pg canvas { width: 100%; height: 100%; object-fit: contain; display: block }
.thumb .dt { margin-top: .7em; font-weight: 700 }
.contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; text-align: center; padding-top: 1.5em }
.contact h3 { font-family: Montserrat, sans-serif; margin: 0 0 .7em; font-size: 1.4em }
.qr { display: inline-block; background: #fff; padding: 12px; border-radius: 6px; box-shadow: 0 3px 10px rgba(40,25,5,.2) }
.qr img, .qr canvas { display: block; width: clamp(130px, 10vw, 200px) !important; height: auto !important }
.contact .v { margin-top: .8em; font-size: 1.1em; word-break: break-word }
.contact .scan { color: var(--c-inkSoft); font-size: .9em; margin-top: .3em }

/* video */
.vwrap { max-width: 1000px; margin: 0 auto }
.vscreen { aspect-ratio: 16/9; background: #000; border-radius: 6px; overflow: hidden; position: relative }
.vscreen .ytp, .vscreen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.vscreen .shield { position: absolute; inset: 0; z-index: 2 }
.vscreen .black { position: absolute; inset: 0; background: #000; z-index: 3; display: flex; align-items: center; justify-content: center; color: #fff }
.vscreen .black svg { width: 14%; opacity: .85 }
.vctrl { display: flex; align-items: center; gap: 1em; margin-top: 1em; flex-wrap: wrap }
.vctrl input[type=range] { accent-color: var(--c-accent) }
.vctrl .prog { flex: 1; min-width: 200px }
.vctrl .time { font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: right }

/* pdf viewer */
.viewer { position: fixed; inset: 0; z-index: 70; background: #1b140d; display: flex; flex-direction: column }
.vstage { flex: 1; overflow: hidden; position: relative; touch-action: none; cursor: grab }
.vpages { position: absolute; left: 50%; top: 16px; transform-origin: 0 0; display: flex; flex-direction: column; gap: 16px }
.vpages canvas { background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.6); display: block }
.vbar { display: flex; justify-content: center; gap: .8em; padding: .7em; background: var(--c-footer) }
.vbar .lbl { align-self: center; font-weight: 700; margin-right: auto; padding-left: .6em }

/* map */
#map { background: #10263D }
.mapwrap { flex: 1; position: relative; min-height: 0; display: flex }
.mapwrap > div, .mapwrap > svg { flex: 1; width: 100%; height: 100% }
.gpin-label { background: #fff; color: #222; padding: 2px 6px; border-radius: 3px; font: 600 13px "Source Sans 3", sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.3) }
svg.world { display: block; touch-action: none; cursor: grab }
svg.world .land { fill: #3E5130; stroke: #6D7F55; stroke-width: .8; vector-effect: non-scaling-stroke }
svg.world .ocean { fill: #10263D }
svg.world .grat { stroke: #fff; stroke-opacity: .07; fill: none; vector-effect: non-scaling-stroke }
svg.world.road .land { fill: #F2EEE3; stroke: #B9AE95 }
svg.world.road .ocean { fill: #A9D2E6 }
svg.world.road .grat { stroke: #5d7c8c; stroke-opacity: .18 }
.pin { cursor: pointer }
.pin path, .pin .cl { fill: var(--c-pin); stroke: #fff; stroke-width: 2 }
.pin .cl { stroke-width: 3; fill-opacity: .92 }
.pin text { fill: #fff; font-weight: 700; font-size: 20px; text-anchor: middle; dominant-baseline: central; pointer-events: none }
.pin .tag { fill: #fff } .pin .tagt { fill: #222; font-size: 17px; font-weight: 600; text-anchor: start }

/* trips */
.trips { display: grid; grid-template-columns: minmax(200px, 17%) 1fr; gap: 1.4em; width: min(96vw, 1600px); margin: 1.4em auto; flex: 1; min-height: 0 }
.trip-tabs { display: flex; flex-direction: column; gap: .5em; overflow: auto }
.trip-tabs button { background: var(--c-panel); border-radius: 6px; padding: .8em; font-weight: 700; text-align: center; line-height: 1.25; box-shadow: 0 2px 6px rgba(40,25,5,.15) }
.trip-tabs button small { display: block; font-weight: 600; color: var(--c-inkSoft) }
.trip-tabs button.on { background: var(--c-accent); color: var(--c-accentInk) }
.trip-tabs button.on small { color: var(--c-accentInk) }
.tripview { background: var(--c-panel); border-radius: 10px; padding: 1.2em; display: flex; flex-direction: column; gap: 1em; min-height: 0; box-shadow: 0 6px 30px rgba(40,25,5,.18) }
.tripview h2 { margin: 0; font-family: Montserrat, sans-serif; font-size: 1.4em; text-align: center }
.stagebox { flex: 1; position: relative; min-height: 0; border-radius: 6px; overflow: hidden; background: #000; touch-action: pan-y }
.stagebox img { width: 100%; height: 100%; object-fit: contain; display: block }
.arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 3.4em; height: 3.4em; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center }
.arrow svg { width: 1.4em; height: 1.4em } .arrow.l { left: 1em } .arrow.r { right: 1em }
.count { position: absolute; top: .8em; right: 1em; background: rgba(0,0,0,.55); color: #fff; padding: .2em .7em; border-radius: 4px; font-size: .9em }
.caption { position: absolute; left: 0; right: 0; bottom: 0; padding: .8em 1.2em; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); text-align: center }
.caption:empty { display: none }
.thumbs { display: flex; gap: .6em; overflow-x: auto; padding-bottom: .3em }
.thumbs button { flex: none; width: clamp(90px, 8vw, 150px); aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; opacity: .6 }
.thumbs button.on { opacity: 1; outline: 3px solid var(--c-accent); outline-offset: -3px }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block }

@media (max-width: 1400px) { .grid { grid-template-columns: repeat(5, 1fr) } }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(4, 1fr) } }
@media (max-width: 760px) {
  :root { --u: 16px }
  .grid { grid-template-columns: repeat(2, 1fr); gap: .8em }
  .sheet { width: 100%; margin: 0; border-radius: 0; padding: 0 .8em 1.5em }
  .sheet-head h1 { font-size: 1.5em }
  .letters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: 100%; padding-bottom: .3em }
  .letters button { flex: none }
  .country { width: 100% } .country select { flex: 1; min-width: 0 }
  .footer { padding: .5em .6em } .footer .t { display: none } .footer .spacer { width: 3em }
  .modal { padding: 0 } .mbox { width: 100vw; height: 100%; border-radius: 0 }
  .mbody { padding: .8em 1em } .info, .contact { grid-template-columns: 1fr }
  .tabs { justify-content: flex-start; padding-left: .8em } .tabs button { padding: .5em .9em } .tabs .t { display: none }
  .trips { grid-template-columns: 1fr; margin: 0; width: 100%; padding: .8em }
  .trip-tabs { flex-direction: row; overflow-x: auto } .trip-tabs button { flex: none }
  .stagebox { min-height: 240px }
  .vbar .lbl, .vbar .t { display: none }
}