/* ============================================================
   ASTRO NOTES — Celestial Chronicles & Systematics
   Design tokens
   ============================================================ */
:root{
  --navy:        #0F2340;
  --navy-deep:   #081326;
  --navy-soft:   #15294a;
  --gold:        #D4AF37;
  --gold-soft:   #E7CD7E;
  --gold-dim:    #9c8338;
  --purple:      #9B72CF;
  --purple-soft: #b89ade;
  --white:       #F4F6F9;
  --muted:       rgba(244,246,249,.60);
  --muted-2:     rgba(244,246,249,.40);
  --hair:        rgba(212,175,55,.22);
  --hair-strong: rgba(212,175,55,.40);

  --serif-en: "Cinzel", serif;
  --serif-jp: "Shippori Mincho", serif;
  --sans-jp:  "Zen Kaku Gothic New", sans-serif;
  --mono:     "Space Mono", monospace;

  --maxw: 1180px;
  --pad: clamp(22px, 5vw, 64px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--navy);
  color:var(--white);
  font-family:var(--sans-jp);
  font-weight:400;
  line-height:1.85;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }
::selection{ background:rgba(212,175,55,.32); color:var(--white); }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---- starfield canvas (fixed, behind everything) ---- */
#sky{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 78% -10%, #1a3157 0%, transparent 55%),
    radial-gradient(120% 100% at 10% 110%, #11203c 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 45%, #0c1d38 100%);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  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 type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---- background watermarks (huge faint Cinzel headings) ---- */
.watermarks{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.wm-text{
  position:absolute; font-family:var(--serif-en); font-weight:700;
  font-size:clamp(120px, 22vw, 280px); letter-spacing:.06em; text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1px rgba(212,175,55,.06);
  text-stroke:1px rgba(212,175,55,.06);
  white-space:nowrap; line-height:1; user-select:none;
}
.wm-1{ top:7%; left:-3%; }
.wm-2{ top:38%; right:-6%; color:rgba(155,114,207,.04); -webkit-text-stroke:1px rgba(155,114,207,.07); }
.wm-3{ top:72%; left:-2%; }
@media (max-width:760px){ .wm-text{ font-size:clamp(80px,30vw,160px); } .wm-1{top:5%;} .wm-2{top:50%;} .wm-3{top:80%;} }
main{ position:relative; z-index:2; }

/* ---- side rails (fixed vertical decoration) ---- */
.side-rail{
  position:fixed; top:50%; right:14px; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; z-index:5; pointer-events:none;
  font-family:var(--mono); font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); opacity:.45; mix-blend-mode:screen;
}
.side-rail.side-rail-l{ right:auto; left:14px; transform:translateY(-50%); color:var(--purple-soft); opacity:.35; }
@media (max-width:980px){ .side-rail{ display:none; } }

/* ---- coordinate stamps ---- */
.coord{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--purple-soft); opacity:.75;
  border:1px solid rgba(155,114,207,.32); padding:5px 11px; border-radius:2px;
  margin-left:14px; vertical-align:middle;
  background:rgba(155,114,207,.04);
}
.coord-c{ margin:8px 0 0; display:inline-flex; }
@media (max-width:600px){ .coord{ font-size:9.5px; letter-spacing:.16em; padding:4px 8px; margin:6px 0 0; display:inline-flex; } }

/* ---- nav coord stamp ---- */
.nav-coord{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-soft); opacity:.55; margin-left:24px;
}
@media (max-width:780px){ .nav-coord{ display:none; } }

/* ---- section divider (between sections) ---- */
.section-divider{ position:relative; z-index:2; padding:clamp(20px,3vw,40px) var(--pad); }
.section-divider .constellation-rule{ max-width:780px; margin:0 auto; }

/* ---- hero corner decorations ---- */
.hero-deco{ position:absolute; width:clamp(130px,16vw,210px); height:auto; z-index:1; pointer-events:none; }
.hero-deco.hd-tl{ top:108px; left:clamp(20px,4vw,60px); }
.hero-deco.hd-br{ bottom:64px; right:clamp(20px,4vw,60px); }
@media (max-width:760px){ .hero-deco{ opacity:.4; } }

