/* ============================================================
   kuu films — Aerial & FPV Cinema  /  shared stylesheet
   Direction: quiet-luxury editorial (fashion-serif × film)
   Type: Italiana (EN display serif, matches wordmark)
         Zen Old Mincho (JP display) / Zen Kaku Gothic New (JP body)
         Satoshi (labels & UI)
   ============================================================ */

:root{
  --bg:#0c0b0a;          /* 温かいニアブラック */
  --bg-2:#100f0d;
  --bg-3:#15130f;
  --ink:#e8e4dc;         /* ボーン（本文） */
  --ink-soft:#b6b1a6;
  --muted:#827d72;
  --faint:#7a746a;
  --line:rgba(232,228,220,.13);
  --line-soft:rgba(232,228,220,.07);
  --accent:#c6a36b;      /* champagne（ロゴの静けさに合わせた真鍮系） */
  --accent-2:#dcc192;    /* pale gold */
  --accent-soft:rgba(198,163,107,.15);
  --maxw:1280px;
  --pad:40px;
  --ease:cubic-bezier(.19,1,.22,1);

  --serif:"Italiana","Zen Old Mincho",serif;                    /* 欧文ディスプレイ（ロゴ書体系） */
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN",serif;       /* 和文ディスプレイ（明朝） */
  --sans:"Satoshi","Zen Kaku Gothic New",system-ui,sans-serif;  /* 欧文UI/ラベル */
  --gothic:"Zen Kaku Gothic New","Satoshi",sans-serif;          /* 和文本文 */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--gothic);font-weight:300;
  font-size:16px;line-height:1.95;letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-weight:400;letter-spacing:0}

/* ---- film overlays (grain + vignette) ---- */
body::before{ /* grain */
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{ /* vignette */
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 40%,transparent 60%,rgba(0,0,0,.34) 100%);
}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.rule{height:1px;background:var(--line);border:0;width:100%}
section{position:relative}

/* index / eyebrow labels */
.idx{
  font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.idx--accent{color:var(--accent)}
.idx em{font-style:normal;color:var(--ink-soft)}

.lead{font-family:var(--gothic);color:var(--ink-soft);font-weight:300;font-size:clamp(15px,1.5vw,17px);line-height:2.05}
.muted{color:var(--muted)}

/* section heading block */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:30px;flex-wrap:wrap;margin-bottom:64px}
.sec-title{font-family:var(--mincho);font-weight:600;font-size:clamp(28px,4.2vw,46px);line-height:1.28;letter-spacing:.01em}
.sec-title .en{font-family:var(--serif);font-style:italic;font-weight:400}

/* ---- links / buttons ---- */
.link-arrow{
  font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--ink);
  display:inline-flex;align-items:center;gap:12px;padding-bottom:4px;
  border-bottom:1px solid var(--line);transition:border-color .4s var(--ease),gap .4s var(--ease);
}
.link-arrow span{transition:transform .4s var(--ease);color:var(--accent)}
.link-arrow:hover{border-color:var(--ink-soft)}
.link-arrow:hover span{transform:translateX(6px)}

.btn{
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border:1px solid var(--line);
  color:var(--ink);transition:all .45s var(--ease);background:transparent;cursor:pointer;
}
.btn:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.btn span{transition:transform .4s var(--ease)}
.btn:hover span{transform:translateX(5px)}

/* ---- header / nav ---- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease);border-bottom:1px solid transparent}
.site-head.solid{background:rgba(12,11,10,.78);backdrop-filter:blur(12px) saturate(1.1);border-bottom:1px solid var(--line-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px}
/* brand lockup — kuu / films（ロゴと同じ段組み） */
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:5px;line-height:.8}
.brand__kuu{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:.02em;color:var(--ink)}
.brand__films{font-family:var(--serif);font-weight:400;font-size:8px;letter-spacing:.6em;margin-right:-.6em;color:var(--ink-soft)}
.nav-links{display:flex;align-items:center;gap:40px}
.nav-links a{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .35s;position:relative;padding:6px 0}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent)}
.nav-contact{color:var(--ink)!important}
.burger{display:none;flex-direction:column;gap:6px;cursor:pointer;padding:8px;z-index:101;background:transparent;border:0;-webkit-appearance:none;appearance:none}
.burger span{width:26px;height:1px;background:var(--ink);transition:.35s var(--ease)}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* page intro band (sub pages) */
.page-intro{padding:180px 0 70px}
.page-intro .idx{display:block;margin-bottom:30px}
.page-title{font-family:var(--mincho);font-weight:600;font-size:clamp(40px,8vw,96px);line-height:1.04;letter-spacing:.005em}
.page-title .en{font-family:var(--serif);font-style:italic;font-weight:300;display:block;font-size:.42em;letter-spacing:.04em;color:var(--muted);margin-top:22px}
.page-intro .lead{max-width:560px;margin-top:40px}

