/* ================= VILLAGE MAP: full screen homepage hero =================
   The stage fills the screen under the header. The map keeps its exact
   proportions (so hotspots stay lined up) and is sized to cover the stage:
   wide screens crop a little sky, tall phone screens pan sideways. */
.village {
  --map-w: 1670; --map-h: 941;
  --map-ratio: calc(var(--map-w) / var(--map-h));
  --stage-h: max(420px, 100svh);
  position: relative;
  background: var(--navy);
  border-bottom: var(--ink);
}
.village__stage {
  position: relative;
  height: var(--stage-h);
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; scrollbar-width: none;
  container-type: size;
}
.village__stage::-webkit-scrollbar { display: none; }
.village__map {
  position: absolute; left: 0; bottom: 0;
  height: max(100cqh, 100cqw / var(--map-ratio));
  aspect-ratio: var(--map-w) / var(--map-h);
  display: block;
}
.village__map picture, .village__map img { display: block; width: 100%; height: 100%; }

.village__sign {
  position: absolute; z-index: 3; top: calc(var(--header-space) + var(--s2)); left: 50%; translate: -50% 0;
  width: max-content; max-width: calc(100% - 2 * var(--gutter));
  padding: 0.35rem 1.1rem 0.4rem; text-align: center;
  background: var(--snow); color: var(--navy);
  border: var(--ink); border-radius: 22px; box-shadow: var(--lift);
  pointer-events: none;
}
.village__sign h1 {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.village__sign p { margin: 0; font-family: var(--font-display); font-size: 1.15rem; max-width: none; }

.spot { position: absolute; border-radius: 22px; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 4px solid var(--sun);
  box-shadow: 0 0 0 4px var(--navy), 0 0 30px 8px rgba(255, 201, 40, .75), inset 0 0 26px rgba(255, 220, 120, .55);
  opacity: 0; transform: scale(.94);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-pop);
  animation: spot-hint 1100ms var(--ease-out) calc(700ms + var(--i) * 120ms) 1 both;
  pointer-events: none;
}
.spot:hover::after, .spot:focus-visible::after { opacity: 1; transform: scale(1); animation: none; }
.spot:active::after { transform: scale(.96); }
.spot:focus-visible { outline: none; box-shadow: none; }
@keyframes spot-hint {
  0%, 100% { opacity: 0; transform: scale(.94); }
  45% { opacity: 1; transform: scale(1); }
}

.village__hint {
  position: absolute; z-index: 3; bottom: var(--s4); left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: var(--s2); margin: 0;
  padding: 0.4rem 1rem; border-radius: var(--r-pill);
  background: rgba(24, 33, 88, .85); color: var(--snow); font-weight: 700; font-size: .95rem;
  white-space: nowrap; pointer-events: none;
  transition: opacity var(--t-med);
}
.village__hint.is-gone { opacity: 0; }
.village__hint[hidden] { display: none; }
.village__hint::before, .village__hint::after { content: ""; border-style: solid; }
.village__hint::before { border-width: 6px 9px 6px 0; border-color: transparent var(--sun) transparent transparent; }
.village__hint::after { border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--sun); }

/* Phones: leave room for the bottom tab bar, and keep the sign small */
@media (max-width: 759px) {
  .village { --stage-h: max(420px, calc(100svh - 76px - env(safe-area-inset-bottom))); }
}
@media (max-width: 700px) {
  .village__sign p { font-size: 1rem; }
}
/* Phones and tablets held upright: show the whole map, edge to edge, under the menu bar
   (no sideways swiping), with the "Tap a place" sign underneath it. */
@media (max-width: 899px) and (orientation: portrait) {
  .page-home .village { padding-top: var(--header-space); }
  .village__stage { height: auto; overflow: visible; container-type: normal; }
  .village__map { position: relative; width: 100%; height: auto; }
  .village__sign { position: static; translate: none; margin: var(--s3) auto; box-shadow: none; }
  .village__hint { display: none; }
  .spot { border-radius: 10px; }
}
@media (min-width: 900px) {
  .doors:not(.doors--always) { display: none; }
}

