/* ==========================================================================
   Legends Billiards & Lounge — concept site stylesheet

   THIS IS NOT A TIER DEMO. It is a Standard-tier build made for a real
   business, Legends Billiards & Lounge of Brantford, Ontario, to be shown to
   them. The room has no website; it runs on a Facebook page.

   This branch is an ORPHAN. No shared history with `main` or with any other
   concept branch. Nothing here imports from anywhere else.

   WHY THIS LOOKS NOTHING LIKE THE OTHER CONCEPTS. Paris Jewellers got paper,
   thin rules and a quiet serif, because a goldsmith sells patience. This is a
   sixteen-table pool hall that runs to three in the morning, so it is the
   opposite: dark by default, baize green, chalk-coloured text, and a heavy
   condensed display face. A prospect who can tell he got a template feels
   like one of a list.

   THE PROBLEM THIS SITE FIXES. Legends runs organised tournaments and posts
   them to Facebook, where a post is buried within a day and invisible to
   anyone not already following. A league and tournament calendar that holds
   still is the single most useful thing this business could put online.

   CONTRAST — measured, not assumed.

   DARK GROUND (--felt-black #0F1411), which is most of the site:
     --chalk       #F4F1E8   16.5:1   body text
     --chalk-soft  #B9B4A6    9.0:1   muted text
     --baize-lite  #4ADE80   10.7:1   accent text, links, placeholder marks
     #FFFFFF                 17.4:1   headings

   LIGHT GROUND (--chalk #F4F1E8), used for the alternating sections:
     --felt-black  #0F1411   16.5:1   body text
     --ink-soft    #4A4A42    7.9:1   muted text
     --baize       #1F7A4C    4.7:1   accent text and links
     white on --baize         5.3:1   primary button

   TWO COLOURS ARE GROUND-SPECIFIC AND THE RULE IS NOT SYMMETRICAL:
     --baize-lite #4ADE80 is 10.7:1 on the dark ground and only 1.5:1 on the
     light one. It is used for text ONLY inside .section--felt and the footer.
     Never put it on chalk.
     --baize #1F7A4C is 4.7:1 on chalk and fails on the dark ground. Light
     sections only.
   Both rules are enforced by scoping every text use of them to a parent class
   rather than trusting future edits to remember.

   PLACEHOLDERS ARE THE ARGUMENT, NOT AN OVERSIGHT. What Legends publishes is
   a name, an address, a phone number, an email, an equipment list, and hours
   on a directory listing. Table rates, league nights, tournament dates, the
   menu and every price are blanks, because the only honest alternatives were
   to omit them or invent them. The dashed marks double as the intake list for
   the first phone call. Do not "finish" them by guessing.
   ========================================================================== */

:root {
  --felt-black:  #0F1411;
  --felt-deep:   #080B09;
  --felt-raise:  #182220;
  --felt-line:   #2A3733;
  --chalk:       #F4F1E8;
  --chalk-alt:   #E8E3D6;
  --chalk-soft:  #B9B4A6;
  --ink-soft:    #4A4A42;
  --baize:       #1F7A4C;
  --baize-lite:  #4ADE80;
  --baize-tint:  #E2F3E8;
  --border-lite: #D6CFBE;

  --font-display: "Archivo", system-ui, "Segoe UI", sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --radius: 4px;
  --shell: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--felt-black);
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.66;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 0.45em;
  color: #fff;
}
h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5rem); }
h2 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
h4 {
  font-family: var(--font-body); font-size: 1.02rem; font-weight: 700;
  margin: 0 0 0.4em; color: #fff; letter-spacing: 0.01em;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--baize-lite); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img, svg { max-width: 100%; }

/* Outline, never box-shadow — a shadow is invisible in forced-colours mode. */
:focus-visible { outline: 3px solid var(--baize-lite); outline-offset: 3px; border-radius: 2px; }

.container { width: min(100% - 40px, var(--shell)); margin-inline: auto; }
.container--narrow { width: min(100% - 40px, 780px); margin-inline: auto; }

.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 200;
  background: var(--baize); color: #fff; padding: 12px 20px;
  border-radius: var(--radius); font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; text-decoration: none; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--baize-lite); margin: 0 0 15px;
}
.eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--baize-lite); }
.section--chalk .eyebrow { color: var(--baize); }
.section--chalk .eyebrow::before { background: var(--baize); }

