/* ========== page-level shell ========== */
:root {
  /* Language-aware display & handwriting stacks.
     Latin → Fraunces / Caveat. Korean → Gowun Batang / Gaegu. Japanese → Shippori Mincho / Yomogi.
     Ordered so each locale's native face comes first when :lang() overrides below kick in. */
  --font-hand: 'Caveat', 'Space Grotesk', cursive;
  --font-serif: 'Fraunces', 'Gowun Batang', 'Shippori Mincho', 'Space Grotesk', serif;
  --paper: #fef8ea;
  --ink: #0c1324;
  --stamp: #c2463a;
}

/* Locale overrides — keep the "editorial serif + hand" feeling across KO / JA */
html[lang^="ko"] {
  --font-serif: 'Gowun Batang', 'Fraunces', serif;
  --font-hand: 'Gaegu', 'Caveat', cursive;
}
html[lang^="ja"] {
  --font-serif: 'Shippori Mincho', 'Fraunces', serif;
  --font-hand: 'Yomogi', 'Caveat', cursive;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body {
  font-family: var(--font-main);
  background: var(--bg-base);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height:1.6;
  /* dotted grid like a real logbook */
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(99,102,241,0.18), transparent 60%),
    radial-gradient(900px 500px at 10% 40%, rgba(34,211,238,0.12), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: auto, auto, 28px 28px;
}

/* subtle paper grain overlay on the whole page */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  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='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: screen;
  opacity: .55;
}

.container { max-width: 1280px; margin:0 auto; padding: 0 2rem; position:relative; z-index:1; }

