@import url('https://fonts.googleapis.com/css2?family=BIZ+UDMincho:wght@400;700&family=BIZ+UDPMincho:wght@400;700&display=swap');

/* ============================================================
   Stony Island Arts Bank — light "BIZ UDMincho" vernacular
   Shared preview stylesheet
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:      #faf6ec;
  --paper-2:    #f3ecdc;
  --paper-3:    #ece2cd;
  --maroon:     #5a1e16;
  --maroon-deep:#46150f;
  --gold:       #7a6849;
  --ink:        #3a2f25;
  --muted:      #847762;
  --line:       rgba(90,30,22,0.16);
  --line-soft:  rgba(122,104,73,0.28);
  --error:      #a3382b;
  --success:    #5c6a3d;
  --font: 'BIZ UDMincho', 'BIZ UDPMincho', Georgia, 'Times New Roman', serif;

  /* legacy aliases so any leftover inline styles in page bodies stay on-brand */
  --gold-light: #5a1e16;
  --black: #faf6ec; --deep: #ece2cd; --surface: #f3ecdc;
  --text: #3a2f25; --border: rgba(90,30,22,0.16);
  --font-header: var(--font); --font-body: var(--font); --font-serif: var(--font);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.75;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--maroon); }

/* ── PREVIEW BANNER ── */
.preview-banner {
  background: var(--maroon); color: var(--paper); text-align: center;
  font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; padding: 9px 16px;
}

/* ── TOP-LEFT DROPDOWN NAV ── */
.site-nav { position: fixed; top: 22px; left: 26px; z-index: 100; font-family: var(--font); }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 14px;
  background: rgba(250,246,236,0.82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); color: var(--maroon);
  padding: 11px 19px; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.nav-toggle:hover { border-color: var(--maroon); background: rgba(250,246,236,0.95); }
.nav-toggle-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 18px; height: 14px; }
.nav-toggle-icon span { display: block; width: 100%; height: 1.5px; background: var(--maroon); transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; }
.site-nav.open .nav-toggle-icon span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.site-nav.open .nav-toggle-icon span:nth-child(2) { opacity: 0; }
.site-nav.open .nav-toggle-icon span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav-menu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px;
  list-style: none; margin: 0; padding: 8px 0;
  background: rgba(250,246,236,0.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.site-nav.open .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu li { list-style: none; }
.nav-menu a {
  display: block; padding: 13px 28px; font-family: var(--font);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  transition: color 0.25s, background 0.25s, padding-left 0.25s;
}
.nav-menu a:hover { color: var(--maroon); background: rgba(122,104,73,0.08); padding-left: 34px; }
.nav-menu a.current { color: var(--maroon); }

/* ── PAGE HEADERS (all variants) ── */
.page-hero, .visit-hero, .events-hero, .tix-hero { padding: 170px 40px 30px; text-align: center; }
.page-eyebrow, .visit-eyebrow, .events-eyebrow, .tix-eyebrow {
  font-size: 0.62rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 22px;
}
.page-hero h1, .visit-hero h1, .events-hero h1, .tix-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.1;
  color: var(--maroon);
}
.page-hero p.lead, .visit-hero p.lead, .events-hero p.lead, .tix-hero p.lead {
  max-width: 680px; margin: 26px auto 0;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem); color: var(--ink); line-height: 1.85;
}
.page-hero p.lead { font-style: italic; }
.gold-rule { width: 64px; height: 2px; background: var(--gold); margin: 50px auto 0; opacity: 0.55; }

/* ── INTRO / ARTICLE IMAGES ── */
.intro-image { max-width: 760px; margin: 54px auto 0; padding: 0 40px; }
.intro-image figure { margin: 0; }
.intro-image img, .article-image img { width: 100%; height: auto; display: block; }
.intro-image figcaption, .article-image figcaption {
  margin-top: 10px; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); line-height: 1.6;
}

