/* ============================================================
   AREA 52 — site chrome for every page beyond the hero
   (shop, product, about, sell/trade, work, visit)
   Tokens, cursor, and CTA treatments mirror css/style.css so the
   pages read as one world; this sheet scrolls, the hero doesn't.
   ============================================================ */

@font-face {
  font-family: 'Super Sliced';
  src: url('../assets/fonts/SuperSliced.ttf') format('truetype');
  font-display: block;
}

:root {
  --void:   #0b0a18;
  --tint:   #241640;
  --chrome-hi: #eef1f5;
  --chrome-mid:#9aa3ae;
  --chrome-lo: #3f4854;
  --ink:    #04060a;
  --bone:   #f2ede0;
  --text:   #bdbccb;
  --faint:  #8d8b9c;
  --amber:  #ffae42;
  --amber-hi:#ffd9a0;
  --amber-lo:#cf9c4d;    /* corner/nav labels */
  --beam:   #a6ff4d;
  --beam-soft:#d6ff9e;
  --violet: #a98fe8;
  --line:   rgba(169, 143, 232, 0.18);   /* hairlines + card frames */
  --panel:  #0f0e22;                       /* image wells */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--void); }

body {
  /* column flex + .page flex-grow keeps the footer on the bottom edge of
     the viewport on short pages (sell/work) instead of floating mid-screen;
     the fixed backdrop, header and pulses are out of flow and unaffected */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--void);
  color: var(--text);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── backdrop (fixed, behind everything) ─────────────────── */

.space-tint {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 80% 62% at 50% 30%, rgba(36, 22, 64, 0.5) 0%, rgba(11, 10, 24, 0) 70%);
  pointer-events: none;
}

#stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  animation: fade-in 1.2s ease 0.1s forwards;
  pointer-events: none;
}

/* ── cursor: the hero's star dot, everywhere (rule ORDER matters:
      base, then interactive — equal specificity, document order) ─ */

html, body {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27g%27%20cx%3D%270.5%27%20cy%3D%270.5%27%20r%3D%270.5%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffffff%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.45%27%20stop-color%3D%27%23ffffff%27%20stop-opacity%3D%270.18%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ffffff%27%20stop-opacity%3D%270%27%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2712%27%20fill%3D%27url%28%23g%29%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E") 12 12, auto;
}
a, button, input, select, textarea, label, summary, [role="button"], .card, .chip, .depth-card, .depth-stage, .lightbox img {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27g%27%20cx%3D%270.5%27%20cy%3D%270.5%27%20r%3D%270.5%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffffff%27%20stop-opacity%3D%270.5%27%2F%3E%3Cstop%20offset%3D%270.45%27%20stop-color%3D%27%23ffffff%27%20stop-opacity%3D%270.18%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ffffff%27%20stop-opacity%3D%270%27%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2712%27%20fill%3D%27url%28%23g%29%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E") 12 12, pointer;
}

/* click pulse (pooled spans, site.js) */
.click-pulse {
  position: fixed;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
}
.click-pulse.live { animation: click-pulse 0.45s ease-out forwards; }
@keyframes click-pulse {
  0%   { opacity: 0.8; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* ── header: mini wordmark + nav ─────────────────────────── */

.site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 26px;
  background: linear-gradient(180deg, rgba(11, 10, 24, 0.92) 0%, rgba(11, 10, 24, 0.7) 70%, rgba(11, 10, 24, 0) 100%);
  pointer-events: none;           /* the gradient must not eat clicks… */
}
.site-head > * { pointer-events: auto; }   /* …but the controls do */

.site-brand {
  display: inline-flex;
  align-items: center;
  font-family: "Super Sliced", "Arial Black", sans-serif;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--beam);
  text-shadow: 0 0 14px rgba(166, 255, 77, 0.45);
  white-space: nowrap;
}
/* the brand is the store's badge since 2026-09-06 (client: "replace this
   with the company logo"); the aria-label stays the accessible name. Its
   box IS the hover hit area the dropdown bridges to: 38 px tall, 32 under
   480 — the .site-nav tops below follow (padding + height; the old 4 px
   overlap sat in the wordmark's half-leading, on a badge it would cover
   real pixels). */
