/* ======================================================================
   Meet the Friends
   Its own stylesheet, so redesigning this page cannot break the others.

   Aaron's note on the first version was that it looked like the early
   nineties. The circles are gone. Instead: tall character cards with real
   color behind them, big rounded shapes, proper depth, and a profile that
   reads like a character sheet rather than a paragraph of prose.
   ====================================================================== */

.meet {
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;
}

/* ---- the top of the page --------------------------------------------- */
/* The title and nothing else. Aaron, 5 Sep 2026: no kicker, no lede, no
   section headings, no counts. The pictures carry the page. */
.meet-hero {
  padding: clamp(2.2rem, 5.5vw, 3.6rem) 0 clamp(1.2rem, 2.6vw, 1.8rem);
  background:
    radial-gradient(80% 120% at 12% -10%, #ffe6ef 0%, transparent 60%),
    radial-gradient(70% 110% at 92% 0%, #dff0f3 0%, transparent 58%),
    var(--paper);
}
.meet-hero h1 { font-size: clamp(3rem, 9vw, 5.4rem); letter-spacing: -.025em; }

/* ---- the cast: two sliders, four characters at a time ------------------
   Aaron, 6 September 2026: four at a time, slide for the rest, no scroll bar
   showing, arrows to say there is more. So the rail scrolls but its bar is
   hidden on every engine, and the two arrows do the moving.

   Each character gets a QUARTER of the rail whatever their own width, which
   is what buys the size: a whole moose across a quarter of the page. Their
   HEIGHTS still differ, because each row's pictures share one canvas height
   and each drawing sits at its own height inside it, with clear space above
   a short one. --canvas, written on the rail by the builder, says how tall
   this row's canvas is beside the other row's, so the kids stay just over
   half the height of the grown-ups at every screen size. */
.group {
  position: relative;
  display: flex; align-items: center; gap: clamp(.2rem, .8vw, .6rem);
  margin-bottom: clamp(.8rem, 2vw, 1.6rem);
}

.rail {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: flex-end;
  overflow-x: auto; overflow-y: visible;
  /* NO scroll-behavior: smooth HERE, and this is deliberate. Measured on
     6 September 2026: with smooth scrolling set in CSS the rail would not
     move at all, not by an arrow and not by setting scrollLeft outright, and
     the same was true of scrollBy with behavior smooth. The sliding is
     animated in the page script instead, frame by frame, which cannot
     deadlock against snapping and honours a reader who has asked for less
     motion. Snapping is proximity, not mandatory, for the same reason: it
     tidies up a finger scroll without fighting the animation. */
  scroll-snap-type: x proximity;
  /* no scroll bar, on any engine */
  scrollbar-width: none; -ms-overflow-style: none;
  /* room for the lift and glow on the chosen character, which would
     otherwise be clipped by the scrolling box */
  padding: .5rem 0 .7rem;
}
.rail::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* THE ARROWS. Round, quiet, and out of the way until wanted. They dim rather
   than disappear at the ends, so the row never jumps sideways. */
.rail-arrow {
  flex: 0 0 auto;
  width: clamp(2rem, 3.4vw, 2.75rem); height: clamp(2rem, 3.4vw, 2.75rem);
  display: grid; place-items: center;
  padding: 0; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ink, #2b2420) 14%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #fff 82%, var(--paper, #faf6ef));
  color: var(--ink, #2b2420);
  box-shadow: 0 1px 3px rgba(43, 36, 32, .10);
  transition: background .18s ease, box-shadow .18s ease,
              opacity .18s ease, transform .18s ease;
}
.rail-arrow svg {
  width: 55%; height: 55%;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.rail-arrow:hover:not(:disabled) {
  background: #fff; transform: scale(1.08);
  box-shadow: 0 3px 8px rgba(43, 36, 32, .16);
}
.rail-arrow:active:not(:disabled) { transform: scale(.96); }
.rail-arrow:focus-visible {
  outline: 2px solid var(--rose, #b8446b); outline-offset: 2px;
}
.rail-arrow:disabled { opacity: .22; cursor: default; box-shadow: none; }

/* Without JavaScript there is nothing for an arrow to do, so the rail simply
   scrolls by finger or trackpad and the arrows are not shown at all. */
html:not(.js) .rail-arrow { display: none; }

.tile {
  /* a quarter of the rail each: four characters in view, the rest alongside */
  flex: 0 0 25%; max-width: 25%;
  scroll-snap-align: start;
  border: 0; padding: 0; cursor: pointer; background: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: .26rem;
  transform-origin: 50% 100%;   /* growing on selection lifts, never sinks */
  transition: transform .24s cubic-bezier(.34,1.35,.64,1);
}
/* No card. The artwork itself is the button, so the tile has no background,
   no border, no corners and no box shadow. The art has to be a cut-out with a
   transparent background; anything else shows its own rectangle. */
.tile-inner {
  display: block; position: relative;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.tile img {
  /* height is the character's own, from the picture; width follows it */
  display: block; width: auto; max-width: 100%;
  height: calc(var(--canvas, 1) * clamp(8rem, 15vw, 15rem));
  margin: 0 auto;
  /* the only shadow is the one the character casts, along its own outline */
  filter: drop-shadow(0 2px 3px rgba(43,36,32,.16));
  transition: filter .2s ease;
}
/* No printed names under the tiles. The name lives in the button's
   aria-label and title, so it is still announced and still shows on hover. */
.tile:hover, .tile:focus-visible { transform: translateY(-4px); }
.tile:hover img { filter: drop-shadow(0 5px 6px rgba(43,36,32,.24)); }

/* Focus and selection have to read without a box around them, so the artwork
   glows in the character's own color and the chosen one stands taller. */
.tile:focus-visible { outline: none; }
.tile:focus-visible img {
  filter: drop-shadow(0 0 1px var(--ink)) drop-shadow(0 0 4px var(--ink));
}
.tile[aria-selected="true"] { transform: translateY(-6px) scale(1.06); }
.tile[aria-selected="true"] img {
  filter: drop-shadow(0 0 1px var(--tone, #999))
          drop-shadow(0 0 7px var(--tone, #999))
          drop-shadow(0 5px 7px rgba(43,36,32,.26));
}
/* a soft pool of color under whoever is chosen, instead of an outline */
.tile[aria-selected="true"] .tile-inner::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -.3rem;
  height: .3rem; border-radius: 99px;
  background: radial-gradient(closest-side, var(--tone, #999), transparent);
}

/* ---- the profile ------------------------------------------------------ */
.profile-wrap { padding: 0 0 clamp(3rem, 8vw, 5.5rem); }
/* The profile is a panel of words with the character standing beside it, not
   a card with a photo pasted in. Same rule as the tiles: no boxes. */
.profile {
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 52rem) { .profile { grid-template-columns: .9fr 1.1fr; } }

.profile-art {
  position: relative; display: grid; place-items: end center;
  padding: clamp(1.2rem, 3vw, 2.2rem);
}
/* a soft wash of the character's own color, fading out, so there is warmth
   behind them without a rectangle */
.profile-art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 62%,
              color-mix(in srgb, var(--tone, #ccc) 42%, transparent), transparent 72%);
}
.profile-art img {
  position: relative; z-index: 1;
  width: 100%; max-width: 20rem; display: block;
  border-radius: 0; background: none;
  filter: drop-shadow(0 6px 10px rgba(43,36,32,.16));
}
.profile-body { padding: clamp(1.7rem, 3.5vw, 3rem); }

.profile-body .soon-flag {
  display: inline-block; background: var(--tone, var(--dress)); color: #fff;
  font-family: Fredoka, system-ui, sans-serif; font-weight: 700;
  font-size: .68rem; letter-spacing: .17em; text-transform: uppercase;
  padding: .32rem .72rem; border-radius: 99px; margin-bottom: .8rem;
}
.profile-body h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem); letter-spacing: -.02em;
  margin-bottom: .1rem;
}
.profile-body .nickname { color: var(--ink-soft); font-style: italic; }
.profile-body .strap {
  font-family: Fredoka, system-ui, sans-serif; font-weight: 600;
  color: var(--deep, var(--dress)); font-size: 1.05rem; margin: .35rem 0 1.4rem;
}

/* the character sheet rows */
.stats { display: grid; gap: .1rem; }
.stat {
  display: grid; grid-template-columns: 1fr; gap: .1rem;
  padding: .78rem 0; border-top: 2px solid #f0eae0;
}
@media (min-width: 34rem) {
  .stat { grid-template-columns: 8.6rem 1fr; gap: 1rem; align-items: baseline; }
}
.stat dt {
  font-family: Fredoka, system-ui, sans-serif; font-weight: 700;
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--deep, var(--ink-soft)); padding-top: .18rem;
}
.stat dd { margin: 0; color: var(--ink); font-size: 1.03rem; line-height: 1.6; }
.stat.artist { border-top-style: dashed; }
.stat.artist dd { color: var(--ink-soft); font-style: italic; font-size: .97rem; }

.profile-body .teaser {
  font-size: 1.06rem; color: var(--ink); line-height: 1.65; margin: 0 0 .4rem;
}
.debut-strip {
  margin-top: 1.5rem; padding: .85rem 1.05rem;
  background: #f7f3ea; border-radius: var(--r-sm);
  font-size: .97rem; color: var(--ink-soft);
}
.debut-strip b { color: var(--ink); font-weight: 600; }

/* one profile at a time once the script is running */
.js .who-panel { display: none; }
.js .who-panel.on { display: block; animation: pop .34s cubic-bezier(.2,.8,.3,1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
html:not(.js) .who-panel { margin-bottom: 1.8rem; }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile:hover, .tile:focus-visible, .tile[aria-selected="true"] { transition: none; transform: none; }
  .js .who-panel.on { animation: none; }
}

/* ======================================================================
   ISLAND LOOK, 24 September 2026
   Fredoka on the names and headings so this page matches the rest of the
   site. The artwork tiles are deliberately left alone: they have no card
   behind them on purpose, and that still reads correctly on the new
   cream background.
   ====================================================================== */
.friend-tag, .friend-name, .friend-card h2, .friend-card h3 {
  font-family: Fredoka, system-ui, sans-serif !important;
}
.rail-arrow {
  border: 0; background: var(--cream);
  box-shadow: 0 4px 0 rgba(0,0,0,.13);
}
.rail-arrow:hover { background: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.15); }

/* the top of this page becomes a sky island with a wavy edge, like every
   other page on the site */
.meet-hero {
  background: var(--sky) !important;
  padding-bottom: clamp(4rem, 9vw, 7rem);
  position: relative;
}
.meet-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: clamp(42px, 6vw, 90px); pointer-events: none; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,54 C190,116 400,-6 660,34 C900,70 1170,-4 1440,46 L1440,120 L0,120 Z' fill='%23fdf6e9'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}
.meet-hero > .wrap { position: relative; z-index: 3; }