/* Arcane Layers — storefront catalog
   Dark editorial layout. The recurring motif is the print layer line: 4px
   horizontal striping shows up in the hero wash, the brand mark and the
   section rules. Everything below is driven by the tokens in :root. */

/* Palette is sampled from ArcaneLayersLogo-GreyCircle.png so the site and the
   mark read as one brand: the logo's field is #101010, its type #f0f0f0, and
   its crest is steel blue (#7090a0, #507080). The accent used to be a filament
   amber, which fought the crest's cool tones — it is now lifted from the logo
   itself. Warmth comes from the product photography instead. */
:root {
  --ink:        #0b0c0e;
  --ink-2:      #101216;
  --surface:    #16181d;
  --surface-2:  #1d2027;
  --bone:       #eceef1;
  --bone-dim:   #b9c2ca;
  --muted:      #868f98;
  --accent:     #86aec9;
  --accent-dim: #5c8099;
  --line:       rgba(236, 238, 241, 0.10);
  --line-soft:  rgba(236, 238, 241, 0.06);
  --scroll-track: #101216;
  --scroll-thumb: rgba(236, 238, 241, 0.16);
  --scroll-thumb-hi: rgba(236, 238, 241, 0.30);

  /* Tells the browser this page is dark, which is what actually stops it
     painting a light scrollbar (and light form controls) over the top of an
     otherwise dark site. The custom rules further down restyle the bar; this
     line is what fixes it even where those do not apply. */
  color-scheme: dark;

  --display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1220px;
  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The layer-line texture, reused wherever the motif appears. */
  --layers: repeating-linear-gradient(
    to bottom,
    rgba(236, 238, 241, 0.03) 0 1px,
    transparent 1px 4px
  );
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* ------------------------------------------------------------ scrollbars */

/* Chromium and Safari. Wider than stock, with the thumb inset from the track
   by a transparent border so it reads as a floating pill rather than a bar
   wedged into a channel: background-clip keeps the background off that border.

   Firefox gets these colours through scrollbar-color at the bottom of this
   block instead. It cannot be widened there — scrollbar-width only accepts
   auto/thin/none — so Firefox keeps its default width and just goes dark. */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hi); background-clip: padding-box; }
/* Where a vertical and a horizontal bar meet, which would otherwise be bare. */
::-webkit-scrollbar-corner { background: var(--scroll-track); }

/* The gallery strip is 64px tall, so a full-width bar under it would be
   nearly a quarter of its height. */
.sheet__thumbs::-webkit-scrollbar { height: 10px; }
.sheet__thumbs::-webkit-scrollbar-track { background: transparent; }
.sheet__thumbs::-webkit-scrollbar-thumb { border-width: 2px; }

/* Firefox. Kept behind a support query because setting either standard
   property in Chromium switches it to the standard rendering and makes it
   ignore every ::-webkit-scrollbar rule above — including the width, which is
   the part that cannot be expressed here. */
@supports not selector(::-webkit-scrollbar) {
  :root { scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
  .sheet__thumbs { scrollbar-width: thin; }
}

img { max-width: 100%; display: block; }
/* That display:block is author-level, so it overrides the UA stylesheet's
   [hidden] { display: none } and the hidden attribute silently stops working
   on every image on the site. The sheet swaps its <img> and <video> with
   .hidden, so restore it rather than reaching for inline styles in JS. */
img[hidden], video[hidden] { display: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--ink);
  font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------ primitives */

.eyebrow {
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.btn {
  --btn-bg: var(--bone);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--lg { padding: 0.95rem 1.9rem; font-size: 1rem; }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.82rem; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--bone-dim); background: rgba(236, 238, 241, 0.05); }

.link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.link:hover { color: var(--bone); border-color: var(--accent); }

/* Brand lockup. The supplied logo already contains an "ARCANE LAYERS"
   wordmark, but it is unreadable below ~120px, so the mark is paired with live
   text at nav size and left to stand alone only where it is rendered large. */
.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }

.brand__logo {
  /* Horizontal lockup at 2.1:1. Sized by width so the wordmark stays legible;
     the circular mark it replaced had to stay small to avoid dominating the
     bar, which made the brand read as an afterthought. */
  width: clamp(112px, 13vw, 148px);
  height: auto;
  flex: 0 0 auto;
  transition: opacity 0.3s var(--ease);
}
.brand:hover .brand__logo { opacity: 0.82; }