.site-brand img { display: block; height: 38px; width: auto; filter: drop-shadow(0 0 10px rgba(166, 255, 77, 0.35)); transition: transform 0.3s ease; }
.site-brand:hover img { transform: rotate(-8deg) scale(1.06); }   /* the hero badge's tilt, on every page (round 28) */
.site-brand .s52 { color: var(--violet); text-shadow: 0 0 14px rgba(169, 143, 232, 0.4); }
.site-brand:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
/* the caret beside the badge, drawn with borders: Space Mono's served
   subsets stop at U+206F, so a ▾ glyph would come from the OS symbol
   font instead. On hover layouts it hints at the dropdown; on touch it
   is the tap affordance (round 31: the badge is the menu button there). */
.site-brand::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 9px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--amber-lo);
  transition: border-top-color 0.2s ease;
}

.site-nav { display: flex; gap: clamp(14px, 2.6vw, 30px); }
.site-nav a {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-decoration: none;
  color: var(--amber-lo);
  padding: 6px 0;
  transition: color 0.25s ease;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--amber-hi); }
.site-nav a[aria-current="page"] { color: var(--beam); }
.site-nav a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* the header's tools (round 32): the SEARCH button and the cart link,
   injected by site.js after the nav into .head-tools, whose
   margin-left: auto parks the pair at the header's right on BOTH
   layouts — under the desktop's flex-start it takes the free space;
   under the touch layout's space-between it absorbs it, so the badge
   stays left and the tools sit right. The cart link is round 30's, an
   ICON since round 31 ("replace the word cart with a cart icon"); the
   count is a bare number on its shoulder that only exists once
   something is in the cart. */
.head-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.cart-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--amber-lo);
  transition: color 0.25s ease;
}
.cart-link svg { display: block; width: 22px; height: 22px; }
.cart-link:hover { color: var(--amber-hi); }
.cart-link[aria-current="page"] { color: var(--beam); }
.cart-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
/* the count: a bare beam-green number on the icon's shoulder — no pill
   (client 2026-09-08: "remove the circle bordering the number") */
.cart-count {
  position: absolute;
  top: -2px;
  right: -4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--beam);
  text-shadow: 0 0 10px rgba(166, 255, 77, 0.55);
}

/* the search panel (round 32) is css/search.css + js/search.js, shared
   with the hero since 32b; only its PLACE in this header lives here:
   under the header's right edge, full width between 18 px margins on
   phones. Closed = the hidden attribute; .search-open runs the fade. */
.site-head .site-search {
  top: 64px;                          /* 18 padding + 38 badge + 8 gap */
  right: 26px;
  width: min(440px, calc(100vw - 52px));
}
@media (max-width: 720px) {
  .site-head .site-search { top: 60px; right: 18px; left: 18px; width: auto; }   /* 14 + 38 + 8 */
}
@media (max-width: 480px) {
  .site-head .site-search { top: 54px; }                                         /* 14 + 32 + 8 */
}

/* Touch: the same dropdown, opened by TAP instead of hover (client
   2026-09-03) — on the BADGE itself since round 31 (client: "make it so
   the three lines aren't there and tapping the logo opens the dropdown
   menu"); the panel drops under the badge like the desktop one, and the
   HOME entry site.js injects takes over the badge's old job. Only applies
   once site.js has marked the header data-nav="js" — without the script
   the plain inline row survives and the badge still goes home. */
