/*
 * Bridge St — styles.css
 * bridgest.ie · v1 · 2026-05-30
 *
 * Structure:
 *   1. Google Fonts
 *   2. Design tokens (from bridge-st-design skill)
 *   3. Base reset + typography
 *   4. Child brand scopes + Stage
 *   5. Site layout — header, sections, footer
 *   6. Components — hero, buy-a-drink, events strip, tiles, fire-slice
 *   7. Mobile responsive
 */

/* ── 1. GOOGLE FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter+Tight:wght@400;500;600&display=swap');

/* ── 2. DESIGN TOKENS ────────────────────────────────────────── */
:root {
  /* Paper */
  --paper:        #F6F1E7;
  --paper-2:      #EFE8D9;
  --paper-3:      #E6DDC9;
  --paper-edge:   #D9CFB7;

  /* Ink */
  --ink:          #14120F;
  --ink-2:        #2A2722;
  --ink-3:        #5A544A;
  --ink-4:        #8A8275;
  --ink-5:        #B6AE9C;

  /* Lamp */
  --lamp:         #C8862A;
  --lamp-deep:    #8C5A18;
  --lamp-glow:    #E8C589;

  /* Stage */
  --stage:        #16140F;
  --stage-2:      #221F18;
  --stage-3:      #34302A;
  --stage-edge:   #4A4438;

  /* Semantic */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --fg-1:         var(--ink-2);
  --fg-2:         var(--ink-3);
  --fg-3:         var(--ink-4);
  --fg-faint:     var(--ink-5);
  --rule:         var(--ink-5);
  --accent:       var(--lamp);
  --accent-deep:  var(--lamp-deep);
  --link:         var(--ink);
  --link-hover:   var(--lamp-deep);

  /* Child accents */
  --bos-accent:        #6B4F8A;
  --bos-accent-deep:   #46315E;
  --ccc-accent:        #B23A2E;
  --ccc-accent-deep:   #7A2218;
  --fire-accent:       #C8542A;
  --fire-accent-deep:  #8A3416;
  --seomra-accent:     #4A6B55;
  --seomra-accent-deep:#2E4636;
  --rooms-accent:      #5A544A;
  --rooms-accent-deep: #2A2722;

  /* Type families */
  --serif:  'EB Garamond', Georgia, serif;
  --sans:   'Inter Tight', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --fs-display: clamp(2.75rem, 6vw + 1rem, 5.5rem);
  --fs-h1:      clamp(2.0rem, 3.6vw + 1rem, 3.5rem);
  --fs-h2:      clamp(1.625rem, 1.8vw + 1rem, 2.25rem);
  --fs-h3:      clamp(1.25rem, 0.8vw + 1rem, 1.5rem);
  --fs-h4:      1.125rem;
  --fs-body:    1.0625rem;
  --fs-body-sm: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-micro:   0.6875rem;

  /* Spacing */
  --s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px;
  --s-5:  24px; --s-6:  32px; --s-7:  48px; --s-8:  64px;
  --s-9:  96px; --s-10: 144px;
  --gutter:    20px;
  --gutter-lg: 48px;
  --measure:   62ch;

  /* Radii */
  --r-1: 2px;
  --r-2: 4px;

  /* Motion */
  --ease:  cubic-bezier(.2, .6, .2, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;

  /* Layout */
  --max-w:      1200px;
  --header-h:   64px;
}

/* ── 3. BASE RESET + TYPOGRAPHY ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--fg-1);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga", "onum";
}

::selection { background: var(--lamp-glow); color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--ink-5);
  transition: color var(--dur-1) var(--ease),
              text-decoration-color var(--dur-1) var(--ease);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-2);
}

.lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--fs-body) * 1.15);
  line-height: 1.5;
  color: var(--ink-2);
}

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-6) 0; }

/* ── 4. CHILD SCOPES + STAGE ────────────────────────────────── */
.bos    { --accent: var(--bos-accent);    --accent-deep: var(--bos-accent-deep); }
.ccc    { --accent: var(--ccc-accent);    --accent-deep: var(--ccc-accent-deep); }
.fire   { --accent: var(--fire-accent);   --accent-deep: var(--fire-accent-deep); }
.seomra { --accent: var(--seomra-accent); --accent-deep: var(--seomra-accent-deep); }
.rooms  { --accent: var(--rooms-accent);  --accent-deep: var(--rooms-accent-deep); }

.stage {
  background: var(--stage);
  color: var(--paper);
  --bg: var(--stage);
  --fg-1: var(--paper);
  --fg-2: rgba(246,241,231,0.6);
  --fg-3: rgba(246,241,231,0.4);
  --rule: var(--stage-edge);
  --link: var(--paper);
}

/* ── 5. SITE LAYOUT ─────────────────────────────────────────── */

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 16px;
  font-family: var(--sans);
  font-size: var(--fs-caption);
  text-decoration: none;
  z-index: 100;
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: 0; }