/* ------------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              backdrop-filter 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(11, 12, 14, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}

.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav__links {
  margin-left: auto;
  display: flex;
  gap: 1.75rem;
  font-size: 0.88rem;
  color: var(--bone-dim);
}
.nav__links a {
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover { color: var(--bone); }
.nav__links a:hover::after { transform: scaleX(1); }

@media (max-width: 780px) {
  .nav__links { display: none; }
  .nav__inner > .btn { margin-left: auto; }
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  padding: clamp(4rem, 13vh, 8.5rem) 0 0;
  overflow: hidden;
}

/* Two washes: a steel-blue bloom off to one side, and the layer striping over it. */
.hero__grain {
  position: absolute;
  inset: -20% -10% auto;
  height: 150%;
  pointer-events: none;
  background:
    var(--layers),
    radial-gradient(60% 55% at 78% 8%, rgba(134, 174, 201, 0.15), transparent 62%),
    radial-gradient(70% 60% at 12% 0%, rgba(110, 120, 190, 0.10), transparent 60%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
}

.hero__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero__h1 {
  font-size: clamp(2.6rem, 7.4vw, 5.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  max-width: 15ch;
  margin-bottom: 1.5rem;
}

.hero__lead {
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--bone-dim);
  margin-bottom: 2.25rem;
}

.stats {
  position: relative;
  max-width: var(--maxw);
  margin: clamp(3.5rem, 8vw, 6rem) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: transparent;
}
.stat {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.stat__v {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.stat__l {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* -------------------------------------------------------------- showcase */

/* The gallery owns the page-level box; each slide inside it is just the
   two-column panel. */
.showcase-gallery {
  max-width: var(--maxw);
  margin: clamp(4.5rem, 11vw, 8rem) auto;
  padding: 0 var(--gutter);
}

/* Slides stack in one grid cell rather than being hidden outright, so the
   container is always as tall as the tallest slide and rotating cannot shift
   the rest of the page. visibility (not just opacity) keeps the inactive
   panels out of the tab order and the accessibility tree. */
.showcase__slides { display: grid; }
.showcase__slides > .showcase {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.showcase__slides > .showcase.is-active { opacity: 1; visibility: visible; }

.showcase {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.showcase__dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.showcase__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.showcase__dot:hover { background: var(--bone-dim); }
.showcase__dot.is-active { background: var(--accent); transform: scale(1.35); }
.showcase__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.showcase__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 3;
}
.showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.showcase__media:hover img { transform: scale(1.03); }

.showcase__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.showcase__body h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  margin-bottom: 1rem;
}
.showcase__lead {
  color: var(--bone-dim);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
  max-width: 44ch;
}
.showcase__price {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
}

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

/* -------------------------------------------------------------- sections */

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
}
.section--alt {
  max-width: none;
  background: var(--ink-2);
  border-block: 1px solid var(--line-soft);
  background-image: var(--layers);
}
.section--alt > * {
  max-width: var(--maxw);
  margin-inline: auto;
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: end;
  justify-content: space-between;
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}
.section__head h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
}
.section__note {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 34ch;
}

/* --------------------------------------------------------------- filters */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--bone-dim);
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.pill:hover { border-color: var(--bone-dim); color: var(--bone); }
.pill.is-active {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}
.pill__n {
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pill.is-active .pill__n { color: rgba(11, 12, 14, 0.5); }

/* ------------------------------------------------------------------ grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(1.25rem, 2.6vw, 2rem);
}

.grid__empty {
  padding: 4rem 0;
  text-align: center;
  color: var(--muted);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
              box-shadow 0.4s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
}
.card.is-hidden { display: none; }

.card__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--surface-2);
  aspect-ratio: 1 / 1;
  cursor: pointer;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.045); }
.card__noimg { width: 100%; height: 100%; background: var(--surface-2); }

.card__tag {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(11, 12, 14, 0.72);
  backdrop-filter: blur(8px);
  color: var(--bone-dim);
  font-family: var(--display);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  padding: 1.15rem 1.25rem 1.25rem;
}
.card__title { font-size: 1.05rem; font-weight: 600; }
.card__desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.9rem;
}
.card__price {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.card__links { display: inline-flex; align-items: center; gap: 0.9rem; }

/* -------------------------------------------------------------- features */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.feature__n {
  display: block;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.feature h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.feature p { color: var(--muted); font-size: 0.94rem; }

/* ------------------------------------------------------------------- faq */

.faqs { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.4rem;
  color: var(--muted);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.faq[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq summary:hover { color: var(--accent); }
.faq p {
  padding-bottom: 1.5rem;
  max-width: 62ch;
  color: var(--muted);
}

/* ------------------------------------------------------------------- cta */

.cta {
  position: relative;
  padding: clamp(4rem, 10vw, 7rem) var(--gutter);
  text-align: center;
  background-image: var(--layers),
    radial-gradient(50% 90% at 50% 100%, rgba(134, 174, 201, 0.13), transparent 70%);
  border-top: 1px solid var(--line-soft);
}
.cta__inner { max-width: 48ch; margin: 0 auto; }
.cta h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 0.9rem; }
.cta p { color: var(--bone-dim); margin-bottom: 2rem; }

/* ---------------------------------------------------------------- footer */

.foot {
  background: var(--ink-2);
  border-top: 1px solid var(--line-soft);
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
}
.foot__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
}
.foot__logo {
  width: min(180px, 60vw);
  height: auto;
  margin-bottom: 0.9rem;
}
.foot__meta { color: var(--muted); font-size: 0.88rem; }
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.88rem;
  color: var(--bone-dim);
}
.foot__links a { text-decoration: none; }
.foot__links a:hover { color: var(--accent); }
.foot__built {
  grid-column: 1 / -1;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem;
  color: var(--muted);
}
@media (max-width: 620px) {
  .foot__inner { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- detail sheet */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
}
.sheet[hidden] { display: none; }

.sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 7, 0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.sheet.is-open .sheet__scrim { opacity: 1; }

.sheet__panel {
  position: relative;
  width: min(560px, 100%);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ink-2);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
}
.sheet.is-open .sheet__panel { transform: translateX(0); }

.sheet__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(11, 12, 14, 0.7);
  backdrop-filter: blur(8px);
  color: var(--bone);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.sheet__close:hover { background: var(--accent); color: var(--ink); }

.sheet__media { aspect-ratio: 4 / 3; background: var(--surface); }
.sheet__media img { width: 100%; height: 100%; object-fit: cover; }
/* contain, not cover: a cropped photo still reads, but cropping a video cuts
   off whatever the shot was framed around. Etsy's are not all 4:3. */
.sheet__media video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* Gallery thumbnails. Only rendered when a product has more than one photo,
   which means never on an RSS-sourced build — the feed exposes exactly one. */
.sheet__thumbs {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem clamp(1.5rem, 4vw, 2.25rem) 0;
  overflow-x: auto;
  /* scrollbar-width for this strip is set in the Firefox block near the top:
     declaring it here would make Chromium drop the ::-webkit-scrollbar rules. */
  /* Horizontal scroll is contained here rather than letting a wide strip
     widen the panel and scroll the whole page sideways. */
  overscroll-behavior-x: contain;
}
.sheet__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.18s ease, border-color 0.18s ease;
}
.sheet__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Play badge on the video thumbnail. The video borrows the primary photo for
   its thumbnail, so this triangle is the only thing telling the two slots
   apart — it sits on a scrim so it stays legible over a light photo. */
.sheet__thumb--video { position: relative; }
.sheet__thumb--video .sheet__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
}
.sheet__thumb--video .sheet__play::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
  /* Optical centring: a triangle's visual mass sits left of its bounding box. */
  margin-left: 3px;
}
.sheet__thumb:hover { opacity: 0.85; }
.sheet__thumb.is-active { opacity: 1; border-color: var(--accent); }
.sheet__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sheet__thumb { transition: none; }
  /* Rotation is disabled in JS under this setting; kill the cross-fade too, so
     a dot press swaps instantly rather than animating. */
  .showcase__slides > .showcase { transition: none; }
  .showcase__dot { transition: none; }
}