/* ---- constellation cards in works ---- */
.cnst-ph{
  background:
    radial-gradient(60% 80% at 50% 40%, rgba(212,175,55,.05), transparent 70%),
    linear-gradient(150deg, var(--navy-soft), var(--navy-deep)) !important;
}
.cnst-ph::before{
  content:""; position:absolute; inset:14px; border:1px solid rgba(212,175,55,.18); border-radius:3px; pointer-events:none; z-index:1;
}
.cnst-ph::after{
  content:""; position:absolute; inset:14px;
  background-image:
    linear-gradient(rgba(212,175,55,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,.05) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none; opacity:.7; z-index:1;
}
.cnst{ position:relative; z-index:2; width:100%; height:100%; display:block; }
.cnst-stars circle{ filter:drop-shadow(0 0 4px rgba(231,205,126,.65)); }
.cnst-name{
  position:absolute; left:24px; bottom:18px; z-index:3;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-soft); opacity:.85;
}
.cnst-ph-wide{ min-height:300px; }
.fcard:hover .cnst-stars circle{ filter:drop-shadow(0 0 9px rgba(231,205,126,.95)); }
.fcard:hover .cnst-name{ opacity:1; color:var(--gold); }

/* ---- shared layout ---- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
section{ position:relative; }

.eyebrow{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--gold); opacity:.7;
}
.eyebrow.center::after{
  content:""; width:26px; height:1px; background:var(--gold); opacity:.7;
}
.eyebrow.center{ justify-content:center; }

h2.title{
  font-family:var(--serif-jp); font-weight:700;
  font-size:clamp(30px, 5.2vw, 56px); line-height:1.28; letter-spacing:.04em;
  margin:.5em 0 .2em;
}
h2.title .en{
  display:block; font-family:var(--serif-en); font-weight:600;
  font-size:clamp(13px,1.6vw,18px); letter-spacing:.32em; color:var(--gold-soft);
  margin-bottom:.9em; text-transform:uppercase;
}
.lede{ color:var(--muted); font-size:clamp(15px,1.5vw,18px); max-width:46ch; line-height:2; }

/* reveal */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.12s; }
[data-reveal][data-delay="2"]{ transition-delay:.24s; }
[data-reveal][data-delay="3"]{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================ NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,19,38,.72); backdrop-filter:blur(14px) saturate(140%);
  padding-block:13px; border-bottom:1px solid var(--hair);
}
.nav .brand{ display:flex; align-items:center; gap:11px; font-family:var(--serif-en); letter-spacing:.22em; font-size:15px; font-weight:600; }
.nav .brand .mark{ width:26px; height:26px; flex:0 0 auto; }
.nav .links{ display:flex; gap:30px; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.nav .links a{ color:var(--muted); position:relative; padding-bottom:3px; transition:color .3s; }
.nav .links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .35s ease; }
.nav .links a:hover{ color:var(--white); }
.nav .links a:hover::after{ width:100%; }
.nav .menu-btn{ display:none; }
@media (max-width:780px){
  .nav .links{ display:none; }
  .nav .menu-btn{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--gold); background:none; border:1px solid var(--hair-strong); padding:8px 14px; border-radius:2px; cursor:pointer; }
}

/* ============================================================ HERO */
.hero{ min-height:100svh; display:grid; place-items:center; padding:120px var(--pad) 90px; overflow:hidden; }
.hero-inner{ width:100%; max-width:1240px; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,4vw,70px); align-items:center; }
.hero-copy{ position:relative; }
.hero .kicker{ margin-bottom:26px; }
.hero h1{
  font-family:var(--serif-en); font-weight:700;
  font-size:clamp(52px, 9vw, 118px); line-height:.92; letter-spacing:.04em;
  margin:0; text-transform:uppercase;
}
.hero h1 .l1{ display:block; color:var(--white); }
.hero h1 .l2{ display:block; color:var(--gold);
  background:linear-gradient(180deg,var(--gold-soft),var(--gold) 60%,var(--gold-dim));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero .jp-sub{ font-family:var(--serif-jp); font-weight:500; font-size:clamp(17px,2.1vw,23px); letter-spacing:.12em; color:var(--white); margin-top:30px; line-height:1.9; }
.hero .jp-sub .accent{ color:var(--purple-soft); }
.hero .tagline{ font-family:var(--mono); font-size:12px; letter-spacing:.26em; color:var(--muted); text-transform:uppercase; margin-top:22px; }
.hero .cta-row{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; }

.btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  padding:15px 28px; border-radius:2px; cursor:pointer; border:1px solid transparent;
  transition:transform .3s, background .3s, color .3s, border-color .3s, box-shadow .3s;
  display:inline-flex; align-items:center; gap:.7em;
}
.btn-gold{ background:var(--gold); color:var(--navy-deep); font-weight:700; }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -16px rgba(212,175,55,.7); }
.btn-ghost{ border-color:var(--hair-strong); color:var(--white); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-soft); transform:translateY(-2px); }

