@import url("fonts.css");

/* ---------------------------------------------------------------------------
   San Clemente Tattoo — gilded street shop.

   The palette is the shop's own four colours plus white: black ground, gray
   for structure, red for anything that wants a hand on it, gold for the
   shop's own name and its signage, white for reading.

   Gold on black is not decoration here, it is the trade. Sign painters have
   gilded storefront glass in gold leaf on black for a century, and that is
   what a traditional street shop is supposed to look like. So gold carries
   the headings, the rules and the shop's identity; red is reserved for
   action, which is what keeps it loud.

   Five rules that are easy to break by accident:

   1. No inline style attributes anywhere in the HTML, so the CSP can forbid
      inline styles outright.
   2. Every <img> carries width/height attributes, so the browser reserves the
      box from the intrinsic ratio and nothing shifts while photos load.
   3. Every colour comes from a token. Nothing hardcodes a hex outside the
      palette block, which is what makes a palette change one edit.
   4. --red is 2.83:1 against the ground. That is a fill, a border or a rule
      and nothing else: never type, not even large type. --red-lt (4.81:1) is
      the one that goes on text.
   5. Gold clears 7.99:1, so unlike most golds this one can carry body-size
      text. That is why the value is this dark; do not brighten it toward
      something more "metallic" without re-checking, and note that
      tests/a11y.spec.js measures the rendered colours and will fail.
--------------------------------------------------------------------------- */

:root {
  /* ground and structure */
  --ink: #0B0B0C;          /* the wall */
  --ink-2: #131316;        /* raised panel */
  --ink-3: #1B1B1F;        /* hover, inset */
  --gray: #4A4A50;         /* hairline */
  --gray-2: #7E7E86;       /* heavier rule */
  --gray-text: #A9A9B0;    /* secondary type, 8.42:1 */

  /* lettering. Warm off-white, not #FFF: on a near-black ground full white
     glares, and this page is read on phones in the sun. */
  --white: #F6F5F2;

  /* action */
  --red: #B3121E;          /* fills and rules only */
  --red-lt: #E4404C;       /* type, 4.81:1 */

  /* the gilding */
  --gold: #C8A02E;         /* type and rules, 7.99:1 */
  --gold-lt: #E9CC72;      /* display type and highlights, 12.50:1 */

  --focus: #E9CC72;
  --max: 76rem;
}

*, *::before, *::after { box-sizing: border-box; }

/* Deliberately NOT scroll-behavior: smooth. Set globally it animates every
   programmatic scroll, including the ones the browser does when a form field
   takes focus, so tabbing through the booking form drags the page around. The
   one place a glide is wanted (a crew tile jumping to the gallery) asks for it
   explicitly in app.js, and honours prefers-reduced-motion there. */
html.viewer-open { overflow: hidden; }

body {
  margin: 0;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--white);
  background-color: var(--ink);
  /* A faint gold wash at the top and the ghost of ruled paper. Both are under
     6% so they read as depth rather than as colour. */
  background-image:
    radial-gradient(ellipse at 22% 0%, rgba(200, 160, 46, .055), transparent 58%),
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(246, 245, 242, .018) 28px);
  padding-bottom: 4.75rem;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-lt); text-underline-offset: .15em; }
a:hover { color: var(--gold-lt); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

h1, h2, h3 { font-weight: 400; }

p { margin: 0 0 .9rem; }
.muted { color: var(--gray-text); }

.wrap { width: min(var(--max), calc(100% - 2rem)); margin-inline: auto; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Skip link ----------------------------------------------------------- */
.skip {
  position: absolute; left: .75rem; top: -5rem; z-index: 90;
  background: var(--gold); color: var(--ink);
  padding: .7rem 1.1rem; font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: .75rem; }

/* --- Top bar ------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .5rem 1rem;
  background: var(--ink); color: var(--white);
  /* The painted-sign edge: gold hairline over a red keyline. */
  box-shadow: inset 0 -5px 0 var(--red), inset 0 -6px 0 var(--gold);
}
.topbar a { color: var(--white); text-decoration: none; }
/* Column, not row: as a row the address became a sibling flex item and ran on
   from the shop name with no separator. */
.brand {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 44px; gap: .2rem;
}
.brand-name {
  font-family: "Bungee", Impact, sans-serif;
  font-size: clamp(.85rem, 2.4vw, 1.05rem);
  letter-spacing: .02em; line-height: 1.05;
  color: var(--gold-lt);          /* the shop's name is the gilded thing */
}
.brand-sub {
  font-family: "Archivo", sans-serif;
  font-size: .62rem; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray-text); line-height: 1;
}
.quick { display: none; gap: .4rem; justify-content: flex-end; }
@media (min-width: 880px) {
  .quick { display: flex; }
  body { padding-bottom: 0; }
}

