/* ============================================================
   THEME: aquarelle — "Watercolor"
   A well-loved wanderer's journal: warm white paper, soft
   watercolor washes bleeding at the page edges, fine brown-ink
   linework, handwritten script over a quiet serif, photos
   mounted with washi tape, stitched borders, a wax seal.
   Contract: page look + all --g-* globe vars + globe chrome.
   --g-rough stays 1 — the hand-drawn jitter suits ink.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Kalam:wght@300;400;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root{
  --paper:#FAF6EE; --paper-deep:#F3ECDD; --card:#FFFDF8;
  --ink:#4A3A2A; --ink-soft:#5B4636; --muted:#8A785F;
  --terracotta:#B85C42; --terracotta-soft:#C26D50;
  --sage:#8FA382; --moss:#7C9070; --dusty:#7E9EB5; --ochre:#D9A85F;
  --kraft:#C9A876; --tape-a:rgba(143,163,130,.45); --tape-b:rgba(126,158,181,.42);
  --tape-c:rgba(194,109,80,.35); --tape-d:rgba(217,168,95,.42);

  /* globe — soft watercolor earth */
  --g-ocean-1:#E3EEF4; --g-ocean-2:#A9C6D9;
  --g-sphere-stroke:#6B5844; --g-sphere-stroke-w:2.2;
  --g-land:#A9BD97; --g-land-stroke:#77684F; --g-land-stroke-w:1.3;
  --g-grat:#8C8272; --g-grat-opacity:0.18;
  --g-arc:#7E9EB5; --g-arc-dash:2,6; --g-arc-w:2;
  --g-pin-you:#C26D50; --g-pin-you-stroke:#7A4A32; --g-pin-dot:#FAF6EE;
  --g-pin-future:#FAF6EE; --g-pin-future-stroke:#C26D50; --g-pin-q:#B85C42;
  --g-label:#5B4636; --g-label-halo:#FAF6EE;
  --g-pennant-bg:#D9BE93; --g-pennant-border:#8A6F4D; --g-pennant-text:#7A4A32;
  --g-rough:1; --g-shadow-opacity:0.10;
}

/* ── the page: warm paper with washes bleeding in from the edges ── */
body{
  background-color:var(--paper);
  background-image:
    radial-gradient(1100px 680px at -6% -8%,  rgba(143,163,130,.18), transparent 62%),
    radial-gradient(900px 620px  at 106% 6%,  rgba(126,158,181,.16), transparent 62%),
    radial-gradient(760px 520px  at -4% 72%,  rgba(217,168,95,.13),  transparent 60%),
    radial-gradient(1000px 760px at 102% 104%, rgba(194,109,80,.12), transparent 62%),
    radial-gradient(rgba(139,120,90,.10) .5px, transparent .6px);
  background-size:auto,auto,auto,auto,7px 7px;
  background-attachment:fixed,fixed,fixed,fixed,scroll;
  color:var(--ink-soft);
  font-family:'Lora',Georgia,'Times New Roman',serif;
}
::selection{background:rgba(194,109,80,.28);color:var(--ink)}