/* ========== NAVBAR ========== */
.nav {
  position: sticky; top:0; z-index:50;
  backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(180deg, rgba(2,6,23,0.85), rgba(2,6,23,0.55));
  border-bottom: 1px solid var(--border-subtle);
}
.nav-inner {
  max-width:1280px; margin:0 auto; padding: 14px 2rem;
  display:flex; align-items:center; gap: 2rem;
}
.brand {
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--font-display); font-weight:700; letter-spacing:-0.02em;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand:hover { color: var(--text-primary); }
.brand img { width:32px; height:32px; filter: drop-shadow(0 0 10px var(--glow-indigo)); flex-shrink: 0; }
.brand b { font-size: 1.05rem; white-space: nowrap; }
.brand sup { font-size: .55rem; color: var(--text-muted); letter-spacing:.15em; margin-left:.25rem; white-space: nowrap; }
.nav-links { display:flex; gap:1.5rem; margin-left:auto; }
.nav-links a {
  color: var(--text-secondary); text-decoration:none; font-size:.92rem; letter-spacing:.02em;
  padding: 6px 2px; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background: var(--gradient-cta); transform-origin:left; transform: scaleX(0); transition: transform .3s var(--ease);
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a:hover::after { transform: scaleX(1); }
.lang-pill {
  display:inline-flex; background: rgba(255,255,255,0.04);
  border:1px solid var(--border-subtle); border-radius: 999px; padding:3px;
}
.lang-pill a {
  padding: 4px 10px; border-radius: 999px; font-size:.7rem; letter-spacing:.08em;
  color: var(--text-muted); text-decoration:none; font-family: var(--font-code);
}
.lang-pill a.on { background: var(--gradient-cta); color: #020617; font-weight:700; }
.nav-cta {
  padding: 8px 16px; border-radius: 999px;
  background: var(--gradient-cta); color:#020617; font-weight:700; font-size:.85rem;
  text-decoration:none; transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(99,102,241,0.4); }
.nav-cta-arrow { font-size: .7rem; margin-left: 4px; }
/* 좁은 뷰포트에선 CTA 숨김 — 로고·lang-pill만 남기고 스크롤 유도는 섹션 내부 CTA로 위임 */
@media (max-width: 720px) {
  .nav-cta { display: none; }
}

/* ========== HERO ========== */
.hero { position:relative; padding: 4rem 0 6rem; min-height: 88vh; display:flex; align-items:center; }
.hero-grid {
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items:center; width:100%;
}
.eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family: var(--font-code); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--neon-teal);
  padding: 6px 12px; border:1px solid rgba(34,211,238,0.3); border-radius: 999px;
  background: rgba(34,211,238,0.06);
}
.eyebrow::before { content:''; width:6px; height:6px; background: var(--neon-teal); border-radius:50%; box-shadow: 0 0 10px var(--neon-teal); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

h1.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6.2vw, 5.8rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 1.2rem 0 1.75rem;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
h1.hero-title .italic { font-style: italic; font-weight:700; color: var(--accent-highlight); }
h1.hero-title .gradient {
  background: var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right: .05em;
}
h1.hero-title .strike { text-decoration: line-through; text-decoration-thickness: 4px; color: var(--text-muted); text-decoration-color: var(--accent-warm); }

.hero-lede {
  font-size: 1.15rem; color: var(--text-secondary); max-width: 44ch;
  margin-bottom: 2rem;
}
.hero-lede em { font-style:normal; color: var(--accent-highlight); font-weight:600; }

.hero-cta-row { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom: 2rem; }
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding: 14px 22px; border-radius: 12px;
  font-family: var(--font-main); font-size:.95rem; font-weight:700;
  text-decoration:none; cursor:pointer; border:none;
  transition: transform .2s, box-shadow .2s;
}
.btn-primary { background: var(--gradient-cta); color:#020617; box-shadow: 0 8px 24px rgba(99,102,241,0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(99,102,241,0.5); }
.btn-ghost { background: rgba(255,255,255,0.04); border:1px solid var(--border-default); color: var(--text-primary); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }

.hero-meta {
  display:flex; gap: 1.75rem; font-family: var(--font-code); font-size:.8rem; color: var(--text-muted);
  padding-top: 1.5rem; border-top: 1px dashed var(--border-default);
}
.hero-meta b { color: var(--text-primary); font-weight:700; }

/* === Global PiPi sticker effect ===
   Every PiPi on the site gets the same crisp white outline + ambient purple
   glow, so crew wall, hero, dispatches, footer, etc. all read as one
   cohesive sticker book instead of a mix of "stickered" and "plain". */
.pipi-sticker,
.sticker img,
.star-main img,
.orbit img,
.dispatch-art img,
.currently-pipi img,
.pull .quote-by img,
.footer-sleep {
  filter:
    drop-shadow(0 0 1px #f5f1e4)
    drop-shadow(0 0 1px #f5f1e4)
    drop-shadow(0 10px 20px rgba(0,0,0,0.45))
    drop-shadow(0 0 14px rgba(139,92,246,0.25));
}

/* === hero visual: sticker pile === */
.hero-stage {
  position: relative; aspect-ratio: 1/1; width: 100%; max-width: 560px; margin-left:auto;
  min-height: 460px;
}
.hero-stage .halo {
  position:absolute; inset:-10%; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(139,92,246,0.35), transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(34,211,238,0.25), transparent 55%);
  filter: blur(20px);
  animation: haloSpin 22s linear infinite;
}
@keyframes haloSpin { to { transform: rotate(360deg); } }

.star-main {
  position:absolute; inset: 12%; z-index: 3;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5)) drop-shadow(0 0 24px rgba(139,92,246,0.4));
  animation: bob 5s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.star-main img { width:100%; height:100%; object-fit:contain; }

/* orbiting sticker minis */
.orbit {
  position:absolute; top:50%; left:50%;
  width: 72px; height:72px; transform: translate(-50%,-50%);
  pointer-events:none;
}
.orbit img {
  position:absolute; width:72px; height:72px; object-fit:contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5));
  transition: transform .3s var(--ease);
}
.orbit--a { animation: orbitA 26s linear infinite; }
.orbit--b { animation: orbitB 32s linear infinite reverse; }
.orbit--c { animation: orbitC 20s linear infinite; }
.orbit--d { animation: orbitD 38s linear infinite reverse; }
@keyframes orbitA { from { transform: translate(-50%,-50%) rotate(0) translateX(220px) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg) translateX(220px) rotate(-360deg); } }
@keyframes orbitB { from { transform: translate(-50%,-50%) rotate(0) translateX(260px) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg) translateX(260px) rotate(-360deg); } }
@keyframes orbitC { from { transform: translate(-50%,-50%) rotate(0) translateX(180px) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg) translateX(180px) rotate(-360deg); } }
@keyframes orbitD { from { transform: translate(-50%,-50%) rotate(0) translateX(290px) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg) translateX(290px) rotate(-360deg); } }