/* hero figure */
.hero-figure{ position:relative; display:grid; place-items:center; }
.hero-figure .halo{
  position:absolute; width:96%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(155,114,207,.22) 0%, rgba(212,175,55,.07) 42%, transparent 64%);
  filter:blur(22px); z-index:0;
}
.hero-figure .ring{ position:absolute; border:1px solid var(--hair); border-radius:50%; z-index:0; opacity:.5; }
.hero-figure img.astro{ position:relative; z-index:2; width:100%; max-width:560px; filter:drop-shadow(0 40px 80px rgba(0,0,0,.55)); }
.hero-figure .orbit-dot{ position:absolute; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px 2px rgba(212,175,55,.7); z-index:3; }

/* ---- hero annotations ---- */
.annot{
  position:absolute; z-index:4; display:flex; flex-direction:column; align-items:flex-start;
  font-family:var(--mono); color:var(--gold-soft); letter-spacing:.18em; text-transform:uppercase;
  padding:8px 12px 9px;
  background:linear-gradient(180deg, rgba(8,19,38,.65), rgba(8,19,38,.35));
  border:1px solid rgba(212,175,55,.32); border-radius:2px;
  backdrop-filter:blur(3px);
  white-space:nowrap;
}
.annot::before{
  content:""; position:absolute; width:60px; height:1px; background:linear-gradient(90deg, var(--gold), transparent);
  top:50%;
}
.annot::after{
  content:""; position:absolute; width:6px; height:6px; border:1px solid var(--gold); border-radius:50%;
  top:50%; transform:translateY(-50%);
}
.annot .a-k{ font-size:9px; opacity:.7; color:var(--gold); }
.annot .a-v{ font-size:11px; font-weight:700; color:var(--gold-soft); margin-top:2px; }
.annot .a-sub{ font-family:var(--serif-jp); font-size:10px; letter-spacing:.14em; color:var(--purple-soft); margin-top:3px; }
.annot-1{ top:8%; left:-6%; }
.annot-1::before{ right:-66px; }
.annot-1::after{ right:-72px; }
.annot-2{ top:48%; right:-4%; }
.annot-2::before{ left:-66px; background:linear-gradient(-90deg, var(--gold), transparent); }
.annot-2::after{ left:-72px; }
.annot-3{ bottom:8%; left:-2%; }
.annot-3::before{ right:-66px; }
.annot-3::after{ right:-72px; }
@media (max-width:960px){ .annot{ display:none; } }

/* compass rose */
.compass{ position:absolute; bottom:-4%; right:-2%; width:clamp(60px,7vw,90px); z-index:4; opacity:.85; }
@media (max-width:760px){ .compass{ width:54px; bottom:-10px; right:6px; } }

.scroll-cue{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--muted-2); text-transform:uppercase; }
.scroll-cue .line{ width:1px; height:46px; background:linear-gradient(var(--gold),transparent); animation:cue 2.4s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); opacity:.4; transform-origin:top; } 50%{ transform:scaleY(1); opacity:1; transform-origin:top; } }

@media (max-width:860px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; gap:40px; }
  .hero .kicker, .hero .eyebrow{ justify-content:center; }
  .hero .cta-row{ justify-content:center; }
  .hero-figure{ order:-1; }
  .hero-figure img.astro{ max-width:380px; }
}

