/* Small Town Mahj — tabletop refinement pass
   Keep the cobalt mat continuous and make the viewport edge feel like a real floral Mahj mat. */

:root {
  --frame-size: clamp(30px, 3.25vw, 50px);
}

body {
  padding: var(--frame-size);
  background: #fff9ee;
}

/* A fixed fabric-like floral frame: cream ground, cobalt vines, blue flowers,
   green leaves, and tiny coral/orange accents. It stays at the browser edge
   while the tabletop moves beneath it, so the viewport itself reads as the mat. */
body::before {
  position: fixed;
  z-index: 1000;
  inset: 0;
  border: var(--frame-size) solid transparent;
  border-image-source: url('/decor/tabletop-fabric-frame.svg');
  border-image-slice: 42;
  border-image-repeat: round;
  content: '';
  pointer-events: none;
}

body::after {
  position: fixed;
  z-index: 999;
  inset: calc(var(--frame-size) - 4px);
  border: 4px solid #153c75;
  box-shadow: 0 0 0 2px rgba(255,249,238,.94), inset 0 0 0 1px rgba(126,166,213,.75);
  content: '';
  pointer-events: none;
}

.tabletop-shell {
  border: 0;
  background-color: #062b67;
  box-shadow:
    0 16px 44px rgba(2,25,64,.28),
    inset 0 0 78px rgba(0,13,45,.38);
}

/* The older inner geometric frame made the mat feel boxed-in. The floral
   viewport edge now does that job, so this becomes only a faint stitched seam. */
.tabletop-shell::before {
  inset: 11px;
  border: 1px solid rgba(255,250,240,.18);
  background: none;
  opacity: 1;
}

/* ---------------------------------------------------------
   Traveling table — styled overhead setup instead of infographic
   --------------------------------------------------------- */
.travel-stage {
  grid-template-columns: minmax(290px,.72fr) minmax(520px,1.28fr);
  gap: clamp(3rem,7vw,7rem);
}

.travel-table--scene {
  width: min(660px,55vw);
  aspect-ratio: auto;
  display: grid;
  justify-items: center;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}

.travel-table--scene::before,
.travel-table--scene::after {
  display: none;
}

.travel-table__cloth {
  position: relative;
  width: 100%;
  aspect-ratio: 1.16;
  border: 2px solid rgba(255,250,240,.72);
  border-radius: 30px 25px 33px 27px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.05), transparent 42%),
    repeating-linear-gradient(74deg,rgba(255,255,255,.018) 0 1px,transparent 1px 6px),
    #0a376f;
  box-shadow:
    0 30px 52px rgba(0,8,30,.34),
    inset 0 0 0 10px rgba(255,250,240,.055),
    inset 0 0 48px rgba(0,10,35,.18);
  transform: rotate(1.2deg);
}

.travel-table__cloth::before {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255,250,240,.14);
  border-radius: 20px;
  content: '';
}

.travel-table__center-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 108px;
  aspect-ratio: .92;
  align-content: center;
  justify-items: center;
  border: 2px solid #124d98;
  border-radius: 8px 7px 10px 6px;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.9),transparent 28%),
    #fffaf0;
  box-shadow: 0 6px 0 #c6b69e,0 13px 20px rgba(0,10,35,.26);
  color: #124d98;
  transform: translate(-50%,-50%) rotate(-2deg);
}

.travel-table__center-mark small {
  margin-bottom: .32rem;
  color: #e26358;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.travel-table__center-mark strong {
  font-family: var(--serif);
  font-size: 1.16rem;
  letter-spacing: .16em;
}

