:root{ --paper:#ECE5D3; --paper-dim:#E2DABF; --ink:#221F1A; --ink-soft:#55503F; --rule:#C9BFA0; --stamp:#F5450C; --ledger:#345750; }
  *{ box-sizing:border-box; }
  body{ margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif; line-height:1.5; }
  .wrap{ max-width:900px; margin:0 auto; padding:0 24px 80px; }
  .dec{ text-transform:lowercase; }
  .cond{ font-family:'Arial Narrow','Helvetica Neue',Arial,sans-serif; font-weight:800; text-transform:uppercase; }
  .mono{ font-family:'Courier New',monospace; }

  .artist-tabs{ display:flex; gap:8px; margin:0 0 22px; flex-wrap:wrap; }
  .artist-tab{ font-family:'Courier New',monospace; font-size:12.5px; letter-spacing:.03em; padding:9px 16px; background:var(--paper-dim); border:1px solid var(--rule); cursor:pointer; color:var(--ink-soft); }
  .artist-tab.active{ background:var(--stamp); color:var(--paper); border-color:var(--stamp); }
  .count{ font-family:'Courier New',monospace; font-size:13px; color:var(--ink-soft); margin:0 0 16px; }

  /* index grid */
  .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:26px 22px; }
  .card{ display:block; text-decoration:none; color:inherit; }
  .card .cv{ aspect-ratio:1/1; background:var(--paper-dim); box-shadow:0 3px 10px rgba(0,0,0,.28); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
  .card .cv img{ width:100%; height:100%; object-fit:cover; display:block; }
  .card .cv.none{ color:var(--ink-soft); font-family:'Courier New',monospace; font-size:13px; padding:12px; text-align:center; }
  .card:hover .cv, .card:focus-visible .cv{ outline:3px solid var(--stamp); outline-offset:2px; }
  .card .t{ font-family:'Arial Narrow','Helvetica Neue',Arial,sans-serif; font-weight:800; text-transform:uppercase; font-size:16.5px; line-height:1.15; margin-top:10px; }
  .card:hover .t{ color:var(--stamp); }
  .card .y{ font-family:'Courier New',monospace; font-size:13px; color:var(--ink-soft); margin-top:2px; }

  /* sections */
  .snav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px}
  .snav a{font-family:'Courier New',monospace;font-size:13.5px;letter-spacing:.04em;padding:7px 13px;border:1px solid var(--ink);color:var(--ink);text-decoration:none}
  .snav a:hover{background:var(--ink);color:var(--paper)}
  .snav a b{font-weight:400;color:var(--stamp)} .snav a:hover b{color:#fff}
  .sec{padding-top:30px;scroll-margin-top:8px}
  .sec h3{font-family:'Arial Narrow','Helvetica Neue',Arial,sans-serif;font-weight:800;text-transform:uppercase;font-size:28px;line-height:1;margin:0 0 18px;padding-top:14px;border-top:3px double var(--ink);display:flex;align-items:baseline;gap:12px}
  .sec h3 small{font-family:'Courier New',monospace;font-size:13px;font-weight:400;color:var(--ink-soft);letter-spacing:.04em;text-transform:none}
  .sg{border-top:1px solid var(--rule)}
  .sgi{display:grid;grid-template-columns:62px 1fr auto;gap:6px 14px;padding:14px 0;border-bottom:1px solid var(--rule)}
  .sgi .yr{font-family:'Courier New',monospace;font-size:12.5px;color:var(--stamp);padding-top:3px}
  .sgi .tt{font-family:'Arial Narrow','Helvetica Neue',Arial,sans-serif;font-weight:800;text-transform:uppercase;font-size:18px;line-height:1.2}
  .sgi .pf{font-family:'Courier New',monospace;font-size:13px;letter-spacing:.04em;color:var(--ledger);text-transform:none;font-weight:400;display:block}
  .sgi .rl{font-family:'Courier New',monospace;font-size:13.5px;color:var(--ink-soft);margin-top:5px}
  .sgi .rl .cn{color:var(--ink);font-weight:700}
  .sgi .nt{font-size:12.5px;color:var(--ink-soft);margin:2px 0 0 12px;font-style:italic;max-width:640px}
  .sgi .en{font-size:13px;color:var(--ink-soft);margin-top:4px;font-style:italic;max-width:640px}
  @media(max-width:640px){.sgi{grid-template-columns:1fr}.sgi .th{justify-content:flex-start;order:3}.sec h3{font-size:24px;flex-wrap:wrap;gap:4px}}
  .sgi .th{display:flex;gap:8px;align-items:flex-start;justify-content:flex-end;min-width:0}
  .th img{height:92px;width:auto;display:block;cursor:zoom-in;box-shadow:0 1px 5px rgba(0,0,0,.3);border:1px solid #fff}
  .th img:hover{outline:2px solid var(--stamp)}
  .rl.hasimg{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
  .lb{position:fixed;inset:0;background:rgba(22,18,14,.9);display:none;align-items:center;justify-content:center;flex-direction:column;z-index:50;padding:20px;cursor:zoom-out}
  .lb.on{display:flex}.lb img{max-width:min(92vw,900px);max-height:78vh;box-shadow:0 8px 30px rgba(0,0,0,.6)}
  .lb .cap{font-family:'Courier New',monospace;font-size:13.5px;color:#E4DAC0;margin-top:12px;text-align:center;max-width:700px}
  /* back bars */
  .backbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--ink); color:var(--paper); padding:11px 16px; margin:0 0 28px; }
  .backbar a{ color:var(--paper); text-decoration:none; font-family:'Courier New',monospace; font-size:13px; letter-spacing:.04em; }
  .backbar a.main{ font-weight:700; color:#fff; border-bottom:2px solid var(--stamp); padding-bottom:1px; }
  .backbar a:hover{ color:var(--stamp); }
  .backbar.bottom{ margin:44px 0 0; }

  /* album page */
  .head{ display:grid; grid-template-columns:260px 1fr; gap:30px; margin-bottom:26px; }
  .head .cv{ width:260px; height:260px; box-shadow:0 4px 14px rgba(0,0,0,.32); background:var(--paper-dim); }
  .head .cv img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
  .head h2{ margin:0 0 4px; font-size:34px; line-height:1.05; font-family:'Arial Narrow','Helvetica Neue',Arial,sans-serif; font-weight:800; text-transform:uppercase; }
  .head .by{ font-family:'Courier New',monospace; font-size:13.5px; color:var(--ink-soft); letter-spacing:.05em; margin-bottom:14px; }
  .cat{ font-family:'Courier New',monospace; font-size:13.5px; color:var(--ink-soft); margin:0 0 4px; }
  .lab{ font-family:'Courier New',monospace; font-size:13px; letter-spacing:.06em; color:var(--ledger); border-bottom:1px solid var(--ledger); display:inline-block; padding-bottom:2px; margin:0 0 10px; text-transform:uppercase; }
  .cols{ display:grid; grid-template-columns:1.1fr .9fr; gap:30px; margin-bottom:8px; }
  .tl{ margin-bottom:18px; }
  .tl .sub{ font-family:'Courier New',monospace; font-size:13.5px; color:var(--ink-soft); margin:0 0 4px; }
  .sgi .tt a.lyr{color:inherit;text-decoration:none;border-bottom:1px dotted var(--orange)}
  .sgi .tt a.lyr::after{content:' \2197';font-size:11px;color:var(--orange-deep)}
  .sgi .tt a.lyr:hover{color:var(--orange-deep)}
  .tl ol a.lyr{color:inherit;text-decoration:none;border-bottom:1px dotted var(--orange)}
  .tl ol a.lyr::after{content:' \2197';font-size:11px;color:var(--orange-deep)}
  .tl ol a.lyr:hover{color:var(--orange-deep)}
  .lyrnote{font-family:'Courier New',monospace;font-size:13px;color:var(--ink-soft);margin:0 0 8px}
  .tl ol{ margin:4px 0 0; padding-left:24px; font-size:15px; }
  .pers div{ font-size:14px; color:var(--ink-soft); margin-bottom:3px; }
  .extra{ font-size:13.5px; color:var(--ink-soft); margin:0 0 8px; }
  .notes{ border-top:1px solid var(--rule); margin-top:26px; padding-top:6px; }
  .notes p{ font-size:16px; line-height:1.65; margin:0 0 14px; max-width:680px; }
  .credit{ font-family:'Courier New',monospace; font-size:13px; color:var(--ink-soft); margin:0 0 16px; }
  .stub{ font-family:'Courier New',monospace; font-size:13.5px; color:var(--ink-soft); border:1px dashed var(--rule); padding:12px 14px; margin-top:20px; }
  .pn{ display:flex; justify-content:space-between; gap:16px; margin-top:22px; border-top:1px solid var(--rule); padding-top:14px; }
  .pn a{ text-decoration:none; color:var(--ink); font-size:14px; max-width:48%; }
  .pn a small{ display:block; font-family:'Courier New',monospace; font-size:13px; color:var(--ink-soft); letter-spacing:.05em; }
  .pn a b{ font-family:'Arial Narrow','Helvetica Neue',Arial,sans-serif; font-weight:800; text-transform:uppercase; font-size:16px; }
  .pn a:hover b{ color:var(--stamp); }
  .pn .r{ text-align:right; margin-left:auto; }
  @media (max-width:640px){
    .head{ grid-template-columns:1fr; gap:18px; } .head .cv{ width:200px; height:200px; }
    .head h2{ font-size:28px; } .cols{ grid-template-columns:1fr; gap:6px; }
    .grid{ grid-template-columns:repeat(2,1fr); gap:22px 14px; }
    .wrap{ padding:0 16px 60px; }
  }

  .sbanner-in{ max-width:900px; }
  @media (prefers-reduced-motion:reduce){ .sbanner-slide{ transition:none; } }

  .sbanner{ margin:0 0 26px; }