:root {
  /* Quick layout controls. Smaller screens have overrides near the end. */
  --map-width:180px;
  --schedule-width:340px;
  --column-gap:40px;
  --title-size:42px;
  --heading-size:28px;
  --text-size:16px;
  --cream:#f7efd9; --green:#183d2c; --rust:#a9411b; --line:#bdbda4;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Trebuchet MS',Arial,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--cream); color:var(--green); font:var(--text-size)/1.5 var(--sans); }
a { color:inherit; text-underline-offset:4px; }
a:hover { color:var(--rust); }
a:focus-visible { outline:3px solid var(--rust); outline-offset:5px; }
.skip { position:absolute; left:12px; top:-100px; background:var(--cream); padding:10px; z-index:2; }
.skip:focus { top:8px; }
.page { width:min(960px,100%); margin:auto; padding:46px 32px 60px; }
.event { display:grid; grid-template-columns:minmax(0,1fr) var(--schedule-width); align-items:stretch; gap:var(--column-gap); padding-bottom:36px; border-bottom:2px solid var(--green); }
h1 { font:bold var(--title-size)/1.1 var(--serif); letter-spacing:-1.3px; margin:0 0 18px; }
.date { display:flex; flex-wrap:wrap; gap:0 8px; margin:0 0 26px; }
.date span { white-space:nowrap; }
.porch-name { margin:0 0 8px; }
address { font-style:normal; margin:0; }
address strong { display:block; font:bold var(--heading-size)/1.2 var(--serif); letter-spacing:-.4px; }
address>span { display:block; margin-top:8px; }
.venue-layout { display:grid; grid-template-columns:var(--map-width) minmax(0,1fr); gap:22px 24px; align-items:center; margin-top:24px; }
.venue-notes { min-width:0; }
.location { margin:0; }
.actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:10px; }
.button { display:inline-block; border:1px solid var(--green); padding:8px 10px; text-decoration:none; font-weight:bold; min-height:43px; }
.button:first-child { background:var(--green); color:var(--cream); }
.button:hover { background:var(--rust); border-color:var(--rust); color:var(--cream); }
.corner-sketch { width:100%; margin:0; }
.corner-sketch svg { display:block; width:100%; height:auto; }
.day-schedule { display:flex; flex-direction:column; width:100%; }
.day-schedule h2 { font:700 var(--text-size)/1.5 var(--sans); margin:0 0 12px; color:var(--rust); }
.day-schedule ol { flex:1; display:grid; grid-template-rows:repeat(9,1fr); list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.day-schedule li { display:flex; border-bottom:1px solid #bdbda463; }
.day-schedule a { width:100%; display:grid; grid-template-columns:144px minmax(0,1fr); gap:12px; padding:8px 0; text-decoration:none; align-items:center; }
.day-schedule time { font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--rust); }
.day-schedule a:hover>span { text-decoration:underline; text-underline-offset:3px; }
.artists { max-width:800px; margin:auto; }
.performers-heading { padding-top:30px; }
.performers-heading h2 { font:normal var(--heading-size)/1.2 var(--serif); margin:0 0 8px; }
.performers-heading p { margin:0; }
.day-schedule h2 span { white-space:nowrap; }
.act { padding:32px 0 35px; border-bottom:1px solid var(--line); scroll-margin-top:24px; }
.act:last-child { border-bottom:0; padding-bottom:0; }
.act h3 { display:block; margin:0 0 18px; }
.act h3 time { display:block; margin-bottom:10px; font:700 var(--text-size)/1.5 var(--sans); color:var(--rust); white-space:nowrap; }
.act h3>span { font:normal var(--heading-size)/1.2 var(--serif); letter-spacing:-.4px; }
.act figure { margin:0; }
.performance { display:block; border:0; background:#fff; width:100%; }
.youtube { aspect-ratio:16/9; }
.instagram { max-width:540px; height:650px; }
.artist-photo { display:block; width:min(100%,480px); height:auto; max-height:480px; object-fit:contain; object-position:left; }
.act figcaption { color:#53604f; margin-top:8px; }
.artist-links { display:flex; gap:24px; margin-top:13px; }
.artist-links>a:first-child { font-weight:bold; }
@media(max-width:860px) {
  .event { grid-template-columns:1fr; gap:32px; }
  h1 { font-size:clamp(28px,5.4vw,42px); }
  .venue-layout { grid-template-columns:200px minmax(0,1fr); }
  .day-schedule a { padding:8px 0; }
}
@media(max-width:520px) {
  .page { padding:28px 20px 40px; }
  .venue-layout { grid-template-columns:140px minmax(0,1fr); gap:22px 16px; }
  .act { padding-block:28px; }
}
@media(max-width:360px) {
  .page { padding-inline:16px; }
  h1 { font-size:26px; letter-spacing:-.8px; }
  .venue-layout { grid-template-columns:1fr; }
  .venue-layout .actions { flex-direction:row; }
  .venue-layout .corner-sketch { width:180px; }
  .day-schedule a { grid-template-columns:140px minmax(0,1fr); gap:8px; }
  .instagram { height:610px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