/* ── HEADER ── */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--ink-5);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 10);
}

.site-header__wordmark {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.005em;
  flex-shrink: 0;
}
.site-header__wordmark sup {
  font-size: 0.5em;
  position: relative;
  top: -0.7em;
  left: 2px;
  border-bottom: 1.5px solid currentColor;
  padding: 0 2px 1px;
}

.site-nav {
  display: flex;
  gap: 22px;
  align-items: baseline;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease);
}
.site-nav a:hover { color: var(--lamp-deep); }
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--lamp);
}

/* Burger (mobile only) */
.site-header__burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.site-header__burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: opacity var(--dur-1) var(--ease);
}

/* Mobile nav sheet */
.site-nav-sheet {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-5);
  padding: 12px var(--gutter) 24px;
  flex-direction: column;
  gap: 0;
  z-index: 50;
}
.site-nav-sheet.is-open { display: flex; }
.site-nav-sheet a {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-5);
}
.site-nav-sheet a:last-child { border-bottom: 0; }

/* ── PAGE WRAPPER ── */
.page { max-width: var(--max-w); margin: 0 auto; }
section { padding: var(--s-7) var(--gutter); }

/* ── 6. COMPONENTS ──────────────────────────────────────────── */

/* ── HERO ── */
.hero {
  padding: var(--s-8) var(--gutter) var(--s-7);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s-6);
}
.hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 8px var(--lamp);
  flex-shrink: 0;
}
.hero__h1 {
  font-size: clamp(2.2rem, 5vw + 1rem, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 18ch;
  margin-bottom: var(--s-5);
}
.hero__lede {
  font-size: calc(var(--fs-body) * 1.12);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
  margin-bottom: var(--s-6);
}
.hero__actions {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--r-1);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  display: inline-block;
  white-space: nowrap;
}
.btn--primary {
  background: var(--ink);
  color: var(--paper);
  padding: 13px 22px;
}
.btn--primary:hover { background: var(--ink-2); color: var(--paper); text-decoration: none; }
.btn--ghost {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-5);
  text-underline-offset: 4px;
  padding: 0;
  background: none;
  font-weight: 400;
  letter-spacing: 0;
}
.btn--ghost:hover { color: var(--lamp-deep); text-decoration-color: currentColor; }

/* ── BUY A DRINK ── */
.buy-a-drink {
  border-top: 1px solid var(--ink-5);
  padding: var(--s-7) var(--gutter);
}
.buy-a-drink__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.buy-a-drink__copy { max-width: 42ch; }
.buy-a-drink__heading {
  font-size: var(--fs-h3);
  line-height: 1.15;
  margin-bottom: var(--s-3);
}
.buy-a-drink__sub {
  font-style: italic;
  color: var(--ink-3);
  font-size: var(--fs-body-sm);
  margin: 0;
}
.btn--accent {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  padding: 12px 22px;
  text-decoration: none;
  border-radius: var(--r-1);
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn--accent:hover { background: var(--ink); color: var(--paper); text-decoration: none; }

/* ── EVENTS STRIP ── */
.events-strip {
  border-top: 1px solid var(--ink-5);
  padding: var(--s-7) var(--gutter);
}
.events-strip__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-5);
  gap: var(--s-4);
}
.events-strip__title {
  font-size: var(--fs-h3);
}
.events-strip__more {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.events-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
}
.event-tile {
  display: block;
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
  border-top: 1px solid var(--ink-5);
  border-right: 1px solid var(--ink-5);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-2) var(--ease);
}
.event-tile:last-child { border-right: 0; }
.event-tile:hover { border-top-color: var(--ink); }
.event-tile__date {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-2);
  margin-bottom: var(--s-2);
}
.event-tile__name {
  font-size: var(--fs-h4);
  color: var(--ink);
  margin-bottom: var(--s-1);
  font-weight: 500;
}
.event-tile__room {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  color: var(--fg-2);
}

