/* ===== TRAVEL SCRAPBOOK — STYLES =====
   Cream paper, polaroid frames, washi tape, passport stamps, handwritten captions. */

:root {
  --shadow-card: 0 1px 2px rgba(40, 30, 10, 0.25), 0 10px 22px rgba(40, 30, 10, 0.28), 0 28px 60px rgba(40, 30, 10, 0.32), inset 0 0 0 1px rgba(255, 250, 235, 0.35);
  --shadow-photo: 0 1px 2px rgba(40, 30, 10, 0.28), 0 8px 18px rgba(40, 30, 10, 0.28), 0 22px 44px rgba(40, 30, 10, 0.3);
  --shadow-photo-lift: 0 2px 4px rgba(40, 30, 10, 0.3), 0 18px 36px rgba(40, 30, 10, 0.34), 0 40px 80px rgba(40, 30, 10, 0.36);
  --paper: #f3ecde;
  --paper-2: #ebe2d0;
  --card: #fffdf8;
  --ink: #2b2a28;
  --ink-soft: #5d5850;
  --muted: #8a8276;
  --line: rgba(60, 45, 20, 0.14);
  --stamp: #b22e2e;
  --stamp-blue: #2f4f8f;
  --tape-1: rgba(255, 214, 120, 0.72);
  --tape-2: rgba(150, 205, 220, 0.70);
  --tape-3: rgba(240, 160, 170, 0.70);
  --tape-4: rgba(170, 215, 160, 0.70);
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --font-type: "Special Elite", "Courier New", monospace;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --max: 1180px;
  --nav-h: 60px;
  --shadow: 0 1px 2px rgba(40, 30, 10, 0.12), 0 8px 24px rgba(40, 30, 10, 0.16);
  --shadow-lift: 0 2px 4px rgba(40, 30, 10, 0.14), 0 18px 40px rgba(40, 30, 10, 0.24);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--paper);
  background-image: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.5), transparent 55%),
                    radial-gradient(ellipse at 100% 100%, rgba(120, 90, 40, 0.10), transparent 55%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.type { font-family: var(--font-type); letter-spacing: 0.02em; }
.hand { font-family: var(--font-hand); }
[hidden] { display: none !important; }

/* artwork behind a country / album page (set by JS) */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--paper); opacity: 0; transition: opacity .6s; pointer-events: none; }
.backdrop.on { opacity: 1; }
.backdrop img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; will-change: transform; }
.backdrop.cover img { width: auto; height: 100%; left: 50%; transform: translateX(-50%); }
body.has-backdrop .foot { background: rgba(243, 236, 222, 0.88); }

/* paper grain over everything */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/img/grain.png") repeat; background-size: 256px;
  opacity: 0.9; mix-blend-mode: multiply;
}

/* ===== NAV ===== */
.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 22px;
  background: rgba(243, 236, 222, 0.88);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__stamp {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--stamp); color: var(--stamp);
  display: grid; place-items: center; font-size: 15px; transform: rotate(-12deg); opacity: 0.85;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--stamp);
}
.nav__search { margin-left: auto; margin-right: 10px; }
.nav__search input { font: inherit; font-family: var(--font-type); font-size: 12px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255,253,248,0.7); width: 160px; color: var(--ink); }
.nav__search input:focus { outline: 2px solid rgba(47,79,143,0.35); border-color: var(--stamp-blue); }
.nav__search ~ .nav__trash, .nav__search ~ .nav__sound { margin-left: 0; }
.nav__sound { margin-left: auto; background: none; border: 0; font-size: 18px; cursor: pointer; opacity: .75; padding: 6px; line-height: 1; }
.nav__sound:hover { opacity: 1; } .nav__sound.off { opacity: .45; }
.nav__word { font-family: var(--font-hand); font-size: 26px; font-weight: 700; white-space: nowrap; }
.crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--font-type); font-size: 14px; color: var(--muted); overflow: hidden; white-space: nowrap; }
.crumbs a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dashed var(--line); }
.crumbs a:hover { color: var(--stamp); }
.crumbs .sep { opacity: 0.6; }
.crumbs .cur { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }

