/*
Theme Name: Hajime Projects Archive
Theme URI: https://example.local/
Author: Hajime Saito Lab
Description: 斎藤はじめゼミのプロジェクトを、現在から過去へ遡るタイムラインで紹介するテーマ。
Version: 1.0.0
Text Domain: hajime-projects
*/

:root {
  --ink: #0b2438;
  --muted: #536b7c;
  --paper: #f8fcfe;
  --paper-2: #eaf7fc;
  --pink: #4779d4;
  --violet: #5364c8;
  --cyan: #30a9db;
  --lime: #6fc8b8;
  --yellow: #89cfe9;
  --orange: #ff7548;
  --orange-hover: #ff8b66;
  --orange-button: #d95735;
  --orange-button-hover: #e86d4d;
  --line: rgba(8, 120, 189, .2);
  --shadow: 0 16px 40px rgba(8, 79, 126, .12);
  --radius: 12px;
  --font-round: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (min-width:901px) {
  html { font-size:17px; }
}
@media (min-width:2000px) {
  html { font-size:18px; }
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-round);
  line-height: 1.8;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: clamp(80px, 10vw, 150px) 0; position: relative; }
.eyebrow { font: 700 .74rem/1.2 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--violet); }
.section-title { margin: .3em 0 .2em; font-size: clamp(2.2rem, 6vw, 5.2rem); line-height: 1.05; letter-spacing: -.05em; }
.section-lead { color: var(--muted); max-width: 680px; margin: 0; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 1000; padding: 8px 16px; background: #fff; }
.skip-link:focus { top: 12px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; padding: 18px 0; transition: .25s ease; }
.site-header.is-scrolled { background: rgba(255,250,241,.86); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 900; letter-spacing: -.04em; }
.brand-copy { display:grid;justify-items:center;gap:3px;width:max-content;line-height:1.15;text-align:center; }
.brand-copy strong { font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;font-size:.9rem;font-weight:800;letter-spacing:-.03em;white-space:nowrap; }
.brand-copy small { width:100%;color:#4779d4;font:800 .58rem var(--font-mono);letter-spacing:.105em;text-align:center;white-space:nowrap;transform:translateX(1px); }
.brand-mark { width: 38px; aspect-ratio: 1; display: grid; place-items: center; }
.brand-mark img { width:100%;height:100%;object-fit:contain; }
.site-nav { display: flex; align-items:center; gap: 28px; font-size: .82rem; font-weight: 700; }
.site-nav a { position: relative; }
.site-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-6px; height:3px; border-radius:4px; background:var(--pink); transition:.2s; }
.site-nav a:hover::after { right:0; }
.site-nav .official-site-link { margin:-7px 0;padding:7px 13px;border:1px solid var(--orange-button);border-radius:4px;color:var(--orange-button);background:rgba(255,255,255,.78); }
.site-nav .official-site-link::after { display:none; }
.site-nav .official-site-link:hover { color:var(--orange-button);background:#fff0eb; }
.menu-button { display:none; border:0; background:var(--ink); color:#fff; border-radius:5px; padding:9px 14px; }

@media (min-width:1280px) {
  .site-header .nav-wrap { width:min(92vw,1480px); }
}
@media (min-width:1536px) {
  .site-header .nav-wrap { width:min(90vw,1680px); }
}

.hero { min-height: 100svh; display: grid; place-items: center; padding: 96px 0 54px; position: relative; overflow: hidden; background:#f5fcff; }
.hero-grid { display:none; }
.aurora { position:absolute; inset:-24% -18%; overflow:hidden; filter:blur(22px) saturate(122%); opacity:.62; transform:rotate(-7deg); }
.aurora i { position:absolute; left:-15%; width:130%; height:34%; border-radius:50%; mix-blend-mode:multiply; will-change:transform,border-radius; }
.aurora i:nth-child(1) { top:12%; background:linear-gradient(90deg,transparent 2%,rgba(48,169,219,.78) 24%,rgba(8,120,189,.58) 54%,transparent 91%); animation:aurora-wave 6.5s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { top:31%; background:linear-gradient(90deg,transparent 5%,rgba(105,126,236,.62) 32%,rgba(48,169,219,.76) 70%,transparent 96%); animation:aurora-wave 8s ease-in-out -3s infinite alternate-reverse; }
.aurora i:nth-child(3) { top:50%; background:linear-gradient(90deg,transparent,rgba(137,220,239,.58) 28%,rgba(83,100,200,.5) 64%,transparent); animation:aurora-drift 9s ease-in-out -4s infinite alternate; }
.aurora i:nth-child(4) { top:67%; background:linear-gradient(90deg,transparent 8%,rgba(48,169,219,.64) 42%,rgba(111,214,190,.62) 73%,transparent); animation:aurora-drift 7s ease-in-out -2s infinite alternate-reverse; }
.hero-copy { position:relative; z-index:2; text-align:center; max-width:900px; padding:18px 54px; }
.hero-copy::before { content:"";position:absolute;z-index:-1;inset:-36px -90px;background:radial-gradient(ellipse at center,rgba(255,255,255,.9) 0 48%,rgba(255,255,255,.62) 63%,rgba(255,255,255,0) 80%); }
.hero-kicker { display:inline-flex; gap:10px; align-items:center; padding:9px 18px; border:1px solid var(--ink); border-radius:4px; background:rgba(255,255,255,.72); font:700 .72rem var(--font-mono); letter-spacing:.12em; }
.hero-kicker::before { content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,117,72,.14); }
.hero-kicker:hover { border-color:var(--orange-button);color:var(--orange-button);background:#fff; }
.hero h1 { margin:.32em 0 .18em; line-height:.98; letter-spacing:-.07em; }
.hero h1 span { display:block; color:#0878bd; font-size:clamp(2rem,4.2vw,4rem); text-shadow:none; }
.hero h1 strong { display:block;margin-top:.2em;font-size:clamp(1.85rem,4.25vw,4.1rem);font-weight:900;color:var(--ink);white-space:nowrap; }
.hero .tagline { font-size:clamp(1.1rem,2vw,1.5rem); font-weight:800; }
.hero .intro { max-width:720px; margin:12px auto 18px; color:var(--muted); font-size:.92rem; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex;align-items:center;justify-content:center;width:190px;max-width:100%;height:50px;border:1px solid #168dcc;border-radius:4px;padding:0 18px;color:#0878bd;font-weight:900;white-space:nowrap;background:rgba(255,255,255,.86);box-shadow:none;transition:background-color .18s,border-color .18s,color .18s; }
.button.primary { color:var(--orange-button);background:rgba(255,255,255,.86);border-color:var(--orange-button);box-shadow:none; }
.button:hover { transform:none;background:#e9f7fd;border-color:#0878bd;color:#075e91;box-shadow:none; }
.button.primary:hover { background:#fff0eb;border-color:var(--orange-button-hover);color:var(--orange-button); }
.button.accent { color:#fff;background:var(--orange-button);border-color:var(--orange-button); }
.button.accent:hover { color:#fff;background:var(--orange-button-hover);border-color:var(--orange-button-hover); }
.hero-stats { margin:22px auto 0; display:flex; justify-content:center; gap:clamp(24px,6vw,80px); }
.stat strong { display:block; font:900 clamp(1.6rem,4vw,2.8rem)/1 var(--font-mono); color:var(--violet); }
.stat span { font-size:.76rem; color:var(--muted); }
.orbit-chip { position:absolute;z-index:4;display:grid;gap:3px;padding:11px 16px 10px 19px;border:1px solid #315f7c;border-left:4px solid #0878bd;background:#fff;backdrop-filter:none;box-shadow:0 12px 28px rgba(6,43,67,.2);color:#062b43;font:900 .7rem var(--font-mono);letter-spacing:.025em;opacity:1;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);animation:float-tech 5s ease-in-out infinite; }
.orbit-chip::after { content:"";position:absolute;right:7px;top:7px;width:4px;height:4px;border-radius:50%;background:#30a9db;box-shadow:0 0 0 4px rgba(48,169,219,.15); }
.orbit-chip small { color:#0878bd;font:900 .52rem var(--font-mono);letter-spacing:.14em; }
.orbit-chip:nth-of-type(1){left:max(6%,calc(50% - 680px));top:60%;}.orbit-chip:nth-of-type(2){right:max(5%,calc(50% - 680px));top:30%;animation-delay:-2s}.orbit-chip:nth-of-type(3),.orbit-chip:nth-of-type(4){display:none}

.now-section { background:#dff4fb; color:var(--ink); overflow:hidden; }
.now-section::before { content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,95,162,.16),transparent 32%,rgba(20,200,220,.13)); }
.now-section .section-lead { color:var(--muted); }
.now-section .eyebrow { color:var(--orange-button); }
.now-grid { position:relative; display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin-top:54px; }
.project-tile { --accent:#5d80d8; grid-column:span 4; min-height:310px; padding:28px; border:1px solid rgba(8,120,189,.2); border-radius:var(--radius); background:rgba(255,255,255,.78); display:flex; flex-direction:column; transition:.25s; cursor:pointer; }
.project-tile:nth-child(4n+2){--accent:var(--cyan)}.project-tile:nth-child(4n+3){--accent:#8bbfd6}.project-tile:nth-child(4n){--accent:var(--lime)}
.project-tile:hover { transform:translateY(-8px) rotate(-.4deg); border-color:var(--accent); box-shadow:0 18px 60px color-mix(in srgb,var(--accent) 20%,transparent); }
.project-tile:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.tile-photo { margin:20px -28px 0;height:145px;overflow:hidden; }
.tile-photo img { width:100%;height:100%;object-fit:cover; }
.tile-meta { display:flex; justify-content:space-between; gap:12px; font:700 .7rem var(--font-mono); color:var(--accent); }
.project-tile h3 { margin:28px 0 12px; font-size:1.35rem; line-height:1.45; }
.tile-photo + h3 { margin-top:20px; }
.project-tile p { color:var(--muted); font-size:.88rem; margin:0 0 20px; }
.tile-link { margin-top:auto; color:var(--accent); font-weight:900; }

.manifesto { min-height:100svh;display:grid;align-items:center; }
.manifesto-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,8vw,110px); align-items:center; }
.archive-disc { aspect-ratio:1; border-radius:50%; background:conic-gradient(from 90deg,#0878bd,var(--cyan),var(--violet),var(--pink),#0878bd); padding:16px; animation:spin 30s linear infinite reverse; }
.archive-disc-inner { height:100%;border-radius:50%;background:var(--paper);display:grid;place-items:center;text-align:center;animation:spin 30s linear infinite; }
.archive-disc strong { font:900 clamp(3rem,9vw,7rem)/1 var(--font-mono); }
.manifesto-copy p { color:var(--muted); font-size:1.05rem; }
.manifesto-copy > .eyebrow { color:var(--orange-button); }
.manifesto-copy .large { color:var(--ink);font-size:clamp(1.35rem,2.5vw,2.15rem);font-weight:900;line-height:1.45;white-space:nowrap; }

.timeline-section { background:#edf8fc; }
.timeline-filter { margin:24px 0 50px;display:grid;gap:10px; }
.timeline-filter > b,.timeline-year-nav > b { font:800 .68rem var(--font-mono);letter-spacing:.14em;color:var(--muted); }
.timeline-toolbar { display:flex;gap:8px;flex-wrap:wrap;margin:0; }
.timeline-toolbar button { border:1px solid var(--ink);border-radius:4px;background:transparent;padding:7px 12px;cursor:pointer;font:800 .72rem var(--font-mono); }
.timeline-toolbar button.is-active { background:#fff0eb;border-color:var(--orange-button);color:var(--orange-button); }
.timeline-year-nav { margin-top:36px;display:grid;gap:10px; }
.timeline-year-nav > div { display:flex;flex-wrap:wrap;gap:8px; }
.timeline-year-nav a { padding:7px 12px;border:1px solid rgba(132,92,255,.42);border-radius:4px;color:#c8cfe0;background:rgba(132,92,255,.06);font:800 .72rem var(--font-mono);transition:.18s; }
.timeline-year-nav a:hover,.timeline-year-nav a:focus-visible { color:#05060d;border-color:var(--pink);background:var(--pink);box-shadow:0 0 18px rgba(255,61,175,.25);outline:0; }
.year-group { scroll-margin-top:110px; }
.timeline { position:relative; }
.timeline::before { content:"";position:absolute;left:180px;top:0;bottom:0;width:2px;background:linear-gradient(var(--orange),var(--violet),var(--cyan),var(--yellow)); }
.year-group { display:grid;grid-template-columns:160px 1fr;gap:40px;margin-bottom:88px; }
.year-label { position:sticky;top:105px;align-self:start;font:900 clamp(2rem,4vw,3.8rem)/1 var(--font-mono);letter-spacing:-.08em; }
.year-label::after { content:"";position:absolute;right:-29px;top:.35em;width:18px;aspect-ratio:1;border:4px solid #edf8fc;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 2px var(--cyan); }
.year-group:first-child .year-label::after { background:var(--orange);box-shadow:0 0 0 2px var(--orange); }
.timeline-origin { min-height:280px;display:grid;grid-template-columns:160px 1fr;gap:40px;position:relative;scroll-margin-top:110px; }
.timeline-origin-marker { position:absolute;left:171px;top:50%;width:19px;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--yellow),var(--orange));box-shadow:0 0 18px var(--orange);transform:translateY(-50%); }
.timeline-origin-copy { grid-column:2;align-self:center;text-align:center;padding:46px 0 28px; }
.timeline-origin-copy strong { display:block;color:transparent;font:900 clamp(3.4rem,6vw,5.8rem)/.9 var(--font-mono);letter-spacing:-.09em;background:linear-gradient(100deg,var(--yellow),var(--orange),var(--pink));background-clip:text;-webkit-background-clip:text;filter:drop-shadow(0 0 15px rgba(255,117,72,.22)); }
.timeline-origin-copy p { margin:14px 0 0;color:var(--yellow);font-weight:800;letter-spacing:.02em; }
.year-cards { display:grid;gap:18px; }
.timeline-card { --accent:var(--violet);--visual-width:230px;display:grid;grid-template-columns:var(--visual-width) 1fr;min-height:340px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(to right,color-mix(in srgb,var(--accent) 17%,#fff) 0 var(--visual-width),#fff var(--visual-width));box-shadow:0 12px 40px rgba(30,20,60,.05);transition:.22s; }
.timeline-card:nth-child(4n+1){--accent:#5276cf}.timeline-card:nth-child(4n+2){--accent:var(--cyan)}.timeline-card:nth-child(4n+3){--accent:#77afd0}.timeline-card:nth-child(4n){--accent:var(--lime)}
.timeline-card:hover { transform:translateX(8px); border-color:var(--accent); box-shadow:var(--shadow); }
.card-visual { position:relative;overflow:hidden;height:340px;align-self:start;background:color-mix(in srgb,var(--accent) 17%,#fff);display:grid;place-items:center; }
.card-visual img { width:100%;height:100%;object-fit:cover; }
.card-visual::before,.card-visual::after { content:"";position:absolute;border:2px solid color-mix(in srgb,var(--accent) 65%,transparent);border-radius:50%;width:100px;aspect-ratio:1; }
.card-visual::after { width:44px;transform:translate(65px,45px); }
.visual-icon { position:relative;font-size:2.8rem;filter:drop-shadow(0 8px 12px rgba(0,0,0,.08)); }
.card-body { min-width:0;padding:26px 30px;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:18px 28px;align-content:start; }
.card-main { min-width:0; }
.card-skills { padding:4px 0 4px 22px;border-left:1px solid var(--line);display:grid;align-content:start;gap:16px; }
.pills { display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px; }
.pill { padding:4px 10px;border-radius:3px;background:color-mix(in srgb,var(--accent) 16%,#fff);color:color-mix(in srgb,var(--accent) 75%,#222);font:800 .68rem var(--font-mono); }
.card-body h3 { margin:0 0 8px;font-size:1.25rem;line-height:1.45; }
.collab { color:#8b5d00;font-size:.76rem;font-weight:800; }
.summary { color:var(--muted);font-size:.88rem;margin:9px 0 13px; }
.skills { display:grid;gap:5px;margin:10px 0; }
.skill-row { display:grid;gap:7px;align-items:flex-start;font-size:.74rem; }
.skill-row b { color:var(--violet);font:800 .62rem var(--font-mono);letter-spacing:.12em; }
.skill-row.design b { color:var(--pink); }
.skill-tags { display:flex;flex-wrap:wrap;gap:5px; }
.skill-tags span { background:#f2effb;border:1px solid #ded7f3;border-radius:5px;padding:2px 7px; }
.detail-link { display:inline-flex;font-weight:900;color:color-mix(in srgb,var(--accent) 85%,#222);font-size:.82rem; }
.is-muted { opacity:.55; }
.research-links { grid-column:1/-1;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.research-links > summary { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 2px;cursor:pointer;list-style:none;color:#075e91;font-weight:900; }
.research-links > summary::-webkit-details-marker { display:none; }
.research-links > summary span { display:flex;align-items:baseline;gap:10px; }
.research-links > summary small { color:var(--violet);font:800 .58rem var(--font-mono);letter-spacing:.1em; }
.research-links > summary b::after { content:" ＋"; }
.research-links[open] > summary b::after { content:" −"; }
.research-links a,.research-item { display:flex;flex-direction:column;align-items:flex-start;max-width:100%;padding:8px 11px;border:1px solid #9ed7ee;border-radius:4px;background:#eefaff;color:#075e91;font-size:.72rem;font-weight:800;line-height:1.45;transition:.18s; }
.research-links small { color:var(--violet);font:800 .58rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase; }
.research-links a:hover { transform:translateY(-2px);background:#f2dcff; }
.research-more-items { display:grid;gap:7px;padding:0 0 14px; }
.card-actions { grid-column:1/-1; }
.timeline-card[hidden],.year-group[hidden] { display:none; }

.output-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px; }
.output-card { padding:28px;border:1px solid var(--line);border-radius:10px;background:#fff; }
.output-card small { font:700 .7rem var(--font-mono);color:var(--cyan); }
.output-card h3 { margin:10px 0 6px;font-size:1.05rem; }

.collab-section { background:#e8f4fa; }
.collab-section > .container { width:min(1280px,calc(100% - 40px)); }
.collab-title { display:flex;align-items:center;gap:.22em; }
.collab-title-icon { width:.72em;height:.72em;fill:var(--blue);stroke:var(--blue);stroke-width:1.6;stroke-linecap:round; }
.collab-strip { display:flex;flex-wrap:wrap;gap:10px;margin-top:36px; }
.collab-pill { display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid var(--ink);border-radius:5px;background:#fff;font-weight:800;box-shadow:3px 3px 0 var(--ink);transition:.18s; }
.collab-pill:hover { border-color:var(--orange-button);box-shadow:3px 3px 0 var(--orange);color:var(--orange-button); }
@media (min-width:901px) {
  .collab-strip { gap:8px; }
  .collab-pill { padding:7px 11px;font-size:.88rem; }
}

.site-footer { padding:50px 0;background:#062b43;color:#fff; }
.footer-grid { display:flex;justify-content:space-between;gap:30px;align-items:flex-end; }
.site-footer p { color:#c3dce9;margin:7px 0 0;font-size:.8rem; }
.footer-site-link { flex:0 0 auto;color:#c3dce9;font-size:.8rem;border-bottom:1px solid rgba(255,117,72,.65);transition:.18s; }
.footer-site-link:hover { color:#fff;border-color:var(--orange); }
.hero-scroll-cue { position:absolute;z-index:4;left:50%;bottom:20px;display:flex;align-items:center;color:#0878bd;transform:translateX(-50%);animation:scroll-float 2s ease-in-out infinite; }
.hero-scroll-cue b { display:grid;place-items:center;width:30px;height:30px;border:1px solid currentColor;border-radius:50%;font-size:1rem; }
.section-scroll-cue { position:absolute;z-index:4;left:50%;bottom:20px;display:grid;justify-items:center;gap:7px;color:var(--cyan);font:800 .58rem var(--font-mono);letter-spacing:.16em;transform:translateX(-50%);text-shadow:0 0 14px var(--cyan);animation:scroll-float 2s ease-in-out infinite; }
.section-scroll-cue b { display:grid;place-items:center;width:30px;height:30px;border:1px solid currentColor;border-radius:50%;font-size:1rem; }
.floating-back-top { position:fixed;z-index:45;right:24px;bottom:24px;width:58px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:#0878bd;color:#fff;box-shadow:0 10px 30px rgba(6,43,67,.25);font:800 .52rem var(--font-mono);letter-spacing:.08em;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .25s,visibility .25s,transform .25s; }
.floating-back-top b { font-size:1rem;line-height:1; }
.floating-back-top.is-visible { opacity:1;visibility:visible;transform:translateY(0);animation:scroll-float 2s ease-in-out infinite; }
.floating-back-top:hover { background:#062b43; }

.single-project { padding:150px 0 90px; }
.single-project header { max-width:900px; }
.single-project h1 { font-size:clamp(2.5rem,7vw,6rem);line-height:1.05;letter-spacing:-.06em;margin:.25em 0; }
.single-meta { display:flex;gap:12px;flex-wrap:wrap;margin:26px 0; }
.single-content { max-width:820px;font-size:1.05rem; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes float { 50% { transform:translateY(-14px) rotate(2deg); } }
@keyframes float-tech { 0%,100% { transform:translate3d(0,0,0) rotate(-1deg); } 50% { transform:translate3d(0,-13px,0) rotate(.7deg); } }
@keyframes scroll-float { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
@keyframes aurora-wave { 0% { transform:translate3d(-13%,-28px,0) skewY(-9deg) scaleY(.6);border-radius:42% 58% 70% 30% / 60% 38% 62% 40%; } 50% { transform:translate3d(13%,72px,0) skewY(8deg) scaleY(1.32);border-radius:65% 35% 38% 62% / 38% 65% 35% 62%; } 100% { transform:translate3d(-4%,-46px,0) skewY(-6deg) scaleY(.78);border-radius:35% 65% 58% 42% / 67% 35% 65% 33%; } }
@keyframes aurora-drift { 0% { transform:translate3d(16%,-60px,0) rotate(5deg) scaleX(.78) scaleY(.75); } 50% { transform:translate3d(-13%,76px,0) rotate(-7deg) scaleX(1.22) scaleY(1.18); } 100% { transform:translate3d(9%,-32px,0) rotate(4deg) scaleX(.9) scaleY(.86); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important; } }
@media (max-width:900px) {
  .site-nav { display:none;position:absolute;top:62px;right:20px;left:20px;flex-direction:column;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow); }
  .site-nav .official-site-link { margin:0; }
  .site-nav.is-open { display:flex; }.menu-button{display:block}
  .project-tile{grid-column:span 6}.manifesto-grid{grid-template-columns:1fr}.manifesto-copy .large{white-space:normal}.archive-disc{max-width:560px;margin:auto}
  .timeline-card{--visual-width:180px}.card-visual{height:340px}.card-body{grid-template-columns:minmax(0,1fr) 200px;gap:16px 20px}.output-grid{grid-template-columns:1fr}
}
@media (max-width:640px) {
  .container,.collab-section > .container{width:min(100% - 28px,1180px)}.section{padding:78px 0}.hero-stats{gap:18px}.stat span{font-size:.65rem}
  .orbit-chip{display:none}.hero-copy{padding:28px 10px}.hero h1 strong{font-size:clamp(1.45rem,7.2vw,2.15rem);letter-spacing:-.07em}.project-tile{grid-column:1/-1;min-height:260px}.now-grid{grid-template-columns:1fr}
  .timeline::before{left:10px}.year-group{display:block;margin-left:28px}.year-label{position:relative;top:auto;margin-bottom:22px}.year-label::after{left:-26px;right:auto}.timeline-origin{display:block;min-height:230px;margin-left:28px}.timeline-origin-marker{left:-27px}.timeline-origin-copy{padding:70px 0 24px}.timeline-origin-copy p{font-size:.78rem}
  .timeline-card{grid-template-columns:1fr;background:#fff}.card-visual{height:210px;min-height:0}.card-body{padding:22px;grid-template-columns:1fr}.card-skills{padding:14px 0 0;border-left:0;border-top:1px solid var(--line);grid-template-columns:1fr 1fr}.research-links,.card-actions{grid-column:1}.footer-grid{align-items:flex-start;flex-direction:column}.floating-back-top{right:14px;bottom:14px;width:52px;height:52px}.hero-scroll-cue{bottom:12px}
}

/* Laser noir — dark, luminous and technical without a space motif. */
:root {
  --ink: #f4f7ff;
  --muted: #93a0ba;
  --paper: #05060d;
  --paper-2: #090b17;
  --pink: #ff3daf;
  --violet: #845cff;
  --cyan: #00e5ff;
  --lime: #20f2bd;
  --yellow: #ffe866;
  --line: rgba(0,229,255,.18);
  --shadow: 0 24px 70px rgba(0,0,0,.46), 0 0 34px rgba(0,229,255,.07);
}

body {
  position:relative;
  color: var(--ink);
  background:
    linear-gradient(115deg, transparent 0 47%, rgba(132,92,255,.035) 47.15%, transparent 47.3%),
    radial-gradient(circle at 82% 18%, rgba(0,229,255,.07), transparent 25rem),
    radial-gradient(circle at 18% 72%, rgba(255,61,175,.06), transparent 28rem),
    #05060d;
}
body::before {
  content:"";position:fixed;z-index:100;inset:0;pointer-events:none;opacity:.18;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
}
.eyebrow { color:var(--cyan);text-shadow:0 0 14px rgba(0,229,255,.48); }
.section-title { font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;font-weight:800;text-shadow:0 0 30px rgba(132,92,255,.12); }
.section-lead,.manifesto-copy p,.project-tile p,.summary { color:var(--muted); }

.site-header { border-bottom:1px solid rgba(132,92,255,.12); }
.site-header.is-scrolled { background:rgba(5,6,13,.82);border-color:rgba(0,229,255,.2); }
.brand-copy small { color:var(--cyan); }
.site-nav { color:#b4bdd1; }
.site-nav a::after { background:linear-gradient(90deg,var(--pink),var(--cyan));box-shadow:0 0 12px var(--cyan); }
.site-nav .official-site-link { color:var(--cyan);border-color:rgba(0,229,255,.5);background:rgba(0,229,255,.04); }
.site-nav .official-site-link:hover { color:#041014;background:var(--cyan); }
.menu-button { color:#05060d;background:var(--cyan); }

.hero {
  background:
    linear-gradient(132deg,transparent 0 48.8%,rgba(0,229,255,.12) 49%,transparent 49.18%),
    linear-gradient(27deg,transparent 0 61.8%,rgba(255,61,175,.1) 62%,transparent 62.2%),
    #03040a;
}
.hero-grid { display:block;position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(0,229,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.11) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent 5%,#000 40%,transparent 94%);transform:perspective(700px) rotateX(63deg) scale(1.8) translateY(22%);transform-origin:center bottom; }
.aurora { inset:0;filter:none;opacity:1;transform:none;overflow:hidden; }
.aurora i { left:-20%;width:145%;height:2px;border-radius:0;mix-blend-mode:screen;box-shadow:0 0 8px currentColor,0 0 30px currentColor; }
.aurora i:nth-child(1) { top:21%;color:var(--cyan);background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:laser-sweep 8s ease-in-out infinite alternate;transform:rotate(-12deg); }
.aurora i:nth-child(2) { top:68%;color:var(--pink);background:linear-gradient(90deg,transparent,var(--pink),transparent);animation:laser-sweep 10s ease-in-out -4s infinite alternate-reverse;transform:rotate(8deg); }
.aurora i:nth-child(3) { top:43%;height:1px;color:var(--violet);background:linear-gradient(90deg,transparent,var(--violet),transparent);animation:laser-pulse 5s ease-in-out infinite;transform:rotate(-3deg); }
.aurora i:nth-child(4) { top:83%;height:1px;color:var(--cyan);background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:laser-pulse 6s ease-in-out -2s infinite;transform:rotate(14deg); }
.aurora i:nth-child(5) { top:34%;height:1px;color:var(--pink);background:linear-gradient(90deg,transparent 8%,var(--pink),transparent 82%);box-shadow:0 0 6px currentColor,0 0 18px currentColor;opacity:.48;animation:laser-pulse 7s ease-in-out -3s infinite;transform:rotate(17deg); }
.aurora i:nth-child(6) { top:57%;height:1px;color:var(--cyan);background:linear-gradient(90deg,transparent 18%,var(--cyan),transparent 92%);box-shadow:0 0 5px currentColor,0 0 16px currentColor;opacity:.42;animation:laser-pulse 8s ease-in-out -5s infinite;transform:rotate(-16deg); }
.hero-copy::before { inset:-70px -130px;background:radial-gradient(ellipse at center,rgba(5,6,13,.94) 0 35%,rgba(5,6,13,.7) 58%,transparent 78%); }
.hero-copy { transform:translateY(-8px); }
.hero-kicker { color:#cbd4e8;border-color:rgba(132,92,255,.6);background:rgba(8,9,21,.72);box-shadow:inset 0 0 22px rgba(132,92,255,.08);cursor:default; }
.hero-kicker::before { border-radius:0;background:var(--pink);box-shadow:0 0 14px var(--pink);transform:rotate(45deg); }
.hero-kicker:hover { color:#cbd4e8;border-color:rgba(132,92,255,.6);background:rgba(8,9,21,.72); }
.hero h1 span { color:transparent;font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;font-size:clamp(2.45rem,5vw,4.8rem);font-weight:800;letter-spacing:-.045em;background:linear-gradient(90deg,#ff4fbd 0%,#a760ff 22%,#477cff 43%,var(--cyan) 62%,#5b72ff 82%,#ff4fbd 100%);background-size:260% 100%;background-position:0 50%;background-clip:text;-webkit-background-clip:text;filter:drop-shadow(0 0 11px rgba(132,92,255,.32)) drop-shadow(0 0 25px rgba(0,229,255,.16));animation:title-spectrum 10s ease-in-out infinite alternate;will-change:background-position; }
.hero h1 { margin:20px 0 22px;line-height:1.03; }
.hero h1 strong { margin-top:.2em;color:var(--ink);font-size:clamp(1.75rem,3.65vw,3.55rem);letter-spacing:-.075em; }
.hero .tagline { margin:0 0 18px;line-height:1.45; }
.hero .intro { max-width:650px;margin:0 auto 28px;color:var(--muted);line-height:1.85;letter-spacing:.015em; }
.hero .intro-lead { color:#cbd4e8;font-weight:700;letter-spacing:.055em; }
.hero-stats { margin-top:28px; }
.project-tile h3,.card-body h3,.output-card h3 { font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;font-weight:700;letter-spacing:-.025em; }
.single-project h1 { font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;font-weight:800; }
.button { color:var(--cyan);border-color:rgba(0,229,255,.58);background:rgba(4,8,18,.72);box-shadow:inset 0 0 20px rgba(0,229,255,.04);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); }
.button.primary { color:#fff;border-color:var(--pink);background:linear-gradient(100deg,rgba(255,61,175,.82),rgba(132,92,255,.82));box-shadow:0 0 24px rgba(255,61,175,.2); }
.button:hover,.button.primary:hover { color:#05060d;border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 28px rgba(0,229,255,.38); }
.stat strong { color:var(--violet);text-shadow:0 0 16px rgba(132,92,255,.45); }
.stat span { color:var(--muted); }
.orbit-chip { color:#d9e4f5;border-color:rgba(0,229,255,.4);border-left-color:var(--cyan);background:rgba(6,8,18,.82);box-shadow:0 0 24px rgba(0,229,255,.09); }
.orbit-chip::after { border-radius:0;background:var(--pink);box-shadow:0 0 10px var(--pink);transform:rotate(45deg); }
.orbit-chip small { color:var(--cyan); }
.hero-scroll-cue { color:var(--cyan);text-shadow:0 0 14px var(--cyan); }

@media (min-width:1400px) and (min-height:1000px) {
  .hero-copy { transform:translateY(-8px) scale(1.16);transform-origin:center; }
}
@media (min-width:1600px) and (min-height:1200px) {
  .hero-copy { transform:translateY(-8px) scale(1.28); }
}

.manifesto { background:linear-gradient(145deg,rgba(132,92,255,.04),transparent 42%); }
.archive-disc { border-radius:16px;background:linear-gradient(135deg,var(--pink),var(--violet) 42%,var(--cyan));padding:1px;animation:none;clip-path:polygon(0 0,84% 0,100% 16%,100% 100%,16% 100%,0 84%);box-shadow:0 0 45px rgba(132,92,255,.13); }
.archive-disc-inner { border-radius:15px;background:linear-gradient(145deg,#0e1020,#05060d);animation:none;clip-path:inherit; }
.manifesto-copy > .eyebrow { color:var(--pink); }
.manifesto-copy .large { color:var(--ink); }

.now-section,.timeline-section,.collab-section { color:var(--ink);background:#070914; }
.manifesto,.now-section,.timeline-section,.collab-section { z-index:1;background:rgba(7,9,20,.88); }
.content-light-field {
  position:absolute;z-index:2;top:100svh;right:0;bottom:0;left:0;pointer-events:none;opacity:.32;overflow:hidden;
  background:
    repeating-linear-gradient(168deg,transparent 0 310px,rgba(0,229,255,.36) 312px,rgba(0,229,255,.04) 314px,transparent 320px,transparent 720px),
    repeating-linear-gradient(12deg,transparent 0 440px,rgba(255,61,175,.28) 442px,rgba(132,92,255,.05) 444px,transparent 450px,transparent 860px),
    repeating-linear-gradient(154deg,transparent 0 690px,rgba(132,92,255,.2) 691px,rgba(132,92,255,.03) 693px,transparent 698px,transparent 1180px),
    repeating-linear-gradient(26deg,transparent 0 560px,rgba(0,229,255,.17) 561px,rgba(0,229,255,.025) 563px,transparent 568px,transparent 1040px);
  background-position:0 0,0 180px,120px 80px,-100px 330px;
  filter:drop-shadow(0 0 13px rgba(0,229,255,.25));
  animation:content-light-flow 18s ease-in-out infinite alternate;
  will-change:background-position,opacity;
}
.manifesto > .container,.now-section > .container,.timeline-section > .container,.collab-section > .container { position:relative;z-index:3; }
.timeline-section .section-lead { max-width:none; }
.now-section::before { background:linear-gradient(118deg,rgba(255,61,175,.06),transparent 35%,rgba(0,229,255,.05)); }
.now-section .section-lead { max-width:none;white-space:nowrap; }
.now-section .eyebrow,.manifesto-copy > .eyebrow { color:var(--pink); }
.project-tile,.output-card { color:var(--ink);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:linear-gradient(145deg,rgba(17,19,36,.95),rgba(6,8,18,.9));box-shadow:inset 0 1px rgba(255,255,255,.035); }
.project-tile:hover { box-shadow:var(--shadow),0 0 28px color-mix(in srgb,var(--accent) 14%,transparent); }
.timeline-toolbar button { color:#b9c2d5;border-color:#303650;background:#0a0c18; }
.timeline-toolbar button:hover,.timeline-toolbar button.is-active { color:#05060d;border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 18px rgba(0,229,255,.2); }
.timeline::before { width:1px;background:linear-gradient(var(--pink),var(--violet),var(--cyan));box-shadow:0 0 14px rgba(0,229,255,.3); }
.year-label { color:var(--ink);text-shadow:0 0 22px rgba(132,92,255,.35); }
.year-label::after { border-radius:0;border-color:#070914;background:var(--cyan);box-shadow:0 0 14px var(--cyan);transform:rotate(45deg); }
.year-group:first-child .year-label::after { background:var(--pink);box-shadow:0 0 14px var(--pink); }
.timeline-card { color:var(--ink);border-color:rgba(132,92,255,.2);background:linear-gradient(to right,color-mix(in srgb,var(--accent) 10%,#070914) 0 var(--visual-width),rgba(10,12,25,.96) var(--visual-width));box-shadow:inset 0 1px rgba(255,255,255,.03),0 16px 50px rgba(0,0,0,.25); }
.timeline-card:hover { border-color:var(--accent);box-shadow:var(--shadow),0 0 22px color-mix(in srgb,var(--accent) 13%,transparent); }
.card-visual { background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 15%,#070914),#060712); }
.card-visual::before { width:150%;height:1px;border:0;border-radius:0;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 15px var(--accent);transform:rotate(-18deg); }
.card-visual::after { width:75%;height:1px;border:0;border-radius:0;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 9px var(--accent);transform:translate(18%,58px) rotate(12deg); }
.timeline-card.has-thumbnail .card-visual::before,.timeline-card.has-thumbnail .card-visual::after { display:none; }
.visual-icon { filter:drop-shadow(0 0 18px var(--accent)); }
.card-skills { border-color:rgba(0,229,255,.14); }
.pill { color:color-mix(in srgb,var(--accent) 82%,#fff);background:color-mix(in srgb,var(--accent) 13%,#080a16);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); }
.collab { color:var(--yellow); }
.collab-teacher-link { text-decoration:underline;text-decoration-color:rgba(255,232,102,.45);text-underline-offset:3px;transition:.18s; }
.collab-teacher-link:hover { color:var(--cyan);text-decoration-color:var(--cyan); }
.skill-tags span { color:#c7cce0;background:#141327;border-color:#32304f; }
.detail-link { color:var(--accent);text-shadow:0 0 12px color-mix(in srgb,var(--accent) 36%,transparent); }
.research-links { border-color:rgba(0,229,255,.15); }
.research-links > summary { color:var(--cyan); }
.research-links a,.research-item { color:#c8f7ff;border-color:rgba(0,229,255,.28);background:rgba(0,229,255,.05); }
.research-links a:hover { background:rgba(132,92,255,.16); }

.collab-pill { color:#dce4f3;border-color:#30384d;background:#0b0d19;box-shadow:3px 3px 0 #1c2133; }
.collab-pill:hover { color:var(--cyan);border-color:var(--cyan);box-shadow:3px 3px 0 rgba(0,229,255,.35); }
.site-footer { background:#020309;border-top:1px solid rgba(132,92,255,.2); }
.site-footer p,.footer-site-link { color:#929db4; }
.site-footer .footer-grid > div > p { margin-left:49px; }
.site-footer .footer-grid > div > p:first-of-type { margin-top:11px; }
.site-footer .footer-grid > div > p + p { margin-top:4px; }
.footer-site-link { border-color:var(--pink); }
.floating-back-top { color:#05060d;border-color:var(--cyan);border-radius:4px;background:var(--cyan);box-shadow:0 0 25px rgba(0,229,255,.24);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)); }
.floating-back-top:hover { background:var(--pink); }

@keyframes laser-sweep { 0% { translate:-9% -45px;opacity:.25; } 45% { opacity:1; } 100% { translate:9% 55px;opacity:.38; } }
@keyframes laser-pulse { 0%,100% { opacity:.12;filter:brightness(.6); } 50% { opacity:.75;filter:brightness(1.6); } }
@keyframes title-spectrum { 0% { background-position:0% 50%; } 50% { background-position:48% 50%; } 100% { background-position:100% 50%; } }
@keyframes content-light-flow { 0% { background-position:-80px 0,70px 180px,120px 80px,-100px 330px;opacity:.22; } 50% { opacity:.38; } 100% { background-position:90px 240px,-60px 420px,-40px 300px,80px 120px;opacity:.28; } }

@media (max-width:900px) {
  .site-nav { background:rgba(6,8,18,.96);border-color:rgba(0,229,255,.2); }
}
@media (max-width:640px) {
  .timeline-card { background:#090b17; }
  .card-skills { border-color:rgba(0,229,255,.14); }
  .hero-grid { background-size:46px 46px; }
  .hero h1 span { font-size:clamp(2.1rem,11.8vw,3.25rem); }
  .hero h1 strong { font-size:clamp(1.42rem,7vw,2rem); }
  .hero-copy { transform:translateY(-4px); }
  .desktop-break { display:none; }
  .now-section .section-lead { white-space:normal; }
}