/* ---- hero (home) ---- */
.hero{padding:172px 0 0;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.hero-top{display:flex;justify-content:space-between;gap:20px;margin-bottom:40px;flex-wrap:wrap}
.hero-title{font-family:var(--mincho);font-weight:600;font-size:clamp(48px,11vw,148px);line-height:1.02;letter-spacing:.01em}
.hero-title .mark{color:var(--accent)}
.hero-foot{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:54px;padding-bottom:64px}
.hero-sub{max-width:440px;color:var(--ink-soft);font-weight:300;line-height:2.05}

/* media frame (reel + works placeholders) */
.frame{position:relative;border:1px solid var(--line);background:linear-gradient(155deg,var(--bg-3),var(--bg));overflow:hidden}
.frame::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(118deg,rgba(255,255,255,.014) 0 1px,transparent 1px 7px);pointer-events:none}
.frame--reel{aspect-ratio:21/9;margin-bottom:0}
.frame__label{position:absolute;top:22px;left:24px;z-index:2}
.frame__soon{position:absolute;top:22px;right:24px;z-index:2;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.frame__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.frame__play .circle{width:84px;height:84px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .5s var(--ease)}
.frame:hover .frame__play .circle{border-color:var(--ink-soft);transform:scale(1.06)}
.frame__play svg{width:20px;height:20px;margin-left:3px;color:var(--ink)}
.frame__cap{position:absolute;left:24px;bottom:20px;z-index:2;font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--muted)}

/* ---- manifesto / statement ---- */
.statement{padding:150px 0}
.statement__grid{display:grid;grid-template-columns:.34fr 1fr;gap:60px}
.statement__big{font-family:var(--mincho);font-weight:500;font-size:clamp(24px,3.4vw,40px);line-height:1.7;letter-spacing:.01em}
.statement__big .en{font-family:var(--serif);font-style:italic;color:var(--muted)}
.statement__col p+p{margin-top:26px}
.statement__col .lead{max-width:600px}

/* ---- index list (capabilities / offerings) ---- */
.ilist{border-top:1px solid var(--line)}
.ilist__row{display:grid;grid-template-columns:80px 1fr 1.1fr auto;gap:30px;align-items:baseline;padding:34px 4px;border-bottom:1px solid var(--line);transition:padding .5s var(--ease),background .5s var(--ease)}
.ilist__row:hover{padding-left:18px;background:linear-gradient(90deg,var(--line-soft),transparent)}
.ilist__n{font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--accent)}
.ilist__t{font-family:var(--mincho);font-weight:600;font-size:clamp(19px,2.2vw,25px)}
.ilist__t .en{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:.6em;color:var(--muted);margin-top:4px;letter-spacing:.03em}
.ilist__d{color:var(--muted);font-size:14px;line-height:1.85}
.ilist__row .arrow{font-family:var(--sans);color:var(--faint);transition:transform .4s var(--ease),color .4s}
.ilist__row:hover .arrow{color:var(--ink);transform:translateX(6px)}

/* ---- works grid ---- */
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.work{position:relative;grid-column:span 6}
.work--full{grid-column:span 12}
.work--tall{grid-column:span 5}
.work--wide{grid-column:span 7}
.work__media{position:relative;border:1px solid var(--line);background:linear-gradient(155deg,var(--bg-3),var(--bg));aspect-ratio:16/10;overflow:hidden;transition:border-color .5s var(--ease)}
.work--tall .work__media{aspect-ratio:4/5}
.work__media::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(118deg,rgba(255,255,255,.012) 0 1px,transparent 1px 8px)}
.work:hover .work__media{border-color:var(--ink-soft)}
.work__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;opacity:.6;transition:opacity .5s}
.work:hover .work__play{opacity:1}
.work__play .circle{width:64px;height:64px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease)}
.work:hover .work__play .circle{transform:scale(1.08)}
.work__play svg{width:16px;height:16px;margin-left:2px}
.work__soon{position:absolute;top:18px;right:18px;z-index:2;font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-soft);padding:5px 11px}
.work__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px}
.work__cat{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.work__ttl{font-family:var(--mincho);font-weight:500;font-size:17px}
.work__yr{font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--muted)}

