/* Homepage direction: clean scrapbook magazine. Scoped to the homepage only. */
.home-clean-editorial {
  --paper: #fff;
  --milk: #fff;
  --ink: #111;
  --accent-yellow: #f2ce4d;
  --accent-red: #df4b38;
  --soft-grey: #f5f5f2;
  background: #fff !important;
  color: var(--ink);
}

.home-clean-editorial .paper-noise { display: none; }

.home-clean-editorial .header {
  height: 78px;
  padding: 0 clamp(22px, 4vw, 72px);
  grid-template-columns: 1fr auto;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid #111;
  backdrop-filter: blur(12px);
}

.home-text-wordmark {
  justify-self: start;
  font: 500 clamp(19px, 2vw, 28px)/1 var(--serif);
  letter-spacing: -.025em;
}

.home-clean-editorial .header nav {
  gap: clamp(16px, 2.1vw, 34px);
  font-size: 9px;
}

.home-clean-editorial .header nav a { padding: 31px 0 27px; }
.home-clean-editorial .header nav a::after { bottom: 21px; }

.home-clean-editorial .hero-home {
  display: grid;
  grid-template-columns: minmax(340px, .78fr) minmax(520px, 1.22fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(36px, 6vw, 110px);
  padding: clamp(40px, 6vw, 95px) clamp(22px, 4vw, 72px) 0;
  max-width: 1600px;
  margin: 0 auto;
}

.home-clean-editorial .hero-wordmark {
  grid-column: 1;
  grid-row: 1;
  height: auto;
  min-height: 0;
  display: block;
  padding-top: clamp(18px, 4vw, 70px);
}

.home-clean-editorial .hero-kicker {
  display: block;
  margin-bottom: 34px;
  font: 9px/1.4 var(--mono);
  letter-spacing: .16em;
}

.home-clean-editorial .hero-wordmark h1 {
  margin: 0;
  max-width: 720px;
  font: 800 clamp(62px, 7vw, 118px)/.86 var(--sans);
  letter-spacing: -.075em;
}

.home-clean-editorial .hero-collage.editorial-collage {
  grid-column: 2;
  grid-row: 1 / span 2;
  height: clamp(660px, 67vw, 900px);
  min-height: 660px;
  background: #fff;
  border: 0;
  overflow: visible;
}

.home-clean-editorial .editorial-collage::before { display: none; }
.home-clean-editorial .editorial-collage .collage-piece {
  border: 8px solid #fff;
  border-radius: 0;
  box-shadow: 0 10px 22px rgba(17,17,17,.12);
  filter: none;
}

.home-clean-editorial .piece-childhood {
  left: 25%;
  top: 6%;
  bottom: auto;
  width: 46%;
  height: 89%;
  z-index: 5;
  object-fit: contain;
  object-position: center bottom;
  border: 0 !important;
  box-shadow: none !important;
  transform: none;
}

.home-clean-editorial .piece-journal {
  right: 1%;
  top: 0;
  width: 43%;
  height: 53%;
  z-index: 2;
  object-position: center;
  transform: rotate(1deg);
}

.home-clean-editorial .piece-poster {
  left: auto;
  right: -1%;
  top: auto;
  bottom: 2%;
  width: 40%;
  height: 38% !important;
  z-index: 6;
  object-fit: cover !important;
  transform: rotate(2deg);
}

.home-clean-editorial .piece-archive {
  left: 0;
  top: auto;
  bottom: 5%;
  width: 34%;
  height: 31%;
  z-index: 6;
  object-fit: cover;
  transform: rotate(-2deg);
}

.home-clean-editorial .editorial-collage .edition {
  left: auto;
  right: 1%;
  top: 56%;
  z-index: 8;
  padding: 8px 10px;
  background: #fff;
  border-top: 1px solid;
}

.home-clean-editorial .editorial-word {
  left: 1%;
  bottom: auto;
  top: 6%;
  z-index: 7;
  font: 700 clamp(22px, 2.4vw, 38px)/.9 var(--sans);
  letter-spacing: -.055em;
  color: #111;
  mix-blend-mode: normal;
}

.home-clean-editorial .editorial-word i { color: #111; font-style: normal; }
.home-clean-editorial .editorial-collage .scribble-a {
  right: auto;
  left: 1%;
  bottom: 39%;
  z-index: 8;
  max-width: 150px;
  padding: 0;
  background: transparent;
  color: #111;
  font-size: 18px;
  transform: rotate(-7deg);
}

.home-clean-editorial .hero-intro {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  align-content: end;
  gap: 26px;
  padding: 50px 0 86px;
}

.home-clean-editorial .hero-intro > p {
  max-width: 620px;
  font: 400 clamp(22px, 2.1vw, 34px)/1.24 var(--serif);
}

.home-clean-editorial .hero-intro .text-link { justify-self: start; }

.home-clean-editorial .marquee {
  width: 100%;
  padding: 15px 0;
  background: #fff !important;
  color: #111 !important;
  border-top: 1px solid;
  border-bottom: 1px solid;
  transform: none;
  animation: none;
  overflow: hidden;
}

.home-clean-editorial .remedies,
.home-clean-editorial .latest {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(96px, 10vw, 160px) clamp(22px, 4vw, 72px);
  background: #fff;
}

.home-clean-editorial .section-label {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 9px;
}

.home-clean-editorial .section-label::after {
  content: "";
  flex: 1;
  border-top: 1px solid #111;
}

.home-clean-editorial .display {
  margin: 48px 0 84px;
  font: 800 clamp(64px, 8.8vw, 136px)/.86 var(--sans);
  letter-spacing: -.07em;
}

.home-clean-editorial .display em {
  color: #111 !important;
  font-style: normal;
  font-weight: 800;
}

.home-clean-editorial .remedy-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
}

.home-clean-editorial .remedy-card,
.home-clean-editorial .remedy-card.blush,
.home-clean-editorial .remedy-card.butter,
.home-clean-editorial .remedy-card.blue {
  min-height: 570px;
  padding: 0 0 48px;
  background: #fff;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
  border-radius: 0;
}

.home-clean-editorial .remedy-card:hover { transform: translateY(-5px); }
.home-clean-editorial .remedy-card > span { display: block; padding-top: 13px; }
.home-clean-editorial .remedy-card .card-image {
  height: clamp(270px, 28vw, 420px);
  margin: 18px 0 30px;
  clip-path: none;
  overflow: hidden;
}
.home-clean-editorial .remedy-card .card-image img { filter: none; }
.home-clean-editorial .remedy-card h3 {
  margin: 0 0 10px;
  font: 700 clamp(28px, 2.7vw, 42px)/1 var(--sans);
  letter-spacing: -.045em;
}
.home-clean-editorial .remedy-card p { font: 400 16px/1.5 var(--serif); text-transform: none; }
.home-clean-editorial .remedy-card > b { right: 0; bottom: 18px; }

.home-clean-editorial .latest { border-top: 1px solid #111; }
.home-clean-editorial .latest-head { align-items: center; }
.home-clean-editorial .latest-head .display { margin-bottom: 74px; }
.home-clean-editorial .journal-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
}
.home-clean-editorial .journal-list { display: contents; }
.home-clean-editorial .journal-feature,
.home-clean-editorial .journal-list a {
  display: block;
  padding: 0 0 28px;
  border: 0;
  border-bottom: 1px solid #111;
}
.home-clean-editorial .journal-feature .journal-img,
.home-clean-editorial .journal-thumb {
  height: clamp(220px, 20vw, 330px);
  margin: 0 0 22px;
  overflow: hidden;
}
.home-clean-editorial .journal-feature img,
.home-clean-editorial .journal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}
.home-clean-editorial .journal-feature h3,
.home-clean-editorial .journal-list h3 {
  margin: 14px 0 10px;
  font: 600 clamp(22px, 2vw, 32px)/1.07 var(--serif);
  letter-spacing: -.025em;
}
.home-clean-editorial .journal-feature p { margin: 0; font: 15px/1.55 var(--serif); }
.home-clean-editorial .journal-list b { display: inline-block; margin-top: 18px; font-size: 18px; }