/* ================= DOORS: what do you want to do today ================= */
.doors { padding: var(--s8) 0 var(--s7); }
.doors__grid {
  list-style: none; display: grid; gap: var(--s6) var(--s4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s8);
}
.door {
  --door-bg: var(--sun); --door-fg: var(--navy);
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 170px; padding: var(--s4) var(--s4) var(--s4);
  color: var(--door-fg); background: var(--door-bg);
  border: var(--ink); border-radius: var(--r-tile); box-shadow: var(--lift);
  text-decoration: none;
  transition: transform var(--t-med) var(--ease-pop), box-shadow var(--t-med) var(--ease-pop);
}
.door__label { font-family: var(--font-display); font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); line-height: 1; position: relative; z-index: 1; max-width: 58%; }
.door__line { font-weight: 700; font-size: 1rem; line-height: 1.3; margin-top: var(--s1); max-width: 55%; position: relative; z-index: 1; }
.door__who {
  position: absolute; right: 2%; bottom: 8px; height: 132%; width: auto; max-width: 46%; object-fit: contain; object-position: bottom;
  transform-origin: 50% 100%;
  transition: transform var(--t-med) var(--ease-pop);
  pointer-events: none;
}
.door:hover { transform: translateY(-5px); box-shadow: var(--lift-hover); }
.door:hover .door__who { transform: rotate(-6deg) translateY(-6px); }
.door:active { transform: translateY(4px); box-shadow: var(--lift-press); }

.door--sun    { --door-bg: var(--sun); }
.door--meadow { --door-bg: var(--meadow); }
.door--fox    { --door-bg: var(--fox); }
.door--tie    { --door-bg: var(--tie); --door-fg: var(--snow); }
.door--lake   { --door-bg: #5fb7ff; }
.door--navy   { --door-bg: var(--navy); --door-fg: var(--snow); box-shadow: 0 6px 0 var(--sun-dark); }
.door--navy:hover { box-shadow: 0 10px 0 var(--sun-dark); }

@media (max-width: 759px) {
  .door { padding-top: 84px; min-height: 0; }
  .door__label, .door__line { max-width: none; }
  .door__who { top: -40px; bottom: auto; right: 8px; height: 118px; max-width: 60%; }
}
@media (min-width: 760px) {
  .doors__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--s5); }
  .door { min-height: 210px; padding: var(--s5); }
  .door__who { height: 128%; right: 4%; }
}

/* ================= STORY BAND ================= */
.story-band { background: var(--navy); color: var(--snow); padding: var(--s8) 0; border-block: var(--ink); }
.story-band__inner { display: grid; gap: var(--s6); align-items: center; }
.story-feature { display: block; text-decoration: none; }
.story-feature__media {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border: 4px solid var(--sun); border-radius: var(--r-tile);
  background: var(--lake);
  box-shadow: 0 8px 0 var(--sun-dark);
  transition: transform var(--t-med) var(--ease-pop);
}
.story-feature:hover .story-feature__media { transform: rotate(-1deg) scale(1.01); }
.story-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.story-feature__media img.is-cutout, .story-mini__face img.is-cutout { object-fit: contain; object-position: bottom; padding-top: 6%; }
.play {
  position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; translate: -50% -50%;
  border-radius: 50%; background: var(--tie); border: 4px solid var(--snow);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .3);
}
.play::after {
  content: ""; position: absolute; left: 36px; top: 26px;
  border-style: solid; border-width: 18px 0 18px 28px; border-color: transparent transparent transparent var(--snow);
}
.play--small { width: 58px; height: 58px; border-width: 3px; }
.play--small::after { left: 22px; top: 15px; border-width: 11px 0 11px 17px; }