/* --- Buttons ------------------------------------------------------------- */
/* Default is the gilded outline. .primary is the red fill, and red is only
   ever the thing you most want tapped. */
.quick a, .btn {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: .8rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none;
  border: 2px solid var(--gold); background: transparent; color: var(--gold-lt);
  padding: .55rem .85rem; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.quick a:hover, .btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.quick a.primary, .btn.primary { background: var(--red); border-color: var(--red); color: var(--white); }
.quick a.primary:hover, .btn.primary:hover { background: var(--gold-lt); border-color: var(--gold-lt); color: var(--ink); }
/* The quiet third weight: gray outline, for anything secondary to a secondary. */
.btn.ink { background: transparent; border-color: var(--gray-2); color: var(--white); }
.btn.ink:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; padding: 2.2rem 0 2.6rem; overflow: hidden; }
/* The sign's bottom edge, repeated: gold hairline, gap, red keyline. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background:
    linear-gradient(var(--gold), var(--gold)) top / 100% 1px no-repeat,
    linear-gradient(var(--red), var(--red)) bottom / 100% 3px no-repeat;
}
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: center; }
@media (min-width: 880px) { .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 2.5rem; } }
/* The painted sign keeps its own palette, exactly as the shop's sign does.
   It is the one piece of the page that is a painted object rather than a
   surface, so it hangs on the black wall instead of being recoloured by it. */
.sign { width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .8)); }
h1 { margin: 0; }
.eyebrow {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: .74rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem;
}
.status-row { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; margin: .5rem 0 1rem; }
.pill {
  font-family: "Archivo", sans-serif; font-size: .76rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .4rem .7rem; border: 2px solid var(--gray-2);
  background: var(--ink-2); color: var(--gray-text);
}
/* Open is the gilded state. Closed recedes. No traffic-light green anywhere:
   it is not one of the shop's colours and it does not need to be. */
.pill.open { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.pill.shut { border-color: var(--gray); background: var(--ink-2); color: var(--gray-text); }
.lede { font-size: 1.2rem; max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* --- Sections ------------------------------------------------------------ */
section { padding: 2.8rem 0; border-bottom: 1px solid var(--gray); }
section:target { scroll-margin-top: 4.5rem; }
section { scroll-margin-top: 4.5rem; }
/* Gilded headings on a gold hairline. This is the whole look in three rules. */
h2 {
  font-family: "Bungee", Impact, sans-serif;
  font-size: clamp(1.45rem, 4vw, 2.15rem); line-height: 1.05;
  margin: 0 0 .3rem; color: var(--gold-lt);
}
.script {
  font-family: "Yellowtail", cursive;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  color: var(--red-lt); line-height: 1.1; margin: 0 0 .25rem;
  /* the sign-painter's double rule, drawn under the hand lettering */
  padding-bottom: .5rem; position: relative;
}
.script::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: min(14rem, 45%); height: 3px;
  background:
    linear-gradient(var(--gold), var(--gold)) top / 100% 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom / 100% 1px no-repeat;
}
section > .wrap > .muted:first-of-type { margin-top: .9rem; }

/* --- How it works -------------------------------------------------------- */
.steps-how { display: grid; gap: .9rem; margin: 1.2rem 0 0; padding: 0; list-style: none; counter-reset: how; }
@media (min-width: 820px) { .steps-how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.steps-how li {
  counter-increment: how;
  border: 1px solid var(--gray); background: var(--ink-2);
  padding: 1rem 1rem 1.1rem;
}
.steps-how h3 {
  font-family: "Bungee", Impact, sans-serif; font-size: 1rem;
  margin: 0 0 .45rem; display: flex; align-items: baseline; gap: .5rem;
  color: var(--white);
}
/* Gilded numerals: a step number is signage, not a call to action. */
.steps-how h3::before {
  content: counter(how);
  font-size: .8rem; color: var(--ink); background: var(--gold);
  padding: .1rem .45rem; flex: none;
}
.steps-how p { font-size: 1rem; margin: 0 0 .5rem; }
.steps-how p:last-child { margin-bottom: 0; }
.how-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }

/* --- Filters ------------------------------------------------------------- */
.filter-block { margin: 0 0 1rem; }
.filter-label {
  font-family: "Archivo", sans-serif; font-size: .7rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .35rem;
}
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.filters button {
  font-family: "Archivo", sans-serif; font-size: .78rem; font-weight: 600;
  background: var(--ink-2); border: 1px solid var(--gray); color: var(--white);
  padding: .45rem .75rem; min-height: 44px; min-width: 44px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.filters button:hover { background: var(--ink-3); border-color: var(--gold); }
.filters button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 800; }

/* --- Gallery grid -------------------------------------------------------- */
.grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Thin gray frame, gold on hover. The tattoos are the loudest thing on this
   page and the frame's whole job is to stay out of their way. */
.card {
  position: relative; width: 100%; margin: 0; padding: 0;
  background: var(--ink-2); border: 1px solid var(--gray);
  cursor: pointer; text-align: left; color: inherit; font: inherit;
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--gold); }
.card { display: flex; flex-direction: column; }
/* display:block matters: aspect-ratio and absolute positioning are both
   ignored on a non-replaced inline box, and these are <span>s inside a
   <button> so they start out inline. */
