/* =========================================================
   PLANET-BEBOP — bold ink outlines, flat pop colours,
   hard offset shadows (linocut / comic print feel)
   ========================================================= */
:root {
  /* the artist's palette: #ffffff #ff0000 #000000 #606060 #6b7983 #253640 #049194 #8dbbbc #cedbe1 */
  --ink: #000000; --paper: #ffffff; --red: #ff0000; --teal: #049194; --aqua: #8dbbbc; --ice: #cedbe1;
  --slate: #6b7983; --navy: #253640; --grey: #606060; --space: #253640;
  --display: 'Bungee', Impact, 'Arial Black', sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow: 6px 6px 0 var(--ink);
  --r: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id], main { scroll-margin-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--body); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0 0 .4em; letter-spacing: .01em; }
h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* paper grain on the whole page */
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: .08; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .5em; background: var(--red); color: var(--paper); border: 3px solid var(--ink); border-radius: 999px;
  padding: .7em 1.5em; font-family: var(--display); font-size: 1.1rem; text-decoration: none; box-shadow: var(--shadow);
  transition: transform .15s cubic-bezier(.3,1.8,.5,1), box-shadow .15s; }
.btn:hover { transform: translate(-2px,-3px) rotate(-2deg); box-shadow: 9px 9px 0 var(--ink); }
.btn:active { transform: translate(4px,4px); box-shadow: 1px 1px 0 var(--ink); }
.btn-small { font-size: .9rem; padding: .5em 1.1em; background: var(--teal); color: var(--ink); }

/* ---------- nav ---------- */
.site-nav { position: fixed; z-index: 50; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px 6px 6px; background: var(--paper); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--ink); }
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; font-family: var(--display); font-size: 1.1rem; line-height: 1; }
.brand small { display: block; font: 600 .62rem var(--body); letter-spacing: .2em; text-transform: uppercase; margin-top: 3px; }
.logo-planet { width: 46px; height: 46px; }
.site-nav nav { display: flex; gap: .2rem; flex-wrap: wrap; justify-content: flex-end; }
.site-nav nav a { text-decoration: none; font-weight: 800; font-size: .9rem; padding: .4em .8em; border-radius: 999px; transition: background .2s, transform .2s; }
.site-nav nav a:hover { background: var(--teal); transform: rotate(-4deg) scale(1.08); }
/* mobile: no hamburger — the logo planet opens the Orbit Nav (js/orbitnav.js) */
.brand { white-space: nowrap; }
@media (max-width: 760px) {
  .site-nav { right: auto; padding-right: 20px; }
  .site-nav nav { display: none; }
  .logo-planet { width: 52px; height: 52px; }
  .brand { position: relative; }
  .brand::before { content: ''; position: absolute; left: 3px; top: 3px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--teal); animation: ripple 2.2s ease-out infinite; pointer-events: none; }
  .brand small { font-size: 0; letter-spacing: .12em; }   /* phones: only the tap hint, so the language flag fits */
  .brand small::after { content: attr(data-tap); color: var(--red); font-size: .6rem; }
}
@keyframes ripple { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.orbit-nav { position: fixed; inset: 0; z-index: 300; display: none; touch-action: none; user-select: none; }
.orbit-nav.open { display: block; }
.orbit-nav canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.on-core { position: absolute; z-index: 3; border-radius: 50%; background: transparent; border: 0; padding: 0; }
.on-hint { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: #cedbe1; font-size: .8rem; margin: 0; }
.moon { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; will-change: transform; -webkit-tap-highlight-color: transparent; }
.moon i { width: 66px; height: 66px; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 4px 4px 0 rgba(0,0,0,.45);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.6) 0 14%, transparent 15%),
              radial-gradient(circle at 66% 62%, rgba(0,0,0,.28) 0 11%, transparent 12%),
              radial-gradient(circle at 38% 72%, rgba(0,0,0,.22) 0 7%, transparent 8%), var(--c); }
