/* ==========================================================================
   Two Doors Down — concept site stylesheet

   NOT A TIER DEMO. A Standard-tier build made for a real business, Two Doors
   Down of Brantford, Ontario, to be shown to them. The bar has no website.

   ORPHAN BRANCH. No shared history with `main` or with any other concept.

   WHY IT LOOKS LIKE THIS. Paris Jewellers got paper and a quiet serif; Legends
   got baize green. This is a dive bar that books emerging bands, so it is
   posters and gig listings: near-black, bone paper, one hot red used the way a
   gig poster uses it, and a heavy grotesque set tight. A prospect who can tell
   he got a template feels like one of a list.

   THE PROBLEM THIS FIXES. Two Doors Down is a live music venue whose listings
   exist only as Facebook posts. Bands cannot find a booking route, punters
   cannot find who is playing on Friday, and the Toronto Blues Society lists the
   venue while the venue itself publishes nothing. A gig calendar that holds
   still is the whole argument.

   CONTRAST — measured, not assumed.

   DARK GROUND (--pitch #121212):
     --bone        #EDEAE4   15.6:1   body text
     --bone-soft   #ABA69E    7.6:1   muted text
     --amber       #F5B841   10.5:1   accent text, links, placeholder marks
     #FFFFFF                 17.6:1   headings

   LIGHT GROUND (--bone #EDEAE4):
     --pitch       #121212   15.6:1   body text
     --ink-soft    #4A4744    7.7:1   muted text
     --red-ink     #A81529    6.2:1   accent text and links
     white on --red-ink       7.5:1   primary button

   --red #E23B4E measures 4.4:1 on the dark ground and 3.5:1 on the light one.
   It FAILS AA on both and is therefore DECORATIVE ONLY — rules, borders, icon
   strokes, the underline on the wordmark. No words are ever set in it.

   --amber is 10.5:1 on dark and only 1.7:1 on bone, so its text use is scoped
   to dark sections. --red-ink is the reverse. Both are scoped by parent class
   rather than trusting a future edit to remember.

   PLACEHOLDERS ARE THE ARGUMENT. What is publicly known about this bar is a
   name, an address, two conflicting phone numbers, an email, that it books
   emerging artists, that it was recently renovated and that it serves Sleeman's.
   Every gig, price, hour and capacity is a blank, because the only honest
   options were to omit or invent. Do not "finish" these by guessing.
   ========================================================================== */

:root {
  --pitch: #121212; --pitch-deep: #0A0A0A; --pitch-raise: #1C1B1A; --pitch-line: #2E2C29;
  --bone: #EDEAE4; --bone-alt: #E0DCD3; --bone-soft: #ABA69E;
  --ink-soft: #4A4744; --border-lite: #CFC9BE;
  --red: #E23B4E; --red-ink: #A81529; --amber: #F5B841;
  --font-display: "Anton", "Archivo Black", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2,0.7,0.3,1); --radius: 3px; --shell: 1180px;
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin:0; background: var(--pitch); color: var(--bone); font-family: var(--font-body); font-size:17px; line-height:1.66; }

