/* =========================================================
   SKY ライフ — BLUEPRINT IN MOTION
   Design system + layout
   ========================================================= */

:root{
  /* color */
  --ink:        #100E0B;   /* warm near-black base       */
  --ink-2:      #16130D;   /* raised dark surface        */
  --ink-3:      #1E1A12;   /* card on dark               */
  --paper:      #EFEAE0;   /* drafting paper             */
  --paper-2:    #E3DBCC;   /* paper card / line          */
  --orange:     #FF5A1F;   /* SKY signature accent       */
  --orange-2:   #FF7A45;
  --bone:       #EDE7DB;   /* text on dark               */
  --dim:        #8C857626; /* (unused placeholder)       */
  --bone-dim:   #8E8779;   /* secondary text on dark     */
  --ink-dim:    #6B6456;   /* secondary text on paper    */

  --line:        rgba(237,231,219,0.13);
  --line-strong: rgba(237,231,219,0.30);
  --line-ink:    rgba(16,14,11,0.16);
  --line-ink-s:  rgba(16,14,11,0.34);

  /* type */
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --jp:   "Zen Kaku Gothic New", var(--sans);

  /* metrics */
  --gut: clamp(20px, 4.5vw, 64px);   /* page side gutter */
  --maxw: 1680px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--bone);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--orange); color:#0d0c0a; }

/* custom cursor disabled — native cursor restored (mouse-triggered
   animations like magnetic / parallax / hover fills are kept) */

/* ---------- smooth scroll wrappers ---------- */
#smooth-wrapper{ overflow:hidden; }
#smooth-content{ will-change:transform; }

/* =========================================================
   typographic helpers
   ========================================================= */
