/* index */
  .fusen-demo { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; background:
    radial-gradient(120% 90% at 20% 10%, #3a4743 0%, #202725 60%); }
  .fusen-demo .frame { position:absolute; inset:18px 18px 64px; border:1px solid var(--line-dark); border-radius:8px; opacity:.6; }
  .fusen-bar { position:relative; height:10px; border-radius:6px; background:rgba(245,241,232,.14); }
  .fusen-bar i { position:absolute; top:-5px; width:2px; height:20px; background:var(--ivory); border-radius:2px; }
  .fusen-bar i:nth-child(2){ background:var(--apricot); }
  .fusen-note { position:absolute; right:22px; top:20px; font-family:var(--font-en); font-size:11px; letter-spacing:.14em; color:var(--mist); }
  .fusen-demo .tag { position:absolute; left:22px; top:20px; font-size:12px; color:var(--mist); }
  .path-visual { background:var(--ivory); border:1px solid var(--line); }
  .path-visual svg { position:absolute; inset:0; width:100%; height:100%; }
  .studio-grid { display:grid; grid-template-columns: 5fr 7fr; gap: clamp(28px,6vw,96px); align-items:start; }
  @media (max-width: 820px){ .studio-grid{ grid-template-columns:1fr; } }

/* about.html */
  /* About-page spacing only; no new visual language. */
  .page-hero .h-display { font-size: clamp(36px, 8vw, 96px); }
  .area .status { margin: 0 8px 10px 0; }
  .shared-theme { margin-top: clamp(40px, 6vw, 64px); }
  .ai-flow { margin: 8px 0 40px; }

/* work.html */
  /* Work page only: illustration for 動画ふせん (drawn in CSS/SVG, not a screenshot) */
  .work-visual .fusen-caption { position: absolute; top: 10px; left: 14px; font-family: var(--font-en), var(--font-ja); font-size: 12px; letter-spacing: 0.08em; color: var(--mist); }
  .work-visual .fusen-art { width: 100%; height: auto; }

/* ---- home: showcase tiles ---- */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
.tile { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); background: var(--ink); transition: border-color .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
.tile:hover { border-color: var(--signal); transform: translateY(-4px); }
.tile-visual { aspect-ratio: 16/10; display: grid; place-items: center; overflow: hidden; background: var(--ink-3); border-bottom: 1px solid var(--line); }
.tile-visual.mimi { background: radial-gradient(70% 90% at 50% 50%, #0b1730, #05070c); }
.tile-visual.mimi img { width: 38%; height: auto; border-radius: 22%; box-shadow: 0 30px 60px -20px rgba(40,120,255,.5); }
.tile-visual.nano img { width: 100%; height: 100%; object-fit: cover; }
.tile-body { padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 10px; align-content: start; }
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } }


/* about.html (v2 rebuild): spacing and the stage label column only */
  .page-hero .lead { margin-top: 32px; }
  .about-cta { margin-top: 36px; }
  .stage-facts { grid-template-columns: minmax(11em, max-content) 1fr; }
  @media (max-width: 900px){ .stage-facts { grid-template-columns: 1fr; } }

/* home: lines index uses the full width — tune columns */
.section .index .row { grid-template-columns: 56px minmax(0, 4fr) minmax(0, 6fr) 150px 24px; }
@media (max-width: 900px) { .section .index .row { grid-template-columns: 40px 1fr auto; } }

/* work.html (Signal v2): page-only layout hooks; tokens come from style.css */
.feature .visual svg { width: 100%; height: 100%; }
.feature .visual.is-shot img { object-fit: contain; padding: clamp(8px, 2vw, 20px); }
.feature .visual.is-icon img { width: min(44%, 220px); height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.feature .visual.is-type { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px; text-align: center; }
.feature .visual.is-type .mark { font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 6vw, 72px); line-height: 1.2; letter-spacing: -.01em; }
.feature .visual.is-type .tag { font-size: 15px; color: var(--text-2); }
.light .feature { border-color: var(--paper-line); }
.light .feature:last-child { border-bottom-color: var(--paper-line); }
.light .feature .visual { border-color: var(--paper-line); }
.prep-text { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(28px, 6vw, 112px); align-items: start; padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.prep-text .body { display: grid; gap: 22px; }
.prep-text .h-card { margin-top: 18px; }
@media (max-width: 900px) { .prep-text { grid-template-columns: 1fr; } }
/* work.html: the 4-item header nav (Work/Books/About/Contact) must fit 375px without overflow */
@media (max-width: 520px) {
  .site-header .nav { gap: 10px; font-size: 10.5px; letter-spacing: .04em; }
  .site-header .logo { font-size: 11px; letter-spacing: .14em; gap: 8px; }
}

/* app icons: rounded, contained */
.feature .visual img[src*="mimi-icon"] { width: 34%; height: auto; max-width: 260px; border-radius: 22%; box-shadow: 0 30px 70px -24px rgba(40, 120, 255, .55); }
/* work.html: footer email (partials, verbatim) must not overflow at 375px */
@media (max-width: 520px) {
  .site-footer .big { font-size: 30px; }
}