.section-head { max-width: 680px; margin-bottom: clamp(28px, 4.5vw, 50px); }
.section-head--center { margin-inline: auto; text-align: center; }
.lede { font-size: clamp(1.04rem, 1rem + 0.4vw, 1.2rem); color: var(--chalk-soft); }
.section--chalk .lede { color: var(--ink-soft); }

/* ---------- The blanks ----------
   Two variants because the site has two grounds and the accent that works on
   one fails on the other. */
.tbc {
  background: rgba(74, 222, 128, 0.16);
  border-bottom: 2px dashed var(--baize-lite);
  color: var(--baize-lite);
  padding: 0 4px; font-style: italic;
}
.section--chalk .tbc, .tbc-block--light .tbc {
  background: var(--baize-tint);
  border-bottom-color: var(--baize);
  color: var(--baize);
}
.tbc-block {
  border: 2px dashed var(--baize-lite);
  background: rgba(74, 222, 128, 0.08);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
}
.tbc-block--light {
  border-color: var(--baize);
  background: var(--baize-tint);
}
.tbc-block__tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--baize-lite); margin-bottom: 13px;
}
.tbc-block--light .tbc-block__tag { color: var(--baize); }
.tbc-block__tag svg { width: 15px; height: 15px; }
.tbc-block h3 { font-size: 1.12rem; margin-bottom: 9px; }
.tbc-block--light h3 { color: var(--felt-black); }
.tbc-block p { color: var(--chalk-soft); font-size: 0.97rem; }
.tbc-block--light p { color: var(--ink-soft); }
.tbc-block ul { margin: 12px 0 0; padding-left: 20px; color: var(--chalk-soft); font-size: 0.95rem; }
.tbc-block--light ul { color: var(--ink-soft); }
.tbc-block li { margin-bottom: 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  padding: 17px 30px; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.16s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--lg { padding: 19px 36px; font-size: 1rem; }
.btn--primary { background: var(--baize); color: #fff; }
.btn--primary:hover { background: #18603C; color: #fff; text-decoration: none; transform: translateY(-2px); }
.btn--chalk { background: var(--chalk); color: var(--felt-black); }
.btn--chalk:hover { background: #fff; color: var(--felt-black); text-decoration: none; transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--chalk); border-color: var(--felt-line); }
.btn--outline:hover { border-color: var(--chalk); color: #fff; text-decoration: none; transform: translateY(-2px); }
.btn--outline-dark { background: transparent; color: var(--felt-black); border-color: var(--border-lite); }
.btn--outline-dark:hover { border-color: var(--felt-black); color: var(--felt-black); text-decoration: none; transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(15, 20, 17, 0.95);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--felt-line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; }
.nav__brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.nav__brand:hover { text-decoration: none; }
.nav__brand svg { width: 30px; height: 30px; color: var(--baize-lite); flex: none; }
.wordmark {
  display: flex; flex-direction: column; line-height: 1.06;
  font-family: var(--font-display); font-size: 1.24rem; font-weight: 800;
  letter-spacing: 0.01em; text-transform: uppercase;
}
.wordmark small {
  font-family: var(--font-body); font-size: 0.63rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--chalk-soft); margin-top: 4px;
}
.nav__menu { display: flex; align-items: center; gap: 32px; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a {
  color: var(--chalk); font-family: var(--font-display); font-size: 0.84rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 0; border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--baize-lite); text-decoration: none; border-bottom-color: var(--baize-lite); }
.nav__links a[aria-current="page"] { color: var(--baize-lite); border-bottom-color: var(--baize-lite); }
.nav__toggle {
  display: none; background: transparent; border: 2px solid var(--felt-line);
  border-radius: var(--radius); width: 48px; height: 48px;
  cursor: pointer; color: var(--chalk); padding: 0; place-items: center;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav[data-open="true"] .nav__toggle .icon-open { display: none; }
.nav[data-open="true"] .nav__toggle .icon-close { display: block; }

@media (max-width: 960px) {
  .nav__toggle { display: grid; }
  .nav__menu {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--felt-black); border-bottom: 1px solid var(--felt-line);
    padding: 10px 20px 22px;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .nav[data-open="true"] .nav__menu { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a { padding: 16px 0; border-bottom: 1px solid var(--felt-line); }
  .nav__cta { padding-top: 18px; }
  .nav__cta .btn { width: 100%; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 100px) 0; }
.section--raise { background: var(--felt-raise); }
.section--chalk { background: var(--chalk); color: var(--felt-black); }
.section--chalk h2, .section--chalk h3, .section--chalk h4 { color: var(--felt-black); }
.section--chalk p { color: var(--ink-soft); }
.section--chalk a { color: var(--baize); }
.section--tight { padding: clamp(42px, 6vw, 70px) 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(72px, 11vw, 140px) 0 clamp(58px, 8vw, 104px);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 22% 8%, rgba(31,122,76,0.34), transparent 70%),
    radial-gradient(ellipse 46% 44% at 88% 96%, rgba(74,222,128,0.12), transparent 72%);
  pointer-events: none;
}
.hero .container { position: relative; }
.hero h1 { max-width: 15ch; margin-bottom: 24px; }
.hero h1 .accent { color: var(--baize-lite); }
.hero__lead { max-width: 560px; font-size: clamp(1.06rem, 1rem + 0.45vw, 1.24rem); color: var(--chalk-soft); }
.hero .btn-row { margin-top: 34px; }
.hero__stats {
  display: flex; flex-wrap: wrap; gap: 14px 44px;
  margin-top: 48px; padding-top: 32px;
  border-top: 1px solid var(--felt-line);
}
.hero__stat { display: flex; flex-direction: column; gap: 3px; }
.hero__stat b {
  font-family: var(--font-display); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 800; color: var(--baize-lite); line-height: 1;
}
.hero__stat span { font-size: 0.86rem; color: var(--chalk-soft); }

/* ---------- Page banner ---------- */
.page-head {
  position: relative; overflow: hidden;
  padding: clamp(50px, 7vw, 86px) 0 clamp(42px, 5.5vw, 66px);
  border-bottom: 1px solid var(--felt-line);
}
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 66% 100% at 18% 0%, rgba(31,122,76,0.28), transparent 72%);
  pointer-events: none;
}
.page-head .container { position: relative; }
.page-head h1 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem); max-width: 18ch; }
.page-head p { max-width: 620px; color: var(--chalk-soft); }

/* ---------- Breadcrumbs ---------- */
.crumbs { border-bottom: 1px solid var(--felt-line); font-size: 0.83rem; color: var(--chalk-soft); }
.crumbs ol { list-style: none; margin: 0; padding: 15px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.crumbs li { display: inline-flex; align-items: center; gap: 9px; }
.crumbs li + li::before { content: "/"; color: var(--felt-line); }
.crumbs a { color: var(--chalk-soft); }
.crumbs a:hover { color: var(--baize-lite); }
.crumbs [aria-current="page"] { color: #fff; font-weight: 600; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: clamp(16px, 2.2vw, 26px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: var(--felt-raise);
  border: 1px solid var(--felt-line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 32px);
  display: flex; flex-direction: column;
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.card:hover { border-color: var(--baize); transform: translateY(-3px); }
.section--chalk .card { background: #fff; border-color: var(--border-lite); }
.section--chalk .card p { color: var(--ink-soft); }
.card__icon {
  width: 46px; height: 46px; margin-bottom: 20px;
  display: grid; place-items: center;
  border: 2px solid var(--baize); border-radius: var(--radius);
  color: var(--baize-lite); flex: none;
}
.section--chalk .card__icon { color: var(--baize); }
.card__icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--chalk-soft); font-size: 0.97rem; }
.card__link {
  margin-top: auto; padding-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--baize-lite);
}
.section--chalk .card__link { color: var(--baize); }
.card__link svg { width: 15px; height: 15px; transition: transform 0.18s var(--ease); }
.card:hover .card__link svg { transform: translateX(4px); }

/* ---------- Split ---------- */
.split { display: grid; gap: clamp(28px, 4.6vw, 64px); grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); align-items: center; }
.split--top { align-items: start; }

