/* 2026-10-27 visual refresh (shared by / and /en/), loaded last.
   1. The background film shows through every section at about the hero's strength;
      only text blocks sit on dark panels (contrast 4.5:1 or more, body 15px or more).
   2. Wide screens use the full width; phones keep at least 16px of gutter.
   3. Film buttons (the whole card is a looping muted film with the label on top).
   4. Site guide map, research photo wall, tutoring record, SNS blocks.
   5. Profile ages set in the editorial serif.
   6. Scroll entrances (assets/refresh-20261027.js), off for reduced motion. */

:root {
  --rf-gutter: clamp(18px, 3.2vw, 64px);
  --rf-serif: "Old Standard TT", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --rf-mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --rf-panel: linear-gradient(135deg, rgba(4, 9, 15, .82), rgba(4, 9, 15, .7));
  --rf-panel-line: rgba(255, 255, 255, .1);
  --rf-ivory: #f5f0e6;
  --rf-gold: #cdb88a;
}

/* ---------- 1. the film shows through every section ---------- */
html body section.block > .secskew {
  background: linear-gradient(180deg, rgba(2, 6, 10, .12), rgba(2, 6, 10, .26)) !important;
  box-shadow: none !important;
}
html body section.block > .secskew .kj { opacity: .5; }
html body #youtube.block { background: transparent !important; border-color: transparent !important; }
body[data-chapter] .site-atmosphere-film.is-ready { opacity: .58 !important; }
@media (max-width: 760px) {
  body[data-chapter] .site-atmosphere-film.is-ready { opacity: .45 !important; }
}

/* text sits on panels; the film stays visible around them */
html body :is(
  #identity .personal-intro > div:first-child,
  #news .compact-heading,
  #projects .compact-heading,
  #profile .story-intro__pin,
  #profile .story-copy,
  #research .research-copy,
  #research .research-findings,
  #bansou .bansou-copy,
  #youtube .channel-now,
  #youtube .social-section-head,
  .mobile-detail-entry > p,
  .entry-teaching-line
) {
  background: var(--rf-panel);
  border: 1px solid var(--rf-panel-line);
  border-radius: 4px;
  padding: clamp(18px, 2.2vw, 32px);
}
html body #profile .story-stats { background: rgba(4, 9, 15, .76); }
html body #research .research-findings { margin-top: 30px; }
html body #research .research-findings article { border-color: rgba(125, 224, 213, .18); }
html body .entry-teaching-line { padding: 16px; }
html body .entry-topics span,
html body .entry-credit { background: rgba(4, 9, 15, .76); }
html body .entry-credit { display: inline-block; padding: 4px 8px; }
html body .entry-video { background: rgba(4, 9, 15, .78); padding: 0 0 12px; }
html body .entry-video > small,
html body .entry-video > b { padding-inline: 10px; }
html body .media-story { background: rgba(4, 9, 15, .82); border: 1px solid var(--rf-panel-line); border-radius: 6px; overflow: hidden; }
html body .media-story figure { border-radius: 0; }
html body .media-story > div { padding: 14px 16px 18px; }
html body .media-story > div > p { font-size: .72rem; }
html body .media-archive summary { background: rgba(4, 9, 15, .76); padding-inline: 16px; }
html body .story-shot figcaption { display: inline-block; margin-top: 6px; padding: 4px 8px; background: rgba(4, 9, 15, .78); font-size: .72rem; color: #dfe7ee; }
html body section.block :is(h2, .sectitle, .eyebrow, .identity-eyebrow, .channel-kicker) {
  text-shadow: 0 2px 22px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .65);
}
html body #youtube .note-wall .yt-note,
html body #youtube .social-directory a { background: rgba(6, 11, 18, .86); }

@media (max-width: 600px) {
  html body .media-story h3 { font-size: .9rem; line-height: 1.7; }
  html body .media-story > div > p { font-size: .68rem; }
  html body .compact-heading > p { font-size: .9rem; }
}