/* ---- process ---- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.step{padding:40px 26px 50px;border-right:1px solid var(--line)}
.step:last-child{border-right:none}
.step__n{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--muted);margin-bottom:26px}
.step__t{font-family:var(--mincho);font-weight:600;font-size:18px;margin-bottom:12px}
.step__d{color:var(--muted);font-size:13px;line-height:1.85}

/* ---- about / studio ---- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.about-grid .lead{max-width:none}
.facts{border-top:1px solid var(--line);margin-top:10px}
.fact{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.fact dt{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.fact dd{font-family:var(--gothic);font-size:15px;color:var(--ink)}

/* ---- big CTA band ---- */
.cta{padding:150px 0;text-align:center}
.cta__title{font-family:var(--mincho);font-weight:600;font-size:clamp(34px,6vw,76px);line-height:1.18;letter-spacing:.01em;margin:34px 0 0}
.cta__title .en{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--muted)}
.cta__sub{color:var(--ink-soft);max-width:460px;margin:34px auto 46px}
.cta__actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* contact specifics */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.contact-mail{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3.5vw,40px);color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:10px;display:inline-block;transition:border-color .4s}
.contact-mail:hover{border-color:var(--ink)}
.cfield{margin-bottom:26px}
.cfield label{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.cfield input,.cfield textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--gothic);font-size:15px;padding:8px 0;transition:border-color .4s}
.cfield input:focus,.cfield textarea:focus{outline:none;border-color:var(--ink)}
.cfield textarea{resize:vertical;min-height:90px}

/* ---- footer ---- */
.site-foot{border-top:1px solid var(--line);padding:90px 0 46px;margin-top:40px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px}
.foot-brand .brand{font-size:34px;display:inline-block;margin-bottom:24px}
.foot-brand p{color:var(--muted);font-size:13.5px;max-width:300px}
.foot-col h4{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;font-weight:500}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.foot-col a,.foot-col li{font-size:14px;color:var(--ink-soft);transition:color .35s}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:80px;padding-top:26px;border-top:1px solid var(--line-soft)}
.foot-bottom span{font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:var(--faint)}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.1s}.rv[data-d="2"]{transition-delay:.2s}
.rv[data-d="3"]{transition-delay:.3s}.rv[data-d="4"]{transition-delay:.4s}
@keyframes lineUp{from{opacity:0;transform:translateY(120%)}to{opacity:1;transform:translateY(0)}}
.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block;animation:lineUp 1.1s var(--ease) forwards;opacity:0}

/* ---- responsive ---- */
@media(max-width:1024px){
  :root{--pad:32px}
  .statement__grid{grid-template-columns:1fr;gap:36px}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:46px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{border-bottom:1px solid var(--line)}
  .step:nth-child(2n){border-right:none}
  .ilist__row{grid-template-columns:54px 1fr;gap:8px 20px}
  .ilist__d{grid-column:2;margin-top:8px}
  .ilist__row .arrow{display:none}
}
@media(max-width:760px){
  :root{--pad:22px}
  body{font-size:15px}
  .nav{height:72px}
  .nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:8px;background:rgba(12,11,10,.97);backdrop-filter:blur(18px);transform:translateX(100%);transition:transform .55s var(--ease)}
  .nav-links.open{transform:none}
  .nav-links a{font-size:22px;font-family:var(--mincho);text-transform:none;letter-spacing:.04em;padding:14px 0;color:var(--ink-soft)}
  .nav-links a.active::after{display:none}
  .burger{display:flex}
  .hero{padding-top:120px}
  .hero-foot{grid-template-columns:1fr;gap:30px;align-items:start}
  .works{gap:16px}
  .work,.work--tall,.work--wide,.work--full{grid-column:span 12}
  .foot-top{grid-template-columns:1fr;gap:40px}
  .frame--reel{aspect-ratio:4/3}
  .page-intro{padding:130px 0 50px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001s!important}
  .line-mask>span{opacity:1!important;transform:none!important}   /* hero H1 must stay visible */
  .loader__word span{transform:none!important}
}

