/* Canaba Cannabis, direction "House".
   Every value here is lifted from the approved Claude Design export
   (site/preview/canaba/v1 in the palle.ca repo) and its handoff README, so the
   rebuild matches what the client chose. Sizes interpolate between 390 and
   1440 with cqi against .site, which is the container, the same way the export
   does. */

/* Self-hosted Latin subsets of the Google Fonts files (both OFL). Same-origin
   and preloaded from the head, so on a slow phone the headings arrive in their
   own face instead of swapping from Georgia a couple of seconds in, and there
   are no extra hosts to connect to. Anything outside Latin falls back. */
@font-face { font-family: 'Young Serif'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/young-serif-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/instrument-sans-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/instrument-sans-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/instrument-sans-600-latin.woff2) format('woff2'); }

:root {
  --ink: #1E3A2B;
  --ink-hover: #2B4F3B;
  --ground: #F7E8CD;
  --raised: #EFDDBE;
  --cream: #FBF3E3;
  --muted: #4D5E52;
  --signal: #F2B230;
  --teal: #1D6B66;
  --blue: #245C86;
  --hair: #D9C4A0;
  --error: #9E3726;
  --photo: #D9D3C7;
  --serif: 'Young Serif', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
  --pad: clamp(24px, calc(6.86cqi - 2.7px), 96px);
  --sec-bottom: clamp(72px, calc(7.62cqi + 50px), 160px);
}

* { box-sizing: border-box; }
/* A class that sets display outranks the user agent's [hidden] rule, so the
   attribute would silently do nothing on it. Restated once, for everything. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); }

a { color: var(--teal); }
a:visited { color: var(--blue); }
a:hover { color: var(--ink); }

/* Focus is instant, never animated: a 2px ink outline plus a signal halo. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--signal);
}
input:focus-visible, .btn-submit:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--signal);
}

.site {
  position: relative; min-height: 100vh; container-type: inline-size;
  background-color: var(--ground);
  /* The grain goes on the ground only, at 160 CSS px. */
  background-image: url(/assets/grain.png); background-size: 160px 160px;
  color: var(--ink); font-family: var(--sans);
  font-size: clamp(18px, calc(0.19cqi + 17.26px), 20px); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 30;
  background: var(--ink); color: var(--ground); padding: 12px 16px; border-radius: 4px;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; color: var(--ground); }

