/* ==========================================================================
   Editorial layer v4 — loads last. Asymmetric hero, compact nav, exhibition grid.
   ========================================================================== */

/* ---------- Hero: figure bleeds off the right edge, type crosses it ---------- */
.hero{overflow:clip}
.hero-grid{position:relative;display:block;width:min(1500px,calc(100% - 48px))}
.hero-stage{position:absolute;right:-6vw;top:-6vh;width:min(70vw,980px);height:calc(100% + 6vh);min-height:560px;z-index:1;overflow:visible}
.hero-stage .corner,.hero-stage .hud-tl{display:none}
.stage-word{top:78%;font-size:19cqi;-webkit-text-stroke:1px rgba(143,176,255,.22)}
.hero-copy{position:relative;z-index:4;padding-top:clamp(40px,10vh,120px);max-width:none}
.hero-title{font-size:clamp(72px,14.5vw,250px);line-height:.8;letter-spacing:-.085em;mix-blend-mode:difference}
.hero-title .ln:nth-child(2){padding-left:.9em}
.hero-title .ln:nth-child(3){padding-left:.2em}
.hero-title em{color:#fff;letter-spacing:-.04em}
.hero-desc{max-width:340px;margin:clamp(28px,6vh,64px) 0 0 clamp(0px,34vw,520px)}
.hero-actions{margin-left:clamp(0px,34vw,520px)}
.hero-tag{position:absolute;right:0;bottom:-8px}
.annot-label{font-size:12px}

/* ---------- Navigation: compact index instead of a SaaS bar ---------- */
.site-header .nav{position:fixed;left:50%;bottom:22px;top:auto;transform:translateX(-50%);display:flex;gap:2px;padding:6px;background:rgba(10,13,21,.78);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:90}
.site-header .nav a{position:relative;padding:10px 16px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);transition:color .3s var(--ease),background .3s var(--ease)}
.site-header .nav a:hover,.site-header .nav a:focus-visible,.site-header .nav a.is-active{color:var(--bg);background:var(--ink)}
.availability{display:none}

/* ---------- Exhibition: staggered, varied scale, rhythm instead of a bento ---------- */
.work-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(40px,8vw,120px) 18px;align-items:start}
.case{min-height:0}
.case:nth-child(1){grid-column:1/9;aspect-ratio:16/10}
.case:nth-child(2){grid-column:9/13;aspect-ratio:3/4;margin-top:22vh}
.case:nth-child(3){grid-column:2/6;aspect-ratio:4/5}
.case:nth-child(4){grid-column:6/13;aspect-ratio:16/9;margin-top:14vh}
.case:nth-child(5){grid-column:1/8;aspect-ratio:1/1;max-height:80vh}
.case:nth-child(6){grid-column:8/13;aspect-ratio:3/4;margin-top:30vh}
.case-title{font-size:clamp(34px,4.6vw,72px)}

/* ---------- Capabilities: one editorial list, not four cards ---------- */
.cap-grid{display:block;border-top:1px solid var(--line)}
.cap{display:grid;grid-template-columns:200px 1fr 1.2fr;gap:24px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line);background:none;border-inline:0;border-radius:0}
.cap h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(32px,4vw,60px);letter-spacing:-.02em;line-height:1}

/* ---------- Footer: oversized closing line ---------- */
.contact-title{font-size:clamp(80px,17vw,300px);line-height:.8;letter-spacing:-.09em}

@media (max-width:980px){
  .hero-grid{width:calc(100% - 32px)}
  .hero-stage{position:relative;right:auto;top:auto;width:calc(100% + 32px);margin:0 -16px;height:62vh;min-height:420px;order:-1}
  .hero-copy{margin-top:-14vh;padding-top:0}
  .hero-title{font-size:clamp(64px,22vw,150px)}
  .hero-desc,.hero-actions{margin-left:0}
  .hero-tag{position:static;margin-top:24px}
  .site-header .nav{display:none}
  .work-grid{display:flex;flex-direction:column;gap:36px}
  .case:nth-child(n){margin-top:0;aspect-ratio:4/5;max-height:none}
  .cap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.hero-title{mix-blend-mode:normal}}

/* ---------- Case index: a plain list that previews each work under the pointer ---------- */
.hero-jp{margin:18px 0 0 clamp(0px,34vw,520px);font:500 14px/1.7 "Hiragino Sans","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;letter-spacing:.18em;color:var(--ink-2)}
.case-index{list-style:none;margin:clamp(72px,12vw,160px) 0 0;padding:0;border-top:1px solid var(--line)}
.case-index button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:1.3fr 1.4fr 1fr 64px;gap:20px;align-items:baseline;padding:22px 4px;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink-2);transition:padding .45s cubic-bezier(.2,.8,.2,1),color .3s}
.ix-title{font:italic 400 clamp(32px,5vw,76px)/1 var(--serif);letter-spacing:-.02em;color:var(--ink);transition:opacity .3s}
.ix-sub{font-size:14px}.ix-tag,.ix-year{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}.ix-year{text-align:right}
.case-index li:hover button,.case-index button:focus-visible{padding-left:clamp(12px,2vw,32px);color:var(--ink)}
.case-index:hover li:not(:hover) .ix-title{opacity:.3}
.case-index button:focus-visible{outline:2px solid var(--blue-soft);outline-offset:-2px}
.ix-preview{position:fixed;left:0;top:0;z-index:80;pointer-events:none;overflow:hidden;border:1px solid var(--line);opacity:0;transition:opacity .25s;will-change:transform}
.ix-preview.on{opacity:1}
@media(max-width:980px){.hero-jp{margin-left:0}}
@media(max-width:760px){.case-index button{grid-template-columns:1fr auto}.ix-sub,.ix-tag{display:none}}
@media(hover:none){.ix-preview{display:none}}

/* ---------- Hero signature: the doubt line gets struck out, one claim at a time ---------- */
.hero-doubt{margin:0 0 clamp(14px,3vh,34px);font:italic 400 clamp(20px,2.4vw,34px)/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink-2)}
.dd-lead{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--muted);margin-right:10px}
.dd-text{position:relative;display:inline-block;color:var(--ink);transition:color .4s}
.dd-text::after{content:"";position:absolute;left:-3px;right:-3px;top:54%;height:2px;background:var(--blue-soft);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.dd-text.struck{color:var(--muted)}.dd-text.struck::after{transform:scaleX(1)}
.dd-text.final{color:var(--ink)}
.sound-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 12px;border:1px solid var(--line);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);transition:background .25s,color .25s}
.sound-btn:hover,.sound-btn[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.sound-btn:focus-visible{outline:2px solid var(--blue-soft);outline-offset:2px}
@media(max-width:560px){.header-clock{display:none}}
@media(min-width:981px){.hero-title{font-size:clamp(72px,12vw,205px)}}
@media(min-width:981px){.site-header .nav{top:14px;bottom:auto}}