/* ============ real media ============ */
.work{cursor:pointer}
.work__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8) saturate(.97);transition:filter .7s var(--ease),transform 1.3s var(--ease)}
.work:hover .work__poster{filter:brightness(1) saturate(1.02);transform:scale(1.035)}
.frame{cursor:pointer}
.frame__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.84);transition:filter .7s var(--ease)}
.frame:hover .frame__video{filter:brightness(1)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(7,6,5,.95);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:6vh 6vw;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox__video{max-width:100%;max-height:88vh;width:auto;height:auto;border:1px solid var(--line);box-shadow:0 40px 120px rgba(0,0,0,.7);background:#000}
.lightbox__close{position:absolute;top:24px;right:30px;width:46px;height:46px;border:1px solid var(--line);background:transparent;color:var(--ink);font-family:var(--sans);font-size:15px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .35s var(--ease)}
.lightbox__close:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}

/* ============ cinematic hero (full-bleed video) ============ */
.hero-cinema{position:relative;height:100vh;min-height:620px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:7vh}
.hero-cinema__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-cinema__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,7,6,.5) 0%,rgba(8,7,6,.05) 28%,rgba(8,7,6,.12) 52%,rgba(8,7,6,.82) 100%),
             radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(8,7,6,.4) 100%)}
.hero-cinema__top{position:absolute;top:118px;left:0;right:0;z-index:2;display:flex;justify-content:space-between;gap:20px}
.hero-cinema__content{position:relative;z-index:2;width:100%}
.hero-cinema__title{font-family:var(--mincho);font-weight:600;font-size:clamp(48px,10.5vw,140px);line-height:1.02;letter-spacing:.01em;text-shadow:0 4px 60px rgba(0,0,0,.5)}
.hero-cinema__title .mark{color:var(--accent)}
.hero-cinema__foot{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:42px}
.hero-cinema__sub{max-width:560px;color:var(--ink-soft);text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hero-cinema__scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--sans);font-size:11px;letter-spacing:.28em;color:var(--ink-soft);text-transform:uppercase}
@media(max-width:760px){
  .hero-cinema__top{top:88px}
  .hero-cinema__foot{grid-template-columns:1fr;gap:26px;align-items:start}
}

/* ============ full-width feature video band ============ */
.feature{position:relative;height:80vh;min-height:480px;overflow:hidden;display:flex;align-items:flex-end;margin:46px 0}
.feature__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.feature__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,7,6,.15) 0%,transparent 35%,rgba(8,7,6,.78) 100%)}
.feature__content{position:relative;z-index:2;width:100%;padding-bottom:54px}
.feature__title{font-family:var(--mincho);font-weight:600;font-size:clamp(26px,4.2vw,52px);line-height:1.22;letter-spacing:.01em;margin-top:14px;text-shadow:0 3px 40px rgba(0,0,0,.5)}
.feature__play{display:inline-flex;align-items:center;gap:14px;margin-top:24px;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.feature__play .circle{width:54px;height:54px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .4s var(--ease)}
.feature:hover .feature__play .circle{border-color:var(--ink);background:rgba(255,255,255,.06)}
.feature__play svg{width:15px;height:15px;margin-left:2px}

/* hover-to-play on work tiles */
.work__hovervid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* ============ bolder + color (ember) ============ */
/* hero slow cinematic zoom */
.hero-cinema__bg{animation:kenburns 28s ease-in-out infinite alternate;transform-origin:62% 50%}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.13)}}

/* warm atmospheric glows */
.cta{position:relative}
.cta::before{content:"";position:absolute;left:0;right:0;bottom:-8%;height:85%;z-index:0;background:radial-gradient(48% 80% at 50% 100%,var(--accent-soft),transparent 70%);pointer-events:none}
.cta .wrap{position:relative;z-index:1}
.feature__scrim{background:linear-gradient(180deg,rgba(8,7,6,.15) 0%,transparent 35%,rgba(8,7,6,.78) 100%),radial-gradient(78% 60% at 12% 100%,rgba(239,107,57,.2),transparent 60%)}

