@import url("https://fonts.googleapis.com/css2?family=Martian+Mono:wght@600&display=swap");
/* ==========================================================================
   site.css | creativecompany.us glue for stone.css (link it after stone.css)

   The pages keep their own Astro-scoped button rules (for example
   .sub--red[data-astro-cid-x] .sub-row[data-astro-cid-x] button[data-astro-cid-x]
   sets background, border, padding and colour). Those out-rank .stone, so
   this file puts the kit's values back on .stone elements in those places.
   `:not(#_)` adds id weight, which beats every class-based page rule
   whatever order the stylesheets load in. Only state-invariant properties
   are reset here, so the kit's hover, pressed, selected, focus and disabled
   rules keep working.
   ========================================================================== */

/* ---- 1. reset the page's scoped button styling (subscribe, filter dock, lightbox) */
:is(.sub-row, .dock, .lb-inner) .stone:not(#_) {
  border: var(--stone-bw) solid transparent;
  border-radius: var(--stone-r);
  background:
    linear-gradient(176deg, rgba(255, 255, 255, .10), transparent 38%, rgba(0, 0, 0, .22)) padding-box,
    var(--stone-base) padding-box;
  color: var(--stone-ink);
  padding: 8px 21px;
  font: 600 11.5px/1.25 "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: normal;
  opacity: 1;
  cursor: pointer;
  transition: transform .14s cubic-bezier(.3, .7, .4, 1), filter .14s ease;
}
:is(.sub-row, .dock, .lb-inner) .stone:not(#_):active { transition-duration: .05s; }
:is(.sub-row, .dock, .lb-inner) .stone:not(#_):is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; }

/* chip size (filter chips and the Filters toggle) */
.dock .stone--chip:not(#_) {
  padding: 6px 15px;
  font-size: 10.5px;
}

/* round size (lightbox close, prev, next) */
.lb-inner .stone--round:not(#_) {
  width: var(--stone-h);
  height: var(--stone-h);
  min-width: var(--stone-h);
  padding: 0;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
}
/* prev/next were centred with transform, which the kit uses for lift and
   press; centre with top instead and give the states back their transform */
.lb-inner .lb-nav.stone:not(#_) { top: calc(50% - var(--stone-h) / 2); transform: translateY(0); }
.lb-inner .lb-nav.stone:not(#_):hover { transform: translateY(-1px); }
.lb-inner .lb-nav.stone:not(#_):active { transform: translateY(2px); }

/* ---- 2. filter chips: the page script only toggles .is-active, so the
   material follows it (idle limestone, active basalt) */
.dock .fchip.stone.is-active {
  --stone-tex: url(/stone/assets/basalt.webp);
  --stone-tile: 256px;
  --stone-base: #2f2d2b;
  --stone-side: #171514;
  --stone-ink: #F1E9DC;
  --stone-carve: 0 -1px 0 rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .07);
  --stone-icon-carve: drop-shadow(0 -1px 0 rgba(0, 0, 0, .85)) drop-shadow(0 1px 0 rgba(255, 255, 255, .08));
  --stone-glow: rgba(255, 250, 240, .16);
  --stone-shade: rgba(0, 0, 0, .26);
  --stone-inlay: #DCD3BC;
  --stone-honed: brightness(.8) saturate(1.15);
}
.dock .fchip.stone.is-active::before { --stone-hone: rgba(18, 17, 16, .32); }
.dock .fchip.stone.is-active::after {
  box-shadow:
    0 -1px 0 rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 255, 255, .16),
    inset 0 1px 1px rgba(0, 0, 0, .45);
}
.dock .fchip.stone:not(.is-active) {
  --stone-tex: url(/stone/assets/limestone.webp);
  --stone-tile: 192px;
  --stone-base: #d6c9b0;
  --stone-side: #9a9386;
  --stone-ink: #2A221B;
  --stone-carve: 0 1px 0 rgba(255, 252, 244, .5), 0 -1px 0 rgba(60, 40, 20, .25);
  --stone-icon-carve: drop-shadow(0 1px 0 rgba(255, 252, 244, .55)) drop-shadow(0 -1px 0 rgba(60, 40, 20, .25));
  --stone-glow: rgba(255, 252, 245, .18);
  --stone-shade: rgba(80, 62, 40, .16);
  --stone-inlay: #3b3128;
  --stone-honed: brightness(.93) saturate(1.2) sepia(.08);
}

/* ---- 3. layout the old .cta class carried */
.hero .deck > .stone { flex: none; }
.hero-plate--rights > .stone { margin-top: 10px; }

/* ---- 4. the open filter panel was capped at 220px for flat 25px chips; the
   36px stone chips need more on phones, plus room for their cast shadow */
.dock:is(:hover, :focus-within, [data-expanded="true"]) .dock-filters:not(#_) {
  max-height: 340px;
  padding: 2px 0 8px;
}

/* ---- 5. a modal <dialog> clips its overflow (UA overflow:auto), which cut
   the close and prev/next stones, set 14px outside the panel, in half. The
   panel (.lb-body) keeps its own scroll. */
.lightbox:not(#_) { overflow: visible; }

/* ---- 6. polish after the six-width walk (2026-10-10) */
/* lightbox actions fit one line in the 272px info column at 820 */
.lb-inner .lb-links .stone:not(#_) { padding: 8px 15px; font-size: 11px; letter-spacing: .11em; }
/* rights plate is a fixed-height flex column: never squeeze the stone */
.hero-plate--rights > .stone:not(#_) { flex-shrink: 0; }
/* very narrow screens need more room for the open filter panel */
.dock:is(:hover, :focus-within, [data-expanded="true"]) .dock-filters:not(#_) { max-height: 460px; }
@media (max-width: 780px) {
  /* the panel is 94vw, so the round stones at -14px hung off the screen */
  .lb-inner .lb-close.stone:not(#_) { top: -8px; right: -8px; }
  .lb-inner .lb-prev.stone:not(#_) { left: -8px; }
  .lb-inner .lb-next.stone:not(#_) { right: -8px; }
}
@media (max-width: 700px) {
  /* tighter chips so the open dock stays short on phones */
  .dock .stone--chip:not(#_) { padding: 6px 11px; font-size: 10px; letter-spacing: .1em; }
}