/* Shared plumbing for all three directions: fonts, reset, the directions bar,
   the menu, form basics, the UFO and the photo placeholders. Each direction
   brings its own skin and layout in its own stylesheet. */

@font-face{font-family:"Rubik Bubbles";src:url(fonts/rubik-bubbles-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Bungee";src:url(fonts/bungee-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Righteous";src:url(fonts/righteous-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Caveat";src:url(fonts/caveat-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;line-height:1.55}
img,svg{max-width:100%;display:block}
img{height:auto}
[hidden]{display:none !important}
h1,h2,h3,p{margin:0;overflow-wrap:normal}
p,li{overflow-wrap:break-word}
a{color:inherit}
button,input,select,textarea{font:inherit}
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:3px solid #ffe14d;outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- directions bar (comes off for the real build) ---------- */
.dirbar{position:relative;z-index:60;background:#1b1030;color:#f6f0ff;font:600 14px/1.3 "Fredoka",system-ui,sans-serif;padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center;text-align:center}
.dirbar__note{opacity:.92}
.dirbar__links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.dirbar a{color:#f6f0ff;text-decoration:none;padding:5px 12px;border-radius:999px;border:1.5px solid rgba(246,240,255,.35)}
.dirbar a[aria-current="page"]{background:#f6f0ff;color:#1b1030;border-color:#f6f0ff}
.dirbar a:hover{border-color:#f6f0ff}

/* ---------- menu (hamburger next to the main button on phones) ---------- */
.menu-btn{display:none;width:46px;height:46px;border-radius:14px;align-items:center;justify-content:center;cursor:pointer;flex:none}
.menu-btn span{display:block;width:20px;height:2.5px;background:currentColor;border-radius:2px;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:20px;height:2.5px;background:currentColor;border-radius:2px}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
@media (max-width:820px){
  .menu-btn{display:inline-flex}
  .head .nav-links{display:none}
  .head .nav-links.open{display:flex}
}

/* ---------- photo placeholders: drawn hair, swapped for her photos ---------- */
.ph{position:relative;overflow:hidden;background:
  repeating-linear-gradient(98deg,rgba(255,255,255,.18) 0 2px,transparent 2px 9px),
  repeating-linear-gradient(102deg,rgba(0,0,0,.10) 0 1px,transparent 1px 13px),
  linear-gradient(160deg,var(--c1),var(--c2) 38%,var(--c3) 70%,var(--c4))}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 30% 0%,rgba(255,255,255,.35),transparent 55%)}
.ph__tag{position:absolute;left:10px;bottom:10px;z-index:2;font:700 12px/1.2 "Nunito",system-ui,sans-serif;background:rgba(20,10,40,.78);color:#fff;padding:5px 9px;border-radius:999px}

/* ---------- beam-in color (the signature) ---------- */
.tile{position:relative}
.tile .ph{filter:grayscale(.88) brightness(.95);transition:filter .7s ease}
.tile.beamed .ph{filter:none}
.tile__beam{position:absolute;left:50%;top:-4px;width:70%;height:calc(100% + 4px);transform:translateX(-50%) scaleY(0);transform-origin:top center;clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(186,255,120,.85),rgba(120,255,214,.25) 60%,rgba(255,255,255,0));pointer-events:none;z-index:3;opacity:0;transition:transform .3s ease,opacity .3s ease}
.tile.beaming .tile__beam{transform:translateX(-50%) scaleY(1);opacity:1}
.beam-hint{font:700 13px/1.3 "Nunito",system-ui,sans-serif}

/* the saucer itself */
.ufo-trail{position:fixed;left:0;top:0;z-index:35;pointer-events:none}
.ufo{position:fixed;left:0;top:0;width:var(--ufo-w,108px);z-index:50;pointer-events:none;will-change:transform;transform:translate3d(-200px,-200px,0)}
.ufo__bob{animation:ufo-bob 2.6s ease-in-out infinite}
.ufo__beam{position:absolute;left:50%;top:78%;width:150%;height:var(--beam-h,0px);transform:translateX(-50%);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(186,255,120,.75),rgba(120,255,214,.18));opacity:0;transition:opacity .3s ease}
.ufo.beam-on .ufo__beam{opacity:1}
.ufo.rainbow.beam-on .ufo__beam{background:linear-gradient(90deg,#ff3d7f,#ff9a3d,#ffe14d,#5dff8f,#3dd6ff,#9b6bff);opacity:.85}
.ufo__lights circle{animation:ufo-blink 1.2s steps(2) infinite}
.ufo__lights circle:nth-child(2){animation-delay:.3s}.ufo__lights circle:nth-child(3){animation-delay:.6s}.ufo__lights circle:nth-child(4){animation-delay:.9s}
@keyframes ufo-bob{50%{transform:translateY(-7px) rotate(-3deg)}}
@keyframes ufo-blink{50%{opacity:.25}}
@media (max-width:820px){.ufo{--ufo-w:80px}}
@media (prefers-reduced-motion:reduce){
  .ufo{display:none}
  .tile .ph{filter:none;transition:none}
  .tile__beam{display:none}
}

/* ---------- consult form basics ---------- */
.cform{display:grid;gap:14px}
.cform__row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.cform__row{grid-template-columns:1fr}}
.cform label{display:grid;gap:6px;font-weight:700}
.cform input,.cform select,.cform textarea{width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--field-line,#2a1a4a);background:var(--field-bg,#fff8ff);color:var(--field-ink,#1b1030)}
.cform textarea{min-height:110px;resize:vertical}
.cform__steer{border-radius:12px;padding:12px 14px;font-weight:700}
.cform__err{font-weight:700}
.cform__done{display:grid;place-items:center;text-align:center;gap:10px;padding:34px 18px;border-radius:20px;position:relative;overflow:hidden}
.cform__done h3{font-size:clamp(1.6rem,4vw,2.4rem)}
.rainbow-rise{position:absolute;inset:auto 0 0 0;height:100%;background:linear-gradient(90deg,#ff3d7f33,#ff9a3d33,#ffe14d33,#5dff8f33,#3dd6ff33,#9b6bff33);transform:scaleY(0);transform-origin:bottom;transition:transform 1.1s ease;z-index:0}
.cform__done.show .rainbow-rise{transform:scaleY(1)}
.cform__done > *:not(.rainbow-rise){position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.rainbow-rise{transition:none}}

/* header fits on one line on phones: logo, short button, menu */
.cta-short{display:none}
@media (max-width:820px){
  .head{flex-wrap:wrap}
  .head .brand{flex:1 1 0;min-width:0;font-size:clamp(.95rem,4.4vw,1.2rem);line-height:1.1}
  .head .head__cta{padding:11px 16px;font-size:.95rem}
  .head .cta-long{display:none}.head .cta-short{display:inline}
}

/* "Jupiter's" sits as a smaller first line of the big headline */
.title .title__pre{display:block;font-size:.42em;line-height:1.1;margin-bottom:.12em;color:inherit;text-shadow:inherit;-webkit-text-stroke:inherit}

/* ---------- the Earthling Code (her policies) ---------- */
.code-line{margin-top:18px;font-weight:700}
.code-line a,.check a{font-weight:800}
.code{width:min(720px,calc(100vw - 32px));max-height:min(86vh,900px);padding:0;border:var(--code-line,3px solid #1b1030);border-radius:24px;background:var(--code-bg,#fff);color:var(--code-ink,#1b1030);overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.code::backdrop{background:rgba(18,7,43,.72)}
.code__inner{position:relative;padding:clamp(22px,4vw,40px);display:grid;gap:12px}
.code h2{font-family:var(--code-font,inherit);font-weight:400;font-size:clamp(1.8rem,5vw,2.6rem);line-height:1;padding-right:40px}
.code h3{font:800 1.08rem/1.25 "Nunito",system-ui,sans-serif;margin-top:10px}
.code p{line-height:1.6}
.code__kick{padding-right:52px;font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.code__motto{font-weight:800}
.code__sign{font-weight:800}
.code__close{position:absolute;z-index:3;right:14px;top:14px;width:44px;height:44px;border-radius:50%;border:2px solid currentColor;background:transparent;color:inherit;font-size:1.6rem;line-height:1;cursor:pointer}

/* a real planet ring: the back half passes behind the planet, the front
   half comes back around in front of it */
.planet__body{position:absolute;inset:0;border-radius:50%;z-index:1}
.ring{position:absolute;left:50%;top:50%;width:var(--ring-w,140%);height:var(--ring-h,30%);border-radius:50%;border:var(--ring-line,5px solid #ffe14d);box-shadow:var(--ring-glow,none);transform:translate(-50%,-50%) rotate(var(--ring-tilt,-14deg));pointer-events:none;display:block}
.ring--back{z-index:0}
.ring--front{z-index:2;clip-path:inset(50% -40px -40px -40px)}

/* the logo: round badge in the header, full art in the hero */
.head .brand{display:flex;align-items:center;gap:10px}
.brand__badge{width:44px;height:44px;border-radius:50%;flex:none;box-shadow:0 0 0 2px currentColor}
@media (max-width:820px){.brand__badge{width:36px;height:36px}}
.hero-logo{display:block;width:100%;height:auto}
@keyframes logo-float{50%{translate:0 -10px}}

/* mid-size screens: keep the header on one line */
@media (min-width:821px) and (max-width:1180px){
  .head .nav-links{gap:14px}
  .head .nav-links a{white-space:nowrap;font-size:.95rem}
  .head .cta-long{display:none}.head .cta-short{display:inline}
}
.head .nav-links a{white-space:nowrap}

/* very small phones: keep the header to two lines */
@media (max-width:380px){
  .head{gap:8px}
  .head .brand{gap:8px;font-size:.9rem}
  .brand__badge{width:30px;height:30px}
  .head .head__cta{padding:9px 12px;font-size:.88rem}
}

/* ---------- dropdowns (styled to match each direction) ---------- */
.dd{position:relative}
.dd__native{position:absolute !important;inset:0;opacity:0;pointer-events:none}
.dd__btn{position:relative;width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:12px 46px 12px 14px;border-radius:12px;border:2px solid var(--field-line,#2a1a4a);background:var(--field-bg,#fff8ff);color:var(--field-ink,#1b1030);cursor:pointer;min-height:50px}
.dd__val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd--empty .dd__val{opacity:.62}
.dd__arrow{position:absolute;right:16px;top:50%;width:11px;height:11px;margin-top:-8px;border-right:3px solid var(--dd-arrow,currentColor);border-bottom:3px solid var(--dd-arrow,currentColor);transform:rotate(45deg);transition:transform .2s ease,margin .2s ease}
.dd--open .dd__arrow{transform:rotate(225deg);margin-top:-2px}
.dd__list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;margin:0;padding:6px;list-style:none;max-height:min(320px,60vh);overflow:auto;border-radius:14px;border:2px solid var(--field-line,#2a1a4a);background:var(--dd-bg,var(--field-bg,#fff));color:var(--field-ink,#1b1030);box-shadow:0 14px 34px rgba(0,0,0,.22);outline:none}
.dd__opt{position:relative;padding:10px 12px 10px 34px;border-radius:10px;cursor:pointer;font-weight:600;line-height:1.3}
.dd__opt.is-active{background:var(--dd-hover-bg,#efe6ff);color:var(--dd-hover-ink,inherit)}
.dd__opt[aria-selected="true"]::before{content:"";position:absolute;left:13px;top:50%;width:6px;height:11px;margin-top:-8px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.dd__arrow{transition:none}}
.dd--open{z-index:60}