.mono{
  font-family:var(--mono);
  font-weight:400;
  font-size:clamp(.66rem,.86vw,.8rem);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.jp{ font-family:var(--jp); font-weight:500; }
.accent{ color:var(--orange); }

/* ===== language emphasis toggle =====
   the site is bilingual; the EN/日本語 control shifts emphasis between
   the two languages rather than hiding either (translations are uneven). */
.jp, .en-copy{ transition:opacity .5s var(--ease), color .5s var(--ease); }
body[data-lang="en"] .jp{ opacity:.46; }
body[data-lang="jp"] .jp{ opacity:1; }
body[data-lang="en"] .en-copy{ opacity:1; }
body[data-lang="jp"] .en-copy{ opacity:.4; }
/* keep the wordmark legible in either language */
.brand .jp{ opacity:1 !important; }

/* true language swap — used on big titles & nav (full translation, not dim) */
body[data-lang="en"] .lang-jp{ display:none; }
body[data-lang="jp"] .lang-en{ display:none; }
.lang-jp{ font-family:var(--jp); opacity:1 !important; }
.nav .lang-jp{ font-weight:600; }

.idx{                       /* —01 section index */
  font-family:var(--mono);
  font-size:clamp(.7rem,.9vw,.85rem);
  letter-spacing:.2em;
  color:var(--orange);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.idx::before{
  content:"";
  width:clamp(28px,3vw,48px);
  height:1px;
  background:var(--orange);
  display:inline-block;
}

/* =========================================================
   layout shells
   ========================================================= */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ position:relative; }
.theme-dark{ background:var(--ink); color:var(--bone); }
.theme-paper{ background:var(--paper); color:var(--ink); }

/* a faint engineering grid overlay used on several sections */
.grid-bg{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: clamp(64px,9vw,140px) clamp(64px,9vw,140px);
  -webkit-mask-image:radial-gradient(120% 120% at 50% 0%, #000 40%, transparent 100%);
          mask-image:radial-gradient(120% 120% at 50% 0%, #000 40%, transparent 100%);
}
.theme-paper .grid-bg{
  background-image:
    linear-gradient(to right, var(--line-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-ink) 1px, transparent 1px);
}

/* =========================================================
   custom cursor
   ========================================================= */
.cursor{ display:none !important; }
.cursor-legacy{ position:fixed; left:0; top:0; z-index:9000; pointer-events:none;
  mix-blend-mode:difference; will-change:transform; }
.cursor__dot{
  position:absolute; left:0; top:0; width:7px; height:7px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute; left:0; top:0; width:42px; height:42px; border-radius:50%;
  border:1px solid #fff; transform:translate(-50%,-50%) scale(1);
}
.cursor__label{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:#fff; opacity:0; white-space:nowrap;
}
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* =========================================================
   page transition overlay
   ========================================================= */
.pt{
  position:fixed; inset:0; z-index:9500; pointer-events:none;
  overflow:hidden;
}
.pt__panel{
  position:absolute; inset:0; background:var(--orange);
  transform:translateY(101%); will-change:transform;
}
.pt__mark{
  position:fixed; inset:0; z-index:9600; pointer-events:none;
  display:grid; place-items:center; opacity:0;
  font-family:var(--sans); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(3rem,10vw,9rem); color:var(--ink);
}

/* =========================================================
   header
   ========================================================= */
.head{
  position:fixed; top:0; left:0; width:100%; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px,2vw,22px) var(--gut);
  color:var(--bone);
  background:rgba(13,11,9,.82);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.brand{ display:flex; align-items:center; gap:.5ch; line-height:1; }
.brand__logo{ height:clamp(15px,1.4vw,19px); width:auto; display:block; }

.nav{ display:flex; align-items:center; gap:clamp(14px,1.8vw,30px); }
.nav a{ position:relative; font-size:clamp(.8rem,1vw,.92rem); font-weight:500; }
.nav a .u{ position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left; }
.lang{ display:flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.1em; }
.lang button{ opacity:.45; transition:opacity .3s; }
.lang button.on{ opacity:1; color:var(--orange); }
.nav-min{ display:none; }
@media (max-width:880px){
  .nav .nav-link{ display:none; }
  .nav-min{ display:inline-flex; font-family:var(--mono); font-size:.74rem; letter-spacing:.15em; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(28px,5vh,64px); }
.hero__blue{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__blue svg{ position:absolute; width:min(70vw,1000px); right:-3vw; top:50%;
  transform:translateY(-46%); overflow:visible; }
.hero__blue .bp{ fill:none; stroke:var(--orange); stroke-width:1.1;
  vector-effect:non-scaling-stroke; }
.hero__blue .bp.dim{ stroke:var(--line-strong); }
.hero__blue .anno{ font-family:var(--mono); fill:var(--bone-dim); font-size:11px; letter-spacing:.04em; }
.hero__blue .anno.hl{ fill:var(--orange); }

.hero__inner{ position:relative; z-index:2; }
.hero__kbar{ display:flex; align-items:center; gap:18px; margin-bottom:clamp(18px,3vh,34px); }
.hero__kbar .ln{ flex:1; height:1px; background:var(--line-strong); }
.hero h1{
  font-weight:800; line-height:.92; letter-spacing:-.035em;
  font-size:clamp(3.1rem,11.5vw,12rem);
  text-transform:uppercase;
}
.hero h1 .ln1 .accent{ color:var(--orange); }
.hero h1 .row{ display:block; overflow:hidden; }
.hero__sub{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-top:clamp(20px,3.5vh,40px); }
.hero__sub .lead{ max-width:46ch; font-size:clamp(1.05rem,1.5vw,1.45rem); color:var(--bone); }
.hero__sub .lead .jp{ display:block; color:var(--bone-dim); font-size:.86em; margin-top:.5em; }
.hero__scroll{ display:flex; align-items:center; gap:10px; color:var(--bone-dim);
  white-space:nowrap; }
.hero__scroll .dotline{ width:54px; height:1px; background:var(--bone-dim); position:relative; overflow:hidden; }
.hero__scroll .dotline::after{ content:""; position:absolute; inset:0; width:18px; background:var(--orange);
  animation:scrollrun 1.8s var(--ease) infinite; }
@keyframes scrollrun{ 0%{ transform:translateX(-20px);} 100%{ transform:translateX(60px);} }

.hero__readout{ position:absolute; top:clamp(96px,15vh,180px); left:var(--gut); z-index:2;
  font-family:var(--mono); color:var(--bone-dim); font-size:.74rem; letter-spacing:.12em; line-height:1.9; }
.hero__readout b{ color:var(--orange); font-weight:400; }
@media (max-width:760px){ .hero__readout{ display:none; } .hero__blue svg{ width:120vw; right:-30vw; opacity:.5; } }

/* =========================================================
   marquee strip (between hero & philosophy)
   ========================================================= */
.strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:clamp(14px,1.6vw,22px) 0; background:var(--ink-2); }
.strip__track{ display:flex; gap:3.2rem; white-space:nowrap; will-change:transform; }
.strip__track span{ font-weight:800; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(1.3rem,3vw,2.6rem); display:inline-flex; align-items:center; gap:3.2rem; }
.strip__track span::after{ content:"✶"; color:var(--orange); font-size:.7em; }

/* =========================================================
   01 · PHILOSOPHY (paper)
   ========================================================= */
.philo{ padding:clamp(80px,13vh,180px) 0; }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding-bottom:clamp(36px,6vh,72px); flex-wrap:wrap; }
.sec-head h2{ font-weight:800; letter-spacing:-.02em; line-height:1;
  font-size:clamp(1.4rem,3vw,2.4rem); text-transform:uppercase; }
.sec-head .jp{ color:inherit; opacity:.55; font-weight:500; }
.philo__body{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,60px); }
.philo__lead{ font-weight:600; letter-spacing:-.02em; line-height:1.12;
  font-size:clamp(1.8rem,4.6vw,4.1rem); max-width:18ch; }
.philo__lead .accent{ color:var(--orange); }
.philo__cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,4vw,72px);
  margin-top:clamp(20px,3vh,40px); }
