/* ==========================================================================
   WORLD VOICE BRIDGE, design system v2
   A working press, not a template: seal logo, marquee, hand-drawn swash,
   editorial rhythm. Fraunces display / Instrument Sans body / Plex Mono labels.
   ========================================================================== */

:root{
  /* paper + ink */
  --paper:      #F7F3EA;
  --paper-2:    #EFE8D8;
  --ink:        #23272E;
  --ink-2:      #4E5361;
  --ink-3:      #7C8090;
  --line:       #DCD2BC;

  /* brand */
  --coral:      #D6402B;   /* the cover red, deepened */
  --coral-deep: #B23520;
  --gold:       #D99A2B;
  --teal:       #275E56;
  --blue:       #2C5C9E;

  /* per-language accents */
  --es: #D6402B;
  --ko: #C74A6B;
  --zh: #B3402E;
  --sw: #A66B1F;
  --kids:#7A4FBF;
  --med: #275E56;

  --night:      #1C202B;
  --night-2:    #242938;
  --star:       #F1EBDC;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  --shadow-1: 0 2px 6px rgba(35,39,46,.08), 0 12px 32px rgba(35,39,46,.10);
  --shadow-2: 0 4px 10px rgba(35,39,46,.12), 0 24px 56px rgba(35,39,46,.16);

  --f-display: "Fraunces", Georgia, serif;
  --f-body: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px; line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color 1s ease;
}
/* scroll-driven backdrop: sections carry data-bg, JS moves the body through the palette */
body.bg-paper{ background:var(--paper); }
body.bg-sand{ background:#F0E8D3; }
body.bg-rose{ background:#F3E4D4; }
body.bg-night{ background:var(--night); }
body.bg-lilac{ background:#ECE8F0; }
body.bg-moss{ background:#EBECDB; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--coral-deep); }
a:hover{ color:var(--coral); }
h1,h2,h3,h4{ font-family:var(--f-display); line-height:1.08; margin:0 0 .5em; font-weight:600; letter-spacing:-.01em; text-wrap:balance; }
h1{ font-size:clamp(2.5rem, 6.2vw, 4.4rem); font-weight:640; }
h2{ font-size:clamp(1.85rem, 4vw, 2.8rem); }
h3{ font-size:1.35rem; }
h2 em, h1 em{ font-style:italic; font-weight:560; }
p{ margin:0 0 1em; }
.wrap{ width:min(var(--wrap), calc(100% - 2.5rem)); margin-inline:auto; position:relative; z-index:1; }
.mono{ font-family:var(--f-mono); font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; }
.skip{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:.6rem 1rem; z-index:100; }
.skip:focus{ left:.5rem; top:.5rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--ink); color:var(--paper) !important;
  font-family:var(--f-body); font-weight:600; font-size:1rem;
  padding:.85rem 1.5rem; border-radius:var(--r-sm); border:1.5px solid var(--ink);
  text-decoration:none; cursor:pointer;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ background:#343a45; transform:translate(-1px,-1px); box-shadow:3px 3px 0 rgba(35,39,46,.22); }
.btn:active{ transform:none; box-shadow:none; }
.btn.coral{ background:var(--coral); border-color:var(--coral); }
.btn.coral:hover{ background:var(--coral-deep); box-shadow:3px 3px 0 rgba(178,53,32,.25); }
.btn.ghost{ background:transparent; color:var(--ink) !important; }
.btn.ghost:hover{ background:rgba(35,39,46,.06); box-shadow:none; }
.btn.small{ padding:.5rem 1.05rem; font-size:.9rem; }
.btn.on-dark{ background:var(--paper); border-color:var(--paper); color:var(--ink) !important; }
.btn.on-dark:hover{ background:#fff; }
.btn .arr{ transition:transform .18s ease; }
.btn:hover .arr{ transform:translateX(3px); }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(220,210,188,.65);
}
.nav-in{
  width:min(var(--wrap), calc(100% - 2.5rem)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem 0;
}
.brand{
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--f-display); font-weight:640; font-size:1.16rem;
  color:var(--ink); text-decoration:none; letter-spacing:-.01em;
}
.brand svg{ width:42px; height:42px; flex:none; }
.brand:hover{ color:var(--ink); }
.brand .b-sub{ display:block; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3); margin-top:.14rem; }
.nav-links{ display:flex; align-items:center; gap:1.6rem; }
.nav-links a{ color:var(--ink-2); text-decoration:none; font-weight:500; font-size:.97rem; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a[aria-current="page"]:not(.btn){ text-decoration:underline; text-decoration-color:var(--coral); text-decoration-thickness:2px; text-underline-offset:6px; }
.nav-links .btn{ color:var(--paper) !important; }
/* flight progress: dashed route under the nav, plane rides your scroll */
.flight{ position:absolute; left:0; right:0; bottom:-2px; height:4px; pointer-events:none; }
.flight .track{
  position:absolute; left:0; right:0; top:1px; height:2px;
  background:repeating-linear-gradient(90deg, var(--ink-3) 0 3px, transparent 3px 10px);
  opacity:.28;
}
.flight .done{ position:absolute; left:0; top:1px; height:2px; width:0; background:var(--coral); }
.flight .plane{
  position:absolute; top:50%; left:0; width:17px; height:17px;
  transform:translate(-40%,-50%);
  filter:drop-shadow(0 1px 1px rgba(35,39,46,.3));
}
.nav-burger{ display:none; background:none; border:0; padding:.4rem; cursor:pointer; }
.nav-burger span{ display:block; width:24px; height:2.5px; background:var(--ink); margin:5px 0; border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
@media (max-width: 780px){
  .nav-burger{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:.4rem;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:1rem 1.25rem 1.4rem; display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ font-size:1.1rem; padding:.4rem 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
}

/* ---------- hero ---------- */
.hero{ padding:4.2rem 0 4.6rem; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } }
.stamp-line{ color:var(--ink-3); margin-bottom:1.1rem; display:flex; align-items:center; gap:.7rem; }
.stamp-line::before{ content:""; width:34px; height:1.5px; background:var(--coral); display:inline-block; }

.greet{ margin:0 0 .6rem; }
.gw-box{
  position:relative; display:block; height:1.02em;
  font-size:clamp(3rem, 8vw, 5.4rem); line-height:1;
}
.greet .gw{
  position:absolute; left:0; top:0; white-space:nowrap;
  font-family:var(--f-display); font-weight:640;
  color:var(--coral); letter-spacing:-.02em;
  opacity:0; transition:opacity .7s ease;
}
.greet .gw.on{ opacity:1; }
.greet .gl{
  display:block; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin-top:.55rem;
  transition:opacity .35s ease;
}
.greet .gl.swap{ opacity:0; }

.hero h1{ margin-top:.3rem; }
/* hand-drawn swash under the key phrase */
.swash{ white-space:nowrap; position:relative; }
.swash svg{ position:absolute; left:-1%; bottom:-.12em; width:102%; height:.3em; overflow:visible; }
.swash path{
  fill:none; stroke:var(--coral); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:260; stroke-dashoffset:260;
  transition:stroke-dashoffset .9s cubic-bezier(.6,0,.3,1) .45s;
}
body.loaded .swash path{ stroke-dashoffset:0; }
@media (prefers-reduced-motion: reduce){ .swash path{ stroke-dashoffset:0; } }

.hero-sub{ font-size:1.15rem; color:var(--ink-2); max-width:33em; }
.hero-ctas{ display:flex; gap:.9rem; flex-wrap:wrap; margin:1.5rem 0 1.2rem; }
.hero-trust{ font-size:.94rem; color:var(--ink-2); }
.hero-trust b{ color:var(--ink); }
.hero-trust .sep{ color:var(--line); margin:0 .45rem; }

/* fanned covers: a five-card hand, dealt in on load, tilt on pointer */
.cover-fan{ position:relative; height:470px; perspective:900px; }
.cover-fan a{
  position:absolute; top:50%; left:50%; width:225px; border-radius:5px;
  box-shadow:var(--shadow-2); opacity:1;
  transition:transform .9s cubic-bezier(.22,.75,.25,1), opacity .55s ease;
}
.cover-fan a img{ border-radius:5px; transition:transform .25s ease; will-change:transform; }
.cover-fan a:nth-of-type(1){ transform:translate(-128%,-42%) rotate(-16deg); width:190px; z-index:0; transition-delay:.22s; }
.cover-fan a:nth-of-type(2){ transform:translate(-88%,-50%) rotate(-7deg); z-index:2; transition-delay:.1s; }
.cover-fan a:nth-of-type(3){ transform:translate(-50%,-48%) rotate(1.5deg); z-index:4; width:256px; transition-delay:0s; }
.cover-fan a:nth-of-type(4){ transform:translate(-13%,-51%) rotate(7deg); z-index:1; transition-delay:.14s; }
.cover-fan a:nth-of-type(5){ transform:translate(26%,-41%) rotate(16deg); width:190px; z-index:0; transition-delay:.26s; }
.cover-fan.predeal a{ opacity:0; transform:translate(-50%,-42%) rotate(0deg) !important; }
.cover-fan a:hover{ z-index:6; }
@media (max-width: 1100px){
  .cover-fan a:nth-of-type(1), .cover-fan a:nth-of-type(5){ display:none; }
}
@media (max-width: 900px){
  .cover-fan{ height:390px; margin-top:1rem; }
  .cover-fan a{ width:185px; }
  .cover-fan a:nth-of-type(3){ width:205px; }
}

/* hero speech bubbles: still and confident, they settle in once and stay put */
.h-bubble{
  position:absolute; font-family:var(--f-display); font-weight:600;
  padding:.4rem .95rem; border:1.5px solid var(--ink); border-radius:999px;
  background:var(--paper); box-shadow:2px 2px 0 var(--ink);
  font-size:.92rem; white-space:nowrap; z-index:5;
  opacity:0; transform:translateY(10px);
  transition:opacity .7s ease 1s, transform .7s cubic-bezier(.2,.7,.3,1) 1s;
}
body.loaded .h-bubble{ opacity:1; transform:none; }
.h-bubble::after{
  content:""; position:absolute; bottom:-7px; left:20px; width:10px; height:10px;
  background:var(--paper); border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg) skew(8deg,8deg);
}
.h-bubble.b1{ top:3%; right:5%; color:var(--ko); transform:translateY(10px) rotate(2deg); }
.h-bubble.b2{ bottom:5%; right:42%; color:var(--teal); transition-delay:1.35s,1.35s; transform:translateY(10px) rotate(-2deg); }
.h-bubble.b3{ top:10%; left:2%; color:var(--zh); transition-delay:1.7s,1.7s; transform:translateY(10px) rotate(-2deg); }
body.loaded .h-bubble.b1{ transform:rotate(2deg); }
body.loaded .h-bubble.b2{ transform:rotate(-2deg); }
body.loaded .h-bubble.b3{ transform:rotate(-2deg); }
@media (max-width: 1100px){ .h-bubble.b3{ display:none; } }
@media (prefers-reduced-motion: reduce){ .h-bubble{ opacity:1; transform:none; } }

/* ---------- marquee band: brand red ---------- */
.mq{ background:var(--coral); border-block:1px solid var(--coral-deep); overflow:hidden; }
.mq-in{
  display:flex; gap:3.4rem; width:max-content; padding:.9rem 0;
  animation:mq 110s linear infinite;
  will-change:transform;
  font-family:var(--f-display); font-style:italic; font-weight:560;
  font-size:1.18rem; color:var(--paper); white-space:nowrap; align-items:center;
}
.mq-in b{
  font-family:var(--f-mono); font-style:normal; font-weight:600;
  font-size:.66rem; letter-spacing:.22em; color:#FFD98A;
}
.mq:hover .mq-in{ animation-play-state:paused; }
@keyframes mq{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ---------- section scaffolding ---------- */
section{ position:relative; }
.sec{ padding:4.8rem 0; }
.sec-head{ max-width:44em; margin-bottom:2.5rem; }
.sec-head .mono{ color:var(--coral-deep); display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; }
.sec-head .mono::before{ content:""; width:34px; height:1.5px; background:currentColor; }
.sec-head p{ color:var(--ink-2); font-size:1.06rem; }
.sec-head.split{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.sec-head.split > div{ max-width:36em; }
.alt{ background:transparent; }

/* dashed flight route divider */
.route{ position:relative; height:80px; overflow:visible; pointer-events:none; }
.route svg{ position:absolute; inset:0; width:100%; height:100%; }
.route path{ fill:none; stroke:var(--ink-3); stroke-width:2; stroke-dasharray:2 9; stroke-linecap:round; opacity:.5; }
.route .plane{ fill:var(--ink-2); opacity:.75; }

/* ---------- house rules (editorial two-column) ---------- */
.rules{ display:grid; grid-template-columns:.85fr 1.35fr; gap:3.5rem; align-items:start; }
@media (max-width: 860px){ .rules{ grid-template-columns:1fr; gap:1.5rem; } }
.rules .sec-head{ position:sticky; top:96px; margin-bottom:0; }
@media (max-width: 860px){ .rules .sec-head{ position:static; } }
.rules .r-stamp{
  display:inline-block; margin-top:1.2rem;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  border:2px solid var(--coral); color:var(--coral-deep); border-radius:var(--r-md);
  padding:.35rem .7rem; transform:rotate(-4deg); background:var(--paper);
}
.rule{
  display:grid; grid-template-columns:minmax(9em,.65fr) 1fr; gap:1.6rem;
  padding:1.7rem 0;
}
.rule + .rule{ border-top:1px solid var(--line); }
@media (max-width: 560px){ .rule{ grid-template-columns:1fr; gap:.4rem; } }
.rule h3{ font-style:italic; font-weight:560; font-size:1.45rem; margin:0; }
.rule p{ color:var(--ink-2); margin:0; font-size:1rem; }

/* ---------- the spanish path ---------- */
.path{ position:relative; }
.path-line{ position:absolute; left:0; right:0; top:118px; height:70px; z-index:0; pointer-events:none; }
.path-line path{ fill:none; stroke:var(--coral); stroke-width:2; stroke-dasharray:1 10; stroke-linecap:round; opacity:.55; }
@media (max-width: 900px){ .path-line{ display:none; } }
.path-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; position:relative; z-index:1; }
@media (max-width: 900px){ .path-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }
.leg{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.5rem 1.4rem 1.6rem; text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.leg:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); }
.leg .leg-tag{
  display:inline-block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper); background:var(--ink);
  border-radius:3px; padding:.32rem .8rem; margin-bottom:1.1rem;
}
.leg img{ width:min(195px, 62%); margin:0 auto 1.1rem; border-radius:4px; box-shadow:var(--shadow-1); transition:transform .25s ease; }
.leg:hover img{ transform:scale(1.03) rotate(-.5deg); }
.leg h3{ font-size:1.18rem; margin-bottom:.3rem; }
.leg p{ font-size:.94rem; color:var(--ink-2); min-height:3.6em; }
.leg .leg-meta{ font-size:.86rem; color:var(--ink-3); margin-bottom:1rem; }
.leg .leg-meta b{ color:var(--gold); letter-spacing:.05em; }

/* ---------- phrasebook flip cards ---------- */
.phrases{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem; }
@media (max-width: 1000px){ .phrases{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 540px){ .phrases{ grid-template-columns:1fr; } }
.phrase{
  perspective:900px; cursor:pointer; border:0; background:none; padding:0;
  font:inherit; text-align:inherit; min-height:190px;
}
/* static hand-placed tilt; motion only when the reader asks for it */
.phrase:nth-child(odd){ transform:rotate(-.8deg); }
.phrase:nth-child(even){ transform:rotate(.7deg); }
.phrase{ transition:transform .3s cubic-bezier(.2,.8,.3,1.2); }
.phrase:hover{ transform:translateY(-6px) rotate(0deg); }
.phrase .ph-in{
  position:relative; display:block; width:100%; height:100%; min-height:190px;
  transform-style:preserve-3d; transition:transform .8s cubic-bezier(.3,1.25,.35,1);
}
.phrase.flipped .ph-in{ transform:rotateY(180deg); }
.ph-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--r-md); padding:1.3rem 1.2rem;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
}
.ph-front{ background:var(--ink); color:var(--paper); box-shadow:var(--shadow-1); }
.ph-front .ph-word{ font-family:var(--f-display); font-size:1.7rem; font-weight:600; line-height:1.15; }
.ph-front .ph-flag{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.22em;
  border:1.5px solid rgba(247,243,234,.4); border-radius:3px;
  padding:.22rem .5rem .18rem .65rem; margin-bottom:.8rem; color:var(--gold);
}
.ph-front .ph-hint{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; opacity:.5; margin-top:.8rem; }
.ph-back{ background:var(--paper); border:1.5px solid var(--ink); transform:rotateY(180deg); }
.ph-back .ph-say{ font-family:var(--f-mono); font-size:.78rem; color:var(--coral-deep); letter-spacing:.06em; margin-bottom:.35rem; }
.ph-back .ph-mean{ font-weight:600; font-size:1.03rem; line-height:1.35; }
.ph-back .ph-src{ font-size:.78rem; color:var(--ink-3); margin-top:.6rem; }

/* ---------- night section (street + medical) ---------- */
.night{ background:var(--night); color:var(--star); transition:background-color 1s ease; }
body.bg-night .night{ background:transparent; }
.night::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(241,235,220,.14) 1px, transparent 1.6px);
  background-size:34px 34px;
}
.night .sec-head .mono{ color:var(--gold); }
.night h2, .night h3{ color:var(--star); }
.night .sec-head p{ color:rgba(241,235,220,.72); }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
@media (max-width: 900px){ .duo{ grid-template-columns:1fr; } }
.duo-card{
  display:grid; grid-template-columns:150px 1fr; gap:1.4rem; align-items:center;
  background:var(--night-2); border:1px solid rgba(241,235,220,.14);
  border-radius:var(--r-lg); padding:1.6rem;
  transition:transform .25s ease, border-color .25s ease;
}
.duo-card:hover{ transform:translateY(-5px); border-color:rgba(241,235,220,.34); }
@media (max-width: 540px){ .duo-card{ grid-template-columns:1fr; text-align:center; } .duo-card img{ margin-inline:auto; } }
.duo-card img{ border-radius:4px; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.duo-card .d-kicker{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.5rem; display:block; color:var(--gold); }
.duo-card h3{ font-size:1.3rem; margin-bottom:.4rem; }
.duo-card p{ color:rgba(241,235,220,.72); font-size:.95rem; margin-bottom:1rem; }
.duo-card .btn{ font-size:.9rem; padding:.55rem 1.2rem; }

/* ---------- kids shelf ---------- */
.kids-sec{ overflow:hidden; }
.kids-sec .sec-head .mono{ color:var(--kids); }
.kids-shelf{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; }
@media (max-width: 900px){ .kids-shelf{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 480px){ .kids-shelf{ grid-template-columns:1fr; max-width:280px; margin-inline:auto; } }
.kid-card{ text-decoration:none; color:var(--ink); text-align:center; display:block; }
.kid-card img{
  border-radius:6px; box-shadow:var(--shadow-1);
  transition:transform .3s cubic-bezier(.2,.8,.3,1.15), box-shadow .3s ease;
}
.kid-card:nth-child(odd) img{ transform:rotate(-1.4deg); }
.kid-card:nth-child(even) img{ transform:rotate(1.2deg); }
.kid-card:hover img{ transform:rotate(0) translateY(-7px) scale(1.02); box-shadow:var(--shadow-2); }
.kid-card .k-vol{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--kids); display:block; margin:.9rem 0 .15rem; }
.kid-card .k-name{ font-weight:600; font-size:.96rem; line-height:1.35; }
.kid-card:hover{ color:var(--ink); }

/* ---------- journey strip: landmarks draw themselves in ---------- */
.journey{ padding:1.5rem 0 0; overflow:hidden; }
.journey svg{ display:block; width:min(1120px, 94%); margin-inline:auto; height:auto; }
.journey .lm{
  fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  opacity:.55; stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.3,1);
}
.journey .lm.rt{ stroke:var(--coral); stroke-width:2; stroke-dasharray:2 9; opacity:.7; transition:none; }
.journey.in .lm{ stroke-dashoffset:0; }
.journey .lm:nth-of-type(2){ transition-delay:.15s; } .journey .lm:nth-of-type(3){ transition-delay:.3s; }
.journey .lm:nth-of-type(4){ transition-delay:.45s; } .journey .lm:nth-of-type(5){ transition-delay:.6s; }
.journey .lm:nth-of-type(6){ transition-delay:.75s; }
@media (prefers-reduced-motion: reduce){ .journey .lm{ stroke-dashoffset:0; transition:none; } }