.wrap { max-width: 1248px; margin: 0 auto; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Header ---------- */
.hdr { padding: 20px var(--pad); }
.hdr-in { max-width: 1248px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark, .wordmark:visited {
  font-family: var(--serif); font-weight: 400; font-size: clamp(20px, calc(0.38cqi + 18.5px), 24px);
  line-height: 1; color: var(--ink); text-decoration: none; border-radius: 2px; white-space: nowrap;
}
.nav-wide { display: none; flex-wrap: wrap; justify-content: flex-end; gap: 4px clamp(20px, 2.4cqi, 36px); font-weight: 600; font-size: 16px; }
.nav-narrow { display: flex; align-items: center; gap: 20px; font-weight: 600; font-size: 16px; }
@container (min-width: 1000px) {
  .nav-wide { display: flex; }
  .nav-narrow { display: none; }
}
.navlink, .navlink:visited {
  color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  min-height: 44px; display: flex; align-items: center; border-radius: 2px;
}
.navlink:hover { color: var(--teal); }
.navlink[aria-current="page"] { text-decoration-thickness: 3px; }
.navcall, .navcall:visited {
  background: var(--signal); color: var(--ink); text-decoration: none; min-height: 44px;
  display: flex; align-items: center; padding: 0 18px; border-radius: 4px;
}
.navcall:hover { background: var(--ink); color: var(--ground); }
.pagesbtn {
  min-height: 44px; padding: 0 14px; background: transparent; border: 1.5px solid var(--ink);
  border-radius: 4px; color: var(--ink); font: 600 16px/1 var(--sans); cursor: pointer;
}

/* The phone overlay. Hidden until site.js opens it; without script the
   footer nav on every page is the way around. */
.pages {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto;
  background-color: var(--ground); background-image: url(/assets/grain.png); background-size: 160px 160px;
  padding: 20px var(--pad) 48px;
}
.pages-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.closebtn {
  min-height: 44px; padding: 0 14px; background: var(--ink); border: 1.5px solid var(--ink);
  border-radius: 4px; color: var(--ground); font: 600 16px/1 var(--sans); cursor: pointer;
}
.pages ul { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1.5px solid var(--ink); }
.pages li { border-bottom: 1px solid var(--hair); }
.pages li a, .pages li a:visited {
  display: flex; min-height: 64px; align-items: center; font-family: var(--serif); font-weight: 400;
  font-size: 32px; line-height: 1.15; color: var(--ink); text-decoration: none; border-radius: 2px;
}
.pages-contact { margin-top: 40px; display: flex; flex-direction: column; gap: 6px; }
.pages-contact a, .pages-contact a:visited { font-weight: 600; font-size: 20px; color: var(--ink); }
html.locked, html.locked body { overflow: hidden; }

/* ---------- Type ---------- */
h1 { margin: 0; font-weight: 400; }
.eyebrow {
  display: block; margin: 0 0 20px; font: 600 13px/1.2 var(--sans);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.display {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, calc(4.95cqi + 24.7px), 96px); line-height: 1.04; letter-spacing: -0.015em;
  max-width: 12ch; text-wrap: balance;
}
.page-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, calc(4.95cqi + 24.7px), 96px); line-height: 1.04; letter-spacing: -0.015em; max-width: 16ch; text-wrap: balance; }
.lead { margin: 28px 0 0; max-width: 30ch; font-size: clamp(21px, calc(0.48cqi + 19.1px), 26px); line-height: 1.45; text-wrap: pretty; }
.h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(34px, calc(2.48cqi + 24.3px), 60px);
  line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 clamp(28px, 3cqi, 44px); text-wrap: balance;
}
.h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, calc(0.57cqi + 19.8px), 28px); line-height: 1.2; margin: 0 0 6px; }
.addr { font-style: normal; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, calc(0.95cqi + 22.3px), 36px); line-height: 1.25; font-variant-numeric: tabular-nums lining-nums; }
.prose { margin: 0; max-width: 40ch; text-wrap: pretty; }
.prose + .prose { margin-top: 16px; }

/* ---------- Links and buttons ---------- */
.more { margin: clamp(28px, 3cqi, 40px) 0 0; }
.tlink, .tlink:visited {
  color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1.5px; border-radius: 2px;
}
.tlink:hover { color: var(--ink); }
.links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.btns { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  flex: 1 1 150px; max-width: 200px; min-height: 56px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; font: 600 17px/1.2 var(--sans); text-decoration: none; font-variant-numeric: tabular-nums;
  text-align: center; padding: 0 12px; cursor: pointer;
  white-space: nowrap; /* a label too long for half a phone takes its own row rather than two lines */
}
.btn-primary, .btn-primary:visited { background: var(--ink); color: var(--ground); border: 0; }
.btn-primary:hover { background: var(--ink-hover); color: var(--ground); }
.btn-outline, .btn-outline:visited { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--raised); color: var(--ink); }
.hero .btns { margin-top: 32px; }
.hero .btn-primary { flex: 1 1 100%; max-width: 360px; min-height: 60px; font-size: 18px; }
.hero .btn-outline { max-width: 174px; }

