/* =========================================================================
   THE ETERNAL TRAVELERS — The Passport
   Visual system: customs-stamp editorial. Ink navy-black, warm paper cream,
   stamp vermilion. Playfair Display for voice, Inter for utility, IBM Plex
   Mono for the ledger/data register.
   ========================================================================= */

:root{
  --ink:#141A22;
  --ink-soft:#4A5462;
  --paper:#F6F1E7;
  --paper-deep:#EDE5D6;
  --paper-white:#FFFDF9;
  --stamp:#C2412D;         /* stamp vermilion — the accent */
  --stamp-deep:#96301F;
  --sea:#DDE4E6;
  --line:#D9CDB8;
  --gold:#A9822F;
  --good:#3F6B4B;
  --warn:#93865F;
  --bad:#8C4A3A;

  --f-display:"Playfair Display",Georgia,serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --shadow:0 1px 2px rgba(20,26,34,.05),0 12px 32px rgba(20,26,34,.09);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 26px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;color:var(--ink);margin:0;letter-spacing:-.01em}

.eyebrow{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stamp);display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--stamp)}
.lede{font-size:18.5px;color:var(--ink-soft);max-width:58ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-body);font-weight:600;font-size:15px;padding:13px 22px;
  border-radius:3px;border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-stamp{background:var(--stamp);color:#fff}
.btn-stamp:hover{background:var(--stamp-deep)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-sm{padding:9px 15px;font-size:13px}
.btn-block{width:100%}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:600;background:rgba(246,241,231,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-family:var(--f-display);font-size:19px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand-mark{
  width:26px;height:26px;border:1.5px solid var(--stamp);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transform:rotate(-8deg);
  font-family:var(--f-mono);font-size:10px;color:var(--stamp);font-weight:600;
}
.nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:14px;font-weight:500;text-decoration:none;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
@media(max-width:900px){.nav-links{display:none}}

/* ---------- hero ---------- */
.hero{padding:72px 0 56px;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;right:-90px;top:20px;width:340px;height:340px;
  border:2px dashed var(--line);border-radius:50%;opacity:.55;pointer-events:none;
}
.hero h1{font-size:clamp(38px,5.6vw,68px);line-height:1.02;margin:18px 0 22px;max-width:16ch}
.hero h1 em{font-style:italic;color:var(--stamp)}
.hero-ctas{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
.hero-fine{margin-top:16px;font-family:var(--f-mono);font-size:12px;color:var(--ink-soft)}

/* ---------- passport stat rail ---------- */
.rail{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-deep)}
.rail .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.rail-item{padding:26px 18px;text-align:center;border-right:1px solid var(--line)}
.rail-item:last-child{border-right:0}
.rail-num{font-family:var(--f-display);font-size:clamp(26px,3.4vw,40px);line-height:1;font-variant-numeric:tabular-nums}
.rail-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:7px}
@media(max-width:760px){.rail .wrap{grid-template-columns:repeat(2,1fr)}.rail-item{border-bottom:1px solid var(--line)}}

/* ---------- sections ---------- */
section{padding:80px 0}
.sec-head{max-width:660px;margin-bottom:38px}
.sec-head h2{font-size:clamp(28px,3.4vw,40px);margin-top:14px}
.sec-alt{background:var(--paper-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-ink{background:var(--ink);color:rgba(255,255,255,.72)}
.sec-ink h2,.sec-ink h3,.sec-ink h4{color:#fff}
.sec-ink .lede{color:rgba(255,255,255,.7)}
.sec-ink .eyebrow{color:#E8846F}
.sec-ink .eyebrow::before{background:#E8846F}

/* ---------- THE PASSPORT MAP ---------- */
.map-shell{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
#map{width:100%;height:600px;background:var(--sea)}
@media(max-width:760px){#map{height:460px}}

.map-legend{
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-bottom:16px;
}
.lg{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-soft)}
.lg-dot{width:13px;height:13px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}

/* passport pins */
.pp-pin{
  width:19px;height:19px;border-radius:50%;box-sizing:border-box;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.28);
  transition:transform .12s ease;
}
.pp-pin:hover{transform:scale(1.25)}
.pp-both{background:var(--stamp)}
.pp-one{background:var(--gold)}
.pp-pin.has-tables::after{
  content:"";display:block;width:5px;height:5px;margin:5px auto;border-radius:50%;background:rgba(255,255,255,.9);
}
.marker-cluster-pp{
  border-radius:50%;box-sizing:border-box;background:var(--ink);color:#fff;
  border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-weight:600;font-size:12px;
}

/* the "not yet stamped" callout inside map */
.map-note{
  position:absolute;left:16px;bottom:16px;z-index:500;max-width:290px;
  background:rgba(255,253,249,.96);border:1px solid var(--line);border-radius:4px;
  padding:13px 15px;font-size:12.5px;color:var(--ink-soft);line-height:1.5;box-shadow:var(--shadow);
}
.map-note b{color:var(--ink);font-family:var(--f-display);font-size:14px;display:block;margin-bottom:3px}
@media(max-width:760px){.map-note{display:none}}

/* ---------- COUNTRY DRAWER ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(20,26,34,.42);z-index:900;opacity:0;pointer-events:none;transition:opacity .22s ease}
.drawer-backdrop.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:100%;max-width:452px;z-index:910;
  background:var(--paper-white);box-shadow:-14px 0 44px rgba(20,26,34,.22);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.drawer.open{transform:translateX(0)}
.drawer-inner{padding:30px 28px 40px}
.drawer-close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:var(--ink-soft)}

/* the stamp header */
.stamp-block{
  border:2px solid var(--stamp);border-radius:4px;padding:16px 18px;margin-bottom:22px;
  transform:rotate(-1.2deg);position:relative;
}
.stamp-block::before{
  content:"";position:absolute;inset:4px;border:1px dashed rgba(194,65,45,.4);border-radius:2px;
}
.stamp-country{font-family:var(--f-display);font-size:27px;color:var(--stamp);line-height:1.1}
.stamp-meta{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);opacity:.85;margin-top:5px}

.drawer h4{font-size:12px;font-family:var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin:26px 0 12px;font-weight:500}

/* a recommendation card */
.rec{border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:15px}
.rec:last-child{border-bottom:0}
.rec-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.rec-name{font-family:var(--f-display);font-size:17.5px;margin:0}
.rec-city{font-family:var(--f-mono);font-size:11px;color:var(--ink-soft);margin-top:2px}
.rec-stars{color:var(--gold);font-size:12.5px;white-space:nowrap}
.rec-verdict{
  display:inline-block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:2px 8px;border-radius:20px;margin:8px 0 7px;
}
.v-loved{background:rgba(63,107,75,.13);color:var(--good)}
.v-worth{background:rgba(147,134,95,.18);color:#6b5f3c}
.v-not{background:rgba(140,74,58,.13);color:var(--bad)}
.rec-note{font-size:13.6px;line-height:1.55;color:var(--ink-soft);margin:0}
.rec-more{font-size:12.5px;font-weight:600;color:var(--stamp);text-decoration:none;display:inline-block;margin-top:7px}
.rec-more:hover{text-decoration:underline}

/* the money block — activities & stays */
.book-block{background:var(--paper-deep);border:1px solid var(--line);border-radius:5px;padding:18px;margin-top:24px}
.book-block h5{font-family:var(--f-display);font-size:16px;margin:0 0 4px}
.book-block p{font-size:13px;color:var(--ink-soft);margin:0 0 13px}
.book-row{display:grid;gap:9px}
.book-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--paper-white);border:1px solid var(--line);border-radius:4px;
  padding:12px 14px;text-decoration:none;font-size:14px;font-weight:600;
  transition:border-color .15s ease,transform .15s ease;
}
.book-link:hover{border-color:var(--stamp);transform:translateX(2px)}
.book-link small{display:block;font-weight:400;font-size:11.5px;color:var(--ink-soft);font-family:var(--f-mono)}
.book-arrow{color:var(--stamp);font-size:16px}
.book-disc{font-size:11px;color:var(--ink-soft);margin-top:11px;line-height:1.45}

/* empty state — country with no tables logged yet */
.rec-empty{
  border:1px dashed var(--line);border-radius:5px;padding:20px;text-align:center;
  font-size:13.5px;color:var(--ink-soft);
}

/* dossier upsell */
.dossier-cta{
  margin-top:26px;border:2px solid var(--ink);border-radius:5px;padding:20px;
}
.dossier-cta h5{font-family:var(--f-display);font-size:18px;margin:0 0 6px}
.dossier-cta p{font-size:13.5px;color:var(--ink-soft);margin:0 0 14px}
.dossier-price{font-family:var(--f-display);font-size:15px}
.dossier-price b{font-size:26px}

/* ---------- promise / regret section ---------- */
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:12px}
.promise{border-top:2px solid var(--stamp);padding-top:18px}
.promise h3{font-size:19px;margin-bottom:8px}
.promise p{font-size:14.5px;color:var(--ink-soft);margin:0}
.sec-ink .promise p{color:rgba(255,255,255,.68)}
@media(max-width:820px){.promise-grid{grid-template-columns:1fr}}

/* ---------- honest reviews strip ---------- */
.verdict-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.vcard{background:var(--paper-white);border:1px solid var(--line);border-radius:5px;padding:22px;box-shadow:var(--shadow)}
.vcard .rec-verdict{margin-top:0}
.vcard blockquote{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-soft);font-style:italic}
.vcard cite{display:block;margin-top:11px;font-family:var(--f-mono);font-size:11px;font-style:normal;color:var(--ink)}
@media(max-width:820px){.verdict-cards{grid-template-columns:1fr}}

/* ---------- letter signup ---------- */
.signup{display:flex;gap:11px;max-width:440px;margin-top:22px}
.signup input{flex:1;padding:13px 15px;border:1px solid var(--line);border-radius:3px;font-size:15px;font-family:var(--f-body);background:var(--paper-white)}
.sec-ink .signup input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#fff}
.sec-ink .signup input::placeholder{color:rgba(255,255,255,.45)}
.signup-note{font-family:var(--f-mono);font-size:11.5px;margin-top:11px;min-height:16px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.62);padding:54px 0 32px;font-size:13.5px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.13)}
.f-grid h5{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 13px}
.f-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.f-grid a{color:rgba(255,255,255,.62);text-decoration:none}
.f-grid a:hover{color:#fff}
.f-brand{font-family:var(--f-display);font-size:20px;color:#fff;margin-bottom:9px}
.f-bottom{display:flex;justify-content:space-between;padding-top:20px;flex-wrap:wrap;gap:10px;font-size:12.5px}
.f-disc{font-size:11.5px;color:rgba(255,255,255,.38);margin-top:14px;max-width:920px;line-height:1.5}
@media(max-width:820px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}section{padding:56px 0}}

/* ---------- dossier-first drawer (paid product leads, affiliate folds away) ---------- */
.held-note{
  background:var(--paper-deep);border-left:3px solid var(--stamp);
  padding:13px 15px;font-size:13.5px;color:var(--ink-soft);margin:4px 0 0;border-radius:0 4px 4px 0;
}
.dossier-cta{margin-top:22px;border:2px solid var(--stamp);border-radius:5px;padding:22px;background:var(--paper-white)}
.dossier-cta h5{color:var(--stamp)}
.dossier-price{margin:0 0 14px}
.dossier-price b{color:var(--ink)}
.dossier-guar{font-size:11.5px;color:var(--ink-soft);text-align:center;margin:11px 0 0;line-height:1.45}

.book-fold{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.book-fold summary{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);cursor:pointer;list-style:none;
}
.book-fold summary::-webkit-details-marker{display:none}
.book-fold summary::before{content:"+ ";color:var(--stamp)}
.book-fold[open] summary::before{content:"– "}
.book-fold .book-row{margin-top:13px}

/* pricing */
.dossier-price .was{text-decoration:line-through;opacity:.5;font-size:15px;font-family:var(--f-body)}
.dossier-launch{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--stamp);margin:-8px 0 12px}
.dossier-alt{font-size:12px;color:var(--ink-soft);margin:12px 0 0;text-align:center;line-height:1.5}

/* four-tier verdicts */
.v-ten{background:rgba(169,130,47,.16);color:#7C5E22}
.rank-ten{background:var(--gold)}
.lg-ten{background:var(--gold)}

/* how we rate */
.verdict-list{display:grid;gap:22px;max-width:820px}
.vrow{display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:start;
  padding-bottom:20px;border-bottom:1px solid var(--line)}
.vrow:last-child{border-bottom:0}
.vrow .rec-verdict{margin:2px 0 0}
.vrow p{margin:0;font-size:15px;color:var(--ink-soft)}
@media(max-width:700px){.vrow{grid-template-columns:1fr;gap:10px}}

/* ---- pin states: written vs not yet ---- */
.pp-written{background:var(--stamp);border-color:#fff}
.pp-blank{background:transparent;border:2px solid var(--stamp);box-shadow:none;opacity:.75}
.pp-blank:hover{opacity:1}
.lg-written{background:var(--stamp);border:2px solid #fff}
.lg-nomarker{font-style:italic;opacity:.75}
.lg-blank{background:transparent;border:2px solid var(--stamp);box-shadow:none}

/* ---- "ask us" panel for countries with nothing written ---- */
.ask-cta{margin-top:22px;border:2px dashed var(--line);border-radius:5px;padding:22px;background:var(--paper-white)}
.ask-cta h5{font-family:var(--f-display);font-size:17px;margin:0 0 8px;color:var(--ink)}
.ask-cta p{font-size:13.5px;color:var(--ink-soft);margin:0 0 12px}
.ask-note{font-family:var(--f-mono);font-size:11px;text-align:center;margin:10px 0 0 !important}

/* ---- Sunday Ten list on the site ---- */
.ten-list{display:grid;gap:0;max-width:860px;margin-top:8px}
.ten-row{display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line)}
.ten-row:last-child{border-bottom:0}
.ten-no{font-family:var(--f-display);font-size:26px;color:var(--stamp);line-height:1}
.ten-name{font-family:var(--f-display);font-size:19px;color:var(--ink);margin:0}
.ten-where{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-soft);margin:3px 0 0}
.ten-stars{font-family:var(--f-mono);font-size:11.5px;color:var(--gold);white-space:nowrap;text-align:right}
.ten-nostar{color:var(--ink-soft);opacity:.8}
@media(max-width:640px){.ten-row{grid-template-columns:40px 1fr;gap:12px}.ten-stars{grid-column:2;text-align:left}}