/* ---------- Spec rows ---------- */
.rows { border-top: 1px solid var(--felt-line); margin: 0; }
.section--chalk .rows, .tbc-block--light .rows { border-top-color: var(--border-lite); }
.row {
  display: grid; gap: 6px 30px;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  padding: 18px 0; border-bottom: 1px solid var(--felt-line);
  align-items: start;
}
.section--chalk .row, .tbc-block--light .row { border-bottom-color: var(--border-lite); }
.row dt { font-weight: 700; color: #fff; margin: 0; }
.section--chalk .row dt, .tbc-block--light .row dt { color: var(--felt-black); }
.row dd { margin: 0; color: var(--chalk-soft); }
.section--chalk .row dd, .tbc-block--light .row dd { color: var(--ink-soft); }
@media (max-width: 620px) { .row { grid-template-columns: 1fr; } }

/* ---------- Tick list ---------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--chalk-soft); }
.ticks svg { width: 19px; height: 19px; color: var(--baize-lite); flex: none; margin-top: 3px; }
.section--chalk .ticks li { color: var(--ink-soft); }
.section--chalk .ticks svg { color: var(--baize); }

/* ---------- Callout ---------- */
.callout {
  border-left: 4px solid var(--baize);
  padding: 4px 0 4px 22px; margin-top: 26px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.55rem);
  line-height: 1.24; text-transform: uppercase; color: #fff;
}
.section--chalk .callout { color: var(--felt-black); }

