/* Masters of Luxury Travel — shared styles. Used by the home page and every
   continent page. Edit here, not in the pages. */

  :root{
    --paper:#FFFFFF;
    --clip:#F7F5EF;
    --ink:#111111;
    --red:#D0021B;
    --grey:#8A8A85;
    --tape:rgba(255,232,150,.55);
    --shadow:rgba(0,0,0,.28);
    --f-display:'Anton','Oswald',sans-serif;
    --f-serif-display:'Playfair Display',Georgia,serif;
    --f-type:'Special Elite','PT Mono',monospace;
    --f-old:'Old Standard TT',Georgia,serif;
    --f-cond:'Oswald',sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--f-old);
    line-height:1.4;
    overflow-x:hidden;
  }
  body::before{ /* faint paper grain */
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  }
  a{color:inherit}

  /* ---------- page grid ---------- */
  main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem) 6rem}

  .hero{padding:clamp(4.5rem,13vw,10rem) 0 clamp(2rem,5vw,4rem)}
  .hero .ransom{font-size:clamp(3rem,11vw,9.5rem)}
  .hero .sub{
    margin:1.6rem 0 0;max-width:34ch;
    font:italic 400 clamp(1.05rem,1.6vw,1.3rem)/1.35 var(--f-old);
    color:var(--ink);
  }
  .hero .sub b{font-style:normal;font-weight:700;color:var(--red)}

  .claim{
    padding:clamp(2.5rem,6vw,5rem) 0;
  }
  .claim .ransom{font-size:clamp(1.9rem,6vw,5.2rem)}
  .claim[data-lang]::before{
    content:attr(data-lang);
    display:inline-block;margin-bottom:1rem;
    font:600 .68rem/1 var(--f-cond);letter-spacing:.28em;text-transform:uppercase;
    color:var(--red);border:1.5px solid var(--red);padding:.3rem .5rem .25rem;
    transform:rotate(-2deg);
  }

  /* ---------- ransom-note headline ---------- */
  .ransom{
    margin:0;line-height:1.02;font-weight:400;
    display:flex;flex-wrap:wrap;align-items:baseline;
    gap:.12em .16em;
  }
  .cut{
    display:inline-block;
    filter:drop-shadow(2px 3px 0 var(--shadow));
    transform:rotate(var(--r,0deg));
    transition:transform .25s cubic-bezier(.2,.8,.2,1), filter .25s;
    will-change:transform;
  }
  .cut:hover{transform:rotate(0deg) translateY(-3px);filter:drop-shadow(3px 6px 0 var(--shadow))}
  .cut-in{
    display:inline-block;
    padding:.04em .22em .08em;
    background:var(--clip);
    color:var(--ink);
    white-space:nowrap;
  }
  /* faces */
  .f-anton .cut-in{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.01em}
  .f-play  .cut-in{font-family:var(--f-serif-display);font-weight:900;font-style:italic}
  .f-type  .cut-in{font-family:var(--f-type);font-size:.86em;letter-spacing:.02em}
  .f-old   .cut-in{font-family:var(--f-old);font-weight:700;font-size:.94em}
  .f-osw   .cut-in{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.92em}
  /* inks */
  .ink .cut-in{color:var(--ink);background:var(--clip)}
  .red .cut-in{color:var(--red);background:var(--clip)}
  .rev-black .cut-in{color:#fff;background:var(--ink)}
  .rev-red .cut-in{color:#fff;background:var(--red)}
  /* torn edges */
  .t-a .cut-in{clip-path:polygon(0 4%,3% 0,12% 3%,25% 0,40% 4%,55% 0,70% 3%,85% 0,100% 3%,98% 30%,100% 55%,97% 80%,100% 100%,88% 97%,70% 100%,50% 96%,30% 100%,12% 97%,0 100%,2% 70%,0 40%)}
  .t-b .cut-in{clip-path:polygon(2% 0,20% 3%,35% 0,50% 4%,65% 1%,80% 4%,100% 0,98% 25%,100% 50%,97% 75%,100% 100%,80% 96%,60% 100%,45% 97%,25% 100%,8% 96%,0 100%,3% 60%,0 30%)}
  .t-c .cut-in{clip-path:polygon(0 0,100% 2%,99% 100%,1% 98%)}

  /* ---------- attachments (taped under the headline) ---------- */
  .attach{
    position:relative;margin-top:2rem;width:min(100%,600px);
  }
  .attach.inline{width:auto;display:inline-block}
  .attach::before,.attach::after{
    content:"";position:absolute;z-index:2;height:26px;width:96px;
    background:var(--tape);
    box-shadow:0 1px 2px rgba(0,0,0,.08) inset;
  }
  .attach::before{top:-13px;left:-18px;transform:rotate(-6deg)}
  .attach::after{bottom:-13px;right:-18px;transform:rotate(5deg)}

  /* classified-ad search form */
  .classified{
    position:relative;z-index:3;
    border:3px solid var(--ink);outline:1px solid var(--ink);outline-offset:3px;
    background:var(--clip);
    padding:1.1rem 1.2rem 1.2rem;
    width:100%;
    transform:rotate(-.6deg);
  }
  .classified .label{
    display:block;
    font:600 .7rem/1 var(--f-cond);letter-spacing:.3em;text-transform:uppercase;
    color:var(--red);margin-bottom:.7rem;
  }

  /* rubber stamps (buttons + links) */
  .stamp{
    display:inline-block;cursor:pointer;
    font:700 .95rem/1 var(--f-cond);letter-spacing:.24em;text-transform:uppercase;
    color:var(--red);background:transparent;
    border:3px solid var(--red);
    box-shadow:0 0 0 2px var(--clip), 0 0 0 3.5px var(--red);
    padding:.75rem 1.1rem .65rem;
    text-decoration:none;
    transform:rotate(var(--r,-3deg));
    opacity:.92;
    transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s, color .2s;
  }
  .stamp:hover,.stamp:focus-visible{
    background:var(--red);color:#fff;transform:rotate(0deg) scale(1.04);opacity:1;
    box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--red);
  }
  .stamp:focus-visible{outline:3px dashed var(--ink);outline-offset:6px}
  .stamp.big{font-size:1.15rem;padding:.95rem 1.5rem .8rem}
  .stamp.black{color:var(--ink);border-color:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
  .stamp.black:hover,.stamp.black:focus-visible{background:var(--ink);color:#fff}

  .stamps{display:inline-flex;gap:1.6rem 1.8rem;flex-wrap:wrap;align-items:center;padding:.6rem .2rem}


  /* ---------- country portals ---------- */
  .portals{
    margin:clamp(3rem,7vw,6rem) 0;
    padding:clamp(2.2rem,5vw,3.6rem) clamp(1.2rem,4vw,3rem);
    background:var(--clip);
    border-top:4px double var(--ink);
    border-bottom:4px double var(--ink);
  }
  .portals > .eyebrow{
    display:inline-block;margin-bottom:1.4rem;
    font:600 .68rem/1 'Oswald',sans-serif;letter-spacing:.28em;text-transform:uppercase;
    color:#fff;background:var(--ink);padding:.35rem .6rem .3rem;
    transform:rotate(-1.5deg);
  }
  .grid{
    display:grid;gap:clamp(1.4rem,3vw,2.4rem);
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  }
  .portal{
    display:block;text-decoration:none;color:inherit;
    transform:rotate(var(--r,-1deg));
    transition:transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .portal:hover,.portal:focus-visible{transform:rotate(0deg) translateY(-4px)}
  .portal:focus-visible{outline:3px dashed var(--red);outline-offset:8px}

  .flag{
    display:flex;height:clamp(84px,11vw,116px);width:100%;
    background:var(--ink);padding:3px;gap:2px;
    filter:drop-shadow(3px 4px 0 var(--shadow));
    clip-path:polygon(0 5%,4% 0,14% 4%,28% 0,42% 5%,58% 0,72% 4%,86% 0,100% 4%,
                      98% 32%,100% 58%,97% 82%,100% 100%,86% 96%,72% 100%,
                      54% 95%,34% 100%,14% 96%,0 100%,2% 68%,0 38%);
  }
  .flag span{flex:1}
.flag img{width:100%;height:100%;display:block;object-fit:fill}
.portal .flag{aspect-ratio:3/2;height:auto;max-width:240px}

  .portal .name{
    margin:.9rem 0 .15rem;
    font:400 clamp(1.6rem,3.4vw,2.3rem)/1 'Anton','Oswald',sans-serif;
    text-transform:uppercase;letter-spacing:.01em;
  }
  .portal .name em{font-style:normal;color:var(--red)}
  .portal .stat{
    font:400 .88rem/1.35 'Old Standard TT',serif;color:#5c5a55;
  }
  .portal .go{
    display:inline-block;margin-top:.7rem;
    font:700 .74rem/1 'Oswald',sans-serif;letter-spacing:.2em;text-transform:uppercase;
    color:var(--red);border-bottom:2px solid var(--red);padding-bottom:2px;
  }
  .portals .soon{
    margin-top:1.6rem;
    font:italic 400 .95rem/1.4 'Old Standard TT',serif;color:#5c5a55;
  }

  /* ---------- footer ---------- */
  footer{
    position:relative;z-index:1;
    border-top:4px double var(--ink);
    padding:1.4rem clamp(1rem,4vw,3rem) 3rem;
    display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;
    font:italic 400 .95rem/1.4 var(--f-old);
  }
  footer .stamp{--r:-2deg;font-size:.8rem}

  /* ---------- entrance ---------- */
  @keyframes drop{
    from{opacity:0;transform:translateY(-14px) rotate(calc(var(--r,0deg) - 6deg))}
    to{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}
  }
  .cut{animation:drop .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 55ms)}
  @media (prefers-reduced-motion:reduce){
    .cut{animation:none}
    .cut,.stamp{transition:none}
  }
  @media (max-width:600px){
    .stamp{font-size:.85rem;padding:.65rem .9rem .55rem}
    .attach.inline{width:auto;display:inline-block}
  .attach::before,.attach::after{width:70px;height:20px}
  }

/* ---------- country finder (home page) ---------- */
.finder{ margin:clamp(3rem,7vw,6rem) 0; }
.cs{ position:relative; z-index:4; }
.cs input{
  width:100%; box-sizing:border-box;
  font:1.05rem/1.2 'Special Elite','PT Mono',monospace;
  color:var(--ink); background:#fff;
  border:2px solid var(--ink); border-radius:0;
  padding:.72rem .8rem .62rem; outline:none;
}
.cs input::placeholder{ color:var(--grey) }
.cs input:focus{ border-color:var(--red) }
.cs-res{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20;
  background:#fff; border:2px solid var(--ink); max-height:56vh; overflow:auto;
}
.cs-res a{
  display:block; padding:.7rem .85rem; text-decoration:none; color:inherit;
  border-bottom:1px solid #e6e4dd;
}
.cs-res a:last-child{ border-bottom:0 }
.cs-res a:hover, .cs-res a.sel{ background:var(--clip) }
.cs-res a i{
  display:block; margin-bottom:.15rem;
  font:600 .62rem/1 'Oswald',sans-serif; letter-spacing:.2em; text-transform:uppercase;
  font-style:normal; color:#8a8a85;
}
.cs-res a b{
  display:block;
  font:700 1.02rem/1.25 'Oswald',sans-serif; letter-spacing:.06em; text-transform:uppercase;
  color:var(--red);
}
.cs-res a b u{
  font:400 .82rem/1.2 'Old Standard TT',serif; letter-spacing:0; text-transform:none;
  color:#5c5a55; text-decoration:none;
}
.cs-res a span{
  display:block; margin-top:.18rem;
  font:400 .88rem/1.35 'Old Standard TT',serif; color:#5c5a55;
}
.cs-none{
  margin:0; padding:.75rem .85rem;
  font:italic 400 .95rem/1.4 'Old Standard TT',serif; color:#5c5a55;
}

/* ---------- continent pages ---------- */
.crumb{
  padding:1.2rem 0 0;
  font:600 .7rem/1 'Oswald',sans-serif; letter-spacing:.2em; text-transform:uppercase;
  color:#5c5a55;
}
.crumb a{ color:var(--red); text-decoration:none; border-bottom:1px solid var(--red) }
.crumb span{ margin:0 .5rem; color:#b9b6ae }

.lede{ max-width:62ch; margin:clamp(1.6rem,4vw,2.6rem) 0 0 }
.lede p{ margin:0 0 1rem; font:400 clamp(1.05rem,1.5vw,1.22rem)/1.55 'Old Standard TT',serif }
.lede p:last-child{ margin-bottom:0 }
.lede b{ color:var(--red); font-weight:700 }

.tally{
  margin:clamp(2.2rem,5vw,3.4rem) 0;
  padding:clamp(1.4rem,3vw,2rem) clamp(1.2rem,3vw,2rem);
  background:var(--clip);
  border-top:4px double var(--ink); border-bottom:4px double var(--ink);
  display:grid; gap:1.2rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(122px,1fr));
}
.tally div .n{
  display:block;
  font:400 clamp(1.9rem,4.5vw,2.9rem)/1 'Anton','Oswald',sans-serif; color:var(--red);
}
.tally div .l{
  display:block; margin-top:.3rem;
  font:600 .68rem/1.3 'Oswald',sans-serif; letter-spacing:.18em; text-transform:uppercase;
  color:#5c5a55;
}