/* Metallic night treatment. Existing layout, artwork, and order behavior stay intact. */
:root {
  --exotic-gold: #efd28a;
  --exotic-edge: #cfa85870;
  --exotic-crimson: #821923;
}

body {
  background-color: #060608;
  background-image:
    radial-gradient(ellipse at 7% 14%, #7b19221f, transparent 42%),
    radial-gradient(ellipse at 95% 38%, #b4872720, transparent 43%),
    linear-gradient(#060608eb, #060608f2),
    var(--drill-art);
}

.announcement {
  background: linear-gradient(105deg, #6a471b, #d4ad58 22%, #ffe3a0 48%, #ca9944 76%, #73501e);
  box-shadow: inset 0 1px #fff0c166, inset 0 -1px #583819;
}

.site-header {
  background: linear-gradient(115deg, #0c0b0ef7, #151013f5 55%, #08090cf7);
  border-bottom-color: #d1a14a55;
  box-shadow: inset 0 -1px #000, 0 12px 34px #0003;
}

.brand-mark {
  color: var(--exotic-gold);
  text-shadow: 0 1px #674714, 0 0 20px #dfab3538;
}

.header-order,
.button-ghost,
.mini-add,
.payment-copy {
  background: linear-gradient(135deg, #d5a8510d, #ffffff03 42%, #00000033);
  border-color: #d5ac5f83;
  box-shadow: inset 0 1px #ffe8b00b;
}

.button-gold,
.order-primary:not(:disabled),
.mobile-shop-sticky {
  background-image: linear-gradient(112deg, #9a6b28, #f9d787 36%, #ebc675 49%, #b78a3b 72%, #f2d38c);
  background-size: 180% 100%;
  box-shadow: inset 0 1px #fff1c4, inset 0 -1px #82571d, 0 6px 22px #0005;
  color: #151007;
}

.button-light {
  background: linear-gradient(115deg, #d7c9ac, #fff4d7 48%, #ded0ae);
  box-shadow: inset 0 1px #fff, 0 7px 24px #0005;
}

.hero {
  background-color: #08080a;
  background-image:
    radial-gradient(ellipse at 82% 39%, #a91e3245 0, #72142222 28%, transparent 56%),
    radial-gradient(ellipse at 54% 80%, #d5a04c1f 0, transparent 43%),
    linear-gradient(90deg, #050609da 0%, #0707098f 43%, #07070920 100%),
    var(--drill-art);
  border-bottom-color: #d1a14a70;
  box-shadow: inset 0 1px #e8be6117, inset 0 -60px 80px #05050885;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 24px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--exotic-edge), var(--exotic-edge)) left top / 50px 1px no-repeat,
    linear-gradient(var(--exotic-edge), var(--exotic-edge)) left top / 1px 50px no-repeat,
    linear-gradient(var(--exotic-edge), var(--exotic-edge)) right bottom / 50px 1px no-repeat,
    linear-gradient(var(--exotic-edge), var(--exotic-edge)) right bottom / 1px 50px no-repeat;
}

.hero-noise {
  background-image:
    repeating-linear-gradient(135deg, transparent 0 75px, #e6be6724 75px 76px, transparent 76px 151px),
    repeating-linear-gradient(45deg, transparent 0 75px, #e6be6714 75px 76px, transparent 76px 151px);
  opacity: .32;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 74%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 74%);
}

.hero h1 > span:first-child {
  text-shadow: 0 2px #000, 0 8px 30px #000c;
}

.hero h1 em {
  color: #f0cf80;
  text-shadow: 0 2px #3b250a, 0 0 36px #d6a83b45;
}

.hero-lede {
  color: #dfd9d3;
}

.hero-proof {
  border-top-color: #dbc18b45;
}

.hero-proof strong {
  color: #f6e5bd;
  text-shadow: 0 1px 8px #000;
}

.hero-stage::before {
  border: 1px solid #e2bd6770;
  background:
    radial-gradient(circle, transparent 43%, #e5b45118 63%, transparent 68%),
    conic-gradient(from 35deg, transparent, #bc8e2820 15%, transparent 24%, #a51f2b2e 52%, transparent 64%, #e9be6226 83%, transparent);
  box-shadow: 0 0 0 14px #cda55008, 0 0 0 15px #dbb5611b, 0 0 0 40px #dca64404, inset 0 0 65px #99122124, 0 0 60px #6e142126;
  pointer-events: none;
}

.hero-stage::after {
  display: block;
  content: '✦';
  color: #f0d087;
  font-size: 26px;
  opacity: .82;
  text-shadow: 0 0 18px #f1c86666;
  pointer-events: none;
}

.vertical-type {
  -webkit-text-stroke-color: #e1b96970;
  opacity: .55;
}

.hero-cover {
  box-shadow: 20px 32px 50px #000d, 0 0 0 1px #e9cc7f77, 0 0 36px #d5a34629, 0 0 100px #a0203522;
}

.cover-shine {
  background: linear-gradient(112deg, #ffffff1f, transparent 21%, transparent 77%, #ffd58d10);
}

.hero-product-card {
  background: linear-gradient(130deg, #22171af5, #0a090cf7 48%, #1c1710f5);
  border-color: #cfa85870;
  border-left-color: #f0cd76;
  box-shadow: inset 0 1px #fff0c519, 0 20px 40px #000b, 0 0 25px #b87d1920;
}

.product-kicker,
.product-info .eyebrow,
.section-count {
  color: #e4c07a;
}

.release-rail {
  background-image:
    linear-gradient(120deg, #171016f2, #09090cf2 50%, #1b140de8),
    var(--drill-art);
  border-top-color: #c8994550;
  border-bottom-color: #c8994550;
  box-shadow: inset 0 1px #f3cd6821, inset 0 -1px #000;
}

.release-card > .book-front {
  box-shadow: 5px 8px 16px #000b, 0 0 0 1px #c59b4259;
}

.catalog-runway {
  background:
    repeating-linear-gradient(125deg, #cd9b4510 0 1px, transparent 1px 24px),
    linear-gradient(90deg, #0c090d, #17100f 50%, #0c090d);
  border-bottom-color: #bb8d3940;
  color: #dccfb9;
}

.mission,
.about-section,
.contact-section {
  background-image:
    radial-gradient(ellipse at 0% 70%, #7e172522, transparent 52%),
    radial-gradient(ellipse at 100% 18%, #d3a14b12, transparent 46%),
    linear-gradient(110deg, #09090ce8, #09090cf5),
    var(--drill-art);
  border-color: #c8984638;
}

.shop-section {
  background-image:
    radial-gradient(ellipse at 10% 23%, #72152229, transparent 44%),
    radial-gradient(ellipse at 90% 38%, #b8872920, transparent 48%),
    linear-gradient(#09090ce9, #09090cf4),
    var(--drill-art);
}

.product-art-wrap {
  isolation: isolate;
  border-color: #d8b66c73;
  box-shadow: inset 0 0 75px #0009, inset 0 1px #ffe2a524, 0 12px 34px #0006;
}

.product-red {
  background-image:
    radial-gradient(ellipse at 50% 24%, #b3364245, transparent 62%),
    linear-gradient(135deg, #17090eca, #090a0dbf),
    var(--drill-art);
  background-position: center, center, 10% center;
}

.product-gold {
  background-image:
    radial-gradient(ellipse at 50% 24%, #d9a94b38, transparent 62%),
    linear-gradient(135deg, #22170bc9, #08090cc2),
    var(--drill-art);
  background-position: center, center, 90% center;
}

.product-art-wrap::before {
  inset: 14px;
  border: 1px solid #e3bc675a;
  transform: none;
  background:
    linear-gradient(#e8c16f, #e8c16f) left top / 26px 1px no-repeat,
    linear-gradient(#e8c16f, #e8c16f) left top / 1px 26px no-repeat,
    linear-gradient(#e8c16f, #e8c16f) right bottom / 26px 1px no-repeat,
    linear-gradient(#e8c16f, #e8c16f) right bottom / 1px 26px no-repeat;
}

.product-art-wrap::after {
  content: '';
  position: absolute;
  bottom: 25px;
  left: 16%;
  right: 16%;
  height: 65px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 14%, #f2ce8752, #a8782630 22%, #09090bd9 65%);
  border-top: 1px solid #e4be7270;
  box-shadow: 0 12px 25px #0008, 0 0 35px #bc812524;
  pointer-events: none;
  z-index: 0;
}

.cover-button {
  z-index: 2;
}

.cover-button .book-front {
  box-shadow: 16px 23px 35px #000d, 0 0 0 1px #ebce8859, 0 0 30px #dda94715;
}

.product-badge {
  background: linear-gradient(125deg, #2b2113f5, #0d0a0cf5);
  border-color: #e3bd729c;
  color: #f0ce83;
  box-shadow: inset 0 1px #ffeab024, 0 3px 12px #0006;
}

.art-caption {
  background: #0b090cf5;
  color: #d9cfbe;
  z-index: 3;
}

.product-bottom,
.mission-points > div {
  border-top-color: #dab8785c;
}

.catalog-notice {
  background: linear-gradient(110deg, #1c1217, #100e12);
  border-color: #b4914c66;
  color: #d1c8ba;
}

.drop-banner {
  background-image:
    radial-gradient(ellipse at 78% 25%, #e3ab4a2f, transparent 55%),
    repeating-linear-gradient(135deg, #f0c5740a 0 1px, transparent 1px 35px),
    linear-gradient(110deg, #601923e8, #240c16e6 48%, #0c090df0),
    var(--drill-art);
  border-color: #dbad588a;
  box-shadow: inset 0 1px #ffe5a525, inset 0 -1px #000, 0 14px 35px #0003;
}

.drop-stamp {
  color: #dfac64;
  opacity: .3;
  text-shadow: 2px 2px #3c151a;
}

.about-collage {
  background:
    radial-gradient(ellipse at 50% 80%, #d6a34629, transparent 66%),
    radial-gradient(ellipse at 20% 25%, #aa1f3224, transparent 63%);
}

.about-seal {
  color: #f0d18a;
  background: radial-gradient(circle at 32% 24%, #4f3b1e, #15110d 62%);
  border-color: #e1bd748f;
  box-shadow: inset 0 0 0 5px #090807, inset 0 0 0 6px #d2a95869, 0 10px 25px #0008;
}

.prison-section {
  background-image:
    radial-gradient(ellipse at 90% 0%, #b5813015, transparent 45%),
    linear-gradient(#0a090ded, #09090cf7),
    var(--drill-art);
}

.policy-grid article {
  background: linear-gradient(135deg, #21171bd9, #0e0d10fa 56%, #1a1510e8);
  border-color: #c7a35d58;
  box-shadow: inset 0 1px #ffe0a315, 0 6px 22px #0003;
}

.policy-icon {
  color: #f0cf85;
}

.faq-list,
.faq-list details {
  border-color: #c49b4b44;
}

/* Customer information always sits on solid, high-contrast surfaces. */
.order-section {
  background-color: #0a090c;
  background-image:
    radial-gradient(ellipse at 75% 0%, #a726332b, transparent 58%),
    linear-gradient(#0a090cd9, #0a090cf5 260px, #0a090c 460px),
    var(--drill-art);
  background-size: 100% 480px, 100% 100%, auto 480px;
  background-repeat: no-repeat;
  background-position: center top, center, right top;
  border-top-color: #c99f555c;
}

.order-status {
  background: #1b1317;
  border-color: #b58f5069;
}

.order-field input,
.order-field select {
  background-color: #111014;
  border-color: #aa947065;
  color: #f6f0e5;
  box-shadow: inset 0 2px 8px #0003;
}

.order-field input:hover,
.order-field select:hover {
  border-color: #d4b578a1;
}

.order-fieldset {
  border-bottom-color: #c49b4b44;
}

.order-step-number {
  background: #221a10;
  border-color: #caa25890;
  color: #efcd82;
}

.order-aside,
.order-review {
  background-color: #111014;
  border-color: #c7a05d68;
  box-shadow: inset 0 1px #f0d08d17, 0 10px 24px #0004;
}

.payment-option,
.payment-copy-row,
.payment-details {
  background: #111014;
  border-color: #b096625f;
}

.payment-option:has(input:checked) {
  background: #241d12;
  border-color: #efd28a;
}

.site-footer {
  background: linear-gradient(125deg, #110c10, #09090c 60%, #16110b);
  border-top-color: #c89f5559;
}

dialog {
  background: #111014;
  border-color: #e0bb718a;
  box-shadow: 0 25px 90px #000c, inset 0 1px #f4d6951c;
}

dialog::backdrop {
  background: #040307df;
}

@media (hover: hover) and (pointer: fine) {
  .header-order:hover,
  .button-ghost:hover,
  .mini-add:hover,
  .payment-copy:hover {
    border-color: #f1d18d;
    box-shadow: inset 0 1px #ffe8b021, 0 0 18px #d6a64718;
  }
  .mini-add:hover {
    background: linear-gradient(115deg, #ba8b3b, #f3d58e);
    color: #151007;
  }
}

@media (max-width: 800px) {
  .main-nav {
    background: #111014;
    border-bottom-color: #d4ac645e;
  }
  .hero-stage::after {
    right: 12px;
    top: 38px;
    font-size: 21px;
  }
  .hero-stage::before {
    box-shadow: 0 0 0 11px #cda55008, 0 0 0 12px #dbb5611b, inset 0 0 50px #99122124;
  }
}

@media (max-width: 580px) {
  .hero {
    background-image:
      radial-gradient(ellipse at 73% 73%, #a524393a, transparent 40%),
      linear-gradient(180deg, #08090be0 0%, #08090bbc 44%, #08090b32 67%, #08090b7d 100%),
      var(--drill-art);
    background-size: 100% 100%, 100% 100%, auto 760px;
    background-position: center, center, 74% bottom;
    background-repeat: no-repeat;
  }
  .hero::before {
    inset: 17px;
    background-size: 28px 1px, 1px 28px, 28px 1px, 1px 28px;
  }
  .hero-copy {
    background: transparent;
  }
  .hero-noise {
    opacity: .22;
    -webkit-mask-image: linear-gradient(180deg, transparent 34%, #000 67%);
    mask-image: linear-gradient(180deg, transparent 34%, #000 67%);
  }
  .hero-stage::before {
    border-color: #dfb66b5c;
  }
  .hero-product-card {
    background: linear-gradient(130deg, #23181b, #0d0a10 55%, #1c1710);
  }
  .product-art-wrap::before {
    inset: 10px;
  }
  .product-art-wrap::after {
    bottom: 31px;
    left: 12%;
    right: 12%;
  }
  .drop-stamp {
    opacity: .12;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}