@font-face {
  font-family: "Camp Polaroid";
  src: url("/assets/fonts/ZCOOLKuaiLe-camp-titles.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.brand-section-done { min-width: 0; }

.brand-section-done .brand-done-heading {
  margin-bottom: 10px;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.3;
  letter-spacing: 0;
}

.brand-done-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.brand-polaroid-wall {
  width: min(100%, 1100px);
  margin: 30px auto 0;
}

.brand-wall-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin: 0 auto 22px;
}

.brand-wall-row:last-child { margin-bottom: 0; }

.brand-wall-item {
  --card-width: 240px;
  --footer-height: 76px;
  position: relative;
  z-index: var(--stack);
  flex: 0 0 var(--card-width);
  width: var(--card-width);
  min-width: 0;
  margin-top: var(--step);
  margin-left: var(--overlap);
  transform: translateX(var(--x)) rotate(var(--angle));
  transition: transform 300ms ease, filter 300ms ease;
}

.brand-wall-item-large { --card-width: 300px; --footer-height: 86px; }
.brand-wall-item-small { --card-width: 200px; --footer-height: 70px; }

.brand-wall-item:is(:hover, :focus-within, :focus-visible) {
  z-index: 20;
  transform: translateX(var(--x)) rotate(0deg) scale(1.05);
}

.brand-card-face {
  position: relative;
  padding: 10px 10px 0;
  background: #fff;
  box-shadow: 0 5px 11px rgba(27, 40, 32, .13), 0 14px 25px rgba(27, 40, 32, .11);
  transition: box-shadow 300ms ease;
}

.brand-wall-item:is(:hover, :focus-within, :focus-visible) .brand-card-face {
  box-shadow: 0 13px 24px rgba(27, 40, 32, .2), 0 23px 38px rgba(27, 40, 32, .13);
}

.brand-wall-item-note .brand-card-face { background: var(--palette-tint); }
.brand-wall-item-note:nth-child(2n) .brand-card-face { background: var(--palette-tint); }

.brand-wall-pin-green::before,
.brand-wall-pin-gold::before,
.brand-wall-tape::before {
  position: absolute;
  z-index: 5;
  content: "";
  pointer-events: none;
}

.brand-wall-pin-green::before,
.brand-wall-pin-gold::before {
  top: -9px;
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(20, 36, 29, .24);
}

.brand-wall-pin-green::before { background: #005a50; }
.brand-wall-pin-gold::before { background: var(--palette-action); }

.brand-wall-tape::before {
  top: -8px;
  left: calc(50% - 29px);
  width: 58px;
  height: 20px;
  background: var(--palette-tape);
  box-shadow: 0 1px 2px rgba(33, 31, 24, .1);
  transform: rotate(-8deg);
}

.brand-card-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ece9e4;
}

.brand-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-wall-item-note .brand-card-visual { gap: 9px; background: rgba(255, 255, 255, .1); }
.brand-card-note-place {
  color: #005a50;
  font-family: "Camp Polaroid", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 34px;
  line-height: 1.2;
}

.brand-card-visual svg { width: 64px; height: 40px; color: #005a50; }
.brand-card-unexposed {
  padding: 10px;
  color: #65625d;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.brand-card-info {
  min-height: var(--footer-height);
  padding: 12px 2px 14px;
  text-align: left;
}

.brand-card-name {
  margin: 0 0 6px;
  color: #005a50;
  font-family: "Camp Polaroid", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.brand-wall-item-small .brand-card-name { font-size: 20px; }
.brand-wall-item-long .brand-card-name { font-size: 20px; }

.brand-card-meta {
  margin: 0;
  color: rgba(20, 39, 31, .6);
  font-size: 13px;
  line-height: 1.45;
}

.brand-card-trigger {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.brand-card-trigger:focus-visible,
.brand-wall-item:focus-visible,
.brand-card-overlay a:focus-visible,
.brand-card-reduced-link:focus-visible {
  outline: 3px solid var(--palette-focus);
  outline-offset: 3px;
}

.brand-card-overlay {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: max(calc(100% - 20px), 252px);
  aspect-ratio: 4 / 3;
  height: auto;
  padding: 18px;
  color: #fff;
  background: var(--palette-forest, #004740);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: opacity 300ms ease;
  transform: translateX(var(--overlay-shift,0px));
}

body .brand-polaroid-wall .brand-card-overlay p.type-copy[data-type-copy] {
  margin: 0;
  color: #fff !important;
  width:100%;
  font-size: 18px !important;
  font-weight: 600;
  line-height: 1.55;
}

body .brand-polaroid-wall .brand-card-overlay a {
  position: relative;
  z-index: 4;
  color: #fff !important;
  font-size: 17px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  pointer-events: auto;
}

.brand-wall-item:is(:hover, :focus-within, .is-open) .brand-card-overlay { opacity: 1; }
.brand-card-reduced-desc,
.brand-card-reduced-link { display: none; }

@media (min-width: 768px) and (max-width: 999px) {
  .brand-wall-item-large { --card-width: 28vw; }
  .brand-wall-item-medium { --card-width: 24vw; }
  .brand-wall-item-small { --card-width: 20vw; }
  .brand-card-name { font-size: 20px; }
  .brand-wall-item-long .brand-card-name { font-size: 16px; }
}

@media (max-width: 767px) {
  .brand-section-done .brand-done-heading { font-size: 29px; }
  .brand-done-subtitle { font-size: 15px; }
  .brand-polaroid-wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 25px 14px;
    width: calc(100vw - 26px);
    margin-left: calc(50% - 50vw + 13px);
    padding: 12px 0 24px;
  }

  .brand-wall-row { display: contents; }
  .brand-wall-item {
    width: 100%;
    margin: 0;
    transform: rotate(calc(var(--angle) * .5));
  }
  .brand-wall-row .brand-wall-item:nth-child(even) { margin-top: 22px; }
  .brand-wall-item:is(:hover, :focus-within, :focus-visible) {
    transform: rotate(0deg) scale(1.02);
  }
  .brand-card-face { padding: 8px 8px 0; }
  .brand-card-info { min-height: 78px; padding: 11px 1px 13px; }
  .brand-card-name,
  .brand-wall-item-small .brand-card-name { font-size: 20px; }
  .brand-wall-item-long .brand-card-name { font-size: 16px; }
  .brand-card-meta { font-size: 13px; }
  .brand-card-note-place { font-size: 30px; }
  .brand-wall-item.is-open { z-index:30; transform:none; }
  .brand-card-overlay { top: 8px; left: 8px; width: min(280px, calc(100vw - 48px)); padding: 16px; transform:translateX(var(--overlay-shift,0px)); }
  body .brand-polaroid-wall .brand-card-overlay p.type-copy[data-type-copy] { font-size: 17px !important; }
  body .brand-polaroid-wall .brand-card-overlay a { font-size: 17px !important; }
  .brand-wall-item:not(.is-open) .brand-card-overlay { opacity: 0; pointer-events: none; }
  .brand-wall-item:not(.is-open) .brand-card-overlay a { pointer-events: none; }
  .brand-wall-item.is-open .brand-card-overlay { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-wall-item,
  .brand-wall-item:is(:hover, :focus-within, :focus-visible) {
    transform: none;
    transition: none;
  }
  .brand-card-face { transition: none; }
  .brand-card-overlay,
  .brand-wall-item:is(:hover, :focus-within) .brand-card-overlay,
  .brand-wall-item.is-open .brand-card-overlay {
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    min-height:0;
    margin-top:12px;
    opacity: 1;
    pointer-events: auto;
    transform:none;
    transition: none;
  }
  .brand-card-overlay a { pointer-events: auto; }
  .brand-card-trigger { display:none; }
  .brand-polaroid-wall { display:grid; grid-template-columns:1fr; }
  .brand-wall-row { display:contents; }
  .brand-wall-item { width:100%; margin:0 0 20px; }
  .brand-card-reduced-desc {
    display: block;
    margin: 9px 0 0;
    color: #273b35;
    font-size: 13px;
    line-height: 1.5;
  }
  .brand-card-reduced-link {
    position: relative;
    z-index: 4;
    display: inline-block;
    margin-top: 6px;
    color: #005a50;
    font-size: 13px;
    font-weight: 700;
  }
}

/* Approved ten-camp illustration notes. Scoped to avoid changing product history cards. */
@font-face{font-family:CampWall;src:url('/assets/fonts/ZCOOLKuaiLe-camp-wall.woff2') format('woff2');font-display:swap}
.brand-section-done .brand-done-heading,.brand-section-done .brand-done-subtitle{text-align:center}
.brand-illustration-wall{max-width:880px;margin-top:38px}
.brand-illustration-wall .brand-wall-row{gap:22px;margin-bottom:28px}
.brand-illustration-wall .brand-wall-item{--card-width:246px;--footer-height:69px;margin:0;transform:rotate(var(--angle));flex-basis:var(--card-width)}
.brand-illustration-wall .brand-card-face{padding:14px 14px 12px;background:var(--palette-tint);box-shadow:0 6px 13px #24462f20}
.brand-illustration-wall .paper-green .brand-card-face{background:var(--palette-tint)}
.brand-illustration-wall .brand-card-face::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff16 0 1px,transparent 1px 3px),radial-gradient(ellipse at 10% 10%,#fff4,transparent 65%);pointer-events:none}
.brand-illustration-wall .brand-card-visual{aspect-ratio:auto;height:165px;background:none;gap:6px;justify-content:flex-start;padding-top:4px}
.brand-illustration-wall .brand-card-note-place{font-family:CampWall,sans-serif;font-size:21px;line-height:1.25;min-height:28px;text-align:center}
.brand-illustration-wall .brand-card-note-place.long-location{font-size:17px;line-height:1.2;min-height:41px}
.brand-illustration-wall .brand-camp-illustration{width:178px;height:121px;max-width:100%;object-fit:contain;filter:saturate(.63) brightness(.98)}
.brand-illustration-wall .long-location+.brand-camp-illustration{height:111px}
.brand-illustration-wall .brand-card-info{text-align:center;padding:6px 0 0;min-height:69px}
.brand-illustration-wall .brand-card-name{font-family:CampWall,sans-serif;font-size:24px;line-height:1.18;white-space:normal;margin-bottom:5px}
.brand-illustration-wall .brand-card-meta{font-size:13px;line-height:1.4}
.brand-illustration-wall .brand-wall-item:is(:hover,:focus-within,:focus-visible){transform:rotate(0) scale(1.03)}
.brand-illustration-wall .brand-wall-pin-green::before,.brand-illustration-wall .brand-wall-pin-gold::before{width:12px;height:12px;top:-6px;left:calc(50% - 6px)}
@media(max-width:900px) and (min-width:768px){.brand-illustration-wall .brand-wall-item{--card-width:28vw}}
@media(max-width:767px){
 .brand-illustration-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;padding:0 3px}
 .brand-illustration-wall .brand-wall-row{display:contents}
 .brand-illustration-wall .brand-wall-item{width:100%;max-width:none;--card-width:100%;margin:0!important;transform:rotate(clamp(-3deg,var(--angle),3deg))}
 .brand-illustration-wall .brand-card-face{padding:10px 8px}
 .brand-illustration-wall .brand-card-visual{height:156px;gap:6px}
 .brand-illustration-wall .brand-card-note-place{font-size:19px;min-height:25px}
 .brand-illustration-wall .brand-card-note-place.long-location{font-size:14px;min-height:35px;line-height:1.3}
 .brand-illustration-wall .brand-camp-illustration{width:132px;height:115px}
 .brand-illustration-wall .long-location+.brand-camp-illustration{height:105px}
 .brand-illustration-wall .brand-card-info{min-height:73px;padding:5px 0 2px}
 .brand-illustration-wall .brand-card-name{font-size:20px;line-height:1.2;margin-bottom:6px}
 .brand-illustration-wall .brand-card-meta{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
 .brand-illustration-wall{display:grid;grid-template-columns:1fr}
 .brand-illustration-wall .brand-wall-row{display:contents}
 .brand-illustration-wall .brand-wall-item{width:100%;transform:none!important}
 .brand-illustration-wall .brand-wall-item .brand-card-overlay{position:relative;top:auto;left:auto;opacity:1;transform:none;min-height:0;aspect-ratio:auto;width:100%;pointer-events:auto}
 .brand-illustration-wall .brand-wall-item .brand-card-overlay a{pointer-events:auto}
}