/* ========================================================================== */
/* LORD PENH — classic skin (handcrafted, zero frameworks)                    */
/* ========================================================================== */

/* ---------- 0) THEME TOKENS ---------- */
:root{
  --bg:#480404;
  --text:#fff;
  --muted:rgba(255,255,255,.75);

  --yellow:#f6c20e;
  --yellow-dark:#d3a90c;

  --panel-bg:#fff8dc;

  --container:820px;
  --radius-1:6px;
  --radius-2:8px;

  --border-subtle:1px solid rgba(255,255,255,.08);

  /* NEW: field colors for on-brand inputs */
  --field-bg:        rgba(246,194,14,.12);  /* soft amber */
  --field-border:    rgba(246,194,14,.40);
  --field-text:      #fff;
  --field-placeholder: rgba(255,255,255,.60);
  --field-focus-ring: rgba(246,194,14,.85);
  --field-invalid:   #ff6b6b;
}

/* ---------- 1) BASE / RESET ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 Verdana, Geneva, Tahoma, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* ---------- 2) LAYOUT ---------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 14px; }
main.container{ padding-bottom:60px; }
.status{ margin:6px 0 12px; color:var(--muted); }

/* ---------- 3) HEADER ---------- */
.header{ padding:24px 14px 16px; border-bottom:var(--border-subtle); }
.logo{ display:flex; align-items:center; gap:8px; }
.logo img{ width:auto; height:36px; display:block; }

h1{ margin:0; font-size:24px; font-weight:800; letter-spacing:.4px; text-transform:lowercase; }
.logo .wordmark{
  font:36px/36px Verdana, Geneva, Tahoma, Arial, sans-serif;
  font-weight:800; margin:0; letter-spacing:.4px; text-transform:none; position:relative; top:1px;
}
:root{ --lp-yellow:#f6c20e; }
.accent{ color:var(--lp-yellow); }

.tagline{ margin:2px 0 0; color:var(--muted); font-size:13px; }
.header .tagline{ margin-left:44px; }
@media (max-width:640px){ .header .tagline{ margin-left:0; } }

/* header actions */
.header-actions{ margin-top:10px; }
.btn{
  display:inline-block; padding:6px 10px; font-size:13px; color:var(--text);
  background:transparent; border:1px solid rgba(255,255,255,.35);
  border-radius:6px; text-decoration:none;
}
.btn:hover{ border-color:var(--yellow); color:var(--yellow); }

/* ---------- 4) TABS (day nav) ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:12px; padding:10px 14px 16px; text-transform:lowercase; }
.tabs a{
  color:var(--text); opacity:.8; text-decoration:none; padding-bottom:1px;
  border-bottom:2px solid transparent; font-size:14px;
}
.tabs a.active, .tabs a:hover{ border-color:var(--yellow); opacity:1; }

/* ---------- 5) DAY HEADING ---------- */
.day-heading{
  font-size:24px; margin:2px 0 12px; opacity:.95; text-transform:lowercase; font-weight:400;
}

/* ---------- 6) EVENT ROWS ---------- */
.row{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  margin-bottom:6px; padding:8px 10px;
  background:var(--yellow); color:#000;
  border-radius:var(--radius-2);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 1px 0 rgba(0,0,0,.25);
  cursor:pointer; transition:background .12s ease-in-out;
}
.row:hover{ background:var(--yellow-dark); }

.left{ display:flex; align-items:center; gap:8px; min-width:0; }
.timepill{
  font-size:11px; padding:1px 8px; margin-right:2px;
  background:rgba(0,0,0,.18); border-radius:999px;
}
.cat{
  width:22px; height:22px; border-radius:4px;
  display:inline-block; vertical-align:middle; margin-right:8px;
  image-rendering:-webkit-optimize-contrast;
}
.small{ font-size:12px; opacity:.8; }
.title{
  font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-wrap:balance; hyphens:auto;
}
.at{ opacity:.7; white-space:nowrap; }
.plusminus{ font-size:18px; line-height:1; padding-left:8px; }

/* ---------- 7) EXPANSION PANEL ---------- */
.panel{
  margin-top:3px; color:#000; background:var(--panel-bg);
  border:1px solid #f0e5b6; border-left:5px solid var(--yellow);
  border-radius:var(--radius-2);
}
.panel-inner{ display:flex; gap:14px; padding:10px; margin-top:-2px; }
.poster{ width:110px; height:auto; border-radius:var(--radius-1); display:block; }
.panel .desc{ font-size:14.5px; }
.panel .links a{ color:#0046cc; }
.hidden{ display:none; }

/* ---------- 8) AD BAR ---------- */
.adbar{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:center;
  padding:8px 0 12px; border-top:var(--border-subtle); border-bottom:var(--border-subtle);
}
.adbar a{ display:block; }
.adbar img{
  width:100%; height:auto; display:block;
  border:1px solid #444; border-radius:6px; box-shadow:0 1px 0 rgba(0,0,0,.2);
}
@media (max-width:640px){ .adbar{ grid-template-columns:1fr; } }

• /* ---------- 9) HOLIDAYS TABLE ---------- */
.holiday-table{ width:100%; border-collapse:separate; border-spacing:0; }
.holiday-table th, .holiday-table td{
  text-align:left; padding:10px 12px; border-bottom:var(--border-subtle);
}
.holiday-table th{ opacity:.8; font-weight:600; }
.holiday-table th:first-child, .holiday-table td:first-child{
  text-align:right; width:9.5rem; padding-right:24px; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.holiday-table td:first-child time{ display:inline-block; white-space:nowrap; }

/* ---------- 10) LIGHTBOX ---------- */
.lb{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center; padding:24px;
  background:rgba(0,0,0,.88);
}
.lb.hidden{ display:none; }
.lb img{
  max-width:min(920px,96vw); max-height:90vh; display:block;
  background:#fff; border:4px solid #fff; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:lbIn .12s ease-out both;
}
.lb-caption{ color:rgba(255,255,255,.92); margin-top:10px; max-width:min(920px,96vw); text-align:center; }
.lb-close{
  position:fixed; top:12px; right:12px; width:36px; height:36px;
  border-radius:999px; background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.4); font-size:22px; line-height:1; cursor:pointer;
}
.lb-close:hover{ background:rgba(255,255,255,.2); }
@keyframes lbIn{ from{ opacity:0; transform:scale(.98); } to{ opacity:1; transform:scale(1); } }

/* ---------- 11) FOOTER ---------- */
.footer{
  color:var(--muted); font-size:12.5px; padding:20px 0 28px 20px; border-top:var(--border-subtle);
}
.footer a,
.footer a:visited,
.footer a:hover,
.footer a:focus,
.footer a:active{
  color:inherit; text-decoration:underline; text-decoration-color:currentColor; text-underline-offset:2px;
}
code{ background:rgba(255,255,255,.08); padding:2px 4px; border-radius:4px; }

/* ---------- 12) RESPONSIVE TWEAKS ---------- */
@media (max-width:720px){
  body{ font-size:15px; padding-top:15px; }
  .container{ padding:0 12px; }
  .tabs{ gap:10px; font-size:13px; }

  .row{ padding:7px 10px; }
  .left{ gap:6px; }
  .cat{ width:20px; height:20px; margin-right:6px; }
  .timepill{ font-size:12px; padding:2px 6px; }
  .title{ white-space:normal; } /* allow wrap on phones */
  .at{ display:inline; white-space:normal; }

  .panel-inner{ flex-direction:column; }
  .poster{ width:90px; }
}
@media (max-width:520px){
  .row{ padding:12px; border-radius:12px; }
  .row .left{
    display:grid;
    grid-template-columns:auto auto 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:
      "time icon title"
      ".    .    at";
    column-gap:8px; row-gap:2px; align-items:center; min-width:0;
  }
  .row .timepill{ grid-area:time; font-size:12px; padding:4px 8px; }
  .row .cat{ grid-area:icon; width:22px; height:22px; }
  .row .title{ grid-area:title; font-size:18px; line-height:1.15; overflow-wrap:anywhere; }
  .row .at{ grid-area:at; display:block; margin-top:2px; opacity:.8; }
  .row .plusminus{ font-size:22px; margin-left:8px; }
}
@media (min-width:721px) and (max-width:980px){
  body{ font-size:14.5px; }
  .poster{ width:100px; }
}

/* Bigger, responsive posters in the details panel */
.panel-inner { align-items: flex-start; }
.poster-wrap { flex: 0 0 auto; }
.panel .info { flex: 1 1 auto; min-width: 0; }
.poster{
  width: clamp(140px, 22vw, 220px);
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
}
@media (max-width: 900px){
  .poster{ width: clamp(130px, 28vw, 200px); max-height: 300px; }
}
@media (max-width: 640px){
  .poster{ width: clamp(120px, 38vw, 180px); max-height: 260px; }
}

/* Venue link style inside yellow rows */
.venue-link {
  color: #000 !important;
  text-decoration: underline;
  text-decoration-color: #000;
  text-underline-offset: 2px;
}

/* ---------- 13) NEWSLETTER (SendPulse) ---------- */
.subscribe {
  margin: 24px auto 8px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(246,194,14,.08);
}
.subscribe-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

/* GRID: name | email | button; stacks on phones */
.subscribe-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}

/* UPDATED: on-brand dark/amber inputs */
.subscribe-form input[type="text"],
.subscribe-form input[type="email"],
.subscribe-form input[type="tel"],
.subscribe-form input[type="search"],
.subscribe-form input[type="url"]{
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--field-text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.subscribe-form input::placeholder { color: var(--field-placeholder); }
.subscribe-form input:hover { border-color: var(--yellow); }
.subscribe-form input:focus{
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-focus-ring) 28%, transparent);
}
.subscribe-form input:invalid{
  border-color: var(--field-invalid);
  box-shadow: none;
}