.scribble {
  position:absolute; font-family: var(--font-hand); color: var(--accent-highlight);
  font-size: 1.4rem; font-weight:700; pointer-events:none;
  line-height: 1.1;
}
.scribble svg { stroke: var(--accent-highlight); fill:none; stroke-width:2; stroke-linecap:round; display:block; }
/* Top-left scribble: label sits above, arrow curls down-right toward Admiral */
.scribble--main {
  top: 8%; left: 2%;
  transform: rotate(-6deg);
  text-align: left;
}
.scribble--main svg { margin-top: 2px; }
/* Bottom-right: arrow leads up-left into the orbit ring, label under it */
.scribble--alt {
  bottom: 8%; right: 2%;
  transform: rotate(5deg);
  text-align: right;
  font-size: 1.15rem;
  color: var(--neon-teal);
}
.scribble--alt svg { stroke: var(--neon-teal); margin-left: auto; }

/* ========== ticker ========== */
.ticker {
  border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(15,23,42,0.5), rgba(2,6,23,0.9));
  overflow:hidden; padding: 14px 0;
  position:relative;
}
.ticker-track {
  display:flex; gap: 3rem; animation: tick 40s linear infinite;
  white-space: nowrap; width: max-content;
}
.ticker-track span {
  font-family: var(--font-display); font-size: 1.05rem; color: var(--text-secondary);
  display:inline-flex; align-items:center; gap:.8rem; letter-spacing:.01em;
}
.ticker-track span b { color: var(--neon-teal); font-family: var(--font-code); font-size:.75rem; letter-spacing:.15em; }
.ticker-track i { font-style:normal; color: var(--accent-highlight); }
.ticker-track .sep { color: var(--text-dim); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ========== CREW SECTION (sticker gallery) ========== */
.crew-section { padding: 6rem 0; position: relative; }
.section-head { max-width: 820px; margin-bottom: 3rem; }
.kicker {
  font-family: var(--font-code); font-size:.75rem; letter-spacing:.25em; text-transform:uppercase;
  color: var(--neon-teal); margin-bottom: 1rem;
}
.kicker::before { content:'// '; color: var(--text-dim); }

h2.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 900;
  letter-spacing: -0.03em; line-height: 1;
  font-variation-settings: 'opsz' 144;
}
h2.section-title .italic { font-style:italic; color: var(--accent-highlight); font-weight:700; }
.section-sub {
  color: var(--text-secondary); font-size: 1.08rem; margin-top: 1rem; max-width: 60ch;
}

/* sticker wall */
.sticker-wall {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  padding: 2rem 0;
}
.sticker {
  position: relative;
  aspect-ratio: 1/1;
  padding: 1.2rem;
  border-radius: 24px;
  display:flex; align-items:center; justify-content:center;
  transition: transform .35s var(--ease), box-shadow .35s;
  cursor: default;
}
.sticker::before {
  content:''; position:absolute; inset:0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid var(--border-subtle);
  z-index: 0;
}

/* Clean-line pipis — CSS adds the sticker halo + white edge.
   Raw pipis (which already have the white outline baked into the PNG)
   get a subtler treatment so the border doesn't stack and look fuzzy. */
.sticker--clean img {
  filter:
    drop-shadow(0 0 1px #f5f1e4)
    drop-shadow(0 0 1px #f5f1e4)
    drop-shadow(0 10px 20px rgba(0,0,0,0.4))
    drop-shadow(0 0 14px rgba(139,92,246,0.25)) !important;
}
.sticker--raw img {
  /* No white halo — the PNG already has one. Just lift + ambience. */
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45)) !important;
}
.sticker--raw::before {
  /* Slightly darker panel under raw stickers so the white-edged
     artwork has contrast to pop against. */
  background: linear-gradient(180deg, rgba(15,23,42,0.7), rgba(11,20,38,0.4)) !important;
}
.sticker::after {
  /* fake "sticker tape" at top */
  content:''; position:absolute; top:-10px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  width: 48px; height: 18px;
  background: rgba(251,191,36,0.4);
  border: 1px dashed rgba(251,191,36,0.55);
  z-index: 2;
  backdrop-filter: blur(2px);
}
.sticker img {
  position: relative; z-index: 1; width: 82%; height: 82%; object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
  transition: transform .4s var(--ease);
}
.sticker .label {
  position:absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-code); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); z-index: 2;
}
.sticker:hover { transform: translateY(-6px) rotate(-2deg); }
.sticker:hover img { transform: scale(1.08) rotate(4deg); }
.sticker:nth-child(3n+1) { transform: rotate(-1.5deg); }
.sticker:nth-child(3n+1):hover { transform: rotate(-3deg) translateY(-6px); }
.sticker:nth-child(3n+2) { transform: rotate(1.2deg); }
.sticker:nth-child(3n+2):hover { transform: rotate(3deg) translateY(-6px); }