/* ── style bar: a row of little paint swatches ── */
.style-bar{
  background:rgba(250,246,238,.92);
  border-bottom:2px dashed var(--kraft);
  backdrop-filter:blur(4px);
}
.style-bar .sb-label{font-family:'Caveat',cursive;font-size:1.05rem;color:var(--muted)}
.style-bar button{
  font-family:'Caveat',cursive;font-weight:600;
  background:linear-gradient(160deg,#FFFDF8, #F4ECDC);
  color:var(--ink);cursor:pointer;
  border:1.5px solid #B9A389;
  border-radius:12px 5px 11px 6px / 6px 11px 5px 12px; /* hand-cut edge */
  box-shadow:1px 2px 4px rgba(91,70,54,.16);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.style-bar button:hover{
  transform:translateY(-2px) rotate(-.8deg);
  box-shadow:2px 4px 8px rgba(91,70,54,.20);
  background:linear-gradient(160deg,#FFFDF8, #F0E2CE);
}
.style-bar button.active{
  background:linear-gradient(160deg,#C97C5F,#B85C42);
  color:#FBF3E8;border-color:#8F4632;
  box-shadow:inset 0 1px 3px rgba(74,42,26,.35);
}

/* ── hero: a photo mounted in the journal with washi tape ── */
.hero{position:relative}
.hero img{
  border:10px solid #FFFDF8;
  outline:1px solid #D9CBB4;
  border-radius:3px;
  box-shadow:0 10px 26px rgba(91,70,54,.20);
  transform:rotate(-.5deg);
}
.hero::before,.hero::after{
  content:"";position:absolute;z-index:2;width:120px;height:30px;
  background:linear-gradient(180deg,var(--tape-b),rgba(126,158,181,.30));
  box-shadow:0 1px 3px rgba(91,70,54,.18);
  opacity:.9;pointer-events:none;
}
.hero::before{top:12px;left:4%;transform:rotate(-8deg)}
.hero::after{top:12px;right:4%;transform:rotate(7deg);
  background:linear-gradient(180deg,var(--tape-a),rgba(143,163,130,.32))}
.tagline{font-family:'Caveat',cursive;font-size:1.75rem;line-height:1.35;color:var(--ink)}
.tagline b{color:var(--terracotta);font-weight:700}
.subline{font-style:italic;color:var(--muted)}

/* stamp: pressed rubber-stamp / wax-seal energy */
.stamp{
  transform:rotate(-4deg);
  border:2.5px double var(--terracotta);
  border-radius:6px;
  color:var(--terracotta);
  font-family:'Kalam',cursive;font-weight:700;letter-spacing:4px;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(194,109,80,.10), transparent 70%),
    radial-gradient(ellipse at 75% 65%, rgba(194,109,80,.08), transparent 70%);
  opacity:.92;
}

/* ── section headings: handwritten ink with a wash streak ── */
h2{
  font-family:'Caveat',cursive;font-weight:700;font-size:2.1rem;
  color:var(--ink);letter-spacing:.5px;
}
h2::after{
  content:"";display:block;width:150px;height:9px;margin:4px auto 0;
  background:linear-gradient(90deg,
    rgba(194,109,80,.0), rgba(194,109,80,.38) 18%,
    rgba(194,109,80,.30) 55%, rgba(217,168,95,.28) 82%, rgba(217,168,95,0));
  border-radius:50% 40% 55% 45% / 70% 60% 75% 65%;
  filter:blur(.4px);
}
p.lede{font-family:'Kalam',cursive;font-weight:300;color:var(--muted)}
p.lede em{color:var(--terracotta);font-style:normal;font-weight:400}

/* ── globe box: a journal page with stitched edges ── */
.globe-box{
  background:var(--card);
  border:2px dashed var(--kraft);
  outline:6px solid #FFFDF8;
  border-radius:4px;
  box-shadow:0 8px 22px rgba(91,70,54,.16);
}

/* ── friend figures: taped-in photographs, gently askew ── */
figure{
  position:relative;
  background:#FFFDF8;
  border:1px solid #D9CBB4;
  border-radius:2px;
  box-shadow:0 6px 16px rgba(91,70,54,.16);
  transform:rotate(-1deg);
  transition:transform .25s ease, box-shadow .25s ease;
}
figure:nth-child(even){transform:rotate(1.1deg)}
figure:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 10px 22px rgba(91,70,54,.22)}
figure::before{
  content:"";position:absolute;top:-12px;left:50%;
  width:96px;height:26px;margin-left:-48px;transform:rotate(-2.5deg);
  background:linear-gradient(180deg,var(--tape-a),rgba(143,163,130,.30));
  box-shadow:0 1px 3px rgba(91,70,54,.16);opacity:.9;pointer-events:none;
}
figure:nth-child(2)::before{background:linear-gradient(180deg,var(--tape-b),rgba(126,158,181,.28));transform:rotate(2deg)}
figure:nth-child(3)::before{background:linear-gradient(180deg,var(--tape-d),rgba(217,168,95,.30));transform:rotate(-1.5deg)}
figure:nth-child(4)::before{background:linear-gradient(180deg,var(--tape-c),rgba(194,109,80,.26));transform:rotate(2.6deg)}
figcaption{font-family:'Caveat',cursive;font-size:1.3rem;color:var(--ink)}
figcaption small{font-family:'Lora',serif;font-size:.8rem;font-style:italic;color:var(--muted)}

/* ── the promise: stitched card with a wax seal ── */
.promise{
  position:relative;
  background:var(--card);
  border:2px dashed var(--terracotta-soft);
  border-radius:8px;
  box-shadow:0 6px 18px rgba(91,70,54,.14);
  transform:rotate(-.3deg);
}
.promise::after{
  content:"✶";position:absolute;top:-18px;right:26px;
  width:42px;height:42px;line-height:42px;text-align:center;
  color:#F4E3D5;font-size:19px;
  background:radial-gradient(circle at 34% 30%, #D3826A, #A34B33 68%, #8F3E28);
  border-radius:48% 52% 50% 50% / 52% 48% 52% 48%;
  box-shadow:inset 0 -3px 6px rgba(74,26,12,.45), 0 3px 7px rgba(91,70,54,.30);
  transform:rotate(9deg);
}
.promise h3{
  font-family:'Caveat',cursive;font-weight:700;font-size:1.6rem;
  color:var(--terracotta);letter-spacing:2px;
}
.promise p{color:var(--ink-soft)}
.promise b{color:var(--terracotta)}

footer{
  color:var(--muted);
  border-top:2px dashed var(--kraft);
  font-family:'Lora',serif;font-style:italic;
}
footer a{color:var(--dusty)}

/* ── globe chrome: brown ink on journal paper ── */
#globe{font-family:'Caveat','Kalam','Segoe Script','Bradley Hand',cursive}
.g-paper{fill:#FBF8F1}
.g-frame-outer{fill:none;stroke:#8A6F4D;stroke-width:2}
.g-frame-inner{fill:none;stroke:#8A6F4D;stroke-width:1.2;stroke-dasharray:7,5;opacity:.55}
.g-title{fill:var(--terracotta);font-weight:700;letter-spacing:1px}
.g-subtitle{fill:var(--muted);font-family:'Lora',Georgia,serif;font-style:italic}
.g-stamp-box{fill:rgba(194,109,80,.07);stroke:var(--terracotta);stroke-width:2;stroke-dasharray:1.5,2.5}
.g-stamp-text{fill:var(--terracotta);font-family:'Kalam',cursive;font-weight:700}
.g-sparkle{fill:#E5C078;stroke:#8A6F4D;stroke-width:.6;opacity:.85}
.g-legend-text{fill:#6E5C48;font-family:'Lora',Georgia,serif}
.g-chip-solid{fill:var(--g-pin-you);stroke:#7A4A32;stroke-width:1.1}
.g-chip-future{fill:var(--g-pin-future);stroke:var(--terracotta-soft);stroke-width:1.1;stroke-dasharray:4,3}
.g-hint{fill:var(--terracotta);font-family:'Caveat',cursive;font-weight:600}