/* ---------- CTA ---------- */
.cta { background: var(--baize); color: #fff; padding: clamp(48px, 7vw, 82px) 0; text-align: center; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,0.92); max-width: 560px; margin-inline: auto; }
.cta .btn-row { margin-top: 30px; justify-content: center; }
.cta a { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: var(--felt-deep); padding: clamp(46px, 6vw, 72px) 0 0; border-top: 1px solid var(--felt-line); }
.footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); padding-bottom: 38px; }
.footer-col h4 {
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--baize-lite); margin-bottom: 16px; font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a, .footer-col span { color: var(--chalk-soft); font-size: 0.94rem; }
.footer-col a:hover { color: #fff; }
.footer-col .blurb { color: var(--chalk-soft); font-size: 0.94rem; max-width: 34ch; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; margin-bottom: 15px; }
.footer-brand:hover { text-decoration: none; }
.footer-brand svg { width: 27px; height: 27px; color: var(--baize-lite); }
.footer-bottom {
  border-top: 1px solid var(--felt-line); padding: 20px 0;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 0.85rem; color: var(--chalk-soft);
}

/* ---------- The unofficial-concept notice ---------- */
.demo-note {
  background: #050706; color: #9AA39D; font-size: 0.82rem; text-align: center;
  padding: 15px 20px; margin: 0; line-height: 1.62;
  border-top: 1px solid var(--felt-line);
}
.demo-note strong { color: var(--baize-lite); }
.demo-note a { color: var(--baize-lite); text-decoration: underline; }
.demo-note span.wrap { display: block; max-width: 80ch; margin-inline: auto; }

/* ---------- Reveal ----------
   Opt-in via a class set inline in the head. Never write a bare
   `.reveal { opacity: 0 }` — that hides the page when JS is off. */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
.js-reveal .reveal[data-delay="1"] { transition-delay: 0.07s; }
.js-reveal .reveal[data-delay="2"] { transition-delay: 0.14s; }
.js-reveal .reveal[data-delay="3"] { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .card:hover, .btn:hover { transform: none; }
}

@media print {
  .site-header, .cta, .demo-note { display: none !important; }
  body { background: #fff; color: #000; }
}