/* ===== 羽子田京佑 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} }

/* 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}}