/* A fantasy expedition poster, implemented with native CSS.
   DESIGN_VARIANCE: 6; MOTION_INTENSITY: 4; VISUAL_DENSITY: 2.
   Cormorant evokes engraved adventure-book titles; Manrope keeps the page modern.
   The illustrated poster maintains its dark forest palette in both system modes. */
@font-face{font-family:Cormorant;src:url('/assets/cormorant-semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/manrope-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/manrope-semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
:root{color-scheme:dark;--forest:#102e29;--parchment:#f1ead6;--secondary:#c6cbbb;--accent:#e2d09b;--line:rgba(226,208,155,.3);font-family:Manrope,Arial,sans-serif;color:var(--parchment);background:var(--forest);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.expedition{position:relative;isolation:isolate;min-height:100svh;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--forest)}
.landscape{position:absolute;inset:0;z-index:-2;background:var(--forest) url('/assets/costa-rica-quest.jpg') center right/cover no-repeat}
.expedition::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(7,29,25,.70) 0%,rgba(7,29,25,.40) 38%,rgba(7,29,25,.02) 74%),linear-gradient(0deg,rgba(7,29,25,.85),transparent 25%,transparent 75%,rgba(7,29,25,.48))}
.masthead{min-height:92px;padding:0 4.2%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:14px;letter-spacing:.13em;font-weight:600;white-space:nowrap;transition:color .2s}
.brand:hover{color:var(--accent)}
.brand span{font-size:10px;letter-spacing:.08em;margin:0 3px}
.masthead-note{font-size:13px;color:var(--secondary);letter-spacing:.035em}
.edition{display:none}
main{width:100%;max-width:1600px;margin:auto;flex:1;display:flex;align-items:center;padding:38px 6% 55px}
.hero{width:53%;max-width:680px;text-align:center;padding:0 20px}
.identity{display:flex;align-items:center;flex-direction:column}
.emblem{width:142px;height:142px;object-fit:contain;margin-bottom:10px}
h1{font-family:Cormorant,Georgia,serif;font-weight:600;margin:0;text-shadow:0 2px 25px rgba(7,29,25,.15)}
.summit{display:block;font-size:clamp(65px,7.8vw,116px);letter-spacing:.06em;line-height:.88}
.misfits{display:block;font-size:clamp(55px,6.6vw,98px);line-height:1.05;letter-spacing:.015em;white-space:nowrap}
.of{font-size:.40em;font-style:normal;vertical-align:.20em;letter-spacing:0;margin-right:.04em}
.destination{display:flex;align-items:center;justify-content:center;gap:17px;margin:24px auto 0;color:var(--accent);font-size:14px;font-weight:600;letter-spacing:.24em;white-space:nowrap}
.rule{height:1px;width:40px;background:var(--line)}
.destination-separator{margin:0 11px;color:var(--accent);opacity:.7}
.tagline{font-size:21px;letter-spacing:-.025em;margin:36px 0 13px;font-weight:600}
.intro{font-size:15px;line-height:1.85;color:var(--secondary);margin:0}
.footer{margin:0 4.2%;min-height:90px;border-top:1px solid rgba(241,234,214,.2);display:flex;align-items:center;justify-content:space-between;gap:30px}
.footer p{font-size:12px;line-height:1.7;color:var(--secondary);margin:18px 0}
.footer p span{color:var(--parchment)}
.coming-soon{text-align:right}
.coming-soon span{margin-left:8px}
[hidden]{display:none!important}
.countdown{max-width:420px;margin:28px auto 0;padding:17px 0 0;border-top:1px solid var(--line)}
.countdown h2{font-family:Cormorant,Georgia,serif;color:var(--accent);font-size:23px;font-weight:600;line-height:1.25;margin:0 0 15px}
.countdown-clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.countdown-unit{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative}
.countdown-unit+.countdown-unit{border-left:1px solid var(--line)}
.countdown-value{font-family:Cormorant,Georgia,serif;font-size:47px;font-weight:600;font-variant-numeric:lining-nums tabular-nums;line-height:1;letter-spacing:.025em}
.countdown-label{font-size:12px;line-height:1.5;letter-spacing:.09em;color:var(--secondary)}
.gathering-date{margin:19px 0 0;font-size:14px;color:var(--parchment);line-height:1.6}
.gathering-date span{display:block;font-size:12px;color:var(--secondary)}
.arrival-message{font-family:Cormorant,Georgia,serif;font-size:32px;margin:16px 0;color:var(--parchment)}
.countdown-fallback{font-size:14px;line-height:1.6;color:var(--secondary)}
@media(prefers-reduced-motion:no-preference){
  .identity{animation:arrive .85s ease-out both}
  .destination{animation:arrive .85s .12s ease-out both}
  .tagline,.intro{animation:arrive .85s .22s ease-out both}
  @keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
}
@media(min-width:1500px){main{padding-top:70px;padding-bottom:85px}.hero{max-width:690px}.emblem{width:168px;height:168px;margin-bottom:20px}}
@media(max-width:1024px){.masthead{min-height:80px}.hero{width:60%;padding:0}.summit{font-size:8.9vw}.misfits{font-size:7.6vw}.emblem{width:124px;height:124px}.destination{letter-spacing:.18em;gap:12px}.rule{width:30px}.tagline{font-size:20px}.intro{font-size:14px}}
@media(max-width:767px){
  .masthead{padding:0 24px;min-height:76px}.brand{font-size:12px}.masthead-note{display:none}
  .landscape{background-position:64% center}
  .expedition::before{background:linear-gradient(0deg,rgba(7,29,25,.94) 0%,rgba(7,29,25,.42) 45%,rgba(7,29,25,.32) 75%,rgba(7,29,25,.64)),linear-gradient(90deg,rgba(7,29,25,.35),rgba(7,29,25,.16))}
  main{padding:38px 24px 58px;min-height:540px}
  .hero{width:100%;max-width:500px;margin:auto;padding:0}
  .emblem{width:130px;height:130px;margin-bottom:17px}
  .summit{font-size:clamp(65px,15vw,96px)}.misfits{font-size:clamp(54px,12.7vw,82px)}
  .destination{margin-top:23px;letter-spacing:.17em;font-size:13px;gap:12px}.rule{width:28px}.destination-separator{margin:0 7px}
  .tagline{font-size:20px;margin-top:30px}.intro{font-size:14px;line-height:1.8}
  .footer{margin:0 24px;padding:18px 0 22px;display:block;text-align:center;min-height:auto}
  .footer p{margin:5px 0;font-size:12px}.coming-soon{text-align:center}.coming-soon span{margin-left:4px}
}
@media(max-width:360px){main{padding-left:16px;padding-right:16px}.summit{font-size:62px}.misfits{font-size:53px}.destination{font-size:12px;letter-spacing:.14em;gap:9px}.rule{width:20px}.tagline{font-size:18px}.footer{margin:0 16px}}
@media(max-height:760px) and (min-width:768px){.masthead{min-height:72px}main{padding-top:14px;padding-bottom:30px}.emblem{width:108px;height:108px;margin-bottom:12px}.summit{font-size:min(7.8vw,98px)}.misfits{font-size:min(6.6vw,84px)}.destination{margin-top:20px}.tagline{margin-top:26px}.footer{min-height:74px}}
/* Keep the identity and the timepiece together within a typical laptop viewport. */
main{padding-top:20px;padding-bottom:30px}
.emblem{width:112px;height:112px;margin-bottom:10px}
.summit{font-size:clamp(65px,6.7vw,96px)}
.misfits{font-size:clamp(55px,5.8vw,82px)}
.destination{margin-top:18px}
.tagline{margin-top:23px;margin-bottom:0}
@media(min-width:1500px){.emblem{width:130px;height:130px}.countdown{margin-top:30px}}
@media(max-width:1024px) and (min-width:768px){.summit{font-size:8.2vw}.misfits{font-size:7vw}.countdown-value{font-size:42px}}
@media(max-width:767px){main{padding:20px 24px 35px}.emblem{width:104px;height:104px;margin-bottom:12px}.summit{font-size:clamp(62px,15vw,90px)}.misfits{font-size:clamp(52px,12.7vw,77px)}.tagline{margin-top:23px}.countdown{margin-top:25px;max-width:360px}.countdown h2{font-size:22px}.countdown-value{font-size:42px}.countdown-label{letter-spacing:.045em}.gathering-date{margin-top:17px}}
@media(max-height:760px) and (min-width:768px){.emblem{width:82px;height:82px}.summit{font-size:min(6.7vw,82px)}.misfits{font-size:min(5.8vw,70px)}.tagline{margin-top:16px}.countdown{margin-top:18px;padding-top:12px}.countdown h2{margin-bottom:11px;font-size:21px}.countdown-value{font-size:37px}.gathering-date{margin-top:12px}.footer{min-height:65px}}