/* accent the en italics + hero sub link */
.sec-title .en,.page-title .en,.cta__title .en,.feature__title .en{color:var(--accent-2)}

/* ---- kinetic marquee ---- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;white-space:nowrap;background:linear-gradient(90deg,var(--bg),var(--bg-2),var(--bg))}
.marquee__track{display:inline-flex;align-items:center;animation:marq 32s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track>span{display:inline-flex;align-items:center}
.marquee__word{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,5.2vw,68px);color:var(--ink);padding:0 .25em;line-height:1}
.marquee__word.out{color:transparent;-webkit-text-stroke:1px var(--muted);text-stroke:1px var(--muted)}
.marquee__star{color:var(--accent);font-size:clamp(13px,1.5vw,20px);margin:0 .15em;transform:translateY(-.12em)}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track,.hero-cinema__bg{animation:none}}

/* ============ typography refresh (Fontshare / kinetic / readability) ============ */
body{font-weight:400}

/* Italiana/Satoshi have no true italic → kill synthetic italics from old serif usage */
.sec-title .en,.page-title .en,.cta__title .en,.feature__title .en,.ilist__t .en,
.why-item h3 .en,.statement__big .en,.marquee__word,.step__n,.contact-mail{font-style:normal}
.marquee__word{font-family:var(--serif);font-weight:400;letter-spacing:.02em}
.step__n{font-family:var(--serif);font-weight:400}
.contact-mail{font-family:var(--serif);font-weight:400;letter-spacing:.015em}
.statement__big .en,.ilist__t .en,.why-item h3 .en{font-family:var(--serif);font-weight:400}

/* display weights + tracking（明朝は詰めすぎない・palt で句読点だけ締める） */
.hero-cinema__title{font-weight:600;letter-spacing:.02em;line-height:1.12}
.page-title{font-weight:600;letter-spacing:.02em}
.sec-title,.cta__title,.feature__title{font-weight:600;letter-spacing:.02em}
.statement__big{font-weight:500;letter-spacing:.02em}
.ilist__t,.step__t,.why-item h3,.work__ttl,.svc h3{font-weight:600;letter-spacing:.015em}
.hero-cinema__title,.page-title,.sec-title,.cta__title,.feature__title,
.statement__big,.pull__q,.ilist__t,.step__t,.work__ttl,.why-item h3{font-feature-settings:"palt"}
.en{font-weight:400}

/* refined JP-aware line breaking (no more ragged/mid-word wraps) */
h1,h2,h3,.hero-cinema__title,.page-title,.sec-title,.cta__title,.feature__title,.statement__big,.cta__sub{
  text-wrap:balance;line-break:strict;word-break:normal;overflow-wrap:normal;
}
p,.lead,.hero-cinema__sub,.svc p,.ilist__d,.step__d,.fact dd,.foot-brand p{
  text-wrap:pretty;line-break:strict;overflow-wrap:break-word;
}

/* readability: stronger scrims + crisper overlaid text */
.hero-cinema__scrim{background:
  linear-gradient(180deg,rgba(8,7,6,.58) 0%,rgba(8,7,6,.1) 30%,rgba(8,7,6,.2) 55%,rgba(8,7,6,.9) 100%)}
  /* single vignette only — body::after handles corner darkening (no triple-stack) */
.hero-cinema__sub{color:var(--ink);text-shadow:0 2px 30px rgba(0,0,0,.75)}
.feature__title{text-shadow:0 3px 44px rgba(0,0,0,.7)}

/* labels/UI in Satoshi, a touch bolder for clarity */
.idx,.nav-links a,.work__cat,.btn,.foot-col h4,.frame__label,.work__soon{font-weight:500}

/* ============================================================
   creative art-direction (asymmetry / bleed / layering / marginalia)
   ============================================================ */

/* fixed vertical marginalia on the page edge */
.margin-label{position:fixed;left:16px;bottom:42px;z-index:40;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);
  mix-blend-mode:difference;pointer-events:none}
.margin-label b{color:var(--accent);font-weight:500;-webkit-text-fill-color:var(--accent)}

/* ---- hero: oversized bleed + edge label + coordinates ---- */
.hero-cinema__title{margin-left:-.045em}
.edge-label{position:absolute;z-index:3;writing-mode:vertical-rl;
  font-family:var(--sans);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft)}
