/* ==========================================================================
   Waterman Made — post-migration additions.
   Kept separate so prototype/styles.css stays frozen as reference.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Trust Fall funky band — white stays INSIDE the wavy shape.
   Mask-image clips the white band to a wavy top + bottom edge.
   -------------------------------------------------------------------------- */
.trust-fall-funky {
  --tf-wave-top: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'%3E%3Cpath d='M0,5 Q8,0.5 16,5 T32,5 L32,10 L0,10 Z' fill='white'/%3E%3C/svg%3E");
  --tf-wave-bot: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'%3E%3Cpath d='M0,5 Q8,0.5 16,5 T32,5 L32,0 L0,0 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--tf-wave-top), linear-gradient(#fff, #fff), var(--tf-wave-bot);
          mask-image: var(--tf-wave-top), linear-gradient(#fff, #fff), var(--tf-wave-bot);
  -webkit-mask-repeat: repeat-x, no-repeat, repeat-x;
          mask-repeat: repeat-x, no-repeat, repeat-x;
  -webkit-mask-size: 32px 10px, 100% calc(100% - 20px), 32px 10px;
          mask-size: 32px 10px, 100% calc(100% - 20px), 32px 10px;
  -webkit-mask-position: top left, center, bottom left;
          mask-position: top left, center, bottom left;
  -webkit-mask-composite: source-over;
          mask-composite: add;
}
/* Old decorative wave stripes are redundant now — the edge IS the wave. */
.trust-fall-funky::before,
.trust-fall-funky::after {
  display: none;
}


/* --------------------------------------------------------------------------
   Trust Fall teaser (used on Finishing + Work Together) — same treatment,
   but wavy top edge only (prototype only had a wave on top).
   -------------------------------------------------------------------------- */
.trust-fall-teaser {
  border-top: none;
  --tf-wave-top: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'%3E%3Cpath d='M0,5 Q8,0.5 16,5 T32,5 L32,10 L0,10 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--tf-wave-top), linear-gradient(#fff, #fff);
          mask-image: var(--tf-wave-top), linear-gradient(#fff, #fff);
  -webkit-mask-repeat: repeat-x, no-repeat;
          mask-repeat: repeat-x, no-repeat;
  -webkit-mask-size: 32px 10px, 100% calc(100% - 10px);
          mask-size: 32px 10px, 100% calc(100% - 10px);
  -webkit-mask-position: top left, bottom left;
          mask-position: top left, bottom left;
  -webkit-mask-composite: source-over;
          mask-composite: add;
}
.trust-fall-teaser::before {
  display: none;
}


/* --------------------------------------------------------------------------
   Equal-height cards on homepage + Work Together.
   -------------------------------------------------------------------------- */
.work-together-mini,
.doors {
  align-items: stretch;
}
.work-together-mini .wt-card,
.doors .door {
  height: 100%;
}
.wt-card__cta,
.door__cta {
  margin-top: auto;
}


/* --------------------------------------------------------------------------
   Work-type frame on hover (homepage + Work Together, identical behavior).
   7px frame sits OUTSIDE the card (inset: -7px) so it wraps around without
   covering any content.  Animation is opacity-only — the card itself
   doesn't transform, translate, or reflow.  Prototype's built-in hover
   lift/shadow/wash is explicitly killed so content stays still.
   Color comes from the inline `--card-wash` variable on each card.
   -------------------------------------------------------------------------- */
body.page-home .wt-card,
body.page-work-together .door {
  position: relative;
}
body.page-home .wt-card::before,
body.page-work-together .door::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 7px solid var(--card-wash, var(--c-cream));
  opacity: 0;
  transition: opacity 260ms var(--ease);
  pointer-events: none;
  z-index: 2;
}
body.page-home .wt-card:hover::before,
body.page-home .wt-card:focus-visible::before,
body.page-work-together .door:hover::before,
body.page-work-together .door:focus-visible::before {
  opacity: 1;
}

/* Neutralize the prototype's hover movement on both pages so the card
   content never shifts when the frame fades in. */
body.page-home .wt-card,
body.page-home .wt-card:hover,
body.page-home .wt-card:focus-visible,
body.page-work-together .door,
body.page-work-together .door:hover,
body.page-work-together .door:focus-visible {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.page-work-together .door {
  border: none !important;
}


/* --------------------------------------------------------------------------
   Journal entry body — inline images and pull quotes break out of the
   paragraph max-width so they reach their intended widths.
   -------------------------------------------------------------------------- */
body.page-note .note-body {
  max-width: none;
  padding-inline: var(--gutter);
}
body.page-note .note-body > p {
  max-width: 66ch;
  margin-inline: auto;
}
body.page-note .note-body > .note-pullquote {
  max-width: 52ch;
  margin-inline: auto;
}
body.page-note .note-body > .note-image {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}


/* --------------------------------------------------------------------------
   Gallery lightbox link wrapper
   -------------------------------------------------------------------------- */
.work-item__link {
  display: contents;
  color: inherit;
  text-decoration: none;
}
.work-item__link:focus-visible img {
  outline: 3px solid var(--c-fg);
  outline-offset: 3px;
}
.pswp {
  --pswp-bg: #0a0a0a;
  --pswp-icon-color: var(--c-cream);
  --pswp-icon-color-secondary: rgba(242, 240, 235, 0.3);
}
.pswp__button { opacity: 0.72; }
.pswp__button:hover { opacity: 1; }


/* --------------------------------------------------------------------------
   Shop — product card refinement
   -------------------------------------------------------------------------- */
.product__link {
  display: contents;
  color: inherit;
  text-decoration: none;
}
.product {
  padding: clamp(12px, 1.4vw, 18px);
  margin: calc(-1 * clamp(12px, 1.4vw, 18px));
  transition: background 260ms var(--ease);
  cursor: pointer;
  position: relative;
}
.product:hover {
  background: color-mix(in srgb, var(--c-ink) 6%, transparent);
}
.product__title {
  font-size: clamp(17px, 1.4vw, 21px) !important;
  line-height: 1.2;
}
.product__price {
  font-size: 12.5px !important;
  opacity: 0.82;
}
.product__body {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--c-ink) !important;
  max-width: 38ch !important;
  opacity: 0.85;
}
.product__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-ink);
  text-decoration: none;
  align-self: flex-start;
  transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.product__cta::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}
.product__link:hover .product__cta {
  background: var(--c-ink);
  color: var(--c-bg);
}
.product__link:hover .product__cta::after {
  transform: translateX(4px);
}


/* --------------------------------------------------------------------------
   Studio — contact block.
   -------------------------------------------------------------------------- */
.contact-block {
  max-width: 640px;
  margin-top: clamp(36px, 5vw, 64px);
}
.contact-block__note {
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.5;
  max-width: 54ch;
  margin-bottom: clamp(24px, 3vw, 36px);
  color: var(--c-ink);
}
.contact-block__channels {
  display: grid;
  gap: 14px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: var(--tracking-mono);
}
.contact-block__channels > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  align-items: baseline;
}
.contact-block__channels dt {
  color: var(--c-ink-muted);
  font-weight: 500;
}
.contact-block__channels dd {
  margin: 0;
  color: var(--c-ink);
  max-width: 44ch;
}
.contact-block__channels a {
  color: inherit;
  border-bottom: 1px solid currentColor;
}