.home-clean-editorial .testimonial {
  min-height: 520px;
  padding: clamp(80px, 9vw, 145px) 12vw;
  background: #fff;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
}
.home-clean-editorial .giant-quote { height: 76px; color: var(--accent-red) !important; }
.home-clean-editorial .testimonial blockquote {
  max-width: 1050px;
  font: 400 clamp(36px, 5vw, 72px)/1.04 var(--serif);
}

.home-clean-editorial .newsletter {
  padding: clamp(80px, 9vw, 140px) clamp(22px, 5vw, 90px);
  background: #fff;
  border-bottom: 1px solid #111;
}
.home-clean-editorial .newsletter h2 {
  font: 800 clamp(50px, 6vw, 94px)/.88 var(--sans);
  letter-spacing: -.065em;
}
.home-clean-editorial .newsletter form > div { border-bottom-color: #111; }
.home-clean-editorial .newsletter button { background: #111; color: #fff; padding: 0 22px; }

.home-clean-editorial footer {
  background: #fff;
  color: #111;
  border-top: 0;
}
.home-clean-editorial .footer-text-wordmark {
  width: auto;
  height: auto;
  font: 500 clamp(34px, 4vw, 58px)/.86 var(--serif);
  letter-spacing: -.04em;
}
.home-clean-editorial footer p { font-family: var(--serif); }
.home-clean-editorial .footer-bottom { border-top-color: rgba(17,17,17,.25); }

@media (max-width: 980px) {
  .home-clean-editorial .hero-home {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .home-clean-editorial .hero-wordmark { grid-column: 1; grid-row: 1; }
  .home-clean-editorial .hero-collage.editorial-collage {
    grid-column: 1;
    grid-row: 2;
    height: min(112vw, 800px);
    min-height: 620px;
    margin-top: 42px;
  }
  .home-clean-editorial .hero-intro { grid-column: 1; grid-row: 3; padding-top: 62px; }
  .home-clean-editorial .journal-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .home-clean-editorial .header { height: 70px; grid-template-columns: 1fr auto; }
  .home-clean-editorial .header nav { background: #fff; }
  .home-clean-editorial .hero-wordmark h1 { font-size: clamp(58px, 15vw, 105px); }
  .home-clean-editorial .remedy-grid { grid-template-columns: 1fr; }
  .home-clean-editorial .remedy-card { min-height: 0; }
  .home-clean-editorial .remedy-card .card-image { height: min(88vw, 560px); }
}

@media (max-width: 560px) {
  .home-clean-editorial .home-text-wordmark { font-size: 18px; }
  .home-clean-editorial .hero-home { padding-top: 28px; }
  .home-clean-editorial .hero-kicker { margin-bottom: 24px; }
  .home-clean-editorial .hero-wordmark h1 { font-size: 15.5vw; }
  .home-clean-editorial .hero-collage.editorial-collage {
    height: 126vw;
    min-height: 510px;
  }
  .home-clean-editorial .piece-childhood { left: 19%; width: 57%; }
  .home-clean-editorial .piece-journal { width: 50%; height: 45%; }
  .home-clean-editorial .piece-poster { width: 48%; height: 34% !important; }
  .home-clean-editorial .piece-archive { width: 39%; height: 27%; }
  .home-clean-editorial .editorial-collage .edition { top: 50%; }
  .home-clean-editorial .editorial-collage .scribble-a { bottom: 35%; font-size: 15px; }
  .home-clean-editorial .hero-intro > p { font-size: 26px; }
  .home-clean-editorial .display { font-size: 15vw; }
  .home-clean-editorial .latest-head { display: block; }
  .home-clean-editorial .latest-head .text-link { display: inline-block; margin-bottom: 50px; }
  .home-clean-editorial .journal-row { grid-template-columns: 1fr; }
  .home-clean-editorial .journal-feature .journal-img,
  .home-clean-editorial .journal-thumb { height: 82vw; }
  .home-clean-editorial .newsletter { grid-template-columns: 1fr; }
  .home-clean-editorial .newsletter button { padding: 0 14px; }
}