*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#181818;font-family:Arial,Helvetica,sans-serif}header{height:64px;max-width:920px;margin:auto;padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:14px}.brand img{display:block;width:53px;height:auto}nav{display:flex;gap:24px;align-items:center}button{font:10px Arial,sans-serif;letter-spacing:.11em;color:#555;background:none;border:0;cursor:pointer;padding:10px 0}.tab.active{color:#111;border-bottom:1px solid #111}.controls{min-width:55px;text-align:right}#editorial{width:min(calc(100% - 24px),960px);margin:auto}.spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.page{position:relative;min-width:0;padding:.22cm;line-height:0}.page img{display:block;width:100%;height:auto;object-fit:contain}.overlay{position:absolute;left:.22cm;right:.22cm;bottom:.22cm;max-height:75%;overflow:auto;transform:translateY(102%);transition:transform .5s ease;background:rgba(255,255,255,.87);padding:20px;font:14px/1.55 Georgia,serif;line-height:1.55;pointer-events:none}.page.has-note{overflow:hidden;cursor:pointer}.page.has-note:hover .overlay,.page.has-note.open .overlay,.page.has-note:focus .overlay{transform:translateY(0)}#overview{width:min(calc(100% - 24px),1100px);margin:18px auto 40px}.overview-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.thumb{display:block;min-width:0;border:0;background:#fff;padding:0;cursor:pointer;position:relative}.thumb img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}.thumb span{display:block;text-align:center;color:#777;font:9px Arial,sans-serif;padding:5px 0}.thumb:hover img,.thumb:focus-visible img{outline:1px solid #555;outline-offset:2px}footer{max-width:920px;margin:0 auto;padding:40px 12px;display:flex;justify-content:space-between;font:11px Georgia,serif}footer span{font:10px Arial,sans-serif;letter-spacing:.1em}[hidden]{display:none!important}@media(max-width:850px){.overview-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:550px){header{height:54px;padding:0 10px}nav{gap:12px}button{font-size:9px}.brand img{width:45px}#editorial{width:100%}.page{padding:.20cm}.overlay{left:.20cm;right:.20cm;bottom:.20cm;padding:10px;font-size:11px}.overview-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}footer{padding:25px 10px}}


/* Music sits in the document flow, never over the portfolio. */
.music-player {
  position: static !important;
  display: block;
  width: min(calc(100% - 24px), 920px);
  margin: 24px auto 88px;
  padding: 0;
}
.music-player iframe {
  position: static !important;
  display: block;
  width: 100%;
  height: 42px;
  border: 0;
}
/* Back control only appears after a thumbnail was opened. */
.back-to-overview {
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 18px;
  z-index: 50;
  background: #fff;
  border: 1px solid #999;
  padding: 12px 15px;
  font: 10px Arial, sans-serif;
  letter-spacing: .1em;
  box-shadow: 0 2px 12px #0001;
}
@media(max-width:550px) {
  .music-player { width: calc(100% - 20px); margin: 18px auto 72px; }
  .back-to-overview { left: 10px; bottom: max(12px, env(safe-area-inset-bottom)); }
}