/* ============================================================ ABOUT / PURPOSE */
.purpose{ padding:clamp(90px,13vw,170px) 0 clamp(70px,9vw,120px); }
.purpose .big{
  font-family:var(--serif-jp); font-weight:600; line-height:1.7; letter-spacing:.04em;
  font-size:clamp(24px,3.7vw,44px); max-width:20ch; margin:.4em 0 0;
}
.purpose .big em{ font-style:normal; color:var(--gold); }
.purpose .big .pp{ color:var(--purple-soft); font-style:normal; }
.purpose .split{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(30px,6vw,90px); align-items:center; margin-top:18px; }
.purpose .desc p{ color:var(--muted); font-size:clamp(15px,1.5vw,17px); line-height:2.1; }
.purpose .desc p + p{ margin-top:1.3em; }

/* founder mascot in purpose section */
.founder-fig{ position:relative; display:grid; place-items:center; padding:10px 0; }
.founder-glow{ position:absolute; inset:8% 6%; border-radius:50%;
  background:radial-gradient(circle, rgba(155,114,207,.22), rgba(212,175,55,.06) 45%, transparent 70%);
  filter:blur(6px); }
.founder-fig img{ position:relative; z-index:2; width:100%; max-width:460px; filter:drop-shadow(0 28px 60px rgba(0,0,0,.55)); }
.founder-cap{ position:relative; z-index:2; margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-soft); display:inline-flex; align-items:center; gap:.7em; }
.founder-cap::before, .founder-cap::after{ content:""; width:18px; height:1px; background:var(--gold); opacity:.6; }
@media (max-width:760px){
  .founder-fig img{ max-width:320px; }
}

/* principles : Tune / Align / Optimize */
.principles{ padding:clamp(40px,6vw,70px) 0 clamp(80px,11vw,150px); }
.constellation-rule{ display:block; width:100%; height:auto; max-height:40px; margin:0 auto clamp(40px,5vw,68px); opacity:0; transform:translateY(20px); transition:opacity .9s ease, transform .9s ease; }
.constellation-rule.in, [data-reveal].in.constellation-rule{ opacity:1; transform:none; }
.principles .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:4px; overflow:hidden; }
.principle{ background:var(--navy); padding:clamp(28px,3.4vw,46px) clamp(22px,2.6vw,38px); position:relative; transition:background .5s; }
.principle:hover{ background:var(--navy-soft); }
.principle .idx{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--gold-dim); }
.principle .glyph{ width:46px; height:46px; margin:22px 0 24px; color:var(--gold); }
.principle h3{ font-family:var(--serif-en); font-weight:600; font-size:24px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); }
.principle h3 .jp{ display:block; font-family:var(--serif-jp); font-size:15px; letter-spacing:.14em; color:var(--white); margin-top:6px; }
.principle p{ color:var(--muted); font-size:14.5px; line-height:2; margin-top:16px; }
@media (max-width:760px){
  .purpose .split{ grid-template-columns:1fr; }
  .principles .grid{ grid-template-columns:1fr; }
}

