/* 2026-08-26 — full-frame Firefly loops with lighter, localised readability scrims. */

/* The film remains recognisable, but it cannot compete with the writing. */
.site-atmosphere-film {
  filter:saturate(.92) contrast(1.01) brightness(1.02) !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  max-width:none !important;
  inset:0 !important;
  object-fit:cover !important;
}
.site-atmosphere-film.is-ready { opacity:.68 !important; }
.secskew {
  --section-line:rgba(126,241,223,.72);
  background:
    linear-gradient(90deg,rgba(2,7,11,.54) 0%,rgba(2,7,11,.34) 42%,rgba(2,7,11,.12) 72%,rgba(2,7,11,.06) 100%),
    linear-gradient(180deg,rgba(5,20,27,.1),rgba(5,13,21,.2)) !important;
  border-top:3px solid var(--section-line) !important;
  box-shadow:0 -18px 48px color-mix(in srgb,var(--section-line) 16%,transparent) !important;
}
#aicone .secskew { --section-line:rgba(177,139,255,.82); }
#research .secskew { --section-line:rgba(95,233,219,.9); }
#bansou .secskew {
  --section-line:rgba(244,188,102,.86);
  background:linear-gradient(180deg,rgba(2,7,11,.12),rgba(2,7,11,.22)) !important;
}
#profile .secskew { --section-line:rgba(201,184,255,.82); }
#contact .secskew { --section-line:rgba(126,241,223,.9); }

/* The opening remains a room-first experience. Navigation arrives only after
   the room sequence has completely left the viewport (JS owns the timing). */
.hero { background:#0000 !important; }
.heroscrim {
  background:
    radial-gradient(ellipse at 50% 52%,rgba(2,6,10,.22),rgba(2,6,10,.04) 50%,transparent 74%),
    linear-gradient(180deg,rgba(2,6,10,.06),transparent 64%,rgba(2,6,10,.22)) !important;
}
.herotext,.section-heading,.research-copy,.bansou-copy,.profile-opening,.contact-heading {
  text-shadow:0 2px 24px rgba(0,0,0,.82);
}

/* Every word keeps a stable slot while its typeface changes. */
#aicone .vision-title {
  display:grid !important;
  grid-template-columns:max-content max-content !important;
  justify-content:start !important;
  align-items:baseline !important;
  width:100% !important;
  max-width:none !important;
  gap:.04em .22em !important;
  overflow:visible !important;
  font-size:clamp(2.8rem,4.15vw,5.35rem) !important;
  line-height:.9 !important;
  letter-spacing:-.055em !important;
}
#aicone .vision-word,
#aicone .vision-word.font-gothic,
#aicone .vision-word.font-mincho,
#aicone .vision-word.font-script,
#aicone .vision-word.font-display {
  min-width:0;
  min-height:1.02em;
  overflow:visible;
  white-space:nowrap;
  font-size:1em !important;
  line-height:.9 !important;
  letter-spacing:-.055em !important;
}
.phrase-emphasis {
  color:#fff;
  font-size:1.16em;
  font-weight:760;
  letter-spacing:.01em;
}
.phrase-emphasis--rhythm { line-height:1.25; }
.phrase-emphasis--0 { font-size:1.18em; }
.phrase-emphasis--1 { font-size:1.1em; }
.phrase-emphasis--2 { font-size:1.14em; }
.aicone-copy .lead,.aicone-copy .aicone-detail { text-wrap:pretty; }

/* The inline page stylesheet applies content-visibility to each chapter's
   inner .wrap. Applying paint containment to section.block itself clips the
   deliberately overscanned diagonal .secskew background. */
.life-event,.research-findings article,.bansou-points article,.recent-news-row,.unified-media-card {
  will-change:auto !important;
}

/* Keep copy and functional labels above the legibility floor on both layouts. */
#hdr nav.menu a { font-size:clamp(.75rem,.8vw,.86rem) !important; }
#hdr .brand small { font-size:.68rem !important; }
.social-card__copy b,.social-card__action,.life-phase,.research-meta dt { font-size:.75rem !important; }
.research-long,.research-findings p,.life-body p,.profile-honour__copy p { font-size:max(.84rem,13px) !important; }

/* A clear two-line reading instead of an accidental wrap. */
.contact-heading .sectitle { line-height:1.03 !important; text-wrap:initial !important; }
.contact-heading .contact-line { display:block; white-space:nowrap; }
.contact-heading .secsub { max-width:32ch !important; line-height:1.9 !important; text-wrap:pretty; }

