/* /usa landing page. Brand tokens + fonts live in /assets/css/brand.css. */
/* WorldHop USA landing page — companion to the "Color Your Way Across the USA" book. */
*{box-sizing:border-box}
html{overflow-x:clip}
body{
  margin:0;font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 6%,rgba(242,181,42,.12),transparent 18rem),
    radial-gradient(circle at 85% 30%,rgba(25,178,166,.1),transparent 22rem),
    #f7eedc;
  overflow-x:clip;
}
a{color:inherit}
img{max-width:100%;display:block}
/* Every cover/mosaic image on this page carries width+height HTML
   attributes (correct practice — it reserves layout space and avoids a
   flash of blank space while the image loads). But those attributes also
   become a low-priority CSS width+height, and when a rule below sets only
   `width` for one of these images, that HTML-attribute height (not
   "auto") wins and stretches the image instead of scaling it — exactly
   the bug that shipped here. This is the blanket fix: any image with
   both attributes gets height:auto by default, so a rule only has to
   fight this if it deliberately wants something else. */
img[width][height]{height:auto}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:30px}
.display{font-family:"Lilita One",cursive;text-transform:uppercase;text-shadow:0 2px 0 rgba(255,255,255,.2)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--orange);background:#fff3db;border:1px solid #e3c999;border-radius:99px;padding:6px 13px;font-family:"Nunito Sans",sans-serif;font-weight:800;font-size:13px;letter-spacing:.03em;text-transform:uppercase}
.eyebrow:before{content:"✦";color:var(--mango)}
.section{padding:80px 0}
.section h2{font-size:clamp(32px,4.6vw,50px);line-height:1.06;max-width:none;margin:14px 0 0}
.section .sub{font-size:18px;color:var(--muted);max-width:640px;margin-top:14px;line-height:1.55}
.center{text-align:center}
.center .sub{margin-inline:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:"Lilita One",cursive;text-transform:uppercase;letter-spacing:.02em;font-size:16px;border:2px solid rgba(18,33,49,.7);border-radius:17px;box-shadow:0 7px 0 var(--orange-dark),0 13px 22px rgba(0,0,0,.2);padding:15px 25px;background:var(--orange);color:var(--cream);text-decoration:none;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px);filter:saturate(1.1)}
.btn.teal{background:var(--teal);box-shadow:0 7px 0 var(--teal-dark),0 13px 22px rgba(0,0,0,.2)}
.btn.ghost{background:var(--paper);color:var(--night);box-shadow:0 7px 0 #c5b28e,0 13px 22px rgba(0,0,0,.14)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:30px}
.notify-link{font-weight:800;font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

.appstore{display:flex;align-items:center;gap:10px;background:var(--night-deep);border:2px solid rgba(244,233,211,.35);border-radius:14px;padding:10px 18px;box-shadow:0 7px 0 #02070e,0 13px 22px rgba(0,0,0,.25);transition:transform .15s ease;text-decoration:none;color:var(--cream);cursor:pointer}
.appstore:hover{transform:translateY(-2px)}
.appstore svg{width:26px;height:26px;flex:0 0 auto}
.appstore .t{display:flex;flex-direction:column;line-height:1.15}
.appstore .t small{font-size:10px;opacity:.75;font-weight:700}
.appstore .t strong{font-family:"Lilita One",cursive;font-size:16px;font-weight:400;text-transform:none}

/* ==========================================================================
   GLOBAL WORLDHOP.APP NAV — this exact block (selectors + values) is
   duplicated verbatim in the root styles.css and club/common.css. All
   three pages must render this pixel-identical: same header height, same
   logo size, same link sizing/gap, same background, same breakpoints. If
   you change ANY value here, make the same change in the other two files.
   ========================================================================== */
.site-header{height:150px;background:var(--night);color:var(--cream);position:relative;z-index:50}
.site-header .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:30px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}
.site-header .brand{display:flex;align-items:center;text-decoration:none}
.site-header .brand img{height:120px;width:auto;object-fit:contain}
.site-header nav.links{display:flex;align-items:center;gap:44px}
.site-header nav.links a{font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:.5px;text-transform:uppercase;color:var(--cream);text-decoration:none;opacity:.82;white-space:nowrap}
.site-header nav.links a:hover{opacity:1}
.site-header nav.links a.active{opacity:1;color:var(--mango)}
.site-header nav.links a.nav-cta{display:inline-flex;align-items:center;justify-content:center;padding:14px 30px;font-size:18px;border-radius:15px;border:2px solid rgba(18,33,49,.7);background:var(--orange);color:var(--cream);box-shadow:0 6px 0 var(--orange-d),0 12px 20px rgba(0,0,0,.22);opacity:1;letter-spacing:.4px;transition:transform .15s ease}
.site-header nav.links a.nav-cta:hover{transform:translateY(-2px);filter:brightness(1.06);opacity:1}

.hamburger{display:none;flex-direction:column;justify-content:center;gap:6px;width:56px;height:56px;padding:14px;background:rgba(255,241,210,.1);border:2px solid rgba(244,233,211,.45);border-radius:15px;cursor:pointer}
.hamburger span{display:block;height:5px;width:100%;border-radius:3px;background:var(--cream)}
.mobile-menu{position:fixed;inset:0;z-index:300;background:linear-gradient(160deg,#081d39,#041225);display:flex;flex-direction:column;padding:26px 24px 40px}
.mobile-menu[hidden]{display:none}
.mm-close{align-self:flex-end;display:grid;place-items:center;width:56px;height:56px;font-size:24px;color:var(--cream);background:rgba(255,241,210,.1);border:2px solid rgba(244,233,211,.45);border-radius:15px;cursor:pointer;line-height:1}
.mm-links{margin:auto 0;display:flex;flex-direction:column;gap:22px;padding:20px 0}
.mm-links a{font-family:var(--font-display);font-weight:400;font-size:36px;color:var(--cream);text-decoration:none;text-transform:uppercase;text-align:center;letter-spacing:.5px}
.mm-links a.active{color:var(--mango)}
.mm-links a.mm-cta{margin-top:20px;font-size:26px;background:var(--orange);color:var(--cream);border:2px solid rgba(18,33,49,.7);border-radius:16px;box-shadow:0 6px 0 var(--orange-d);padding:18px 24px}
.mm-links a.mm-cta.active{color:var(--cream)}

@media(max-width:860px){
  .site-header nav.links{display:none}
  .hamburger{display:flex}
}
@media(max-width:700px){
  .site-header{height:100px}
  .site-header .brand img{height:64px}
}

/* Hero — matches the WorldHop app/Club hero treatment: navy background,
   inverted (light) copy. Just the front cover, bigger, tilted, with a
   soft coloured blob behind it for texture (same idea as the dashed
   orbit rings/blob shapes used behind the Club's hero art). */
.hero{padding:36px 0 60px;position:relative;background:var(--night);color:var(--cream);overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.hero h1{font-size:clamp(44px,6vw,72px);line-height:1;margin:0}
.hero h1 .accent{color:var(--mango)}
.hero .lede{font-size:19px;color:rgba(255,241,210,.82);max-width:52ch;margin-top:18px;line-height:1.6}
.hero-visual{position:relative;display:grid;place-items:center;min-height:460px}
.hero-blob{position:absolute;width:min(440px,88%);aspect-ratio:1/1;background:linear-gradient(135deg,var(--teal),var(--teal-d));border-radius:42% 58% 65% 35%/45% 45% 55% 55%;transform:rotate(-8deg);z-index:1;opacity:.9}
.hero-cover{position:relative;width:380px;max-width:82%;height:auto;border-radius:18px;box-shadow:0 34px 50px rgba(0,0,0,.4);border:3px solid var(--night);z-index:2;transform:rotate(3deg)}

/* Book section */
.book-spread{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.book-subtitle{color:var(--teal);font-size:clamp(24px,3vw,34px);line-height:1.05;margin:8px 0 0}
.book-visual{position:relative;display:grid;place-items:center;min-height:420px}
.book-visual-blob{position:absolute;width:min(380px,80%);aspect-ratio:1/1;background:linear-gradient(135deg,var(--teal),var(--teal-d));border-radius:42% 58% 65% 35%/45% 45% 55% 55%;z-index:1;opacity:.9}
.book-fan{position:absolute;width:220px;max-width:56%;aspect-ratio:31/44;object-fit:cover;height:auto;border-radius:14px;border:3px solid var(--night);box-shadow:0 18px 30px rgba(8,29,57,.28);z-index:2}
.book-fan-left{left:0;top:16%;transform:rotate(-12deg)}
.book-fan-right{right:0;top:24%;transform:rotate(10deg)}
.book-fan-main{position:relative;width:280px;max-width:70%;z-index:3;transform:rotate(-2deg);box-shadow:0 24px 40px rgba(8,29,57,.34)}
.book-copy .cta-row{margin-top:20px}
.book-copy .cta-row .btn{min-width:240px}
.book-facts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.book-facts li{display:flex;gap:12px;align-items:flex-start;font-size:16px;font-weight:700;color:var(--ink)}
.book-facts li:before{content:"✓";flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--teal);color:var(--cream);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900}

/* Feature / gallery cards */
/* Column count comes from the page, not from here: a book with six scenes
   wants three across, one with ten wants five. build-book-pages.mjs sets
   --gallery-cols on the element; the 3 here is only the fallback for a page
   that forgets to. */
.gallery{display:grid;grid-template-columns:repeat(var(--gallery-cols,3),1fr);gap:22px;margin-top:46px}
.gallery-card{border:2px solid var(--ink);border-radius:22px;background:var(--paper);box-shadow:0 8px 0 #c5b28e,0 18px 28px rgba(8,29,57,.12);overflow:hidden;transition:transform .25s ease}
.gallery-card:hover{transform:translateY(-6px) rotate(.3deg)}
/* scale(1.15) rather than 1.05: the source scans carry a white page margin,
   and at 1.05 it still showed as a pale edge inside the card. The extra 10%
   crops it out so the art meets the frame. .gallery-card has overflow:hidden,
   so nothing escapes. */
.gallery-card img{aspect-ratio:31/44;object-fit:cover;width:100%;height:auto;transform:scale(1.15);transform-origin:center}
.gallery-card span{display:block;padding:10px 12px;font-family:"Lilita One",cursive;font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--night);text-align:center;line-height:1.2}
.gallery-more{text-align:center;margin-top:26px;font-family:"Lilita One",cursive;font-weight:400;font-size:22px;letter-spacing:.02em;color:var(--night)}

/* Companion checklist — open layout (no card/box): copy on the left,
   the checklist preview image on the right, scaled down and tilted. */
.checklist-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center;margin-top:44px}
.checklist-visual{display:flex;justify-content:center}
.checklist-visual img{width:78%;max-width:300px;height:auto;border-radius:14px;border:2px solid var(--line);box-shadow:0 20px 34px rgba(8,29,57,.22);transform:rotate(4deg)}

/* Promo bands (app / club) */
.promo{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.promo-band{padding:64px 0}
.promo-band + .promo-band{border-top:1px solid var(--line)}
.promo-visual{position:relative;border-radius:24px;border:3px solid var(--night);box-shadow:0 18px 30px rgba(8,29,57,.22);overflow:hidden;min-height:260px;display:flex;align-items:center;justify-content:center;background:var(--night);color:var(--cream);text-align:center;padding:30px}
.promo-visual:before,.promo-visual:after{content:"";position:absolute;border:3px dashed rgba(244,233,211,.25);border-radius:50%}
.promo-visual:before{width:150px;height:150px;left:-40px;top:-40px;transform:rotate(12deg)}
.promo-visual:after{width:190px;height:190px;right:-55px;bottom:-55px;transform:rotate(-10deg)}
.promo-visual .glyph{position:relative;z-index:1;font-family:"Lilita One",cursive;font-size:22px;text-transform:uppercase;line-height:1.4;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.promo-visual.club{background:linear-gradient(135deg,#3abcae,#18887e)}

/* App promo — full-width navy band with inverted (light-on-dark) copy,
   matching the WorldHop app/Club hero treatment. The glyph box switches
   to a warm orange/mango gradient so it still pops against the navy
   band instead of blending into it. */
.promo-band.dark{background:var(--night);color:var(--cream)}
.promo-band.dark .sub{color:rgba(255,241,210,.78)}
.promo-band.dark .notify-link{color:rgba(255,241,210,.75)}
.promo-visual.appglow{background:linear-gradient(135deg,var(--orange),var(--mango));color:var(--night)}
.promo-visual.appglow:before,.promo-visual.appglow:after{border-color:rgba(6,29,59,.2)}
.promo-visual.appglow .glyph{text-shadow:none}

/* Next books shelf — just Africa/Asia/Europe live for now, so 3 columns
   keeps the shelf centred instead of leaving a gap for a missing 4th. */
.book-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:46px auto 0;max-width:640px}
.shelf-card{position:relative;border-radius:16px;overflow:hidden;border:2.5px solid var(--night);box-shadow:0 10px 0 #c5b28e,0 20px 30px rgba(8,29,57,.16)}
/* Same treatment as the gallery thumbs — the covers sit inside their own
   white margin, so a small scale-up lets the artwork reach the card edge. */
.shelf-card img{aspect-ratio:2/3;object-fit:cover;width:100%;height:auto;transform:scale(1.1);transform-origin:center}
.shelf-card .tag{position:absolute;top:10px;left:10px;background:var(--orange);color:var(--cream);font-family:"Lilita One",cursive;font-size:11px;text-transform:uppercase;padding:4px 10px;border-radius:99px;border:1.5px solid var(--night)}
.shelf-card .label{position:absolute;bottom:0;left:0;right:0;padding:10px 10px 8px;background:linear-gradient(0deg,rgba(8,29,57,.92),transparent);color:var(--cream);font-family:"Lilita One",cursive;font-size:13px;text-transform:uppercase;text-align:center}
.shelf-note{text-align:center;color:var(--muted);font-weight:700;margin-top:22px}

/* Closing CTA */
.closing{position:relative;padding:100px 0 100px;background:
  radial-gradient(circle at 50% 40%,rgba(30,90,168,.38),transparent 28rem),
  linear-gradient(rgba(4,18,37,.9),rgba(4,18,37,.98));
  color:var(--cream);text-align:center;overflow:hidden}
.closing h2{font-size:clamp(30px,4.4vw,48px);line-height:1.05;text-shadow:0 6px 0 #061326}
.closing p{color:rgba(244,233,211,.85);max-width:60ch;margin:16px auto 0;font-size:17px;line-height:1.6}
.closing .cta-row{justify-content:center}

/* Footer (matches worldhop.app) */
.footer{padding:50px 0;background:#020b17;position:relative;text-align:center}
.footer-logo{display:block;text-align:center;margin-bottom:20px}
.footer-lockup{width:260px;height:auto;margin:0 auto;display:inline-block;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}
.foot-strap{font-family:"Lilita One",cursive;font-weight:400;text-transform:uppercase;color:var(--mango);font-size:22px;line-height:1.25;letter-spacing:.4px;margin:0 auto 16px;max-width:30ch}
.footer nav{margin:0 auto 4px}
.footer nav a{font-family:"Lilita One",cursive;font-weight:400;text-transform:uppercase;font-size:15px;letter-spacing:.5px;color:var(--cream);opacity:.82;margin:0 11px;display:inline-block;text-decoration:none}
.footer nav a:hover{opacity:1}
.foot-copy{margin-top:16px;opacity:.55;text-align:center;font-size:13px}

/* Responsive */
@media (max-width:980px){
  .hero .grid{grid-template-columns:1fr;text-align:center}
  .hero .lede{margin-inline:auto}
  .hero .cta-row{justify-content:center}
  .book-spread{grid-template-columns:1fr}
  .book-copy{text-align:center}
  .book-copy .cta-row{justify-content:center}
  .book-facts{text-align:left;max-width:420px;margin-inline:auto}
  .checklist-layout{grid-template-columns:1fr;text-align:center}
  .checklist-visual{order:-1}
  .checklist-visual img{margin-inline:auto;max-width:240px}
  .promo{grid-template-columns:1fr;text-align:center}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .book-shelf{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .wrap{padding-inline:20px}
  .section{padding:56px 0}
  .gallery{grid-template-columns:repeat(2,1fr)}   /* overrides --gallery-cols */
  .book-shelf{grid-template-columns:repeat(2,1fr)}
  .cta-row{justify-content:center}
  .book-visual{min-height:340px}
  .book-fan{width:170px}
  .book-fan-main{width:220px}
}

/* The Apple glyph is a bare <path> with no fill attribute, and SVG's default
   fill is BLACK — it does not inherit the badge's text colour, so on the dark
   badge it rendered invisible. currentColor ties it to .appstore's own colour,
   so the mark always matches the "Coming soon on the / App Store" text beside
   it, including on any future badge variant. (The homepage sets fill:#fff
   inline for the same reason; this is the same fix, self-maintaining.)
   The Google Play glyph is unaffected — its paths carry their own brand
   fills. */
.appstore .apple{fill:currentColor}

/* ==========================================================================
   BRANDMARK IN THE NAV

   The stacked brandmark (globe over WORLD HOP) replaced the horizontal
   wordmark. It is square rather than 2:1, so at the old 120px height it read
   as small and left the bar looking empty — this sizes it up and lets it hang
   past the bottom of the bar.

   It overhangs DOWNWARD only: the header sits at the top of the document, so
   anything spilling upward is clipped by the viewport edge. The brand is
   therefore pinned near the top of the bar; only the brand, not the whole
   .wrap, or the nav links and hamburger would be dragged up with it.

   The header already carries position:relative and z-index:50, which is what
   keeps the overhanging part above the hero below it.
   ========================================================================== */
.site-header .brand{align-self:flex-start;margin-top:6px}
.site-header .brand img{height:190px;width:auto;object-fit:contain}
@media(max-width:860px){.site-header .brand img{height:170px}}
@media(max-width:700px){.site-header .brand{margin-top:6px}.site-header .brand img{height:132px}}
@media(max-width:480px){.site-header .brand img{height:112px}}

/* The brandmark hangs ~46px past the bar and the hero copy shares its left
   edge, so the hero needs that much clearance or the eyebrow/heading collides
   with the logo. Values are the old padding plus the overhang. */
.hero{padding-top:76px}
@media(max-width:700px){.hero{padding-top:64px}}

/* ==========================================================================
   FOOTER SOCIAL ROW
   Inline SVG on purpose. worldhop.app makes no third-party requests anywhere
   — that is a stated promise on the homepage and in the privacy policy, and
   pulling five brand glyphs off a CDN would break it for the sake of 2KB.
   The paths are simple-icons (CC0).

   fill:currentColor so the icons inherit exactly what the footer links beside
   them use: cream at .82, full opacity on hover. Do not hard-code a colour.

   The .footer .social a selector is (0,2,1) on purpose — it has to outrank the
   blanket `.footer a{display:inline-block;margin:0 9px 8px}` inside the
   980px media query, which would otherwise re-space the row on mobile.

   CHANGE IT HERE, CHANGE IT IN usa/styles.css AND books/styles.css.
   ========================================================================== */
.footer .social{margin:16px auto 0;display:flex;justify-content:center;align-items:center;gap:20px}
.footer .social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0;color:var(--cream);opacity:.82;transition:opacity .18s ease,transform .18s ease}
.footer .social a:hover,.footer .social a:focus-visible{opacity:1;transform:translateY(-2px)}
.footer .social svg{width:20px;height:20px;fill:currentColor;display:block}
@media(max-width:430px){.footer .social{gap:14px}}
@media(prefers-reduced-motion:reduce){.footer .social a{transition:none}.footer .social a:hover{transform:none}}

/* The three "more books" cards became links (they go to Amazon) rather than
   plain divs, so they need the anchor resets — otherwise they inherit the
   underline and link colour from the base styles. Lift on hover to say
   "this is clickable" without adding a second visual language. */
.shelf-card{display:block;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease}
.shelf-card:hover{transform:translateY(-4px);box-shadow:0 14px 0 #c5b28e,0 26px 36px rgba(8,29,57,.22)}
@media(prefers-reduced-motion:reduce){.shelf-card{transition:none}.shelf-card:hover{transform:none}}