.card-shot { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-3); }
.card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* A cover wider than the tile is shown whole on the ground colour rather
   than cropped to fill it. Half a painting is not a smaller painting. */
.card-shot.is-wide img { object-fit: contain; object-position: center; }
/* Fixed caption height on purpose. Left to size itself, the row heights change
   the moment the webfonts swap in, every grid row resizes, and the browser's
   scroll anchoring drags the page. Locking it to two lines keeps layout stable
   and the grid even. Full titles are still in the button's aria-label and in
   the viewer. */
.card-cap {
  font-family: "Archivo", sans-serif; font-size: .74rem; line-height: 1.3;
  padding: .45rem .55rem; display: block; height: 3.25rem; overflow: hidden;
}
.card-cap b {
  display: block; font-weight: 700; font-size: .8rem; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-cap span {
  display: block; color: var(--gray-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A gilded detail, and the one piece of Instagram's vocabulary worth keeping. */
.count {
  position: absolute; top: .5rem; right: .5rem;
  display: inline-flex; align-items: center; gap: .25rem;
  background: rgba(11, 11, 12, .86); color: var(--gold-lt);
  border: 1px solid var(--gold);
  font-family: "Archivo", sans-serif; font-size: .72rem; font-weight: 700;
  padding: .2rem .5rem; border-radius: 999px; pointer-events: none;
}
.count svg { display: block; }

.broken {
  display: flex; align-items: center; justify-content: center; height: 100%;
  padding: 1rem; text-align: center;
  font-family: "Archivo", sans-serif; font-size: .74rem; color: var(--gray-text);
  background: repeating-linear-gradient(45deg, var(--ink-3), var(--ink-3) 10px, var(--ink-2) 10px, var(--ink-2) 20px);
}

.grid-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.2rem; }
.grid-foot p { margin: 0; font-family: "Archivo", sans-serif; font-size: .82rem; color: var(--gray-text); }
.empty { padding: 1.2rem; border: 1px dashed var(--gray-2); background: var(--ink-2); }

/* --- Viewer -------------------------------------------------------------- */
dialog.viewer {
  border: 1px solid var(--gold); background: var(--ink);
  color: var(--white);
  padding: 0; max-width: min(58rem, 96vw); width: 96vw;
  max-height: 94dvh; overflow: hidden;
  display: flex; flex-direction: column;
}
dialog.viewer:not([open]) { display: none; }
dialog.viewer::backdrop { background: rgba(0, 0, 0, .9); }

.v-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .5rem; padding: .55rem .6rem .5rem;
  border-bottom: 1px solid var(--gray); background: var(--ink-2);
}
.v-head { margin: 0; min-width: 0; }
.v-title { display: block; font-family: "Bungee", Impact, sans-serif; font-size: .95rem; line-height: 1.25; color: var(--gold-lt); }
.v-by { font-family: "Archivo", sans-serif; font-size: .74rem; color: var(--gray-text); display: block; margin-top: .2rem; }
.v-close {
  flex: none; font-family: "Archivo", sans-serif; font-size: 1.1rem; font-weight: 800;
  width: 44px; height: 44px; border: 1px solid var(--gray-2);
  background: transparent; color: var(--white); cursor: pointer; line-height: 1;
}
.v-close:hover { background: var(--red); border-color: var(--red); color: var(--white); }

/* Horizontal scroll-snap rail. Native swipe in both directions, and because
   the rail only ever overflows on the x axis, the page keeps scrolling
   vertically exactly as it did before. */
.v-rail {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; touch-action: pan-x pinch-zoom;
  background: #000; scrollbar-width: none;
}
.v-rail::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .v-rail { scroll-behavior: auto; } }
.v-slide {
  flex: 0 0 100%; scroll-snap-align: center;
  display: grid; place-items: center; padding: .4rem;
  min-height: 42dvh; max-height: 66dvh;
}
/* contain, never crop: the whole tattoo stays in frame at every size */
.v-slide img { max-width: 100%; max-height: 64dvh; width: auto; height: auto; object-fit: contain; }