/* ============================================================ PROCESS ORBIT */
.orbit-section{ padding:clamp(40px,7vw,90px) 0 clamp(60px,9vw,110px); position:relative; }
.orbit-stage{ position:relative; max-width:980px; margin:0 auto; padding:20px 0; }
.orbit-svg{ display:block; width:100%; height:auto; }
.planet{
  position:absolute; display:flex; flex-direction:column; align-items:center; gap:5px;
  transform:translate(-50%, -50%);
  font-family:var(--mono);
}
.planet .p-dot{ width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #E7CD7E, #D4AF37 55%, #7a6224); box-shadow:0 0 16px 2px rgba(212,175,55,.55); position:relative; }
.planet .p-dot::after{ content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid var(--hair-strong); }
.planet .p-dot-purple{ background:radial-gradient(circle at 30% 30%, #b89ade, #9B72CF 55%, #58407a); box-shadow:0 0 16px 2px rgba(155,114,207,.55); }
.planet .p-en{ font-size:12px; font-weight:700; letter-spacing:.22em; color:var(--gold-soft); margin-top:4px; }
.planet .p-jp{ font-family:var(--serif-jp); font-size:13px; letter-spacing:.16em; color:var(--white); }
.planet .p-coord{ font-size:9.5px; letter-spacing:.2em; color:var(--purple-soft); opacity:.75; }
.planet.p1{ top:18%; left:13%; }
.planet.p2{ top:78%; left:50%; }
.planet.p3{ top:18%; left:87%; }
.sun-label{ position:absolute; top:50%; left:50%; transform:translate(-50%, calc(-50% + 56px)); display:flex; flex-direction:column; align-items:center; font-family:var(--mono); }
.sun-label .s-k{ font-size:10px; letter-spacing:.26em; color:var(--gold); opacity:.7; }
.sun-label .s-v{ font-family:var(--serif-jp); font-size:14px; color:var(--white); letter-spacing:.12em; margin-top:3px; }
.orbit-caption{ text-align:center; margin-top:22px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--muted-2); text-transform:uppercase; }
@media (max-width:680px){
  .planet.p1{ top:16%; left:18%; }
  .planet.p3{ top:16%; left:82%; }
  .planet .p-coord{ display:none; }
  .planet .p-jp{ font-size:11px; }
  .sun-label{ transform:translate(-50%, calc(-50% + 42px)); }
  .sun-label .s-v{ font-size:12px; }
}

/* ============================================================ STORY */
.story{ padding:clamp(80px,11vw,150px) 0; }
.story-inner{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(30px,6vw,80px); align-items:center; }
.story-fig{ position:relative; display:grid; place-items:center; }
.story-fig .glow{ position:absolute; width:100%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(155,114,207,.22), transparent 62%); }
.story-fig img{ position:relative; z-index:2; width:100%; max-width:520px; filter:drop-shadow(0 30px 60px rgba(0,0,0,.5)); }

/* concept block — why "Astro" & "Notes" */
.concept{ margin-top:clamp(56px,8vw,104px); border-top:1px solid var(--hair); padding-top:clamp(40px,5vw,68px); }
.concept-head{ margin-bottom:clamp(28px,4vw,46px); }
.concept-title{ font-family:var(--serif-jp); font-weight:700; font-size:clamp(24px,3.2vw,40px); letter-spacing:.04em; margin-top:.5em; }
.concept-title .en{ display:block; font-family:var(--serif-en); font-size:clamp(12px,1.4vw,15px); letter-spacing:.28em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:.7em; }
.concept-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); }
.concept-card .cc-no{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--gold-dim); text-transform:uppercase; margin-bottom:18px; }
.concept-card p{ color:var(--muted); font-size:clamp(15px,1.4vw,16.5px); line-height:2.15; letter-spacing:.02em; }
.concept-card p + p{ margin-top:1.2em; }
.concept-card p em{ font-style:normal; color:var(--gold); }
@media (max-width:760px){ .concept-grid{ grid-template-columns:1fr; gap:34px; } }
.story-list{ list-style:none; }
.story-list li{ position:relative; padding:26px 0 26px 0; border-top:1px solid var(--hair); }
.story-list li:last-child{ border-bottom:1px solid var(--hair); }
.story-list .num{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--gold); }
.story-list h4{ font-family:var(--serif-jp); font-weight:600; font-size:clamp(19px,2.3vw,26px); letter-spacing:.05em; margin:8px 0 10px; }
.story-list h4 .dot{ color:var(--purple-soft); }
.story-list p{ color:var(--muted); font-size:15px; line-height:2; max-width:48ch; }
@media (max-width:820px){
  .story-inner{ grid-template-columns:1fr; }
  .story-fig{ max-width:420px; margin:0 auto; }
}