.philo__cols p{ font-size:clamp(1rem,1.25vw,1.22rem); color:var(--ink-dim); max-width:52ch; }
.philo__cols .jp{ color:var(--ink-dim); }
@media (max-width:760px){ .philo__cols{ grid-template-columns:1fr; } }

/* =========================================================
   02 · PRODUCTS — pinned horizontal
   ========================================================= */
.work{ background:var(--ink); }
.work__head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:clamp(70px,11vh,140px) var(--gut) clamp(30px,5vh,54px); flex-wrap:wrap; }
.work__head h2{ font-weight:800; letter-spacing:-.025em; line-height:.98; text-transform:uppercase;
  font-size:clamp(2rem,5.5vw,5rem); }
.work__head .meta{ font-family:var(--mono); color:var(--bone-dim); font-size:.78rem; letter-spacing:.12em; }
.pin{ height:100svh; overflow:hidden; }
@media (min-width:761px){
  /* work section height = card height + header + nav (auto, not full-screen) */
  .work{ height:auto; display:block; overflow:hidden; }
  .work__head{ padding-top:clamp(78px,9vh,108px); padding-bottom:clamp(16px,2.4vh,28px); }
  /* pin height = card size so track fills exactly one square card tall */
  .pin{ height:clamp(260px,32vw,440px); overflow:hidden; }
}
.track{ display:flex; height:100%; align-items:stretch; will-change:transform; }
.card{ position:relative; flex:0 0 clamp(260px,32vw,440px); height:100%;
  border-left:1px solid var(--line); padding:clamp(20px,2.4vw,36px);
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.card:last-child{ border-right:1px solid var(--line); }
.card__no{ font-family:var(--mono); color:var(--orange); font-size:.82rem; letter-spacing:.2em; }
.card__svg{ flex:1; display:grid; place-items:center; padding:clamp(14px,2vw,30px) 0; }
.card__svg svg{ width:min(78%,360px); height:auto; overflow:visible; }
.card__svg .cl{ fill:none; stroke:var(--bone); stroke-width:1.25; vector-effect:non-scaling-stroke;
  transition:stroke .4s var(--ease); }
.card:hover .card__svg .cl{ stroke:var(--orange); }
.card__ft h3{ font-weight:800; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(1.5rem,2.4vw,2.4rem); text-transform:lowercase; }
.card__ft h3 .jp{ display:block; font-size:.5em; color:var(--bone-dim); margin-top:.4em; text-transform:none; }
.card__ft p{ color:var(--bone-dim); font-size:clamp(.92rem,1.05vw,1.05rem); margin-top:.9em; max-width:34ch; }
.card__hovertag{ position:absolute; right:clamp(18px,2vw,40px); top:clamp(22px,3vw,52px);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.15em; color:var(--orange);
  opacity:0; transform:translateY(-6px); transition:.4s var(--ease); }
.card:hover .card__hovertag{ opacity:1; transform:none; }
.card::after{ /* sweep fill on hover */
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.card:hover::after{ transform:scaleX(1); }
.work__nav{ position:relative; z-index:6; margin:0 auto clamp(16px,2.4vh,30px);
  display:flex; align-items:center; gap:clamp(12px,1.4vw,20px); width:min(640px,82vw);
  padding:10px 14px; background:rgba(16,14,11,.62); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:999px; }
.work__btn{ width:46px; height:46px; flex:none; border:1px solid var(--line-strong); border-radius:50%;
  display:grid; place-items:center; font-size:1.15rem; line-height:1; color:var(--bone);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s; }
.work__btn:hover{ background:var(--orange); color:var(--ink); border-color:var(--orange); }
.work__btn:disabled{ opacity:.28; }
.work__scrub{ position:relative; flex:1; height:46px; display:flex; align-items:center;
  cursor:grab; touch-action:none; }
.work__scrub.dragging{ cursor:grabbing; }
.work__track-line{ position:absolute; left:0; right:0; height:2px; background:var(--line-strong); }
.work__scrub-fill{ position:absolute; left:0; height:2px; width:0; background:var(--orange); }
.work__scrub-knob{ position:absolute; top:50%; left:0; width:14px; height:14px; border-radius:50%;
  background:var(--orange); transform:translate(-50%,-50%); box-shadow:0 0 0 4px rgba(255,90,31,.18);
  transition:transform .2s var(--ease); }
.work__scrub:hover .work__scrub-knob, .work__scrub.dragging .work__scrub-knob{ transform:translate(-50%,-50%) scale(1.25); }
.track{ cursor:grab; }
.track.grabbing{ cursor:grabbing; }
@media (max-width:760px){ .work__nav{ display:none; } .track{ cursor:auto; } }
@media (max-width:760px){
  .pin{ height:auto; overflow:hidden; }
  /* native horizontal snap scroll on mobile */
  .track{
    flex-direction:row;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:0 var(--gut);
    gap:0;
  }
  .track::-webkit-scrollbar{ display:none; }
  .card{
    flex:0 0 72vw;
    height:72vw;
    min-height:0;
    scroll-snap-align:start;
    border-left:1px solid var(--line);
    border-top:none;
    padding:clamp(16px,5vw,22px);
  }
  .card:first-child{ margin-left:0; }
  .card:last-child{ margin-right:0; }
  .card__ft h3{ font-size:clamp(1rem,5vw,1.3rem); }
  .card__ft p{ font-size:.8rem; margin-top:.5em; }
  .card__svg{ padding:clamp(8px,3vw,14px) 0; }
  .card__svg svg{ width:min(55%,100px); }
}

/* =========================================================
   03 · JOURNAL list
   ========================================================= */
.journal{ padding:clamp(80px,13vh,170px) 0; background:var(--ink); }
.jlist{ border-top:1px solid var(--line); }
.jrow{ position:relative; display:grid; align-items:center;
  grid-template-columns:64px 130px 1fr auto 46px; gap:clamp(14px,2vw,34px);
  padding:clamp(20px,2.6vw,38px) clamp(6px,1vw,16px);
  border-bottom:1px solid var(--line); overflow:hidden; }
.jrow .fill{ position:absolute; inset:0; background:var(--orange); transform:translateY(101%); z-index:0; }
.jrow > *{ position:relative; z-index:1; transition:color .45s var(--ease); }
.jrow .no{ font-family:var(--mono); color:var(--bone-dim); font-size:.8rem; letter-spacing:.1em; }
.jrow .date{ font-family:var(--mono); color:var(--bone-dim); font-size:.8rem; letter-spacing:.08em; }
.jrow .ttl{ font-weight:600; letter-spacing:-.015em; font-size:clamp(1.05rem,1.9vw,1.7rem); }
.jrow .ttl .jp{ display:block; font-size:.62em; color:var(--bone-dim); font-weight:500; margin-top:.3em; }
.jrow .tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; color:var(--orange);
  border:1px solid var(--line-strong); padding:.45em .9em; border-radius:999px; white-space:nowrap; }
.jrow .arr{ justify-self:end; font-size:1.4rem; line-height:1; }
.jrow:hover .fill{ transform:translateY(0); transition:transform .55s var(--ease); }
.jrow:hover .no,.jrow:hover .date,.jrow:hover .ttl,.jrow:hover .ttl .jp,.jrow:hover .arr{ color:var(--ink); }
.jrow:hover .tag{ color:var(--ink); border-color:var(--ink); }
@media (max-width:880px){
  .jrow{ grid-template-columns:44px 1fr 40px; row-gap:6px; }
  .jrow .date{ grid-column:2; font-size:.7rem; }
  .jrow .ttl{ grid-column:2; }
  .jrow .tag{ display:none; }
}

/* =========================================================
   04 · STUDIO (paper)
   ========================================================= */
.studio{ padding:clamp(80px,13vh,170px) 0; }
.studio__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,90px); align-items:end; }
.studio__big{ font-weight:800; letter-spacing:-.03em; line-height:.94; text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,7.5rem); }
.studio__meta{ font-size:clamp(1rem,1.2vw,1.18rem); line-height:2; }
.studio__meta .k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); display:block; margin-top:1.2em; }
.studio__meta a.mail{ color:var(--orange); font-weight:600; }
@media (max-width:760px){ .studio__grid{ grid-template-columns:1fr; align-items:start; } }