/* ===== LAYOUT ===== */
#app { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 28px 20px 60px; }
.view { animation: pagein .45s ease both; }
@keyframes pagein { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.page-title {
  font-family: var(--font-hand); font-size: 44px; font-weight: 700; margin: 46px 0 18px;
  display: flex; align-items: center; gap: 12px;
}
.page-title__pin { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8c8c, var(--stamp) 60%, #7a1d1d); box-shadow: 0 2px 4px rgba(0,0,0,0.35); }
.empty { color: var(--muted); font-size: 15px; margin: 30px 0; }
.empty a { color: var(--stamp); }

/* ===== COVER ===== */
.cover { position: relative;
  position: relative;
  background: var(--card);
  border: 1px solid rgba(60,45,20,0.08);
  box-shadow: var(--shadow-card);
  padding: 58px 48px 40px;
  margin: 18px auto 0; max-width: 820px;
  transform: rotate(-0.6deg);
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(60,45,20,0.07) 31px 32px);
}
.cover__stamp {
  position: absolute; right: 34px; top: 28px;
  width: 112px; height: 112px; border-radius: 50%;
  border: 3px double var(--stamp); color: var(--stamp);
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-type); font-size: 13px; line-height: 1.15; padding: 14px;
  transform: rotate(14deg); opacity: 0.78; mix-blend-mode: multiply;
}
.cover__stamp::before { content: "✈"; display: block; font-size: 26px; margin-bottom: 2px; }
.cover__title { font-family: var(--font-hand); font-size: clamp(54px, 9vw, 92px); font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.cover__tagline { font-family: var(--font-type); color: var(--ink-soft); margin: 14px 0 26px; font-size: 15px; }
.cover__intro p { font-size: 19px; margin: 0 0 12px; max-width: 60ch; }
.cover.has-banner {
  position: relative; background-size: cover; background-position: center; min-height: 400px; max-width: 1100px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.cover.has-banner::before {   /* parchment wash in the middle so the words stay crisp over the map */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 48% 70% at 50% 50%, rgba(246, 230, 195, 0.8), rgba(246, 230, 195, 0.55) 60%, rgba(246, 230, 195, 0) 100%);
}
.cover.has-banner > :not(.tack) { position: relative; }
.cover.has-banner .cover__intro p { margin-left: auto; margin-right: auto; max-width: 48ch; color: #2b2218; }
.cover.has-banner .cover__tagline, .cover.has-banner .cover__stats { color: #4a3a22; justify-content: center; }
.cover.has-banner .cover__title, .cover.has-banner .cover__intro p, .cover.has-banner .cover__tagline { text-shadow: 0 0 10px rgba(246, 230, 195, 0.95), 0 0 3px rgba(246, 230, 195, 0.95); }
.cover.has-banner .cover__stamp { display: none; }   /* the artwork has its own stamps */
.cover__stats { margin-top: 22px; font-size: 13px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; }

/* ===== COUNTRY STACKS (cover page) ===== */
.countries {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 42px 30px;
  padding: 30px 10px 10px;
}
.stack { text-decoration: none; display: block; position: relative; }
.stack__pile { position: relative; height: 230px; }
.stack__card {
  position: absolute; left: 50%; top: 10px; width: 190px;
  background: var(--card); padding: 8px 8px 30px;
  box-shadow: var(--shadow-photo);
  transform: translateX(-50%) rotate(var(--r, 0deg));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.stack__card img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; background: var(--paper-2); }
.stack__card.empty { aspect-ratio: auto; height: 200px; display: grid; place-items: center; color: var(--muted); font-family: var(--font-hand); font-size: 22px; }
.stack__card:nth-child(1) { --r: -8deg; }
.stack__card:nth-child(2) { --r: 5deg; }
.stack__card:nth-child(3) { --r: -1deg; }
.stack:hover .stack__card:nth-child(1) { transform: translateX(-62%) rotate(-13deg); }
.stack:hover .stack__card:nth-child(2) { transform: translateX(-40%) rotate(9deg); }
.stack:hover .stack__card:nth-child(3) { transform: translateX(-50%) rotate(0deg) translateY(-8px); box-shadow: var(--shadow-lift); }
.stack__stamp {
  position: absolute; left: 6px; bottom: 8px; z-index: 2;
  min-width: 92px; height: 92px; padding: 10px 12px; border-radius: 50%;
  border: 2px solid var(--stamp-blue); color: var(--stamp-blue);
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-type); font-size: 11px; line-height: 1.1; text-transform: uppercase;
  transform: rotate(-16deg); opacity: 0.8; mix-blend-mode: multiply;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--stamp-blue);
  pointer-events: none;
}
.stack__stamp b { display: block; font-size: 24px; font-weight: 400; line-height: 1; }
/* paper label under each stack so the words read over the busy backdrop */
.stack__label { display: table; margin: 14px auto 0; padding: 8px 16px 9px; background: var(--card); color: var(--ink); text-align: center;
  box-shadow: 0 1px 2px rgba(40,30,10,0.3), 0 6px 14px rgba(40,30,10,0.28); transform: rotate(-1.2deg); position: relative; }
.stack:nth-child(2n) .stack__label { transform: rotate(1deg); }
.stack__label::before { content: ""; position: absolute; left: 50%; top: -8px; width: 46px; height: 14px; transform: translateX(-50%) rotate(-3deg); background: var(--tape-1); opacity: .9;
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px)); mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px)); }
.stack__name { font-family: var(--font-hand); font-size: 32px; font-weight: 700; line-height: 1; }
.stack__meta { font-family: var(--font-type); font-size: 12px; color: var(--soft); margin-top: 4px; white-space: nowrap; }
.stack__stamp { background: rgba(255, 253, 248, 0.96); mix-blend-mode: normal; opacity: 1; box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--stamp-blue), 0 2px 6px rgba(40,30,10,0.35); }
.view--home .page-title { display: inline-flex; background: var(--card); color: var(--ink); padding: 6px 18px 8px 14px; box-shadow: 0 1px 2px rgba(40,30,10,0.3), 0 6px 14px rgba(40,30,10,0.28); transform: rotate(-1deg); }

/* ===== COUNTRY PAGE ===== */
.chead { position: relative; padding: 30px 0 10px 0; text-align: left; }
.chead__stamp {
  float: right; margin: -10px 10px 10px 20px;
  width: 128px; height: 128px; border-radius: 50%;
  border: 3px double var(--stamp); color: var(--stamp);
  display: grid; place-items: center; text-align: center; align-content: center;
  font-family: var(--font-type); font-size: 12px; text-transform: uppercase; line-height: 1.15; padding: 12px;
  transform: rotate(12deg); opacity: 0.8; mix-blend-mode: multiply;
}
.chead__flag { font-size: 34px; line-height: 1; }
.chead__title { font-family: var(--font-hand); font-size: clamp(50px, 8vw, 80px); font-weight: 700; line-height: 1; }
.chead__blurb { font-size: 19px; max-width: 64ch; margin-top: 10px; }
.chead__meta { color: var(--muted); font-size: 13px; margin-top: 10px; }

