/* Research archive. Tokens, type, width and navigation match ../styles.css so both pages read as one site. */
:root{
  color-scheme:light;
  --bg:#f2f5fa;--surface:rgba(255,255,255,.56);--surface-hover:rgba(255,255,255,.76);--line:#dce4ef;
  --glass-line:rgba(255,255,255,.84);--inset:rgba(255,255,255,.9);
  --ink:#202c40;--muted:#606e82;--faint:#647287;--link:#365f9d;--accent:#406eb4;
  --glass-shadow:0 12px 40px -24px rgba(37,56,94,.24);--hover-shadow:0 20px 42px -24px rgba(37,56,94,.34);
  --topbar:rgba(246,249,253,.72);--btn:#263b58;--btn-ink:#fff;
  --dialog:rgba(245,248,253,.9);--backdrop:rgba(24,36,58,.38);--figure:#fff;
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#111824;--surface:rgba(36,48,67,.55);--surface-hover:rgba(46,60,82,.75);--line:#2a374b;
    --glass-line:rgba(255,255,255,.07);--inset:rgba(255,255,255,.04);
    --ink:#e4eaf3;--muted:#a5b1c2;--faint:#8e9bb0;--link:#93b6ec;--accent:#83a9e8;
    --glass-shadow:0 12px 40px -24px rgba(0,0,0,.6);--hover-shadow:0 20px 42px -24px rgba(0,0,0,.7);
    --topbar:rgba(17,24,36,.72);--btn:#d7e3f5;--btn-ink:#14213a;
    --dialog:rgba(22,30,44,.92);--backdrop:rgba(5,9,16,.6);--figure:#f4f6f9;
  }
  body::before{opacity:.4}
}
*{box-sizing:border-box}
body{isolation:isolate;margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 6% 20%,rgba(164,197,246,.28),transparent 48%),radial-gradient(ellipse at 98% 45%,rgba(215,195,236,.23),transparent 48%),radial-gradient(ellipse at 48% 95%,rgba(176,216,211,.2),transparent 55%)}
body.modal-open{overflow:hidden}
[lang="ja"]{font-family:"Noto Sans JP",Inter,system-ui,sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid #5085d2;outline-offset:4px}
.wrap{width:min(960px,calc(100% - 32px));margin:0 auto}

/* Navigation: copy of the homepage topbar */
.topbar{position:sticky;top:0;z-index:10;background:var(--topbar);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid var(--glass-line)}
.topbar::before{content:"";display:block;height:3px;background:linear-gradient(90deg,#9dbbe7,#c5c4e5 50%,#b8d6d4)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:56px}
.brand{font-weight:700;color:var(--ink);white-space:nowrap}
.brand span{font-weight:500;color:var(--faint);margin-left:6px}
.brand:hover{text-decoration:none}
.nav-links{display:flex;gap:22px;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{padding:17px 0;color:var(--muted);font-size:15px;font-weight:500;white-space:nowrap}
.nav-links a:hover{color:var(--ink);text-decoration:none}
.nav-links a.active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}

/* Heading */
main.wrap{padding:64px 0 0}
.heading{margin-bottom:36px}
.kicker{margin:0 0 10px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
h1{margin:0;font-size:44px;line-height:1.15;font-weight:700;letter-spacing:-.03em}
h1 em{font-style:normal;color:var(--accent)}
.intro{margin:12px 0 0;font-size:16.5px;color:var(--muted)}

/* Filters */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.filters{display:flex;flex-wrap:wrap;gap:4px;max-width:100%;padding:5px;border:1px solid var(--glass-line);border-radius:13px;background:var(--surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 16px -12px rgba(37,56,94,.35)}
.filters button{padding:5px 14px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:14px;font-weight:500;cursor:pointer;transition:background .18s,color .18s}
.filters button:hover{background:var(--surface-hover);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink);box-shadow:0 3px 8px -4px #253a5d}
.result-count{white-space:nowrap;font-size:14px;color:var(--faint);font-variant-numeric:tabular-nums}
.year-section{margin-bottom:40px}
.year-heading{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;font-size:20px;font-weight:700;letter-spacing:-.015em}
.year-heading::after{content:"";align-self:center;height:1px;flex:1;background:var(--line)}
.year-heading small{font-size:13px;color:var(--faint);font-weight:500;letter-spacing:0}

/* Cards */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
.project{min-width:0}
.project-button{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:9px;text-align:left;border:1px solid var(--glass-line);border-radius:20px;background:var(--surface);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--inset);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);cursor:pointer;transition:transform .22s,box-shadow .22s,background .22s}
.project-button:hover{transform:translateY(-4px);background:var(--surface-hover);box-shadow:var(--hover-shadow)}
.card-media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:var(--figure)}
.card-media img,.card-media video{display:block;width:100%;height:100%;object-fit:cover}
.card-media.figure img{object-fit:contain}
.media-mark{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid rgba(255,255,255,.3);border-radius:20px;background:rgba(16,27,43,.55);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:12px;font-weight:500}
.play-icon{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid #fff}
.card-body{display:block;padding:12px 10px 14px}
.card-venue{display:block;min-height:20px;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--accent)}
.project h3{margin:4px 0 4px;font-size:17px;line-height:1.25;font-weight:700}
.card-summary{display:block;margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.card-arrow{position:absolute;right:18px;bottom:14px;color:var(--accent);font-size:16px;opacity:0;transition:opacity .2s}
.project-button:hover .card-arrow,.project-button:focus-visible .card-arrow{opacity:1}
/* "Selected" view: the first project spans the row, like the homepage feature card. */
.gallery.featured>.project:first-child{grid-column:1/-1}
.gallery.featured>.project:first-child .project-button{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:center;padding:10px}
.gallery.featured>.project:first-child .card-body{padding:12px}
.gallery.featured>.project:first-child h3{font-size:24px}
.gallery.featured>.project:first-child .card-summary{font-size:15px}

.footer{margin-top:24px;padding:48px 0 40px;font-size:13px;color:var(--faint)}
.footer a{color:inherit}
.footer a:hover{color:var(--accent);text-decoration:none}

/* Detail dialog */
#project-dialog{position:fixed;width:min(860px,calc(100% - 40px));max-height:calc(100dvh - 56px);padding:10px;border:1px solid var(--glass-line);border-radius:24px;overflow:auto;overscroll-behavior:contain;color:var(--ink);background:var(--dialog);box-shadow:0 40px 140px rgba(20,35,61,.3);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px)}
#project-dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.close{position:sticky;top:4px;z-index:2;float:right;display:grid;place-items:center;width:36px;height:36px;margin:4px 4px -44px 0;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(32,45,64,.7);color:#fff;font-size:25px;line-height:1;cursor:pointer;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.close:hover{background:#263b58}
.detail-media{overflow:hidden;border-radius:15px;background:var(--figure)}
.detail-media video,.detail-media img{display:block;width:100%;max-height:48dvh;object-fit:contain;background:var(--figure)}
.detail-media video{background:#101721}
.detail-body{padding:24px 26px 22px}
.version-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.version-tabs[hidden]{display:none}
.version-tabs button{padding:5px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:13px;font-weight:500;cursor:pointer}
.version-tabs button[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.detail-meta{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--accent)}
.detail-body h2{margin:0;font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.detail-summary{font-size:17px;line-height:1.6;margin:12px 0 18px}
.detail-text p{margin:0 0 12px;font-size:15px;line-height:1.75;color:var(--muted)}
.detail-source{margin:20px 0 0;font-size:12.5px;color:var(--faint)}
.detail-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.detail-links a{padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:14px;font-weight:500;color:var(--ink)}
.detail-links a:hover{border-color:var(--accent);text-decoration:none}

/* Unpublished placeholders use only abstract shapes: no protected image or text is loaded. */
.locked-button,.locked-button:hover{cursor:default;transform:none;box-shadow:var(--glass-shadow);opacity:1}
.locked-preview{position:relative;display:block;aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:12px;background:linear-gradient(135deg,#dce5f1,#e9e5ee 55%,#dce8e8)}
.locked-preview::before,.locked-preview::after{content:"";position:absolute;width:60%;height:85%;border-radius:50%;filter:blur(25px);background:rgba(111,143,188,.25);transform:rotate(-20deg);left:0;top:0}
.locked-preview::after{left:50%;top:35%;background:rgba(164,150,189,.2)}
.locked-skeleton{position:absolute;inset:24%;display:flex;flex-direction:column;justify-content:center;gap:16px;filter:blur(12px);opacity:.4}
.locked-bar{display:block;height:14px;border-radius:20px;background:#8093ae}
.locked-bar:nth-child(2){width:70%}.locked-bar:nth-child(3){width:85%}
.locked-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#455870;font-size:13px;font-weight:500;background:rgba(245,248,252,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lock-glyph{position:relative;display:block;width:19px;height:15px;border:1.6px solid currentColor;border-radius:4px;margin-top:8px}
.lock-glyph::before{content:"";position:absolute;width:10px;height:10px;left:3px;top:-10px;border:1.6px solid currentColor;border-bottom:0;border-radius:8px 8px 0 0}
.version-tabs .unpublished-version{cursor:default;border-style:dashed;background:transparent;color:var(--faint);opacity:.8}
@media (prefers-color-scheme:dark){
  .locked-preview{background:linear-gradient(135deg,#243247,#2b2a3c 55%,#22333a)}
  .locked-overlay{color:#b4c1d3;background:rgba(17,24,36,.25)}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
@supports not (backdrop-filter:blur(1px)){.project-button,.filters{background:var(--bg)}#project-dialog{background:var(--bg)}}

@media (max-width:760px){
  /* Two-row navigation: name on top, all six sections below */
  .nav{flex-direction:column;align-items:stretch;gap:0;height:auto}
  .brand{padding:10px 0 2px}
  .nav-links{gap:0;justify-content:space-between}
  .nav-links a{padding:8px 0 10px;font-size:14px}
  main.wrap{padding-top:32px}
  h1{font-size:34px}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery.featured>.project:first-child .project-button{grid-template-columns:1fr;gap:0}
  .gallery.featured>.project:first-child .card-body{padding:12px 10px 14px}
  .toolbar{align-items:flex-start}
  .result-count{padding-top:9px}
}
@media (max-width:560px){
  .toolbar{display:block;margin-bottom:24px}
  .filters{gap:2px}
  .filters button{padding:5px 10px;font-size:13.5px}
  .result-count{display:block;margin-top:12px;padding:0}
  .gallery{grid-template-columns:1fr;gap:16px}
  .card-arrow{opacity:1}
  .detail-body{padding:20px 14px 18px}
  .detail-body h2{font-size:24px}
  .detail-summary{font-size:16px}
  #project-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 24px);border-radius:20px}
}
@media (max-width:370px){.nav-links a{font-size:13px}}