.travel-rack {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 5px;
  padding: 4px 7px 8px;
  border-radius: 5px 5px 8px 8px;
  background: linear-gradient(180deg,#3f70a3,#082d64 72%);
  box-shadow: 0 7px 13px rgba(0,9,30,.28),inset 0 1px rgba(255,255,255,.18);
}

.travel-rack i {
  display: block;
  width: 27px;
  aspect-ratio: .72;
  border: 1px solid rgba(18,77,152,.55);
  border-radius: 3px;
  background:
    radial-gradient(circle at 22% 15%,rgba(255,255,255,.9),transparent 30%),
    #fffaf0;
  box-shadow: 0 2px 0 #c8b89f;
}

.travel-rack i:nth-child(2n)::after {
  display: block;
  width: 8px;
  aspect-ratio: 1;
  margin: 10px auto 0;
  border: 1px solid #124d98;
  border-radius: 50%;
  background: #e26358;
  content: '';
}

.travel-rack--north { top: 9%; left: 50%; transform: translateX(-50%) rotate(-1deg); }
.travel-rack--south { right: auto; bottom: 9%; left: 50%; transform: translateX(-50%) rotate(1deg); }
.travel-rack--east,
.travel-rack--west { flex-direction: column; padding: 7px 8px 7px 4px; }
.travel-rack--east { top: 50%; right: 8%; transform: translateY(-50%) rotate(1deg); }
.travel-rack--west { top: 50%; left: 8%; transform: translateY(-50%) rotate(-1deg); }
.travel-rack--east i,
.travel-rack--west i { width: 23px; }
.travel-rack--east i:nth-child(2n)::after,
.travel-rack--west i:nth-child(2n)::after { margin-top: 8px; }

.travel-place {
  position: absolute;
  z-index: 3;
  color: rgba(255,250,240,.9);
  font-family: var(--serif);
  font-size: clamp(.95rem,1.25vw,1.2rem);
  font-style: italic;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,10,35,.32);
}
.travel-place--north { top: 1.5%; left: 50%; transform: translateX(-50%) rotate(-2deg); }
.travel-place--east { top: 50%; right: -1.5%; transform: translate(54%,-50%) rotate(90deg); }
.travel-place--south { bottom: 1%; left: 50%; transform: translateX(-50%) rotate(1deg); }
.travel-place--west { top: 50%; left: -2%; transform: translate(-51%,-50%) rotate(-90deg); }

.travel-loose-tile {
  position: absolute;
  z-index: 2;
  width: 38px;
  aspect-ratio: .72;
  border: 1px solid rgba(18,77,152,.6);
  border-radius: 4px;
  background: #fffaf0;
  box-shadow: 0 4px 0 #c6b79f,0 8px 12px rgba(0,10,35,.23);
}
.travel-loose-tile::before {
  position: absolute;
  inset: 10px;
  border: 2px solid #e26358;
  border-radius: 50%;
  content: '';
}
.travel-loose-tile--one { top: 27%; left: 29%; transform: rotate(-14deg); }
.travel-loose-tile--two { right: 27%; bottom: 28%; transform: rotate(9deg); }
.travel-loose-tile--three { right: 31%; top: 28%; transform: rotate(-4deg); }