/* ============================================================ SERVICES */
.oblog{ padding:clamp(40px,6vw,80px) 0 clamp(20px,3vw,40px); }
.oblog-card{
  position:relative; border:1px solid var(--hair-strong); border-radius:8px;
  background:linear-gradient(160deg, rgba(21,41,74,.55), rgba(8,19,38,.5));
  padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,42px) clamp(20px,2.4vw,30px);
  overflow:hidden;
}
.oblog-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--gold), var(--purple)); }
.oblog-head{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px dashed var(--hair); }
.oblog-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.28em; color:var(--gold); text-transform:uppercase; }
.oblog-meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--purple-soft); text-transform:uppercase; opacity:.8; }
.oblog-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,40px); padding:30px 0 20px; }
.oblog-cell{ display:flex; flex-direction:column; gap:6px; position:relative; padding-left:14px; }
.oblog-cell::before{ content:""; position:absolute; left:0; top:6px; width:5px; height:5px; background:var(--gold); border-radius:50%; box-shadow:0 0 8px rgba(212,175,55,.7); }
.oblog-cell .n{ font-family:var(--serif-en); font-weight:700; font-size:clamp(38px,5vw,62px); line-height:1; color:var(--gold-soft);
  background:linear-gradient(180deg, var(--gold-soft), var(--gold) 60%, var(--gold-dim));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.oblog-cell .plus{ font-size:.5em; color:var(--purple-soft); -webkit-text-fill-color:var(--purple-soft); margin-left:2px; }
.oblog-cell .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; color:var(--gold); text-transform:uppercase; margin-top:8px; }
.oblog-cell .jp{ font-family:var(--serif-jp); font-size:12.5px; letter-spacing:.06em; color:var(--muted); }
.oblog-foot{ display:flex; align-items:center; gap:14px; padding-top:14px; border-top:1px dashed var(--hair); }
.ob-bar{ flex:1; height:2px; background:repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px); opacity:.45; }
.ob-coord{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--muted-2); text-transform:uppercase; white-space:nowrap; }
@media (max-width:760px){
  .oblog-grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .ob-coord{ font-size:8.5px; letter-spacing:.14em; white-space:normal; }
}

.services{ padding:clamp(80px,11vw,150px) 0; }
.services .wrap{ position:relative; }
.svc-accent{
  position:absolute; right:-10px; top:-86px; width:clamp(110px,13vw,178px);
  z-index:3; pointer-events:none;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.5));
  animation:catfloat 6s ease-in-out infinite;
}
@keyframes catfloat{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-14px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce){ .svc-accent{ animation:none; } }
@media (max-width:760px){ .svc-accent{ width:96px; top:-58px; right:-4px; } }
.services .head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:54px; }
.services .head.head-with-fig{ display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:clamp(30px,5vw,70px); }
.head-with-fig .head-text .lede{ margin-top:26px; }
.head-fig{ position:relative; }
.head-fig img{ width:100%; display:block; }
@media (max-width:820px){
  .services .head.head-with-fig{ grid-template-columns:1fr; }
  .head-fig{ max-width:420px; }
}
.svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); }
.svc{
  position:relative; border:1px solid var(--hair); border-radius:6px; overflow:hidden;
  padding:clamp(30px,3.6vw,52px); background:linear-gradient(160deg, rgba(21,41,74,.55), rgba(8,19,38,.4));
  transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .5s, box-shadow .5s;
}
.svc:hover{ transform:translateY(-6px); border-color:var(--hair-strong); box-shadow:0 30px 70px -34px rgba(0,0,0,.8); }
.svc .svc-no{ font-family:var(--mono); font-size:12px; letter-spacing:.24em; color:var(--gold-dim); }
.svc .svc-icon{ width:54px; height:54px; color:var(--gold); margin:26px 0 28px; }
.svc h3{ font-family:var(--serif-en); font-size:clamp(22px,2.5vw,30px); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); }
.svc h3 .jp{ display:block; font-family:var(--serif-jp); font-size:16px; letter-spacing:.1em; color:var(--white); margin-top:8px; }
.svc > p{ color:var(--muted); font-size:15px; line-height:2; margin-top:18px; max-width:42ch; }
.svc ul{ list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:11px; }
.svc ul li{ display:flex; align-items:flex-start; gap:11px; font-size:14px; color:var(--white); letter-spacing:.03em; }
.svc ul li::before{ content:"✦"; color:var(--purple-soft); font-size:11px; margin-top:5px; flex:0 0 auto; }
.svc .corner{ position:absolute; top:0; right:0; width:90px; height:90px; pointer-events:none; opacity:.5; }
/* wide merged card */
.svc-wide{ grid-column: span 2; }
.svc-wide-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); align-items:center; margin-top:18px; }
.svc-wide-copy ul{ margin-top:20px; }
.svc-wide-img{ border-radius:8px; overflow:hidden; }
.svc-wide-img img{ display:block; width:100%; height:auto; }
@media (max-width:760px){
  .svc-wide{ grid-column:span 1; }
  .svc-wide-inner{ grid-template-columns:1fr; }
}
.svc-card-img{ margin-top:26px; border-radius:5px; overflow:hidden; border:1px solid var(--hair-strong); }
.svc-card-img img{ display:block; width:100%; height:auto; opacity:.88; transition:opacity .4s; }
.svc:hover .svc-card-img img{ opacity:1; }
.svc-illust{ margin-top:22px; height:clamp(220px,24vw,300px); }
.svc-illust img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
@media (max-width:760px){ .svc-grid{ grid-template-columns:1fr; } }