/* =========================================================
   05 · FOOTER
   ========================================================= */
.foot{ background:var(--ink); color:var(--bone); padding:clamp(56px,9vh,110px) 0 0; }
.foot__cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(28px,4vw,64px);
  padding-bottom:clamp(48px,8vh,96px); }
.foot__cta{ }
.foot__cta .lab{ color:var(--bone-dim); }
.foot__cta a{ display:inline-block; font-weight:800; letter-spacing:-.02em; line-height:1;
  font-size:clamp(1.8rem,3.4vw,3rem); margin-top:.4em; }
.foot__cta a .accent{ color:var(--orange); }
.fcol h4{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim); margin-bottom:1.4em; font-weight:400; }
.fcol ul{ list-style:none; display:flex; flex-direction:column; gap:.7em; }
.fcol ul a{ position:relative; display:inline-block; }
.fcol ul a .u{ position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:var(--orange);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.fcol ul a:hover .u{ transform:scaleX(1); }
.foot__word{ overflow:hidden; border-top:1px solid var(--line); }
.foot__word svg{ width:100%; height:auto; display:block; }
.foot__word text{ font-family:var(--sans); font-weight:800; fill:var(--ink-3); letter-spacing:-.02em; }
.foot__base{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:clamp(20px,3vh,30px) 0 clamp(28px,4vh,40px); color:var(--bone-dim); font-family:var(--mono);
  font-size:.72rem; letter-spacing:.1em; }
@media (max-width:880px){ .foot__cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot__cols{ grid-template-columns:1fr; } }

/* =========================================================
   reveal defaults (JS adds the animation)
   ========================================================= */
[data-reveal]{ }
.split-line{ overflow:hidden; }
.no-js [data-reveal]{ opacity:1 !important; transform:none !important; }

/* =========================================================
   loader
   ========================================================= */
.loader{ position:fixed; inset:0; z-index:9999; background:var(--ink); color:var(--bone);
  display:grid; place-items:center; }
.loader__in{ width:min(80vw,560px); }
.loader__row{ display:flex; align-items:baseline; justify-content:space-between;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; color:var(--bone-dim); }
.loader__bar{ height:2px; background:var(--line); margin-top:14px; overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0%; background:var(--orange); }
.loader__count{ font-weight:800; font-size:clamp(3rem,9vw,7rem); letter-spacing:-.03em; margin-top:.1em; }
.loader__count .accent{ color:var(--orange); }

/* journal (inner page) extras */
.page-pad{ padding-top:clamp(120px,18vh,200px); }
.art{ border-top:1px solid var(--line); padding:clamp(28px,4vw,56px) 0; display:grid;
  grid-template-columns:120px 1fr 46px; gap:clamp(16px,3vw,44px); align-items:start; }
.art .meta{ font-family:var(--mono); color:var(--bone-dim); font-size:.74rem; letter-spacing:.1em; line-height:1.9; }
.art h3{ font-weight:700; letter-spacing:-.02em; line-height:1.08; font-size:clamp(1.4rem,2.8vw,2.6rem); }
.art h3 .jp{ display:block; color:var(--bone-dim); font-size:.62em; font-weight:500; margin-top:.45em; line-height:1.4; }
.art .arr{ justify-self:end; font-size:1.5rem; color:var(--orange); }
@media (max-width:760px){ .art{ grid-template-columns:1fr 40px; } .art .meta{ grid-column:1/-1; } }

/* =========================================================
   CONTACT page
   ========================================================= */
.contact{ padding-top:clamp(120px,18vh,200px); }
.contact__head{ padding-bottom:clamp(40px,7vh,90px); }
.contact h1{ font-weight:800; letter-spacing:-.04em; line-height:.88; text-transform:uppercase;
  font-size:clamp(3rem,12vw,11rem); }
.contact h1 .jp{ display:block; font-size:.32em; font-weight:700; color:var(--bone-dim); }
.contact__intro{ max-width:50ch; margin-top:clamp(18px,3vh,30px); font-size:clamp(1.05rem,1.5vw,1.4rem); }
.contact__intro .jp{ display:block; color:var(--bone-dim); font-size:.85em; margin-top:.5em; }

.cgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,100px); align-items:start; }
@media (max-width:880px){ .cgrid{ grid-template-columns:1fr; } }

