html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { padding-top:76px; }
.site-header { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; padding:16px 4vw; background:rgba(8,8,12,.96); border-bottom:1px solid #333; }
.site-header a { color:#fff; text-decoration:none; display:block; }
.site-brand { font-size:16px; font-weight:700; letter-spacing:.03em; }
.site-nav { display:flex; align-items:center; gap:24px; }
.site-nav a { font-size:14px; line-height:1.5; padding:8px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--accent-text); }
.site-header a:focus-visible, .menu-toggle:focus-visible { outline:2px solid var(--accent-text); outline-offset:5px; }
.menu-toggle { display:none; font:inherit; font-size:14px; padding:10px 14px; color:#fff; background:#121218; border:1px solid #666; cursor:pointer; }
.profile-intro { margin-bottom:4rem; }
.profile-name { font-size:clamp(2rem,6vw,3rem); margin-bottom:12px; }
.profile-name span { display:block; font-size:14px; color:#aaa; letter-spacing:.12em; margin-top:12px; }
.profile-lead { line-height:1.9; margin:24px 0; }
.profile-facts { display:grid; grid-template-columns:110px 1fr; margin:24px 0; }
.profile-facts dt, .profile-facts dd { padding:16px 0; border-bottom:1px solid #333; font-size:16px; line-height:1.8; }
.profile-facts dt { color:#aaa; }
.profile-facts dd { margin:0; overflow-wrap:anywhere; }
.profile-facts dd a { display:inline; color:var(--accent-text); text-decoration:underline; }
.gallery-page { padding-top:108px; }
.gallery-page .grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr)); }
@media(max-width:900px) { .site-header { padding:14px 20px; } .menu-toggle { display:block; } .site-nav { display:none; position:absolute; top:100%; right:0; left:0; padding:16px 24px 24px; background:#08080c; border-bottom:1px solid #444; flex-direction:column; align-items:stretch; gap:6px; } .site-nav.is-open { display:flex; } .site-nav a { padding:12px 0; font-size:16px; } }
@media(max-width:480px) { .site-brand { font-size:14px; } .profile-facts { grid-template-columns:1fr; } .profile-facts dt { border:0; padding-bottom:0; } .profile-facts dd { padding-top:6px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .track { animation:none!important; } }

/* Official profile and experience */
#profile { max-width:1120px; }
.profile-intro { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,64px); align-items:start; }
.profile-portrait { margin:0; background:#ddd; overflow:hidden; }
.profile-portrait img { display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain; }
.profile-kicker { font-size:14px; line-height:1.5; letter-spacing:.14em; color:#aaa; margin-bottom:20px; }
.profile-copy .profile-name { margin-top:0; }
.profile-cta { display:inline-flex; justify-content:center; padding:14px 28px; border:1px solid #777; font-size:16px; color:#fff; transition:background .2s,border-color .2s; }
.profile-cta:hover { background:#18181e; border-color:var(--accent-text); }
.profile-cta:focus-visible { outline:2px solid var(--accent-text); outline-offset:4px; }
#profile .timeline { border-image:none; border-left:1px solid #444; }
#profile .timeline-item::before { width:12px; height:12px; left:-37px; border-width:2px; }
.achievements-section { max-width:1120px; }
.achievements-section .section-title { margin-bottom:32px; }
.achievement-list { border-top:1px solid #444; }
.achievement-item { display:grid; grid-template-columns:180px 1fr; gap:32px; padding:32px 0; border-bottom:1px solid #333; }
.achievement-type { font-size:14px; letter-spacing:.08em; color:#aaa; line-height:1.8; }
.achievement-item h3 { font-size:clamp(20px,3vw,26px); line-height:1.5; margin-bottom:12px; }
.achievement-item div p { font-size:16px; line-height:1.9; color:#ccc; }
@media(min-width:901px) { .site-nav { gap:18px; } }
@media(max-width:1100px) { .site-brand { font-size:14px; } .site-header { padding-left:24px; padding-right:24px; } }
@media(max-width:768px) { .profile-intro { grid-template-columns:1fr; } .profile-portrait { width:min(100%,360px); } .achievement-item { grid-template-columns:1fr; gap:12px; padding:28px 0; } #profile .timeline-item::before { left:-27px; } }

.personal-story { margin:96px 0 48px; }
.story-heading { margin-bottom:56px; }
.story-heading h3 { font-size:clamp(24px,4vw,38px); line-height:1.6; margin-bottom:20px; }
.story-heading>p:last-child { color:#aaa; font-size:16px; line-height:1.9; }
.story-chapter { border-top:1px solid #363640; padding:40px 0; }
.story-index { color:var(--accent-text); font-size:14px; letter-spacing:.1em; line-height:1.7; margin-bottom:16px; }
.story-chapter h4 { font-size:clamp(22px,3vw,30px); line-height:1.6; margin-bottom:20px; }
.story-chapter>p:not(.story-index) { color:#ccc; line-height:2; max-width:800px; font-size:16px; }
.story-university-title { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.story-team-logo { width:110px; height:auto; flex-shrink:0; object-fit:contain; }
.story-player-images { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; }
.story-field-images { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); align-items:center; gap:24px; margin-top:32px; }
.personal-story figure { margin:0; min-width:0; }
.personal-story figure img { display:block; width:100%; height:auto; object-fit:contain; }
.personal-story figcaption { color:#aaa; font-size:14px; line-height:1.8; padding-top:14px; }
.story-present .profile-cta { margin-top:28px; }
@media(max-width:640px) { .personal-story { margin-top:64px; } .story-heading { margin-bottom:36px; } .story-chapter { padding:28px 0; } .story-team-logo { width:76px; } .story-player-images { gap:14px; } .story-field-images { grid-template-columns:1fr; } .story-field-images figure:first-child { max-width:360px; } .story-index { font-size:12px; } }

.achievement-link { color:inherit; text-decoration:none; transition:background .2s; }
.achievement-link:hover { background:#121218; }
.achievement-link:focus-visible { outline:2px solid var(--accent-text); outline-offset:6px; }
.achievement-open { display:inline-block; margin-top:16px; font-size:14px; color:#aaa; border-bottom:1px solid #666; padding-bottom:4px; }
.achievement-link:hover .achievement-open { color:#fff; }

/* Compact photos in the university story */
.story-player-images { max-width:640px; gap:20px; }
.story-field-images { max-width:820px; grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr); gap:24px; }
.personal-story .story-player-images img, .personal-story .story-field-images img { width:auto; max-width:100%; max-height:340px; height:auto; object-fit:contain; }
.story-team-logo { width:84px; }
.personal-story .diagnosis-excerpt { max-width:520px; margin:28px 0 36px; }
.personal-story .diagnosis-excerpt img { width:100%; height:auto; }
@media(max-width:640px) { .story-field-images { grid-template-columns:1fr; gap:24px; } .personal-story .story-player-images img, .personal-story .story-field-images img { max-height:280px; } .story-team-logo { width:68px; } }
/* Services, consultation and compact social directory */
.services-section,.social-section { max-width:1120px; }
.service-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; }
.service-card { background:#121218; border:1px solid #333; padding:32px; }
.service-number { color:#aaa; font-size:14px; letter-spacing:.08em; }
.service-card h3 { font-size:24px; margin:20px 0 16px; line-height:1.5; }
.service-card p,.contact-lead,.social-intro { font-size:16px; line-height:1.9; color:#ccc; }
.text-link { display:inline-block; font-size:16px; margin-top:24px; padding:10px 0; border-bottom:1px solid #777; }
.primary-cta { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:16px 28px; background:#fff; color:#08080c; font-size:16px; font-weight:700; margin:28px 0 16px; }
.primary-cta:hover { background:#c8f7fa; }
.contact-profile { font-size:14px; color:#bbb; line-height:1.8; overflow-wrap:anywhere; }
.social-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:28px; }
.social-grid>a,.social-pending { padding:24px; border:1px solid #333; background:#121218; }
.social-grid strong,.social-grid span { display:block; }
.social-grid strong { font-size:18px; margin-bottom:8px; }
.social-grid span { font-size:14px; color:#aaa; overflow-wrap:anywhere; }
.social-grid>a:hover { border-color:#aaa; }
.header-controls { display:flex; align-items:center; gap:12px; }
.site-nav { margin-left:auto; gap:14px; }
.language-control select { font:inherit; font-size:14px; min-height:44px; padding:8px; color:#fff; background:#121218; border:1px solid #666; cursor:pointer; max-width:105px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
a:focus-visible,button:focus-visible,select:focus-visible { outline:2px solid var(--accent-text); outline-offset:4px; }
body { font-size:16px; line-height:1.6; }
footer { color:#aaa!important; font-size:14px; }
@media(min-width:1101px) { .site-header { gap:20px; padding-left:3vw; padding-right:3vw; } }
@media(max-width:1100px) { .menu-toggle { display:block; min-height:44px; } .site-nav { display:none; position:absolute; top:100%; right:0; left:0; padding:16px 24px 24px; background:#08080c; border-bottom:1px solid #444; flex-direction:column; align-items:stretch; gap:6px; max-height:calc(100dvh - 76px); overflow-y:auto; } .site-nav.is-open { display:flex; } .site-nav a { padding:12px 0; font-size:16px; } }
@media(max-width:768px) { .section-container { margin:64px auto; padding:0 24px; } .section-title { font-size:clamp(24px,6vw,30px); line-height:1.5; margin-bottom:28px; } .service-grid { grid-template-columns:1fr; gap:16px; } .service-card { padding:24px; } .social-grid { grid-template-columns:1fr 1fr; gap:12px; } .social-grid>a,.social-pending { padding:20px 16px; } .gallery-page { padding-left:20px; padding-right:20px; } .hero,.slider-container,.slide { height:calc(100svh - 76px); min-height:400px; } .logo-img { max-height:45svh; } .split-card { height:240px; } }
@media(max-width:480px) { .site-header { padding:12px 16px; gap:8px; } .site-brand { font-size:13px; } .header-controls { gap:8px; } .menu-toggle { padding:10px; } .language-control select { font-size:13px; max-width:88px; } .primary-cta { width:100%; padding:16px; } }
@media(max-width:360px) { .site-brand { max-width:118px; overflow-wrap:anywhere; } .social-grid { grid-template-columns:1fr; } }

/* CKP brand: monochrome foundation, rainbow accents */
:root {
  --accent:#ffffff;
  --accent-text:#eeeeee;
  --surface:#171717;
  --muted:#bdbdbd;
  --rainbow:linear-gradient(100deg,#ff8b9c,#ffc68b,#f2e59a,#9ae1bb,#99d7fa,#bcb4fa,#eca9e4);
}
body { background:#080808; color:#f5f5f5; }
.site-header { background:rgba(8,8,8,.96); border-bottom-color:#383838; }
.site-brand { color:#f5f5f5; }
.site-nav a:hover,.site-nav a[aria-current="page"] { color:#fff; text-decoration:underline; text-decoration-color:#bcb4fa; text-underline-offset:8px; }
.section-title { color:#f5f5f5; line-height:1.5; }
.section-title::after { width:76px; height:3px; background:var(--rainbow); margin-top:18px; }
.profile-kicker,.service-number,.story-index,.achievement-type { color:#c8c8c8; }
.profile-lead { color:#dedede; }
.profile-name span { color:#bdbdbd; }
.profile-facts dt { color:#bdbdbd; }
.profile-facts dd { color:#eee; border-bottom-color:#383838; }
.profile-facts dd a { color:#99d7fa; }
.service-card { background:var(--surface); border-color:#383838; position:relative; }
.service-card::before { content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:2px; background:var(--rainbow); }
.service-card h3,.social-grid strong,.story-chapter h4 { color:#fff; }
.service-card p,.contact-lead,.social-intro,.achievement-item div p,.story-chapter>p:not(.story-index) { color:#ddd; }
.text-link,.contact-profile,.back-link,.story-back { color:#99d7fa; border-bottom-color:#737373; }
.profile-cta { color:#fff; border:1px solid transparent; background:linear-gradient(#171717,#171717) padding-box,var(--rainbow) border-box; }
.profile-cta:hover { color:#fff; border-color:transparent; background:linear-gradient(#282828,#282828) padding-box,var(--rainbow) border-box; }
.primary-cta { color:#111; border:1px solid transparent; background:var(--rainbow); }
.primary-cta:hover { background:var(--rainbow); filter:brightness(1.08); border-color:transparent; }
.achievement-list { border-top-color:#555; }
.achievement-item { border-bottom-color:#383838; }
.achievement-link:hover { background:#171717; }
.achievement-open { color:#bcb4fa; border-color:#737373; }
.achievement-link:hover .achievement-open { color:#d8d3ff; }
.social-grid>a,.social-pending { background:var(--surface); border-color:#383838; }
.social-grid span { color:#c5c5c5; }
.social-grid>a:hover { border-color:#bcb4fa; background:#222; }
.split-card { background:#141414; border-color:#383838; }
.split-card p { color:#c8c8c8; margin-top:14px; font-size:16px; }
.split-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--rainbow); }
.split-card:hover { transform:translateY(-3px); border-color:#777; background:#202020; }
.split-card:hover h2 { background:var(--rainbow); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#fff; }
.personal-story figcaption,.story-heading>p:last-child { color:#c5c5c5; }
.story-chapter { border-top-color:#444; }
.gallery-page .item { background:#171717; border-color:#383838; }
.menu-toggle,.language-control select { background:#171717; border-color:#666; }
footer { color:#bdbdbd!important; }
@media(max-width:1100px) { .site-nav { background:#080808; } }
@media(forced-colors:active) { .split-card:hover h2 { -webkit-text-fill-color:currentColor; } .primary-cta,.profile-cta { border-color:ButtonText; } }
@media(prefers-reduced-motion:reduce) { .split-card:hover { transform:none; } }

/* Short rainbow press feedback for touch, pointer and keyboard. */
.press-feedback { position:relative; isolation:isolate; transition:transform .14s ease, background-color .18s ease, border-color .18s ease; }
.press-feedback:active { transform:scale(.98); }
.site-nav a.press-feedback:active,.text-link.press-feedback:active { transform:translateY(1px); }
.press-overlay { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; z-index:30; }
.press-wave {
  position:absolute; left:var(--wave-x); top:var(--wave-y);
  width:var(--wave-size); height:var(--wave-size); border-radius:50%;
  background:conic-gradient(#ff8b9c,#ffc68b,#f2e59a,#9ae1bb,#99d7fa,#bcb4fa,#eca9e4,#ff8b9c);
  -webkit-mask-image:radial-gradient(circle,transparent 45%,#000 65%,transparent 72%);
  mask-image:radial-gradient(circle,transparent 45%,#000 65%,transparent 72%);
  animation:ckp-press-wave .48s ease-out both;
}
@keyframes ckp-press-wave {
  0% { transform:translate(-50%,-50%) scale(.08); opacity:.65; }
  65% { opacity:.28; }
  100% { transform:translate(-50%,-50%) scale(1.45); opacity:0; }
}
@media(prefers-reduced-motion:reduce) {
  .press-feedback { transition:none; }
  .press-feedback:active,.site-nav a.press-feedback:active,.text-link.press-feedback:active { transform:none; }
  .press-wave { display:none; animation:none; }
}
@media(forced-colors:active) { .press-wave { display:none; } }
/* Compact achievement detail pages */
.experience-lead { font-size:18px; line-height:1.9; color:#ddd; margin:28px 0 40px!important; max-width:760px; }
.experience-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(32px,6vw,72px); align-items:start; margin-bottom:40px; }
.experience-layout .profile-facts { margin-top:0; }
.experience-artwork { margin:0; max-width:380px; }
.experience-artwork img { display:block; width:100%; height:auto; object-fit:contain; }
.experience-artwork figcaption { font-size:14px; color:#bdbdbd; line-height:1.8; margin-top:14px; }
.experience-overview { max-width:720px; margin-bottom:40px; }
@media(max-width:640px) { .experience-layout { grid-template-columns:1fr; gap:32px; } .experience-artwork { max-width:320px; } .experience-lead { font-size:16px; margin-bottom:28px!important; } }
/* Three dated updates near the top, with a compact editorial layout. */
.topics-section { max-width:1120px; margin-top:32px; margin-bottom:16px; }
.topics-heading { display:flex; align-items:baseline; gap:20px; padding-bottom:16px; }
.topics-heading .profile-kicker { margin:0; background:var(--rainbow); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; }
.topics-heading h2 { font-size:clamp(20px,3vw,26px); line-height:1.5; margin:0; }
.topics-list { border-top:1px solid #555; }
.topic-link { display:grid; grid-template-columns:112px minmax(0,1fr) auto; align-items:center; gap:20px; padding:12px 0; min-height:48px; border-bottom:1px solid #333; color:#fff; text-decoration:none; }
.topic-link time { font-size:14px; color:#bdbdbd; font-variant-numeric:tabular-nums; white-space:nowrap; }
.topic-copy { min-width:0; display:flex; align-items:baseline; gap:14px; }
.topic-category { display:block; font-size:12px; color:#bdbdbd; letter-spacing:.08em; margin-bottom:0; flex-shrink:0; }
.topic-title { display:block; font-size:16px; line-height:1.5; overflow-wrap:anywhere; }
.topic-open { font-size:14px; color:#bcb4fa; white-space:nowrap; }
.topic-link:hover { background:#171717; }
@media(max-width:640px) { .topics-section { margin-top:24px; margin-bottom:12px; } .topics-heading { gap:16px; padding-bottom:14px; } .topic-link { grid-template-columns:1fr auto; gap:4px 16px; padding:12px 0; } .topic-link time { grid-column:1; } .topic-copy { grid-column:1 / -1; grid-row:2; } .topic-open { grid-column:2; grid-row:1; } .topic-category { display:none; } .topic-title { font-size:16px; } }
@media(forced-colors:active) { .topics-heading .profile-kicker { -webkit-text-fill-color:currentColor; } }
/* Waseda team story: restrained artwork and official profile evidence. */
.waseda-intro { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:48px; align-items:start; margin-bottom:48px; }
.waseda-intro h2,.waseda-history h2,.waseda-official h2 { font-size:clamp(22px,3vw,30px); line-height:1.6; margin:0 0 20px; }
.waseda-intro p,.waseda-history p,.waseda-official p { font-size:16px; line-height:1.9; color:#ddd; }
.waseda-artwork { margin:0; max-width:360px; }
.waseda-artwork img,.waseda-official img { display:block; width:100%; height:auto; object-fit:contain; }
.waseda-artwork figcaption,.waseda-official figcaption { font-size:14px; line-height:1.8; color:#bdbdbd; padding-top:12px; }
.waseda-history { padding:36px 0; border-top:1px solid #444; margin-bottom:32px; }
.waseda-history ol { list-style:none; padding:0; margin:0; }
.waseda-history li { display:grid; grid-template-columns:100px minmax(0,1fr); gap:24px; padding:20px 0; border-bottom:1px solid #333; }
.waseda-history time { color:#bcb4fa; font-size:16px; font-variant-numeric:tabular-nums; }
.waseda-history h3 { font-size:18px; margin:0 0 8px; line-height:1.6; }
.waseda-history p { margin-bottom:0; }
.waseda-official { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:48px; padding:36px 0; border-top:1px solid #444; margin-bottom:32px; align-items:start; }
.waseda-official figure { margin:0; max-width:360px; }
.official-screen-link { display:block; }
@media(max-width:640px) { .waseda-intro,.waseda-official { grid-template-columns:1fr; gap:28px; } .waseda-artwork,.waseda-official figure { max-width:320px; } .waseda-history li { grid-template-columns:1fr; gap:10px; } }
