/* ---- brand tokens -------------------------------------------------
   sora / sorakids supplied by the owner. danica / sugarnook sampled from
   their Instagram logos. Each tint is its own accent mixed into white. */
:root {
  --sora:             #6f873e;
  --sora-accent:      #e7c885;
  --sora-tint:        #faf3e4;
  --sorakids:         #becc62;
  --sorakids-accent:  #ffd271;
  --sorakids-tint:    #fff5e0;
  --danica:           #112945;
  --danica-accent:    #6b8197;
  --danica-tint:      #e7ebee;
  --sugarnook:        #baa46c;
  --sugarnook-accent: #f3e6ba;
  --sugarnook-tint:   #fbf7ea;

  --ink:      #23211e;
  --ink-soft: #6b665e;
  --page:     #f7f4ef;
  --surface:  #fffdfa;
  --hair:     #e6e0d6;

  --ig: #C13584;
  --fb: #166FE5;  /* Facebook's own hover blue; their #1877F2 is 4.23:1 on white, under AA */
  --tt: #111;

  --r: 14px;
  --pad: 16px;
}

[data-brand="sora"]      { --brand: var(--sora);      --brand-accent: var(--sora-accent);      --brand-tint: var(--sora-tint); }
[data-brand="sorakids"]  { --brand: var(--sorakids);  --brand-accent: var(--sorakids-accent);  --brand-tint: var(--sorakids-tint); }
[data-brand="danica"]    { --brand: var(--danica);    --brand-accent: var(--danica-accent);    --brand-tint: var(--danica-tint); }
[data-brand="sugarnook"] { --brand: var(--sugarnook); --brand-accent: var(--sugarnook-accent); --brand-tint: var(--sugarnook-tint); }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px var(--pad) 56px;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  max-width: 560px;
  margin-inline: auto;
}

/* ---- masthead ---- */
.masthead { text-align: center; margin-bottom: 22px; }
.masthead__title {
  margin: 0 0 6px;
  font-size: clamp(22px, 6.4vw, 30px);
  letter-spacing: -0.02em;
  font-weight: 650;
}
.masthead__sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  text-wrap: balance;
}

/* ---- cards ---- */
.cards { display: flex; flex-direction: column; gap: 12px; }

.card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .18s ease, opacity .18s ease;
}
.card.is-open { border-color: var(--brand); }

.card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.card__thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--brand-tint);
  /* Size change is deliberately unanimated: the collapsed thumb must reflow to
     shorten the card, and animating width/height to get there thrashes layout. */
}
.card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card__id { flex: 1 1 auto; min-width: 0; }
.card__name {
  display: block;
  font-weight: 620;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.card__line {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 13px;
}

.card__chev {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.card.is-open .card__chev { transform: rotate(-135deg); }
.card.is-open .card__head { background: var(--brand-tint); }

/* one card open -> the rest step back so the chosen brand owns the screen */
.cards.has-open .card:not(.is-open) { opacity: .62; }
.cards.has-open .card:not(.is-open) .card__thumb { width: 40px; height: 40px; }
.cards.has-open .card:not(.is-open) .card__line { display: none; }

.card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 12px 14px;
}
/* An author `display` beats the UA stylesheet's `[hidden] { display: none }`, so
   the flex above would otherwise keep every closed card's body rendered. */
.card__body[hidden] { display: none; }

/* ---- gallery ---- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  background: var(--brand-tint);
  display: block;
}

/* Each brand shoots a different shape. Cropping interiors to the apparel grid's
   portrait cells cuts the room in half, which is the one thing they must show. */
[data-brand="danica"] .gallery { grid-template-columns: repeat(2, 1fr); }
[data-brand="danica"] .gallery img { aspect-ratio: 3 / 2; }
[data-brand="sorakids"] .gallery img { aspect-ratio: 4 / 3; }
[data-brand="sugarnook"] .gallery img { aspect-ratio: 1 / 1; }
.gallery:empty::after {
  content: "photos pending";
  grid-column: 1 / -1;
  padding: 26px 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
  background: var(--brand-tint);
  border-radius: 8px;
}

/* ---- follow buttons ---- */
/* Above the gallery: on a real phone viewport the photos push every CTA below the
   fold, and following is the only thing this page is for. The card head already
   carries the hero, name and description, so the brand is established first. */
.follows { display: flex; flex-direction: column; gap: 8px; order: -1; }

.follow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;          /* thumb target — do not shrink */
  border-radius: 10px;
  text-decoration: none;
  font-weight: 560;
  font-size: 15px;
  color: #fff;
  background: var(--plat);
}
.follow--ig { --plat: var(--ig); }
.follow--fb { --plat: var(--fb); }
.follow--tt { --plat: var(--tt); }

.follow__icon {
  width: 19px; height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
.follow__icon .solid { fill: currentColor; stroke: none; }

/* The UA ring is near-invisible on the saturated platform buttons. */
.card__head:focus-visible,
.follow:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}