/* ── ARTICLE BODY (About) ── */
.article { max-width: 720px; margin: 0 auto; padding: 64px 40px 100px; }
.article article + article { margin-top: 54px; padding-top: 54px; border-top: 1px solid var(--line); }
.article h2 { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.article h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; margin-bottom: 18px; color: var(--maroon); }
.article p { font-size: 0.95rem; color: var(--ink); line-height: 1.95; }
.article p + p { margin-top: 16px; }
.article a { color: var(--maroon); text-decoration: underline; text-decoration-color: var(--line-soft); }
.cta-row { margin-top: 60px; padding-top: 46px; border-top: 1px solid var(--line); text-align: center; }
.cta-row a {
  display: inline-block; font-family: var(--font); font-size: 0.64rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--maroon); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 6px; transition: border-color 0.3s, transform 0.3s;
}
.cta-row a:hover { border-color: var(--maroon); transform: translateY(-1px); }

/* ── VISIT INFO ── */
.visit-info { max-width: 980px; margin: 0 auto; padding: 56px 40px 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.info-card { background: var(--paper-2); padding: 54px 46px; display: flex; flex-direction: column; }
.info-card h2 { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 30px; display: flex; align-items: center; gap: 14px; }
.info-card h2::before { content: ''; display: block; width: 28px; height: 1.5px; background: var(--gold); }
.address-body { font-size: 1rem; color: var(--ink); line-height: 1.95; letter-spacing: 0.02em; }
.address-body .name { display: block; color: var(--maroon); font-weight: 700; letter-spacing: 0.04em; margin-bottom: 8px; }
.info-card a.link { align-self: flex-start; margin-top: 26px; font-family: var(--font); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--maroon); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: border-color 0.3s; }
.info-card a.link:hover { border-color: var(--maroon); }
.hours-list { display: flex; flex-direction: column; }
.hours-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; font-size: 0.9rem; letter-spacing: 0.03em; }
.hours-row + .hours-row { border-top: 1px solid var(--line); }
.hours-row .day { color: var(--gold); text-transform: uppercase; font-size: 0.64rem; letter-spacing: 0.26em; font-weight: 700; }
.hours-row .time { color: var(--ink); }
.hours-row.closed .time { color: var(--muted); font-style: italic; }