/* Autofill (Chrome/Safari) — replace neon bg with our amber */
.subscribe-form input:-webkit-autofill{
  -webkit-text-fill-color: var(--field-text);
  caret-color: var(--field-text);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px var(--field-bg) inset;
}

/* Button unchanged (already on-brand) */
.btn-subscribe{
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.2);
  background: var(--yellow);
  color: #000;
  font-weight: 800;
  cursor: pointer;
}
.btn-subscribe:hover { background: var(--yellow-dark); }

/* tiny note */
.subscribe-note{
  margin: 8px 0 0;
  color: var(--muted);
}

/* accessibility helpers (if not already present globally) */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* honeypot hidden but still present in DOM */
.hp{ position: absolute !important; left: -9999px !important; }


/* A2HS helper */
.a2hs { margin: 16px 0 12px; }
.a2hs-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font: 13px/1.2 inherit;
}
.a2hs-toggle:hover { border-color: var(--yellow); color: var(--yellow); }
.a2hs-panel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  background: rgba(246,194,14,.08); /* subtle yellow wash to match your site */
}
.a2hs-panel details { margin: 6px 0; }
.a2hs-panel summary { cursor: pointer; }
.a2hs-panel ol { margin: 6px 0 8px 18px; }
.a2hs .small { opacity: .75; }



/* Phones: stack nicely */
@media (max-width: 640px){
  .subscribe-form{ grid-template-columns: 1fr; }
  .btn-subscribe{ width: 100%; }
}