/* ==========================================================================
   PROJECT OVERRIDES: Cindi & Nick's Coin Shop & Refinery
   Loaded AFTER site.css, on purpose.

   theme.css comes first because it defines the design tokens site.css reads.
   That means anything in theme.css loses to site.css at equal specificity,
   which silently swallowed several of these rules. Per-project overrides
   belong here instead, where they land last and win without specificity
   tricks. theme.css stays what it is meant to be: tokens only.
   ========================================================================== */
/* --- Project override: text-only brand lockup (no logo file supplied) ---- */
.brand--text{padding-block:.2rem}
.brand--text .brand-text{display:block;line-height:1.04}
.brand--text .brand-name{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,2.55vw,2.15rem);color:var(--white);letter-spacing:-.008em;
  white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.brand--text .brand-sub{display:block;font-size:clamp(.66rem,.9vw,.84rem);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-light);margin-top:.3rem;
  white-space:nowrap}
/* the lockup is the identity here, so it keeps its size when the header condenses */
.site-header.is-solid .brand--text .brand-name{font-size:clamp(1.36rem,2.25vw,1.9rem)}
.site-header.is-solid .brand--text .brand-sub{font-size:clamp(.62rem,.82vw,.76rem)}
/* Nav labels are short phrases; never let one break across two lines. */
.nav-link{white-space:nowrap}
/* between the nav breakpoint and 1180px the nav, phone and lockup share a tight row,
   so the lockup holds a fixed size and the nav tightens around it */
@media (min-width:1000px) and (max-width:1180px){
  .brand--text .brand-name{font-size:1.72rem}
  .brand--text .brand-sub{font-size:.66rem;letter-spacing:.16em}
  .site-header.is-solid .brand--text .brand-name{font-size:1.54rem}
  .main-nav{gap:.6rem}
  .nav-link{font-size:.84rem;padding-inline:.2rem}
  .header-actions{margin-left:.8rem;gap:.6rem}
  .header-phone{font-size:.86rem}
  /* the button is the first thing to go: the phone number is the real CTA,
     and the lockup is carrying the identity with no logo file to fall back on */
  .header-actions .btn{display:none}
}
@media (min-width:1181px) and (max-width:1320px){
  .main-nav{gap:.7rem}
  .nav-link{font-size:.86rem}
}
@media (max-width:560px){
  .brand--text .brand-name{font-size:1.38rem}
  .brand--text .brand-sub{font-size:.6rem;letter-spacing:.15em}
}
@media (max-width:380px){
  .brand--text .brand-name{font-size:1.16rem}
  .brand--text .brand-sub{font-size:.55rem;letter-spacing:.11em}
}

/* --- Wayfinding grid (photographs of the building and its signage) ------- */
.wayfind{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
@media (max-width:820px){.wayfind{grid-template-columns:1fr}}
.wayfind figure{margin:0}
.wayfind .shot{position:relative;overflow:hidden;border-radius:var(--radius-sm);background:var(--charcoal)}
.wayfind .shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;
  transition:transform 900ms var(--ease)}
.wayfind figure:hover .shot img{transform:scale(1.03)}
.wayfind .step{position:absolute;top:0;left:0;background:var(--btn);color:var(--btn-fg);
  font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  padding:.4rem .8rem;z-index:2}
.wayfind figcaption{padding-top:.9rem;font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
.wayfind figcaption b{display:block;font-family:var(--font-display);font-size:1.15rem;
  font-weight:600;color:var(--ink);margin-bottom:.3rem}
.bg-black .wayfind figcaption{color:var(--paper-ink-soft)}
.bg-black .wayfind figcaption b{color:var(--white)}

/* Disclaimer strip above the footer */
.legal-strip{background:var(--black-soft);border-top:1px solid rgba(255,255,255,.08);
  padding-block:1.25rem;color:var(--paper-ink-soft);font-size:.8rem;line-height:1.65}
.legal-strip p{max-width:88ch;margin:0}

/* --- Project override: hero legibility on bright, busy photography --------
   The scrim is not to be darkened any further, so the type carries itself:
   pure white, a touch more weight, and a TIGHT dark halo rather than a soft
   wide bloom, which is what actually separates a letter from the metal behind
   it. A masked backdrop blur used to sit behind the text as well; it was
   removed because it softened the middle of every hero photograph. */
.hero-content{position:relative;isolation:isolate}
/* NOTE: there was a masked backdrop blur behind this text. It made the type
   easier to read but it also softened the middle of every hero photograph,
   and on the molten-gold slide it destroyed the one thing that slide is for.
   The photographs win. Legibility is carried by the type treatment below,
   which is doing most of the work anyway now that these rules actually apply
   (they were being swallowed by site.css until project.css was split out). */
.hero-content h1{
  color:var(--white);
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.55),0 14px 44px rgba(0,0,0,.45);
}
.hero-content p{
  color:var(--white);font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 8px rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.4);
}
.hero-callphone{
  color:var(--white);font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 8px rgba(0,0,0,.6);
}
.hero-callphone a{color:#f4dca8}
.hero-content .eyebrow{background:rgba(4,4,3,.62)}
.hero-dots button{box-shadow:0 1px 3px rgba(0,0,0,.7)}

/* Same treatment on the interior page heroes, which use the same photography. */
.page-hero-inner h1{
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.55),0 14px 44px rgba(0,0,0,.45);
}
.page-hero-inner .lead{
  color:var(--white);font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 8px rgba(0,0,0,.6);
}


