/* NOIR homepage v2: volcanic ash canvas with editorial paper sheets. */
.noir-home--ash-paper {
  background:
    radial-gradient(circle at 14% 18%,#59605216 0 1px,transparent 1.5px) 0 0/19px 19px,
    radial-gradient(circle at 78% 64%,#00000020 0 1px,transparent 1.5px) 0 0/23px 23px,
    linear-gradient(145deg,#20231f 0%,#191c19 48%,#22251f 100%);
}
.noir-home--ash-paper > section { position: relative; }

/* Product sheet */
.noir-home--ash-paper .noir-collection {
  width: min(1380px,calc(100% - 48px));
  margin: 72px auto 108px;
  padding-block: 98px 62px;
  overflow: visible;
  border: 1px solid #fff8e8;
  border-radius: 2px;
  background:
    linear-gradient(90deg,#6f5b4020 0 1px,transparent 1px) 42px 0/310px 100%,
    linear-gradient(178deg,#f1ede3,#e9e3d7 72%,#e5ded0);
  color: #30362d;
  --noir-dim: #61685c;
  box-shadow: 0 36px 90px #080a0838,10px 12px 0 #a9a08f24;
  clip-path: polygon(.15% .3%,34% 0,67% .18%,99.85% 0,100% 99.55%,72% 99.85%,39% 99.7%,0 100%);
}
.noir-home--ash-paper .noir-products { gap: 0; border-block: 1px solid #3b413824; }
.noir-home--ash-paper .noir-product {
  padding: 22px 24px 17px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.noir-home--ash-paper .noir-product + .noir-product { border-left: 1px solid #3b413824; }
.noir-home--ash-paper .noir-product:hover { box-shadow: none; transform: translateY(-3px); }
.noir-home--ash-paper .noir-product__image {
  border: 1px solid #2d322b2b;
  border-radius: 2px;
  box-shadow: 0 12px 28px #3c302018;
}
.noir-home--ash-paper .noir-product__copy { padding: 24px 3px 13px; }
.noir-home--ash-paper .noir-product__detail {
  padding-inline: 5px;
  border-bottom: 1px solid #343a3155;
  border-radius: 0;
  background: transparent;
}
.noir-home--ash-paper .noir-product__detail:hover { border-bottom-color: #343a31; background: transparent; }
.noir-home--ash-paper .noir-collection__bottom {
  margin-top: 0;
  padding: 31px 3px 0;
  border-radius: 0;
  background: transparent;
}

/* Dark editorial pause */
.noir-home--ash-paper .noir-ritual { padding-block: 20px 88px; }
.noir-home--ash-paper .noir-ritual__image {
  width: calc(100% + 96px);
  margin-left: -48px;
  border: 1px solid #f5f0e51f;
  border-radius: 2px;
  box-shadow: 0 32px 70px #090b0945;
}
.noir-home--ash-paper .noir-ritual__afterword { padding-inline: 42px 8px; }

/* Serving notes */
.noir-home--ash-paper .noir-howto {
  z-index: 1;
  width: min(1180px,calc(100% - 80px));
  margin: 0 auto 118px;
  padding-block: 88px;
  background: transparent;
  color: #30362d;
  --noir-dim: #606955;
}
.noir-home--ash-paper .noir-howto::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid #f7f1e5;
  background:
    linear-gradient(112deg,transparent 0 62%,#77654b12 62.1% 62.25%,transparent 62.35%),
    #ded7ca;
  box-shadow: 0 34px 85px #080a083b,-13px 10px 0 #a79c8820;
  transform: rotate(-.38deg);
  clip-path: polygon(.25% .2%,49% 0,99.7% .45%,100% 99.5%,52% 100%,0 99.7%);
}
.noir-home--ash-paper .noir-howto__inner { position: relative; z-index: 1; width: calc(100% - 104px); }
.noir-home--ash-paper .noir-howto__image { width: 108%; margin-left: -14%; transform: rotate(-1.2deg); }
.noir-home--ash-paper .noir-howto__image img {
  border: 9px solid #eee8dc;
  border-radius: 1px;
  box-shadow: 0 22px 42px #3b31242c;
}
.noir-home--ash-paper .noir-howto__image figcaption { padding-left: 9px; text-align: left; }

/* Store remains on ash; keep the information sheet clear of the photograph. */
.noir-home--ash-paper .noir-store { padding-block: 18px 128px; }
.noir-home--ash-paper .noir-store__layout { grid-template-columns: 1.38fr .82fr; column-gap: clamp(32px,5vw,72px); }
.noir-home--ash-paper .noir-store__photo { border-radius: 2px; box-shadow: 0 30px 65px #090b0945; }
.noir-home--ash-paper .noir-store__card {
  z-index: 2;
  margin-left: 0;
  padding: 46px;
  border: 1px solid #fff8e9;
  border-radius: 2px;
  background: #eee7d9;
  box-shadow: 16px 20px 45px #080a0847;
  transform: rotate(.55deg);
}

/* Brand story */
.noir-home--ash-paper .noir-origin {
  width: min(1120px,calc(100% - 80px));
  margin: 0 max(40px,calc((100% - 1240px)/2)) 116px auto;
  padding-block: 82px;
  border: 1px solid #f4efe3;
  background:
    radial-gradient(circle at 88% 14%,#7e684815 0 1px,transparent 1.5px) 0 0/18px 18px,
    #e1ded2;
  color: #30362d;
  --noir-dim: #616b58;
  box-shadow: -18px 25px 70px #080a083d;
  clip-path: polygon(0 .45%,42% 0,100% .25%,99.7% 99.6%,58% 100%,.25% 99.65%);
}
.noir-home--ash-paper .noir-origin__inner { width: calc(100% - 104px); gap: clamp(44px,7vw,90px); }
.noir-home--ash-paper .noir-origin__image { width: 112%; margin-right: -18%; }
.noir-home--ash-paper .noir-origin__image > img {
  border: 8px solid #eee9dd;
  border-radius: 1px;
  box-shadow: 0 22px 40px #4036292c;
  transform: rotate(1.1deg);
}

/* News and journal become an uneven editorial spread. */
.noir-home--ash-paper .noir-topics { padding-block: 20px 150px; }
.noir-home--ash-paper .noir-topics__grid { grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: start; }
.noir-home--ash-paper .noir-topic {
  border-block: 1px solid #f5f0e526;
  border-radius: 1px;
  background: transparent;
}
.noir-home--ash-paper .noir-topic:nth-child(2) { margin-top: 74px; }
.noir-home--ash-paper .noir-topic:hover { background: #ffffff05; }
.noir-home--ash-paper .noir-topic > img { border-radius: 1px; }
.noir-home--ash-paper .noir-topic > div { padding-inline: 4px 68px; }

/* Closing photograph and newsletter remain on the continuous canvas. */
.noir-home--ash-paper .noir-closing {
  width: min(1380px,calc(100% - 48px));
  min-height: 500px;
  margin: 0 auto;
  border: 1px solid #f5f0e51f;
  box-shadow: 0 32px 80px #080a0847;
  clip-path: polygon(.2% .35%,44% 0,99.8% .3%,100% 99.7%,57% 100%,0 99.6%);
}
.noir-home--ash-paper .noir-newsletter {
  padding: 104px 24px 112px;
  background: transparent;
  color: #30362d;
  --noir-dim: #656e5c;
}
.noir-home--ash-paper .noir-newsletter__card {
  max-width: 820px;
  padding: 54px 62px 35px;
  border: 1px solid #fff8e9;
  border-radius: 2px;
  background: #eee8dc;
  box-shadow: 12px 18px 0 #8e836f1f,0 35px 80px #080a0842;
  transform: rotate(-.24deg);
}
.noir-home--ash-paper .noir-footer { border-top: 1px solid #f5f0e51a; background: #171a17; }

@media (max-width: 1280px) {
  .noir-home--ash-paper .noir-ritual__image { width: 100%; margin-left: 0; }
}

@media (max-width: 800px) {
  .noir-home--ash-paper .noir-collection { width: calc(100% - 28px); margin-block: 34px 76px; padding-block: 68px 48px; }
  .noir-home--ash-paper .noir-products { gap: 0 18px; border-block: 0; }
  .noir-home--ash-paper .noir-product { padding: 16px 10px 18px; border-block: 1px solid #3b413824; }
  .noir-home--ash-paper .noir-product + .noir-product { border-left: 0; }
  .noir-home--ash-paper .noir-ritual { padding-bottom: 70px; }
  .noir-home--ash-paper .noir-ritual__image { width: 100%; margin-left: 0; }
  .noir-home--ash-paper .noir-ritual__afterword { padding-inline: 0; }
  .noir-home--ash-paper .noir-howto { width: calc(100% - 38px); margin-bottom: 92px; padding-block: 68px; }
  .noir-home--ash-paper .noir-howto__inner { width: calc(100% - 48px); }
  .noir-home--ash-paper .noir-howto__image { width: 94%; margin-inline: auto; }
  .noir-home--ash-paper .noir-store { padding-bottom: 96px; }
  .noir-home--ash-paper .noir-store__layout { grid-template-columns: 1fr; }
  .noir-home--ash-paper .noir-store__card { width: calc(100% - 42px); margin: 24px auto 0; transform: rotate(.3deg); }
  .noir-home--ash-paper .noir-origin { width: calc(100% - 38px); margin: 0 auto 92px; padding-block: 68px; }
  .noir-home--ash-paper .noir-origin__inner { width: calc(100% - 48px); }
  .noir-home--ash-paper .noir-origin__image { width: 94%; margin: 0 0 0 auto; }
  .noir-home--ash-paper .noir-topics { padding-bottom: 108px; }
  .noir-home--ash-paper .noir-topics__grid { gap: 28px; }
  .noir-home--ash-paper .noir-topic:nth-child(2) { margin-top: 46px; }
  .noir-home--ash-paper .noir-closing { width: calc(100% - 28px); min-height: 420px; }
  .noir-home--ash-paper .noir-newsletter { padding-block: 82px 90px; }
}

@media (max-width: 540px) {
  .noir-home--ash-paper .noir-collection { width: calc(100% - 20px); margin-top: 22px; clip-path: none; }
  .noir-home--ash-paper .noir-products { border-top: 1px solid #3b413824; }
  .noir-home--ash-paper .noir-product { padding-inline: 0; }
  .noir-home--ash-paper .noir-product__copy { padding-inline: 3px; }
  .noir-home--ash-paper .noir-howto,
  .noir-home--ash-paper .noir-origin { width: calc(100% - 24px); }
  .noir-home--ash-paper .noir-howto::before { transform: rotate(-.18deg); }
  .noir-home--ash-paper .noir-howto__inner,
  .noir-home--ash-paper .noir-origin__inner { width: calc(100% - 36px); }
  .noir-home--ash-paper .noir-store__card { margin-top: 20px; padding: 31px 25px; }
  .noir-home--ash-paper .noir-topics__grid { grid-template-columns: 1fr; }
  .noir-home--ash-paper .noir-topic:nth-child(2) { margin-top: 12px; }
  .noir-home--ash-paper .noir-closing { width: 100%; min-height: 410px; clip-path: none; }
  .noir-home--ash-paper .noir-newsletter { padding-inline: 20px; }
  .noir-home--ash-paper .noir-newsletter__card { padding: 40px 22px 25px; }
}

/* Continuous canvas: ivory is an object on ash, never a full section band. */
.noir-home--ash-paper .noir-collection {
  width: 100%;
  margin: 0;
  padding-block: 112px 126px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f5f0e5;
  --noir-dim: #bdbbb0;
  box-shadow: none;
  clip-path: none;
}
.noir-home--ash-paper .noir-products { gap: 28px; border: 0; }
.noir-home--ash-paper .noir-product {
  padding: 10px;
  border: 1px solid #fff8e9;
  border-radius: 2px;
  background: linear-gradient(177deg,#f1ede4,#e8e1d4);
  color: #30362d;
  box-shadow: 9px 12px 0 #8c806b1f,0 24px 55px #080a083d;
}
.noir-home--ash-paper .noir-product + .noir-product { border-left: 1px solid #fff8e9; }
.noir-home--ash-paper .noir-product:hover { box-shadow: 11px 15px 0 #8c806b24,0 30px 65px #080a0847; }
.noir-home--ash-paper .noir-product__copy { padding: 24px 13px 14px; }
.noir-home--ash-paper .noir-collection__bottom {
  margin-top: 52px;
  padding: 28px 0 0;
  border-top: 1px solid #f5f0e528;
}
.noir-home--ash-paper .noir-collection__bottom > p { color: #c6c3b8; }

.noir-home--ash-paper .noir-howto {
  width: 100%;
  margin: 0;
  padding-block: 112px 132px;
  color: #f5f0e5;
  --noir-dim: #c6c3b8;
}
.noir-home--ash-paper .noir-howto::before { display: none; }
.noir-home--ash-paper .noir-howto__inner { width: min(1200px,calc(100% - 112px)); }
.noir-home--ash-paper .noir-howto__image { width: 108%; margin-left: -14%; }
.noir-home--ash-paper .noir-howto__image figcaption { color: #bdbbb0; }
.noir-home--ash-paper .noir-howto__copy {
  padding: 52px 50px;
  border: 1px solid #fff8e9;
  background: #e5ded1;
  color: #30362d;
  --noir-dim: #606955;
  box-shadow: 14px 18px 0 #8e836f1f,0 30px 70px #080a0842;
  transform: rotate(.35deg);
}

.noir-home--ash-paper .noir-origin {
  width: 100%;
  margin: 0;
  padding-block: 118px 132px;
  border: 0;
  background: transparent;
  color: #f5f0e5;
  --noir-dim: #c6c3b8;
  box-shadow: none;
  clip-path: none;
}
.noir-home--ash-paper .noir-origin__inner { width: min(1200px,calc(100% - 112px)); }
.noir-home--ash-paper .noir-origin__image { width: 105%; margin-right: -8%; }
.noir-home--ash-paper .noir-origin__image figcaption { color: #bdbbb0; }

@media (max-width: 1100px) {
  .noir-home--ash-paper .noir-howto__inner,
  .noir-home--ash-paper .noir-origin__inner { width: calc(100% - 72px); }
  .noir-home--ash-paper .noir-howto__image { width: 100%; margin-left: 0; }
  .noir-home--ash-paper .noir-origin__image { width: 100%; margin-right: 0; }
}

@media (max-width: 800px) {
  .noir-home--ash-paper .noir-collection { width: 100%; margin: 0; padding-block: 86px 96px; }
  .noir-home--ash-paper .noir-products { gap: 22px 18px; }
  .noir-home--ash-paper .noir-product { padding: 9px; border-block: 1px solid #fff8e9; }
  .noir-home--ash-paper .noir-howto { width: 100%; margin: 0; padding-block: 92px 106px; }
  .noir-home--ash-paper .noir-howto__inner,
  .noir-home--ash-paper .noir-origin__inner { width: calc(100% - 48px); }
  .noir-home--ash-paper .noir-howto__copy { padding: 42px 38px; }
  .noir-home--ash-paper .noir-origin { width: 100%; margin: 0; padding-block: 92px 106px; }
}

@media (max-width: 540px) {
  .noir-home--ash-paper .noir-collection { width: 100%; margin: 0; padding-block: 74px 88px; }
  .noir-home--ash-paper .noir-product { padding-inline: 9px; }
  .noir-home--ash-paper .noir-product__copy { padding-inline: 12px; }
  .noir-home--ash-paper .noir-howto,
  .noir-home--ash-paper .noir-origin { width: 100%; }
  .noir-home--ash-paper .noir-howto__inner,
  .noir-home--ash-paper .noir-origin__inner { width: calc(100% - 40px); }
  .noir-home--ash-paper .noir-howto__copy { padding: 35px 27px; }
}

/* The story photographs feel like aged darkroom prints, not clean digital cards. */
.noir-home--ash-paper :is(.noir-howto__image,.noir-origin__image) {
  position: relative;
  isolation: isolate;
}
.noir-home--ash-paper :is(.noir-howto__image,.noir-origin__image) img {
  border-color: #d8ccb7;
  border-style: solid;
  border-width: 11px 10px 16px;
  background: #cfc1aa;
  box-shadow:
    0 1px 0 #fff8e2aa inset,
    0 0 0 1px #6d5b4138,
    3px 7px 0 #4b3e2c1c,
    0 24px 48px #05060570;
  clip-path: polygon(.3% .15%,36% 0,68% .25%,99.75% .1%,100% 99.65%,62% 99.9%,.15% 99.7%);
}
.noir-home--ash-paper .noir-howto__image img {
  filter: sepia(.25) saturate(.68) contrast(.88) brightness(.92);
}
.noir-home--ash-paper .noir-origin__image > img {
  filter: sepia(.3) saturate(.46) contrast(.92) brightness(.84);
}
.noir-home--ash-paper :is(.noir-howto__image,.noir-origin__image)::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 11px;
  right: 10px;
  left: 10px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,transparent 46%,#38271832 100%),
    radial-gradient(circle at 18% 16%,#ffe6b62b 0 8%,transparent 29%),
    repeating-radial-gradient(circle at 31% 27%,#fff3d70a 0 1px,#2d211509 1px 2px,transparent 2px 4px),
    linear-gradient(103deg,#f7dba016,transparent 34% 73%,#25170f1f);
  mix-blend-mode: soft-light;
  opacity: .82;
}
.noir-home--ash-paper .noir-howto__image::before { aspect-ratio: 1.03; }
.noir-home--ash-paper .noir-origin__image::before {
  aspect-ratio: 1.06;
  transform: rotate(1.1deg);
}
.noir-home--ash-paper :is(.noir-howto__image,.noir-origin__image) figcaption {
  position: relative;
  z-index: 3;
  color: #aaa79d;
  letter-spacing: .08em;
}

@media (max-width: 540px) {
  .noir-home--ash-paper :is(.noir-howto__image,.noir-origin__image) img {
    border-width: 8px 7px 12px;
  }
  .noir-home--ash-paper :is(.noir-howto__image,.noir-origin__image)::before {
    top: 8px;
    right: 7px;
    left: 7px;
  }
}