.edge-label--r{right:28px;top:0;bottom:0;height:max-content;margin:auto 0}
.hero-coords{position:absolute;left:var(--pad);bottom:128px;z-index:3;
  font-family:var(--sans);font-size:11px;letter-spacing:.16em;color:var(--muted)}
.hero-coords b{color:var(--ink);font-weight:500}

/* ---- pull-quote statement: giant ghost index + asymmetric ---- */
.pull{position:relative;padding:150px 0 130px;overflow:hidden}
.pull__n{position:absolute;top:24px;left:-12px;z-index:0;pointer-events:none;
  font-family:var(--serif);font-weight:400;font-size:clamp(150px,30vw,420px);line-height:.74;
  letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke-width:1.5px;-webkit-text-stroke-color:rgba(232,228,220,.16);
  text-stroke-width:1.5px;text-stroke-color:rgba(232,228,220,.16)}
.pull__q{position:relative;z-index:1;max-width:980px;margin-left:auto;
  font-family:var(--mincho);font-weight:600;font-size:clamp(24px,3.8vw,46px);line-height:1.6;letter-spacing:.005em}
.pull__q .ac{color:var(--accent)}
.pull__q .en{font-family:var(--serif);font-weight:400;color:var(--ink-soft)}
.pull__meta{position:relative;z-index:1;max-width:980px;margin:46px 0 0 auto;display:flex;gap:24px;align-items:baseline}

/* ---- asymmetric staggered works gallery ---- */
.gal{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:26px 28px;align-items:start}
.gal__head{grid-column:1/13;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:46px}
.gal__item{position:relative}
.gal__item .gnum{position:absolute;z-index:4;font-family:var(--serif);font-weight:400;
  font-size:clamp(54px,6vw,104px);line-height:.9;letter-spacing:0;color:#fff;mix-blend-mode:difference}
.gal .gi-a{grid-column:1/8}
.gal .gi-a .gnum{top:-30px;left:-14px}
.gal .gi-b{grid-column:8/13;margin-top:118px}
.gal .gi-b .gnum{top:-30px;right:-10px}
.gal .gi-c{grid-column:3/11;margin-top:30px}
.gal .gi-c .gnum{top:-34px;left:-16px}
.gal__item .work__media{margin:0}
.gal__cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px}

/* break a section out to the full viewport width (edge bleed) */
.bleed-r{margin-right:calc(50% - 50vw)}

/* oversized capability index numbers */
.ilist__n{font-size:14px}
.ilist__row{grid-template-columns:92px 1fr 1.1fr auto}

@media(max-width:980px){
  .margin-label,.edge-label{display:none}
  .pull__q,.pull__meta{margin-left:0}
  .gal .gi-a,.gal .gi-b,.gal .gi-c{grid-column:1/13;margin-top:0}
  .gal .gi-b .gnum,.gal .gi-c .gnum{left:-10px;right:auto}
  .bleed-r{margin-right:0}
}

/* ============================================================
   immersive layer (intro loader)
   ============================================================ */
/* intro loader */
.loader{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:flex-end;
  justify-content:space-between;padding:46px var(--pad);transition:opacity .9s var(--ease),visibility .9s}
.loader.done{opacity:0;visibility:hidden}
body.is-loading{overflow:hidden}
.loader__word{font-family:var(--serif);font-weight:400;font-size:clamp(38px,8vw,104px);letter-spacing:.02em;line-height:.9;overflow:hidden}
.loader__word i{font-style:normal;font-size:.15em;letter-spacing:.6em;margin-left:.4em;color:var(--ink-soft);vertical-align:.12em}
.loader__word span{display:inline-block;transform:translateY(110%);animation:loadUp .9s var(--ease) .1s forwards}
.loader__count{font-family:var(--sans);font-weight:500;font-size:clamp(38px,8vw,104px);letter-spacing:-.03em;color:var(--muted)}
.loader__bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent)}
@keyframes loadUp{to{transform:translateY(0)}}

/* (custom cursor & WebGL hero were removed — dead CSS deleted) */

/* ============================================================
   refinement pass — vertical rhythm · type leading · motion
   ============================================================ */
:root{ --section: clamp(94px, 11.5vw, 164px); }