@media (min-width:900px) {
  #contact.block>.wrap {
    grid-template-columns:400px minmax(0,1fr) !important;
    column-gap:40px !important;
  }
}

/* Restore the fuller chronology without turning it back into a card wall. */
#profile-area .life-list {
  display:grid !important;
  grid-template-columns:repeat(5,minmax(220px,1fr)) !important;
  gap:0 !important;
  overflow-x:auto;
  padding:20px 0 8px;
  border-top:1px solid rgba(201,184,255,.4);
  scrollbar-width:thin;
}
#profile-area .life-event,
#profile-area .life-event:nth-child(odd),
#profile-area .life-event:nth-child(even) {
  min-height:238px !important;
  padding:18px 20px !important;
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.16) !important;
  background:linear-gradient(180deg,rgba(8,14,22,.62),rgba(8,14,22,.28)) !important;
}
#profile-area .life-event:last-child { border-right:0 !important; }
#profile-area .life-year { font-size:clamp(1.55rem,2.2vw,2.45rem) !important; }
#profile-area .life-body p { font-size:.84rem !important; line-height:1.76 !important; }

/* The research chapter keeps readable type without forcing its copy and proof
   grid into one viewport. */
@media (min-width:1200px) and (min-height:780px) {
  #research.block {
    height:auto !important;
    min-height:960px !important;
    padding:70px 0 38px !important;
  }
  #research.block>.wrap {
    display:flex !important;
    flex-direction:column;
    height:auto;
  }
  #research .section-heading { flex:0 0 auto; margin-bottom:10px !important; }
  #research .sectitle { font-size:clamp(2.45rem,3.9vw,4.4rem) !important; margin-bottom:0 !important; }
  #research .section-index { font-size:clamp(4.6rem,7.4vw,7rem) !important; }
  #research-area { display:flex; flex:none; min-height:0; flex-direction:column; }
  #research .research-stage {
    flex:none;
    min-height:520px !important;
    grid-template-columns:minmax(360px,.88fr) minmax(560px,1.12fr) !important;
    gap:clamp(32px,4.8vw,72px) !important;
  }
  #research .research-question { margin-bottom:18px !important; font-size:clamp(2.25rem,3.25vw,3.75rem) !important; }
  #research .research-copy .lead { font-size:1rem !important; line-height:1.66 !important; }
  #research .research-long {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    margin-top:8px !important;
    font-size:.86rem !important;
    line-height:1.62 !important;
  }
  #research .research-meta { margin-top:10px !important; }
  #research .research-meta dt { font-size:.72rem !important; }
  #research .research-meta dd { font-size:.84rem !important; line-height:1.5 !important; }
  #research .research-copy .more {
    min-height:44px !important;
    height:44px !important;
    margin-top:10px !important;
    padding:0 22px !important;
  }
  #research .research-collage { min-height:0 !important; height:min(40vh,356px) !important; }
  #research .research-findings { flex:0 0 auto; margin-top:10px !important; }
  #research .research-findings article { padding:13px 22px 15px !important; }
  #research .research-findings article>span { margin-bottom:7px !important; }
  #research .research-findings h3 { margin-bottom:5px !important; font-size:clamp(1.2rem,1.45vw,1.55rem) !important; }
  #research .research-findings p { font-size:.84rem !important; line-height:1.62 !important; }
}

/* Detail pages: use the width of the screen and reveal the Firefly film. */
body.detail-editorial .detail-master-film {
  filter:saturate(.94) contrast(1.01) brightness(1.03) !important;
  object-fit:cover !important;
  object-position:center !important;
}
body.detail-editorial .detail-master-film.is-ready { opacity:.64 !important; }
body.detail-editorial section:not(.hero)::after {
  background:
    linear-gradient(90deg,rgba(2,10,15,.5) 0%,rgba(2,10,15,.32) 40%,rgba(2,10,15,.12) 70%,rgba(2,10,15,.06) 100%),
    linear-gradient(180deg,rgba(2,10,15,.08),rgba(2,10,15,.16)) !important;
}
body.detail-tutoring section:not(.hero)::after {
  background:linear-gradient(180deg,rgba(2,10,15,.12),rgba(2,10,15,.22)) !important;
}
body.detail-tutoring section>.wrap,
body.detail-tutoring .hero-inner {
  text-shadow:0 2px 24px rgba(0,0,0,.82);
}
body.detail-editorial section>.wrap,
body.detail-editorial footer>.wrap {
  width:min(1540px,calc(100vw - 42px));
  max-width:1540px !important;
  padding-inline:clamp(20px,3vw,48px) !important;
}
body.detail-research .badge,
body.detail-research .detail-section-word {
  min-height:1.5em;
  overflow:visible;
  white-space:nowrap;
  font-size:clamp(1.1rem,1.25vw,1.32rem) !important;
  line-height:1.25 !important;
}
body.detail-research .disc h3 { font-size:clamp(1.55rem,2.2vw,2.15rem) !important; }
body.detail-research .disc p { font-size:clamp(1rem,1.12vw,1.12rem) !important; line-height:1.9; }
body.detail-editorial section p b,
body.detail-editorial section p strong {
  color:#fff;
  font-size:1.1em;
  line-height:1.35;
}

