/* bespoke.css, a bespoke product's own page (/bespoke/<slug>.html).
   Loaded after designer.css, which gives the page its top bar, colours and
   footer. These are the same product styles the Product page used when the
   products were shown in full there. */
.reveal {
  opacity: 1;
  transform: none;
}
.bespoke-product {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) 0 0;
  display: grid;
  gap: clamp(32px, 4vw, 64px);
}
.bespoke-head .eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro);
}
.bespoke-title {
  font-family: var(--display-xl);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  font-size: clamp(26px, 4vw, 56px);
  margin-top: 10px;
  color: var(--luce);
}
.bespoke-hero,
.bespoke-figure {
  margin: 0;
}
.bespoke-hero img,
.bespoke-figure img,
.bespoke-modules img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.bespoke-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.bespoke-text p {
  color: var(--cenere);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.75;
}
.bespoke-text p + p {
  margin-top: 1.2em;
}
.bespoke-label,
.bespoke-text .bespoke-label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 1em;
}
/* the light row reads text-right, drawings-left, so the page alternates */
.bespoke-row--light .bespoke-text {
  order: 2;
}
.bespoke-modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.4vw, 18px);
}
.bespoke-row--text {
  grid-template-columns: 1fr;
}
.bespoke-row--text .bespoke-text {
  max-width: 760px;
}
@media (min-width: 821px) {
  .bespoke-row--flip .bespoke-figure {
    order: -1;
  }
}
@media (max-width: 900px) {
  .bespoke-row {
    grid-template-columns: 1fr;
  }
  .bespoke-row--light .bespoke-text {
    order: 0;
  }
}
/* "All bespoke products" under the product */
.bespoke-more {
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--grafite);
}
.bespoke-more a {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--luce);
  text-decoration: none;
}
@media (hover: hover) {
  .bespoke-more a:hover {
    color: var(--oro);
  }
}

/* previous / next product */
.bespoke-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: clamp(8px, 2vw, 24px);
  margin-bottom: -8px;
}
.bespoke-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--luce);
  font-size: 19px;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
@media (hover: hover) {
  .bespoke-arrow:hover {
    border-color: var(--oro);
    color: var(--oro);
  }
  .bespoke-arrow--prev:hover {
    transform: translateX(-3px);
  }
  .bespoke-arrow--next:hover {
    transform: translateX(3px);
  }
}
.bespoke-more {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.bespoke-more .bespoke-all {
  grid-column: 2;
  text-align: center;
}
.bespoke-more .bespoke-step {
  font-family: var(--text);
  letter-spacing: 0;
  text-transform: none;
}
.bespoke-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--luce);
}
.bespoke-step small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cenere);
}
.bespoke-step span {
  font-family: var(--text);
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 20px);
}
.bespoke-step--prev {
  grid-column: 1;
  grid-row: 1;
}
.bespoke-step--next {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  align-items: flex-end;
}
@media (hover: hover) {
  .bespoke-step:hover span {
    color: var(--oro);
  }
}
@media (max-width: 640px) {
  .bespoke-more {
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
  }
  .bespoke-more .bespoke-all {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .bespoke-step--next {
    grid-column: 2;
  }
}

/* 2026-11-09: photos in a row line up. Every photo in a row has the same
   height and is never cropped; widths follow each photo's own shape
   (entry-render.js sets flex-grow to width / height). */
.bespoke-modules {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: clamp(10px, 1.4vw, 18px);
}
.bespoke-modules .fit-row {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: clamp(10px, 1.4vw, 18px);
}
.bespoke-modules .fit-row img {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
  height: auto;
}
@media (max-width: 600px) {
  .bespoke-modules .fit-row {
    flex-direction: column;
  }
  .bespoke-modules .fit-row img {
    flex: none !important;
    width: 100%;
  }
}