/* ===== 羽子田京佑 portfolio — shared design system ===== */
:root{
  --paper:#F3EEE2; --paper-2:#EAE3D3; --ink:#131211;
  --red:#FF4A2E; --blue:#2B4CFF; --yellow:#FFC93C; --pink:#FF5FA2;
  --grad-warm:linear-gradient(120deg,#FF4A2E 0%,#FF8A2C 48%,#FFC93C 100%);
  --grad-cool:linear-gradient(130deg,#2B4CFF 0%,#7A3CFF 55%,#C13CFF 100%);
  --grad-pop:linear-gradient(120deg,#FF5FA2 0%,#FF8A5B 55%,#FFC93C 100%);
  --disp:"Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  --body:"Helvetica Neue","Inter",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --jp:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Yu Gothic UI",Meiryo,sans-serif;
  --pad:clamp(18px,4.5vw,64px); --bw:3px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--body);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* buttons (light chip on dark) */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:13px 20px;border:var(--bw) solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 var(--yellow);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--yellow)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--yellow)}
.btn.solid{background:var(--yellow)}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:6px 6px 0 var(--red)}
.btn.ghost:hover{box-shadow:8px 8px 0 var(--red)}

/* ===== NAV (shared across pages) ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:74px;padding:0 var(--pad)}
.nav .logo{display:flex;align-items:center;gap:11px;font-family:var(--jp);font-weight:700;letter-spacing:.14em;font-size:24px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.nav .logo .mark{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #fff;flex:none}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links a{position:relative;font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.14em;color:#fff;opacity:.72;padding:10px 15px;text-shadow:0 1px 8px rgba(0,0,0,.45);transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1}
.nav-links a.active::after{content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px;background:currentColor}
@media(max-width:520px){ .nav-links a{padding:9px 10px;font-size:12px;letter-spacing:.08em} .nav .logo{font-size:19px;letter-spacing:.1em} }

/* 左下の目次（上のナビの代わり。薄いすりガラス＋背景に応じて文字色を出し分け） */
.toc{position:fixed;left:clamp(14px,2.6vw,26px);bottom:clamp(14px,2.8vh,24px);z-index:100;display:flex;flex-direction:column;gap:2px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 16px 13px;background:rgba(18,18,20,.42);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.toc a{color:#fff;opacity:.62;transition:opacity .2s;width:max-content;padding:2px 0 2px 15px;position:relative}
.toc a:hover,.toc a.active{opacity:1}
.toc a.active::before{content:"▸";position:absolute;left:0;top:2px;font-size:10px}
.toc .home{font-family:var(--jp);text-transform:none;letter-spacing:.08em;font-size:15px;font-weight:700;opacity:.95;padding-left:0;margin-bottom:6px}
body.gallery .toc{background:rgba(255,255,255,.8)}
body.desk .toc{background:rgba(243,238,226,.74)}
body.gallery .toc a,body.desk .toc a{color:var(--ink)}
@media(max-width:520px){ .toc{left:10px;bottom:10px;font-size:11px;padding:10px 13px} .toc .home{font-size:13px} }

/* Win95 タスクバー（TOPと共通・全ページ下部に流用） */
.taskbar{--w-face:#c0c0c0;--w-hi:#fff;--w-lt:#dfdfdf;--w-sh:#808080;--w-dk:#0a0a0a;--w-nav:#000080;--w-ui:"MS Sans Serif",Tahoma,Geneva,Verdana,sans-serif;
  position:fixed;left:0;right:0;bottom:0;height:30px;background:var(--w-face);box-shadow:inset 0 1px 0 var(--w-hi),inset 0 2px 0 var(--w-lt);
  display:flex;align-items:center;gap:6px;padding:3px 5px;z-index:9999;font-family:Tahoma,var(--w-ui)}
.taskbar .start{display:flex;align-items:center;gap:5px;font-weight:700;font-size:12px;color:#000;text-decoration:none;cursor:pointer;padding:3px 9px 3px 5px;flex:none;background:var(--w-face);box-shadow:inset -1px -1px 0 var(--w-dk),inset 1px 1px 0 var(--w-hi),inset -2px -2px 0 var(--w-sh),inset 2px 2px 0 var(--w-lt)}
.taskbar .start:active{box-shadow:inset 1px 1px 0 var(--w-dk),inset -1px -1px 0 var(--w-hi),inset 2px 2px 0 var(--w-sh),inset -2px -2px 0 var(--w-lt)}
.taskbar .flag{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:16px;height:15px;gap:1px;transform:skewX(-9deg)}
.taskbar .flag i:nth-child(1){background:var(--red)} .taskbar .flag i:nth-child(2){background:var(--yellow)} .taskbar .flag i:nth-child(3){background:var(--blue)} .taskbar .flag i:nth-child(4){background:#00a000}
.taskbar .tbrun{display:flex;gap:5px;flex:1;min-width:0;overflow:hidden}
.taskbar .taskbtn{font-size:11px;color:#000;padding:3px 10px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none;font-family:Tahoma,var(--w-ui);letter-spacing:.02em;box-shadow:inset -1px -1px 0 var(--w-hi),inset 1px 1px 0 var(--w-sh)}
.taskbar .taskbtn:hover{background:rgba(255,255,255,.4)}
.taskbar .taskbtn.on{box-shadow:inset 1px 1px 0 var(--w-dk),inset -1px -1px 0 var(--w-hi),inset 2px 2px 0 var(--w-sh),inset -2px -2px 0 var(--w-lt);font-weight:700}
.taskbar .miniico{width:13px;height:12px;flex:none;background:#fff;box-shadow:inset 0 0 0 1px #000;position:relative}
.taskbar .miniico.note{display:grid;place-items:center;font-size:9px;line-height:1;color:#1db954;font-weight:700}
.taskbar .miniico.play{display:grid;place-items:center;font-size:8px;line-height:1;color:#000}
.taskbar .clock{flex:none;font-size:11px;color:#000;padding:3px 9px;box-shadow:inset -1px -1px 0 var(--w-hi),inset 1px 1px 0 var(--w-sh);font-variant-numeric:tabular-nums}

/* TOP以外（内容ページ＝body直下のタスクバー）＝ネオブルータリズム（白地・極太黒枠・フラット） */
body > .taskbar{height:36px;background:#fff;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-top:var(--bw) solid var(--ink);color:var(--ink);gap:7px;padding:0 10px}
body.gallery > .taskbar,body.desk > .taskbar{background:#fff;color:var(--ink)}
body > .taskbar .start{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:none;font-family:Tahoma,var(--w-ui);font-weight:700;font-size:12px;padding:3px 10px 3px 6px;gap:6px;opacity:1}
body > .taskbar .start:hover{background:var(--ink);color:#fff}
body > .taskbar .flag{opacity:1;filter:none}
body > .taskbar .tbrun{gap:6px}
body > .taskbar .taskbtn{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:none;opacity:1;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding:4px 13px}
body > .taskbar .taskbtn:hover{background:var(--yellow)}
body > .taskbar .taskbtn.on{background:var(--ink);color:#fff}
body > .taskbar .clock{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:none;opacity:1;font-weight:700}

/* タスクバーの高さぶん下に余白（内容ページ） */
body.gallery,body.desk{padding-bottom:48px}

/* motion keyframes */
@keyframes gradFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes floatY{0%,100%{translate:0 0}50%{translate:0 -26px}}
@keyframes floatX{0%,100%{translate:0 0}50%{translate:22px -14px}}
@keyframes spin{to{rotate:360deg}}
@keyframes spinRev{to{rotate:-360deg}}