/* The index page at /, meant to be the home page, and the 404 page: navy type on white. */
.v-review {
  --site-ground: var(--color-neutral-white);
  --site-ink: var(--color-navy-900);
  font-family: Poppins, var(--font-family-sans);
}

.review {
  --gutter-x: clamp(16px, 4vw, 48px);
  max-width: var(--site-frame);
  margin: 0 auto;
  padding: 120px var(--gutter-x) 40px;
}

.review-head {
  max-width: 760px;
  margin-bottom: 48px;
}

.review-kicker {
  color: var(--color-orange-600);
  font-weight: 600;
  margin-bottom: 10px;
}

.review-head h1 {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem);
  line-height: 1.02;
  margin-bottom: 18px;
}

.review-head p:last-child {
  color: var(--text-default);
  font-size: 1.1rem;
  max-width: 60ch;
}

.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choice {
  display: grid;
  align-content: start;
  gap: 12px;
}

.choice-link {
  display: grid;
  gap: 14px;
  text-decoration: none;
  border-radius: var(--radius-xl);
}

.choice-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 50px -24px rgb(8 40 88 / 0.45);
  transition: transform var(--motion-duration-base) var(--motion-easing-out);
}

.choice-link:hover .choice-thumb {
  transform: translateY(-4px);
}

.choice-title {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-size: 1.9rem;
  line-height: 1.1;
}

.choice-link:hover .choice-title {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.choice-text {
  display: grid;
  align-content: start;
  gap: 12px;
}

.choice-summary {
  color: var(--text-default);
}

.choice-go {
  justify-self: start;
  margin-top: 6px;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  background: var(--color-navy-900);
  color: var(--color-neutral-white);
  font-weight: 600;
}

/* One story: the picture and its words side by side. */
@media (min-width: 860px) {
  .choice:only-child .choice-link {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: clamp(32px, 4vw, 64px);
  }

  .choice:only-child .choice-title {
    font-size: clamp(2.2rem, 1.2rem + 1.8vw, 3rem);
  }

  .choice:only-child .choice-summary {
    font-size: 1.1rem;
  }
}

.choice-hold {
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--color-gold-100);
  color: var(--color-gold-700);
  font-size: var(--font-size-sm);
}

/* What we do today. Each website is a piece of cloth in its own colour, the navy tint for Daylong Direct and
   the orange tint for Daylong Shop. The pieces run to the edges of the screen and have pinked edges, and One
   Thread's navy thread sews them together down the middle; with motion, a needle sews the seam as the page
   scrolls. Objects from One Thread lie on the cloth either side of the seam. */
.onward {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10h12M11 5.5l4.5 4.5-4.5 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.09'/%3E%3C/svg%3E");
  /* From the edge of the page frame's content to the edge of the screen, so the cloth reaches the screen
     edge and no further. 100vw counts a classic scrollbar, so it can overshoot by that much, which body clips. */
  --to-edge: calc(max(0px, (100vw - var(--site-frame)) / 2) + var(--gutter-x));
  --seam-gap: clamp(32px, 4.4vw, 72px);
  --tooth: 16px;
  --still-width: clamp(150px, 44vw, 210px);
  --still-lift: -48%;
  margin-block: clamp(48px, 6vw, 88px) 0;
}

.onward-head {
  max-width: 720px;
  margin: 0 auto clamp(132px, 13vw, 176px);
  text-align: center;
}

.onward-head h2 {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem);
  line-height: 1.04;
  margin-bottom: 16px;
}

.onward-head p {
  max-width: 60ch;
  margin-inline: auto;
  color: var(--text-default);
  font-size: 1.1rem;
}

.cloth {
  position: relative;
  isolation: isolate;
  display: grid;
}

.piece {
  --pink-x: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.4vw, 44px);
  padding-block: clamp(84px, 8vw, 112px) clamp(72px, 6vw, 88px);
  color: var(--color-neutral-ink);
}

.piece-direct {
  --cloth: var(--color-navy-100);
  --weave: rgb(8 40 88 / 0.04);
  --warp: rgb(8 40 88 / 0.022);
  --rule: rgb(8 40 88 / 0.2);
  --accent: var(--color-navy-900);
  --go: var(--color-navy-900);
  --go-hover: var(--color-navy-800);
}

