/* ==================================================================
   SCROLLWORK CASE STUDY (2026-10-24): /systems/scrollwork.
   Loaded in <head> through $sys_extra_css, so the colours are in place
   before the hero paints. Same method as css/cairn-case.css: re-alias
   the shared tokens, then override the places the product-page styles
   hardcode Snapline violet or site teal.
   Navy #14213D / vault #0B1426, brass #9A7339 / #C9A66B, paper #F4EFE6.
   ================================================================== */

body.scrollwork-product-page {
  --sw-brass: #C9A66B;
  --sw-brass-deep: #9A7339;
  --sw-line: rgba(201, 166, 107, .3);
  --teal: #C9A66B;
  --blue: #9A7339;
  --grad: linear-gradient(135deg, #E2C894 0%, #9A7339 100%);
  --grad-hover: linear-gradient(135deg, #EED8AE 0%, #A9813F 100%);
  --snapline-line: var(--sw-line);
  --snapline-grad: linear-gradient(135deg, #C9A66B, #9A7339);
}

/* ---------- hero ---------- */
.scrollwork-product-page .page-hero--product {
  background:
    radial-gradient(circle at 78% 33%, rgba(201, 166, 107, .14), transparent 36%),
    linear-gradient(145deg, #070D1A 0%, #0F1A30 54%, #0B1426 100%);
}
.scrollwork-product-page .page-hero--product::after {
  background: radial-gradient(circle, rgba(154, 115, 57, .14) 0%, transparent 68%);
}
.scrollwork-product-page .breadcrumb span,
.scrollwork-product-page .page-hero .overline,
.scrollwork-product-page .page-hero--product .breadcrumb--hero [aria-current='page'] { color: var(--sw-brass); }
.scrollwork-product-page .sys-product-logo {
  width: 92px;
  height: 92px;
  padding: .8rem .9rem;
  object-fit: contain;
  border: 1px solid rgba(201, 166, 107, .45);
  border-radius: 22px;
  background: #14213D;
  box-shadow: 0 16px 42px rgba(154, 115, 57, .28);
}
.scrollwork-product-page .sys-product-hero-art {
  border-color: rgba(201, 166, 107, .28);
  background: rgba(11, 20, 38, .72);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .45), 0 0 80px rgba(201, 166, 107, .1);
}
.scrollwork-product-page .sys-product-hero-credit { color: rgba(244, 239, 230, .62); }

/* Brass buttons take dark ink, like the Scrollwork site */
.scrollwork-product-page .btn-primary,
.scrollwork-product-page .btn-primary:hover { color: #1A1307; }

/* ---------- the build (showcase) ---------- */
.scrollwork-product-page .sys-product-tour-label { color: var(--sw-brass); }
.scrollwork-product-page .sys-product-tour-media { border-color: rgba(201, 166, 107, .28); background: #0B1426; box-shadow: 0 24px 64px rgba(0, 0, 0, .35), 0 0 50px rgba(154, 115, 57, .08); }
.scrollwork-product-page .sys-product-tour-media figcaption { border-top-color: rgba(201, 166, 107, .16); }

/* ---------- the two films ---------- */
.sw-film-sec { padding-top: clamp(3.5rem, 7vw, 6rem); }
.sw-film-sec--paper { background: #F4EFE6; color: #1B2333; }
.sw-film-sec--paper .section-header h2 { color: #14213D; }
.sw-film-sec--paper .section-header p { color: #4A5266; }
.sw-film-sec--paper .overline, .sw-film-sec--paper .gt { color: #9A7339; -webkit-text-fill-color: #9A7339; background: none; }
.sw-film-frame { margin: 0; }
.sw-film-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #060B16;
  border: 1px solid rgba(201, 166, 107, .3);
  border-radius: 16px;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .8), 0 0 70px rgba(154, 115, 57, .12);
}
.sw-film-sec--paper .sw-film-frame video { background: #F4EFE6; box-shadow: 0 40px 90px -40px rgba(20, 33, 61, .45); }
.sw-film-frame figcaption {
  margin-top: .9rem;
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-body);
}
.sw-film-sec--paper .sw-film-frame figcaption { color: #4A5266; }
.sw-film-frame figcaption a { color: var(--sw-brass); }
.sw-film-sec--paper .sw-film-frame figcaption a { color: #14213D; text-decoration-color: #9A7339; }

/* ---------- final call to action ---------- */
#cta-band.scrollwork-final-cta {
  background:
    radial-gradient(circle at 50% 30%, rgba(154, 115, 57, .24), transparent 60%),
    #0B1426;
}
#cta-band.scrollwork-final-cta .overline { color: var(--sw-brass); }

@media (max-width: 680px) {
  .scrollwork-product-page .sys-product-logo {
    width: 76px;
    height: 76px;
    padding: .65rem .7rem;
    border-radius: 18px;
  }
}