@media (hover: none) {
  .site-head[data-nav="js"] { justify-content: space-between; flex-wrap: nowrap; }
  .site-head[data-nav="js"] .site-nav {
    position: absolute;
    top: 56px;                      /* 18 padding + 38 badge: the panel starts at the badge's bottom edge */
    left: 26px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 216px;               /* SELECT CATEGORY is the longest item (round 23) */
    padding: 8px 0 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
  }
  .site-head[data-nav="js"] .site-nav::before {
    content: '';
    position: absolute;
    inset: 8px 0 0 0;
    background: rgba(11, 10, 24, 0.94);
    border: 1px solid var(--line);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    z-index: -1;
  }
  .site-head[data-nav="js"] .site-nav a { padding: 13px 18px; font-size: 10px; letter-spacing: 0.24em; }
  .site-head[data-nav="js"] .site-nav a + a { border-top: 1px solid rgba(169, 143, 232, 0.1); }
  .site-head[data-nav="js"].nav-open .site-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .site-head[data-nav="js"].nav-open .site-brand::after { border-top-color: var(--beam); }   /* the caret lights while the panel is open */
}
/* the header's padding shrinks at ≤720 (14px 18px) and the badge to
   32px at ≤480 — the touch panel tracks both, like the hover one below */
@media (hover: none) and (max-width: 720px) {
  .site-head[data-nav="js"] .site-nav { top: 52px; left: 18px; }
}
@media (hover: none) and (max-width: 480px) {
  .site-head[data-nav="js"] .site-nav { top: 46px; }
}

/* On hover-capable devices the nav is a DROPDOWN under the brand
   (client 2026-09-02): hidden until the pointer rests on AREA 52 or
   keyboard focus lands anywhere in the header. The panel's own top
   padding bridges the gap to the brand so the hover never breaks.
   Touch devices keep the inline row above — there is no hover to
   open a menu with, and the brand link must keep going home.
   Closed = opacity 0 + pointer-events none, NOT visibility hidden:
   the <nav> landmark and its links must stay in the accessibility
   tree so screen-reader landmark/element lists still find the site
   navigation without first tabbing onto the brand. */
@media (hover: hover) {
  .site-head { justify-content: flex-start; }
  .site-head:hover .site-brand::after,
  .site-head:focus-within .site-brand::after { border-top-color: var(--amber-hi); }
  .site-nav .nav-home { display: none; }   /* the badge itself goes home here (round 31) */

  /* Geometry: the brand's line box is font-size × 1.7 tall, below its
     glyph em-box by 0.35em of half-leading. The panel's transparent
     top padding (8px) starts 4px above the line-box bottom — inside
     that half-leading, so it overlaps the brand's hit area (no hover
     gap) but never its glyphs (a click on the letters still goes
     home). 19px brand: line box 18→50.3, em-box ends ≈43.7, top 46.
     The narrow-window values below keep the same 4px overlap. */
  .site-nav {
    position: absolute;
    top: 56px;                      /* 18 padding + 38 badge: the panel starts at the badge's bottom edge (the header box itself keeps :hover across the join) */
    left: 26px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 216px;               /* SELECT CATEGORY is the longest item (round 23) */
    padding: 8px 0 0;               /* the hover bridge */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
  }
  .site-nav::before {
    content: '';
    position: absolute;
    inset: 8px 0 0 0;
    background: rgba(11, 10, 24, 0.94);
    border: 1px solid var(--line);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    z-index: -1;
  }
  .site-nav a { padding: 11px 18px; }
  .site-nav a + a { border-top: 1px solid rgba(169, 143, 232, 0.1); }
  /* …except when the pointer or focus is on the TOOLS at the far right
     (round 30: the cart; round 32: the search button too), or while the
     search panel is open: the whole header's hover is what keeps the
     bridge unbreakable, but a menu popping open under the badge while
     the pointer rests on the cart reads as a glitch. :has() is already
     a site dependency (the categories page's body:has(.cat-field…) rules). */
  .site-head:hover:not(.search-open):not(:has(.head-tools:hover)) .site-nav,
  .site-head:focus-within:not(.search-open):not(:has(.head-tools :focus)) .site-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}
