/* CCS selected design: a distinct pattern for each Art / Nature / Science row.
   Load after the site's stylesheet, and add data-craft-patterns="distinct"
   to #craft .craft-rows. Remove the previous data-craft-background attribute. */
#craft .craft-rows[data-craft-patterns="distinct"] {
  --ccs-pattern-colour: #bec5ab;
  --ccs-art-strength: .18;
  --ccs-nature-strength: .14;
  --ccs-science-strength: .2;
  background: #0f1a12;
}
#craft .craft-rows[data-craft-patterns="distinct"]::before,
#craft .craft-rows[data-craft-patterns="distinct"]::after { content: none; }
#craft .craft-rows[data-craft-patterns="distinct"] > .craft-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 100% 40%, rgba(78,104,68,.11), transparent 68%);
}
#craft .craft-rows[data-craft-patterns="distinct"] > .craft-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--ccs-pattern-colour);
  background-image: none;
  transform: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: right center;
  mask-position: right center;
  /* CCS 2026-11-04: scale with the viewport above 1440px so the artwork keeps its share of the row
     on large screens (1040px at 1440 and below, then 68vw; height follows the 1040:390 ratio). */
  -webkit-mask-size: max(1040px, 68vw) auto;
  mask-size: max(1040px, 68vw) auto;
}
#craft .craft-rows[data-craft-patterns="distinct"] > .craft-row > .cr-grid {
  position: relative;
  z-index: 1;
}
#craft .craft-rows[data-craft-patterns="distinct"] > .cr-art::before {
  -webkit-mask-image: url("assets/art-flow.svg");
  mask-image: url("assets/art-flow.svg");
  opacity: var(--ccs-art-strength);
}
#craft .craft-rows[data-craft-patterns="distinct"] > .cr-nature {
  background: radial-gradient(ellipse at 0% 50%, rgba(78,104,68,.13), transparent 68%);
}
#craft .craft-rows[data-craft-patterns="distinct"] > .cr-nature::before {
  -webkit-mask-image: url("assets/nature-botanical.svg");
  mask-image: url("assets/nature-botanical.svg");
  -webkit-mask-position: left center;
  mask-position: left center;
  opacity: var(--ccs-nature-strength);
}
#craft .craft-rows[data-craft-patterns="distinct"] > .cr-science::before {
  -webkit-mask-image: url("assets/science-lattice.svg");
  mask-image: url("assets/science-lattice.svg");
  opacity: var(--ccs-science-strength);
}
/* A smaller, quieter crop on phones. Keep all three identities visible. */
@media (max-width:760px) {
  #craft .craft-rows[data-craft-patterns="distinct"] > .craft-row::before {
    -webkit-mask-size: 780px 292.5px;
    mask-size: 780px 292.5px;
  }
  #craft .craft-rows[data-craft-patterns="distinct"] > .cr-art::before { opacity: calc(var(--ccs-art-strength) * .7); }
  #craft .craft-rows[data-craft-patterns="distinct"] > .cr-nature::before { opacity: calc(var(--ccs-nature-strength) * .7); }
  #craft .craft-rows[data-craft-patterns="distinct"] > .cr-science::before { opacity: calc(var(--ccs-science-strength) * .7); }
}