/* ---------- Sections ---------- */
.hero { padding: clamp(48px, calc(4.57cqi + 30px), 96px) var(--pad) var(--sec-bottom); }
.intro { padding: clamp(48px, calc(4.57cqi + 30px), 96px) var(--pad) clamp(56px, calc(4.57cqi + 38px), 104px); }
.sec { padding: 0 var(--pad) var(--sec-bottom); }
.sec-in { max-width: 1248px; margin: 0 auto; border-top: 1.5px solid var(--ink); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 16px 32px; }
.label { flex: 1 1 240px; margin: 0; font: 600 13px/1.6 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.body { flex: 999 1 600px; min-width: 0; }

/* Open or closed. Filled by site.js from /api/status, which computes it in
   America/Regina on the server, never from the visitor's clock. Invisible until
   then, so a page with no script says nothing it cannot back up, but it keeps
   its height: appearing late used to push the buttons below it down. */
.status:not(.ready) { visibility: hidden; }
.status { min-height: 32px; margin-top: 36px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pill { background: var(--signal); color: var(--ink); font-weight: 600; font-size: 15px; padding: 6px 12px; border-radius: 3px; }
.pill.closed { background: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.status-text { font-weight: 500; }

/* Hours rows. */
.hours { max-width: 720px; font-variant-numeric: tabular-nums lining-nums; }
.hours-home { margin-top: 24px; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.row.today { padding: 14px 12px; margin: 0 -12px; background: var(--signal); border-radius: 3px; border-bottom: 0; }
.day { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, calc(0.57cqi + 19.8px), 28px); line-height: 1.2; }
.tag { font: 600 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-left: 8px; }
.time { font-weight: 500; white-space: nowrap; }

/* Two columns that stack: copy and a photo or map. */
.split { display: flex; flex-wrap: wrap; gap: 40px clamp(32px, 4cqi, 64px); }
.split > * { flex: 1 1 300px; min-width: 0; }
.photo { margin: 0; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--photo); }
@container (min-width: 1000px) { .photo img { aspect-ratio: 3 / 2; } }
.photo figcaption { margin-top: 10px; font-size: 15px; color: var(--muted); }
.map iframe {
  display: block; width: 100%; aspect-ratio: 1; border: 1.5px solid var(--ink); border-radius: 2px;
  filter: grayscale(1) sepia(0.28) contrast(0.92) brightness(1.02);
}

/* Definition rows: Age, ID, Licence; Parking, Entrance, Inside. */
.facts { max-width: 760px; margin: 0; }
.facts > div { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-weight: 600; }
.facts dd { margin: 4px 0 0; }

/* Directions. */
.steps { max-width: 760px; border-top: 1px solid var(--hair); }
.steps > div { padding: 18px 0; border-bottom: 1px solid var(--hair); }
.steps p { margin: 0; }

/* Questions and answers: the ID and the law page, and the FAQ. */
.qa { max-width: 760px; margin-top: -24px; }
.qa > div { padding: 24px 0; border-bottom: 1px solid var(--hair); }
.qa h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, calc(0.95cqi + 22.3px), 36px); line-height: 1.2; margin: 0 0 12px; text-wrap: balance; }
.qa p { margin: 0; max-width: 46ch; }
.qa p + p { margin-top: 12px; }
.qa .more { margin-top: 14px; }