/* ---------- world shelf (languages) ---------- */
.langs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width: 900px){ .langs{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }
.lang-card{
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:2.1rem 1.6rem 1.8rem;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.lang-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); }
.lang-card img{ width:min(150px, 52%); margin:0 auto 1.2rem; border-radius:4px; box-shadow:var(--shadow-1); transition:transform .25s ease; }
.lang-card:hover img{ transform:translateY(-4px) rotate(-1deg); }
.lang-card .l-hello{ font-family:var(--f-display); font-size:1.65rem; font-weight:600; line-height:1.1; display:block; }
.lang-card .l-name{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); display:block; margin:.35rem 0 .7rem; }
.lang-card p{ font-size:.92rem; color:var(--ink-2); margin-bottom:.9rem; }
.lang-card .go{ font-weight:600; font-size:.92rem; text-decoration:none; }
.lang-card .go .arr{ display:inline-block; transition:transform .18s ease; }
.lang-card:hover .go .arr{ transform:translateX(4px); }
.lang-card .visa{
  position:absolute; top:-13px; right:16px; transform:rotate(4deg);
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  border:2px dashed currentColor; border-radius:var(--r-md); padding:.26rem .55rem; background:var(--paper);
}
.lang-card.ko{ border-color:color-mix(in srgb, var(--ko) 34%, var(--line)); } .lang-card.ko .visa,.lang-card.ko .l-hello{ color:var(--ko); }
.lang-card.zh{ border-color:color-mix(in srgb, var(--zh) 34%, var(--line)); } .lang-card.zh .visa,.lang-card.zh .l-hello{ color:var(--zh); }
.lang-card.sw{ border-color:color-mix(in srgb, var(--sw) 40%, var(--line)); } .lang-card.sw .visa,.lang-card.sw .l-hello{ color:var(--sw); }