/* the header's padding shrinks at ≤720 (14px 18px) and the brand to
   16px at ≤480 — the panel edge and the bridge track both */
@media (hover: hover) and (max-width: 720px) {
  .site-nav { top: 52px; left: 18px; }      /* 14 padding + 38 badge */
}
@media (hover: hover) and (max-width: 480px) {
  .site-nav { top: 46px; }                  /* 14 padding + 32 badge */
}

/* ── page scaffold ───────────────────────────────────────── */

.page {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 118px 26px 96px;
}

.page-kicker {
  font-size: 10px;
  letter-spacing: 0.34em;
  color: var(--amber);
  text-transform: uppercase;
}

.page-title {
  margin-top: 10px;
  font-family: "Super Sliced", "Arial Black", sans-serif;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: var(--beam);
  text-shadow: 0 0 22px rgba(166, 255, 77, 0.35), 0 0 60px rgba(166, 255, 77, 0.15);
}
.page-title .s52, .page-title .violet { color: var(--violet); text-shadow: 0 0 22px rgba(169, 143, 232, 0.4); }

.page-lede {
  margin-top: 18px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--bone);
}

.section { margin-top: 64px; }
.section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--amber);
  text-transform: uppercase;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.prose { max-width: 66ch; }
.prose p { margin-top: 14px; font-size: 14.5px; line-height: 1.8; }
.prose p:first-child { margin-top: 0; }
.prose a { color: var(--beam); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--beam-soft); }
.prose ul, .prose ol { margin: 14px 0 0 20px; }
.prose li { margin-top: 6px; }
.prose strong { color: var(--bone); font-weight: 700; }

/* owner-input placeholder: the demo shows where real copy goes */
.todo {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px dashed rgba(255, 174, 66, 0.45);
  color: var(--amber-hi);
  font-size: 12px;
  line-height: 1.7;
}
.todo::before {
  content: 'OWNER INPUT NEEDED';
  display: block;
  margin-bottom: 6px;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--amber);
}

/* ── CTAs (mirror the hero) ──────────────────────────────── */

.cta {
  display: inline-block;
  font-family: "Michroma", "Arial Black", sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-decoration: none;
  padding: 15px 30px;
  white-space: nowrap;
  border: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.cta:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.cta:hover  { transform: translateY(-2px); }
.cta:active { transform: translateY(0); }
.cta[disabled], .cta.is-disabled { opacity: 0.45; pointer-events: none; }
button.cta { line-height: 1.7; }   /* a <button> .cta matches the anchor's box (the body line-height an <a> inherits) */

.cta-primary {
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #dde2e8 38%, #a7b0bb 52%, #8b95a1 56%, #b7c0c9 74%, #eef1f5 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 4px 14px rgba(0, 0, 0, 0.55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.cta-primary:hover {
  box-shadow: 0 0 0 1px var(--amber), 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 174, 66, 0.18);
}

.cta-ghost {
  color: #e8bd77;
  border: 1px solid rgba(255, 174, 66, 0.42);
  background: rgba(255, 174, 66, 0.03);
}
.cta-ghost:hover { border-color: var(--amber); color: var(--amber-hi); box-shadow: 0 10px 30px rgba(216, 180, 90, 0.10); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ── shop: filters + grid ────────────────────────────────── */

.filters {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.chip {
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e8bd77;
  background: rgba(255, 174, 66, 0.03);
  border: 1px solid rgba(255, 174, 66, 0.3);
  padding: 8px 13px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.chip:hover { border-color: var(--amber); color: var(--amber-hi); }
.chip[aria-pressed="true"], .chip.is-on {
  color: var(--beam);
  border-color: rgba(166, 255, 77, 0.6);
  background: rgba(166, 255, 77, 0.06);
}
.chip:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.chip small { opacity: 0.6; letter-spacing: 0.1em; }

.search {
  flex: 1 1 220px;
  min-width: 160px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--bone);
  background: rgba(11, 10, 24, 0.7);
  border: 1px solid var(--line);
  padding: 9px 12px;
  transition: border-color 0.2s ease;
}
.search::placeholder { color: var(--faint); }
.search:focus { outline: none; border-color: rgba(166, 255, 77, 0.6); }

.sort {
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-lo);
  background: rgba(11, 10, 24, 0.7);
  border: 1px solid var(--line);
  padding: 9px 10px;
}
.sort:focus { outline: none; border-color: rgba(166, 255, 77, 0.6); }

.count { width: 100%; font-size: 10px; letter-spacing: 0.24em; color: var(--faint); }

.grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 18px 16px;
}