/* How a visit works. */
.visit { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.visit li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.visit .n { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Footer ---------- */
.ftr { padding: 0 var(--pad) 48px; }
.ftr-in { max-width: 1248px; margin: 0 auto; border-top: 1.5px solid var(--ink); padding-top: 72px; display: flex; flex-wrap: wrap; gap: 48px 32px; font-variant-numeric: tabular-nums; }
.ftr-logo { flex: 1 1 240px; }
.ftr-logo img { display: block; width: 160px; height: auto; margin-bottom: 24px; }
.ftr-cols { flex: 999 1 600px; display: flex; flex-wrap: wrap; gap: 32px 48px; }
.ftr-col { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; }
.ftr-name { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.ftr-col a { border-radius: 2px; }
.ftr-phone { font-weight: 500; margin-top: 12px; }
.ftr-legal { flex: 1 1 100%; margin: 24px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 60ch; }

/* ---------- Age gate ---------- */
.gate { padding: clamp(56px, calc(3.81cqi + 41px), 96px) var(--pad) 48px; }
.gate-in { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 56px clamp(32px, 6cqi, 120px); align-items: flex-start; }
.gate-id { flex: 1 1 300px; display: flex; flex-direction: column; }
.gate-logo { display: block; align-self: flex-start; width: clamp(184px, calc(3.43cqi + 170.6px), 220px); height: auto; margin-bottom: clamp(48px, calc(3.05cqi + 36px), 80px); }
.gate-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, calc(3.05cqi + 32px), 76px); line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }
.gate-card { display: flex; flex-direction: column; gap: 4px; margin-top: 40px; padding-top: 20px; border-top: 1.5px solid var(--ink); font-variant-numeric: tabular-nums; }
.gate-card .n { font-family: var(--serif); font-size: 22px; line-height: 1.3; }
.gate-card a, .gate-card a:visited { color: var(--ink); font-weight: 500; }
.gate-form-col { flex: 1 1 300px; max-width: 520px; }
/* Below the two-column width the form comes straight after the heading and
   the store's address moves under it, so a phone shows the date boxes and
   Continue without scrolling. The logo shrinks for the same reason. */
@container (max-width: 999px) {
  .gate-in { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .gate-id { display: contents; }
  .gate { padding-top: 32px; }
  .gate-logo { order: 1; width: 96px; margin-bottom: 20px; }
  .gate-h1 { order: 2; font-size: 40px; }
  .gate-form-col { order: 3; width: 100%; margin-top: 28px; }
  .gate-card { order: 4; width: 100%; margin-top: 48px; }
}
.gate form, .underage { border-top: 1.5px solid var(--ink); padding-top: 24px; }
.gate fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.gate legend { font-family: var(--serif); font-size: clamp(26px, calc(0.95cqi + 22.3px), 34px); line-height: 1.2; padding: 0; margin-bottom: 8px; }
.hint { margin: 0 0 24px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dob { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px; }
.dob label { display: flex; flex-direction: column; gap: 8px; font-weight: 600; font-size: 15px; }
.dob input {
  height: 64px; width: 100%; padding: 0 14px; background: var(--cream); border: 1.5px solid var(--ink);
  border-radius: 4px; font: 500 28px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); outline: none;
}
.dob input[aria-invalid="true"] { border: 2px solid var(--error); }
.errors { min-height: 8px; margin-top: 16px; color: var(--error); font-weight: 500; font-size: 16px; line-height: 1.45; }
.btn-submit {
  margin-top: 16px; width: 100%; min-height: 60px; background: var(--ink); color: var(--ground); border: 0;
  border-radius: 4px; font: 600 18px/1 var(--sans); cursor: pointer;
}
.btn-submit:hover { background: var(--ink-hover); }
.gate-note { margin: 24px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 44ch; }
.underage h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, calc(0.95cqi + 24px), 36px); line-height: 1.15; margin: 0 0 16px; }
.underage p { margin: 0; max-width: 34ch; }

/* ---------- Menu ---------- */
.menu-main { padding: clamp(32px, calc(3cqi + 20px), 64px) 0 0; }
.menu-head { padding: 0 var(--pad); }
.menu-head-in { max-width: 1248px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: flex-end; padding-bottom: clamp(32px, 3cqi, 48px); }
.menu-head h1 { flex: 1 1 280px; font-family: var(--serif); font-size: clamp(44px, calc(4.95cqi + 24.7px), 96px); line-height: 1; letter-spacing: -0.015em; }
.menu-intro { flex: 1 1 380px; max-width: 600px; display: flex; flex-direction: column; gap: 10px; font-variant-numeric: tabular-nums; }
.menu-intro p { margin: 0; text-wrap: pretty; }
/* A sentence that does not fit moves down whole, so a line never ends a
   paragraph on its last word or two. On a phone a sentence still wraps inside. */
.menu-intro .sent { display: inline-block; }
.plate-pad { padding: 0 clamp(0px, calc(6.86cqi - 26.7px), 96px); }
.plate { max-width: 1248px; margin: 0 auto; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.plate-label { display: flex; justify-content: space-between; gap: 12px; padding: 12px 24px; font: 600 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hair); }
.plate-frame { position: relative; min-height: clamp(720px, 60cqi, 880px); }
.plate-frame.loaded { min-height: 0; }
.menu-state { padding: 48px 24px; max-width: 560px; }
.menu-state .big { margin: 0 0 20px; font-family: var(--serif); font-size: clamp(26px, calc(0.95cqi + 22.3px), 36px); line-height: 1.2; }
.bar { height: 3px; background: #E5D2AF; max-width: 360px; }
.bar i { display: block; height: 3px; width: 0; background: var(--ink); }
.bar.run i { width: 100%; transition: width 12s linear; }
.menu-foot { padding: 32px var(--pad) 48px; }
.menu-foot-in { max-width: 1248px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Motion: settle ---------- */
/* Armed by site.js only for sections below the fold, so nothing already on
   screen fades in under the reader and a script failure leaves it visible. */
.settle { opacity: 0; transform: translateY(12px); }
.settle.in { opacity: 1; transform: none; transition: opacity 480ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .settle { opacity: 1; transform: none; }
}