.v-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .5rem .6rem; border-top: 1px solid var(--gray);
}
.v-counter { font-family: "Archivo", sans-serif; font-size: .82rem; font-weight: 700; white-space: nowrap; color: var(--gold-lt); }
.v-cap { font-family: "Archivo", sans-serif; font-size: .8rem; color: var(--gray-text); margin: 0; padding: .45rem .6rem 0; }

.v-dots { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem .6rem .6rem; margin: 0; list-style: none; }
.v-dots button {
  width: 44px; height: 44px; padding: 2px; cursor: pointer;
  border: 1px solid var(--gray); background: var(--ink-2);
}
.v-dots button[aria-current="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.v-dots img { width: 100%; height: 100%; object-fit: cover; }
.v-single .v-dots, .v-single .v-counter, .v-single .v-step { display: none; }

/* --- Crew ---------------------------------------------------------------- */
.crew-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 640px) { .crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .crew-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.artist {
  border: 1px solid var(--gray); background: var(--ink-2);
  padding: 1rem; display: flex; flex-direction: column; gap: .2rem;
  text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%;
  transition: border-color .15s ease;
}
.artist:hover { border-color: var(--gold); }
.artist h3 { font-family: "Bungee", Impact, sans-serif; font-size: 1.05rem; margin: 0; color: var(--white); }
.artist .handle { font-family: "Archivo", sans-serif; font-size: .78rem; color: var(--red-lt); }
.artist p { font-size: 1rem; margin: .35rem 0 .5rem; }
.artist .seework {
  font-family: "Archivo", sans-serif; font-size: .74rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--gold); margin-top: auto;
}
.crew-links { font-family: "Archivo", sans-serif; font-size: .85rem; margin-top: 1rem; }

/* --- Booking form -------------------------------------------------------- */
/* The one gold-framed block on the page. The shop asked for the walk-in
   section to stand apart from everything else; on a black wall the way to do
   that is to gild the frame, not to paint the panel a different colour. */
#book { background: var(--ink-3); box-shadow: inset 0 2px 0 var(--gold), inset 0 -2px 0 var(--gold); }
#book fieldset { background: var(--ink); }
#book input[type="text"], #book input[type="email"], #book input[type="tel"],
#book input[type="file"], #book select, #book textarea { background: var(--ink-2); }
.book-grid { display: grid; gap: 1.5rem; }
@media (min-width: 880px) { .book-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } }
form { width: 100%; min-width: 0; }
.steps { display: grid; gap: 1rem; }
fieldset { border: 1px solid var(--gray); background: var(--ink-2); padding: 1rem; margin: 0; min-width: 0; }
legend { font-family: "Bungee", Impact, sans-serif; font-size: .95rem; padding: 0 .35rem; color: var(--gold-lt); }
label { display: block; font-family: "Archivo", sans-serif; font-size: .8rem; font-weight: 600; margin: .6rem 0 .25rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="file"], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .6rem;
  border: 1px solid var(--gray-2); background: var(--ink-3); min-height: 44px; color: var(--white);
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
textarea { min-height: 6.5rem; resize: vertical; }
::placeholder { color: var(--gray-text); opacity: 1; }
/* The browser's default file button is a white rectangle, which was the one
   off-palette thing left on the page. */
input[type="file"]::file-selector-button {
  font-family: "Archivo", sans-serif; font-size: .74rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  background: transparent; color: var(--gold-lt); border: 1px solid var(--gold);
  padding: .35rem .6rem; margin-right: .6rem; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--gold); color: var(--ink); }