/* On the orange tint, orange 700 holds 6.4:1 for text; the button keeps the header's orange 600 (white 5.3:1). */
.piece-shop {
  --cloth: var(--color-orange-100);
  --weave: rgb(114 38 0 / 0.04);
  --warp: rgb(114 38 0 / 0.022);
  --rule: rgb(114 38 0 / 0.2);
  --accent: var(--color-orange-700);
  --go: var(--action-primary);
  --go-hover: var(--action-primary-hover);
  --still-lift: -34%;
}

/* The cloth: grain and a fine weave over the piece's colour, pinked where it is cut and plain where it is
   sewn. It reaches the edges of the screen. On a phone the pieces stack and the seam runs across between
   them; side by side, it runs down the middle and the pinking starts from the seam. */
.piece::before {
  --pinked-top: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) var(--pink-x) 0 / var(--tooth) 51% repeat-x;
  --pinked-bottom: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) var(--pink-x) 100% / var(--tooth) 51% repeat-x;
  --plain-top: linear-gradient(#000 0 0) 0 0 / 100% 51% no-repeat;
  --plain-bottom: linear-gradient(#000 0 0) 0 100% / 100% 51% no-repeat;
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 calc(var(--to-edge) * -1);
  background:
    var(--grain),
    repeating-linear-gradient(0deg, var(--weave) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--warp) 0 1px, transparent 1px 4px),
    var(--cloth);
  -webkit-mask: var(--pinking);
  mask: var(--pinking);
}

.piece-direct::before {
  --pinking: var(--pinked-top), var(--plain-bottom);
}

.piece-shop::before {
  --pinking: var(--plain-top), var(--pinked-bottom);
}

/* The seam, along the edge of the Daylong Shop piece where it meets Daylong Direct. */
.seam {
  position: absolute;
  z-index: 1;
  inset: -1.5px 0 auto;
  height: 3px;
}

.seam::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--color-navy-900) 0 12px, transparent 12px 21px);
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.6));
}

.seam-track {
  display: none;
}

/* Objects lying on the cloth, rising over its top edge. */
.still {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: var(--still-width);
  aspect-ratio: 1.3;
  translate: 0 var(--still-lift);
  pointer-events: none;
}

.still img {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 16px 14px rgb(0 0 0 / 0.22));
}

.still-back {
  top: 2%;
  left: 0;
  width: 60%;
  rotate: -10deg;
}

.still-front {
  right: 0;
  bottom: 0;
  width: 72%;
  rotate: 6deg;
}

.piece-shop .still-back {
  top: 8%;
  width: 54%;
  rotate: -16deg;
}

.piece-shop .still-front {
  right: 6%;
  width: 52%;
  rotate: 9deg;
}

.piece-head {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.piece-title img {
  width: auto;
  height: clamp(44px, 4.2vw, 62px);
}

.piece-for {
  max-width: 22ch;
  color: var(--accent);
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.95rem);
  line-height: 1.15;
  text-wrap: balance;
}

.piece-part h4 {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.3;
}

.piece-part > p {
  max-width: 54ch;
  color: var(--color-neutral-muted);
}

/* Ruled lists of links, a rule above each row: one column, or two where there is room. */
.piece-links,
.piece-brands,
.piece-chips {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.piece-links-split {
  display: grid;
  column-gap: clamp(20px, 2.4vw, 32px);
}

@media (min-width: 560px) {
  .piece-links-split {
    grid-template-columns: 1fr 1fr;
  }
}

.piece-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.piece-brands li {
  padding: 14px 0 18px;
  border-top: 1px solid var(--rule);
}

.piece-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--accent);
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-size: 1.7rem;
  line-height: 1.1;
  text-decoration: none;
}

.piece-brands p {
  max-width: 54ch;
  color: var(--color-neutral-muted);
}

/* Brands as a row of outlined links that wraps. */
.piece-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.piece-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.5);
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-out), color var(--motion-duration-fast) var(--motion-easing-out);
}