/* --- Project override: two fewer webfont files ---------------------------
   Playfair was pulling five faces. The 400 was doing nothing but the small
   card index numerals, and the 700 only the bold lead-ins inside area chips,
   wayfinding captions and the footer address. Both now resolve to faces the
   page already downloads, so playfair-400.woff2 and playfair-700.woff2 are
   gone: about 45 KB off every page. */
.service-card-index{font-weight:500}
/* these all computed to 400 and were silently falling back to the 500 face */
.spec-list .n,.panel .k,.cta-phone{font-weight:500}
.wayfind figcaption b,
.area-chip b,
.footer-nap b,
.ftr__nap b{font-weight:600}

/* ==========================================================================
   Project override: touch targets and small type on phones
   Everything below only changes behaviour at or under the tablet breakpoint.
   Google wants roughly 48x48 CSS px of tappable area with a little space
   around it; several inline links and the hero dots were well under that.
   ========================================================================== */

/* The slideshow dots keep their 9px look but the button itself is finger-sized:
   the visible dot is drawn by ::before inside a transparent 44px box. */
.hero-dots{gap:0}
.hero-dots button{width:44px;height:44px;padding:0;border:0;background:none;border-radius:0;
  display:inline-flex;align-items:center;justify-content:center;transform:none}
.hero-dots button::before{content:"";width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(255,253,249,.65);background:rgba(255,253,249,.28);
  box-shadow:0 1px 3px rgba(0,0,0,.7);
  transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease)}
.hero-dots button[aria-current="true"]{background:none;transform:none}
.hero-dots button[aria-current="true"]::before{background:var(--btn);border-color:var(--btn);
  transform:scale(1.25)}
.hero-dots button:focus-visible{outline:2px solid var(--accent-light);outline-offset:-8px}

@media (max-width:999px){
  /* Breadcrumbs: same type size, a taller row to land on. */
  .crumbs{padding-block:.35rem}
  .crumbs ol{gap:.15rem .45rem}
  .crumbs a,.crumbs li[aria-current]{display:inline-flex;align-items:center;min-height:44px;
    padding-inline:.3rem}

  /* Footer link columns and the inline review links. */
  .site-footer nav a,.site-footer li > a,.ftr-links a{display:inline-flex;align-items:center;
    min-height:44px;min-width:44px;padding-inline:.15rem}
  .site-footer .footer-nap .tel,.footer-nap .tel,a.tel,address a[href^="tel:"]{
    display:inline-flex;align-items:center;min-height:48px;padding-inline:.1rem}
  .footer-nap a,.legal-strip a,.prose a{padding-block:.35rem}
  /* "Directions * Reviews" and "Been in before? Leave a review." */
  .ftr-inline{line-height:2.6}
  .ftr-inline a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.25rem}

  /* "Rather just ask? Call ..." under the hero. */
  .hero-callphone{margin-top:1.15rem}
  .hero-callphone a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.2rem}

  /* The lockup's second line was dropping to 8.8px on a 320px screen. */
  .brand--text .brand-sub{font-size:.7rem !important;letter-spacing:.13em}
}
@media (max-width:380px){
  .brand--text .brand-name{font-size:1.12rem}
  .brand--text .brand-sub{font-size:.7rem !important;letter-spacing:.1em}
}

/* --- Project override: gallery tiles carry no caption ---------------------
   The captions were removed at the client's request. Without them the tile is
   just a photograph, so the hover treatment moves to the image itself: a
   slightly firmer zoom and a scrim that lifts on hover, which still signals
   "this opens" without putting words on the picture. */
.gallery-item{cursor:zoom-in}
.gallery-item::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,5,0) 55%,rgba(6,6,5,.42) 100%);
  opacity:0;transition:opacity var(--dur-med) var(--ease);pointer-events:none}
.gallery-item:hover::after,.gallery-item:focus-visible::after{opacity:1}

/* --- Project override: build credit in the footer ------------------------
   Quiet by default so it never competes with the client's own NAP, but it
   underlines on hover and picks up the brass, so it reads as a link rather
   than as stray text. Sized as a proper tap target on phones like the rest
   of the footer links. */
