/* ═══════════════════════════════════════════════════════════════
   WodTrace — the site's only accent: dark olive band.
   Desktop: sticky text (cols 1–4) + gallery (cols 6–12): tall photo
   left (~4/7) and a lower 3:4 detail, bottoms aligned. Mobile: text, then photos.
   Motion: photos open bottom-up once, 80ms apart; colour change =
   240ms cross-fade on the tall photo. Colour dots stay still.
   ═══════════════════════════════════════════════════════════════ */

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc {
  --wtc-bg: #2f3a2c;
  --wtc-fg: #e9ebe3;
  --wtc-muted: #aeb4a6;
  --wtc-line: rgba(233, 235, 227, 0.18);
  width: 100%;
  background: var(--wtc-bg);
  color: var(--wtc-fg);
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-in {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: var(--wd-sy) var(--wd-g);
}

/* ─── Text column ───────────────────────────────────────── */

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-txt {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-eyebrow, .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-cap {
  color: var(--wtc-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-title {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-text {
  margin: 0;
  max-width: 36ch;
  color: var(--wtc-muted);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-colors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--wtc-line);
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-colors li { border-bottom: 1px solid var(--wtc-line); }

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-color {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wtc-muted);
  font-size: 0.9375rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-color.is-on { color: var(--wtc-fg); }

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-dot {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  /* thin light ring so dark colours (Storm, Ivy) don't sink into the olive */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* No colour code yet: an outline ring instead of a guessed colour */
.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-dot--empty { box-shadow: inset 0 0 0 1px var(--wtc-muted); }

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-color.is-on .wtc-dot { box-shadow: 0 0 0 2px var(--wtc-bg), 0 0 0 3px var(--wtc-fg); }

/* Selection is shown by the dot ring + full-opacity label only, never by a frame */
.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-color:focus:not(:focus-visible), .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-color[data-wd-pointer] { outline: none !important; }

@media (hover: hover) and (pointer: fine) {
  .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-color:hover { color: var(--wtc-fg); }
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-was {
  display: inline-flex;
  gap: 0.5rem;
  color: var(--wtc-muted);
  font-size: 0.875rem;
}

/* Light button on the accent band */
.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-cta.wbtn {
  background: var(--wtc-fg);
  color: var(--wtc-bg);
}

/* ─── Gallery ───────────────────────────────────────────
   Mobile: large photo full width, detail ~60% wide aligned right. */

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-gal {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-fig {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-fig--detail {
  align-self: flex-end;
  width: 60%;
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-frame {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.15);
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-frame img {
  /* crop rule: faces never cut through; caps stay in frame */
  object-position: 50% 18%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 240ms var(--wd-ease-out);
}

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-img--on { opacity: 1; }

/* First view: each photo opens bottom-up, 80ms apart */
.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-gal--armed .wtc-frame { clip-path: inset(100% 0 0 0); }

.cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-gal--in .wtc-frame {
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms var(--wd-ease-io);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ─── ≥ 768px: sticky text + 7-col gallery ──────────────── */

@media (min-width: 768px) {
  .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-in {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: start;
  }

  .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-txt {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--header-height, 4rem) + 2.5rem);
  }

  /* Large photo ~4/7, detail ~3/7; same 3:4 ratio so the detail sits lower,
     bottoms aligned */
  .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-gal {
    grid-column: 7 / span 6;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
    gap: 1rem;
    align-items: end;
  }

  .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-gal--one { grid-template-columns: minmax(0, 1fr); }

  .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-fig--detail {
    align-self: end;
    width: auto;
  }

  .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-in--solo .wtc-txt { position: static; grid-column: 1 / span 6; }
}

@media (min-width: 1024px) {
  .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-txt { grid-column: 1 / span 4; }
  .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-gal { grid-column: 6 / span 7; }
}

@media (prefers-reduced-motion: reduce) {
  .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-img { transition: none; }
  .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-gal--armed .wtc-frame { clip-path: none; opacity: 0; }
  .cc_QrnvaL6dQN_oMJOSzsxX3 .wtc-gal--in .wtc-frame { clip-path: none; opacity: 1; transition: opacity 300ms ease; transition-delay: 0ms; }
}