/* "meet the crew" annotations */
.annotation-strip {
  margin: 3rem auto 0;
  max-width: 780px;
  padding: 1.5rem 2rem;
  border-radius: 16px;
  background: rgba(251,191,36,0.06);
  border: 1px dashed rgba(251,191,36,0.3);
  font-family: var(--font-hand);
  font-size: 1.35rem; line-height: 1.4;
  color: var(--accent-highlight);
  display:flex; align-items:center; gap: 1.2rem;
}
.annotation-strip i.fa-arrow-up {
  color: var(--accent-warm); font-size: 1.5rem;
}
.annotation-strip span em { color: var(--text-primary); font-style: italic; }

/* ========== ABOUT ========== */
.about { padding: 5rem 0; position: relative; }
.about-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items:center; }

.logbook-card {
  background:
    linear-gradient(180deg, rgba(15,23,42,0.95), rgba(11,20,38,0.95));
  border: 1px solid var(--border-default);
  border-radius: 20px;
  padding: 2.2rem;
  position: relative;
  box-shadow: var(--shadow-md);
}
.logbook-card::before {
  content: 'LOG';
  position:absolute; top: -12px; left: 2rem;
  background: var(--bg-base); padding: 0 10px;
  font-family: var(--font-code); font-size:.7rem; letter-spacing:.3em; color: var(--neon-teal);
}
.logbook-date {
  font-family: var(--font-code); font-size:.78rem; color: var(--text-muted);
  border-bottom: 1px dashed var(--border-default); padding-bottom: .8rem; margin-bottom: 1.4rem;
  display:flex; justify-content:space-between;
}
.logbook-entry { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); }
.logbook-entry p + p { margin-top: 1rem; }
.logbook-entry strong { color: var(--accent-highlight); font-weight:600; }
.logbook-signature {
  font-family: var(--font-hand); font-size: 1.8rem;
  color: var(--neon-teal); margin-top: 1.4rem;
  transform: rotate(-2deg); display:inline-block;
}

.decoder-stack { display: flex; flex-direction: column; gap: 1rem; }
.decoder {
  display:grid; grid-template-columns: 72px 1fr; gap: 1.2rem; align-items:center;
  padding: 1.1rem 1.3rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  transition: transform .2s, border-color .2s, background .2s;
}
.decoder:hover { transform: translateX(6px); border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.06); }
.decoder .glyph {
  width: 72px; height: 72px; display:grid; place-items:center;
  font-family: var(--font-serif); font-weight: 900; font-style: italic;
  font-size: 2.4rem;
  background: var(--gradient-cta);
  color: #020617; border-radius: 14px;
  box-shadow: 0 6px 20px rgba(99,102,241,0.3);
  font-variation-settings: 'opsz' 144;
}
.decoder:nth-child(2) .glyph { background: linear-gradient(135deg, var(--neon-violet), var(--neon-indigo)); }
.decoder:nth-child(3) .glyph { background: linear-gradient(135deg, var(--accent-warm), var(--accent-highlight)); color: #020617; }
.decoder h3 { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700; letter-spacing:-0.01em; margin-bottom: 2px; }
.decoder p { font-size: .93rem; color: var(--text-muted); }

/* ========== BIG QUOTE ========== */
.pull {
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pull::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(600px 300px at 50% 50%, rgba(139,92,246,0.12), transparent 65%);
}
.pull .quote {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem); font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.25;
  max-width: 32ch; margin: 0 auto;
  font-variation-settings: 'opsz' 144;
}
.pull .quote .highlight { background: var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pull .quote-by {
  margin-top: 2rem; font-family: var(--font-code); font-size: .8rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--text-muted);
  display:inline-flex; align-items:center; gap: .7rem;
}
.pull .quote-by img { width: 40px; height: 40px; border-radius: 50%; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }

