:root{
    --ground:#E5EEE4;            /* flip to #F5F5F5 to compare — one line */
    --ink:#1B201B;
    --muted:rgba(27,32,27,.52);
    --faint:rgba(27,32,27,.12);
    --hair:rgba(27,32,27,.16);
    --accent:#D9A400;
    --island:#EDEDE9;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--ground); color:var(--ink);
    font-family:"IBM Plex Mono","JetBrains Mono",ui-monospace,"Courier New",monospace;
    font-size:14px; line-height:1.55; overflow-x:hidden;
  }
  ::selection{background:var(--accent); color:#fff}
  a{color:inherit; text-decoration:none}
  button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
  button:focus-visible, a:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

  /* ---------- loader ---------- */
  #loader{position:fixed; inset:0; z-index:80; background:var(--ground); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; transition:opacity .6s ease, visibility .6s}
  #loader.gone{opacity:0; visibility:hidden}
  #hello{font-size:clamp(1.5rem,4.5vw,2.6rem); font-weight:400; letter-spacing:.01em; min-height:1.3em; transition:opacity .3s ease}
  #hello.serif{font-family:Georgia,"Times New Roman",serif; font-style:italic}
  #hello.heavy{font-family:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif; text-transform:uppercase; letter-spacing:.02em}
  #hello.mono{font-family:inherit}
  #loader small{color:var(--muted); text-transform:uppercase; letter-spacing:.24em; font-size:.6rem}
  #loadbar{width:min(220px,55vw); height:2px; background:var(--faint); position:relative; overflow:hidden}
  #loadbar i{position:absolute; inset:0; right:100%; background:var(--ink); animation:fill 3s linear forwards}
  @keyframes fill{to{right:0}}

  #plan{position:fixed; inset:0; z-index:0; pointer-events:none}

  /* ---------- abstract house that transforms into the menu, and back ---------- */
  #house{position:fixed; top:20px; right:22px; z-index:40; width:30px; height:30px; color:var(--ink)}
  #house svg{position:absolute; top:50%; left:50%; width:28px; height:28px; margin:-14px 0 0 -14px; transition:opacity .25s ease, transform .34s cubic-bezier(.3,.9,.3,1)}
  #house .ic-house{opacity:1; transform:rotate(0) scale(1)}
  #house .ic-close{opacity:0; transform:rotate(-90deg) scale(.5)}
  #house.open .ic-house{opacity:0; transform:rotate(90deg) scale(.5)}
  #house.open .ic-close{opacity:1; transform:rotate(0) scale(1)}
  #menu{position:fixed; top:60px; right:22px; z-index:39; display:flex; flex-direction:column; align-items:flex-end; gap:15px; text-align:right; pointer-events:none}
  #menu.on{pointer-events:auto}
  #menu > *{opacity:0; transform:translateY(-8px); transition:opacity .2s ease, transform .28s cubic-bezier(.3,.9,.3,1)}
  #menu.on > *{opacity:1; transform:none}
  #menu.on > :nth-child(1){transition-delay:.05s}
  #menu.on > :nth-child(2){transition-delay:.11s}
  #menu.on > :nth-child(3){transition-delay:.17s}
  .m-name{font-family:"Archivo Black","Arial Black",sans-serif; text-transform:uppercase; font-size:.95rem; line-height:1.02; letter-spacing:-.01em; text-align:right; color:var(--muted)}
  .m-item{text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; color:var(--muted)}
  .m-item:hover, .m-name:hover{color:var(--ink)}
  .m-item.active, .m-name.active{color:var(--ink)}
  .m-item.active::after, .m-name.active::after{content:""; display:block; width:22px; height:1px; background:var(--accent); margin:5px 0 0 auto}

  main{position:relative; z-index:1}
  #stage{padding:64px clamp(18px,4vw,64px) 80px; transition:opacity .25s ease, transform .25s ease}

  /* home — the random library */
  .home-hero{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; margin:6px 0 38px}
  .home-hero h1{margin:0; font-family:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif; font-size:clamp(1.9rem,7vw,3.8rem); line-height:1; text-transform:uppercase; letter-spacing:-.01em; white-space:nowrap}
  .home-hero .tagline{color:var(--muted); text-transform:uppercase; letter-spacing:.2em; font-size:clamp(.5rem,1.6vw,.66rem)}
  .libgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px 22px}
  @media(max-width:1040px){.libgrid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:680px){.libgrid{grid-template-columns:repeat(2,1fr)}}
  .lib{display:flex; flex-direction:column; gap:7px; position:relative}
  .lib .box{aspect-ratio:1/1}
  /* V0.6.4: the warehouse number sits BELOW the image (operator request 2026-09-09) */
  .lib .cap{text-align:center}
  .lib .cap .id{font-size:.68rem}

  /* work — 4 genre tiles */
  .worktitle{text-transform:uppercase; letter-spacing:.26em; font-size:.78rem; color:var(--muted); margin:0 0 22px}
  .worktiles{display:grid; grid-template-columns:repeat(4,1fr); gap:30px 24px}
  @media(max-width:900px){.worktiles{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.worktiles{grid-template-columns:1fr}}
  .worktiles .box{aspect-ratio:4/5}
  .worktiles .cap .id{font-size:1.05rem; font-family:"Archivo Black","Arial Black",sans-serif}
  .worktiles .cap .pt{text-transform:uppercase; letter-spacing:.2em; font-size:.66rem}

  /* genre — its projects */
  .genre-head{display:flex; align-items:baseline; gap:14px; margin:0 0 26px}
  .genre-head .n{font-family:"Archivo Black","Arial Black",sans-serif; font-size:clamp(2rem,5vw,3.2rem); line-height:1; letter-spacing:-.02em}
  .genre-head .t{text-transform:uppercase; letter-spacing:.26em; font-size:.78rem; color:var(--muted)}
  .projgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:34px 26px}
  @media(max-width:1040px){.projgrid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:760px){.projgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:460px){.projgrid{grid-template-columns:1fr}}
  .projgrid .box{aspect-ratio:4/5}

  /* shared card bits */
  /* V0.6.4: IDs + titles sit BELOW the tile (operator request 2026-09-09) */
  .proj{display:flex; flex-direction:column; gap:10px; position:relative}
  .box{background:var(--island) var(--art) center/cover no-repeat; border:1px solid var(--faint); cursor:pointer; transition:border-color .25s ease}
  .proj:hover .box, .lib:hover .box{border-color:var(--ink)}
  figure{margin:0}
  .cap{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px}
  .cap .id{font-size:.8rem; letter-spacing:.06em; font-variant-numeric:tabular-nums}
  .cap .pt{font-size:.72rem; color:var(--muted)}

  /* detail */
  .detail{max-width:1120px}
  .fields{display:flex; flex-wrap:wrap; gap:22px 44px; margin:0 0 26px}
  .fields .f{display:flex; flex-direction:column; gap:3px; min-width:112px; opacity:0; transform:translateY(12px); transition:opacity .55s ease, transform .55s ease}
  .detail.settled .f{opacity:1; transform:none}
  .detail.settled .f:nth-child(1){transition-delay:.06s}
  .detail.settled .f:nth-child(2){transition-delay:.18s}
  .detail.settled .f:nth-child(3){transition-delay:.30s}
  .detail.settled .f:nth-child(4){transition-delay:.42s}
  .fields .fn{font-family:"Archivo Black","Arial Black",sans-serif; font-size:1.9rem; line-height:1; letter-spacing:-.01em}
  .fields .fl{text-transform:uppercase; letter-spacing:.18em; font-size:.6rem; color:var(--muted); margin-top:5px}
  .fields .fv{font-size:.82rem}
  .f.flash .fn, .f.flash .fv{animation:flash .45s ease}
  @keyframes flash{from{opacity:.12}to{opacity:1}}

  .d-grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:34px}
  @media(max-width:820px){.d-grid{grid-template-columns:1fr}}
  #d-hero{aspect-ratio:4/3; background:var(--island) var(--art) center/cover no-repeat; border:1px solid var(--faint); opacity:0; transition:opacity .3s ease}
  #d-caption{margin-top:10px; font-size:.78rem; color:var(--muted)}
  #d-caption .id{color:var(--ink); font-variant-numeric:tabular-nums}
  .d-meta h2{font-family:"Archivo Black","Arial Black",sans-serif; font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.02; margin:0 0 4px; text-transform:uppercase; letter-spacing:-.01em}
  .d-meta h3{font-size:.85rem; font-weight:400; color:var(--muted); margin:0 0 18px}
  dl{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:0; font-size:.78rem}
  dt{text-transform:uppercase; letter-spacing:.14em; font-size:.6rem; color:var(--muted); padding-top:2px}
  dd{margin:0}
  .d-desc{margin:18px 0 0; font-size:.82rem; line-height:1.62; max-width:52ch}
  .d-thumbs{margin-top:42px}
  .d-thumbs h4{text-transform:uppercase; letter-spacing:.2em; font-size:.64rem; color:var(--muted); font-weight:400; margin:0 0 14px}
  .thumbrow{display:flex; gap:14px; overflow-x:auto; padding-bottom:8px}
  .thumbrow .t{flex:0 0 auto; width:104px; cursor:pointer; position:relative}
  .thumbrow .t .ph{width:100%; aspect-ratio:1; background:var(--island) var(--art) center/cover no-repeat; border:1px solid var(--faint); transition:border-color .2s ease}
  .thumbrow .t.cur .ph{border-color:var(--ink); outline:2px solid var(--accent); outline-offset:-1px}
  .thumbrow .t:hover .ph{border-color:var(--ink)}
  .thumbrow .t small{display:block; font-size:.58rem; color:var(--muted); margin-top:4px; letter-spacing:.05em; font-variant-numeric:tabular-nums; text-align:center}

  /* info */
  .info{max-width:1020px}
  .i-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:40px; margin-top:26px}
  .i-cols h4{text-transform:uppercase; letter-spacing:.2em; font-size:.64rem; font-weight:400; margin:0 0 14px; border-bottom:1px solid var(--ink); padding-bottom:6px}
  .cvitem{margin-bottom:14px; font-size:.78rem}
  .cvitem b{display:block; font-weight:700; font-size:.66rem; letter-spacing:.08em}
  .lang{margin-bottom:12px; font-size:.72rem}
  .lang .bar{height:3px; background:var(--faint); margin-top:5px; position:relative}
  .lang .bar i{position:absolute; inset:0; right:var(--r); background:var(--ink)}
  .lang small{color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-size:.58rem}
  .info h2.big{font-family:"Archivo Black","Arial Black",sans-serif; text-transform:uppercase; margin:0 0 16px; font-size:clamp(1.4rem,3vw,2rem)}
  .bio{max-width:62ch; font-size:.85rem}

  footer{position:relative; z-index:1; padding:26px clamp(18px,4vw,64px) 40px; color:var(--muted); font-size:.64rem; letter-spacing:.08em; border-top:1px solid var(--faint); display:flex; flex-wrap:wrap; gap:8px 30px; justify-content:space-between}
  #toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,80px); z-index:70; background:var(--ink); color:var(--ground); padding:8px 16px; font-size:.7rem; letter-spacing:.1em; transition:transform .3s ease; text-transform:uppercase}
  #toast.show{transform:translate(-50%,0)}

  /* ---------- mobile guards (no bleed) ---------- */
  @media(max-width:600px){
    #stage{padding:58px 16px 70px}
    .home-hero{margin:2px 0 26px}
    .home-hero h1{white-space:normal; font-size:clamp(1.5rem,8.5vw,2.4rem)}
    .home-hero .tagline{font-size:.56rem; letter-spacing:.14em}
    .fields{gap:16px 24px}
    .fields .f{min-width:calc(50% - 12px)}
    .d-grid{gap:22px}
    .d-desc{max-width:100%}
    footer{flex-direction:column; gap:6px}
    #house{top:16px; right:16px}
    #menu{right:16px}
  }

  @media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }

/* ---- SSG progressive enhancement: multi-page + view-transition flip ---- */
@view-transition { navigation: auto; }
html:not(.js) #loader{ display:none; }
html:not(.js) #house{ display:none; }
html:not(.js) #menu{ pointer-events:auto; }
/* menu items: visible with JS off; JS collapses them into the house */
#menu > *{ opacity:1; transform:none; }
html.js #menu > *{ opacity:0; transform:translateY(-8px); }
html.js #menu.on > *{ opacity:1; transform:none; }
/* hero + number-fields safe without JS, animated with it */
#d-hero{ opacity:1; }
html.js #d-hero{ opacity:0; }
html.js #d-hero.in{ opacity:1; }
.fields .f{ opacity:1; transform:none; }
html.js .detail:not(.settled) .f{ opacity:0; transform:translateY(12px); }