/* tech stack constellation */
.tech-stack{ margin-top:clamp(40px,6vw,80px); border:1px solid var(--hair); border-radius:6px; background:linear-gradient(160deg, rgba(21,41,74,.4), rgba(8,19,38,.4)); padding:clamp(22px,3vw,40px) clamp(22px,3vw,40px) clamp(28px,3.4vw,46px); position:relative; overflow:hidden; }
.tech-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px dashed var(--hair); }
.tech-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.28em; color:var(--gold); text-transform:uppercase; }
.tech-sub{ font-family:var(--serif-en); font-size:12px; letter-spacing:.22em; color:var(--purple-soft); text-transform:uppercase; opacity:.8; }
.tech-stage{ position:relative; padding:8px 0; }
.tech-svg{ display:block; width:100%; height:auto; max-height:200px; opacity:.85; }
.tech-list{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:6px; list-style:none; }
.tech-list li{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; position:relative; }
.tech-list .tnum{ font-family:var(--serif-en); font-size:14px; color:var(--purple-soft); letter-spacing:.1em; }
.tech-list .tname{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--gold-soft); text-transform:uppercase; }
.tech-list .trole{ font-family:var(--serif-jp); font-size:11px; letter-spacing:.1em; color:var(--muted); }
@media (max-width:760px){
  .tech-list{ grid-template-columns:repeat(3,1fr); gap:18px 8px; }
  .tech-svg{ display:none; }
}

/* ============================================================ PORTFOLIO */
.folio{ padding:clamp(80px,11vw,150px) 0; }
.folio .head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:50px; }
.folio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.folio-grid .wide{ grid-column:span 2; }
.fcard{ position:relative; border:1px solid var(--hair); border-radius:6px; overflow:hidden; background:var(--navy-deep); transition:transform .5s, border-color .5s; }
.fcard:hover{ transform:translateY(-5px); border-color:var(--hair-strong); }
.fcard .ph{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center;
  background:
    repeating-linear-gradient(135deg, rgba(212,175,55,.06) 0 2px, transparent 2px 11px),
    linear-gradient(150deg, var(--navy-soft), var(--navy-deep));
}
.fcard.wide .ph{ aspect-ratio:auto; height:100%; min-height:240px; }
.fcard.has-img .ph{ padding:0; background:var(--navy-deep); }
.fcard.has-img .ph img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.fcard.has-img:hover .ph img{ transform:scale(1.04); }
.fcard .ph .label{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; text-align:center; padding:0 20px; }
.fcard .meta{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-top:1px solid var(--hair); }
.fcard .meta .t{ font-family:var(--serif-jp); font-size:15px; letter-spacing:.05em; }
.fcard .meta .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--gold); text-transform:uppercase; border:1px solid var(--hair-strong); padding:4px 9px; border-radius:2px; }
.folio .note{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--muted-2); margin-top:30px; text-align:center; }
@media (max-width:820px){
  .folio-grid{ grid-template-columns:1fr 1fr; }
  .folio-grid .wide{ grid-column:span 2; }
}
@media (max-width:520px){
  .folio-grid{ grid-template-columns:1fr; }
  .folio-grid .wide{ grid-column:span 1; }
}