/* ========== CURRENTLY (status band, PiPi-ified) ========== */
.currently {
  padding: 2.5rem 0;
  position:relative;
}
.currently-inner {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 2rem; align-items:center;
  padding: 1.5rem 2rem;
  background: linear-gradient(90deg, rgba(99,102,241,0.08), rgba(139,92,246,0.04));
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 20px;
  position: relative;
}
.currently-pipi { position: relative; width: 120px; height: 120px; margin: -2rem 0; }
.currently-pipi img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(99,102,241,0.4)); animation: bob 4s infinite; }
/* bubble floats ABOVE PiPi's head — tail points down-left into PiPi, and the
   bubble doesn't overlap the parrot sticker. Works at narrow viewports too. */
.currently-bubble {
  position: absolute;
  bottom: calc(100% - 8px);
  left: 40%;
  background: var(--paper); color: var(--ink);
  padding: 8px 14px; border-radius: 18px;
  font-family: var(--font-hand); font-size: 1.05rem; font-weight: 700;
  white-space: nowrap; transform: rotate(-3deg);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  z-index: 3;
}
.currently-bubble::before {
  content:''; position: absolute; bottom: -10px; left: 18px;
  border: 6px solid transparent; border-top-color: var(--paper);
  border-bottom: 0;
}
.currently-meta { font-family: var(--font-code); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: var(--neon-teal); margin-bottom: 6px; }
.currently-text { font-size: 1rem; color: var(--text-secondary); font-weight: 500; }
.currently-text b { color: var(--accent-highlight); font-weight: 700; }
.currently-badge {
  font-family: var(--font-code); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(34,211,238,0.1); border:1px solid rgba(34,211,238,0.3); color: var(--neon-teal);
}

/* ========== JOIN CREW ========== */
.join { padding: 6rem 0; position:relative; }

.dispatch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 3rem 0; }
.dispatch {
  aspect-ratio: 3/4;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border-default);
  padding: 1.5rem;
  position: relative;
  display:flex; flex-direction:column; justify-content:space-between;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
  overflow: visible; /* let the sticker overhang a touch, like it's peeled onto the card */
}
.dispatch::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(400px 300px at 80% 0%, rgba(99,102,241,0.12), transparent 60%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.dispatch:hover { border-color: rgba(99,102,241,0.5); transform: translateY(-4px); }
.dispatch:hover::before { opacity: 1; }
.dispatch-head { display:flex; align-items:center; justify-content:space-between; position: relative; z-index: 2; }
/* PiPi "stuck" to each log entry like a sticker pasted over the corner.
   Sized so the whole bird is visible (no more mysterious floating feet) and
   tilted just enough to read as a physical sticker rather than pinned art. */
.dispatch-art {
  position: absolute;
  right: 10px; top: 10px;
  width: 46%; max-width: 150px; aspect-ratio: 1/1;
  pointer-events: none; z-index: 2;
  transform: rotate(7deg);
  transition: transform .4s var(--ease);
}
.dispatch-art::before {
  /* faux masking tape at the top-left corner of the sticker */
  content: '';
  position: absolute; top: -6px; left: 18%;
  width: 36px; height: 14px;
  background: rgba(251,191,36,0.38);
  border: 1px dashed rgba(251,191,36,0.6);
  transform: rotate(-12deg);
  z-index: 3;
}
.dispatch-art img { width: 100%; height: 100%; object-fit: contain; }
.dispatch:hover .dispatch-art { transform: rotate(-3deg) scale(1.06); }
.dispatch-body { position: relative; z-index: 2; max-width: 100%; margin-top: auto; }
.slot-tag {
  font-family: var(--font-code); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(34,211,238,0.1); color: var(--neon-teal); border:1px solid rgba(34,211,238,0.25);
}
.slot-role { font-family: var(--font-serif); font-weight: 800; font-size: 1.5rem; letter-spacing:-0.02em; margin-bottom: 6px; }
.slot-role .italic { font-style: italic; color: var(--accent-highlight); }
.slot-desc { font-size:.88rem; color: var(--text-muted); line-height: 1.5; }

.join-cta {
  display:flex; flex-direction: column; align-items:center; gap: 1rem;
  padding-top: 1rem;
}
.btn-large { font-size: 1.05rem; padding: 18px 32px; }
.join-cta .hint {
  font-family: var(--font-code); font-size:.78rem; color: var(--text-muted); letter-spacing:.08em;
}
.join-cta .hint a { color: var(--neon-teal); text-decoration: none; }
.join-cta .hint a:hover { text-decoration: underline; }

/* ========== FOOTER ========== */
.footer {
  padding: 5rem 0 2rem;
  background: linear-gradient(180deg, transparent, rgba(4,10,31,0.7));
  border-top: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}
.footer-grid {
  display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--border-subtle);
}
.footer-brand { max-width: 380px; }
.footer-tagline { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; font-weight: 400; margin: .8rem 0 1rem; color: var(--text-secondary); font-variation-settings: 'opsz' 144; }
.footer-desc { color: var(--text-muted); font-size:.9rem; line-height: 1.6; }
.footer-col h4 { font-family: var(--font-code); font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; color: var(--text-muted); margin-bottom: 1rem; }
.footer-col ul { list-style:none; display:flex; flex-direction: column; gap: .6rem; }
.footer-col a { color: var(--text-secondary); text-decoration:none; font-size:.95rem; transition: color .2s; }
.footer-col a:hover { color: var(--accent-highlight); }