.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 44px 32px; padding: 30px 6px 20px; clear: both; }
.polaroid {
  position: relative; display: block; text-decoration: none; color: var(--ink);
  background: var(--card); padding: 12px 12px 14px; box-shadow: var(--shadow-photo);
  transform: rotate(var(--r, 0deg)); transition: transform .3s, box-shadow .3s;
}
.polaroid:hover { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: var(--shadow-photo-lift); z-index: 2; }
.polaroid:nth-child(4n+1) { --r: -2.2deg; } .polaroid:nth-child(4n+2) { --r: 1.6deg; }
.polaroid:nth-child(4n+3) { --r: -0.8deg; } .polaroid:nth-child(4n+4) { --r: 2.4deg; }
.polaroid__img { width: 100%; aspect-ratio: 1 / 0.9; object-fit: cover; background: var(--paper-2); }
.polaroid__title { font-family: var(--font-hand); font-size: 30px; font-weight: 700; line-height: 1.05; margin-top: 12px; }
.polaroid__date { font-family: var(--font-type); font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ===== THUMBTACKS (push pins; SVG art in assets/img/pins/) ===== */
.tack {
  position: absolute; top: -17px; left: 50%; width: 30px; height: 40px; z-index: 3; pointer-events: none;
  --pin: url("../assets/img/pins/pin-red.svg");
  background: var(--pin) center / contain no-repeat;
  transform: translateX(-50%) rotate(var(--tr, 0deg)); transform-origin: 50% 70%;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}
.tack--blue   { --pin: url("../assets/img/pins/pin-blue.svg"); }
.tack--yellow { --pin: url("../assets/img/pins/pin-yellow.svg"); }
.tack--green  { --pin: url("../assets/img/pins/pin-green.svg"); }
.tack--white  { --pin: url("../assets/img/pins/pin-white.svg"); }
.tack--tl { left: 26px; top: -6px; transform: rotate(-14deg); width: 34px; height: 45px; }
.tack--tr { left: auto; right: 26px; top: -6px; transform: rotate(12deg); width: 34px; height: 45px; }
.shot:nth-child(4n+1) .tack { --pin: url("../assets/img/pins/pin-blue.svg"); left: 50%; --tr: -6deg; }
.shot:nth-child(4n+2) .tack { --pin: url("../assets/img/pins/pin-yellow.svg"); left: 26px; --tr: 8deg; }
.shot:nth-child(4n+3) .tack { --pin: url("../assets/img/pins/pin-green.svg"); left: auto; right: 10px; transform: rotate(-10deg); }
.shot:nth-child(4n+4) .tack { --pin: url("../assets/img/pins/pin-red.svg"); left: 50%; --tr: 4deg; }
.shot:nth-child(9n+5) .tack { --pin: url("../assets/img/pins/pin-white.svg"); }
.polaroid:nth-child(3n+1) .tack { --pin: url("../assets/img/pins/pin-red.svg"); --tr: -5deg; }
.polaroid:nth-child(3n+2) .tack { --pin: url("../assets/img/pins/pin-blue.svg"); --tr: 7deg; }
.polaroid:nth-child(3n+3) .tack { --pin: url("../assets/img/pins/pin-yellow.svg"); --tr: -2deg; }
.ahead .tack--tl, .chead .tack--tl, .cover .tack--tl { --pin: url("../assets/img/pins/pin-red.svg"); }
.ahead .tack--tr, .chead .tack--tr, .cover .tack--tr { --pin: url("../assets/img/pins/pin-blue.svg"); }
.map .tack--tl { --pin: url("../assets/img/pins/pin-green.svg"); left: 18px; top: -12px; }
.map .tack--tr { --pin: url("../assets/img/pins/pin-yellow.svg"); right: 18px; top: -12px; }

/* ===== POSTCARD EDGES on the banner cards ===== */
.ahead.has-banner, .chead.has-banner {
  border: 8px solid #fbf6ea; border-radius: 4px; background-clip: padding-box; background-origin: padding-box;
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(60,45,20,0.22);
}
.ahead.has-banner::before, .chead.has-banner::before { border-radius: 0; }
.ahead.has-banner::after, .chead.has-banner::after {   /* hairline inside the white border, like a printed postcard */
  content: ""; position: absolute; inset: -5px; border: 1px solid rgba(60,45,20,0.22); border-radius: 2px; pointer-events: none;
}

/* ===== ALBUM PAGE ===== */
.ahead {
  position: relative; background: var(--card); box-shadow: var(--shadow);
  padding: 40px 42px 30px; margin: 22px auto 0; max-width: 860px; transform: rotate(0.4deg); box-shadow: var(--shadow-card);
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(60,45,20,0.07) 31px 32px);
}
.ahead.has-banner { background-image: none; background-size: cover; background-position: right center; min-height: 380px; max-width: 1100px; display: flex; flex-direction: column; justify-content: center; }
.ahead.has-banner .ahead__notes, .ahead.has-banner .ahead__date { max-width: 46%; }
.ahead.has-banner .ahead__title, .ahead.has-banner .ahead__notes, .ahead.has-banner .ahead__date, .ahead.has-banner .ahead__country { text-shadow: 0 0 10px rgba(243, 226, 190, 0.9), 0 0 2px rgba(243, 226, 190, 0.9); }
.ahead.has-banner .ahead__actions .btn { background: rgba(255, 253, 248, 0.75); }
.ahead.has-banner, .chead.has-banner { position: relative; box-shadow: var(--shadow-card); }
.ahead.has-banner::before, .chead.has-banner::before {   /* soft parchment wash so the words stay readable over the sketches */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(246, 230, 195, 0.78) 0%, rgba(246, 230, 195, 0.62) 34%, rgba(246, 230, 195, 0) 58%);
}
.ahead.has-banner > :not(.tack), .chead.has-banner > :not(.tack) { position: relative; }
.ahead.has-banner .ahead__date, .chead.has-banner .chead__meta { color: #4a3a22; }
.ahead.has-banner .ahead__notes, .chead.has-banner .chead__blurb { color: #2b2218; }
.ahead__banner { display: block; width: calc(100% + 84px); max-width: none; margin: -40px -42px 22px; height: 300px; object-fit: cover; }
.ahead__country { font-size: 13px; color: var(--stamp); text-transform: uppercase; }
.ahead__country a { color: inherit; text-decoration: none; }
.ahead__title { font-family: var(--font-hand); font-size: clamp(44px, 7vw, 70px); font-weight: 700; line-height: 1; margin-top: 4px; }
.ahead__date { font-size: 13px; color: var(--muted); margin-top: 8px; }
.ahead__notes { margin-top: 16px; font-size: 19px; }
.ahead__notes p { margin: 0 0 10px; }
.ahead__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn {
  background: transparent; border: 1.5px solid var(--ink-soft); color: var(--ink-soft);
  padding: 7px 14px; font-size: 13px; cursor: pointer; text-decoration: none; border-radius: 3px;
  transition: all .2s;
}
.btn:hover { background: var(--ink); color: var(--card); border-color: var(--ink); }

/* index tabs under the album card: Photos / Videos */
.tabs { display: flex; gap: 6px; max-width: 860px; margin: 26px auto 0; padding: 0 8px; }
.ahead.has-banner ~ .tabs { max-width: 1100px; }
.tab {
  font-family: var(--font-type); font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  background: var(--paper-2); color: var(--ink-soft); border: 1px solid rgba(60,45,20,0.18); border-bottom: 0;
  padding: 10px 22px 8px; border-radius: 8px 8px 0 0; cursor: pointer; position: relative; top: 4px;
  box-shadow: 0 -2px 6px rgba(40,30,10,0.08); transition: top .15s, background .15s;
}
.tab:hover { top: 1px; }
.tab.is-on { background: var(--card); color: var(--ink); top: 0; box-shadow: var(--shadow); z-index: 1; }
.tab.is-on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--stamp); border-radius: 2px 2px 0 0; }
.tabs + .grid { padding-top: 34px; border-top: 1px solid rgba(60,45,20,0.18); }
/* real columns (filled by layoutGrid in main.js); --cols is the only knob the breakpoints below touch */
.grid { --cols: 3; padding: 40px 6px 10px; }
.cols { display: flex; align-items: flex-start; gap: 0 28px; }
.grid__col { flex: 1 1 0; min-width: 0; }
/* day dividers: one strip of columns per day of the trip */
.day + .day { margin-top: 18px; }
.day__head { display: flex; align-items: center; gap: 12px; margin: 0 4px 22px; font-size: 13px; color: #3a2e1c; font-weight: 400; }
.day__head::after { content: ""; flex: 1; border-bottom: 1px dashed rgba(60,45,20,0.45); }
.day__n { background: var(--card); color: var(--stamp); padding: 4px 11px 3px; box-shadow: 0 1px 2px rgba(40,30,10,0.3), 0 4px 10px rgba(40,30,10,0.25); transform: rotate(-1.5deg); font-weight: 700; letter-spacing: .04em; }
.day__date { background: rgba(255,253,248,0.85); padding: 3px 9px; box-shadow: 0 1px 2px rgba(40,30,10,0.2); }
/* multi-select */
.shot__pick { position: absolute; top: 16px; left: 16px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,0.35); z-index: 4; cursor: pointer; opacity: 0; transition: opacity .15s; display: grid; place-items: center; color: #fff; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.shot:hover .shot__pick, body.picking .shot__pick { opacity: 1; }
.shot.is-picked { outline: 4px solid #2f6fb0; outline-offset: 2px; }
.shot.is-picked .shot__pick { background: #2f6fb0; border-color: #fff; } .shot.is-picked .shot__pick::after { content: "✓"; }
.selbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 900; background: var(--ink); color: var(--card); display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px 10px; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); font-size: 12.5px; max-width: calc(100vw - 24px); }
.selbar__count { padding: 0 8px; font-weight: 700; }
.selbar button { background: none; border: 1px solid rgba(255,255,255,0.28); color: inherit; font: inherit; padding: 5px 9px; border-radius: 4px; cursor: pointer; }
.selbar button:hover { background: rgba(255,255,255,0.14); }
.selbar button.armed, .selbar .selbar__danger:hover { background: var(--stamp); border-color: var(--stamp); }
/* hidden albums (local only) */
.polaroid__hidden, .ahead__hidden { position: absolute; top: 14px; right: -8px; background: var(--stamp); color: #fff; font-size: 11px; padding: 3px 10px; transform: rotate(5deg); box-shadow: 0 2px 6px rgba(0,0,0,0.3); z-index: 3; letter-spacing: .04em; }
.ahead__hidden { top: 18px; right: 18px; transform: rotate(3deg); }
/* fix dates */
.mover__card--wide { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.dater__label { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-top: 4px; }
.dater__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dater__row input, .dater__item input { font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); flex: 1; min-width: 160px; }
.dater__items { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 50vh; overflow: auto; }
.dater__item { display: flex; gap: 10px; align-items: center; font-size: 12px; }
.dater__item img { width: 46px; height: 46px; object-fit: cover; flex: none; background: var(--paper-2); }
.dater__item .orig { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.dater__item input { flex: 0 0 170px; }
.shot {
  display: block; margin: 0 0 34px; position: relative;
  background: var(--card); padding: 10px 10px 12px; box-shadow: var(--shadow-photo);
  transform: rotate(var(--r, 0deg)); transition: transform .3s, box-shadow .3s; cursor: zoom-in;
  text-decoration: none; color: var(--ink);
}
.shot:hover { transform: rotate(0deg) scale(1.03); box-shadow: var(--shadow-photo-lift); z-index: 2; }
.shot:nth-child(5n+1) { --r: -1.8deg; } .shot:nth-child(5n+2) { --r: 1.4deg; } .shot:nth-child(5n+3) { --r: -0.6deg; }
.shot:nth-child(5n+4) { --r: 2.1deg; } .shot:nth-child(5n+5) { --r: -1.1deg; }
.shot__img { width: 100%; background: var(--paper-2); overflow: hidden; }
.shot__img img { width: 100%; height: 100%; object-fit: cover; }
.shot__cap { font-family: var(--font-hand); font-size: 23px; line-height: 1.1; margin-top: 10px; min-height: 12px; word-wrap: break-word; }
body.cap-typewriter .shot__cap, body.cap-typewriter .lb__caption { font-family: var(--font-type); font-size: 14px; line-height: 1.4; }
.shot__cap:empty { margin-top: 4px; }
.shot__meta { font-family: var(--font-type); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.shot__where { display: block; font-size: 10.5px; color: var(--ink-soft); margin-top: 1px; }
.shot--video .shot__img { position: relative; }
.shot__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%);
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 253, 248, 0.85);
  display: grid; place-items: center; font-size: 22px; color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  pointer-events: none;
}
.shot__play::after { content: "▶"; margin-left: 4px; }
.shot__dur { position: absolute; right: 16px; top: 16px; background: rgba(20,18,15,0.7); color: #fff; font-family: var(--font-type); font-size: 11px; padding: 2px 7px; border-radius: 2px; }

/* ===== FOOTER ===== */
.foot { position: relative; z-index: 1; text-align: center; padding: 40px 20px 60px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.foot__links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.foot__links a { font-family: var(--font-type); font-size: 13px; color: var(--ink-soft); text-decoration: none; border-bottom: 1px dashed var(--line); }
.foot__links a:hover { color: var(--stamp); }
.foot__note { margin-bottom: 6px; }
.foot__by a { color: var(--ink-soft); }

/* ===== LIGHTBOX ===== */
.lb {
  position: fixed; inset: 0; z-index: 100; background: rgba(26, 23, 20, 0.96);
  display: flex; align-items: center; justify-content: center; animation: fade .2s ease;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.lb__fig {
  max-width: min(96vw, 1400px); max-height: 100vh; display: flex; flex-direction: column; align-items: center;
  background: var(--card); padding: 14px 14px 12px; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: pop .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes pop { from { transform: scale(.94); opacity: 0 } to { transform: none; opacity: 1 } }
/* the back of the photo: flip the whole print over */
.lb { perspective: 2200px; }
.lb__fig { position: relative; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,.1,.2,1); }
.lb.flipped .lb__fig { transform: rotateY(180deg); }
.lb__media, .lb__cap { backface-visibility: hidden; }
.lb__back { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; overflow: auto; padding: 36px 40px 30px;
  background: #f7f0e2 repeating-linear-gradient(transparent 0 35px, rgba(60,45,20,0.14) 35px 36px); background-origin: content-box;
  font-family: var(--font-hand); font-size: 27px; line-height: 36px; color: #28407a; display: flex; flex-direction: column; }
.lb:not(.flipped) .lb__back { pointer-events: none; }
.back__stamp { position: absolute; top: 22px; right: 26px; width: 74px; height: 90px; border: 2px dashed rgba(60,45,20,0.4); border-radius: 2px; }
.back__stamp::after { content: "PLACE\A STAMP\A HERE"; white-space: pre; position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 9px/1.4 var(--font-type); color: rgba(60,45,20,0.45); letter-spacing: .1em; }
.back__row { display: flex; gap: 14px; align-items: baseline; }
.back__k { font-size: 10.5px; color: var(--muted); flex: 0 0 66px; text-transform: uppercase; letter-spacing: .1em; }
.back__v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.back__cap { margin-top: 22px; font-size: 31px; color: #1f2d5a; }
.lb__back a { color: inherit; }
@media (max-width: 720px) { .lb__back { padding: 24px 18px; font-size: 22px; line-height: 30px; } .back__stamp { display: none; } }
.lb__media { display: grid; place-items: center; }
.lb__media img, .lb__media video { max-width: calc(96vw - 28px); max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; background: #000; }
.lb__media img { background: var(--paper-2); }
.lb__cap { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 10px; color: var(--ink); }
.lb__caption { font-family: var(--font-hand); font-size: 26px; line-height: 1.1; }
.lb__caption:empty + .lb__meta { margin-left: auto; }
.lb__meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lb__close, .lb__nav {
  position: fixed; background: none; border: 0; color: #fff; cursor: pointer; opacity: 0.75; transition: opacity .2s; z-index: 2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.lb__close:hover, .lb__nav:hover { opacity: 1; }
.lb__close { top: 10px; right: 16px; font-size: 44px; line-height: 1; }
.lb__nav { top: 50%; transform: translateY(-50%); font-size: 70px; line-height: 1; padding: 20px 14px; }
.lb__nav--prev { left: 6px; } .lb__nav--next { right: 6px; }
.lb__count { position: fixed; left: 18px; top: 18px; color: rgba(255,255,255,0.7); font-size: 13px; }
.lb__tools { position: fixed; left: 18px; bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 2; }
.lb__tool { background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.4); color: #fff; font-family: var(--font-type); font-size: 12px; padding: 6px 11px; cursor: pointer; opacity: .85; border-radius: 3px; text-decoration: none; line-height: 1.2; }
.lb__tool:hover, .lb__tool.on { opacity: 1; background: rgba(255,255,255,0.18); }
.lb__tool--danger { border-color: rgba(255,120,110,0.7); color: #ffb3ad; }
.lb__tool--danger.armed { background: var(--stamp); color: #fff; border-color: var(--stamp); opacity: 1; }
.lb:fullscreen { background: #000; }
.lb:fullscreen .lb__media img, .lb:fullscreen .lb__media video { max-width: 100vw; max-height: calc(100vh - 70px); }

/* ===== RIGHT-CLICK MENU ===== */
.ctx { position: fixed; z-index: 1000; min-width: 190px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 4px; box-shadow: 0 8px 24px rgba(40,30,10,0.35), 0 1px 2px rgba(0,0,0,0.2); display: flex; flex-direction: column; }
.ctx__item { text-align: left; background: none; border: 0; font: inherit; font-size: 12.5px; color: var(--ink); padding: 7px 10px; border-radius: 3px; cursor: pointer; }
.ctx__item:hover { background: rgba(60,45,20,0.08); }
.ctx__item--danger { color: var(--stamp); border-top: 1px solid var(--line); margin-top: 3px; border-radius: 0 0 3px 3px; }
.ctx__item--danger.armed { background: var(--stamp); color: #fff; }

/* ===== SEND TO ALBUM ===== */
.mover { position: fixed; inset: 0; z-index: 1100; background: rgba(30, 22, 10, 0.55); display: grid; place-items: center; padding: 16px; }
.mover__card { position: relative; background: var(--card); width: min(440px, 100%); padding: 28px 26px 22px; box-shadow: var(--shadow-card); transform: rotate(-0.6deg); display: flex; flex-direction: column; gap: 10px; }
.mover__title { font-family: var(--font-hand); font-size: 34px; line-height: 1; }
.mover__what { font-size: 12px; color: var(--muted); margin-top: -4px; }
.mover__row { font-size: 14px; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.mover__select, .mover__new input { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); width: 100%; }
.mover__select:disabled { opacity: .45; }
.mover__new { display: flex; flex-direction: column; gap: 8px; }
.mover__new textarea { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); width: 100%; resize: vertical; }
.cover__actions { margin-top: 16px; display: flex; justify-content: center; }
.cover__actions:empty, .chead__actions:empty { display: none; }
.chead__actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.lb__tool.busy, .btn.busy { opacity: .6; pointer-events: none; }
.mover__actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.btn--primary { background: var(--ink); color: var(--card); border-color: var(--ink); }
.btn--primary:hover { background: #000; }
.btn:disabled { opacity: .5; cursor: default; }

/* ===== NOTES ON THE BOARD (sticky / ticket / label items) ===== */
.grid .empty { background: var(--card); display: inline-block; padding: 12px 18px; box-shadow: var(--shadow); color: var(--ink-soft); margin: 10px 6px; }
.note { cursor: default; white-space: pre-wrap; overflow-wrap: anywhere; }
body.picking .note, .note:hover { transform: rotate(var(--r, 0deg)); box-shadow: var(--shadow-photo); }
.note[data-color="yellow"] { --nc: #fff3a8; } .note[data-color="pink"] { --nc: #ffd1dc; } .note[data-color="blue"] { --nc: #cfe6ff; }
.note[data-color="green"] { --nc: #d6f5c9; } .note[data-color="cream"] { --nc: #fff8e6; }
.note--sticky { background: var(--nc, #fff3a8); padding: 26px 20px 30px; font-family: var(--font-hand); font-size: 25px; line-height: 1.2; color: #3a3220; min-height: 150px; box-shadow: 0 1px 2px rgba(40,30,10,0.25), 0 10px 18px rgba(40,30,10,0.22); }
.note--sticky::after { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 28px 28px; border-color: transparent transparent rgba(255,253,248,0.95) transparent; filter: drop-shadow(-2px -2px 2px rgba(0,0,0,0.14)); }
.note--ticket { background: var(--nc, #f6e7b8); background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgba(60,45,20,0.05) 10px 11px); border: 1px dashed rgba(60,45,20,0.45); border-radius: 6px; padding: 16px 18px 14px 46px; font-family: var(--font-type); font-size: 14px; line-height: 1.45; color: #4a3a22; }
.note--ticket::before { content: "ADMIT ONE"; position: absolute; left: 20px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); font-size: 9px; letter-spacing: .32em; opacity: .65; border-top: 1px solid rgba(60,45,20,0.45); border-bottom: 1px solid rgba(60,45,20,0.45); padding: 3px 0; white-space: nowrap; }
.note--label { background: var(--nc, #fffdf2); border: 1px solid rgba(60,45,20,0.25); border-radius: 3px; padding: 16px 18px 14px; font-family: var(--font-hand); font-size: 23px; line-height: 1.2; color: #2b2a28; }
.note .shot__meta { margin-top: 10px; white-space: normal; }
.note--sticky .shot__meta, .note--label .shot__meta { font-size: 11px; }
body.local .note { cursor: pointer; }
.noter__opts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; align-items: center; }
.noter__opts label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
#noterColors input { position: absolute; opacity: 0; width: 0; height: 0; }
#noterColors span { width: 26px; height: 26px; border-radius: 4px; background: var(--nc); border: 2px solid rgba(60,45,20,0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
#noterColors input:checked + span { border-color: var(--ink); transform: scale(1.1); }

/* ===== DUPLICATE FINDER (local only) ===== */
.dupes { max-width: 1120px; margin: 24px auto 40px; display: flex; flex-direction: column; gap: 22px; }
.dupes__loose input { vertical-align: middle; width: 120px; }
.dgroup { background: var(--card); padding: 14px 16px 16px; box-shadow: var(--shadow-card); position: relative; transform: rotate(-0.2deg); }
.dgroup:nth-child(2n) { transform: rotate(0.25deg); }
.dgroup__head { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; }
.dgroup__head .linkbtn { background: none; border: 0; color: var(--stamp-blue); text-decoration: underline; cursor: pointer; font: inherit; }
.dgroup__row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.dcard { width: 200px; display: flex; flex-direction: column; gap: 6px; background: var(--paper); padding: 8px; border: 1px solid var(--line); }
.dcard img { width: 100%; height: 150px; object-fit: contain; background: #e8e0cf; }
.dcard__meta { font-size: 10.5px; color: var(--ink-soft); line-height: 1.5; }
.dcard__meta b { color: var(--ink); }
.dcard .btn { font-size: 11px; padding: 5px 8px; }
.dcard.is-gone { opacity: .35; pointer-events: none; }
.dupes__none { background: var(--card); padding: 18px 22px; box-shadow: var(--shadow); font-size: 15px; }

/* ===== TRIP MAP (album page) ===== */
.tripmap { position: relative; background: var(--card); padding: 14px 14px 12px; margin: 26px auto 0; max-width: 860px; box-shadow: var(--shadow-card); transform: rotate(0.3deg); }
.tripmap__title { font-size: 13px; color: var(--ink-soft); margin: 0 0 10px 4px; display: flex; gap: 10px; align-items: baseline; font-weight: 400; }
.tripmap__map { height: 340px; background: var(--paper-2); }
.tripmap__map .leaflet-tile-pane { filter: sepia(.4) saturate(.7) contrast(.95); }
.tripmap__map .leaflet-control-attribution { font: 10px var(--font-type); background: rgba(255,253,248,0.75); }
.tripmap__map .leaflet-tooltip { font-family: var(--font-hand); font-size: 17px; background: var(--card); border: 0; box-shadow: var(--shadow); }
.trip-dot { cursor: pointer; transition: r .15s; }
@media (max-width: 720px) { .tripmap { margin-top: 18px; padding: 10px; transform: none; } .tripmap__map { height: 240px; } }

/* ===== PASSPORT ===== */
.passport { max-width: 900px; margin: 14px auto 30px; }
.passport__cover { position: relative; background: linear-gradient(135deg, #1f2d55, #16203f 60%, #1b2748); color: #d9b86a; text-align: center; padding: 46px 30px 38px; border-radius: 8px 16px 16px 8px; box-shadow: var(--shadow-card), inset 0 0 0 3px rgba(217,184,106,0.35), inset 0 0 0 6px rgba(0,0,0,0.25); }
.passport__cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: linear-gradient(90deg, rgba(0,0,0,0.35), transparent); border-radius: 8px 0 0 8px; }
.passport__emblem { width: 92px; height: 92px; margin: 0 auto 14px; border: 2px solid rgba(217,184,106,0.8); border-radius: 50%; display: grid; place-items: center; font-size: 42px; box-shadow: inset 0 0 0 4px rgba(217,184,106,0.18); }
.passport__title { font-family: var(--font-type); font-size: clamp(30px, 6vw, 46px); letter-spacing: .3em; text-transform: uppercase; font-weight: 400; }
.passport__sub { margin-top: 8px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.passport__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; background: var(--card); padding: 18px 22px; margin: 0 14px; box-shadow: var(--shadow); font-size: 12.5px; color: var(--ink-soft); }
.passport__stats b { display: block; font-size: 26px; color: var(--ink); line-height: 1.1; }
.passport__stats span { text-align: center; min-width: 90px; }
.passport__pages { position: relative; margin: 0 14px; background: var(--card); padding: 34px 26px 40px; box-shadow: var(--shadow-card); display: flex; flex-wrap: wrap; gap: 30px 26px; justify-content: center; align-items: center;
  background-image: repeating-radial-gradient(circle at 50% 50%, rgba(47,79,143,0.045) 0 2px, transparent 2px 9px), repeating-linear-gradient(45deg, rgba(178,46,46,0.03) 0 3px, transparent 3px 14px); }
.pstamp { --ink: #b22e2e; position: relative; width: 196px; min-height: 126px; border: 3px double var(--ink); border-radius: 12px; color: var(--ink); padding: 12px 10px 10px; text-align: center; font-family: var(--font-type);
  transform: rotate(var(--r, -4deg)); mix-blend-mode: multiply; opacity: .9; text-decoration: none; display: flex; flex-direction: column; justify-content: center; gap: 2px; transition: transform .2s; }
.pstamp:hover { transform: rotate(0deg) scale(1.04); opacity: 1; }
.pstamp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(115deg, transparent 0 7px, rgba(255,253,248,0.35) 7px 8px); pointer-events: none; }
.pstamp--round { width: 176px; height: 176px; border-radius: 50%; padding: 18px; }
.pstamp--oval { border-radius: 50% / 42%; width: 206px; padding: 16px 18px; }
.pstamp__flag { font-size: 26px; line-height: 1; }
.pstamp__name { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; line-height: 1.15; }
.pstamp__years { font-size: 12px; letter-spacing: .08em; margin-top: 3px; }
.pstamp__n { font-size: 10.5px; opacity: .85; }
.pstamp__word { font-size: 10px; letter-spacing: .3em; margin-top: 5px; border-top: 1px solid var(--ink); padding-top: 4px; }
.pstamp:nth-child(5n+1) { --ink: #b22e2e; --r: -5deg; } .pstamp:nth-child(5n+2) { --ink: #2f4f8f; --r: 4deg; } .pstamp:nth-child(5n+3) { --ink: #2e6b3a; --r: -2deg; }
.pstamp:nth-child(5n+4) { --ink: #5b2d7a; --r: 6deg; } .pstamp:nth-child(5n+5) { --ink: #3a3a3a; --r: -7deg; }
@media (max-width: 720px) { .passport__pages { gap: 22px 14px; padding: 24px 12px; } .pstamp { width: 150px; min-height: 104px; } .pstamp--round { width: 140px; height: 140px; } .pstamp--oval { width: 160px; } }

/* ===== TRASH CAN ===== */
.nav__trash { margin-left: auto; margin-right: 10px; font-size: 12px; color: var(--soft); text-decoration: none; border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px; background: rgba(255,253,248,0.7); }
.nav__trash:hover { color: var(--stamp); border-color: var(--stamp); }
.nav__trash:not([hidden]) + .nav__sound { margin-left: 0; }
.thead { position: relative; background: var(--card); box-shadow: var(--shadow-card); padding: 40px 42px 30px; margin: 22px auto 0; max-width: 860px; transform: rotate(-0.3deg); }
.thead__title { font-family: var(--font-hand); font-size: clamp(44px, 7vw, 70px); font-weight: 700; line-height: 1; }
.thead__blurb { margin-top: 10px; color: var(--soft); max-width: 60ch; }
.thead__actions { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn--danger { color: var(--stamp); border-color: rgba(178,46,46,0.45); }
.btn--danger.armed, .btn--small.btn--danger.armed { background: var(--stamp); color: #fff; border-color: var(--stamp); }
.btn--danger:disabled { opacity: .45; cursor: default; }
.btn--small { font-size: 11px; padding: 4px 8px; }
.shot--trash { cursor: default; }
.shot--trash:hover { transform: rotate(var(--r, 0deg)); }
.shot__actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.shot__actions .btn.armed { background: var(--stamp); color: #fff; border-color: var(--stamp); }
.small { font-size: 12px; color: var(--muted); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) { .grid { --cols: 2; } }
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav { padding: 0 16px; gap: 12px; }
  .nav__word { font-size: 22px; }
  .crumbs { font-size: 12px; }
  #app { padding: 18px 16px 50px; overflow-x: clip; }
  .cover { padding: 44px 24px 28px; transform: none; }
  .cover.has-banner { min-height: 330px; }
  .cover.has-banner .cover__title { padding-right: 0; }
  .cover__title { padding-right: 84px; }
  .cover__stamp { width: 84px; height: 84px; font-size: 10px; right: 10px; top: 10px; padding: 8px; }
  .cover__stamp::before { font-size: 20px; }
  .cover__intro p { font-size: 17px; }
  .page-title { font-size: 36px; margin-top: 36px; }
  .countries { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 14px; padding: 16px 0; }
  .stack__pile { height: 190px; }
  .stack__card { width: 150px; padding: 6px 6px 22px; }
  .stack__stamp { min-width: 74px; height: 74px; font-size: 9.5px; left: 0; bottom: 0; padding: 6px 8px; }
  .stack__stamp b { font-size: 20px; }
  .stack__name { font-size: 27px; }
  .chead__stamp { width: 96px; height: 96px; font-size: 10px; margin: 0 0 8px 12px; }
  .chead__flag { font-size: 26px; }
  .albums { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 16px; padding: 20px 0; }
  .polaroid { padding: 8px 8px 10px; }
  .polaroid__title { font-size: 23px; }
  .ahead { padding: 30px 22px 22px; transform: none; }
  .ahead__banner { width: calc(100% + 44px); margin: -30px -22px 16px; height: 180px; }
  .ahead.has-banner { min-height: 300px; background-position: left center; }
  .ahead.has-banner .ahead__notes, .ahead.has-banner .ahead__date { max-width: none; }
  .grid { --cols: 2; gap: 0 14px; padding: 24px 0 0; }
  .tabs { margin-top: 18px; padding: 0 4px; } .tab { padding: 9px 16px 7px; font-size: 13px; flex: 1; }
  .shot { margin-bottom: 18px; padding: 7px 7px 8px; }
  .shot__cap { font-size: 19px; }
  .shot__play { width: 42px; height: 42px; font-size: 16px; }
  .lb__fig { padding: 8px 8px 8px; max-width: 100vw; }
  .lb__media img, .lb__media video { max-width: calc(100vw - 16px); max-height: calc(100vh - 110px); }
  .lb__caption { font-size: 21px; }
  .lb__nav { font-size: 48px; padding: 30px 6px; }
  .lb__close { font-size: 38px; }
  .lb__count { top: 12px; }
}
@media (max-width: 400px) { .grid { --cols: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===== COUNTRY PAGE WITH ARTWORK ===== */
.view--country.has-bg .chead__meta { display: inline-block; background: rgba(255, 253, 248, 0.82); padding: 4px 10px; border-radius: 3px; }
.view--country.has-bg .chead__blurb { background: rgba(255, 253, 248, 0.82); display: inline-block; padding: 6px 12px; }
@media (min-width: 900px) {
  .view--country.has-bg .chead__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }  /* the artwork carries the name */
  .view--country.has-bg .chead { padding-top: 6vh; }
  .view--country.has-bg .chead__stamp { display: none; }   /* the artwork has its own stamp */
  .view--country.has-bg .albums { padding-top: 24vh; }
}

/* ===== WORLD MAP (cover) ===== */
.map {
  position: relative; margin: 36px auto 0; max-width: 1100px; padding: 18px;
  background: #ead9b7;
  background-image: radial-gradient(ellipse at 50% 35%, rgba(255, 250, 235, 0.65), rgba(255, 250, 235, 0) 60%), radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0), rgba(120, 85, 35, 0.28));
  border: 1px solid rgba(60, 45, 20, 0.16); box-shadow: var(--shadow); transform: rotate(0.4deg);
}
  -webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px)); mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px)); }
.map__frame { position: relative; border: 2px solid rgba(90, 70, 40, 0.4); outline: 1px solid rgba(90, 70, 40, 0.25); outline-offset: 4px; }
.map__svg { display: block; width: 100%; height: auto; }
.map__sphere { fill: #e6d8b9; }
.map__grat { fill: none; stroke: rgba(90, 70, 40, 0.2); stroke-width: .5; stroke-dasharray: 2 3; }
.map__land { fill: #d6c4a0; stroke: #8f7651; stroke-width: .5; stroke-linejoin: round; transition: fill .3s; }
.map__land.is-visited { fill: #d1894a; stroke: #7a4a22; }
.map__route { fill: none; stroke: var(--stamp); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .85; }
.map__pin { cursor: pointer; outline: none; }
.map__ring { fill: rgba(178, 46, 46, 0.18); stroke: rgba(178, 46, 46, 0.55); stroke-width: 1; animation: ping 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ping { 0% { transform: scale(.45); opacity: .95 } 100% { transform: scale(1.7); opacity: 0 } }
.map__dot { fill: var(--stamp); stroke: #fff; stroke-width: 2; transition: transform .2s; transform-origin: center; transform-box: fill-box; }
.map__pin:hover .map__dot, .map__pin:focus .map__dot, .map__pin.is-active .map__dot { transform: scale(1.35); fill: #d4a017; }
.map__label { font-family: var(--font-type); font-size: 12px; fill: #3a2d1b; paint-order: stroke; stroke: #e6d8b9; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.map__hint { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: 10px; opacity: .8; }
.map__preview { position: absolute; z-index: 3; width: 240px; animation: pop .25s cubic-bezier(.2,.8,.2,1); }
.peek { display: block; background: var(--card); padding: 12px 12px 10px; box-shadow: var(--shadow-lift); text-decoration: none; color: var(--ink); transform: rotate(-1.5deg); }
.peek:hover { transform: rotate(0deg) scale(1.02); }
.peek__fan { position: relative; height: 126px; }
.peek__fan img { position: absolute; left: 50%; top: 6px; width: 104px; height: 84px; object-fit: cover; background: var(--card); padding: 5px 5px 16px; box-sizing: content-box; box-shadow: var(--shadow); transform: translateX(-50%) rotate(var(--r, 0deg)); }
.peek__fan img:nth-child(1) { --r: -9deg; margin-left: -36px; } .peek__fan img:nth-child(2) { --r: 7deg; margin-left: 36px; } .peek__fan img:nth-child(3) { --r: -1deg; top: 2px; }
.peek__name { font-family: var(--font-hand); font-size: 28px; font-weight: 700; line-height: 1; margin-top: 4px; }
.peek__meta { font-family: var(--font-type); font-size: 12px; color: var(--muted); margin-top: 2px; }
.peek__go { display: block; color: var(--stamp); font-size: 12px; margin-top: 6px; }
@media (max-width: 720px) {
  .map { padding: 10px; margin-top: 22px; transform: none; }
  .map__label { display: none; }
  .map__preview { position: static !important; width: 100%; margin-top: 12px; }
  .peek { transform: none; display: flex; align-items: center; gap: 12px; }
  .peek__fan { width: 150px; height: 110px; flex: none; }
  .peek__fan img { width: 76px; height: 60px; padding: 4px 4px 12px; }
}

/* ===== COUNTRY HEADER CARD (banner behind the title) ===== */
.chead.has-banner {
  background: var(--card); background-size: cover; background-position: right center;
  box-shadow: var(--shadow); padding: 40px 42px 30px; margin: 22px auto 0; max-width: 1100px; min-height: 340px;
  display: flex; flex-direction: column; justify-content: center; transform: rotate(-0.4deg);
}
.chead.has-banner .chead__stamp { display: none; }
.chead.has-banner .chead__blurb { max-width: 46%; }
.chead.has-banner .chead__title, .chead.has-banner .chead__blurb, .chead.has-banner .chead__meta { text-shadow: 0 0 10px rgba(243, 226, 190, 0.9), 0 0 2px rgba(243, 226, 190, 0.9); }
.view--country .albums { padding-top: 40px; }
@media (max-width: 720px) {
  .chead.has-banner { padding: 30px 22px 22px; min-height: 260px; transform: none; background-position: left center; }
  .chead.has-banner .chead__blurb { max-width: none; }
  .ahead.has-banner::before, .chead.has-banner::before { background: linear-gradient(180deg, rgba(246, 230, 195, 0.72), rgba(246, 230, 195, 0.45)); }
}

/* ===== PAINTED WORLD MAP ===== */
.map--art { background: #2b2420; padding: 14px; }
.map--art .map__svg { display: none; }
.map:not(.map--art) .map__art, .map:not(.map--art) .map__pins { display: none; }
.map--art .map__frame { border-color: rgba(255, 230, 180, 0.35); outline-color: rgba(255, 230, 180, 0.2); }
.map__art { display: block; width: 100%; height: auto; }
.map__pins { position: absolute; inset: 0; }
.map__routeart { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map__routeart polyline { fill: none; stroke: #fff3d6; stroke-width: 0.35; stroke-dasharray: 1 1; vector-effect: non-scaling-stroke; stroke-width: 2px; opacity: .85; filter: drop-shadow(0 0 2px rgba(0,0,0,0.6)); }
.pin { position: absolute; width: 0; height: 0; border: 0; background: none; padding: 0; cursor: pointer; overflow: visible; }
.pin__ring, .pin__dot { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.pin__ring { width: 34px; height: 34px; background: rgba(255, 60, 60, 0.25); border: 1.5px solid rgba(255, 90, 90, 0.8); animation: ping 2.4s ease-out infinite; }
.pin__dot { width: 14px; height: 14px; background: var(--stamp); border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.5); transition: transform .2s, background .2s; }
.pin:hover .pin__dot, .pin:focus-visible .pin__dot, .pin.is-active .pin__dot { transform: translate(-50%, -50%) scale(1.35); background: #e6b422; }
.pin__label { position: absolute; left: 0; top: -14px; transform: translate(-50%, -100%); white-space: nowrap; font-size: 13px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,0.9); background: rgba(40, 30, 20, 0.65); padding: 2px 7px; border-radius: 2px; pointer-events: none; }
.pin--below .pin__label { top: 14px; transform: translate(-50%, 0); }
.pin--right .pin__label { left: 16px; top: 0; transform: translate(0, -50%); }
.pin--left .pin__label { left: -16px; top: 0; transform: translate(-100%, -50%); }
.pin--above-right .pin__label { left: 9px; top: -9px; transform: translate(0, -100%); }
.pin--above-left .pin__label { left: -9px; top: -9px; transform: translate(-100%, -100%); }
.pin--below-right .pin__label { left: 9px; top: 9px; transform: none; }
.pin--below-left .pin__label { left: -9px; top: 9px; transform: translate(-100%, 0); }
.pin--none .pin__label { display: none; }
.pin--none:hover .pin__label, .pin--none:focus .pin__label, .pin--none.is-active .pin__label { display: block; left: 16px; top: 0; transform: translate(0, -50%); z-index: 5; }
.map--art .map__hint { color: rgba(255, 240, 210, 0.75); }
@media (max-width: 720px) { .pin__label { display: none; } .pin__ring { width: 26px; height: 26px; } .pin__dot { width: 12px; height: 12px; } }