.sheet__body { padding: clamp(1.5rem, 4vw, 2.25rem); }
.sheet__body h2 { font-size: clamp(1.5rem, 3.6vw, 2rem); margin-bottom: 0.6rem; }
.sheet__descriptor { color: var(--bone-dim); margin-bottom: 1.25rem; }
.prose { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.prose p { color: var(--bone-dim); font-size: 0.94rem; margin-bottom: 1rem; }
.prose h4 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 1.75rem 0 0.75rem;
}
.prose ul { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.prose li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.45rem;
  color: var(--bone-dim);
  font-size: 0.92rem;
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

@media (max-width: 640px) {
  .sheet__panel { width: 100%; border-left: 0; }
}

/* ------------------------------------------------------------ animation */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Stagger cards within a row without needing per-card inline styles. */
.card.reveal:nth-child(3n + 2) { transition-delay: 0.07s; }
.card.reveal:nth-child(3n + 3) { transition-delay: 0.14s; }

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

/* Pointer to the support site, sitting under the FAQ where people look
   before going hunting for help. */
.faq__more {
  margin-top: 1.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.faq__more a {
  color: var(--bone-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.faq__more a:hover { color: var(--bone); border-color: var(--accent); }

/* Material chip. Only rendered when the listing states a material, so its
   absence is meaningful — ASA outdoors, PLA indoors, Vinyl for the key skins. */
.card__tag--mat {
  left: auto;
  right: 0.75rem;
  background: rgba(11, 12, 14, 0.6);
  color: var(--accent);
  border: 1px solid rgba(134, 174, 201, 0.28);
}

.sheet__specs {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}
.sheet__price {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sheet__mat {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(134, 174, 201, 0.3);
  color: var(--accent);
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Terms & privacy page. Shares every token with the catalog; only the prose
   measure and block rhythm are specific to it. */
.legal { max-width: 780px; }
.legal__block { margin-bottom: 2.75rem; }
.legal__block h2 {
  font-size: 1.25rem;
  margin-bottom: 0.85rem;
}
.legal__block p { color: var(--bone-dim); margin-bottom: 1rem; }
.legal__block ul { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.legal__block li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.6rem;
  color: var(--bone-dim);
}
.legal__block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}
.legal__block a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.legal__block a:hover { color: var(--accent); }
.legal__contact {
  font-family: var(--display);
  font-size: 1.1rem;
}
.legal__contact a { text-decoration: none; border-bottom: 1px solid var(--accent-dim); }