/* ==================================================
   Windows 95 stacked layout — sitewide (mobile-optimized)
   iPhone/Safari tweaks: safe-areas, 44px taps, 16:9 iframes,
   vh fixes, small-screen grids & typography.
================================================== */
:root{
  --desk:#008080;                /* desktop teal */
  --window:#c0c0c0;              /* outer window */
  --panel:#e5e5e5;               /* default inner panel */
  --panel-soft: rgb(179,179,179);
  --text:#000;
  --title:#000080;
  --title-text:#fff;
  --hi:#ffffff; --lo:#808080; --edge:#9a9a9a;
  --focus:#000;
  --content-w:max(320px,1200px);
  /* iOS safe area fallbacks */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body.win95{
  font-family:"MS Sans Serif",Tahoma,Segoe UI,Verdana,sans-serif;
  font-size:14px; line-height:1.5; color:var(--text); background:var(--desk);
  -webkit-tap-highlight-color: transparent;
}
img{max-width:100%; height:auto; display:block}
a{color:#0000EE; -webkit-tap-highlight-color: rgba(0,0,0,0.1)}
a:focus-visible, button:focus-visible, .win95-button:focus-visible, .win95-input:focus-visible{outline:1px dotted var(--focus)}

/* Bevels */
.navbar,.win95-statusbar,.win95-panel,.win95-window,.win95-button,.win95-input{
  border-top:1px solid var(--hi);
  border-left:1px solid var(--hi);
  border-bottom:1px solid var(--lo);
  border-right:1px solid var(--lo);
}

/* Top nav */
.navbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:.5rem;
  padding:calc(6px + var(--safe-top)) calc(8px + var(--safe-right)) 6px calc(8px + var(--safe-left));
  background:var(--window)
}
.site-title{margin:0 8px 0 0; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.primary-nav{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.start-btn{margin-right:.5rem}

/* Buttons */
.win95-button{
  background:var(--window); color:var(--text); padding:6px 10px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:32px;
  touch-action:manipulation;
}
.win95-button:active{
  border-top:1px solid var(--lo); border-left:1px solid var(--lo);
  border-bottom:1px solid var(--hi); border-right:1px solid var(--hi); background:#dcdcdc
}

/* Inputs */
.win95-input{background:#fff; color:#000; padding:4px}
.address{min-width:240px; width:40%}

/* Windows (stacked, responsive) */
.win95-window{width:min(var(--content-w),100%); margin:16px auto; background:var(--window)}
.win95-titlebar{display:flex; align-items:center; justify-content:space-between; padding:6px 8px; background:var(--title); color:var(--title-text); font-weight:700}
.win95-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.win95-controls .ctrl{display:inline-block; min-width:18px; text-align:center; padding:2px 4px; background:var(--window); color:#000}
.win95-toolbar{display:flex; gap:6px; align-items:center; padding:6px; background:var(--window); border-top:1px solid var(--edge)}
@media (max-width:640px){ .win95-toolbar{display:none} }
.win95-window-body{padding:12px; background:var(--panel)}

/* Panels */
.win95-panel{background:#fff; position:relative}

/* HERO */
.hero-media{margin:0; overflow:hidden; position:relative}
.hero-media img{
  width:100%;
  height:85vh;                 /* desktop / large */
  object-fit:cover; object-position:center 70%;
}
.hero-caption{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:inline-block; padding:6px 10px; background:#fff; color:#000;
  border-top:1px solid var(--hi); border-left:1px solid var(--hi);
  border-bottom:1px solid var(--lo); border-right:1px solid var(--lo);
  max-width:calc(100% - 24px); text-align:center;
  line-height:1.2;
}
.hero-caption__chrome{font-weight:700}

/* LISTEN — bigger photo; softer panel */
.listen-section .win95-window-body{ background: var(--panel-soft); }
.listen-artwork.win95-panel{ background: var(--panel-soft); }
.listen-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:16px; align-items:start}
.listen-artwork img{
  height:400px;
  object-fit:cover;
  object-position:center;
}

/* ABOUT — bigger text; softer panel */
.about-section .win95-window-body{ background: var(--panel-soft); }
.about-artwork.win95-panel{ background: var(--panel-soft); }
.about-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:16px; align-items:center}
.about-left{max-width:65ch}
.about-bigger-text{ font-size:20px; line-height:1.7; }

/* Buttons row */
.btn-row{display:flex; gap:8px; flex-wrap:wrap}

/* Footer status bar */
.win95-statusbar{
  width:min(var(--content-w),100%);
  margin:16px auto; padding:6px calc(10px + var(--safe-right)) calc(6px + var(--safe-bottom)) calc(10px + var(--safe-left));
  background:var(--window)
}

/* Media helpers */
.media-gallery, .media-gallery.media-gallery--wide{
  width:min(var(--content-w),100%); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, minmax(260px,1fr)); gap:12px
}
.media-item{background:#fff; overflow:hidden}
.media-item iframe{width:100%; height:auto; aspect-ratio:16/9; border:0; display:block}
.media-item p{margin:8px 10px 10px}
.photo-collage .media-collage{width:min(var(--content-w),100%)}
.media-collage{column-count:3; column-gap:12px}
.media-collage figure{break-inside:avoid; margin:0 0 12px 0; background:#fff; border-top:1px solid var(--hi); border-left:1px solid var(--hi); border-bottom:1px solid var(--lo); border-right:1px solid var(--lo)}

/* ============================
   SHOWS PAGE — CLEAR ROW CARDS
   ============================ */
.listview-95{display:block; padding:6px}

.row-head-95{
  display:grid;
  grid-template-columns: 140px 1fr 320px 140px;
  gap:0;
  background:#dcdcdc;
  font-weight:700;
  border-top:1px solid var(--lo);
  border-bottom:1px solid var(--hi);
}
.row-head-95 .cell-95{padding:8px 10px; border-right:1px solid #bcbcbc}
.row-head-95 .cell-95:last-child{border-right:none}

.row-95{
  display:grid;
  grid-template-columns: 140px 1fr 320px 140px; /* Date | Title | Location | Action */
  align-items:stretch;
  background:#fff;
  margin:10px 0;                 /* space between shows */
  padding:0;                     /* we pad cells */
  /* Raised Win95 card */
  border-top:1px solid var(--hi);
  border-left:1px solid var(--hi);
  border-bottom:1px solid var(--lo);
  border-right:1px solid var(--lo);
  box-shadow: inset 1px 1px 0 var(--edge), inset -1px -1px 0 var(--edge);
}
.row-95 .cell-95{
  padding:10px 12px;
  border-right:1px solid #bcbcbc;
}
.row-95 .cell-95:last-child{border-right:none}

/* Hover/focus emphasis */
.row-95:hover,
.row-95:focus-within{
  outline:1px dotted var(--focus);
  outline-offset:0;
}

/* Action cell tweaks */
.badge-95{display:inline-block; padding:4px 8px; background:#e5e5e5;
  border-top:1px solid var(--hi); border-left:1px solid var(--hi);
  border-bottom:1px solid var(--lo); border-right:1px solid var(--lo); color:#000}

/* ============================
   RESPONSIVE BREAKPOINTS
   ============================ */

/* Large tablet down */
@media (max-width:980px){
  .listen-grid,.about-grid{grid-template-columns:1fr}
  .address{width:60%}
  .row-head-95{grid-template-columns: 120px 1fr 1fr 120px}
  .row-95{grid-template-columns: 120px 1fr 1fr 120px}
}

/* iPhone portrait/landscape common widths */
@media (max-width:700px){
  .row-head-95{display:none} /* hide table header on small screens */
  .row-95{
    grid-template-columns: 1fr 1fr; /* two-up cards */
    grid-auto-rows:auto;
  }
  .row-95 .cell-95{border-right:none; border-bottom:1px solid #bcbcbc}
  .row-95 .cell-95:nth-child(odd){border-right:1px solid #bcbcbc}
  .row-95 .cell-95:last-child{border-bottom:none}
}

/* Compact phones (SE/mini) */
@media (max-width:480px){
  /* Typography & taps */
  body.win95{font-size:16px}
  .win95-button{min-height:44px; padding:10px 14px}
  .site-title{font-size:13px}
  /* Hero vh fix for iOS toolbars */
  .hero-media img{height:70vh}
  /* About readability */
  .about-bigger-text{font-size:18px}
  /* Media layout */
  .media-gallery{grid-template-columns:1fr}
  .media-collage{column-count:1}
}

/* General small-screen adjustments */
@media (max-width:640px){
  .primary-nav{gap:4px; overflow-x:auto}
  .address{display:none}
  /* Ensure windows use full width on phones */
  .win95-window, .win95-statusbar, .media-gallery, .photo-collage .media-collage{width:100%}
}