.cblock__head{ display:flex; align-items:baseline; gap:14px; padding-bottom:clamp(22px,3vh,36px);
  border-bottom:1px solid var(--line); margin-bottom:clamp(26px,3.5vh,40px); }
.cblock__head .n{ font-family:var(--mono); color:var(--orange); font-size:.8rem; letter-spacing:.2em; }
.cblock__head h2{ font-weight:800; letter-spacing:-.02em; text-transform:lowercase;
  font-size:clamp(1.5rem,2.6vw,2.4rem); }
.cblock__head h2 .jp{ font-size:.55em; color:var(--bone-dim); margin-left:.5em; font-weight:500; }
.cblock__sub{ color:var(--bone-dim); margin:-12px 0 26px; font-size:.95rem; }

.field{ margin-bottom:clamp(20px,2.6vh,30px); position:relative; }
.field label{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim); margin-bottom:10px; }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-strong);
  color:var(--bone); font-family:var(--sans); font-size:clamp(1rem,1.2vw,1.15rem); padding:10px 2px;
  transition:border-color .35s var(--ease); resize:vertical;
}
.field textarea{ min-height:120px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--bone-dim); opacity:.5; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--orange); }
.field .bar{ position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--orange);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.field input:focus ~ .bar, .field textarea:focus ~ .bar{ transform:scaleX(1); }
.counter{ text-align:right; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  color:var(--bone-dim); margin-top:8px; }
.counter.over{ color:var(--orange); }