.card {
  display: block;
  color: inherit;
  text-decoration: none;
  opacity: 0;
  animation: fade-up 0.5s var(--ease-out) forwards;
}
.card-img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.card-title {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.card-price { color: var(--amber); }
.card-price s { color: var(--faint); margin-right: 6px; }
.card-size { color: var(--faint); font-size: 10px; letter-spacing: 0.2em; }

.badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  letter-spacing: 0.26em;
  color: var(--ink);
  background: var(--amber);
  padding: 4px 8px;
}
.card.is-sold .card-img img { opacity: 0.4; filter: grayscale(0.6); }

@media (hover: hover) and (pointer: fine) {
  .card:hover .card-img { border-color: rgba(166, 255, 77, 0.55); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 22px rgba(166, 255, 77, 0.12); }
  .card:hover .card-img img { transform: scale(1.04); }
}
.card:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

.empty, .loading {
  margin-top: 40px;
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--faint);
}
.loading { animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

.more { margin-top: 36px; text-align: center; }

/* ── product page ────────────────────────────────────────── */

.back {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--amber-lo);
  text-decoration: none;
  margin-bottom: 26px;
}
.back:hover { color: var(--amber-hi); }

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.gallery-main {
  aspect-ratio: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.gallery-main img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.gallery-thumbs button {
  width: 64px;
  height: 64px;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.gallery-thumbs button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button[aria-current="true"] { border-color: var(--beam); }
.gallery-thumbs button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* the DEPTH CAROUSEL (round 38): the product's images as cards stacked in
   perspective, the rest receding to the right behind the front one. The
   page's script sets each card's slot as custom properties (--x --z --ry
   --o --b) from its distance behind the front; this sheet only draws the
   slot. Transitions arm after the first layout (.is-ready) so the deck
   does not fly out of the front card on load; reduced motion stills them
   through the global rule below. The well's box goes: the cards carry
   their own frames, and the stack must be free to spill a little right. */
.gallery-main.gallery-depth { background: none; border: 0; overflow: visible; }
.depth-stage {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  outline: none;
}
.depth-stage:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; }
.depth-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.depth-card {
  --x: 0px; --z: 0px; --ry: 0deg; --o: 1; --b: 0px;
  position: absolute;
  left: 0;
  top: 9%;
  width: 82%;
  height: 82%;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translate3d(var(--x), 0, var(--z)) rotateY(var(--ry));
  opacity: var(--o);
  filter: blur(var(--b));
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  user-select: none;
  -webkit-user-drag: none;
}
.depth-stage.is-ready .depth-card { transition: transform 0.55s var(--ease-out), opacity 0.45s ease, filter 0.45s ease; }
.depth-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.depth-card.is-front { border-color: rgba(166, 255, 77, 0.35); }
.depth-card.is-off { pointer-events: none; }
/* the ‹ › buttons ride the front card's lower corners; the ⤢ (round 39)
   its top-right; the viewer's buttons wear the same look, fixed */
.depth-nav, .depth-full {
  position: absolute;
  z-index: 30;
  width: 34px;
  height: 34px;
  padding: 0 0 2px;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  color: var(--amber-lo);
  background: none;                 /* bare glyphs since round 40 (client: "remove the circles keep the icons"); the shadow keeps them legible over a bright photo */
  border: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
  transition: color 0.2s ease;
}
.depth-prev, .depth-next { bottom: calc(9% + 10px); }
.depth-prev { left: 10px; }
.depth-next { left: calc(82% - 44px); }
.depth-nav:hover, .depth-full:hover { color: var(--amber-hi); }
.depth-nav:focus-visible, .depth-full:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.depth-full svg { display: block; width: 17px; height: 17px; }
.gallery-depth .depth-full { top: calc(9% + 10px); left: calc(82% - 44px); padding: 0; }
.gallery-main:not(.gallery-depth) .depth-full { top: 10px; right: 10px; padding: 0; }

/* the fullscreen VIEWER (round 39): the current image over the whole page,
   the 2048 px cut fitted inside the viewport, ‹ › at the sides, × top
   right, the count at the foot. Also the element the browser goes
   fullscreen on when it allows it. Closed = the hidden attribute (the
   class's display would otherwise beat it); .is-open runs the fade. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(6, 5, 14, 0.96);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox img {
  display: block;
  max-width: min(100%, 1400px);
  max-height: calc(100vh - 32px);
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox .depth-nav { position: fixed; bottom: auto; }
.lightbox-close { top: 16px; right: 16px; left: auto; padding: 0; }
.lightbox-close svg { display: block; width: 16px; height: 16px; }
.lightbox-prev { left: 16px; top: 50%; margin-top: -17px; }
.lightbox-next { right: 16px; left: auto; top: 50%; margin-top: -17px; }
.lightbox-count {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--faint);
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* a phone's column is the viewport: the deck is pulled in (the script) and clipped at the column's edge as the safety net */
@media (max-width: 480px) {
  .gallery-main.gallery-depth { overflow: clip; }
}

.pdp-kicker { font-size: 10px; letter-spacing: 0.32em; color: var(--amber); text-transform: uppercase; }
.pdp-title {
  margin-top: 10px;
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 700;
}
.pdp-price { margin-top: 14px; font-size: 22px; letter-spacing: 0.08em; color: var(--amber); }
.pdp-price s { font-size: 14px; color: var(--faint); margin-right: 10px; }
.pdp-facts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 10px; letter-spacing: 0.24em; color: var(--faint); text-transform: uppercase; }
.pdp-facts b { color: var(--bone); font-weight: 400; }
.pdp-buy { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pdp-note { font-size: 10px; letter-spacing: 0.18em; color: var(--faint); }
.pdp-desc { margin-top: 34px; }
.pdp-desc p { margin-top: 10px; font-size: 13.5px; line-height: 1.8; }
.pdp-tags { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-tags a { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; color: var(--amber-lo); border: 1px solid var(--line); padding: 6px 10px; }
.pdp-tags a:hover { color: var(--amber-hi); border-color: rgba(255, 174, 66, 0.4); }

/* related strip */
.related .grid { margin-top: 22px; }

/* ── generic content blocks ──────────────────────────────── */

.cards { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.panel {
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  background: rgba(15, 14, 34, 0.6);
}
.panel h3 { font-size: 11px; letter-spacing: 0.28em; color: var(--amber); text-transform: uppercase; }
.panel p { margin-top: 10px; font-size: 13.5px; line-height: 1.75; }
.panel .num {
  font-family: "Super Sliced", "Arial Black", sans-serif;
  font-size: 30px;
  color: var(--beam);
  text-shadow: 0 0 16px rgba(166, 255, 77, 0.35);
  line-height: 1;
}

.facts { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 26px; }
.facts dt { font-size: 9px; letter-spacing: 0.3em; color: var(--amber); text-transform: uppercase; }
.facts dd { margin-top: 4px; font-size: 14px; color: var(--bone); }
.facts a { color: var(--beam); text-decoration: none; }
.facts a:hover { color: var(--beam-soft); }

/* ── footer ──────────────────────────────────────────────── */

.site-foot {
  position: relative;
  z-index: 2;
  flex: none;
  width: 100%;
  max-width: 1180px;
  margin: 40px auto 0;
  padding: 26px 26px 70px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;   /* address left, socials right */
  align-items: center;
  gap: 12px 32px;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--amber-lo);
  text-transform: uppercase;
}
.site-foot a { color: inherit; text-decoration: none; transition: color 0.25s ease; }
.site-foot a:hover { color: var(--amber-hi); }

/* footer socials as icon links (client 2026-09-02: "replace these with
   the icons everywhere") — same monochrome glyphs as the landing page */
.site-foot .foot-socials { justify-self: end; }
.foot-socials { display: flex; align-items: center; gap: 6px; }
.foot-socials a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--amber-lo);
  transition: color 0.25s ease, transform 0.25s ease;
}
.foot-socials svg { width: 17px; height: 17px; }
.foot-socials a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
/* the builder's sigil (about.html, 2026-09-09): a 32 x 50 px diamond pinned
   to the footer's bottom-left corner, inside its 70 px bottom padding so it
   never meets the address; absolute, so the footer's grid is untouched.
   Quiet at rest, full on hover / focus. */
