/* ==========================================================================
   site.css — shared chrome for every hand-made page (Home, Work).
   Page-specific rules stay inline in each page's <style>.
   Tokens follow DESIGN.md §2. Do not add a third accent colour.
   ========================================================================== */

:root{
  --ink:#0d1117;
  --paper:#e9e6df;
  --sheet:#f2f0ea;       /* paper block (from v3 research.html) */
  --sheet-ink:#1a1e24;   /* text on paper */
  --sheet-dim:#5f6874;
  --sheet-line:rgba(26,30,36,.14);
  --blue:#5fa8d3;        /* w < 0 : on dark */
  --blue-ink:#3d7ea6;    /* w < 0 : on paper (same hue, darkened) */
  --red:#d96a5f;         /* w > 0 */
  --dim:#8a919c;
  --line:rgba(233,230,223,.12);
  --side:230px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Sans JP',sans-serif;
  font-weight:300;
  line-height:1.9;
  overflow-x:hidden;
}
::selection{background:var(--blue);color:var(--ink)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:1px solid var(--blue);outline-offset:3px}

/* ---------- Language toggle (sub-pages only; Home is English) ---------- */
body.en .jp{display:none !important}
body:not(.en) .en-t{display:none !important}

/* ---------- Flow field: fixed background ---------- */
#flow{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ---------- Sidebar ---------- */
#side{
  position:fixed;top:0;left:0;bottom:0;width:var(--side);z-index:40;
  padding:2rem 1.4rem;
  border-right:1px solid var(--line);
  background:rgba(13,17,23,.72);
  backdrop-filter:blur(6px);
  display:flex;flex-direction:column;gap:1.8rem;
}
/* Drop the photo in at /assets/img/portrait.jpg — the gradient stays as a
   fallback, so a missing file degrades to a coloured field, not a broken icon. */
#side .avatar{
  width:88px;height:88px;border-radius:50%;overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(160deg,#1a2330,#2a4a66 60%,#3d2b33);
  display:block;flex-shrink:0;
}
#side .avatar img{width:100%;height:100%;object-fit:cover;display:block}
#side .who .name{font-family:'Shippori Mincho',serif;font-size:1.15rem;letter-spacing:.12em}
#side .who .role{
  font-family:'IBM Plex Mono',monospace;font-size:.62rem;
  letter-spacing:.14em;color:var(--dim);margin-top:.3rem;line-height:1.7;
}
#side nav{display:flex;flex-direction:column;gap:.1rem}
#side nav a{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.13em;
  color:var(--dim);text-decoration:none;padding:.55rem 0;
  border-bottom:1px solid var(--line);transition:color .25s;
}
#side nav a:hover,#side nav a[aria-current="page"]{color:var(--paper)}
#side nav a[aria-current="page"]::before{content:"— ";color:var(--blue)}
/* hamburger — mobile only */
#menu-btn{
  display:none;background:none;border:none;cursor:pointer;padding:.4rem;
  width:34px;height:30px;flex-direction:column;justify-content:center;gap:5px;
}
#menu-btn span{
  display:block;height:1px;width:20px;background:var(--paper);
  transition:transform .25s ease,opacity .2s ease;
}
#side.open #menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#side.open #menu-btn span:nth-child(2){opacity:0}
#side.open #menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

#lang{display:flex;gap:.7rem;margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:.7rem}
#lang button{
  background:none;border:none;cursor:pointer;font:inherit;
  color:var(--dim);letter-spacing:.15em;padding:.2rem .1rem;
}
#lang button[aria-pressed="true"]{color:var(--paper);border-bottom:1px solid var(--paper)}

/* ---------- Reynolds HUD ---------- */
#re-hud{
  position:fixed;top:1.2rem;right:1.4rem;z-index:50;
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;
  color:var(--dim);text-align:right;letter-spacing:.05em;
  mix-blend-mode:difference;pointer-events:none;
}
#re-hud .re-val{font-size:1rem;color:var(--paper)}

/* ---------- Layout ---------- */
main{position:relative;z-index:10;margin-left:var(--side)}
.wrap{padding:clamp(3rem,9vh,6rem) clamp(1.4rem,5vw,4rem);max-width:1080px}
.sec-label{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;
  letter-spacing:.28em;color:var(--dim);margin-bottom:2rem;
  display:flex;align-items:center;gap:1rem;
}
.sec-label::after{content:"";flex:1;height:1px;background:var(--line)}

footer{position:relative;z-index:10;margin-left:var(--side)}
footer nav{display:flex;gap:1.4rem;flex-wrap:wrap}
footer a{text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.14em}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Quality floor ---------- */
@media (max-width:860px){
  :root{--side:0px}

  /* the sidebar becomes a sticky header bar; the nav collapses behind
     a hamburger so it can never collide with the Reynolds readout */
  #side{
    position:sticky;top:0;left:auto;bottom:auto;width:auto;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:.9rem;
    padding:.7rem 1.2rem;
    border-right:none;border-bottom:1px solid var(--line);
  }
  #side .avatar{width:36px;height:36px;font-size:0;flex-shrink:0}
  #side .who{flex:1;min-width:0}          /* pushes lang + hamburger right */
  #side .who .name{font-size:1rem}
  #side .who .role{display:none}
  #lang{margin-top:0;order:3}
  #menu-btn{display:flex;order:4}

  #side nav{
    display:none;order:5;flex-basis:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--line);margin-top:.2rem;padding-top:.2rem;
  }
  #side.open nav{display:flex}
  #side nav a{padding:.75rem 0}
  #side nav a:last-child{border-bottom:none}

  /* Re readout: out of the crowded header, into the empty bottom corner */
  #re-hud{top:auto;bottom:.9rem;right:1rem;font-size:.58rem;opacity:.5}
  #re-hud .re-val{font-size:.72rem}

  main,#cv,#visitors,footer{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}