/* ── GENERIC CTA SECTIONS (visit, reserve) ── */
.visit-cta, .reserve-cta { padding: 56px 40px 130px; text-align: center; }
.cta-eyebrow { font-size: 0.6rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.btn-tickets, .btn-reserve {
  display: inline-block; font-family: var(--font); font-size: 0.7rem; letter-spacing: 0.28em;
  text-transform: uppercase; background: var(--maroon); color: var(--paper);
  padding: 21px 60px; text-decoration: none; font-weight: 700; transition: background 0.3s, transform 0.3s;
}
.btn-tickets:hover, .btn-reserve:hover { background: var(--maroon-deep); transform: translateY(-1px); }
.visit-cta .note, .reserve-cta .note { margin-top: 20px; font-size: 0.74rem; color: var(--muted); letter-spacing: 0.03em; }
.reserve-cta .note a { color: var(--maroon); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; margin-left: 8px; }

/* ── FOOD & DRINK: hero + offerings ── */
.food-hero-image { max-width: 1080px; margin: 54px auto 0; padding: 0 40px; }
.food-hero-image img { width: 100%; height: auto; display: block; }
.offerings { max-width: 1080px; margin: 0 auto; padding: 64px 40px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.offering { background: var(--paper-2); padding: 60px 54px; display: flex; flex-direction: column; }
.offering-eyebrow { font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; font-weight: 700; display: flex; align-items: center; gap: 14px; }
.offering-eyebrow::before { content: ''; display: block; width: 28px; height: 1.5px; background: var(--gold); }
.offering h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; margin-bottom: 20px; color: var(--maroon); }
.offering p { font-size: 0.92rem; color: var(--ink); line-height: 1.95; }
.offering p + p { margin-top: 14px; }
.offering-detail { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.03em; }
.offering-detail strong { display: block; font-family: var(--font); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; font-weight: 700; }
.offering-cta { display: inline-block; align-self: flex-start; margin-top: 24px; font-family: var(--font); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; background: var(--maroon); color: var(--paper); padding: 14px 34px; text-decoration: none; font-weight: 700; transition: background 0.3s, transform 0.3s; }
.offering-cta:hover { background: var(--maroon-deep); transform: translateY(-1px); }

/* ── MENUS ── */
.menus { max-width: 1080px; margin: 0 auto; padding: 40px 40px 30px; }
.menu-group { margin-top: 64px; }
.menu-group:first-child { margin-top: 0; }
.menu-group-head { text-align: center; margin-bottom: 38px; }
.menu-group-head .menu-eyebrow { font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 14px; }
.menu-group-head h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--maroon); }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 650px; margin: 0 auto; }
.menu-card { display: block; border: 1px solid var(--line); background: #fff; padding: 0; cursor: zoom-in; transition: border-color 0.3s, transform 0.3s; overflow: hidden; }
.menu-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.menu-card img { width: 100%; height: auto; display: block; }
.menu-hint { text-align: center; margin-top: 24px; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* ── LIGHTBOX ── */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(58,40,30,0.86); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding: 48px 24px; overflow-y: auto; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; width: auto; height: auto; display: block; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.lightbox-close { position: fixed; top: 24px; right: 28px; width: 44px; height: 44px; background: rgba(250,246,236,0.9); border: 1px solid var(--line); color: var(--maroon); font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.3s, background 0.3s; }
.lightbox-close:hover { border-color: var(--maroon); background: var(--paper); }

/* ── FORMS (Private Events, Tickets) ── */
.events-form-wrap, .tix-form-wrap { max-width: 680px; margin: 58px auto 0; padding: 0 40px; }
form#eventsForm, form#ticketsForm { background: var(--paper-2); padding: 54px 46px; display: grid; gap: 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--font); font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.field input, .field textarea, .field select {
  background: #fffdf7; border: 1px solid var(--line); outline: none; color: var(--ink);
  font-family: var(--font); font-size: 0.95rem; padding: 14px 16px;
  -webkit-appearance: none; appearance: none; transition: border-color 0.25s, background 0.25s;
  letter-spacing: 0.02em; width: 100%; resize: vertical;
}
.field textarea { min-height: 160px; line-height: 1.7; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--maroon); background: #fff; }
.field input:disabled, .field select:disabled { opacity: 0.5; cursor: not-allowed; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
input[type="date"] { color-scheme: light; }
.field.has-select { position: relative; }
.field.has-select::after { content: ''; position: absolute; right: 18px; bottom: 22px; width: 8px; height: 8px; border-right: 1px solid var(--maroon); border-bottom: 1px solid var(--maroon); transform: rotate(45deg); pointer-events: none; }
.hint { font-size: 0.76rem; color: var(--muted); letter-spacing: 0.02em; min-height: 1em; }
.hint.warning { color: var(--error); }

.submit-row { margin-top: 8px; }
button.btn-submit { width: 100%; font-family: var(--font); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; padding: 21px; cursor: pointer; border: none; background: var(--maroon); color: var(--paper); font-weight: 700; transition: background 0.3s, transform 0.3s; }
button.btn-submit:hover { background: var(--maroon-deep); transform: translateY(-1px); }
button.btn-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.form-note { margin-top: 8px; text-align: center; font-size: 0.76rem; color: var(--muted); letter-spacing: 0.02em; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.actions button { font-family: var(--font); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; padding: 20px 22px; cursor: pointer; border: 1px solid var(--maroon); background: transparent; color: var(--maroon); font-weight: 700; transition: background 0.3s, color 0.3s, transform 0.3s; }
.actions button.primary { background: var(--maroon); color: var(--paper); }
.actions button:hover { transform: translateY(-1px); background: rgba(90,30,22,0.06); }
.actions button.primary:hover { background: var(--maroon-deep); }
.actions button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.pay-note { margin-top: 6px; text-align: center; font-size: 0.76rem; color: var(--muted); letter-spacing: 0.02em; }
.pay-note strong { color: var(--maroon); font-weight: 700; }

.form-status { margin-top: 8px; padding: 16px 18px; border: 1px solid var(--line); font-size: 0.88rem; line-height: 1.7; display: none; }
.form-status:not(:empty) { display: block; }
.form-status.error { border-color: var(--error); color: var(--error); }
.form-status.success { border-color: var(--success); color: var(--success); padding: 24px 22px; }

/* ── NEWS POSTS ── */
.posts { max-width: 760px; margin: 0 auto; padding: 70px 40px 100px; }
.post + .post { margin-top: 70px; padding-top: 70px; border-top: 1px solid var(--line); }
.post-meta { display: flex; align-items: center; gap: 16px; font-family: var(--font); font-size: 0.62rem; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; font-weight: 700; }
.post-meta::before { content: ''; display: block; width: 28px; height: 1.5px; background: var(--gold); }
.post h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; margin-bottom: 30px; color: var(--maroon); }
.post-body p { font-size: 0.95rem; color: var(--ink); line-height: 1.95; }
.post-body p + p { margin-top: 18px; }
.post-body p strong { color: var(--maroon); font-weight: 700; }
.post-body a { color: var(--maroon); text-decoration: underline; text-decoration-color: var(--line-soft); }
.post-ctas { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; }
.post-cta { display: inline-block; font-family: var(--font); font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; padding: 16px 34px; text-decoration: none; font-weight: 700; transition: background 0.3s, color 0.3s, transform 0.3s; }
.post-cta.primary { background: var(--maroon); color: var(--paper); }
.post-cta.primary:hover { background: var(--maroon-deep); transform: translateY(-1px); }
.post-cta.outline { border: 1px solid var(--maroon); color: var(--maroon); background: transparent; }
.post-cta.outline:hover { background: rgba(90,30,22,0.06); transform: translateY(-1px); }

/* ── FOOTER ── */
.site-footer { margin-top: auto; background: var(--paper); padding: 80px 40px 40px; border-top: 1px solid var(--line); text-align: center; }
.footer-newsletter { max-width: 600px; margin: 0 auto 56px; }
.footer-newsletter h2 { font-family: var(--font); font-size: 0.64rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; font-weight: 700; }
.footer-newsletter p.footer-blurb { font-size: 0.86rem; color: var(--muted); line-height: 1.85; margin-bottom: 28px; }
.newsletter-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0; max-width: 580px; margin: 0 auto; border: 1px solid var(--line); }
.newsletter-form input { background: var(--paper-2); border: none; border-right: 1px solid var(--line); outline: none; color: var(--ink); font-family: var(--font); font-size: 0.86rem; padding: 16px 18px; width: 100%; }
.newsletter-form input::placeholder { color: var(--muted); }
.newsletter-form input:focus { background: var(--paper-3); }
.newsletter-form button { background: var(--maroon); color: var(--paper); border: none; font-family: var(--font); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 700; padding: 0 28px; cursor: pointer; transition: background 0.3s; }
.newsletter-form button:hover { background: var(--maroon-deep); }
.newsletter-form button:disabled { opacity: 0.5; cursor: not-allowed; }
.newsletter-status { margin-top: 16px; font-size: 0.8rem; color: var(--muted); min-height: 1em; }
.newsletter-status.error { color: var(--error); }
.newsletter-status.success { color: var(--gold); }
.footer-meta { border-top: 1px solid var(--line); padding-top: 36px; }
.footer-wordmark { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.footer-meta .footer-copy { font-family: var(--font); font-size: 0.62rem; color: var(--muted); margin-top: 14px; letter-spacing: 0.12em; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .site-nav { top: 14px; left: 14px; }
  .nav-toggle { padding: 10px 15px; font-size: 0.58rem; letter-spacing: 0.24em; }
  .nav-menu { min-width: 220px; }
  .page-hero, .visit-hero, .events-hero, .tix-hero { padding: 132px 24px 24px; }
  .article { padding: 48px 24px 80px; }
  .visit-info { grid-template-columns: 1fr; padding: 40px 20px; }
  .info-card { padding: 40px 28px; }
  .visit-cta, .reserve-cta { padding: 44px 24px 100px; }
  .btn-tickets, .btn-reserve { padding: 19px 44px; font-size: 0.65rem; letter-spacing: 0.24em; }
  .food-hero-image { padding: 0 20px; margin-top: 36px; }
  .offerings { grid-template-columns: 1fr; padding: 48px 20px 24px; }
  .offering { padding: 44px 30px; }
  .events-form-wrap, .tix-form-wrap { padding: 0 18px; }
  form#eventsForm, form#ticketsForm { padding: 36px 24px; }
  .field-row { grid-template-columns: 1fr; }
  .actions { grid-template-columns: 1fr; }
  .posts { padding: 52px 24px 80px; }
  .post + .post { margin-top: 56px; padding-top: 56px; }
  .post-ctas { flex-direction: column; }
  .post-cta { text-align: center; }
}
@media (max-width: 600px) {
  .site-footer { padding: 56px 20px 32px; }
  .newsletter-form { grid-template-columns: 1fr; }
  .newsletter-form input { border-right: none; border-bottom: 1px solid var(--line); }
  .newsletter-form button { padding: 16px; }
}