.piece-chips a:hover {
  background: var(--go);
  border-color: var(--go);
  color: var(--color-neutral-white);
}

/* The way on to each website, in the colour of its button in the header. */
.piece-go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: auto;
  min-height: 52px;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  background: var(--go);
  color: var(--color-neutral-white);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-out);
}

.piece-go:hover {
  background: var(--go-hover);
}

.piece-links a::after,
.piece-brand::after,
.piece-go::after {
  content: '';
  flex: none;
  width: 1.1em;
  height: 1.1em;
  background: var(--accent);
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  transition: translate var(--motion-duration-base) var(--motion-easing-out);
}

.piece-brand::after {
  width: 0.7em;
  height: 0.7em;
}

.piece-go::after {
  background: currentColor;
}

.piece-links a:hover,
.piece-brand:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.piece-links a:hover::after,
.piece-brand:hover::after,
.piece-go:hover::after {
  translate: 4px 0;
}

/* Side by side: the seam runs down the middle, the objects lie either side of it, and the content keeps to
   the page frame on the outer side and clear of the seam on the inner side. */
@media (min-width: 960px) {
  .onward {
    --still-width: clamp(220px, 22vw, 320px);
  }

  .cloth {
    grid-template-columns: 1fr 1fr;
  }

  .piece-direct {
    --pink-x: 100%;
    padding-right: var(--seam-gap);
  }

  .piece-shop {
    --still-lift: -48%;
    padding-left: var(--seam-gap);
  }

  .piece-direct::before {
    inset: 0 0 0 calc(var(--to-edge) * -1);
    --pinking: var(--pinked-top), var(--pinked-bottom);
  }

  .piece-shop::before {
    inset: 0 calc(var(--to-edge) * -1) 0 0;
    --pinking: var(--pinked-top), var(--pinked-bottom);
  }

  .piece-direct .still {
    right: var(--seam-gap);
  }

  .piece-shop .still {
    right: auto;
    left: var(--seam-gap);
  }

  /* The objects take the top of each piece, so the text starts below the part of them inside the cloth. */
  .piece {
    padding-top: calc(var(--still-width) * 0.4 + 40px);
  }

  .seam {
    inset: 28px auto 28px -1.5px;
    width: 3px;
    height: auto;
  }

  .seam::before {
    background: repeating-linear-gradient(180deg, var(--color-navy-900) 0 12px, transparent 12px 21px);
    filter: drop-shadow(1px 0 0 rgb(255 255 255 / 0.6));
  }

  /* The needle hangs from the end of the seam, eye up, its thread running into the last stitch. */
  .seam-track {
    display: block;
    position: absolute;
    inset: 0;
  }

  .seam-needle {
    --needle-length: clamp(136px, 11vw, 168px);
    position: absolute;
    top: calc(100% - var(--needle-length) * 15 / 400);
    left: calc(50% - var(--needle-length));
    width: var(--needle-length);
    aspect-ratio: 400 / 30;
    background: url('/shared/img/home-needle.webp?v=dfa6be94b4') center / contain no-repeat;
    transform-origin: 100% 50%;
    rotate: -80deg;
    filter: drop-shadow(3px 2px 2px rgb(0 0 0 / 0.25));
  }
}

/* With motion: the objects settle onto the cloth as it scrolls into view, and the needle sews the seam,
   the stitches following it down. Everything is in place without the animation, which only browsers with
   scroll timelines run. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cloth {
      view-timeline: --cloth block;
    }

    .still {
      animation: still-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }

    .seam::before,
    .seam-track {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --cloth;
      animation-range: cover 18% cover 72%;
    }

    .seam::before {
      animation-name: seam-across;
    }

    .seam-track {
      animation-name: needle-down;
    }

    @media (min-width: 960px) {
      .seam::before {
        animation-name: seam-down;
      }
    }
  }
}

@keyframes still-settle {
  from {
    translate: 0 calc(var(--still-lift) + 32px);
  }
  to {
    translate: 0 var(--still-lift);
  }
}

@keyframes seam-across {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes seam-down {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes needle-down {
  from {
    translate: 0 -100%;
  }
  to {
    translate: 0 0;
  }
}