/* ---------- story strip ---------- */
.story .wrap{ max-width:820px; }
.story blockquote{
  margin:0; font-family:var(--f-display); font-weight:560;
  font-size:clamp(1.5rem, 3.2vw, 2.2rem); line-height:1.35; letter-spacing:-.01em;
}
.story blockquote .hl{ color:var(--coral); font-style:italic; }
.story .who{ margin-top:1.6rem; color:var(--ink-3); }

/* ---------- final cta ---------- */
.final{ text-align:center; padding:5.5rem 0; }
.final h2{ font-size:clamp(2.1rem, 5vw, 3.3rem); }
.final p{ color:var(--ink-2); max-width:36em; margin-inline:auto; }
.final .hero-ctas{ justify-content:center; }
.final .follow-note{ font-size:.9rem; color:var(--ink-3); margin-top:1.2rem; }

/* ---------- footer ---------- */
footer{ background:var(--ink); color:rgba(247,243,234,.75); padding:2.6rem 0 1.8rem; position:relative; z-index:1; }
.foot-grid{ display:grid; grid-template-columns:auto 1fr auto; gap:2.2rem; margin-bottom:1.8rem; align-items:center; }
@media (max-width: 780px){ .foot-grid{ grid-template-columns:1fr; gap:1.4rem; text-align:center; justify-items:center; } }
.foot-seal{ width:104px; height:104px; }
footer .brand{ color:var(--paper); margin-bottom:.4rem; }
footer p{ font-size:.92rem; margin:0; max-width:34em; }
.foot-links{ list-style:none; margin:0; padding:0; display:flex; gap:1.5rem; flex-wrap:wrap; font-weight:500; }
@media (max-width: 780px){ .foot-links{ justify-content:center; } }
footer ul{ list-style:none; margin:0; padding:0; }
footer a{ color:rgba(247,243,234,.78); text-decoration:none; }
footer a:hover{ color:var(--paper); text-decoration:underline; }
.foot-base{ border-top:1px solid rgba(247,243,234,.14); padding-top:1.3rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.84rem; color:rgba(247,243,234,.5); }