.btn{ display:inline-flex; align-items:center; gap:12px; margin-top:6px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  padding:1.1em 1.8em; border:1px solid var(--bone); color:var(--bone); background:transparent;
  position:relative; overflow:hidden; border-radius:999px; }
.btn span{ position:relative; z-index:1; transition:color .4s var(--ease); }
.btn::before{ content:""; position:absolute; inset:0; background:var(--orange); transform:translateY(101%);
  transition:transform .45s var(--ease); z-index:0; }
.btn:hover::before{ transform:translateY(0); }
.btn:hover span{ color:var(--ink); }
.btn.solid{ background:var(--orange); border-color:var(--orange); color:var(--ink); }
.btn.solid span{ color:var(--ink); }
.btn.solid::before{ background:var(--ink); }
.btn.solid:hover span{ color:var(--orange); }

.cdivider{ display:flex; align-items:center; gap:20px; margin:clamp(40px,7vh,80px) 0;
  font-family:var(--mono); color:var(--bone-dim); font-size:.74rem; letter-spacing:.2em; }
.cdivider::before, .cdivider::after{ content:""; flex:1; height:1px; background:var(--line); }

.msgs{ margin-top:clamp(40px,6vh,80px); }
.msgs__head{ display:flex; align-items:baseline; gap:14px; padding-bottom:18px; }
.msgs__head .n{ font-family:var(--mono); color:var(--orange); font-size:.8rem; letter-spacing:.2em; }
.msgs__head h3{ font-weight:800; text-transform:lowercase; font-size:clamp(1.3rem,2.2vw,1.9rem); }
.msg{ border-top:1px solid var(--line); padding:clamp(22px,3vh,32px) 0; }
.msg__top{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:12px; }
.msg__top .who{ font-weight:700; font-size:1.05rem; }
.msg__top .who .jp{ font-weight:700; }
.msg__top .when{ font-family:var(--mono); color:var(--bone-dim); font-size:.74rem; letter-spacing:.1em; }
.msg__body{ color:var(--bone); max-width:70ch; line-height:1.7; }
.msg__body.jp{ font-family:var(--jp); }
.form-note{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--orange);
  margin-top:14px; min-height:1em; }