.footer-legal .credit{color:var(--stone);text-decoration:none;
  border-bottom:1px solid rgba(255,253,249,.22);padding-bottom:1px;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.footer-legal .credit:hover,.footer-legal .credit:focus-visible{color:var(--accent-light);
  border-bottom-color:var(--accent-light)}
@media (max-width:999px){
  .footer-legal .credit{display:inline-flex;align-items:center;min-height:44px}
}

/* --- Project override: the illustrative-imagery note under the gallery ----
   Quiet, but present and readable rather than fine print, because its whole
   job is to stop nine stock photographs reading as the shop's own case. */
.img-note{margin-top:clamp(1.4rem,3vw,2.2rem);text-align:center;
  font-size:.86rem;color:var(--ink-soft);max-width:56ch;margin-inline:auto}
.img-note a{color:var(--accent-deep);font-weight:500}
@media (max-width:999px){
  .img-note a{display:inline-flex;align-items:center;min-height:44px}
}

/* --- Project override: legal pages (privacy, terms, accessibility) -------
   Text-only header band instead of a photo hero: these are documents, and a
   gold-bar backdrop behind a privacy policy would be the wrong register. */
.legal-hero{background:var(--black);color:var(--paper-ink);
  padding:calc(var(--header-h) + clamp(2.5rem,6vw,4.5rem)) 0 clamp(2.25rem,5vw,3.5rem)}
.legal-hero h1{color:var(--white);font-size:clamp(2.2rem,4.6vw,3.4rem);margin-top:.9rem}
.legal-hero .legal-dates{margin-top:1rem;color:var(--paper-ink-soft);font-size:.92rem}
.legal-doc{max-width:72ch;margin-inline:auto;color:var(--ink)}
.legal-doc > * + *{margin-top:1rem}
.legal-doc h2{font-size:clamp(1.4rem,2.4vw,1.75rem);margin-top:2.4rem}
.legal-doc h3{font-size:1.12rem;margin-top:1.5rem}
.legal-doc ul{padding-left:1.25rem}
.legal-doc ul li{list-style:disc}
.legal-doc li::marker{color:var(--accent-deep)}
.legal-doc li + li{margin-top:.5rem}
.legal-doc a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.legal-doc a:hover{color:var(--ink)}
/* footer policy links */
.footer-policies{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem}
.footer-policies a{color:var(--stone);text-decoration:none}
.footer-policies a:hover,.footer-policies a:focus-visible{color:var(--accent-light);text-decoration:underline}
@media (max-width:999px){
  .footer-policies a{display:inline-flex;align-items:center;min-height:44px}
}

/* --- Project override: keep the enlarged dot hit-boxes off the hero CTA ----
   When the slideshow dots grew to 44px tap targets, their boxes started to
   sit over the "Rather just ask? Call" link on phones (axe target-size, found
   in the Sep 2026 audit). The dots drop closer to the edge and the hero copy
   reserves room for them. */
.hero-dots{bottom:.6rem}
.hero .hero-content{padding-bottom:calc(3rem + 44px)}

/* --- Project override: slideshow pause control (WCAG 2.2.2) --------------
   Sits at the end of the dot row, same 44px hit box as the dots, drawn with
   CSS rather than a glyph so it needs nothing from the webfont subset. */
.hero-pause{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;margin-left:1rem;
  color:rgba(255,253,249,.85)}
/* the pause button sits inside .hero-dots, so it was inheriting the dot's drawn
   circle and showing a seventh dot jammed against the pause bars */
.hero-dots .hero-pause::before{content:none}
.hero-dots .hero-pause[aria-pressed="true"]::before{content:none}
.hero-pause:hover{color:var(--white)}
.hero-pause:focus-visible{outline:2px solid var(--accent-light);outline-offset:-6px}
.hero-pause .i-pause{width:10px;height:12px;border-left:3px solid currentColor;
  border-right:3px solid currentColor;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.hero-pause .i-play{display:none;width:0;height:0;border-style:solid;
  border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;
  margin-left:3px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.hero-pause[aria-pressed="true"] .i-pause{display:none}
.hero-pause[aria-pressed="true"] .i-play{display:block}

/* --- Project override: sticky call bar clears the iPhone home indicator ---
   Needs viewport-fit=cover in the viewport meta, which is set in head(). */
@media (max-width:999px){
  /* padding goes on the two coloured halves, not the bar, so the strip under
     the home indicator is filled with their colour rather than left see-through */
  .mobile-cta a{padding-bottom:env(safe-area-inset-bottom,0px)}
  body{padding-bottom:calc(var(--mobile-cta-h) + env(safe-area-inset-bottom,0px))}
}