.story-band__kicker { color: var(--sun); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--s2); }
.story-band h2 { font-size: var(--text-2xl); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 var(--s5); }
.tags li {
  padding: 0.3rem 0.8rem; border-radius: var(--r-pill);
  background: var(--navy-2); font-weight: 700; font-size: var(--text-sm);
}
.tags .tags__time { background: var(--sun); color: var(--navy); }

.story-row {
  list-style: none; display: grid; gap: var(--s4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s7);
}
.story-mini {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; background: var(--navy-2); border-radius: 20px; overflow: hidden;
  border: 3px solid transparent;
}
.story-mini:hover { border-color: var(--sun); }
.story-mini__face { position: relative; aspect-ratio: 16 / 10; background: var(--lake); display: block; overflow: hidden; flex: none; }
.story-mini__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-mini__title { padding: var(--s3) var(--s4) var(--s4); font-weight: 700; line-height: 1.3; }
.story-mini--all {
  justify-content: center; align-items: center; text-align: center;
  background: var(--sun); color: var(--navy); min-height: 120px; border-color: var(--navy);
}
.story-mini--all:hover { border-color: var(--snow); }
.story-mini--all .story-mini__title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
@media (min-width: 900px) {
  .story-band__inner { grid-template-columns: 1.15fr 1fr; gap: var(--s8); }
  .story-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ================= MEET THE GANG ================= */
.gang { background: var(--sun); padding: var(--s8) 0 var(--s7); border-bottom: var(--ink); overflow: hidden; }
.gang__row {
  list-style: none; display: flex; gap: var(--s3);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: var(--s5) max(var(--gutter), (100% - var(--max)) / 2) var(--s5);
}
.gang__row::-webkit-scrollbar { display: none; }
.gang__row li { scroll-snap-align: start; flex: none; }
.friend {
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  width: 132px; padding: 0; border: 0; background: none; cursor: pointer;
}
.friend img {
  height: 210px; width: auto;
  transform-origin: 50% 100%;
  transition: transform var(--t-med) var(--ease-pop);
}
.friend:hover img, .friend:focus-visible img { transform: translateY(-12px) rotate(-3deg); }
.friend:active img { transform: translateY(0) scale(.96); }
.friend__name {
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1;
  padding: 0.45rem 1rem; background: var(--snow); border: var(--ink); border-radius: var(--r-pill);
  box-shadow: 0 4px 0 var(--navy);
}
@media (min-width: 760px) { .friend { width: 150px; } .friend img { height: 250px; } }

.profile {
  width: min(760px, 100% - 2rem); padding: 0; border: var(--ink); border-radius: 32px;
  box-shadow: 0 12px 0 var(--navy); color: var(--navy); overflow: hidden;
}
.profile[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); animation: dialog-in 320ms var(--ease-pop); }
/* The picture stays put and the words scroll inside the card, so nothing is cut off on short screens. */
.profile__body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 0; }
.profile::backdrop { background: rgba(24, 33, 88, .7); }
.profile__art { background: var(--lake); display: grid; place-items: end center; padding-top: var(--s5); border-bottom: var(--ink); }
.profile__art img { height: min(260px, 32vh); width: auto; }
.profile h3:focus { outline: none; }
.profile__body { padding: var(--s5) var(--s5) var(--s6); }
.profile h3 { font-size: var(--text-2xl); margin-bottom: var(--s1); }
.profile__role { font-weight: 700; color: var(--tie-dark); }
.profile dl { margin: var(--s4) 0; display: grid; gap: var(--s1) var(--s4); }
.profile dt { font-family: var(--font-display); font-size: 1.15rem; }
.profile dd { margin: 0 0 var(--s3); }
.profile__quote {
  font-family: var(--font-display); font-size: 1.45rem; line-height: 1.2;
  background: var(--sun); border: var(--ink); border-radius: 20px; padding: var(--s3) var(--s4);
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(30px) scale(.95); } to { opacity: 1; transform: none; } }
@media (min-width: 700px) {
  .profile[open] { grid-template-columns: 260px 1fr; grid-template-rows: minmax(0, 1fr); }
  .profile__art { border-bottom: 0; border-right: var(--ink); place-items: end center; }
  .profile__art img { height: 380px; }
}