input:user-invalid, textarea:user-invalid, select:user-invalid { border-color: var(--red-lt); }
.err {
  font-family: "Archivo", sans-serif; font-size: .78rem; font-weight: 700;
  color: var(--red-lt); margin: .25rem 0 0; min-height: 0;
}
.check {
  display: flex; gap: .6rem; align-items: flex-start;
  font-family: "Archivo", sans-serif; font-size: .9rem; margin-top: .8rem; font-weight: 400;
}
.check input { width: 1.25rem; height: 1.25rem; min-height: 0; margin-top: .15rem; accent-color: var(--red); flex: none; }
.form-note { font-size: .95rem; color: var(--gray-text); margin-top: .7rem; }
.result { padding: .85rem 1rem; border: 1px solid var(--gray-2); margin-top: .9rem; background: var(--ink-3); }
.result.ok { border-color: var(--gold); }
.result.bad { border-color: var(--red-lt); }
.result.dry { border-color: var(--gray); }
/* Not delivered yet, but not a dead end either: the visitor has a pre-filled
   email in front of them and one tap left. Deliberately not .ok — .ok means
   the shop has it. */
.result.handoff { border-color: var(--gold-lt); }
.result p:last-child { margin-bottom: 0; }
.hidden { display: none; }

/* --- Find the shop ------------------------------------------------------- */
.find-grid { display: grid; gap: 1.4rem; }
@media (min-width: 820px) { .find-grid { grid-template-columns: 1fr 1fr; } }
.mapframe { border: 1px solid var(--gray); background: var(--ink-2); }
.mapframe iframe { width: 100%; height: 330px; border: 0; display: block; }
.hours-now {
  font-family: "Archivo", sans-serif; font-size: 1.05rem; font-weight: 800;
  letter-spacing: .02em; color: var(--gold-lt);
  border-left: 4px solid var(--red); padding: .1rem 0 .1rem .7rem; margin: 0 0 .8rem;
}
.hours-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.hours-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--gray); padding: .3rem 0;
  font-family: "Archivo", sans-serif; font-size: .92rem;
}
.hours-list li[data-today="true"] { font-weight: 800; color: var(--gold-lt); }
.shop-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; margin-top: 1.2rem; }
.shop-strip img { border: 1px solid var(--gray); aspect-ratio: 1; object-fit: cover; width: 100%; height: auto; }

/* --- Aftercare + FAQ ----------------------------------------------------- */
.split { display: grid; gap: 1.8rem; }
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; } }
ol.care { padding-left: 1.3rem; }
ol.care li { margin: 0 0 .5rem; }
ol.care li::marker { color: var(--gold); font-weight: 700; }
details { border-bottom: 1px solid var(--gray); padding: .65rem 0; }
summary { cursor: pointer; font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1rem; min-height: 44px; display: flex; align-items: center; }
summary:hover { color: var(--gold-lt); }
details p { margin: .5rem 0 .2rem; }

/* --- Footer + dock ------------------------------------------------------- */
footer {
  background: var(--ink-2); color: var(--white);
  box-shadow: inset 0 1px 0 var(--gold), inset 0 4px 0 var(--red);
  padding: 2.6rem 0 6.5rem;
}
footer a { color: var(--gold-lt); }
footer a:hover { color: var(--white); }
.foot-grid { display: grid; gap: 1.3rem; }
@media (min-width: 820px) { .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.foot-head { font-family: "Archivo", sans-serif; font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem; }
.foot-cta { margin: .9rem 0 0; }
.ig-list { list-style: none; padding: 0; margin: 0; }
.ig-list li { margin: 0 0 .35rem; }
.legal { font-family: "Archivo", sans-serif; font-size: .8rem; color: var(--gray-text); margin-top: 1.6rem; }
/* Quiet enough that a visitor never reads it, present enough that anyone
   checking a deploy can find it without dev tools. */
.build { opacity: .55; white-space: nowrap; }

.dock {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--ink);
  box-shadow: inset 0 5px 0 var(--red), inset 0 6px 0 var(--gold);
}
.dock a {
  color: var(--white); text-decoration: none; font-family: "Archivo", sans-serif;
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  text-align: center; padding: .9rem .3rem .8rem; min-height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--gray);
}
.dock a:last-child { border-right: 0; background: var(--red); color: var(--white); }
@media (min-width: 880px) { .dock { display: none; } footer { padding-bottom: 2.6rem; } }