/* ---------- books page shelf ---------- */
.shelf-sec{ padding:3.4rem 0 1rem; }
.shelf-sec:last-of-type{ padding-bottom:5rem; }
.shelf-head{ display:flex; align-items:baseline; gap:1rem; border-bottom:2px solid var(--ink); padding-bottom:.6rem; margin-bottom:2rem; flex-wrap:wrap; }
.shelf-head h2{ margin:0; font-size:1.7rem; }
.shelf-head .mono{ color:var(--ink-3); }
.shelf{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.5rem; }
.book-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:1.3rem; display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.book-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); }
.book-card img{ width:70%; margin:0 auto 1rem; border-radius:4px; box-shadow:var(--shadow-1); }
.book-card h3{ font-size:1.02rem; font-family:var(--f-body); font-weight:700; line-height:1.4; margin-bottom:.3rem; }
.book-card .b-sub{ font-size:.86rem; color:var(--ink-2); flex:1; margin-bottom:.8rem; }
.book-card .b-meta{ font-size:.82rem; color:var(--ink-3); margin-bottom:1rem; }
.book-card .b-meta b{ color:var(--gold); }
.book-card .btn{ align-self:flex-start; font-size:.88rem; padding:.55rem 1.15rem; }
.badge{
  display:inline-block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.24rem .55rem; border-radius:3px; margin-bottom:.7rem;
  border:1.5px solid currentColor; align-self:flex-start;
}
.badge.es{ color:var(--es); } .badge.ko{ color:var(--ko); } .badge.zh{ color:var(--zh); }
.badge.sw{ color:var(--sw); } .badge.kids{ color:var(--kids); } .badge.med{ color:var(--med); }