/* Generated concept footage always fills its editorial frame. Existing
   photographs and official screenshots intentionally keep their own ratios. */
.firefly-loop-media,
.research-collage .firefly-loop-media,
body.detail-research .firefly-research-visual.firefly-loop-media {
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  aspect-ratio:16/9;
  object-fit:cover !important;
  object-position:center !important;
  background:#031014;
}
.firefly-loop-media:not(.is-ready) { filter:saturate(.88) contrast(1.02); }

@media (max-width:760px) {
  .site-atmosphere-film {
    width:100vw !important;
  }
  .site-atmosphere-film.is-ready { opacity:.58 !important; }
  .firefly-loop-media { aspect-ratio:9/16; max-height:82svh; }
  #research .research-collage {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    height:auto !important;
    min-height:0 !important;
  }
  #research .research-collage figure {
    overflow:hidden !important;
    transform:none !important;
  }
  #research .research-collage .rc-main {
    display:block !important;
    grid-column:1/-1;
    grid-row:auto !important;
  }
  #research .research-collage .rc-lab,
  #research .research-collage .rc-micro {
    display:block !important;
  }
  #research .research-collage .rc-main .firefly-loop-media { aspect-ratio:4/3; }
  #research .research-collage .rc-lab .firefly-loop-media,
  #research .research-collage .rc-micro .firefly-loop-media { aspect-ratio:1/1; }
  .secskew { border-top-width:2px !important; }
  #aicone .vision-title {
    grid-template-columns:1fr 1.1fr !important;
    font-size:clamp(2.25rem,11.4vw,3.45rem) !important;
    gap:.08em .14em !important;
  }
  #aicone .vision-word { white-space:nowrap; }
  .contact-heading .sectitle { font-size:clamp(2.45rem,12vw,3.85rem) !important; }
  #profile-area .life-list { grid-template-columns:1fr !important; overflow:visible; }
  #profile-area .life-event { min-height:0 !important; border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.14) !important; }
  body.detail-editorial .detail-master-film.is-ready { opacity:.56 !important; }
  body.detail-editorial section:not(.hero)::after {
    background:linear-gradient(180deg,rgba(2,10,15,.34),rgba(2,10,15,.2) 58%,rgba(2,10,15,.32)) !important;
  }
  body.detail-tutoring section:not(.hero)::after {
    background:linear-gradient(180deg,rgba(2,10,15,.14),rgba(2,10,15,.24)) !important;
  }
  body.detail-editorial section>.wrap,body.detail-editorial footer>.wrap { width:calc(100vw - 24px); padding-inline:12px !important; }
  #hdr nav.menu a { font-size:.75rem !important; }
  #hdr .brand small { font-size:.65rem !important; }
  .herotext .k,
  .hero-focus,
  .hero-social-grid .social-card__copy b,
  .hero-social-grid .social-card__action,
  .life-phase,
  .research-meta dt { font-size:.72rem !important; }
  body.detail-editorial .detail-section-word,
  body.detail-editorial .kinetic-banner,
  body.detail-editorial .rcap { font-size:.75rem !important; }
  .phrase-emphasis--0 { font-size:1.14em; }
  .phrase-emphasis--1 { font-size:1.08em; }
  .phrase-emphasis--2 { font-size:1.11em; }
}

/* The legacy home layout switches at 820px. Keep only its text floor active
   between the phone layout and that breakpoint; layout rules stay unchanged. */
@media (min-width:761px) and (max-width:820px) {
  .herotext .k,
  .hero-focus,
  .hero-social-grid .social-card__copy b,
  .hero-social-grid .social-card__action,
  .life-phase,
  .research-meta dt { font-size:.72rem !important; }
}

@media (prefers-reduced-motion:reduce) {
  #aicone .vision-word { min-height:auto; }
}