/* 2026-10-12 — home page refresh after the owner's review.
   Loaded last. Hero spacing, table of contents, fixed statement typeface,
   lighter AIconication veil, three recent news rows, YouTube carousel,
   era-by-era profile, and the name-first loader. */

/* ---- Loader: two lines (name / AIconication) and a drawn mark ---- */
#load { display:grid !important; place-items:center; }
#load .llabel {
  position:static !important;
  width:auto !important;
  transform:none !important;
  font-size:clamp(3rem,8.4vw,7.6rem) !important;
  line-height:1 !important;
  letter-spacing:.06em !important;
  animation:load-name .9s cubic-bezier(.2,.75,.2,1) both;
}
#load .llabel span {
  margin-top:22px !important;
  color:#9ef2e6 !important;
  font-family:var(--sans) !important;
  font-size:clamp(.78rem,1.3vw,1.08rem) !important;
  font-weight:750 !important;
  letter-spacing:.42em !important;
  animation:load-name .9s .18s cubic-bezier(.2,.75,.2,1) both;
}
#load .lmark {
  position:relative;
  width:min(26vw,150px);
  aspect-ratio:1;
  margin-bottom:clamp(22px,4vh,40px);
  transform-style:preserve-3d;
  animation:load-mark-turn 6s linear infinite;
}
#load .lmark i {
  position:absolute;
  inset:0;
  border:1.5px solid rgba(142,240,226,.78);
  border-radius:50%;
  box-shadow:0 0 18px rgba(70,230,211,.22);
}
#load .lmark i:nth-child(1) { transform:rotateX(66deg); }
#load .lmark i:nth-child(2) { transform:rotateX(66deg) rotateY(60deg); border-color:rgba(190,170,255,.7); }
#load .lmark i:nth-child(3) { transform:rotateX(66deg) rotateY(120deg); border-color:rgba(255,255,255,.55); }
#load .lmark b {
  position:absolute;
  left:50%;
  top:50%;
  width:14%;
  height:14%;
  transform:translate(-50%,-50%);
  background:#eafffb;
  border-radius:50%;
  box-shadow:0 0 22px #64dfcf,0 0 60px rgba(100,223,207,.5);
  animation:lbeacon 1.3s ease-in-out infinite;
}
#load .lwrap { left:50% !important; right:auto !important; width:min(420px,80vw); transform:translateX(-50%); }
#load .lbar { display:block !important; }
#load .lmeta { text-align:center; }
#load .lmeta b { position:static !important; display:block; margin-top:8px; font-size:1.6rem !important; }
@keyframes load-name { from { opacity:0; transform:translateY(18px); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes load-mark-turn { to { transform:rotateY(360deg); } }
@media (max-width:600px) { #load .llabel { font-size:clamp(2.6rem,15vw,4.4rem) !important; } #load .lmark { width:34vw; } }
@media (prefers-reduced-motion:reduce) { #load .lmark, #load .llabel, #load .llabel span, #load .lmark b { animation:none !important; } }

/* ---- Hero: breathing room between the elements, larger icon ---- */
.herotext { gap:0; }
.herotext .avatar {
  width:clamp(96px,8.6vw,124px) !important;
  height:clamp(96px,8.6vw,124px) !important;
  margin-bottom:clamp(22px,2.6vw,34px) !important;
  border-radius:6px !important;
}
.herotext .k { margin-bottom:clamp(18px,2vw,26px) !important; }
.herotext h1 { margin-top:0 !important; }
.herotext h1 span { margin-top:clamp(18px,1.8vw,24px) !important; }
.herotext #t-tag { margin-top:clamp(18px,1.9vw,26px) !important; }
.hero-focus { margin-top:clamp(20px,2.2vw,30px) !important; }
.hero-social-grid { margin-top:clamp(30px,3.4vw,46px) !important; gap:14px !important; }
.hero-social-grid .social-card { position:relative; cursor:pointer; }
/* The whole card is the link; a drawn arrow appears on hover instead of a label. */
.hero-social-grid .social-card__go {
  position:absolute;
  right:12px;
  bottom:10px;
  width:26px;
  height:2px;
  background:var(--teal);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .25s ease,transform .25s ease;
}
.hero-social-grid .social-card__go::after {
  content:"";
  position:absolute;
  right:0;
  top:-4px;
  width:8px;
  height:8px;
  border-top:2px solid var(--teal);
  border-right:2px solid var(--teal);
  transform:rotate(45deg);
}
.hero-social-grid .social-card:hover .social-card__go,
.hero-social-grid .social-card:focus-visible .social-card__go { opacity:1; transform:none; }
.hero-social-grid .social-card:focus-visible { outline:3px solid var(--teal); outline-offset:4px; }
@media (min-width:1000px) and (max-height:820px) {
  .herotext .avatar { width:84px !important; height:84px !important; margin-bottom:16px !important; }
  .herotext .k { margin-bottom:12px !important; }
  .herotext h1 { font-size:clamp(3rem,6vw,5.6rem) !important; }
  .hero-social-grid { margin-top:22px !important; }
}
@media (max-width:760px) {
  .herotext { padding-top:70px !important; }
  .herotext .avatar { width:84px !important; height:84px !important; margin-bottom:16px !important; }
  .herotext .k { margin-bottom:12px !important; }
  .herotext #t-tag { margin-top:12px !important; }
  .hero-focus { margin-top:14px !important; }
  .hero-social-grid { margin-top:20px !important; gap:8px !important; }
  .hero-social-grid .social-card__go { display:none; }
}

/* ---- Table of contents (the chapter right after the room) ---- */
#guide.block { min-height:0 !important; padding:clamp(56px,7vw,96px) 0 !important; }
#guide .secskew { --s1:rgba(8,14,22,.9); --s2:rgba(5,9,15,.85); --section-line:rgba(126,241,223,.6); }
.guide-title {
  margin:0 0 clamp(22px,3vw,36px);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.55rem,3vw,2.5rem);
  line-height:1.3;
  text-wrap:balance;
}
.guide-list {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.guide-list a {
  display:grid;
  gap:6px;
  min-height:150px;
  padding:18px 18px 20px;
  border:1px solid rgba(255,255,255,.2);
  border-top:2px solid var(--teal);
  background:rgba(4,11,16,.8);
  color:inherit;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.guide-list a:hover,.guide-list a:focus-visible { transform:translateY(-4px); border-color:var(--teal); background:rgba(70,230,211,.1); }
.guide-list a:focus-visible { outline:3px solid var(--teal); outline-offset:3px; }
.guide-no { color:var(--teal); font:700 .66rem/1 var(--sans); letter-spacing:.24em; }
.guide-list b { margin-top:auto; font-size:clamp(1.02rem,1.25vw,1.2rem); line-height:1.35; }
.guide-list small { color:var(--muted); font-size:.74rem; line-height:1.5; }
@media (max-width:1000px) { .guide-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px) {
  .guide-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .guide-list a { min-height:112px; padding:14px; }
  .guide-list li:first-child { grid-column:1 / -1; }
}

/* ---- WHO I AM: one fixed typeface, the chapter film breathing behind ---- */
.identity-statement--fixed {
  font-family:var(--news-serif) !important;
  font-weight:700 !important;
  letter-spacing:-.015em !important;
  text-transform:none !important;
}
.identity-statement--fixed .identity-line { display:block; white-space:normal; }
#identity .secskew { --s1:rgba(8,14,22,.66); --s2:rgba(6,10,16,.6); }
body[data-chapter="identity"] .site-atmosphere-film.is-ready { opacity:.5 !important; }

/* ---- AIconication: let the film show through, keep the words readable ---- */
body[data-chapter="aicone"] .site-atmosphere-film.is-ready { opacity:.6 !important; }
#aicone .secskew {
  background:
    linear-gradient(90deg,rgba(2,7,11,.62),rgba(2,7,11,.3) 52%,rgba(2,7,11,.48)),
    linear-gradient(180deg,rgba(5,20,27,.22),rgba(5,13,21,.42)) !important;
}
#aicone .aicone-copy { padding:clamp(18px,2vw,28px) clamp(18px,2vw,28px) clamp(18px,2vw,28px) 0; }
#aicone .lead,#aicone .aicone-detail,#aicone .aicone-ja { text-shadow:0 2px 18px rgba(0,0,0,.95),0 0 40px rgba(0,0,0,.8); }
#aicone .lead { font-size:clamp(1.02rem,1.3vw,1.22rem) !important; }
.aifull-cta { min-height:60px; padding:0 26px !important; font-size:.98rem !important; letter-spacing:.06em !important; }

/* ---- Projects: the two routes into the sites are the primary buttons ---- */
.project-links a {
  min-height:60px !important;
  padding:0 24px !important;
  font-size:1rem !important;
  font-weight:700;
}
.project-links a:last-child {
  color:#03110f;
  border-color:transparent !important;
  background:linear-gradient(115deg,#8ff5e6,#3fd2c0) !important;
  box-shadow:0 18px 38px -14px rgba(70,230,211,.6);
}
.project-links a:last-child:hover,.project-links a:last-child:focus-visible { background:linear-gradient(115deg,#c4fff6,#6eeadb) !important; }

/* ---- Media: three latest rows, no expander ---- */
.recent-news-list.collapsed .recent-news-row:nth-child(n+4) { display:none !important; }
#nbmore { display:none !important; }
#news.block { padding-bottom:clamp(56px,6vw,90px) !important; }

/* ---- YouTube: one fixed screen, a horizontal shelf underneath, less height ---- */
#youtube { padding:clamp(40px,5vw,70px) 0 !important; }
.channel-head { margin-bottom:22px !important; }
.channel-head h2 { font-size:clamp(44px,6vw,88px) !important; }
.channel-screen { max-width:1100px; margin:0 auto; }
.channel-now { max-width:1100px; margin:0 auto; padding:14px 0 18px !important; }
.channel-videos {
  display:flex !important;
  gap:14px !important;
  margin-top:16px !important;
  padding:4px 4px 14px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:rgba(157,227,211,.6) rgba(255,255,255,.08);
}
.channel-videos .channel-video {
  flex:0 0 min(300px,72vw);
  scroll-snap-align:start;
}
.channel-videos .channel-video strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:1.6; }
@media (max-width:720px) {
  .channel-videos .channel-video { display:block; flex-basis:min(240px,70vw); }
  .channel-video-copy { padding:10px 12px 12px; }
}

/* ---- Research: the real crab, a bigger single route into the page ---- */
#research .rc-main figcaption.rc-credit {
  left:16px !important;
  bottom:14px !important;
  font-size:.58rem !important;
  letter-spacing:.06em !important;
  opacity:.82;
}
#research .research-copy .more,
#research .research-copy .more.is-visible {
  min-height:68px !important;
  padding:18px 34px !important;
  font-size:1.14rem !important;
}
@media (min-width:1200px) and (min-height:780px) {
  #research .research-copy .more { height:auto !important; min-height:64px !important; }
}

/* ---- Tutoring: the route into the page matches the research button ---- */
#bansou .bansou-copy .more { min-height:64px !important; font-size:1.08rem !important; }

/* ---- Profile: a stage that changes as the reader moves through the years ---- */
.era-stage { display:none; }
@media (min-width:1000px) {
  .era-stage { display:block; position:relative; grid-column:1 / -1; width:100%; margin:clamp(28px,4vw,52px) 0 clamp(40px,5vw,72px); }
  .era-stage__panel {
    position:sticky;
    top:clamp(84px,10vh,120px);
    display:grid;
    grid-template-columns:minmax(0,1fr) 180px;
    gap:40px;
    min-height:min(72vh,640px);
    padding:clamp(24px,3vw,44px);
    border:1px solid rgba(201,184,255,.35);
    background:linear-gradient(135deg,rgba(13,10,24,.9),rgba(7,12,22,.86));
    box-shadow:0 30px 80px rgba(0,0,0,.5);
  }
  .era-stage__views { position:relative; min-height:420px; }
  .era-view {
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
    gap:36px;
    align-items:center;
    opacity:0;
    transform:translateY(26px);
    filter:blur(6px);
    pointer-events:none;
    transition:opacity .6s ease,transform .8s cubic-bezier(.2,.75,.2,1),filter .7s ease;
  }
  .era-view.is-active { opacity:1; transform:none; filter:none; pointer-events:auto; }
  .era-view__phase { grid-column:1; color:#c9b8ff; font:700 .66rem/1.4 var(--sans); letter-spacing:.28em; }
  .era-view__year { grid-column:1; margin:10px 0 14px; font-family:var(--serif); font-size:clamp(3.2rem,5.6vw,6.4rem); line-height:.95; letter-spacing:-.03em; }
  .era-view h3 { grid-column:1; margin:0 0 14px; font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.4vw,2.4rem); line-height:1.3; }
  .era-view__text { grid-column:1; max-width:52ch; color:#c7d3dc; font-size:clamp(.98rem,1.1vw,1.1rem); line-height:1.95; }
  .era-view__link { grid-column:1; justify-self:start; margin-top:16px; padding:10px 0; border-bottom:1px solid var(--teal); color:#eafffb; font-size:.84rem; font-weight:700; letter-spacing:.04em; }
  .era-view figure { grid-column:2; grid-row:1 / span 5; align-self:stretch; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.16); background:#05090d; }
  .era-view figure img { width:100%; height:100%; min-height:300px; object-fit:cover !important; filter:saturate(.85); }
  .era-nav { display:grid; align-content:center; gap:8px; margin:0; padding:0 0 0 22px; border-left:1px solid rgba(255,255,255,.16); list-style:none; }
  .era-nav__item {
    width:100%;
    padding:10px 12px;
    border:1px solid transparent;
    background:transparent;
    color:var(--muted);
    font:600 .82rem/1.4 var(--sans);
    letter-spacing:.06em;
    text-align:left;
    cursor:pointer;
    transition:color .25s ease,border-color .25s ease,background .25s ease;
  }
  .era-nav__item:hover { color:#fff; }
  .era-nav__item.is-active { color:#fff; border-color:rgba(201,184,255,.55); background:rgba(201,184,255,.1); }
  .era-nav__item:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
  .era-stage__triggers { position:relative; margin-top:calc(-1 * min(72vh,640px)); pointer-events:none; }
  .era-trigger { height:min(72vh,640px); }
  .era-trigger:first-child { height:calc(min(72vh,640px) * .5); }
  /* On wide screens the stage tells the story; the vertical list is the printable record. */
  #profile-area .life-list { display:none !important; }
}
@media (prefers-reduced-motion:reduce) {
  .era-view { transition:none; }
}

/* Phrase-based wrapping can leave one long phrase unbroken on a phone. */
@media (max-width:760px) {
  #aicone .lead,#aicone .aicone-detail,.research-findings p,.phrase-emphasis { word-break:normal !important; overflow-wrap:anywhere !important; }
}