h1,h2,h3 { font-family: var(--font-display); font-weight:400; line-height:0.98; letter-spacing:0.01em; text-transform:uppercase; margin:0 0 0.4em; color:#fff; }
h1 { font-size: clamp(2.9rem,1.4rem+6vw,6rem); }
h2 { font-size: clamp(2rem,1.2rem+3.4vw,3.4rem); }
h3 { font-size:1.35rem; }
h4 { font-family: var(--font-body); font-size:1rem; font-weight:700; margin:0 0 0.4em; color:#fff; }
p { margin:0 0 1.1em; } p:last-child { margin-bottom:0; }
a { color: var(--amber); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
img,svg { max-width:100%; }
:focus-visible { outline:3px solid var(--amber); 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(--red-ink); 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; }

.eyebrow { display:inline-flex; align-items:center; gap:11px; font-family:var(--font-body); font-weight:700; font-size:0.73rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--amber); margin:0 0 15px; }
.eyebrow::before { content:""; width:22px; height:3px; background:var(--red); }
.section--bone .eyebrow { color: var(--red-ink); }
.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(--bone-soft); }
.section--bone .lede { color: var(--ink-soft); }

/* Blanks — two variants because the site has two grounds */
.tbc { background:rgba(245,184,65,0.16); border-bottom:2px dashed var(--amber); color:var(--amber); padding:0 4px; font-style:italic; }
.section--bone .tbc, .tbc-block--light .tbc { background:rgba(168,21,41,0.09); border-bottom-color:var(--red); color:var(--red-ink); }
.tbc-block { border:2px dashed var(--amber); background:rgba(245,184,65,0.07); border-radius:var(--radius); padding:clamp(20px,3vw,32px); }
.tbc-block--light { border-color:var(--red); background:rgba(168,21,41,0.05); }
.tbc-block__tag { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--amber); margin-bottom:13px; }
.tbc-block--light .tbc-block__tag { color: var(--red-ink); }
.tbc-block__tag svg { width:15px; height:15px; }
.tbc-block h3 { font-size:1.1rem; margin-bottom:9px; }
.tbc-block--light h3 { color: var(--pitch); }
.tbc-block p { color:var(--bone-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(--bone-soft); font-size:0.95rem; }
.tbc-block--light ul { color: var(--ink-soft); }
.tbc-block li { margin-bottom:6px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-body); 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(--red-ink); color:#fff; }
.btn--primary:hover { background:#87101F; color:#fff; text-decoration:none; transform:translateY(-2px); }
.btn--bone { background:var(--bone); color:var(--pitch); }
.btn--bone:hover { background:#fff; color:var(--pitch); text-decoration:none; transform:translateY(-2px); }
.btn--outline { background:transparent; color:var(--bone); border-color:var(--pitch-line); }
.btn--outline:hover { border-color:var(--bone); color:#fff; text-decoration:none; transform:translateY(-2px); }
.btn--outline-dark { background:transparent; color:var(--pitch); border-color:var(--border-lite); }
.btn--outline-dark:hover { border-color:var(--pitch); color:var(--pitch); text-decoration:none; transform:translateY(-2px); }
.btn-row { display:flex; flex-wrap:wrap; gap:14px; }
.btn-row--center { justify-content:center; }

.site-header { position:sticky; top:0; z-index:100; background:rgba(18,18,18,0.95); backdrop-filter:blur(9px); border-bottom:1px solid var(--pitch-line); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px; }
.nav__brand { display:inline-flex; align-items:center; gap:12px; color:#fff; }
.nav__brand:hover { text-decoration:none; }
.nav__brand svg { width:28px; height:28px; color:var(--red); flex:none; }
.wordmark { display:flex; flex-direction:column; line-height:0.98; font-family:var(--font-display); font-size:1.3rem; text-transform:uppercase; }
.wordmark small { font-family:var(--font-body); font-size:0.62rem; font-weight:600; letter-spacing:0.18em; color:var(--bone-soft); margin-top:5px; }
.nav__menu { display:flex; align-items:center; gap:30px; }
.nav__links { display:flex; align-items:center; gap:25px; }
.nav__links a { color:var(--bone); font-size:0.83rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; padding:7px 0; border-bottom:2px solid transparent; }
.nav__links a:hover { color:var(--amber); text-decoration:none; border-bottom-color:var(--red); }
.nav__links a[aria-current="page"] { color:var(--amber); border-bottom-color:var(--red); }
.nav__toggle { display:none; background:transparent; border:2px solid var(--pitch-line); border-radius:var(--radius); width:48px; height:48px; cursor:pointer; color:var(--bone); 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:900px){
  .nav__toggle { display:grid; }
  .nav__menu { position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--pitch); border-bottom:1px solid var(--pitch-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(--pitch-line); }
  .nav__cta { padding-top:18px; }
  .nav__cta .btn { width:100%; }
}

.section { padding:clamp(56px,8vw,100px) 0; }
.section--raise { background:var(--pitch-raise); }
.section--bone { background:var(--bone); color:var(--pitch); }
.section--bone h2,.section--bone h3,.section--bone h4 { color:var(--pitch); }
.section--bone p { color:var(--ink-soft); }
.section--bone a { color:var(--red-ink); }
.section--tight { padding:clamp(42px,6vw,70px) 0; }

.hero { position:relative; overflow:hidden; padding:clamp(70px,11vw,138px) 0 clamp(56px,8vw,100px); }
.hero::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse 68% 58% at 20% 6%, rgba(226,59,78,0.26), transparent 70%), radial-gradient(ellipse 44% 42% at 90% 98%, rgba(245,184,65,0.12), transparent 72%); pointer-events:none; }
.hero .container { position:relative; }
.hero h1 { max-width:13ch; margin-bottom:22px; }
.hero h1 .accent { color:var(--amber); }
.hero__lead { max-width:560px; font-size:clamp(1.06rem,1rem+0.45vw,1.24rem); color:var(--bone-soft); }
.hero .btn-row { margin-top:32px; }
.hero__meta { display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:44px; padding-top:30px; border-top:1px solid var(--pitch-line); font-size:0.87rem; color:var(--bone-soft); }
.hero__meta span { display:inline-flex; align-items:center; gap:9px; }
.hero__meta svg { width:16px; height:16px; color:var(--amber); flex:none; }

.page-head { position:relative; overflow:hidden; padding:clamp(48px,7vw,84px) 0 clamp(40px,5.5vw,64px); border-bottom:1px solid var(--pitch-line); }
.page-head::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse 64% 100% at 16% 0%, rgba(226,59,78,0.22), transparent 72%); pointer-events:none; }
.page-head .container { position:relative; }
.page-head h1 { font-size:clamp(2.3rem,1.4rem+3.4vw,3.8rem); max-width:17ch; }
.page-head p { max-width:620px; color:var(--bone-soft); }

.crumbs { border-bottom:1px solid var(--pitch-line); font-size:0.83rem; color:var(--bone-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(--pitch-line); }
.crumbs a { color:var(--bone-soft); }
.crumbs a:hover { color:var(--amber); }
.crumbs [aria-current="page"] { color:#fff; font-weight:600; }

.grid { display:grid; gap:clamp(16px,2.2vw,26px); }
.grid--2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid--4 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.card { background:var(--pitch-raise); border:1px solid var(--pitch-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(--red); transform:translateY(-3px); }
.section--bone .card { background:#fff; border-color:var(--border-lite); }
.section--bone .card p { color:var(--ink-soft); }
.card__icon { width:46px; height:46px; margin-bottom:20px; display:grid; place-items:center; border:2px solid var(--red); border-radius:var(--radius); color:var(--amber); flex:none; }
.section--bone .card__icon { color:var(--red-ink); }
.card__icon svg { width:22px; height:22px; }
.card h3 { margin-bottom:10px; }
.card p { color:var(--bone-soft); font-size:0.97rem; }
.card__link { margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:8px; font-size:0.81rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--amber); }
.section--bone .card__link { color:var(--red-ink); }
.card__link svg { width:15px; height:15px; transition:transform 0.18s var(--ease); }
.card:hover .card__link svg { transform:translateX(4px); }

.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; }

.rows { border-top:1px solid var(--pitch-line); margin:0; }
.section--bone .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(--pitch-line); align-items:start; }
.section--bone .row, .tbc-block--light .row { border-bottom-color:var(--border-lite); }
.row dt { font-weight:700; color:#fff; margin:0; }
.section--bone .row dt, .tbc-block--light .row dt { color:var(--pitch); }
.row dd { margin:0; color:var(--bone-soft); }
.section--bone .row dd, .tbc-block--light .row dd { color:var(--ink-soft); }
@media (max-width:620px){ .row { grid-template-columns:1fr; } }

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

.callout { border-left:4px solid var(--red); padding:4px 0 4px 22px; margin-top:26px; font-family:var(--font-display); font-size:clamp(1.2rem,1rem+0.9vw,1.7rem); line-height:1.15; text-transform:uppercase; color:#fff; }
.section--bone .callout { color:var(--pitch); }

.cta { background:var(--red-ink); 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; }

.site-footer { background:var(--pitch-deep); padding:clamp(46px,6vw,72px) 0 0; border-top:1px solid var(--pitch-line); }
.footer-grid { display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); padding-bottom:38px; }
.footer-col h4 { font-size:0.71rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--amber); 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(--bone-soft); font-size:0.94rem; }
.footer-col a:hover { color:#fff; }
.footer-col .blurb { color:var(--bone-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:26px; height:26px; color:var(--red); }
.footer-bottom { border-top:1px solid var(--pitch-line); padding:20px 0; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:0.85rem; color:var(--bone-soft); }

.demo-note { background:#060606; color:#948F88; font-size:0.82rem; text-align:center; padding:15px 20px; margin:0; line-height:1.62; border-top:1px solid var(--pitch-line); }
.demo-note strong { color:var(--amber); }
.demo-note a { color:var(--amber); 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 a bare
   `.reveal{opacity:0}`, which would hide 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; } }