/* ════════════════════════════════════════════════════════════════════════════════════════════
   FAMILY FINISH — lore.html + kit.html joining the scanner's design system.
   The scanner (index) became a 560px instrument: hex field, grain, Rajdhani controls, JetBrains
   data, 8-10px radii, light-from-above surfaces, no sticky chrome. These two pages still spoke
   the launch-day language (2px radii, pulsing Anton slabs, aurora blobs, 1240px ragged column).
   This sheet realigns them to the same spine WITHOUT flattening what they are: the lore stays an
   editorial story, the kit stays a contact sheet — same column, same chrome, same materials.
   Loaded AFTER styles.css and each page's local <style>, so plain selectors win by order.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the field: hex drift instead of aurora weather, plus the scanner's vignette + scanlines ── */
.aurora{
  filter:none; inset:-20%;
  background:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 52 16v32L28 62 4 48V16z' fill='none' stroke='%237dfa1e' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 64px;
  animation:fam-drift 90s linear infinite;
}
@keyframes fam-drift{ to{ background-position:560px 640px; } }
.gridfx{
  background:
    radial-gradient(46% 30% at 50% 0%, rgba(125,250,30,.12), transparent 70%),
    radial-gradient(60% 42% at 50% 112%, rgba(125,250,30,.06), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
  -webkit-mask-image:none; mask-image:none;
}
body::after{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.16;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.topbar,.hero,.creed,.ca-strip,.ch,.foot,.sticky-buy{ z-index:3; }
@media (prefers-reduced-motion:reduce){ .aurora{ animation:none; } }

/* ── chrome: no sticky, no pulse, instrument buttons ── */
.topbar{
  position:absolute; z-index:10; border-bottom:0; backdrop-filter:none;
  background:linear-gradient(180deg, rgba(5,5,5,.92), rgba(5,5,5,.55) 70%, transparent);
}
.btn{ animation:none; border-radius:8px; }
.btn-solid{ animation:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 26px -14px rgba(125,250,30,.7); }
.topbar-buy{ min-height:34px; padding:8px 14px; font-size:11px; letter-spacing:.16em; }
.btn-row .btn{
  font-size:12px; letter-spacing:.16em; padding:12px 20px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ── THE ALIGNMENT: one 560px spine, same as the scanner. Every section shares the same left
     edge; the creed ticker stays full-bleed on purpose — it is a horizon line, not a column. ── */
.ch{ padding:clamp(48px,9vh,84px) 12px; }
.ch-inner{ max-width:560px; }
.foot-inner{ max-width:560px; }
/* the lore HERO keeps its own desktop composition — styles.css reserves padding-right so the
   headline never runs under the art. Constraining it to the column put the type on the cat.
   Phones get the column; desktop keeps the cinematic split. */
@media (max-width:899px){ .hero-inner{ max-width:560px; } }

/* cards and surfaces pick up the scanner's material: 10px radius, top light, long shadow */
.kit-card,.copyblock,.sight-grid > *,.ca-strip{
  border-radius:10px;
  background-image:linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px -22px rgba(0,0,0,.95);
}
.kit-grid{ gap:10px; }
@media (min-width:700px){ .kit-grid{ grid-template-columns:1fr 1fr; } }
.kit-meta{ padding:10px 12px; }
.kit-meta i{ font-size:.82rem; }
.kit-meta a{
  font-family:"Rajdhani",sans-serif; font-weight:600; font-size:10px; letter-spacing:.16em;
  border-radius:7px; padding:7px 11px; white-space:nowrap; border-color:rgba(125,250,30,.42);
}
.copyblock pre{ font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:.82rem; line-height:1.8; }
.copyblock button{ border-radius:7px; }

/* section eyebrows become the scanner's section-title: label + hairline fading out */
.ch-num{
  display:flex; align-items:center; gap:10px;
  font-family:"Rajdhani",sans-serif; font-weight:600; font-size:10px; letter-spacing:.26em;
}
.ch-num::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,#1d2317,transparent); }

/* focus + selection, same as the scanner */
a:focus-visible,button:focus-visible{ outline:2px solid rgba(125,250,30,.42); outline-offset:2px; border-radius:6px; }
::selection{ background:rgba(125,250,30,.25); color:#fff; }


/* ── the CONTRACT strip mid-lore: a quiet one-line notice, not a billboard. While the CA is
   undecided it should whisper, and the buttons that do nothing yet stay small. ── */
.ca-strip{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 12px;
  max-width:560px; margin:0 auto; padding:10px 14px; border:1px solid #23261b; }
.ca-strip .copy-btn,.ca-strip a{ font-size:10px; padding:6px 10px; border-radius:7px; }
.ca-strip b,.ca-strip code,.ca-strip span{ font-size:11px; letter-spacing:.06em; }


/* ── MINI APP in the topbar, every page, every size ── */
.topbar-mini{ min-height:34px; padding:8px 12px; font-size:10px; letter-spacing:.14em;
  border-radius:8px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px;
  border-color:rgba(125,250,30,.42); color:#c9cbc0; }
.topbar-mini:hover{ color:#7dfa1e; background:rgba(125,250,30,.08); box-shadow:none; }
@media (max-width:420px){ .topbar-mini{ padding:8px 9px; font-size:9px; } }


/* ── the lore hero cat: down from under the topbar — MOBILE ONLY. The desktop hero is a
   full-height cinematic split (art contained right, headline left) that was correct as designed;
   shoving it down clipped the cat in half. Wrong direction, reverted. The solid bar stays on
   every size. ── */
.topbar{ background:rgba(5,5,5,.92); border-bottom:1px solid #1d2317; }
@media (max-width:640px){
  .hero-art{ top:52px; }
  .hero{ padding-top:52px; }
}


/* ── the topbar holds ONE row on a phone. Four items (brand, mini app, 中文, SOON) were wrapping
   into two clipped rows at 375px. Everything shrinks before anything wraps; the brand never
   breaks; the Han sub-brand steps aside on the smallest screens. ── */
.topbar{ flex-wrap:nowrap; gap:8px; }
.brand{ white-space:nowrap; flex:0 1 auto; min-width:0; }
.topbar-right{ display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.lang-toggle{ white-space:nowrap; }
@media (max-width:640px){
  .topbar{ padding:8px 10px; }
  .brand b{ font-size:14px; letter-spacing:.1em; }
  .brand span{ display:none; }           /* 韭菜猫 returns at tablet width */
  .topbar-mini{ padding:7px 8px; font-size:9px; min-height:30px; }
  .topbar-buy{ min-height:30px; padding:7px 11px; font-size:10px; }
  .lang-toggle{ padding:6px 9px; font-size:11px; min-height:30px; }
}


/* ── DESKTOP LORE HERO: the cat was riding too high. styles.css sets `top:50%` then clobbers it
   one line later with `inset:auto var(--pad) auto auto` (inset resets top to auto) — while the
   translateY(-50%) still applies, dragging the art up half its own height. Re-assert the center
   so cat and headline sit on one axis. ── */
@media (min-width:641px){
  .hero-art{ top:50%; bottom:auto; }
}


/* ── ONE TYPE SCALE ACROSS THE SITE. The scanner's poster headline peaks ~2.7rem; the lore was
   blasting 5.4rem — twice the voice, and it read as a different website. The story keeps its
   drama through composition, not point size. ── */
.h-lg{ font-size:clamp(2rem, 5.2vw, 3.2rem); }
.hero-inner .h-lg{ font-size:clamp(2.1rem, 5.6vw, 3.4rem); }
.han-lg{ font-size:clamp(1.4rem, 4.4vw, 2.2rem); }
.han-md{ font-size:clamp(1rem, 3vw, 1.3rem); }
.lede{ font-size:clamp(.95rem, 1.6vw, 1.05rem); line-height:1.75; }
.creed-track span,.creed-track b{ font-size:clamp(.9rem, 2vw, 1.15rem); }
.ch{ padding:clamp(44px, 8vh, 72px) 12px; }


/* ── DESKTOP CHAPTER ART: the 1:1 originals rendered 100vw square — 1280×1280 of mostly-black
   night sky per chapter, whole screens of void between beats. Each becomes a cinematic band:
   capped height, cropped to the subject (the art's action lives in the middle of every frame). ── */
@media (min-width:641px){
  /* subjects in these square frames live just below center; 38% framed empty night sky */
  .bleed img{ width:100%; height:auto; max-height:68vh; object-fit:cover; object-position:center 58%; display:block; }
}