/* ---------- 2. full width on wide screens, real gutters on phones ---------- */
html body :is(#identity, #news, #profile, #projects, #research, #bansou, #youtube).block > .wrap {
  max-width: none !important;
  width: 100% !important;
  padding-inline: var(--rf-gutter) !important;
}
html body #news > .wrap { padding-left: var(--rf-gutter) !important; padding-right: var(--rf-gutter) !important; }
@media (min-width: 1000px) {
  html body .personal-portrait { max-width: min(640px, 40vw); }
  html body .personal-intro { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  .media-stories { gap: clamp(20px, 1.6vw, 30px); }
}

/* ---------- 3. film buttons ---------- */
.vcta,
.sns-banner { --accent: #5fe9db; --accent-ink: #04110f; --cut: 22px; }
.vcta--tutoring { --accent: #ffc46b; --accent-ink: #1c1205; }
.sitenode--hub.vcta { --accent: #ff9f43; --accent-ink: #1d0d00; }
.vcta {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(320px, 34vw, 540px);
  margin-top: clamp(28px, 4vw, 56px);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #05080d;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.vcta-media {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background: #05080d;
}
.vcta-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .66) 36%, rgba(0, 0, 0, .14) 66%, rgba(0, 0, 0, .04) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .7) 0%, transparent 48%);
}
html body .vcta-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: scale(1.01);
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.vcta-sweep {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(145, 222, 214, .16) 48%, rgba(255, 255, 255, .1) 50%, transparent 60%);
  transform: translateX(-100%);
  pointer-events: none;
}
.vcta-corners {
  position: absolute;
  z-index: 1;
  inset: 18px;
  pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 30px 1px,
    linear-gradient(var(--accent), var(--accent)) top left / 1px 30px,
    linear-gradient(var(--accent), var(--accent)) bottom right / 30px 1px,
    linear-gradient(var(--accent), var(--accent)) bottom right / 1px 30px;
  background-repeat: no-repeat;
  transition: inset .3s ease;
}
.vcta::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  pointer-events: none;
  transition: border-color .3s ease;
}
.vcta-content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 14px;
  max-width: 46rem;
  padding: clamp(28px, 4vw, 64px);
}
.vcta-meta {
  color: var(--accent);
  font: 700 .76rem/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .16em;
}
.vcta-label {
  font-family: var(--rf-serif);
  font-size: clamp(1.9rem, 1.1rem + 3vw, 4.2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .7);
}
.vcta-sub {
  max-width: 36em;
  color: #e6edf3;
  font-size: clamp(.95rem, 1.1vw, 1.12rem);
  line-height: 1.85;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}