.footer-bottom {
  display:flex; justify-content: space-between; align-items:center;
  padding-top: 1.5rem; color: var(--text-muted); font-size:.82rem; font-family: var(--font-code);
  position: relative; z-index: 2;
  gap: 1rem; flex-wrap: wrap;
}
.footer-bottom > * { position: relative; z-index: 2; }

/* sleepy pipi hidden in footer corner — placed above footer-bottom (near brand column)
   so it never overlaps legal links. Reduced size + opacity so it reads as ambient decor. */
.footer-sleep {
  position: absolute;
  right: 2.5%;
  top: 2rem;
  width: 96px;
  pointer-events: none;
  filter:
    drop-shadow(0 0 1px #f5f1e4)
    drop-shadow(0 0 1px #f5f1e4)
    drop-shadow(0 12px 24px rgba(0,0,0,0.45))
    drop-shadow(0 0 14px rgba(139,92,246,0.25));
  opacity: .75;
  transform: rotate(-8deg);
  z-index: 0;
}
@media (max-width: 720px) {
  .footer-sleep { display: none; }
}

/* ========== CJK locale overrides (KO / JA) ==========
   Hangul and Kanji render at ~1.3x the visual width of Latin at the same pt.
   Fraunces's italic axis also doesn't exist in Gowun Batang / Shippori Mincho,
   so browsers fake-oblique the glyphs and the trailing edge clips on dark
   backgrounds. We down-shift the clamp ceilings and drop italics in favor of
   color + weight for emphasis. */
html[lang^="ko"] h1.hero-title,
html[lang^="ja"] h1.hero-title {
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  letter-spacing: -0.02em;
  word-break: keep-all;
  line-height: 1.15;
}
html[lang^="ko"] h2.section-title,
html[lang^="ja"] h2.section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  word-break: keep-all;
  line-height: 1.2;
}
html[lang^="ko"] .pull .quote,
html[lang^="ja"] .pull .quote {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  max-width: 36ch;
  line-height: 1.5;
  word-break: keep-all;
}
html[lang^="ko"] .hero-lede,
html[lang^="ja"] .hero-lede,
html[lang^="ko"] .section-sub,
html[lang^="ja"] .section-sub,
html[lang^="ko"] .logbook-entry,
html[lang^="ja"] .logbook-entry {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Kill fake italic in CJK — Gowun Batang/Shippori Mincho don't have real italic,
   so fake-oblique skew causes edge clipping and looks sloppy. Preserve color +
   weight emphasis. `font-synthesis: none` prevents automatic italic synthesis. */
html[lang^="ko"] h1.hero-title .italic,
html[lang^="ja"] h1.hero-title .italic,
html[lang^="ko"] h2.section-title .italic,
html[lang^="ja"] h2.section-title .italic,
html[lang^="ko"] .slot-role .italic,
html[lang^="ja"] .slot-role .italic,
html[lang^="ko"] .hero-lede em,
html[lang^="ja"] .hero-lede em,
html[lang^="ko"] .logbook-entry em,
html[lang^="ja"] .logbook-entry em,
html[lang^="ko"] .pull .quote,
html[lang^="ja"] .pull .quote,
html[lang^="ko"] .logbook-signature,
html[lang^="ja"] .logbook-signature,
html[lang^="ko"] .footer-tagline,
html[lang^="ja"] .footer-tagline,
html[lang^="ko"] .ticker-track i,
html[lang^="ja"] .ticker-track i,
html[lang^="ko"] .annotation-strip em,
html[lang^="ja"] .annotation-strip em,
html[lang^="ko"] .section-sub em,
html[lang^="ja"] .section-sub em {
  font-style: normal;
  font-synthesis: none;
}

/* line-through 선이 fake italic glyph 꼬리와 부딪혀 끝이 잘려보이는 현상 완화 */
h1.hero-title .strike {
  text-decoration-skip-ink: none;
  padding-right: 0.1em;
}

/* ========== responsive ========== */
@media (max-width: 960px) {
  .hero { min-height: auto; padding: 3rem 0 4rem; }
  .hero-grid, .about-wrap, .footer-grid { grid-template-columns: 1fr; }
  .hero-stage { margin: 2rem auto 0; max-width: 420px; min-height: 380px; }
  .dispatch-grid { grid-template-columns: 1fr; }
  .dispatch { aspect-ratio: auto; min-height: 200px; }
  .currently-inner { grid-template-columns: 80px 1fr; }
  .currently-badge { grid-column: 1 / -1; justify-self: start; }
  .currently-pipi { width:80px; height:80px; margin:0; }
  .currently-bubble { display:none; }
  .nav-links { display:none; }
  .orbit--a, .orbit--d { display: none; }
  .orbit--b img, .orbit--c img { width: 56px; height: 56px; }
  @keyframes orbitB { from { transform: translate(-50%,-50%) rotate(0) translateX(170px) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg) translateX(170px) rotate(-360deg); } }
  @keyframes orbitC { from { transform: translate(-50%,-50%) rotate(0) translateX(130px) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg) translateX(130px) rotate(-360deg); } }
}