/* ---------- prose pages ---------- */
.page-hero{ padding:4rem 0 2.5rem; }
.page-hero h1{ font-size:clamp(2.2rem, 5vw, 3.4rem); }
.page-hero p{ color:var(--ink-2); font-size:1.1rem; max-width:40em; }
.prose{ max-width:720px; padding-bottom:5rem; }
.prose h2{ font-size:1.5rem; margin-top:2.2rem; }
.prose li{ margin-bottom:.45rem; }

/* ---------- reveal on scroll ---------- */
.rv{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s; } .rv-d2{ transition-delay:.16s; } .rv-d3{ transition-delay:.24s; }
/* passport stamp-in */
.stamp-in{ opacity:0; transform:scale(1.4) rotate(10deg); transition:opacity .4s ease, transform .45s cubic-bezier(.2,.8,.3,1.25); }
.stamp-in.in{ opacity:1; transform:scale(1) rotate(4deg); }
@media (prefers-reduced-motion: reduce){
  .rv, .stamp-in{ opacity:1; transform:none; }
  .cover-fan.predeal a{ opacity:1; }
  .phrase{ animation:none !important; }
  body{ transition:none; }
}

/* 404 */
.lost{ text-align:center; padding:7rem 0; }
.lost .big{ font-family:var(--f-display); font-size:clamp(4rem,12vw,8rem); font-weight:640; color:var(--coral); line-height:1; }