.foot-sigil {
  position: absolute;
  left: 26px;
  bottom: 16px;
  width: 32px;
  height: 50px;
  display: block;
  opacity: 0.72;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.foot-sigil img { display: block; width: 100%; height: 100%; }
.foot-sigil:hover, .foot-sigil:focus-visible { opacity: 1; transform: translateY(-2px); }
.foot-sigil:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .foot-socials a:hover { color: var(--beam); transform: scale(1.12); }
}

/* ── shared keyframes ────────────────────────────────────── */

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── responsive ──────────────────────────────────────────── */

@media (max-width: 820px) {
  .pdp { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .site-head { padding: 14px 18px; }
  .page { padding: 96px 18px 72px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 12px; }
  /* three columns cannot hold at phone width — stack them centred */
  .site-foot {
    padding: 22px 18px 60px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 10px;
  }
  .site-foot .foot-socials { justify-self: center; }
  .foot-sigil { left: 18px; bottom: 12px; }
}
/* The inline nav row only exists on touch layouts. These squeeze rules
   share specificity with the dropdown block above and come later in
   the sheet, so they are gated on (hover: none) — otherwise a narrowed
   desktop window would get 12px voids between the panel's hairlines
   and, at ≤480, link text flush against the panel's left border. */
@media (max-width: 720px) and (hover: none) {
  .site-head:not([data-nav="js"]) .site-nav { gap: 12px; }
  .site-head:not([data-nav="js"]) .site-nav a { font-size: 9px; letter-spacing: 0.2em; }
}

@media (max-width: 480px) {
  .site-brand { font-size: 16px; }
  .site-brand img { height: 32px; }
}
@media (max-width: 480px) and (hover: none) {
  /* NO-JS fallback only: without the menu button the five links cannot
     fit beside the brand on a 375px phone, so they wrap to a second row
     and the page makes room for it. With site.js running they live in
     the tap dropdown instead and none of this applies. */
  .site-head:not([data-nav="js"]) { flex-wrap: wrap; row-gap: 6px; padding-bottom: 10px; }
  .site-head:not([data-nav="js"]) .site-nav { flex-basis: 100%; justify-content: space-between; gap: 6px; }
  .site-head:not([data-nav="js"]) .site-nav a { padding: 6px 0; letter-spacing: 0.16em; }
  .site-head:not([data-nav="js"]) ~ .page { padding-top: 112px; }
}

/* ── reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  html { scroll-behavior: auto; }
  .card { opacity: 1; animation: none; }
  .loading { animation: none; }
}