/* one consistent vertical rhythm (kills the 150/130/40/0 jumble) */
.statement,.pull,.cta{ padding-top:var(--section); padding-bottom:var(--section); }
.statement + .statement{ padding-top:0; }      /* no double gap between stacked sections */
.feature{ margin:var(--section) 0; }
.page-intro{ padding-top:clamp(124px,16vw,196px); padding-bottom:clamp(40px,6vw,72px); }

/* type: mincho-friendly leading（明朝は詰めすぎると潰れる） */
.hero-cinema__title{ line-height:1.14; }
.sec-title{ line-height:1.3; }
.pull__q{ line-height:1.62; letter-spacing:.015em; font-size:clamp(25px,4vw,50px); }
.ilist__t{ line-height:1.3; }
.svc h3{ line-height:1.32; }
.work__ttl{ line-height:1.34; }
.step__t,.why-item h3{ line-height:1.32; }
.lead,.hero-cinema__sub{ line-height:2.0; }

/* motion: a single buttery curve, refined timing + stagger */
.rv{ transition-duration:.9s; transition-timing-function:var(--ease); transform:translateY(30px); }
.rv.in{ transform:none; }
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
.work:hover .work__poster{ transition-duration:1.1s; }
.link-arrow,.btn,.nav-links a,.work__media,.svc,.ilist__row,.frame,.work{ transition-timing-function:var(--ease); }

/* micro-polish — focus, marquee edge-fade, hairline consistency */
:focus-visible{outline:1px solid var(--accent);outline-offset:3px;border-radius:1px}
.marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.gal .gi-b{margin-top:clamp(60px,9vw,128px)}   /* intentional, viewport-scaled stagger */
.gal .gi-c{margin-top:clamp(20px,3vw,44px)}

/* ---- Japanese-aware line breaking (replaces text-wrap:balance/pretty,
        which break JP at awkward points). auto-phrase folds at 文節 boundaries. ---- */
.hero-cinema__title,.hero-cinema__sub,.page-title,.sec-title,.cta__title,.cta__sub,
.feature__title,.statement__big,.pull__q,.lead,.ilist__t,.ilist__d,.svc h3,.svc p,
.step__t,.step__d,.why-item h3,.why-item p,.fact dd,.foot-brand p,.work__ttl,p{
  text-wrap:wrap;
  word-break:auto-phrase;
  line-break:strict;
  overflow-wrap:break-word;
}

/* ============================================================
   colour system — ONE metal family（champagne → bronze）.
   ロゴの静けさに合わせ、色相のローテーションは廃止。
   トーン差だけで奥行きを出す（quiet luxury）。
   ============================================================ */
:root{
  --c1:#d8c092;  /* pale champagne */
  --c2:#c6a36b;  /* brass（基準） */
  --c3:#b08d58;  /* bronze */
  --c4:#e6d6b2;  /* light gold */
  --c5:#caa878;  /* warm sand */
  --accent:var(--c2);
  --accent-2:var(--c1);
}
/* accent shifts as you scroll — each section owns a hue */
.hero-cinema{ --accent:var(--c2); }   /* 夕日ヒーローに合わせamber */
.marquee{ --accent:var(--c2); }
.pull{ --accent:var(--c2); }
.feature{ --accent:var(--c5); }
section.statement{ --accent:var(--c3); }
.cta{ --accent:var(--c5); }
/* works gallery — colour-coded by category */
.gal .gi-a{ --accent:var(--c2); }   /* hospitality */
.gal .gi-b{ --accent:var(--c1); }   /* aerial */
.gal .gi-c{ --accent:var(--c4); }   /* outdoor */
/* capability index numbers cycle the whole palette */
.ilist__row:nth-child(1) .ilist__n{ color:var(--c1); }
.ilist__row:nth-child(2) .ilist__n{ color:var(--c2); }
.ilist__row:nth-child(3) .ilist__n{ color:var(--c3); }
.ilist__row:nth-child(4) .ilist__n{ color:var(--c4); }
.ilist__row:nth-child(5) .ilist__n{ color:var(--c5); }
.ilist__row:nth-child(6) .ilist__n{ color:var(--c1); }
/* soft glows follow the active accent (instead of fixed orange) */
.cta::before{ background:radial-gradient(48% 80% at 50% 100%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); }
.feature__scrim{ background:
  linear-gradient(180deg,rgba(8,7,6,.15) 0%,transparent 35%,rgba(8,7,6,.78) 100%),
  radial-gradient(78% 60% at 12% 100%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%); }