.travel-table__more {
  margin: 1.25rem 0 0;
  color: rgba(255,250,240,.68) !important;
  font-family: var(--serif);
  font-size: clamp(.9rem,1.2vw,1.05rem);
  font-style: italic;
  letter-spacing: .025em;
  text-align: center;
}
.travel-table__more span { margin-inline: .45rem; color: #efb441; }

.has-js .travel-table--scene[data-place] {
  opacity: 0;
  transform: translateY(26px) rotate(1deg);
}
.has-js .travel-table--scene[data-place][data-visible='true'] {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

/* ---------------------------------------------------------
   Never played? — blush is an object ON the table
   --------------------------------------------------------- */
.beginner-chapter {
  background: transparent;
  color: #17385f;
  padding-top: clamp(5rem,9vw,8rem);
  padding-bottom: clamp(5rem,9vw,8rem);
}

.beginner-chapter::after { display: none; }

.beginner-stage {
  position: relative;
  width: min(1120px,calc(100vw - 120px));
  grid-template-columns: minmax(280px,.8fr) minmax(480px,1.2fr);
  gap: clamp(2.2rem,5vw,5rem);
  padding: clamp(2.3rem,4vw,4rem);
  border: 2px solid rgba(18,77,152,.72);
  border-radius: 24px 15px 26px 17px;
  background:
    radial-gradient(circle at 88% 17%,rgba(255,255,255,.66),transparent 26rem),
    linear-gradient(145deg,#f8dfdc,#f3cfcb 55%,#f6ddd8);
  box-shadow:
    0 9px 0 #d6b9b3,
    0 13px 0 rgba(3,31,73,.48),
    0 34px 48px rgba(0,10,35,.3),
    inset 0 0 0 7px rgba(255,255,255,.2);
  transform: rotate(-.35deg);
}

.beginner-stage::before {
  position: absolute;
  right: -4rem;
  bottom: -3.5rem;
  width: 22rem;
  height: 16rem;
  background: url('/decor/porcelain-sprig.svg') center / contain no-repeat;
  content: '';
  opacity: .11;
  pointer-events: none;
  transform: rotate(-11deg);
}

.beginner-heading,
.reassurance-rack { position: relative; z-index: 1; }

.beginner-heading h2 {
  font-size: clamp(3.6rem,6.5vw,6.4rem);
}

.reassurance-tile {
  min-height: 205px;
  padding: 1rem;
}

.reassurance-tile__mark {
  margin-bottom: .9rem;
  font-size: 3rem;
}

.reassurance-tile strong {
  font-size: clamp(1.2rem,1.65vw,1.55rem);
}

.reassurance-tile small { margin-top: .5rem; }

/* ---------------------------------------------------------
   Process — hand sits directly on cobalt table
   --------------------------------------------------------- */
.hand-chapter {
  background: transparent;
  color: rgba(255,250,240,.88);
}

.hand-chapter .eyebrow { color: #efb441; }
.hand-chapter h2 { color: #fffaf0; }
.hand-chapter .hand-heading p { color: rgba(255,250,240,.72); }
.hand-tile h3 { color: #082f67; }
.hand-tile p { color: #536982; }

.mahj-hand__rack {
  background: linear-gradient(180deg,#497bad,#082f67 72%);
  box-shadow: 0 10px 18px rgba(0,9,32,.38),inset 0 1px rgba(255,255,255,.22);
}

.hand-stage {
  padding-top: clamp(1rem,2vw,2rem);
  padding-bottom: clamp(1rem,2vw,2rem);
}

/* ---------------------------------------------------------
   Footer — quiet maker's-mark ending, not a second CTA page
   --------------------------------------------------------- */
.site-footer__top {
  grid-template-columns: minmax(240px,.8fr) minmax(280px,1fr) minmax(280px,1fr);
  align-items: center;
  gap: 2rem;
  padding-block: 2.7rem;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-footer__brand img {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  margin: 0;
  border-width: 4px;
}

.site-footer__brand p {
  max-width: 12rem;
  font-size: 1rem;
  line-height: 1.25;
}

.site-footer__invitation h2 {
  max-width: none;
  margin-bottom: .7rem;
  font-size: clamp(1.8rem,2.7vw,2.7rem);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .7rem 1.15rem;
}

.site-footer__bottom {
  padding-block: 1rem 1.35rem;
  font-size: .7rem;
}

/* ---------------------------------------------------------
   Tablet + mobile rhythm
   --------------------------------------------------------- */
@media (max-width: 980px) {
  :root { --frame-size: 22px; }

  .travel-stage { grid-template-columns: 1fr; gap: 2.7rem; }
  .travel-table--scene { width: min(650px,78vw); justify-self: center; margin-top: .5rem; }

  .beginner-stage {
    width: min(760px,calc(100vw - 76px));
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  :root { --frame-size: 16px; }

  body { padding: var(--frame-size); }

  body::after {
    inset: calc(var(--frame-size) - 3px);
    border-width: 3px;
  }

  .tabletop-shell::before {
    inset: 7px;
    opacity: .62;
  }

  /* Keep the opening dramatic, but stop it occupying almost two phone screens. */
  .tabletop-hero {
    min-height: 690px;
    padding-bottom: 2.8rem;
  }

  .hero-stage { min-height: 650px; }

  .hero-tile {
    min-height: 545px;
    padding: 2.8rem 1.3rem 7.8rem;
  }

  .table-chapter { padding: 4.25rem 0; }

  .travel-chapter { padding-top: 3.8rem; padding-bottom: 4.6rem; }
  .travel-copy h2 { font-size: clamp(3.15rem,12.5vw,4.2rem); }
  .travel-table--scene { width: calc(100vw - 72px); margin-top: .3rem; }
  .travel-table__cloth { border-radius: 18px 15px 20px 16px; }
  .travel-table__cloth::before { inset: 12px; }
  .travel-table__center-mark { width: 72px; }
  .travel-table__center-mark small { font-size: .36rem; }
  .travel-table__center-mark strong { font-size: .8rem; }

  .travel-rack { gap: 3px; padding: 3px 5px 6px; }
  .travel-rack i { width: 18px; }
  .travel-rack--east,
  .travel-rack--west { padding: 5px 6px 5px 3px; }
  .travel-rack--east i,
  .travel-rack--west i { width: 16px; }
  .travel-rack i:nth-child(2n)::after { width: 5px; margin-top: 6px; }
  .travel-place { font-size: .72rem; }
  .travel-place--east { right: -2.5%; }
  .travel-place--west { left: -3%; }
  .travel-loose-tile { width: 27px; }
  .travel-loose-tile::before { inset: 7px; border-width: 1px; }
  .travel-table__more { max-width: 18rem; margin-top: .9rem; font-size: .78rem; line-height: 1.5; }
  .travel-table__more span { margin-inline: .25rem; }

  .beginner-chapter { padding: 4rem 0; }

  .beginner-stage {
    width: calc(100vw - 52px);
    gap: 1.8rem;
    padding: 2.25rem .85rem 1.6rem;
    border-radius: 18px 11px 20px 12px;
    transform: none;
  }

  .beginner-stage::before {
    right: -6rem;
    bottom: -4rem;
    width: 18rem;
    height: 13rem;
  }

  .beginner-heading h2 {
    margin-bottom: 1rem;
    font-size: clamp(3rem,13vw,3.9rem);
  }

  .beginner-heading > p:last-child { font-size: 1.08rem; }

  /* Three compact tiles now read as one hand, instead of three full-screen cards. */
  .reassurance-rack {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .42rem;
    padding: 0 .1rem .85rem;
  }

  .reassurance-rack::after { height: 13px; }

  .reassurance-tile {
    min-height: 148px;
    padding: .65rem .3rem;
    border-radius: 6px 5px 7px 5px;
    box-shadow: 0 4px 0 #c8b89e,0 9px 15px rgba(48,57,80,.16),inset 0 0 0 3px rgba(255,255,255,.4);
  }

  .reassurance-tile__mark {
    margin-bottom: .6rem;
    font-size: 2rem;
  }

  .reassurance-tile strong {
    font-size: clamp(.88rem,3.6vw,1rem);
    line-height: 1.05;
  }

  .reassurance-tile small {
    margin-top: .35rem;
    font-size: .47rem;
    letter-spacing: .09em;
  }

  .memories-stage { gap: 1.2rem; }
  .photo-shuffle { min-height: 440px; }

  .hand-chapter {
    padding-top: 4.5rem;
    padding-bottom: 4.8rem;
  }

  .dates-stage { gap: 2.25rem; }

  .seat-chapter { min-height: 680px; }
  .seat-stage { min-height: 580px; }
  .seat-tile { min-height: 440px; }

  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 1.55rem;
    padding-block: 2.15rem;
  }

  .site-footer__brand {
    gap: .85rem;
  }

  .site-footer__brand img {
    width: 76px;
    height: 76px;
  }

  .site-footer__brand p {
    max-width: 11rem;
    font-size: .92rem;
  }

  .site-footer__invitation h2 {
    margin-bottom: .45rem;
    font-size: 2rem;
  }

  .site-footer__nav {
    grid-column: auto;
    justify-content: flex-start;
    gap: .55rem .9rem;
  }

  .site-footer__bottom {
    gap: .45rem;
    padding-block: .85rem 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .travel-table--scene[data-place] { transform: none !important; }
}