/* ============================================================ CONTACT */
.contact{ padding:clamp(90px,13vw,170px) 0 0; }
.contact-card{
  position:relative; border:1px solid var(--hair-strong); border-radius:10px; overflow:hidden;
  background:linear-gradient(160deg, rgba(21,41,74,.7), rgba(8,19,38,.6));
  padding:clamp(40px,6vw,80px); text-align:center;
}
.contact-cat{
  position:absolute; top:-44px; right:-30px; width:clamp(150px,18vw,230px); pointer-events:none; z-index:1;
  transform:rotate(8deg); filter:drop-shadow(0 12px 24px rgba(0,0,0,.45));
  animation:catfloat-c 7s ease-in-out infinite;
}
@keyframes catfloat-c{ 0%,100%{ transform:translateY(0) rotate(8deg);} 50%{ transform:translateY(-10px) rotate(5deg);} }
@media (prefers-reduced-motion: reduce){ .contact-cat{ animation:none; } }
@media (max-width:680px){ .contact-cat{ width:120px; top:-30px; right:-18px; } }
.contact-card > *:not(.contact-cat){ position:relative; z-index:2; }
.contact-card .eyebrow{ justify-content:center; }
.contact-card h2{ font-family:var(--serif-jp); font-weight:700; font-size:clamp(28px,4.6vw,52px); letter-spacing:.04em; margin:.4em 0 .3em; }
.contact-card h2 .en{ display:block; font-family:var(--serif-en); font-size:clamp(13px,1.6vw,17px); letter-spacing:.3em; color:var(--gold-soft); margin-bottom:.7em; text-transform:uppercase; }
.contact-card .lede{ margin:0 auto 40px; text-align:center; }
.contact-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.contact-info{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border-top:1px solid var(--hair); margin-top:56px; }
.cinfo{ background:var(--navy); padding:26px 22px; }
.cinfo .k{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--gold); text-transform:uppercase; }
.cinfo .v{ font-size:14px; margin-top:8px; word-break:break-word; }
@media (max-width:760px){ .contact-info{ grid-template-columns:1fr 1fr; } }

/* ============================================================ FOOTER */
.foot{ padding:64px var(--pad) 50px; text-align:center; position:relative; z-index:2; }
.foot-cat{ position:absolute; left:8%; bottom:18px; width:clamp(72px,8vw,110px); opacity:.55; transform:rotate(-10deg); pointer-events:none; filter:saturate(.85); }
@media (max-width:680px){ .foot-cat{ display:none; } }
.foot .mark{ width:40px; height:40px; margin:0 auto 18px; }
.foot .wm{ font-family:var(--serif-en); letter-spacing:.3em; font-size:16px; color:var(--gold-soft); }
.foot .sub{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--muted-2); text-transform:uppercase; margin-top:14px; }
.foot .copy{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--muted-2); margin-top:30px; }

/* wide AI illustrations — feather edges so they blend into the page, no floating rectangle */
.hero-figure img.astro,
.head-fig img,
.story-fig img,
.svc-illust img,
.svc-wide-img img{
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-composite: intersect;
  border-radius:0 !important;
  filter:none !important;
}
.hero-figure img.astro{ width:100%; max-width:600px; }

/* contact visual */
.contact-visual{ text-align:center; margin-bottom:36px; }
.contact-visual img{ width:100%; max-width:420px; border-radius:8px; filter:drop-shadow(0 20px 50px rgba(0,0,0,.5)); }
.founder-letter{
  margin-top:2rem;
  display:flex; flex-direction:column; gap:1.3rem;
}
.founder-letter p{
  font-family:var(--serif-jp);
  font-size:clamp(.95rem,1.1vw,1.08rem);
  line-height:2.15;
  color:var(--muted);
  font-weight:400;
}
.founder-letter em{
  color:var(--gold-soft);
  font-style:normal;
  font-weight:600;
}
.letter-sig{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--hair-strong);
  display:flex; flex-direction:column; gap:.45rem;
}
.sig-name{
  font-family:var(--serif-en);
  font-size:1.05rem;
  letter-spacing:.08em;
  color:var(--gold);
}
.sig-role{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.22em;
  color:var(--purple-soft);
  text-transform:uppercase;
}