.loader__bar{ background:var(--c1); }
/* smooth the colour change so scrolling feels intentional, not abrupt */
.idx--accent,.link-arrow span,.work__cat,.hero-cinema__title .mark,.pull__q .ac{ transition:color .5s var(--ease); }

/* ============ micro-interactions ============ */
/* works light up in their category colour on hover */
.work:hover .work__media{ border-color:var(--accent);
  box-shadow:0 26px 70px -28px color-mix(in srgb, var(--accent) 60%, transparent); }
.gal__item:hover .gnum{ color:var(--accent); mix-blend-mode:normal; }

/* index numbers seep up as the tile reveals (and take colour on hover) */
.gnum{ opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease) .12s, transform .7s var(--ease) .12s, color .4s var(--ease); }
.in .gnum{ opacity:1; transform:none; }

/* capability rows: accent bar wipes in, label + arrow take the colour */
.ilist__row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease); }
.ilist__row:hover::before{ transform:scaleY(1); transform-origin:top; }
.ilist__row:hover{ background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent); }
.ilist__row:hover .ilist__t{ color:var(--accent); transition:color .4s var(--ease); }
.ilist__row:hover .arrow{ color:var(--accent); }

/* links pick up the active accent underline on hover */
.link-arrow:hover{ border-color:var(--accent); }
.work__cat{ transition:color .5s var(--ease); }

/* ============ responsive refinement ============ */
:root{ --section: clamp(68px, 12vw, 158px); }   /* tighter vertical rhythm on small screens */
@media(max-width:980px){
  /* stacked gallery items must not keep the desktop stagger offset */
  .gal .gi-a, .gal .gi-b, .gal .gi-c{ margin-top:0 !important; }
  .gal{ gap:18px; }
  .pull__n{ font-size:clamp(92px,24vw,150px); top:8px; }
  .pull__q{ font-size:clamp(23px,5.6vw,34px); line-height:1.55; }
  .gal__item .gnum{ font-size:clamp(46px,11vw,72px); top:-22px; }
}
@media(max-width:760px){
  .hero-cinema{ padding-bottom:8vh; }
  .hero-cinema__title{ font-size:clamp(46px,13vw,74px); }
  .marquee{ padding:22px 0; }
  .marquee__word{ font-size:clamp(26px,7vw,40px); }
  .feature{ height:62vh; min-height:380px; }
  .work__meta,.gal__cap{ flex-wrap:wrap; gap:6px 14px; }
  .pull__q{ font-size:clamp(22px,5.4vw,32px); }
  /* drop desktop-only manual breaks so JP body flows naturally (auto-phrase) */
  .br-d{ display:none; }
}

/* ============================================================
   kuu films rebrand pass — lockup / line-break / responsive
   ============================================================ */

/* footer lockup（ロゴ準拠の大きめ段組み） */
.foot-brand .brand{display:inline-flex;gap:9px;margin-bottom:26px}
.foot-brand .brand__kuu{font-size:54px}
.foot-brand .brand__films{font-size:11px;letter-spacing:.64em;margin-right:-.64em}

/* 改行制御 — 文節単位の nowrap（auto-phrase 非対応ブラウザでも確実に効く） */
.nb{white-space:nowrap}

/* Italiana は x-height が低く小さく見える → 英字サブ表記をひと回し上げる */
.page-title .en{font-size:.46em;letter-spacing:.06em}
.sec-title .en{letter-spacing:.05em}
.cta__title .en,.feature__title .en{letter-spacing:.04em}

/* Field Notes — 3列の小さめタイル */
.work--third{grid-column:span 4}
.work--third .work__ttl{font-size:15px}
.work--third .work__play .circle{width:52px;height:52px}

/* Process — 狭幅では1列（2列の窮屈さを解消） */
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
  .step{border-right:none;padding:26px 2px 32px}
}
@media(max-width:980px){
  .work--third{grid-column:span 6}
}
@media(max-width:760px){
  .work--third{grid-column:span 12}
  .foot-brand .brand__kuu{font-size:44px}
  .brand__kuu{font-size:26px}
  .brand__films{font-size:7px}
}