/* =========================================================
   HAMBURGER + MOBILE DRAWER
   ========================================================= */
.hamburger{
  display:none; flex-direction:column; justify-content:center;
  gap:5px; width:44px; height:44px;
  background:none; border:none; cursor:pointer; padding:8px;
  color:inherit; flex-shrink:0;
}
.hamburger span{
  display:block; width:100%; height:1.5px; background:currentColor;
  transform-origin:center;
  transition:transform .45s var(--ease), opacity .3s;
}
.hamburger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.hamburger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media(max-width:880px){
  .nav .nav-link{ display:none; }
  .nav .lang{ display:none; }
  .nav-min{ display:none; }
  .hamburger{ display:flex; }
}

.mob-menu{
  position:fixed; inset:0; z-index:850;
  background:var(--ink);
  display:flex; flex-direction:column;
  transform:translateY(-100%);
  transition:transform .65s var(--ease);
  overflow:auto;
}
.mob-menu.is-open{ transform:translateY(0); }
.mob-menu__in{
  flex:1; display:flex; flex-direction:column;
  padding:clamp(20px,5vw,36px); min-height:100dvh;
}
.mob-menu__top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:clamp(28px,6vh,48px);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(28px,6vh,48px);
}
.mob-close{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--bone); background:none;
  border:1px solid var(--line); cursor:pointer;
  transition:border-color .3s, color .3s;
}
.mob-close:hover{ border-color:var(--orange); color:var(--orange); }
.mob-nav{
  flex:1; display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--line);
  padding-bottom:clamp(28px,6vh,48px);
}
.mob-link{
  display:flex; align-items:baseline; gap:16px;
  font-weight:800; letter-spacing:-.025em;
  font-size:clamp(2.2rem,10vw,4rem); text-transform:uppercase; line-height:1;
  padding:.32em 0; border-bottom:1px solid var(--line);
  color:var(--bone); text-decoration:none;
  position:relative; overflow:hidden;
  transition:color .35s var(--ease);
}
.mob-link::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.mob-link:hover{ color:var(--orange); }
.mob-link:hover::before{ transform:scaleX(1); }
.mob-link__no{
  font-family:var(--mono); font-size:.22em;
  color:var(--orange); letter-spacing:.2em; padding-top:.15em; flex-shrink:0;
}
.mob-foot{
  padding-top:clamp(20px,4vh,32px);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.mob-lang{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; color:var(--bone-dim);
}
.mob-lang button{ opacity:.4; transition:opacity .3s; }
.mob-lang button.on{ opacity:1; color:var(--orange); }
.mob-info{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--bone-dim); line-height:1.8; }

/* Hero entrance: hide content blocks before JS sets their animation-from
   states. body.hero-ready is added by initHero() after gsap.set() calls. */
body[data-page="home"]:not(.hero-ready) .hero__inner,
body[data-page="home"]:not(.hero-ready) .hero__blue,
body[data-page="home"]:not(.hero-ready) .hero__readout { visibility:hidden; }