.moon span { font-family: var(--display); font-size: .95rem; color: var(--paper); background: var(--ink); border: 2px solid var(--paper); border-radius: 999px; padding: .1em .7em; }
.moon:focus-visible i { outline: 4px solid var(--paper); outline-offset: 3px; }
.m-teal { --c: var(--teal); } .m-slate { --c: var(--slate); } .m-red { --c: var(--red); } .m-grey { --c: var(--grey); } .m-aqua { --c: var(--aqua); } .m-ice { --c: var(--ice); }
html.nav-open { overflow: hidden; }
html.lino .on-hint { color: #000000; }
html.lino .moon i { background: repeating-linear-gradient(-45deg, #000000 0 3px, #f4f1ea 3px 7px); }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; min-height: 560px; background: var(--space); overflow: hidden; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
.hero-ui { position: absolute; left: 0; right: 0; top: 18%; text-align: center; pointer-events: none; }
@media (min-width: 900px) { .hero-ui { text-align: left; left: 6vw; top: 22%; right: auto; max-width: 52vw; } .hero-title { font-size: clamp(3rem, 6.5vw, 6rem) !important; } }
.hero-ui > * { pointer-events: auto; }
.hero-title { font-family: 'Bungee Shade', var(--display); font-size: clamp(2.6rem, 8.5vw, 7rem); color: var(--teal); margin: 0 0 .35em; text-shadow: 0 0 30px rgba(4,145,148,.35); pointer-events: none !important; }
.bw { display: inline-block; white-space: nowrap; }
.bl { display: inline-block; will-change: transform; }
.btn-launch { font-size: 1.25rem; transition: opacity .4s, transform .4s cubic-bezier(.3,1.8,.5,1); }
.btn-launch.gone, .hint.gone { opacity: 0; transform: scale(.6) translateY(-20px); pointer-events: none; }
.hint { color: #cedbe1; font-size: .85rem; margin-top: 1.2rem; transition: opacity .4s, transform .4s; }

/* ---------- cat strip divider ---------- */
.cat-strip { display: block; width: 100%; height: 80px; background: var(--paper); cursor: none; }

/* ---------- sections ---------- */
.section { padding: clamp(60px, 10vw, 130px) clamp(16px, 6vw, 90px); position: relative; }
.kicker { font-weight: 800; text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; color: var(--red); margin: 0 0 .6rem; }
.lead { font-size: 1.2rem; font-weight: 600; }
.reveal { opacity: 0; transform: translateY(40px) rotate(-1.5deg) scale(.97); transition: opacity .7s ease calc(var(--i, 0) * 90ms), transform .8s cubic-bezier(.2,1.5,.4,1) calc(var(--i, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }

/* captain */
.captain { display: grid; grid-template-columns: minmax(220px, 420px) 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
@media (max-width: 800px) { .captain { grid-template-columns: 1fr; } .porthole { max-width: 320px; margin: auto; } }
.porthole { position: relative; aspect-ratio: 1; border-radius: 50%; }
.porthole img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: cover; object-position: var(--focus, 50% 50%); border-radius: 50%; border: 4px solid var(--ink); }
.porthole-ring { position: absolute; inset: 0; border-radius: 50%; border: 4px solid var(--ink); box-shadow: var(--shadow);
  background: repeating-conic-gradient(var(--red) 0 10deg, var(--paper) 10deg 20deg); }
.faq { margin-top: 1.5rem; border: 3px solid var(--ink); border-radius: var(--r); padding: .8rem 1.1rem; background: var(--ice); box-shadow: 4px 4px 0 var(--ink); }
.faq summary { font-weight: 800; cursor: pointer; }
.faq h4 { margin: 1rem 0 .2rem; }
.faq p { margin: 0; font-size: .95rem; }

/* world */
.world { background: var(--navy); color: var(--paper); text-align: center; border-block: 4px solid var(--ink); }
.world .sub { font-size: 1.2rem; margin-bottom: 3rem; }
.world-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px; max-width: 1100px; margin: auto; perspective: 900px; }
.world-card { --float: 0px; --rx: 0deg; --ry: 0deg; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 28px; padding: 10px 24px 28px; box-shadow: 8px 8px 0 var(--ink); }
.world-card.in { transform: translateY(var(--float)) rotateX(var(--rx)) rotateY(var(--ry)); transition: opacity .7s, transform .25s ease-out; }
.world-card canvas { width: 100%; height: 190px; }
.world-card h3 { font-size: 1.8rem; margin: 0; }
.c-teal { background: var(--teal); } .c-aqua { background: var(--aqua); } .c-grey { background: var(--grey); color: var(--paper); }

/* works */
.works { background: var(--space); color: var(--paper); overflow: hidden; }
.works-head { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-end; }
.works-head p { max-width: 560px; }
.controls { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { background: transparent; color: var(--paper); border: 2px solid var(--paper); border-radius: 999px; padding: .3em .9em; font-weight: 800; font-size: .85rem; transition: transform .2s; }
.chips button:hover { transform: rotate(-4deg); }
.chips button.on { background: var(--teal); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--paper); }
.orbit { position: relative; height: min(80vh, 760px); min-height: 520px; margin-top: 20px; user-select: none; touch-action: pan-y; cursor: grab; }
.orbit:active { cursor: grabbing; }
#orbit-planet { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }
.orbit-item { position: absolute; left: 0; top: 0; width: 170px; padding: 0; border: 4px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 6px 6px 0 rgba(0,0,0,.6); will-change: transform; }
.orbit-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 11px 11px 0 0; }
.orbit-item span { display: block; font: 800 .8rem/1.2 var(--body); color: var(--ink); padding: .45em .5em; }
.orbit-item:hover { outline: 4px solid var(--teal); }
.orbit-hint { position: absolute; bottom: 0; width: 100%; text-align: center; color: #8dbbbc; font-size: .85rem; }
@media (max-width: 760px) { .orbit-item { width: 110px; } }
.works-grid { columns: 4 230px; column-gap: 18px; margin-top: 30px; }
.grid-item { display: block; width: 100%; margin: 0 0 18px; padding: 0; break-inside: avoid; background: var(--paper); border: 4px solid var(--ink); border-radius: 16px; overflow: hidden; text-align: left; }
.grid-item.in { transition: opacity .6s, transform .3s cubic-bezier(.3,1.8,.5,1); }
.grid-item.in:hover { transform: rotate(-2deg) scale(1.03); box-shadow: 8px 8px 0 var(--teal); }
.grid-item span { display: block; padding: .5em .7em; font-weight: 800; color: var(--ink); }

/* exhibitions — clothesline */
.expos { background: var(--teal); border-block: 4px solid var(--ink); }
.line { position: relative; overflow-x: auto; overflow-y: hidden; padding-bottom: 30px; margin: 20px calc(-1 * clamp(16px, 6vw, 90px)) 0; scrollbar-width: thin; }
#line-svg { display: block; color: var(--ink); }
#line-items { position: absolute; top: 0; left: 0; height: 100%; min-height: 470px; }
.line { min-height: 500px; }
.poster { position: absolute; left: 0; top: 0; width: 190px; padding: 8px 8px 10px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 rgba(0,0,0,.5); transform-origin: 50% 0; }
.poster img { width: 100%; height: 250px; object-fit: cover; border: 2px solid var(--ink); }
.poster span { display: block; font: 800 .8rem var(--body); margin-top: 6px; }
.peg { position: absolute; left: 50%; top: -16px; width: 12px; height: 30px; margin-left: -6px; background: var(--red); border: 2px solid var(--ink); border-radius: 3px; }
@media (max-width: 760px) { .poster { width: 150px; } .poster img { height: 190px; } }

/* log */
.log-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.log-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; margin-top: 20px; }
.log-card { display: block; text-decoration: none; background: #fff; border: 4px solid var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.log-card.in { transition: opacity .6s, transform .3s cubic-bezier(.3,1.8,.5,1), box-shadow .3s; }
.log-card.in:hover { transform: translate(-3px,-5px) rotate(-1deg); box-shadow: 10px 12px 0 var(--red); }
.log-img { aspect-ratio: 16/10; overflow: hidden; border-bottom: 4px solid var(--ink); }
.log-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.log-card:hover .log-img img { transform: scale(1.08) rotate(1deg); }
.log-body { padding: 16px 20px 20px; }
.log-body time { font-size: .8rem; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .1em; }
.log-body h3 { font-size: 1.4rem; margin: .3em 0; }
.log-body p { margin: 0 0 .6em; font-size: .95rem; }
.more { font-weight: 800; }

/* contact */
.contact { background: var(--ice); border-top: 4px solid var(--ink); display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; }
@media (max-width: 800px) { .contact { grid-template-columns: 1fr; } }
.small { font-size: .85rem; }
#mission { display: grid; gap: 14px; background: #fff; border: 4px solid var(--ink); border-radius: 24px; padding: 26px; box-shadow: 10px 10px 0 var(--navy); }
#mission label { display: grid; gap: 4px; font-weight: 800; font-size: .9rem; }
#mission input, #mission textarea, #mission select { font: inherit; padding: .6em .8em; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper); }
#mission input:focus, #mission textarea:focus { outline: none; box-shadow: 4px 4px 0 var(--teal); }
#mission button { justify-self: start; }
#mission button.launching { animation: launch 1.1s cubic-bezier(.6,0,.9,.4) forwards; }
@keyframes launch { 0% { transform: none; } 15% { transform: translateY(6px) scale(1.05, .9); } 100% { transform: translateY(-120vh) rotate(-6deg); } }

/* footer */
.site-foot { background: var(--ink); color: var(--paper); }
.site-foot .cat-strip { background: var(--ink); }
.foot-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding: 20px clamp(16px, 6vw, 90px) 30px; font-size: .9rem; }
.to-top { width: 44px; height: 88px; background: none; border: 0; padding: 0; transition: transform .3s; }
.to-top:hover { transform: translateY(-8px) rotate(4deg); }
.to-top .flame { opacity: 0; transform-origin: 20px 66px; }
.to-top:hover .flame, .to-top.fly .flame { opacity: 1; animation: flicker .1s infinite alternate; }
.to-top.fly { animation: fly 1.3s cubic-bezier(.6,0,.9,.4) forwards; }
@keyframes fly { to { transform: translateY(-110vh); } }
@keyframes flicker { from { transform: scaleY(.8); } to { transform: scaleY(1.25); } }

/* altimeter */
.alti { position: fixed; right: 10px; top: 110px; bottom: 60px; width: 34px; z-index: 40; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.alti-track { position: relative; flex: 1; width: 4px; background: repeating-linear-gradient(var(--ink) 0 6px, transparent 6px 12px); opacity: .9; }
.alti-rocket { --thrust: 0; position: absolute; left: 50%; width: 18px; margin-left: -9px; bottom: 0; }
.alti-rocket .flame { transform-origin: 20px 66px; transform: scaleY(calc(var(--thrust) * 1.6)); }
#alti-km { font: 800 .6rem var(--body); writing-mode: vertical-rl; margin-top: 6px; background: var(--paper); border: 2px solid var(--ink); border-radius: 8px; padding: 4px 1px; }
@media (max-width: 640px) { .alti { display: none; } }

/* lino toggle */
.lino-toggle { position: fixed; left: 14px; bottom: 14px; z-index: 60; font: 800 .75rem var(--body); text-transform: uppercase; letter-spacing: .1em; background: var(--paper); border: 3px solid var(--ink);
  border-radius: 999px; padding: .6em 1em; box-shadow: 3px 3px 0 var(--ink); }
.lino-toggle::before { content: ''; display: inline-block; width: .9em; height: .9em; border-radius: 50%; margin-right: .5em; vertical-align: -.1em; background: linear-gradient(90deg, var(--ink) 50%, #fff 50%); border: 2px solid var(--ink); }

#stardust { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 70; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(37,54,64,.94); display: none; align-items: center; justify-content: center; padding: 30px; }
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; max-width: min(1000px, 90vw); background: var(--paper); border: 4px solid var(--ink); border-radius: 18px; padding: 12px; box-shadow: 12px 12px 0 var(--teal); }
.lightbox img { max-height: 72vh; width: auto; margin: auto; border-radius: 8px; }
.lightbox figcaption { padding: 10px 4px 2px; font-size: .95rem; }
.lightbox figcaption span { font-size: .85rem; }
.lightbox button { position: absolute; background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; width: 48px; height: 48px; font-size: 1.6rem; line-height: 1; box-shadow: 3px 3px 0 var(--ink); }
.lb-close { top: 18px; right: 18px; } .lb-prev { left: 14px; } .lb-next { right: 14px; }

/* ===== LINO MODE: everything turns black & white linocut ===== */
html.lino { --red: #000000; --teal: #ffffff; --slate: #000000; --aqua: #ffffff; --grey: #000000; --ice: #ffffff; --navy: #000000; }
html.lino img { filter: grayscale(1) contrast(1.8) brightness(1.05); }
html.lino .world, html.lino .works { background: #000000; }
html.lino .c-teal, html.lino .c-aqua { color: var(--ink); }
html.lino .hero-title, html.lino .blog-hero h1 { color: #000000; text-shadow: none; }
html.lino .hint { color: #000000; }
html.lino .hero, html.lino .blog-hero { background: #f4f1ea; }
html.lino .chips button.on { color: #000000; background: #ffffff; }
html.lino .expos { background: repeating-linear-gradient(-45deg, #ffffff 0 6px, #e4ddcf 6px 8px); }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ===== blog page ===== */
.blog-hero { height: 46vh; min-height: 320px; position: relative; background: var(--space); overflow: hidden; }
.blog-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.blog-hero h1 { position: absolute; bottom: 12%; left: 0; right: 0; text-align: center; color: var(--teal); font-family: 'Bungee Shade', var(--display); font-size: clamp(2.4rem, 7vw, 5.5rem); margin: 0; }
.post { max-width: 760px; margin: auto; }
.post .cover { border: 4px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); margin: 20px 0 30px; }
.post-body img { border: 3px solid var(--ink); border-radius: 12px; margin: 1em 0; }
.post-body h2, .post-body h3, .post-body h4 { font-family: var(--display); font-weight: 400; }
.tags span { display: inline-block; background: var(--teal); border: 2px solid var(--ink); border-radius: 999px; padding: 0 .7em; font-size: .8rem; font-weight: 800; margin-right: 6px; }

/* ===== MOON NAV (desktop): pages orbit the hero planet, then dock in the bar (js/navmoons.js) ===== */
.nm, .nm-line, .nm-rocket { display: none; }
html.moonnav .site-nav nav, html.moonnav .alti { display: none; }
html.moonnav .nm i, html.moonnav .nm span { -webkit-mask-size: 1200px 1200px; mask-size: 1200px 1200px; -webkit-mask-position: -600px -600px; mask-position: -600px -600px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
html.moonnav .nm { display: block; position: fixed; left: 0; top: 0; width: var(--s, 40px); height: var(--s, 40px); text-decoration: none; will-change: transform; -webkit-tap-highlight-color: transparent; }
.nm i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(0,0,0,.4);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.6) 0 14%, transparent 15%),
              radial-gradient(circle at 66% 62%, rgba(0,0,0,.28) 0 11%, transparent 12%),
              radial-gradient(circle at 38% 72%, rgba(0,0,0,.22) 0 7%, transparent 8%), var(--c); }
.nm span { position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%); white-space: nowrap; font-family: var(--display); font-size: var(--fs, 13px); line-height: 1.25;
  color: var(--paper); background: var(--ink); border: 2px solid var(--paper); border-radius: 999px; padding: .1em .65em; transition: color .3s, background .3s, border-color .3s, padding .3s; }
.nm.docked span { background: transparent; border-color: transparent; color: var(--ink); padding: 0; top: calc(100% + 2px); }
.nm.docked:hover span, .nm.active span { color: var(--red); }
.nm.active i { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.nm:focus-visible { outline: none; } .nm:focus-visible i { outline: 3px solid var(--red); outline-offset: 3px; }
html.moonnav .nm-line { display: block; position: absolute; height: 0; border-top: 3px dotted var(--ink); pointer-events: none; }
html.moonnav .nm-rocket { display: block; position: absolute; width: 13px; height: 26px; margin: -13px 0 0 -6.5px; transform: rotate(90deg); pointer-events: none; }
.nm-rocket svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nm-rocket .flame { transform-origin: 20px 66px; transform: scaleY(calc(var(--thrust, 0) * 1.8 + .25)); }
.iris { position: fixed; inset: 0; z-index: 500; pointer-events: none; display: none; }
html.lino .nm i { background: repeating-linear-gradient(-45deg, #000000 0 3px, #f4f1ea 3px 7px); }

/* ===== LANGUAGES (js/i18n.js, js/langflags.js) ===== */
/* new text "re-lands": letters drop in, longer text slides down */
.drop { display: inline-block; animation: drop .6s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes drop { from { transform: translateY(-.9em) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
.reland { animation: reland .55s ease-out both; }
@keyframes reland { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* menu-bar flag picker */
.lang-pick { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 20; transition: opacity .3s; }
.lang-current { display: flex; align-items: center; gap: 4px; background: none; border: 0; padding: 2px 4px; cursor: pointer; font: 400 .8rem var(--display); color: var(--ink); }
.lang-current svg { width: 30px; height: 34px; }
.lang-current:hover .cloth, .lang-pick.open .lang-current .cloth { animation: wave .5s ease-in-out infinite alternate; }
.lang-pop { position: absolute; right: -6px; top: calc(100% + 12px); display: flex; gap: 6px; padding: 10px 12px 8px; background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.9); transform-origin: top right; transition: opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1), visibility .2s; }
.lang-pick.open .lang-pop { opacity: 1; visibility: visible; transform: none; }
.lang-choice, .on-lang { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 12px; font: 800 .7rem var(--body); color: var(--ink); }
.lang-choice svg { width: 50px; height: 56px; }
.lang-choice .cloth, .on-lang .cloth { animation: wave 1.1s ease-in-out infinite alternate; transform-origin: 7px 23px; }
.lang-choice:nth-child(2) .cloth, .on-lang:nth-child(2) .cloth { animation-delay: -.3s; }
.lang-choice:nth-child(3) .cloth, .on-lang:nth-child(3) .cloth { animation-delay: -.6s; }
.lang-choice:nth-child(4) .cloth, .on-lang:nth-child(4) .cloth { animation-delay: -.9s; }
.lang-choice:hover, .lang-choice:focus-visible { background: var(--ice); }
.lang-choice.on, .on-lang.on { box-shadow: inset 0 0 0 2px var(--ink); background: var(--teal); }
.lang-pick.open .lang-choice { animation: popflag .4s cubic-bezier(.3,1.7,.5,1) both; }
.lang-pick.open .lang-choice:nth-child(2) { animation-delay: .05s; } .lang-pick.open .lang-choice:nth-child(3) { animation-delay: .1s; } .lang-pick.open .lang-choice:nth-child(4) { animation-delay: .15s; }
@keyframes popflag { from { transform: translateY(14px) scale(.6); opacity: 0; } }
@keyframes wave { from { transform: skewY(-4deg) scaleX(.96); } to { transform: skewY(4deg) scaleX(1.02); } }
@media (max-width: 760px) {
  .lang-pick { position: relative; right: auto; top: auto; transform: none; margin-left: 8px; }
  .site-nav { display: flex; align-items: center; }
  .lang-pop { position: fixed; left: 16px; right: 16px; top: 92px; justify-content: center; transform-origin: top center; }
  .lang-choice svg { width: 40px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .drop, .reland, .lang-choice .cloth, .on-lang .cloth { animation: none !important; } }

/* easter egg: title, button, menu and Lino button step aside while the aliens attack */
.site-nav, .hero-ui, .lino-toggle { transition: opacity .5s ease; }
html.egg-on .site-nav, html.egg-on .hero-ui, html.egg-on .lino-toggle { opacity: 0; pointer-events: none; }

/* Easter egg 2: Bebop Invaders (js/invaders.js) */
html.game-on, html.game-on body { overflow: hidden; overscroll-behavior: none; }
html.game-on #hero-canvas { touch-action: none; cursor: none; }
.game-ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.game-exit { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: .4em; padding: .45em .9em; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: 13px/1 var(--display); cursor: pointer; box-shadow: 3px 3px 0 rgba(0,0,0,.45);
  opacity: 0; transform: translateY(-12px); transition: opacity .4s ease, transform .4s ease; }
.game-exit span { color: var(--red); font-size: 15px; }
.game-exit:hover, .game-exit:focus-visible { background: var(--teal); color: var(--paper); outline: none; }
.game-ui.on .game-exit { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 699px) { .game-exit b { display: none; } .game-exit { top: 10px; right: 10px; padding: .5em .7em; } }
.game-over { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity .3s ease, transform .4s cubic-bezier(.3,1.6,.5,1);
  background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 rgba(0,0,0,.5);
  padding: 1.4em 1.6em 1.5em; text-align: center; width: min(88vw, 380px); }
.game-over h2 { font-family: var(--display); color: var(--red); margin: 0 0 .3em; font-size: 2rem; }
.game-over p { margin: 0 0 1.1em; font-weight: 600; }
.game-btns { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; }
.game-ui.over .game-over { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

/* Captain's Log: video (click to play, nothing loads from YouTube/Vimeo before) + press article card */
.post-body .vid { margin: 1.4em 0; }
.vid-play, .post-body .vid iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); }
.vid-play { position: relative; cursor: pointer; overflow: hidden; color: var(--paper); font: 400 1rem var(--display);
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 1px, transparent 2px) 0 0 / 60px 60px,
              radial-gradient(circle at 70% 60%, rgba(255,255,255,.7) 0 1px, transparent 2px) 0 0 / 90px 90px,
              radial-gradient(ellipse at 50% 120%, var(--teal), var(--navy) 60%, #000); }
.vid-btn { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--red); border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.vid-btn::after { content: ''; position: absolute; left: 32px; top: 22px; border-left: 28px solid var(--paper); border-top: 18px solid transparent; border-bottom: 18px solid transparent; }
.vid-play:hover .vid-btn, .vid-play:focus-visible .vid-btn { transform: scale(1.12) rotate(-6deg); }
.vid-via { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; letter-spacing: .04em; text-shadow: 0 2px 0 #000; }
.post-body .vid figcaption { margin-top: .6em; font-size: .9rem; opacity: .8; }
.press { display: flex; gap: 14px; align-items: center; margin: 1.4em 0; padding: 14px 18px; background: var(--paper); color: var(--ink); text-decoration: none;
  border: 3px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.press:hover { transform: translate(-2px, -2px) rotate(-.4deg); box-shadow: 8px 8px 0 var(--teal); }
.press-ic { font-size: 2rem; }
.press small { display: block; font-size: .78rem; opacity: .7; }
.press b { display: block; font: 400 1.15rem var(--display); }
.press em { font-style: normal; font-weight: 800; color: var(--red); }
html.lino .vid-play { background: #111; } html.lino .vid-btn { background: #f4f1ea; } html.lino .vid-btn::after { border-left-color: #111; }

/* contact form (Formspree): honeypot + status line */
#mission .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { margin: 0; font-weight: 800; min-height: 1.4em; }
.form-status.busy { color: var(--slate); }
.form-status.ok { color: var(--teal); }
.form-status.err { color: var(--red); }
.form-status a { color: inherit; }