/* Placeholder state for events (Session 2 will replace with live data) */
.events-strip__placeholder {
  font-style: italic;
  color: var(--ink-4);
  font-size: var(--fs-body-sm);
}
/* When events strip has no content, collapse its padding */
.events-strip:has(#events-strip-content:empty),
.events-strip:has(#events-strip-content[style*="display:none"]) {
  padding-bottom: 0;
}

/* ── TILES GRID ── */
.tiles {
  border-top: 1px solid var(--ink-5);
  padding: var(--s-7) var(--gutter);
}
.tiles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
}
.tile {
  display: block;
  padding: 32px 24px 28px;
  border-top: 1px solid var(--ink-5);
  border-right: 1px solid var(--ink-5);
  text-decoration: none;
  color: inherit;
  min-height: 220px;
  transition: border-top-color var(--dur-2) var(--ease),
              border-top-width var(--dur-2) var(--ease);
  position: relative;
}
.tile:last-child { border-right: 0; }
.tile:hover { border-top-color: var(--accent); border-top-width: 2px; }
.tile__eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.tile__title {
  font-size: calc(var(--fs-h3) * 1.05);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: var(--s-3);
  font-weight: 500;
}
.tile__blurb {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 30ch;
  margin: 0;
}
.tile__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s-6);
}
.tile__arrow {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink-4);
}

/* ── FIRE SLICE ── */
.fire-slice {
  border-top: 1px solid var(--ink-5);
  padding: var(--s-7) var(--gutter);
}
.fire-slice__inner {
  max-width: 44ch;
}
.fire-slice__heading {
  font-size: var(--fs-h2);
  margin-bottom: var(--s-4);
}
.fire-slice__body {
  color: var(--ink-2);
  margin-bottom: var(--s-5);
}
.fire-slice__cta {
  font-family: var(--sans);
  font-size: var(--fs-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fire-accent);
  text-decoration: none;
}
.fire-slice__cta:hover { color: var(--fire-accent-deep); text-decoration: none; }

/* ── FOOTER ── */
.site-footer {
  background: var(--stage);
  color: var(--paper);
  margin-top: var(--s-9);
}
.site-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-8) var(--gutter) var(--s-6);
}
.site-footer__lead {
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--stage-edge);
  margin-bottom: var(--s-7);
}
.site-footer__wordmark {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 500;
  color: var(--paper);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--s-4);
}
.site-footer__wordmark sup {
  font-size: 0.5em;
  position: relative;
  top: -0.7em;
  left: 2px;
  border-bottom: 1.5px solid currentColor;
  padding: 0 2px 1px;
}
.site-footer__tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(246,241,231,0.75);
  max-width: 44ch;
  margin: 0;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-7) var(--s-6);
  margin-bottom: var(--s-7);
}
.site-footer__col-head {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(246,241,231,0.45);
  margin-bottom: var(--s-4);
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.site-footer__col a,
.site-footer__col span {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--paper);
  text-decoration: none;
}
.site-footer__col a:hover { color: var(--lamp-glow); text-decoration: none; }
.site-footer__hours { border-collapse: collapse; }
.site-footer__hours td {
  padding-bottom: var(--s-1);
  vertical-align: baseline;
}
.site-footer__hours td:first-child {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(246,241,231,0.55);
  padding-right: var(--s-5);
  white-space: nowrap;
}
.site-footer__hours td:last-child {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--paper);
}
.site-footer__fine {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(246,241,231,0.38);
  padding-top: var(--s-5);
  border-top: 1px solid var(--stage-edge);
}

/* ── NOW PLAYING WIDGET (placeholder for Session 5) ── */
.now-playing {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--stage-2);
  color: var(--paper);
  padding: 10px 14px;
  border-radius: var(--r-2);
  font-family: var(--sans);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 40;
  opacity: 0;   /* hidden until Session 5 wires data */
  pointer-events: none;
}
.now-playing__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lamp);
  flex-shrink: 0;
}

/* ── 7. MOBILE ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  .site-nav { display: none; }
  .site-header__burger { display: flex; }

  .hero { padding: var(--s-7) var(--gutter); }
  .hero__h1 { font-size: clamp(1.9rem, 7vw, 2.8rem); }

  .buy-a-drink__inner { flex-direction: column; align-items: flex-start; }

  .tiles__grid { grid-template-columns: 1fr; }
  .tile { border-right: 0; min-height: auto; }

  .events-strip__list { grid-template-columns: 1fr; }
  .event-tile { border-right: 0; padding-right: 0; }
  .event-tile:last-child { border-bottom: 1px solid var(--ink-5); }

  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .now-playing { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}