.vcta-go {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 14px 22px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.vcta-go i { position: relative; display: block; width: 26px; height: 1px; background: currentColor; transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.vcta-go i::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.vcta:hover .vcta-media video,
.vcta:focus-visible .vcta-media video { transform: scale(1.06); }
.vcta:hover .vcta-sweep,
.vcta:focus-visible .vcta-sweep { transform: translateX(100%); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.vcta:hover .vcta-corners,
.vcta:focus-visible .vcta-corners { inset: 12px; }
.vcta:hover::after { border-color: var(--accent); }
.vcta:hover .vcta-go i,
.vcta:focus-visible .vcta-go i { width: 40px; }
.vcta:focus-visible { outline: none; }
.vcta:focus-visible::after { border: 3px solid var(--accent); }
@media (max-width: 760px) {
  .vcta { --cut: 16px; min-height: 440px; }
  .vcta-media::after { background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .62) 55%, rgba(0, 0, 0, .18) 100%); }
  .vcta-content { padding: 24px 20px 26px; gap: 12px; }
  .vcta-label { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .vcta-sub { font-size: .95rem; }
  .vcta-corners { inset: 12px; }
}

/* ---------- 4a. site guide map ---------- */
.sitemap { --c-self: #4ea8ff; --c-biz: #ff9f43; --c-app: #f6c453; --c-store: #ff7eb6; }
.sitemap [data-group="self"] { --g: var(--c-self); }
.sitemap [data-group="biz"] { --g: var(--c-biz); }
.sitemap [data-group="app"] { --g: var(--c-app); }
.sitemap [data-group="store"] { --g: var(--c-store); }
.sitemap-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0 0 clamp(26px, 3vw, 44px);
  padding: 12px 18px;
  list-style: none;
  background: rgba(4, 9, 15, .8);
  border: 1px solid var(--rf-panel-line);
  border-radius: 4px;
}
.sitemap-legend li { display: flex; align-items: center; gap: 9px; color: #e8eff5; font-size: .9rem; }
.sitemap-legend li::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--g); box-shadow: 0 0 12px var(--g); }
.sitemap-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(0, 2.7fr);
  grid-template-areas: "self hub" "kids kids";
  gap: clamp(70px, 6vw, 110px) clamp(56px, 5vw, 96px);
  align-items: center;
}
.sitemap-lines { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.sitemap-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--li, 0) * 120ms + .2s); }
.sitemap-flow { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 15; opacity: 0; animation: rf-flow 1.8s linear infinite; }
.sitemap-dot { opacity: 0; transition: opacity .4s ease 1.1s; }
.sitemap.is-drawn .sitemap-line { stroke-dashoffset: 0; }
.sitemap.is-drawn .sitemap-flow { opacity: .8; transition: opacity .6s ease 1.5s; }
.sitemap.is-drawn .sitemap-dot { opacity: 1; }
@keyframes rf-flow { to { stroke-dashoffset: -18; } }
.sitenode {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: rgba(6, 11, 18, .9);
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 3px solid var(--g);
  border-radius: 6px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
a.sitenode:not(.vcta):hover,
a.sitenode:not(.vcta):focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--g) 70%, transparent);
  box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--g) 55%, transparent);
}
a.sitenode:not(.vcta):focus-visible { outline: 3px solid var(--g); outline-offset: 4px; }
.sitenode-shot { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1520; border-bottom: 1px solid rgba(255, 255, 255, .1); }
html body .sitenode-shot img,
html body .sitenode-browser img { display: block; width: 100%; height: 100%; object-fit: cover !important; object-position: top center !important; transition: transform .6s ease; }
a.sitenode:hover .sitenode-shot img { transform: scale(1.03); }
.sitenode-copy { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 20px 20px; }
.sitenode-role { margin: 0; color: var(--g); font-size: .8rem; font-weight: 700; letter-spacing: .04em; line-height: 1.6; }
.sitenode-here { display: inline-block; margin-right: 10px; padding: 1px 8px; background: var(--g); color: #03101d; font-size: .74rem; letter-spacing: .06em; }
html body .sitenode :is(h3, .sitenode-title) { margin: 2px 0 4px; color: #fff; font-family: var(--rf-serif); font-size: 1.55rem; font-weight: 400; line-height: 1.3; letter-spacing: -.01em; }
.sitenode-desc { margin: 0; color: #d6e0e8; font-size: .92rem; line-height: 1.8; }
.sitenode-domain { margin-top: auto; padding-top: 10px; color: #a7b9c7; font-size: .8rem; overflow-wrap: anywhere; }
.sitenode--self { grid-area: self; }
.sitenode--hub { grid-area: hub; }
.sitemap-children { grid-area: kids; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: stretch; }
/* the hub is the one big site: a film button with the real screen inside */
.sitenode--hub.vcta {
  display: block;
  margin: 0;
  min-height: clamp(380px, 31vw, 560px);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 3px 0 var(--g), 0 40px 90px -40px rgba(0, 0, 0, .95);
}
.sitenode-hub-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .95fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  min-height: inherit;
  padding: clamp(28px, 3.4vw, 60px);
}
.sitenode--hub .sitenode-copy { padding: 0; gap: 12px; align-items: flex-start; }
.sitenode-title { display: block; }
html body .sitenode--hub .sitenode-title { font-size: clamp(2.6rem, 1.3rem + 3.6vw, 5.2rem); line-height: 1; letter-spacing: -.025em; text-shadow: 0 2px 24px rgba(0, 0, 0, .7); }
.sitenode--hub .sitenode-desc { max-width: 30em; color: #eef3f7; font-size: clamp(1rem, 1.15vw, 1.2rem); line-height: 1.9; text-shadow: 0 1px 12px rgba(0, 0, 0, .85); }
.sitenode-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sitenode-tags span { position: relative; padding: 4px 12px 4px 20px; border: 1px solid rgba(255, 255, 255, .24); background: rgba(0, 0, 0, .6); color: #f3f6f9; font-size: .84rem; font-weight: 700; line-height: 1.6; }
.sitenode-tags span::before { content: ""; position: absolute; left: 8px; top: 50%; width: 5px; height: 5px; background: var(--g); transform: translateY(-50%); }
.sitenode-browser { display: block; justify-self: end; width: 100%; max-width: 640px; overflow: hidden; background: #0b1520; border: 1px solid rgba(255, 255, 255, .2); border-radius: 6px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); transform: perspective(1200px) rotateY(-6deg); transition: transform .6s ease; }
.sitenode--hub:hover .sitenode-browser { transform: perspective(1200px) rotateY(0deg); }
.sitenode-browser-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(255, 255, 255, .07); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sitenode-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.sitenode-browser-bar i:nth-child(1) { background: #ff6961; }
.sitenode-browser-bar i:nth-child(2) { background: #ffbd2e; }
.sitenode-browser-bar i:nth-child(3) { background: #32d74b; }
.sitenode-browser-bar em { margin-left: 8px; color: #b3c2ce; font-size: .74rem; font-style: normal; }
html body .sitenode-browser img { height: auto; aspect-ratio: 16 / 10; }
@media (max-width: 1179px) {
  .sitemap-children { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .sitemap-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "self" "hub" "kids"; gap: 56px; }
  .sitenode--self { flex-direction: row; }
  .sitenode--self .sitenode-shot { flex: 0 0 38%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .1); }
  .sitenode-hub-inner { grid-template-columns: minmax(0, 1fr); }
  .sitenode-browser { justify-self: start; max-width: 520px; transform: none; }
}
@media (max-width: 600px) {
  .sitemap-legend { gap: 8px 16px; padding: 10px 12px; }
  .sitemap-legend li { font-size: .85rem; }
  .sitemap-stage { gap: 44px; }
  .sitenode--self { flex-direction: column; }
  .sitenode--self .sitenode-shot { flex: none; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .sitemap-children { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sitenode--hub.vcta { min-height: 0; }
  .sitenode-hub-inner { padding: 26px 20px 28px; }
  .sitenode-copy { padding: 16px 16px 18px; }
  html body .sitenode :is(h3, .sitenode-title) { font-size: 1.45rem; }
  .sitenode-desc { font-size: .92rem; }
}

/* ---------- 4b. research photo wall ---------- */
.research-wall { margin-top: clamp(40px, 5vw, 80px); }
.rw-head,
.tt-head {
  margin-bottom: clamp(16px, 2vw, 26px);
  padding: clamp(18px, 2.2vw, 30px);
  background: var(--rf-panel);
  border: 1px solid var(--rf-panel-line);
  border-radius: 4px;
}
.rf-kicker { margin: 0 0 10px; color: #8ff0e2; font: 700 .76rem/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .16em; }
.rw-head h3,
.tt-head h3 { margin: 0; color: #fff; font-family: var(--rf-serif); font-size: clamp(1.7rem, 2.8vw, 3rem); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; }
.rw-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, clamp(150px, 15vw, 290px));
  gap: clamp(6px, .8vw, 12px);
  margin-inline: calc(-1 * var(--rf-gutter));
}
.rw-tile { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: #0b1520; }
html body .rw-tile img,
html body .tt-photo img { display: block; width: 100%; height: 100%; object-fit: cover !important; object-position: center !important; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.rw-tile:hover img,
.tt-photo:hover img { transform: scale(1.05); }
.rw-tile figcaption,
.tt-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 14px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .88));
  color: #fff;
  font-size: .86rem;
  line-height: 1.6;
}
.rf-image-tag { position: absolute; top: 10px; left: 10px; padding: 2px 8px; background: rgba(0, 0, 0, .72); color: #fff; font-size: .72rem; letter-spacing: .08em; }
.rw-tile:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.rw-tile:nth-child(2) { grid-column: 3 / 4; grid-row: 1; }
.rw-tile:nth-child(3) { grid-column: 4 / 5; grid-row: 1; }
.rw-tile:nth-child(4) { grid-column: 5 / 6; grid-row: 1 / 3; }
.rw-tile:nth-child(5) { grid-column: 6 / 7; grid-row: 1; }
.rw-tile:nth-child(6) { grid-column: 3 / 5; grid-row: 2 / 4; }
.rw-tile:nth-child(7) { grid-column: 6 / 7; grid-row: 2; }
.rw-tile:nth-child(8) { grid-column: 1 / 2; grid-row: 3; }
.rw-tile:nth-child(9) { grid-column: 2 / 3; grid-row: 3; }
.rw-tile:nth-child(10) { grid-column: 5 / 7; grid-row: 3; }
.rw-tile:nth-child(n+11) { display: none; }
.rf-credit { display: inline-block; margin: 12px 0 0; padding: 6px 10px; background: rgba(4, 9, 15, .78); color: #c3d0da; font-size: .78rem; line-height: 1.7; }
@media (max-width: 999px) {
  .rw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, clamp(130px, 21vw, 220px)); }
  .rw-tile:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .rw-tile:nth-child(2) { grid-column: 3 / 4; grid-row: 1; }
  .rw-tile:nth-child(3) { grid-column: 4 / 5; grid-row: 1; }
  .rw-tile:nth-child(4) { grid-column: 3 / 4; grid-row: 2; }
  .rw-tile:nth-child(5) { grid-column: 4 / 5; grid-row: 2 / 5; }
  .rw-tile:nth-child(6) { grid-column: 1 / 3; grid-row: 3; }
  .rw-tile:nth-child(7) { grid-column: 3 / 4; grid-row: 3; }
  .rw-tile:nth-child(8) { grid-column: 1 / 2; grid-row: 4; }
  .rw-tile:nth-child(9) { grid-column: 2 / 3; grid-row: 4; }
  .rw-tile:nth-child(10) { grid-column: 3 / 4; grid-row: 4; }
}
@media (max-width: 600px) {
  .rw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 132px; }
  .rw-tile:nth-child(n) { grid-column: auto; grid-row: auto; }
  .rw-tile:nth-child(1),
  .rw-tile:nth-child(10) { grid-column: 1 / -1; }
  .rw-tile:nth-child(1) { grid-row: span 2; }
  .rw-tile figcaption { font-size: .8rem; padding: 26px 10px 8px; }
}

/* ---------- 4c. tutoring record ---------- */
.bansou-teaching { --tt: #ffc46b; margin-top: clamp(40px, 5vw, 80px); }
.bansou-teaching .rf-kicker { color: var(--tt); }
.tt-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 16px clamp(24px, 4vw, 64px); align-items: end; }
.tt-head .rf-kicker,
.tt-quote { grid-column: 1 / -1; }
.tt-intro { margin: 0; color: #dfe7ee; font-size: 1rem; line-height: 2; }
.tt-quote { margin: 4px 0 0; padding: 14px 20px; border-left: 3px solid var(--tt); background: linear-gradient(90deg, rgba(255, 196, 107, .14), transparent); color: #fff; font-family: var(--rf-serif); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.8; }
.tt-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, .8vw, 12px); margin-inline: calc(-1 * var(--rf-gutter)); }
.tt-photo { position: relative; min-width: 0; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #0b1520; }
.tt-photo-note { margin-top: 10px; }
.tt-records { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); margin-top: clamp(20px, 2.4vw, 36px); }
.tt-record,
.tt-steps-wrap,
.tt-bansou,
.tt-proofs { padding: clamp(20px, 2.2vw, 32px); background: var(--rf-panel); border: 1px solid var(--rf-panel-line); border-radius: 4px; }
.tt-record { border-top: 3px solid var(--tt); }
.tt-record__no { display: block; color: var(--tt); font-family: var(--rf-serif); font-size: clamp(2.2rem, 3vw, 3.2rem); line-height: 1; font-variant-numeric: lining-nums; }
.tt-record__en { margin: 14px 0 6px; color: #e9d3a8; font: 700 .72rem/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .14em; }
.tt-record h4 { margin: 0 0 10px; color: #fff; font-size: 1.2rem; font-weight: 700; line-height: 1.5; }
.tt-record p:last-child { margin: 0; color: #d3dde6; font-size: .95rem; line-height: 1.9; }
.tt-lower { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(12px, 1.4vw, 22px); margin-top: clamp(12px, 1.4vw, 22px); }
.tt-side { display: grid; gap: clamp(12px, 1.4vw, 22px); align-content: start; }
.tt-sub { margin: 0 0 14px; color: #fff; font-family: var(--rf-serif); font-size: 1.4rem; font-weight: 400; line-height: 1.4; }
.tt-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.tt-step { display: grid; grid-template-columns: 46px minmax(0, 10em) minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.tt-step span { color: var(--tt); font-family: var(--rf-serif); font-size: 1.3rem; font-variant-numeric: lining-nums; }
.tt-step b { color: #fff; font-size: 1rem; line-height: 1.6; }
.tt-step p { margin: 0; color: #d0dae3; font-size: .95rem; line-height: 1.85; }
.tt-bansou p { margin: 0; color: #d6e0e8; font-size: .95rem; line-height: 1.95; }
.tt-proofs ul { margin: 0; padding: 0; list-style: none; }
.tt-proofs a { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .1); color: inherit; text-decoration: none; transition: background .25s ease; }
.tt-proofs a:hover,
.tt-proofs a:focus-visible { background: rgba(255, 196, 107, .08); }
.tt-proof__date { color: var(--tt); font-size: .82rem; font-variant-numeric: tabular-nums; }
.tt-proof__copy b { display: block; color: #fff; font-size: .95rem; line-height: 1.6; }
.tt-proof__copy small { display: block; margin-top: 3px; color: #bccad6; font-size: .9rem; line-height: 1.7; }
.tt-proof__go { color: var(--tt); font-size: .8rem; white-space: nowrap; border-bottom: 1px solid currentColor; }
@media (max-width: 999px) {
  .tt-head,
  .tt-lower { grid-template-columns: minmax(0, 1fr); }
  .tt-records { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .tt-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-step { grid-template-columns: 34px minmax(0, 1fr); }
  .tt-step p { grid-column: 2; }
  .tt-proofs a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tt-proof__go { justify-self: start; }
  .tt-intro { font-size: .95rem; }
}

/* ---------- 4d. YouTube / Instagram / note blocks ---------- */
html body #youtube .sns-block { margin-top: clamp(56px, 7vw, 120px); }
html body #youtube .sns-block:first-child { margin-top: 0; }
.sns-banner--youtube { --accent: #e0222f; --accent-ink: #fff; }
.sns-banner--instagram { --accent: #c1187f; --accent-ink: #fff; }
.sns-banner--note { --accent: #41c9b4; --accent-ink: #041311; }
html body #youtube .sns-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(320px, 32vw, 520px);
  margin: 0 calc(-1 * var(--rf-gutter)) clamp(20px, 2.4vw, 36px);
  padding: clamp(28px, 4vw, 64px) var(--rf-gutter);
  overflow: hidden;
  background: #05080d;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
html body #youtube .sns-banner > :is(.channel-head, .ig-wall__head, .note-wall__head) {
  position: static !important;
  display: block !important;
  max-width: 48rem;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}
html body #youtube .sns-banner :is(h2, h3) {
  margin: 10px 0 16px !important;
  color: #fff;
  font-size: clamp(3.4rem, 8vw, 8rem) !important;
  line-height: .95 !important;
  letter-spacing: -.04em;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .6);
}
html body #youtube .sns-banner :is(.channel-kicker, .story-phase) { color: #fff; opacity: .9; }
html body #youtube .sns-banner :is(.channel-intro, p:not(.story-phase):not(.channel-kicker)) { max-width: 36em; color: #eef3f7; font-size: clamp(.95rem, 1.15vw, 1.15rem) !important; line-height: 1.85; text-shadow: 0 1px 14px rgba(0, 0, 0, .85); }
html body #youtube .sns-banner .sns-banner__link {
  position: static !important;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 14px 22px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: normal;
}
html body #youtube .sns-banner .sns-banner__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
html body #youtube .sns-banner .sns-banner__link i { display: none; }
html body #youtube .sns-banner:hover .vcta-media video { transform: scale(1.05); }
html body #youtube .sns-banner:hover .vcta-sweep { transform: translateX(100%); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
html body #youtube .sns-banner:hover .vcta-corners { inset: 12px; }
html body #youtube .sns-banner:focus-within { outline: 3px solid var(--accent); outline-offset: -3px; }
/* YouTube: the player and the list side by side across the full width */
@media (min-width: 1180px) {
  html body #youtube .sns-block--youtube {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(320px, 1fr);
    grid-template-areas: "banner banner" "screen list" "now list" "shorts shorts" "pod pod";
    column-gap: clamp(18px, 2vw, 32px);
    align-items: start;
  }
  html body #youtube .sns-block--youtube > .sns-banner { grid-area: banner; }
  html body #youtube .sns-block--youtube > .channel-screen { grid-area: screen; }
  html body #youtube .sns-block--youtube > .channel-now { grid-area: now; }
  html body #youtube .sns-block--youtube > .channel-videos { grid-area: list; display: flex; flex-direction: column; gap: 12px; margin: 0; }
  html body #youtube .sns-block--youtube > .shorts-wall { grid-area: shorts; }
  html body #youtube .sns-block--youtube > .pod-card { grid-area: pod; }
  html body #youtube .sns-block--youtube .channel-video { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; background: rgba(6, 11, 18, .88); }
  html body #youtube .sns-block--youtube .channel-video-copy strong { font-size: .9rem; }
  html body #youtube .sns-block--youtube .channel-video-copy small { font-size: .66rem; }
  html body #youtube .ig-wall.sns-block .ig-wall__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  html body #youtube .note-wall.sns-block .yt-notes__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
html body #youtube .sns-block--youtube .channel-screen { max-width: none; margin: 0; border-radius: 4px; }
html body #youtube .sns-block--youtube .channel-now { max-width: none; margin: 16px 0 0; }
html body #youtube .sns-block--youtube .pod-card { max-width: none; margin: clamp(28px, 3vw, 48px) 0 0; background: rgba(9, 14, 22, .86); }
html body #youtube .shorts-wall { margin-top: clamp(32px, 4vw, 56px); }
html body #youtube .ig-wall.sns-block { display: block; }
@media (min-width: 761px) {
  html body #youtube .ig-wall.sns-block .ig-wall__grid { display: grid; gap: clamp(6px, .8vw, 12px); margin-inline: calc(-1 * var(--rf-gutter)); }
  html body #youtube .note-wall.sns-block .yt-notes__grid { gap: clamp(12px, 1.4vw, 22px); }
}
@media (min-width: 761px) and (max-width: 1179px) {
  html body #youtube .ig-wall.sns-block .ig-wall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body #youtube .note-wall.sns-block .yt-notes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body #youtube .note-wall.sns-block .yt-note { display: block; }
}
@media (max-width: 760px) {
  html body #youtube .sns-banner { min-height: 380px; }
  html body #youtube .sns-banner .vcta-media::after { background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .6) 55%, rgba(0, 0, 0, .2) 100%); }
  html body #youtube .sns-banner :is(h2, h3) { font-size: clamp(2.8rem, 15vw, 4rem) !important; }
  html body #youtube .channel-intro { font-size: .95rem !important; }
  html body #youtube .short-card h4 { font-size: .86rem; }
}

/* ---------- 5. profile ages in the editorial serif ---------- */
html body #profile .story-year {
  margin: 0;
  color: var(--rf-ivory);
  font-family: var(--rf-serif) !important;
  font-size: clamp(3rem, 5.4vw, 5.8rem) !important;
  font-weight: 400;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
}
/* the old gradient text applied to every span inside .story-year; reset it for the new parts */
html body #profile .story-year span {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
}
html body #profile .story-year > span { display: block; color: var(--rf-ivory) !important; text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }
html body #profile .story-year .age-dash { color: var(--rf-gold) !important; }
html body #profile .story-year :is(.age-unit, .age-word) { color: #e4d9c4 !important; }
.age-set { display: inline-flex; align-items: baseline; flex-wrap: wrap; font-variant-numeric: lining-nums proportional-nums; font-feature-settings: "lnum" 1, "pnum" 1; }
.age-num { font-family: "Old Standard TT", "Times New Roman", serif; font-weight: 400; }
.age-dash { align-self: center; margin: 0 .12em; color: var(--rf-gold); font-family: var(--rf-mincho); font-size: .5em; line-height: 1; }
.age-unit { margin-left: .14em; color: #e4d9c4; font-family: var(--rf-mincho); font-size: .4em; font-weight: 400; letter-spacing: .04em; }
.age-word { margin-right: .28em; color: #e4d9c4; font-family: "Old Standard TT", serif; font-size: .4em; font-style: italic; letter-spacing: .01em; }
html body #profile .story-year small {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-top: 16px !important;
  color: #c3ccd5 !important;
  font-family: "Old Standard TT", serif !important;
  font-size: 1.1rem !important;
  font-style: italic;
  letter-spacing: .06em !important;
}
html body #profile .story-year small::before { content: ""; width: 38px; height: 1px; background: var(--rf-gold); }
html body #profile .story-phase {
  margin: 18px 0 12px !important;
  color: var(--rf-gold) !important;
  font-family: "Old Standard TT", serif !important;
  font-size: .84rem !important;
  font-weight: 400 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase;
}
html body #profile .story-stat b { font-family: "Old Standard TT", "Times New Roman", serif !important; font-weight: 400; color: var(--rf-ivory); font-variant-numeric: lining-nums proportional-nums; }
html body #profile .age-nav {
  margin-bottom: 32px;
  background: rgba(4, 9, 15, .78);
  border-block: 1px solid rgba(205, 184, 138, .4);
}
html body #profile .age-nav a {
  position: relative;
  padding: 20px 18px 24px !important;
  color: var(--rf-ivory);
  font-family: var(--rf-serif);
  font-size: clamp(1.35rem, 1.9vw, 1.95rem) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  border-right-color: rgba(205, 184, 138, .22);
  transition: background .25s ease;
}
html body #profile .age-nav a small {
  margin-top: 10px !important;
  color: var(--rf-gold) !important;
  font-family: "Old Standard TT", serif;
  font-size: .62rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
}
html body #profile .age-nav a::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 12px; height: 1px; background: var(--rf-gold); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
html body #profile .age-nav a:hover,
html body #profile .age-nav a:focus-visible { background: rgba(205, 184, 138, .08); }
html body #profile .age-nav a:hover::after,
html body #profile .age-nav a:focus-visible::after { transform: scaleX(1); }
html body #profile .age-nav :is(.age-unit, .age-word) { font-size: .55em; }
@media (max-width: 600px) {
  html body #profile .story-year { font-size: 3.1rem !important; }
  html body #profile .age-nav a { padding: 14px 10px 18px !important; font-size: 1.3rem !important; }
  html body #profile .age-nav a:first-child { padding-left: 10px !important; }
  html body #profile .age-nav a small { font-size: .56rem !important; letter-spacing: .14em !important; }
  html body #profile .age-nav a::after { left: 10px; right: 10px; bottom: 8px; }
}

/* ---------- 6. scroll entrances (the script adds .rf-motion only when motion is allowed) ---------- */
html.rf-motion .rf-fly {
  opacity: 0 !important;
  transform: translate3d(var(--fx, 0), var(--fy, 0), 0) rotate(var(--fr, 0deg)) scale(var(--fs, 1)) !important;
  transition:
    opacity .75s cubic-bezier(.2, .7, .2, 1) calc(var(--fi, 0) * 85ms),
    transform 1.15s cubic-bezier(.16, .84, .22, 1) calc(var(--fi, 0) * 85ms) !important;
}
html.rf-motion .rf-fly.is-flown { opacity: 1 !important; transform: none !important; }
/* photos that start beyond the screen edge never widen the page */
html body section.block { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html .rf-fly { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sitemap-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .sitemap-flow { display: none; }
  .sitemap-dot { opacity: 1 !important; }
  .vcta-sweep { display: none; }
  html body .vcta-media video,
  .sitenode-browser { transition: none !important; }
}

/* Japanese headings break between phrases, never inside a word */
html[lang="ja"] :is(.vcta-label, .vcta-sub, .rw-head h3, .tt-head h3, .tt-sub, .tt-quote, .sitenode-desc, .tt-record h4) { word-break: auto-phrase; }