/* Option 1 — "The Board"
   Black, red and gold, taken from the shop's real logo.
   Photography does the selling. Loads after v-common.css. */

:root {
  --bg:        #0d0d0f;
  --bg-2:      #17171b;
  --surface:   #1c1c21;
  --ink:       #f6f1e6;
  --ink-2:     #d2ccbe;
  --dim:       #9a968c;
  --line:      #2b2b32;
  --accent:    #e02b1d;
  --accent-ink:#ffffff;
  --accent-2:  #f2b53b;

  --sans: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --radius: 5px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --measure: 34rem;
}

/* ---------- utility strip ---------- */
.util { background: var(--bg-2); border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: .8rem; }
.util .in { max-width: 88rem; margin: 0 auto; padding: .6rem var(--pad); display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.util a { color: var(--dim); text-decoration: none; }
.util a:hover { color: var(--ink); }
.util .sep { color: #4a4a52; }
.openflag { display: inline-flex; align-items: center; gap: .45rem; color: var(--accent-2); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.openflag i { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(242,181,59,.2); }

/* ---------- masthead ---------- */
.mast { position: sticky; top: 0; z-index: 50; background: rgba(13,13,15,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.mast .in { max-width: 88rem; margin: 0 auto; padding: .8rem var(--pad); display: flex; align-items: center; gap: 2rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; font-family: var(--sans); line-height: 1; }
.brand img { width: 44px; height: 44px; border-radius: 8px; }
.brand b { display: block; font-size: 1.05rem; font-weight: 900; letter-spacing: -.02em; }
.brand i { display: block; font-style: normal; font-size: .62rem; letter-spacing: .24em; color: var(--accent-2); text-transform: uppercase; margin-top: .22rem; }
.mast nav { margin-left: auto; display: flex; gap: 1.15rem; flex-wrap: wrap; font-family: var(--sans); font-size: .85rem; font-weight: 600; }
.mast nav a { white-space: nowrap; }
.mast nav a { text-decoration: none; color: #cfcabd; }
.mast nav a:hover, .mast nav a[aria-current="page"] { color: var(--accent-2); }
.mast .callbtn { background: var(--accent); color: #fff; font-family: var(--sans); font-weight: 800; font-size: .9rem; padding: .7rem 1.15rem; border-radius: var(--radius); text-decoration: none; white-space: nowrap; }

/* ---------- home ---------- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--pad); max-width: 88rem; margin: 0 auto; padding: clamp(2.5rem,6vw,5rem) var(--pad); }
.hero .kicker { font-family: var(--sans); font-size: .72rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 1.4rem; }
.hero h1 { font-size: clamp(2.9rem,7vw,5.4rem); margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { font-size: clamp(1.05rem,1.6vw,1.28rem); color: var(--ink-2); max-width: 32rem; margin: 0 0 2rem; }
.hero .cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero .cta .btn { padding: 1.05rem 1.6rem; font-size: 1.02rem; }
.hero .note { font-family: var(--sans); font-size: .8rem; color: var(--dim); margin-top: 1.1rem; }
.shot { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); }
.shot img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.shot .tag { position: absolute; left: 1.1rem; bottom: 1.1rem; background: rgba(13,13,15,.88); backdrop-filter: blur(6px); border: 1px solid rgba(242,181,59,.35); padding: .6rem .95rem; border-radius: var(--radius); font-family: var(--sans); }
.shot .tag b { display: block; font-size: 1rem; font-weight: 900; }
.shot .tag i { font-style: normal; font-size: .75rem; color: var(--accent-2); }
.shot .ph { aspect-ratio: 4/5; background: repeating-linear-gradient(45deg,#1c1c21,#1c1c21 12px,#222227 12px,#222227 24px); display: grid; place-items: center; color: var(--dim); font-family: var(--sans); font-size: .85rem; text-align: center; padding: 2rem; }

.strip { background: var(--accent); padding: 1.05rem var(--pad); }
.strip .row { max-width: 88rem; margin: 0 auto; display: flex; gap: 2.2rem; flex-wrap: wrap; justify-content: center; font-family: var(--sans); font-weight: 800; font-size: .9rem; color: #fff; }

.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.sechead h2 { font-size: clamp(2rem,4vw,3rem); margin: 0; }
.sechead a { font-family: var(--sans); font-weight: 700; font-size: .9rem; color: var(--accent-2); text-decoration: none; border-bottom: 1px solid rgba(242,181,59,.4); padding-bottom: 2px; }

.cards { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1.25rem,3vw,2.25rem); }
.fcard { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fcard img { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.fcard .ph { aspect-ratio: 1/1; background: repeating-linear-gradient(45deg,#1c1c21,#1c1c21 12px,#222227 12px,#222227 24px); display: grid; place-items: center; color: var(--dim); font-family: var(--sans); font-size: .85rem; }
.fcard .body { padding: 1.6rem; }
.fcard .eye { font-family: var(--sans); font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); margin-bottom: .7rem; }
.fcard h3 { font-size: 1.85rem; margin-bottom: .4em; }
.fcard p { color: var(--ink-2); margin-bottom: 1.2rem; }
.fcard .pr { font-family: var(--sans); font-weight: 800; font-size: .95rem; border-top: 1px solid var(--line); padding-top: 1.05rem; }

.streets { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(11.5rem,1fr)); gap: .6rem; margin-top: 2rem; }
.stgrid a { font-family: var(--sans); font-weight: 800; font-size: .95rem; padding: .9rem 1rem; background: var(--surface); border: 1px solid #303038; border-radius: var(--radius); text-decoration: none; display: flex; justify-content: space-between; gap: .5rem; }
.stgrid a:hover { border-color: var(--accent-2); color: var(--accent-2); }
.stgrid i { font-style: normal; color: var(--dim); font-weight: 600; font-size: .8rem; }

.callout { text-align: center; background: linear-gradient(180deg,var(--bg),#141418); }
.callout h2 { font-size: clamp(2.2rem,5vw,3.6rem); }
.callout .tel { display: inline-block; font-family: var(--sans); font-weight: 900; font-size: clamp(2.2rem,6vw,4rem); color: var(--accent-2); text-decoration: none; letter-spacing: -.03em; margin: .3rem 0 1rem; }
.callout .tel:hover { color: #fff; }
.callout p { color: var(--dim); max-width: 34rem; margin: 0 auto; }

/* ---------- footer ---------- */
.foot { background: var(--bg-2); border-top: 1px solid var(--line); padding: clamp(2.5rem,5vw,4rem) var(--pad); font-family: var(--sans); font-size: .875rem; color: var(--dim); }
.foot .in { max-width: 88rem; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.foot b { color: var(--ink); display: block; margin-bottom: .8rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.foot a, .foot span.ln { color: var(--dim); text-decoration: none; display: block; margin-bottom: .45rem; }
.foot a:hover { color: var(--accent-2); }
.foot .tagline { font-family: var(--serif); color: var(--ink-2); margin-bottom: 1rem; }
.foot .shut { color: var(--accent); }

.menunav { background: var(--bg-2); }
.band { background: var(--surface); color: var(--ink); border-top: 1px solid var(--line); }
.band .btn { background: var(--accent); color: #fff; border-color: var(--accent); }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .mast nav { display: none; }
  .foot .in { grid-template-columns: 1fr; }
}

/* open-now badge states */
.openflag.is-shut { color: var(--accent); }