/* Crest Blue theme (Dipeas's Alliance crest, Oct 2026): blue structure, one gold accent, calm layout and the motion layer.
   Layers over site.css; switched on by data-dir="gold" data-calm="on" on <html>, motion by data-motion="on" (set in motion.js). */
/* Candidate "Crest Blue": Dipeas's Alliance-crest logo palette. Navy #001a40 (logo field), crest blue #306ccc, ice #e8f2fd. No pink. */
[data-faction="alliance"]{
  --crest:url(/assets/crest/lobang-crest.png);
  --ink:#eef3fa; --char:#ffffff; --iron:#fbfdff; --iron-2:#f2f6fc; --edge:#cfdcec;
  --text:#0b1d3f; --text-2:#3e4f6e; --text-3:#56678a;
  --nav-bg:rgba(0,26,64,.97); --line:#00122e;
  --pink:#2a66c7; --pink-deep:#1b4c9e; --pink-hi:#4a86e0; --pink-glow:rgba(48,108,204,.25); --pink-text:#1d58b8;
  --pink-soft:rgba(48,108,204,.12); --pink-wash:rgba(48,108,204,.14);
  --kick:#1b4c9e; --kick-strong:#143d82; --gold:#306ccc; --gold-hi:#9cc0f5; --navy:#001a40;
  --rivet:#306ccc; --banner-hi:#0a2a5c; --banner-lo:#001a40; --banner-edge:#306ccc; --banner-text:#dce8fa; --banner-num:#9cc0f5;
}
[data-faction="alliance"][data-mode="dark"]{
  --ink:#00122e; --char:#001a40; --iron:#03214d; --iron-2:#072a5c; --edge:#1d3f73;
  --text:#eef4fd; --text-2:#b6c6e2; --text-3:#8ea2c6;
  --nav-bg:rgba(0,14,36,.97); --line:#000a1f;
  --pink:#3a7be0; --pink-deep:#2a66c7; --pink-hi:#6aa1f0; --pink-glow:rgba(58,123,224,.32); --pink-text:#8fb8f5;
  --pink-soft:rgba(58,123,224,.16); --pink-wash:rgba(58,123,224,.14);
  --kick:#9cc0f5; --kick-strong:#b8d3fa; --navy:#000e24;
  --banner-hi:#0a2a5c; --banner-lo:#001a40;
}
[data-faction="alliance"] .pins i{background:#306ccc;box-shadow:0 0 0 4px rgba(48,108,204,.18)}
[data-faction="alliance"] .mswitch{border-color:#1d3f73;background:#001a40;color:#9cc0f5}
[data-faction="alliance"] .hero h1 span{color:#2a66c7;text-shadow:none}
[data-faction="alliance"][data-mode="dark"] .hero h1 span{color:#6aa1f0;text-shadow:0 0 28px rgba(58,123,224,.4)}
[data-faction="alliance"] .join{background:radial-gradient(ellipse 60% 120% at 100% 50%,rgba(48,108,204,.28),transparent 60%),linear-gradient(180deg,#0a2a5c,#001a40)}
[data-faction="alliance"] .join .btn.p{background:linear-gradient(180deg,#ffffff,#dbe8fb 55%,#a9c8f3);color:#001a40}
[data-faction="alliance"] .globe-box::before{background:radial-gradient(circle,rgba(48,108,204,.22),transparent 65%)}
[data-faction="alliance"][data-mode="dark"] .globe-box::before{background:radial-gradient(circle,rgba(58,123,224,.2),transparent 65%)}
[data-faction="alliance"] .logo{background-color:#001a40;background-size:90%;background-repeat:no-repeat;border-color:#306ccc}
[data-faction="alliance"] nav .brand i{box-shadow:0 0 0 1px rgba(48,108,204,.7)}

/* ═════════ Gold accent, rounded card system, motion ═════════ */
html[data-dir="gold"]  {--acc:#f2c14e;--acc-2:#ffe08a;--acc-ink:#3a2a00;--acc-glow:rgba(242,193,78,.35)}
html[data-dir][data-mode="light"]{--acc-text:color-mix(in srgb,var(--acc) 62%,#3a2a00)}
html[data-dir][data-mode="dark"]{--acc-text:var(--acc)}

/* Page atmosphere: two soft light pools so the page isn't flat */
html[data-dir] body{background:
  radial-gradient(900px 600px at 8% 30%,rgba(48,108,204,.22),transparent 60%),
  radial-gradient(800px 500px at 95% 70%,var(--acc-glow),transparent 65%),
  var(--ink);background-attachment:fixed}
html[data-dir][data-mode="light"] body{background:
  radial-gradient(900px 600px at 8% 30%,rgba(48,108,204,.12),transparent 60%),
  radial-gradient(800px 500px at 95% 70%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 65%),
  #eef3fa;background-attachment:fixed}
html[data-dir] section{background:transparent}

/* Accent jobs: kickers, numerals, headline word, secondary button, timeline */
html[data-dir] .kick{color:var(--acc-text) !important}
html[data-dir] .hero h1 span{background:linear-gradient(100deg,#6aa1f0 10%,var(--acc) 90%);-webkit-background-clip:text;background-clip:text;color:transparent !important;text-shadow:none !important}
html[data-dir][data-mode="light"] .hero h1 span{background:linear-gradient(100deg,#2a66c7 10%,var(--acc-text) 90%);-webkit-background-clip:text;background-clip:text}
html[data-dir] .btn.s{background:transparent !important;outline:1.5px solid var(--acc) !important;color:var(--text) !important;clip-path:none;border-radius:999px}
html[data-dir] .btn.p{clip-path:none;border-radius:999px;box-shadow:0 8px 24px rgba(48,108,204,.45),inset 0 1px 0 rgba(255,255,255,.3) !important}
html[data-dir] .btn{transition:transform .2s ease,box-shadow .2s ease}
html[data-dir] .btn:hover{transform:translateY(-2px)}
html[data-dir] .btn.s:hover{box-shadow:0 0 22px var(--acc-glow)}
html[data-dir] .timeline li::before{background:var(--acc);box-shadow:0 0 14px var(--acc-glow) !important}
html[data-dir] .timeline .when{color:var(--acc-text)}
html[data-dir] nav .bn{border-radius:999px;border-color:var(--acc) !important}
html[data-dir] nav .bn b{color:var(--acc) !important}
html[data-dir][data-mode="light"] nav .bn b{color:var(--acc) !important}

/* Rounded card system (all cards) */
html[data-dir] .chamfer{clip-path:none}
html[data-dir] .plate,html[data-dir] .banner{border-radius:18px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 40%),linear-gradient(180deg,#0b2b5e,#04193d) !important;
  border:1px solid rgba(156,192,245,.18) !important;color:#eef4fd;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 20px 40px -18px rgba(0,8,26,.7) !important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}
html[data-dir][data-mode="light"] .plate:not(.next):not(.join *){background:linear-gradient(180deg,#ffffff,#f5f8fd) !important;color:var(--text);
  border:1px solid rgba(48,108,204,.16) !important;box-shadow:0 1px 0 #fff inset,0 18px 36px -20px rgba(0,26,64,.35) !important}
html[data-dir] .plate::before,html[data-dir] .plate::after{display:none}
/* accent hairline across the top of every card */
html[data-dir] .banner::before,html[data-dir] .plate:not(.next)>:first-child::before{content:none}
html[data-dir] .plate,html[data-dir] .banner{background-clip:padding-box}
html[data-dir] .plate::after,html[data-dir] .banner::after{content:"";display:block;position:absolute;left:18px;right:18px;top:0;height:2px;width:auto;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);box-shadow:0 0 16px var(--acc-glow);opacity:.9;border:0}
/* sheen that sweeps on hover */
html[data-dir] .banner::before{content:"";position:absolute;inset:0;height:auto;z-index:-1;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.10) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .9s ease;box-shadow:none;opacity:1}
html[data-dir] .banner:hover::before{transform:translateX(120%)}
html[data-dir] .plate:hover,html[data-dir] .banner:hover{border-color:color-mix(in srgb,var(--acc) 55%,transparent) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 50px -18px rgba(0,8,26,.75),0 0 0 1px color-mix(in srgb,var(--acc) 25%,transparent),0 0 40px -10px var(--acc-glow) !important}
/* values banners: big gradient numeral, roomier */
html[data-dir] .banners{gap:22px}
html[data-dir] .banner{padding:30px 28px 34px !important}
html[data-dir] .banner .num{font-size:54px;line-height:1;letter-spacing:0;background:linear-gradient(180deg,var(--acc-2),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent !important;filter:drop-shadow(0 0 14px var(--acc-glow))}
html[data-dir] .banner h3{color:#fff;margin-top:14px}
html[data-dir] .banner p{color:#c4d3ec}
html[data-dir] .slot .day{color:inherit}
html[data-dir][data-mode="light"] .slot .day{color:var(--text)}
html[data-dir] .tbc{border-color:var(--acc-text) !important;color:var(--acc-text) !important;border-radius:999px}
/* hero card + join panel */
html[data-dir] .next{backdrop-filter:blur(10px)}
html[data-dir] .next .go{border-radius:999px;background:linear-gradient(180deg,#4a86e0,#2a66c7) !important;color:#fff !important}
html[data-dir] .join{border-radius:24px;clip-path:none;overflow:hidden;position:relative;
  background:radial-gradient(600px 300px at 90% 10%,var(--acc-glow),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgba(48,108,204,.45),transparent 60%),linear-gradient(160deg,#0b2b5e,#001a40) !important}
html[data-dir] .join .step b{color:var(--acc) !important}
html[data-dir] .join .btn.p{background:linear-gradient(180deg,var(--acc-2),var(--acc)) !important;color:var(--acc-ink) !important;box-shadow:0 8px 26px var(--acc-glow) !important}
  background:linear-gradient(180deg,#0b2b5e,#04193d) padding-box,conic-gradient(from var(--spin,0deg),var(--acc),var(--acc-2),#306ccc,var(--acc)) border-box !important;animation:lab-spin 3s linear infinite}
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes lab-spin{to{--spin:360deg}}

/* ── Motion ── */
html[data-motion="on"] .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
html[data-motion="on"] .rv.in{opacity:1;transform:none}
html[data-motion="on"] .hero h1 .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);animation:lab-rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d)}
@keyframes lab-rise{to{opacity:1;transform:none}}
html[data-motion="on"] .hero::before{animation:crest-drift 28s ease-in-out infinite alternate}
@keyframes crest-drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-2%,-1.5%,0)}}
html[data-motion="on"] .hero h1 span.w:not(.hl){background:none !important;color:inherit !important}
html[data-motion="on"] .hero h1 span.hl{background-size:200% 100% !important;animation:lab-rise .9s cubic-bezier(.2,.8,.2,1) forwards,lab-shimmer 6s ease-in-out 1.2s infinite;animation-delay:var(--d),1.2s}
@keyframes lab-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
html[data-motion="on"] nav .brand i{animation:lab-glow 4s ease-in-out infinite}
@keyframes lab-glow{0%,100%{box-shadow:0 0 0 1px rgba(48,108,204,.7),0 0 0 rgba(48,108,204,0)}50%{box-shadow:0 0 0 1px var(--acc),0 0 18px var(--acc-glow)}}
#motes{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero{position:relative;overflow:hidden}
@media (prefers-reduced-motion:reduce){html[data-motion="on"] *{animation:none !important;transition:none !important}html[data-motion="on"] .rv{opacity:1;transform:none}}

/* fixes */
html[data-dir] .banner{clip-path:none !important}
html[data-dir] body{background:var(--ink) !important}
html[data-dir][data-mode="light"] body{background:#eef3fa !important}
html[data-dir] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(900px 600px at 6% 35%,rgba(48,108,204,.28),transparent 60%),
  radial-gradient(700px 520px at 96% 75%,var(--acc-glow),transparent 65%)}
html[data-dir][data-mode="light"] body::before{background:
  radial-gradient(900px 600px at 6% 35%,rgba(48,108,204,.14),transparent 60%),
  radial-gradient(700px 520px at 96% 75%,color-mix(in srgb,var(--acc) 18%,transparent),transparent 65%)}
html[data-dir] main,html[data-dir] section,html[data-dir] .wrap{background:transparent !important}
html[data-dir="gold"][data-mode="light"]{--acc-text:#b07d0c}
html[data-dir][data-mode="light"] .next,html[data-dir][data-mode="light"] .next *:not(.go),html[data-dir][data-mode="light"] .join,html[data-dir][data-mode="light"] .join h2,html[data-dir][data-mode="light"] .join p,html[data-dir][data-mode="light"] .join .step{color:#eef4fd !important}
html[data-dir][data-mode="light"] .next dt,html[data-dir][data-mode="light"] .next .t{color:#9cb4da !important}
html[data-dir] .join .btn.s{color:#fff !important}
html[data-dir][data-mode="light"] .join .kick{color:var(--acc) !important}
html[data-dir] .next .facts>div{border-top-color:rgba(156,192,245,.22) !important}

/* ═════════ Pass 2 (31 Oct): one accent rule, calmer motion ═════════
   Rule: accent = action and emphasis. Gold fills every primary button, colours every small label,
   numeral, highlight word, marker and card top line. Blue = structure (surfaces, borders, secondary buttons). */
html[data-dir] .hero h1 span{background:none !important;color:var(--acc-text) !important;-webkit-text-fill-color:currentColor;text-shadow:0 0 30px var(--acc-glow) !important}
html[data-dir][data-mode="light"] .hero h1 span{text-shadow:none !important}
html[data-dir] .btn.p,html[data-dir] .join .btn.p,html[data-dir] .next .go{background:linear-gradient(180deg,var(--acc-2),var(--acc)) !important;color:var(--acc-ink) !important;
  box-shadow:0 8px 24px var(--acc-glow),inset 0 1px 0 rgba(255,255,255,.45) !important;border-radius:999px;outline:0 !important}
html[data-dir] .btn.s{outline:1.5px solid rgba(156,192,245,.45) !important;color:var(--text) !important}
html[data-dir] .join .btn.s,html[data-dir] .next .btn.s{color:#fff !important}
html[data-dir] .btn.s:hover{outline-color:#9cc0f5 !important;box-shadow:0 0 18px rgba(74,134,224,.35) !important}
html[data-dir] nav .bn{border:1.5px solid rgba(156,192,245,.45) !important}
html[data-dir] nav .bn b{color:var(--acc) !important}
html[data-dir] nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--acc)}
html[data-dir] nav{border-bottom:1px solid rgba(156,192,245,.18) !important}
html[data-dir] .pins i{background:var(--acc) !important;box-shadow:0 0 0 4px var(--acc-glow) !important}
html[data-dir] .num,html[data-dir] .step b,html[data-dir] .timeline .when{color:var(--acc-text) !important}
html[data-dir] .page-hero h1 span,html[data-dir] .disp span{color:var(--acc-text)}
html[data-dir] .lookfor{border-left:0 !important}
html[data-dir] .notice{border-left-color:var(--acc) !important}
html[data-dir] a:not(.btn):not(.bn):not(.brand):not(.go):not(nav a):hover{color:var(--acc-text)}
html[data-dir] input:focus,html[data-dir] select:focus,html[data-dir] textarea:focus{outline:2px solid var(--acc) !important;outline-offset:1px}
html[data-dir] footer{border-top:1px solid rgba(156,192,245,.18) !important}
html[data-dir] footer .fth{color:#fff}
html[data-dir] .join::after{display:none}
html[data-dir] .join{border:1px solid rgba(156,192,245,.18)}

/* Motion trimmed: no sheen, tilt, spinning borders, logo pulse or shimmer. Only clickable things react. */
html[data-dir] .banner::before{display:none !important}
html[data-dir] .plate:hover,html[data-dir] .banner:hover{border-color:rgba(156,192,245,.18) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 20px 40px -18px rgba(0,8,26,.7) !important;animation:none !important;transform:none !important}
html[data-dir][data-mode="light"] .plate:not(.next):hover{border-color:rgba(48,108,204,.16) !important;box-shadow:0 1px 0 #fff inset,0 18px 36px -20px rgba(0,26,64,.35) !important}
html[data-dir] a.plate{cursor:pointer}
html[data-dir] a.plate:hover{transform:translateY(-3px) !important;border-color:color-mix(in srgb,var(--acc) 50%,transparent) !important}
html[data-motion="on"] nav .brand i{animation:none}
html[data-motion="on"] .rv{transform:translateY(14px);transition-duration:.6s}

/* ═════════ Calm layout (31 Oct, step-back review) ═════════
   One display voice (Lilita only for page and section headlines), one gold button per view,
   gold kept for buttons, numerals and the highlight word, fewer boxes, no repeated facts. */
html[data-calm="on"] .kick{color:var(--acc-text) !important;letter-spacing:.16em}
html[data-calm="on"][data-mode="light"] .kick{color:var(--acc-text) !important}
html[data-calm="on"] .sec-head h2,html[data-calm="on"] .page-hero h1{font-size:42px}
html[data-calm="on"] .join h2{font-size:42px}
html[data-calm="on"] .banner h3,html[data-calm="on"] .plate h3,html[data-calm="on"] .slot .day,html[data-calm="on"] .next .n,html[data-calm="on"] .timeline h3,html[data-calm="on"] .lookfor .day{
  font-family:'Space Grotesk',Inter,sans-serif !important;font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:21px;line-height:1.25}
html[data-calm="on"] .next .n{font-size:24px}
html[data-calm="on"] .timeline h3{font-size:22px}
/* values: three open columns, no boxes */
html[data-calm="on"] .banners{gap:48px}
html[data-calm="on"] .banner{background:none !important;border:0 !important;box-shadow:none !important;border-radius:0;padding:22px 0 0 !important;border-top:1px solid rgba(156,192,245,.22) !important;overflow:visible}
html[data-calm="on"][data-mode="light"] .banner{border-top-color:rgba(0,26,64,.14) !important}
html[data-calm="on"] .banner::after{display:none}
html[data-calm="on"] .banner .num{font-size:15px;filter:none;letter-spacing:.12em;font-family:'Space Grotesk';font-weight:700}
html[data-calm="on"] .banner h3{color:var(--text) !important;margin:8px 0 10px}
html[data-calm="on"] .banner p{color:var(--text-2) !important}
/* the facts already sit in the hero card */
html[data-calm="on"] #forever{display:none}
/* one gold button per view: the hero card's Discord link becomes quiet */
html[data-calm="on"] .next .go{background:transparent !important;color:var(--text) !important;box-shadow:none !important;outline:1.5px solid rgba(156,192,245,.4) !important}
html[data-calm="on"] .next{box-shadow:0 20px 40px -24px rgba(0,8,26,.7) !important}
html[data-calm="on"] .plate::after{opacity:.55}
/* quieter atmosphere */
html[data-calm="on"] body::before{opacity:.55}
html[data-calm="on"][data-mode="light"] body::before{display:none}
html[data-calm="on"] .hero h1 span{text-shadow:none !important}
html[data-calm="on"] .btn.p{box-shadow:0 6px 18px var(--acc-glow) !important}
html[data-calm="on"] section{padding-block:72px}
html[data-motion="on"] .hero::before{animation:crest-drift 20s ease-in-out infinite alternate}
@keyframes crest-drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-3%,-2%,0)}}
html[data-calm="on"] .banner .num{background:none !important;color:var(--acc-text) !important;-webkit-text-fill-color:currentColor}
html[data-calm="on"] .next .go{color:#fff !important}
html[data-calm="on"] .join .kick{color:var(--acc) !important}

/* ═════════ Pass 3: subtle fluid motion (calm layout) ═════════ */
.tag{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;color:var(--text) !important;font-size:17px;margin-top:18px !important}
figure.era{margin:18px 0 0;max-width:540px;border-radius:14px;overflow:hidden;border:1px solid rgba(156,192,245,.2);box-shadow:0 18px 40px -20px rgba(0,8,26,.7)}
figure.era img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover}
html[data-calm="on"] .page-hero h1{line-height:1.02}

/* 1 · hero settles in once on load */
@keyframes crest-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html[data-motion="on"] .hero .kick,html[data-motion="on"] .hero h1,html[data-motion="on"] .hero .lede,html[data-motion="on"] .hero .ctas,html[data-motion="on"] .hero .next,
html[data-motion="on"] .page-hero .kick,html[data-motion="on"] .page-hero h1,html[data-motion="on"] .page-hero .lede{animation:crest-in .9s cubic-bezier(.2,.8,.2,1) both}
html[data-motion="on"] .hero h1,html[data-motion="on"] .page-hero h1{animation-delay:.08s}
html[data-motion="on"] .hero .lede,html[data-motion="on"] .page-hero .lede{animation-delay:.18s}
html[data-motion="on"] .hero .ctas{animation-delay:.28s}
html[data-motion="on"] .hero .next{animation-delay:.4s}
html[data-motion="on"] .hero h1 span.hl{animation:crest-in .9s cubic-bezier(.2,.8,.2,1) both .08s !important}


/* 3 · the line above each value draws left to right */
html[data-calm="on"] .banner{border-top:0 !important;background:linear-gradient(rgba(156,192,245,.28),rgba(156,192,245,.28)) no-repeat 0 0/100% 1px !important;transition:background-size 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
html[data-calm="on"][data-mode="light"] .banner{background-image:linear-gradient(rgba(0,26,64,.16),rgba(0,26,64,.16)) !important}
html[data-motion="on"] .banner.rv:not(.in){background-size:0% 1px !important}

/* 4 · the join panel's light drifts slowly */
html[data-motion="on"] .join{background-size:200% 200%,100% 100% !important;animation:crest-aurora 18s ease-in-out infinite alternate}
@keyframes crest-aurora{from{background-position:100% 50%,0 0}to{background-position:0% 30%,0 0}}

/* 5 · legacy: the timeline line grows as you read, markers light up, photos settle */
html[data-calm="on"] .timeline{position:relative}
html[data-motion="on"] .timeline::after{content:"";position:absolute;left:-1px;top:0;width:2px;height:var(--prog,0%);background:linear-gradient(180deg,var(--acc),rgba(242,193,78,.2));border-radius:2px;transition:height .25s linear}
html[data-motion="on"] .timeline li.rv::before{transform:rotate(45deg) scale(.3);opacity:.3;transition:transform .6s cubic-bezier(.3,1.6,.5,1) .15s,opacity .4s ease .15s}
html[data-motion="on"] .timeline li.rv.in::before{transform:rotate(45deg) scale(1);opacity:1}
html[data-motion="on"] figure.era img{transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.8,.2,1) .2s}
html[data-motion="on"] .rv.in figure.era img{transform:none}

/* 6 · nav turns to frosted glass once you scroll */
nav{transition:background-color .4s ease,backdrop-filter .4s ease,box-shadow .4s ease}
html.scrolled nav{background:rgba(0,14,36,.72) !important;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}

/* 7 · gold buttons catch a light sweep on hover (clickable only) */
html[data-dir] .btn.p{position:relative;overflow:hidden;isolation:isolate}
html[data-dir] .btn.p::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
html[data-dir] .btn.p:hover::after{transform:translateX(120%)}
@media (prefers-reduced-motion:reduce){html.scrolled nav{transition:none}}

/* Recruitment: the three fit qualities read as open columns, like the home values */
html[data-calm="on"] .fit{gap:36px !important}
html[data-calm="on"][data-dir] .fit>.plate,html[data-calm="on"][data-dir][data-mode] .fit>.plate{background:linear-gradient(rgba(156,192,245,.28),rgba(156,192,245,.28)) no-repeat 0 0/100% 1px !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;padding:22px 0 0 !important;overflow:visible;transition:background-size 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
html[data-calm="on"][data-dir][data-mode="light"] .fit>.plate{background-image:linear-gradient(rgba(0,26,64,.16),rgba(0,26,64,.16)) !important}
html[data-calm="on"][data-dir] .fit>.plate::after,html[data-calm="on"][data-dir] .fit>.plate::before,html[data-calm="on"][data-dir] .fit>.plate>:first-child::before{display:none !important}
html[data-motion="on"] .fit>.plate.rv:not(.in){background-size:0% 1px !important}
/* Loot reads as body text, not a big value */
[data-setting="loot_system"] .val{font:400 15px/1.6 Inter,sans-serif !important;color:var(--text-2) !important}
html[data-mode="dark"] [data-setting="loot_system"] .val,html[data-dir] .plate [data-setting] .val{color:#b9c6de !important}
/* Join panel: one cool light source, no warm smudge */
html[data-dir] .join{background-image:radial-gradient(ellipse 70% 120% at 85% 15%,rgba(48,108,204,.38),transparent 60%),linear-gradient(180deg,#0a2a5c,#001a40) !important}

/* Recruitment: the key facts sit in one slim strip under the intro instead of two half-empty cards */
.facts-strip{display:flex;flex-wrap:wrap;margin:30px 0 0;padding:0;border-top:1px solid rgba(156,192,245,.22);border-bottom:1px solid rgba(156,192,245,.22)}
[data-mode="light"] .facts-strip{border-color:rgba(0,26,64,.14)}
.facts-strip>div{padding:16px 32px 16px 0;margin-right:32px;border-right:1px solid rgba(156,192,245,.22)}
[data-mode="light"] .facts-strip>div{border-right-color:rgba(0,26,64,.14)}
.facts-strip>div:last-child{border-right:0;margin-right:0}
.facts-strip dt{font:600 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.facts-strip dd{margin:0;font:700 17px/1.3 'Space Grotesk',Inter,sans-serif;color:var(--text);white-space:normal}
@media (max-width:720px){.facts-strip{flex-direction:column}.facts-strip>div{border-right:0;margin-right:0;padding:14px 0}.facts-strip>div+div{border-top:1px solid rgba(156,192,245,.22)}[data-mode="light"] .facts-strip>div+div{border-top-color:rgba(0,26,64,.14)}}