/* ================= BOOKSHELF ================= */
.shelf { padding: var(--s8) 0; }
.shelf__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.shelf__row {
  list-style: none; display: grid; gap: var(--s6) var(--s5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s5);
}
.book { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.book__cover {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border: var(--ink); border-radius: 6px 18px 18px 6px;
  box-shadow: 8px 8px 0 var(--navy);
  transition: transform var(--t-med) var(--ease-pop);
}
.book:nth-child(odd) .book__cover { transform: rotate(-2deg); }
.book:nth-child(even) .book__cover { transform: rotate(1.5deg); }
.book:hover .book__cover { transform: rotate(0) translateY(-6px); }
.book__title { font-size: 1.3rem; line-height: 1.15; margin: var(--s2) 0 0; }
@media (min-width: 760px) { .shelf__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ================= SING AND WATCH ================= */
.sing { background: rgba(255, 255, 255, .35); padding: var(--s8) 0; border-block: var(--ink); }
.sing__inner { display: grid; gap: var(--s7); }
.clips { list-style: none; display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clip { display: flex; flex-direction: column; gap: var(--s2); text-decoration: none; height: 100%; }
.clip__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border: var(--ink); border-radius: 18px; background: var(--lake);
  box-shadow: 0 5px 0 var(--navy);
  transition: transform var(--t-fast) var(--ease-out);
}
.clip:hover .clip__thumb { transform: translateY(-3px); }
.clip__thumb img { width: 100%; height: 100%; object-fit: cover; }
.clip__title { font-weight: 700; line-height: 1.3; }
.clip__time { font-size: var(--text-sm); color: var(--navy-2); }

.songbook {
  align-self: start; background: var(--snow); border: var(--ink); border-radius: var(--r-tile);
  box-shadow: var(--lift); padding: var(--s5);
}
.songbook h3 { font-size: var(--text-xl); }
.songbook__list { list-style: none; counter-reset: song; margin-bottom: var(--s5); }
.songbook__list li {
  counter-increment: song; display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: baseline;
  gap: var(--s2); padding: 0.6rem 0; border-bottom: 2px dashed var(--lake-pale); font-weight: 700;
}
.songbook__list li::before { content: counter(song); font-family: var(--font-display); font-size: 1.3rem; color: var(--tie); }
.songbook__time { font-weight: 400; font-size: var(--text-sm); }
@media (min-width: 960px) { .sing__inner { grid-template-columns: 1.6fr 1fr; align-items: start; } }

/* ================= CASE CLUB ================= */
.club { background: var(--tie); color: var(--snow); padding: var(--s8) 0 0; overflow: hidden; border-bottom: var(--ink); }
.club__inner { display: grid; gap: var(--s5); }
.club h2 { font-size: var(--text-2xl); text-shadow: 0 4px 0 var(--tie-dark); }
.club__perks { list-style: none; display: grid; gap: var(--s3); margin-bottom: var(--s6); font-size: var(--text-lg); font-weight: 700; }
.club__perks li { display: flex; gap: var(--s3); align-items: center; }
.club__perks li::before {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle, var(--sun) 0 52%, var(--sun-dark) 53% 60%, var(--sun) 61%);
  border: 2px solid var(--navy);
}
.club__actions { display: flex; flex-wrap: wrap; gap: var(--s4); }
.club__plus { margin-top: var(--s5); font-weight: 700; }
.club__plus a { color: var(--sun); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.club__art { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 280px; }
.club__art img { height: 320px; width: auto; position: relative; z-index: 1; margin-bottom: -6px; }
.coin--huge {
  position: absolute; width: 230px; height: 230px; left: 50%; top: 10px; translate: -40% 0;
  border-width: 4px; box-shadow: 0 8px 0 var(--tie-dark);
}
.club .wrap { padding-bottom: 0; }
.club__copy { padding-bottom: var(--s6); }
@media (min-width: 900px) {
  .club__inner { grid-template-columns: 1.3fr 1fr; align-items: end; }
  .club__copy { padding-bottom: var(--s8); }
  .club__art img { height: 420px; }
  .coin--huge { width: 300px; height: 300px; top: 0; }
}

/* ================= GROWN UPS (calmer) ================= */
.grownups { padding: var(--s8) 0; }
.section-title--quiet { font-size: var(--text-xl); }
.grownups__grid { display: grid; gap: var(--s4); }
.grownup {
  display: block; text-decoration: none; padding: var(--s5);
  border: 2px solid #c9d6ea; border-radius: 20px; background: var(--snow);
  transition: border-color var(--t-fast);
}
.grownup:hover { border-color: var(--navy); }
.grownup h3 { font-size: 1.4rem; margin-bottom: var(--s2); }
.grownup p { margin: 0; font-size: 1.02rem; }
@media (min-width: 760px) { .grownups__grid { grid-template-columns: repeat(3, 1fr); } }

/* ================= NEWSLETTER ================= */
.letter { background: rgba(255, 255, 255, .55); padding: var(--s7) 0; border-top: var(--ink); }
.letter__inner { display: grid; gap: var(--s5); align-items: center; }
.letter h2 { font-size: var(--text-xl); margin-bottom: var(--s2); }
.letter p { margin: 0; }
.letter__form { display: grid; gap: var(--s3); }
.letter__form input, .letter__form select {
  min-height: 52px; padding: 0 var(--s4); border: var(--ink); border-radius: 14px; background: var(--snow);
}
.letter__status { min-height: 1.5em; font-weight: 700; }
.letter__status.is-error { color: var(--tie-dark); }
.hp { position: absolute; left: -9999px; }
@media (min-width: 900px) {
  .letter__inner { grid-template-columns: 1fr 1.2fr; }
  .letter__form { grid-template-columns: 1.4fr 1fr auto; }
  .letter__status { grid-column: 1 / -1; }
}

.profile__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.profile__actions form { margin: 0; }

/* Homepage promotion slot (CaseDash > Site Controls) */
.promo { --tone: var(--sun); --ink-c: var(--navy); background: var(--tone); color: var(--ink-c); border-block: var(--ink); position: relative; overflow: hidden;
  background-image: radial-gradient(rgba(255,255,255,.22) 2px, transparent 2.5px); background-size: 22px 22px; }
.promo--tie { --tone: var(--tie); --ink-c: var(--snow); } .promo--lake { --tone: var(--lake); --ink-c: var(--snow); }
.promo--meadow { --tone: var(--meadow); --ink-c: var(--snow); } .promo--fox { --tone: var(--fox); --ink-c: var(--snow); } .promo--navy { --tone: var(--navy); --ink-c: var(--snow); }
.promo__inner { display: grid; gap: var(--s4) var(--s6); align-items: center; padding-block: var(--s6); }
.promo__img { width: auto; max-width: 260px; max-height: 220px; border-radius: 18px; border: var(--ink); box-shadow: 0 6px 0 var(--navy); transform: rotate(-2deg); justify-self: center; }
.promo h2 { font-size: var(--text-2xl); line-height: 1; color: inherit; margin-bottom: var(--s2); }
.promo--tie h2, .promo--lake h2, .promo--meadow h2, .promo--fox h2, .promo--navy h2 { text-shadow: 0 3px 0 var(--navy); }
.promo p { font-size: var(--text-lg); font-weight: 700; margin: 0; max-width: 52ch; }
.promo__btn { justify-self: start; }
@media (min-width: 820px) {
  .promo__inner { grid-template-columns: auto 1fr auto; }
  .promo__inner:not(:has(.promo__img)) { grid-template-columns: 1fr auto; }
  .promo__img { max-width: 200px; }
}
.letter__consent { grid-column: 1 / -1; flex-basis: 100%; margin: 0; font-size: .85rem; opacity: .9; }
.letter__consent a { color: inherit; font-weight: 700; }