/* ========== entrance animations ========== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px); animation: reveal .9s var(--ease) forwards; }
  .reveal.d1 { animation-delay: .1s; }
  .reveal.d2 { animation-delay: .25s; }
  .reveal.d3 { animation-delay: .4s; }
  .reveal.d4 { animation-delay: .55s; }
  .reveal.d5 { animation-delay: .7s; }
  @keyframes reveal { to { opacity: 1; transform: none; } }

  .sticker { opacity: 0; animation: stickIn .6s var(--ease) forwards; }
  @keyframes stickIn {
    0% { opacity: 0; transform: scale(.6) rotate(-20deg); }
    70% { transform: scale(1.05) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
  }
  .sticker:nth-child(1) { animation-delay: 0s; }
  .sticker:nth-child(2) { animation-delay: .08s; }
  .sticker:nth-child(3) { animation-delay: .16s; }
  .sticker:nth-child(4) { animation-delay: .24s; }
  .sticker:nth-child(5) { animation-delay: .32s; }
  .sticker:nth-child(6) { animation-delay: .40s; }
  .sticker:nth-child(7) { animation-delay: .48s; }
  .sticker:nth-child(8) { animation-delay: .56s; }
}

/* ========== §10 accessibility additions (handoff spec) ========== */
/* Brand-specific focus ring on all interactive elements */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--neon-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respect reduced-motion for continuous loops (orbit + ticker) */
@media (prefers-reduced-motion: reduce) {
  .orbit--a,
  .orbit--b,
  .orbit--c,
  .orbit--d,
  .ticker-track,
  .star-main,
  .currently-pipi img,
  .hero-stage .halo {
    animation: none !important;
  }
}