/* Source: /styles/global.css */
:root {
  --ink: #123866;
  --blue: #14509a;
  --blue-deep: #0a3e84;
  --blue-soft: #7da8d6;
  --blue-pale: #dce9f5;
  --ivory: #f7f1e6;
  --paper: #fffdf8;
  --white: #ffffff;
  --gold: #e6a22b;
  --orange: #e98529;
  --coral: #ef7869;
  --blush: #f6d8d4;
  --green: #4d7c3a;
  --green-soft: #dfe9d8;
  --text: #24374d;
  --muted: #687587;
  --line: rgba(20, 80, 154, 0.22);
  --shadow: 0 28px 70px rgba(17, 50, 91, 0.12);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --shell: min(1180px, calc(100vw - 40px));
  --section: clamp(5rem, 10vw, 9rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--ivory);
  color-scheme: light;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 6%, rgba(125, 168, 214, 0.08), transparent 24rem),
    linear-gradient(180deg, #fffdf9 0%, var(--ivory) 58%, #f3eadc 100%);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

::selection {
  background: var(--blue-pale);
  color: var(--blue-deep);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-150%);
  border: 2px solid var(--blue);
  background: var(--paper);
  color: var(--blue-deep);
  padding: 0.7rem 1rem;
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.narrow {
  width: min(760px, calc(100vw - 40px));
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  line-height: 1.3;
  text-transform: uppercase;
}

.display,
h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(3.6rem, 8.5vw, 8.25rem);
}

h2 {
  font-size: clamp(2.65rem, 5vw, 5.2rem);
}

h3 {
  font-size: clamp(1.7rem, 2.5vw, 2.55rem);
}

.lede {
  max-width: 42rem;
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  line-height: 1.7;
}

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--blue-deep);
  border-radius: 2px;
  background: var(--blue-deep);
  color: var(--white);
  gap: 0.75rem;
  padding: 0.85rem 1.3rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.button:hover {
  background: var(--blue);
  transform: translateY(-2px);
}

.button--outline {
  background: transparent;
  color: var(--blue-deep);
}

.button--outline:hover {
  background: rgba(20, 80, 154, 0.07);
}

.button--small {
  min-height: 42px;
  padding: 0.65rem 0.95rem;
  font-size: 0.68rem;
}

.button[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.text-link {
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid currentColor;
  color: var(--blue-deep);
  gap: 0.5rem;
  padding-bottom: 0.18rem;
  font-weight: 800;
  text-decoration: none;
}

.text-link span {
  transition: transform 180ms ease;
}

.text-link:hover span {
  transform: translateX(0.3rem);
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(20, 80, 154, 0.14);
  background: rgba(255, 253, 248, 0.93);
  backdrop-filter: blur(14px);
}

.site-header__inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.wordmark {
  color: var(--blue-deep);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav ul a {
  position: relative;
  color: #405064;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.site-nav ul a::after {
  position: absolute;
  right: 0;
  bottom: -0.45rem;
  left: 0;
  height: 2px;
  background: var(--blue);
  content: '';
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 150ms ease, transform 150ms ease;
}

.site-nav ul a:hover::after,
.site-nav ul a[aria-current='page']::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--blue-deep);
  gap: 0.65rem;
  padding: 0;
}

.nav-toggle__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.nav-toggle__lines {
  display: grid;
  gap: 5px;
}

.nav-toggle__lines i {
  display: block;
  width: 21px;
  height: 2px;
  background: currentColor;
  transition: transform 180ms ease;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: calc(100svh - 76px);
  padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(4.5rem, 8vw, 7rem);
}

.hero::before {
  position: absolute;
  z-index: -2;
  top: 8%;
  right: -5rem;
  width: min(42vw, 36rem);
  aspect-ratio: 1;
  border: 1px solid rgba(20, 80, 154, 0.13);
  border-radius: 48% 52% 44% 56% / 53% 48% 52% 47%;
  content: '';
  transform: rotate(8deg);
}

.hero::after {
  position: absolute;
  z-index: -1;
  right: -2rem;
  bottom: 1rem;
  width: 17rem;
  height: 11rem;
  background: url('/decor/porcelain-sprig.svg') center / contain no-repeat;
  content: '';
  opacity: 0.7;
  transform: rotate(-7deg);
}

.hero__grid {
  display: grid;
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  grid-template-columns: minmax(0, 1.06fr) minmax(330px, 0.94fr);
}

.hero__copy {
  position: relative;
  z-index: 2;
}

.hero h1 {
  max-width: 7.2em;
  margin-bottom: 1.65rem;
}

.hero__copy .lede {
  max-width: 40rem;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.hero__brand {
  position: relative;
  display: grid;
  place-items: center;
}

.hero__brand::before {
  position: absolute;
  width: 85%;
  aspect-ratio: 1;
  border: 2px solid var(--blue-soft);
  border-radius: 50% 48% 52% 46% / 48% 52% 46% 54%;
  content: '';
  opacity: 0.35;
  transform: rotate(-4deg);
}

.hero__brand img {
  position: relative;
  width: min(100%, 570px);
  aspect-ratio: 1;
  object-fit: contain;
  box-shadow: 0 34px 60px rgba(20, 63, 126, 0.08);
}

.hero__notes {
  display: grid;
  margin-top: 3.3rem;
  border-top: 1px solid var(--line);
  color: var(--blue-deep);
  grid-template-columns: repeat(3, 1fr);
}

.hero__notes span {
  padding: 1rem 1rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
}

.hero__notes span + span {
  border-left: 1px solid var(--line);
  padding-left: 1rem;
}

.promise-band {
  position: relative;
  overflow: hidden;
  border-block: 2px solid var(--blue-deep);
  background: var(--blue-deep);
  color: var(--white);
}

.promise-band::before,
.promise-band::after {
  position: absolute;
  top: 50%;
  width: 11rem;
  height: 7rem;
  background: url('/decor/porcelain-sprig.svg') center / contain no-repeat;
  content: '';
  filter: brightness(0) invert(1);
  opacity: 0.12;
}

.promise-band::before {
  left: -2rem;
  transform: translateY(-50%);
}

.promise-band::after {
  right: -2rem;
  transform: translateY(-50%) scaleX(-1);
}

.promise-band__inner {
  display: grid;
  min-height: 168px;
  place-items: center;
  padding: 2rem;
  text-align: center;
}

.promise-band p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 3.8rem);
  line-height: 1.1;
}

.section {
  padding-block: var(--section);
}

.section--paper {
  background: var(--paper);
}

.section--blue {
  background: var(--blue-deep);
  color: rgba(255, 255, 255, 0.88);
}

.section--blue h2,
.section--blue h3,
.section--blue .eyebrow,
.section--blue .text-link {
  color: var(--white);
}

.section-intro {
  display: grid;
  align-items: end;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.section-intro h2 {
  max-width: 9em;
  margin-bottom: 0;
}

.section-intro p:last-child {
  max-width: 35rem;
  margin-bottom: 0;
}

.gathering-ledger {
  border-top: 2px solid var(--blue-deep);
}

.gathering-row {
  display: grid;
  min-height: 230px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  gap: 2rem;
  grid-template-columns: 90px minmax(220px, 0.8fr) minmax(280px, 1.2fr) minmax(180px, 0.6fr);
  padding: 2rem 0;
}

.gathering-row__number {
  align-self: start;
  color: var(--coral);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
}

.gathering-row h3 {
  margin-bottom: 0;
}

.gathering-row p {
  margin-bottom: 0;
}

.gathering-row__examples {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-transform: uppercase;
}

.ceramic-divider {
  display: grid;
  width: min(360px, 82vw);
  align-items: center;
  grid-template-columns: 1fr auto auto auto 1fr;
  gap: 0.55rem;
  margin: 2.4rem auto;
}

.ceramic-divider span {
  height: 1px;
  background: var(--blue-soft);
}

.ceramic-divider i,
.ceramic-divider b {
  display: block;
  width: 9px;
  aspect-ratio: 1;
  transform: rotate(45deg);
}

.ceramic-divider i {
  border: 1px solid var(--blue);
}

.ceramic-divider b {
  background: var(--gold);
}

.ceramic-divider--warm b {
  background: var(--coral);
}

.beginner {
  position: relative;
  display: grid;
  min-height: 600px;
  align-items: center;
  gap: 5rem;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
}

.beginner::before {
  position: absolute;
  z-index: 0;
  top: -4rem;
  left: -8rem;
  width: 23rem;
  height: 15rem;
  background: url('/decor/porcelain-sprig.svg') center / contain no-repeat;
  content: '';
  opacity: 0.42;
  transform: rotate(13deg);
}

.beginner__copy,
.beginner__note {
  position: relative;
  z-index: 1;
}

.beginner h2 {
  max-width: 7.4em;
  margin-bottom: 1.5rem;
  font-size: clamp(4rem, 8vw, 8.8rem);
}

.beginner__note {
  border: 1px solid var(--blue-soft);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: clamp(2rem, 4vw, 3.3rem);
  transform: rotate(1.2deg);
}

.beginner__note::before {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  left: 12px;
  border: 1px solid rgba(20, 80, 154, 0.18);
  content: '';
  pointer-events: none;
}

.beginner__note p {
  position: relative;
  margin-bottom: 1.2rem;
  font-family: var(--serif);
  font-size: 1.35rem;
}

.beginner__note p:last-child {
  margin-bottom: 0;
}

.story-tease {
  display: grid;
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
}

.photo-placeholder {
  position: relative;
  margin: 0;
}

.photo-placeholder__surface {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--photo-ratio);
  border: 2px solid var(--blue-deep);
  background:
    linear-gradient(rgba(20, 80, 154, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 80, 154, 0.07) 1px, transparent 1px),
    linear-gradient(145deg, #fdfbf5, #e6eef6);
  background-size: 32px 32px, 32px 32px, auto;
}

.photo-placeholder__surface::before {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  left: 12px;
  border: 1px solid var(--blue-soft);
  content: '';
}

.photo-placeholder__surface::after {
  position: absolute;
  right: -2rem;
  bottom: -1rem;
  width: 65%;
  height: 38%;
  background: url('/decor/porcelain-sprig.svg') right bottom / contain no-repeat;
  content: '';
  opacity: 0.5;
}

.photo-placeholder__tile {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 31%;
  aspect-ratio: 0.76;
  border: 2px solid var(--blue);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.8);
  box-shadow: 0 16px 30px rgba(20, 80, 154, 0.08);
  transform: translate(-50%, -50%) rotate(-5deg);
}

.photo-placeholder__tile::after {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--blue);
  content: '•';
  font-family: var(--serif);
  font-size: 4rem;
  transform: translate(-50%, -50%);
}

.photo-placeholder__sprig {
  position: absolute;
  top: 12%;
  left: 12%;
  color: var(--coral);
  font-family: var(--serif);
  font-size: 4rem;
  transform: rotate(28deg);
}

.photo-placeholder figcaption {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.9rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.photo-placeholder figcaption strong {
  color: var(--blue-deep);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.story-tease__copy h2 {
  max-width: 9em;
  margin-bottom: 1.5rem;
}

.story-tease__copy p {
  max-width: 39rem;
}

.process {
  position: relative;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 4rem;
}

.process::before {
  position: absolute;
  top: 25px;
  right: 7%;
  left: 7%;
  height: 2px;
  background: var(--blue-soft);
  content: '';
}

.process__step {
  position: relative;
  z-index: 1;
  padding-right: 1.4rem;
}

.process__dot {
  display: grid;
  width: 52px;
  aspect-ratio: 1;
  place-items: center;
  margin-bottom: 1.5rem;
  border: 2px solid var(--blue-deep);
  border-radius: 50%;
  background: var(--paper);
  color: var(--blue-deep);
  font-family: var(--serif);
  font-size: 1rem;
}

.process__step h3 {
  margin-bottom: 0.8rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.process__step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.availability-tease {
  display: grid;
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
  grid-template-columns: minmax(0, 0.88fr) minmax(330px, 1.12fr);
}

.availability-tease__copy h2 {
  max-width: 8.5em;
  margin-bottom: 1.4rem;
}

.calendar-art {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--blue-deep);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 3vw, 2.6rem);
  transform: rotate(-0.8deg);
}

.calendar-art::before {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  border: 1px solid var(--blue-pale);
  content: '';
  pointer-events: none;
}

.calendar-art__top {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
}

.calendar-art__top strong {
  color: var(--blue-deep);
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
}

.calendar-art__top span {
  color: var(--coral);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.calendar-art__weekdays,
.calendar-art__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.45rem;
}

.calendar-art__weekdays {
  margin-bottom: 0.45rem;
  color: var(--blue-deep);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
}

.calendar-art__day {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(20, 80, 154, 0.13);
  color: var(--muted);
  font-size: 0.78rem;
}

.calendar-art__day.is-open {
  border-color: var(--blue);
  background: var(--blue-pale);
  color: var(--blue-deep);
  font-weight: 800;
}

.calendar-art__day.is-picked {
  border-color: var(--blue-deep);
  background: var(--blue-deep);
  color: var(--white);
}

.final-invitation {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: #f7eceb;
}

.final-invitation::before,
.final-invitation::after {
  position: absolute;
  width: 21rem;
  height: 14rem;
  background: url('/decor/porcelain-sprig.svg') center / contain no-repeat;
  content: '';
  opacity: 0.55;
}

.final-invitation::before {
  top: -2rem;
  left: -4rem;
}

.final-invitation::after {
  right: -4rem;
  bottom: -2rem;
  transform: scale(-1);
}

.final-invitation__inner {
  position: relative;
  z-index: 1;
  max-width: 850px;
  text-align: center;
}

.final-invitation h2 {
  margin-bottom: 1.5rem;
}

.final-invitation p {
  max-width: 38rem;
  margin: 0 auto 2rem;
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem);
}

.page-hero::after {
  position: absolute;
  right: -5rem;
  bottom: -2rem;
  width: 23rem;
  height: 15rem;
  background: url('/decor/porcelain-sprig.svg') center / contain no-repeat;
  content: '';
  opacity: 0.45;
}

.page-hero h1 {
  max-width: 9.2em;
  margin-bottom: 1.6rem;
  font-size: clamp(4rem, 8vw, 7.5rem);
}

.page-hero .lede {
  max-width: 45rem;
}

.story-page-grid {
  display: grid;
  align-items: start;
  gap: clamp(3rem, 8vw, 8rem);
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
}

.story-page-copy {
  max-width: 42rem;
}

.story-page-copy h2 {
  margin-bottom: 1.5rem;
}

.story-prompt-list {
  display: grid;
  border-top: 2px solid var(--blue-deep);
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.story-prompt-list li {
  display: grid;
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.18rem;
  grid-template-columns: 44px 1fr;
  padding: 1rem 0;
}

.story-prompt-list li::before {
  color: var(--coral);
  content: '✦';
  font-size: 0.8rem;
}

.story-quote {
  position: relative;
  margin: var(--section) auto;
  max-width: 970px;
  padding: 4rem clamp(2rem, 6vw, 5.5rem);
  border-block: 1px solid var(--blue-soft);
  text-align: center;
}

.story-quote p {
  margin: 0;
  color: var(--blue-deep);
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: 1.08;
}

.experience-feature {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.experience-feature__row {
  display: grid;
  min-height: 260px;
  align-items: center;
  background: var(--paper);
  gap: 2rem;
  grid-template-columns: 90px minmax(240px, 0.8fr) minmax(280px, 1.2fr);
  padding: clamp(2rem, 5vw, 4rem);
}

.experience-feature__row:nth-child(even) {
  background: #eef4f9;
}

.experience-feature__number {
  color: var(--coral);
  font-family: var(--serif);
  font-size: 1.2rem;
}

.experience-feature__row h2 {
  margin-bottom: 0;
  font-size: clamp(2.3rem, 4vw, 4rem);
}

.experience-feature__row p {
  max-width: 34rem;
  margin-bottom: 0;
}

.host-note {
  display: grid;
  align-items: center;
  gap: 4rem;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
}

.host-note__plate {
  position: relative;
  display: grid;
  min-height: 430px;
  place-items: center;
  border: 2px solid var(--blue-deep);
  border-radius: 48% 52% 45% 55% / 52% 46% 54% 48%;
  background: var(--paper);
  padding: 4rem;
  text-align: center;
  transform: rotate(-1.5deg);
}

.host-note__plate::before {
  position: absolute;
  top: 13px;
  right: 13px;
  bottom: 13px;
  left: 13px;
  border: 1px solid var(--blue-soft);
  border-radius: inherit;
  content: '';
}

.host-note__plate p {
  position: relative;
  z-index: 1;
  max-width: 13em;
  margin: 0;
  color: var(--blue-deep);
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.08;
}

.preview-notice {
  display: grid;
  border: 1px solid rgba(230, 162, 43, 0.65);
  background: #fff8e8;
  gap: 0.45rem;
  margin-bottom: 2rem;
  padding: 1rem 1.2rem;
}

.preview-notice strong {
  color: #7b5313;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.preview-notice p {
  margin: 0;
  color: #684f2c;
  font-size: 0.93rem;
}

.booking-layout {
  display: grid;
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.booking-calendar {
  border: 2px solid var(--blue-deep);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 3vw, 2.5rem);
}

.booking-calendar__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
}

.booking-calendar__month {
  color: var(--blue-deep);
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
}

.booking-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.legend-swatch {
  width: 13px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
}

.legend-swatch--open {
  border-color: var(--blue);
  background: var(--blue-pale);
}

.legend-swatch--selected {
  border-color: var(--blue-deep);
  background: var(--blue-deep);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.45rem;
}

.calendar-grid__weekday {
  padding: 0.5rem 0;
  color: var(--blue-deep);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid rgba(20, 80, 154, 0.15);
  background: #f7f7f5;
  color: #a1a6ab;
  padding: 0;
  text-align: center;
}

button.calendar-day {
  cursor: pointer;
}

.calendar-day.is-open {
  border-color: var(--blue-soft);
  background: #eff5fa;
  color: var(--blue-deep);
  font-weight: 800;
}

.calendar-day.is-open:hover {
  border-color: var(--blue-deep);
  background: var(--blue-pale);
}

.calendar-day[aria-pressed='true'] {
  border-color: var(--blue-deep);
  background: var(--blue-deep);
  color: var(--white);
}

.calendar-day.is-empty {
  visibility: hidden;
}

.booking-panel {
  position: sticky;
  top: 104px;
  border-left: 4px solid var(--coral);
  background: #f9edeb;
  padding: clamp(1.6rem, 4vw, 2.7rem);
}

.booking-panel h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.1rem, 3vw, 3.3rem);
}

.selected-date {
  margin-bottom: 1.5rem;
  color: var(--blue-deep);
  font-family: var(--serif);
  font-size: 1.2rem;
}

.form-grid {
  display: grid;
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label,
.field legend {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.field label span {
  color: var(--coral);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(18, 56, 102, 0.35);
  border-radius: 0;
  background: var(--paper);
  color: var(--text);
  padding: 0.75rem 0.85rem;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input[aria-invalid='true'],
.field select[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
  border-color: #ad2e2e;
  box-shadow: inset 0 0 0 1px #ad2e2e;
}

.field-error {
  min-height: 1.1em;
  margin: 0;
  color: #8d2323;
  font-size: 0.76rem;
}

.form-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.success-panel {
  display: none;
  border: 2px solid var(--green);
  background: #f1f6ed;
  padding: 2.3rem;
}

.success-panel[data-visible='true'] {
  display: block;
}

.success-panel h2 {
  color: #355e29;
  margin-bottom: 1rem;
}

.success-panel p:last-child {
  margin-bottom: 0;
}

.contact-grid {
  display: grid;
  align-items: start;
  gap: clamp(3rem, 8vw, 8rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.75fr);
}

.contact-panel {
  border-top: 2px solid var(--blue-deep);
  padding-top: 2rem;
}

.contact-panel__row {
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
}

.contact-panel__row strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--blue-deep);
  font-family: var(--serif);
  font-size: 1.5rem;
}

.contact-panel__row p {
  margin: 0;
  color: var(--muted);
}

.client-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.client-checklist li {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: 1rem 0 1rem 1.8rem;
}

.client-checklist li::before {
  position: absolute;
  top: 1.2rem;
  left: 0;
  color: var(--coral);
  content: '◇';
}

.site-footer {
  border-top: 2px solid var(--blue-deep);
  background: #fffdf9;
}

.site-footer__top {
  display: grid;
  align-items: end;
  gap: 3rem;
  grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 1.2fr) minmax(150px, 0.5fr);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.site-footer__brand img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.site-footer__brand p {
  max-width: 18rem;
  margin: 0;
  color: var(--blue-deep);
  font-family: var(--serif);
  font-size: 1.2rem;
}

.site-footer__invitation h2 {
  max-width: 8em;
  margin-bottom: 1.4rem;
  font-size: clamp(2rem, 3.6vw, 3.5rem);
}

.site-footer__nav {
  display: grid;
  gap: 0.55rem;
  justify-items: start;
}

.site-footer__nav a {
  color: var(--blue-deep);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.site-footer__nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  padding-block: 1.2rem;
  font-size: 0.72rem;
}

.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.has-js [data-reveal][data-visible='true'] {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  :root {
    --shell: min(100% - 32px, 900px);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    border-bottom: 2px solid var(--blue-deep);
    background: var(--paper);
    padding: 1rem 20px 1.4rem;
  }

  .site-header[data-open] .site-nav {
    display: grid;
  }

  .site-nav ul {
    display: grid;
    gap: 0;
  }

  .site-nav ul a {
    display: block;
    min-height: 48px;
    border-bottom: 1px solid var(--line);
    padding: 0.85rem 0;
    font-size: 0.9rem;
  }

  .site-nav ul a::after {
    display: none;
  }

  .hero {
    min-height: auto;
  }

  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__copy {
    max-width: 760px;
  }

  .hero__brand {
    width: min(620px, 92vw);
    margin-inline: auto;
  }

  .section-intro,
  .story-tease,
  .story-page-grid,
  .availability-tease,
  .booking-layout,
  .contact-grid,
  .host-note {
    grid-template-columns: 1fr;
  }

  .gathering-row {
    grid-template-columns: 62px minmax(200px, 0.8fr) minmax(280px, 1.2fr);
  }

  .gathering-row__examples {
    grid-column: 2 / -1;
  }

  .process {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 0;
  }

  .process::before {
    display: none;
  }

  .process__step {
    border-top: 1px solid var(--line);
    padding-top: 1.2rem;
  }

  .booking-panel {
    position: static;
  }

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

  .site-footer__nav {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, auto);
  }
}

@media (max-width: 680px) {
  :root {
    --shell: calc(100vw - 28px);
    --section: 4.8rem;
  }

  body {
    font-size: 0.98rem;
  }

  .site-header__inner {
    min-height: 68px;
  }

  .wordmark {
    max-width: 210px;
    font-size: 0.87rem;
    letter-spacing: 0.12em;
  }

  .hero {
    padding-top: 3.5rem;
  }

  .hero::after {
    right: -7rem;
    bottom: 0;
    opacity: 0.34;
  }

  .hero__grid {
    gap: 2.7rem;
  }

  .hero h1 {
    font-size: clamp(3.55rem, 16vw, 5.3rem);
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero__actions .button {
    width: 100%;
  }

  .hero__notes {
    grid-template-columns: 1fr;
    margin-top: 2.4rem;
  }

  .hero__notes span {
    border-bottom: 1px solid var(--line);
    padding: 0.9rem 0;
  }

  .hero__notes span + span {
    border-left: 0;
    padding-left: 0;
  }

  .hero__brand {
    width: min(100%, 500px);
  }

  .section-intro {
    gap: 1rem;
    margin-bottom: 3rem;
  }

  .gathering-row {
    min-height: auto;
    gap: 0.8rem;
    grid-template-columns: 42px 1fr;
    padding: 1.6rem 0;
  }

  .gathering-row__number {
    grid-row: 1 / span 3;
  }

  .gathering-row p,
  .gathering-row__examples {
    grid-column: 2;
  }

  .beginner {
    min-height: auto;
    gap: 2.8rem;
    grid-template-columns: 1fr;
  }

  .beginner h2 {
    font-size: clamp(3.5rem, 18vw, 5.8rem);
  }

  .beginner__note {
    transform: none;
  }

  .story-tease {
    gap: 3rem;
  }

  .process {
    grid-template-columns: 1fr;
  }

  .process__step {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 1rem;
    padding-right: 0;
  }

  .process__dot {
    width: 44px;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .process__step h3,
  .process__step p {
    grid-column: 2;
  }

  .availability-tease {
    gap: 2.5rem;
  }

  .calendar-art {
    transform: none;
  }

  .final-invitation::before,
  .final-invitation::after,
  .page-hero::after {
    opacity: 0.25;
  }

  .page-hero h1 {
    font-size: clamp(3.5rem, 15vw, 5.6rem);
  }

  .story-quote {
    margin-block: 4rem;
    padding-inline: 0.5rem;
  }

  .experience-feature__row {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2rem 1.4rem;
  }

  .experience-feature__number {
    font-size: 0.88rem;
  }

  .host-note__plate {
    min-height: 340px;
    padding: 2.8rem 2rem;
  }

  .booking-calendar {
    padding: 1rem;
  }

  .booking-calendar__head {
    align-items: start;
    flex-direction: column;
  }

  .calendar-grid {
    gap: 0.28rem;
  }

  .calendar-grid__weekday {
    font-size: 0.58rem;
    letter-spacing: 0;
  }

  .calendar-day {
    min-height: 42px;
    aspect-ratio: auto;
    font-size: 0.82rem;
  }

  .client-checklist {
    grid-template-columns: 1fr;
  }

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

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

  .site-footer__nav {
    grid-column: auto;
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .has-js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   THE SMALL TOWN MAHJ TABLETOP
   Permanent frame, mat, rack and physical-object primitives
   ========================================================= */

:root {
  --table-cobalt: #062b67;
  --table-cobalt-deep: #031d4d;
  --paint-blue: #124d98;
  --paint-blue-mid: #4f83b9;
  --porcelain: #fffaf0;
  --porcelain-warm: #f4ebdb;
  --paint-green: #527844;
  --paint-coral: #e86f61;
  --paint-orange: #e78f25;
  --frame-size: clamp(16px, 2.3vw, 34px);
}

body {
  padding: var(--frame-size);
  background-color: #faf7ee;
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(18, 77, 152, 0.94) 0 4px, transparent 4.7px),
    radial-gradient(ellipse at 70% 50%, rgba(79, 131, 185, 0.9) 0 4px, transparent 4.8px),
    radial-gradient(ellipse at 50% 70%, rgba(18, 77, 152, 0.9) 0 4px, transparent 4.8px),
    radial-gradient(ellipse at 30% 50%, rgba(79, 131, 185, 0.88) 0 4px, transparent 4.8px),
    radial-gradient(circle at 50% 50%, var(--paint-orange) 0 2px, var(--paint-blue) 2.4px 4px, transparent 4.6px),
    radial-gradient(circle at 11% 13%, rgba(82, 120, 68, 0.82) 0 2px, transparent 2.8px),
    radial-gradient(circle at 86% 84%, rgba(232, 111, 97, 0.75) 0 1.7px, transparent 2.5px),
    linear-gradient(92deg, transparent 46%, rgba(18, 77, 152, 0.12) 47%, transparent 50%);
  background-size: 58px 58px, 58px 58px, 58px 58px, 58px 58px, 58px 58px, 58px 58px, 58px 58px, 58px 58px;
  background-position: 0 1px, -1px 0, 1px -1px, 0 1px, 0 0, 0 0, 0 0, 0 0;
}

.tabletop-shell {
  position: relative;
  min-height: calc(100svh - (var(--frame-size) * 2));
  overflow: clip;
  border: 3px solid var(--paint-blue);
  background-color: var(--table-cobalt);
  background-image:
    radial-gradient(circle at 18% 8%, rgba(76, 128, 190, 0.16), transparent 30rem),
    radial-gradient(circle at 85% 38%, rgba(0, 15, 52, 0.22), transparent 34rem),
    repeating-linear-gradient(73deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(2deg, rgba(0, 0, 0, 0.016) 0 1px, transparent 1px 4px);
  box-shadow:
    0 0 0 5px var(--porcelain-warm),
    0 0 0 8px var(--paint-blue),
    0 14px 42px rgba(2, 25, 64, 0.28),
    inset 0 0 70px rgba(0, 13, 45, 0.38);
}

.tabletop-shell::before {
  position: absolute;
  z-index: 90;
  inset: 7px;
  border: 1px dotted rgba(255, 250, 240, 0.34);
  content: '';
  pointer-events: none;
}

.site-header {
  position: sticky;
  z-index: 100;
  top: var(--frame-size);
  border: 0;
  background: transparent;
  backdrop-filter: none;
  padding: 16px 0 4px;
}

.site-header__inner {
  min-height: 72px;
  align-items: flex-start;
  gap: clamp(1rem, 3vw, 3rem);
}

.table-signature {
  display: grid;
  flex: 0 0 auto;
  margin-top: 9px;
  color: var(--porcelain);
  font-family: var(--serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 12, 36, 0.35);
  text-transform: uppercase;
}

.table-signature strong {
  margin-top: 5px;
  color: #efb441;
  font-family: var(--sans);
  font-size: 0.94rem;
  letter-spacing: 0.4em;
}

.site-nav {
  position: relative;
  display: block;
  margin-left: auto;
  padding: 7px 10px 15px;
  border: 1px solid rgba(255, 250, 240, 0.28);
  border-radius: 7px 7px 3px 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(90deg, #041d4c, #0b3a77 45%, #041b49);
  box-shadow: 0 13px 24px rgba(0, 13, 39, 0.3), inset 0 1px rgba(255, 255, 255, 0.08);
}

.site-nav ul {
  position: relative;
  z-index: 2;
  gap: clamp(5px, 0.7vw, 10px);
}

.site-nav li {
  display: flex;
}

.site-nav .rack-tile {
  display: grid;
  min-width: clamp(74px, 7.2vw, 98px);
  min-height: 43px;
  place-items: center;
  border: 1px solid rgba(18, 77, 152, 0.55);
  border-radius: 5px 5px 4px 4px;
  background:
    linear-gradient(104deg, transparent 0 22%, rgba(255, 255, 255, 0.78) 29%, transparent 36%),
    linear-gradient(180deg, #fffdf6, #eee4d3);
  box-shadow:
    0 3px 0 #c9baa3,
    0 6px 8px rgba(0, 12, 40, 0.27),
    inset 0 0 0 3px rgba(255, 255, 255, 0.42);
  color: var(--table-cobalt-deep);
  font-family: var(--sans);
  font-size: clamp(0.66rem, 0.72vw, 0.76rem);
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  transform: translateY(0) rotate(calc((var(--tile-index) - 2) * 0.12deg));
  transition: transform 220ms ease, box-shadow 220ms ease, color 220ms ease;
}

.site-nav .rack-tile::before,
.site-nav .rack-tile::after {
  display: none;
}

.site-nav .rack-tile:hover {
  color: var(--paint-blue);
  transform: translateY(2px) rotate(0deg);
}

.site-nav .rack-tile[aria-current='page'] {
  color: var(--paint-blue);
  transform: translateY(6px) rotate(0deg);
  box-shadow:
    0 1px 0 #c9baa3,
    0 3px 5px rgba(0, 12, 40, 0.22),
    inset 0 0 0 2px rgba(232, 143, 37, 0.35);
}

.rack-rail {
  position: absolute;
  z-index: 3;
  right: -6px;
  bottom: 5px;
  left: -6px;
  height: 8px;
  border: 1px solid #102c55;
  border-radius: 2px 2px 5px 5px;
  background: linear-gradient(180deg, #356296, #071f4d 70%);
  box-shadow: 0 4px 7px rgba(0, 9, 30, 0.4), inset 0 1px rgba(255, 255, 255, 0.22);
}

.nav-toggle__face {
  display: grid;
  width: 28px;
  height: 36px;
  grid-template-columns: repeat(2, 5px);
  place-content: center;
  gap: 5px;
  border: 1px solid rgba(18, 77, 152, 0.65);
  border-radius: 4px;
  background: var(--porcelain);
  box-shadow: 0 3px 0 #c8baa5, 0 7px 12px rgba(0, 10, 35, 0.28);
}

.nav-toggle__face i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--paint-blue);
}

.tabletop-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: calc(100svh - 112px - (var(--frame-size) * 2));
  align-items: center;
  overflow: clip;
  padding: clamp(2.8rem, 5vw, 5.4rem) 0 clamp(5rem, 7vw, 7rem);
}

.hero-stage {
  position: relative;
  min-height: clamp(600px, 72vh, 790px);
}

.hero-tile {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(850px, 78vw);
  min-height: clamp(490px, 61vh, 650px);
  grid-template-columns: minmax(0, 1fr) clamp(140px, 17vw, 205px);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  border: 2px solid rgba(18, 77, 152, 0.72);
  border-radius: 15px 13px 16px 12px;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.92), transparent 28%),
    radial-gradient(circle at 81% 80%, rgba(210, 190, 157, 0.2), transparent 33%),
    repeating-linear-gradient(86deg, rgba(18, 77, 152, 0.012) 0 1px, transparent 1px 7px),
    var(--porcelain);
  box-shadow:
    0 8px 0 #d2c2a9,
    0 11px 0 rgba(6, 32, 76, 0.5),
    0 40px 65px rgba(0, 13, 44, 0.38),
    inset 0 0 0 7px rgba(79, 131, 185, 0.12),
    inset 0 0 42px rgba(165, 137, 97, 0.11);
  padding: clamp(2.4rem, 5vw, 5.5rem);
  transform: translate(-50%, -50%) rotate(-0.8deg);
}

.hero-tile::before,
.hero-tile::after {
  position: absolute;
  width: 72px;
  height: 72px;
  border-color: var(--paint-blue-mid);
  content: '';
  opacity: 0.65;
}

.hero-tile::before {
  top: 17px;
  left: 17px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-radius: 12px 0 0;
}

.hero-tile::after {
  right: 17px;
  bottom: 17px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-radius: 0 0 12px;
}

.hero-tile__copy {
  position: relative;
  z-index: 2;
}

.hero-tile .eyebrow {
  max-width: 27rem;
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
  color: var(--paint-blue);
}

.hero-tile h1 {
  max-width: none;
  margin: 0 0 clamp(1.4rem, 3vh, 2.2rem);
  color: var(--table-cobalt-deep);
  font-size: clamp(3.8rem, 6.4vw, 7.4rem);
  letter-spacing: -0.055em;
  line-height: 0.83;
  text-wrap: initial;
}

.hero-tile h1 span {
  display: block;
}

.hero-tile h1 span + span {
  margin-top: 0.14em;
  padding-left: 0.43em;
}

.hero-tile h1 em {
  position: relative;
  color: var(--paint-blue);
  font-style: italic;
  white-space: nowrap;
}

.hero-tile h1 em::after {
  position: absolute;
  right: -0.03em;
  bottom: -0.04em;
  left: 0.08em;
  height: 4px;
  border-radius: 50%;
  background: var(--paint-coral);
  content: '';
  opacity: 0.78;
  transform: rotate(-1.5deg);
}

.hero-tile__intro {
  max-width: 39rem;
  margin: 0 0 clamp(1.8rem, 3.2vh, 2.5rem);
  color: #314b68;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.65;
}

.hero-action {
  position: relative;
  display: inline-flex;
  min-width: 178px;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #08285c;
  border-radius: 6px 5px 7px 4px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15), transparent 25%),
    var(--paint-blue);
  box-shadow: 0 5px 0 #06214f, 0 10px 18px rgba(4, 29, 69, 0.22), inset 0 0 0 3px rgba(255, 255, 255, 0.1);
  color: var(--porcelain);
  gap: 1.2rem;
  padding: 0.9rem 1.15rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.hero-action i {
  color: #efb441;
  font-size: 1.35rem;
  font-style: normal;
  line-height: 1;
}

.hero-action:hover {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #06214f, 0 6px 12px rgba(4, 29, 69, 0.18), inset 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.hero-maker-mark {
  position: relative;
  z-index: 2;
  align-self: start;
  width: 100%;
  margin: 0;
  border: 1px solid rgba(18, 77, 152, 0.38);
  border-radius: 8px 7px 9px 6px;
  background: #fff;
  box-shadow: 0 4px 0 #d7c9b3, 0 11px 22px rgba(11, 48, 91, 0.15);
  padding: 8px;
  transform: rotate(2.2deg);
}

.hero-maker-mark img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.hero-tile__side-note {
  position: absolute;
  right: 20px;
  top: 50%;
  bottom: auto;
  margin: 0;
  color: rgba(18, 77, 152, 0.55);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
}

.hero-tile__ornament {
  position: absolute;
  z-index: 1;
  color: var(--paint-blue-mid);
  font-size: 1.3rem;
  line-height: 1;
  opacity: 0.6;
}

.hero-tile__ornament--top {
  top: 28px;
  right: 28px;
}

.hero-tile__ornament--bottom {
  bottom: 28px;
  left: 28px;
}

.hero-free-type {
  position: absolute;
  z-index: 4;
  right: 1.5%;
  bottom: 1.6%;
  display: flex;
  gap: 1rem;
  color: rgba(255, 250, 240, 0.76);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.hero-free-type span + span::before {
  margin-right: 1rem;
  color: #efb441;
  content: '•';
}

.mahj-piece {
  position: absolute;
  z-index: 2;
  display: grid;
  width: clamp(58px, 5.5vw, 78px);
  aspect-ratio: 0.73;
  place-content: center;
  border: 1px solid rgba(18, 77, 152, 0.6);
  border-radius: 7px 6px 8px 5px;
  background:
    radial-gradient(circle at 20% 13%, rgba(255, 255, 255, 0.95), transparent 22%),
    linear-gradient(150deg, #fffdf6, #eee4d2);
  box-shadow:
    0 5px 0 #c8b89f,
    0 8px 0 rgba(3, 24, 62, 0.5),
    0 18px 25px rgba(0, 12, 40, 0.34),
    inset 0 0 0 4px rgba(255, 255, 255, 0.5);
  color: var(--paint-blue);
  transform: rotate(var(--rest-r, 0deg));
}

.mahj-piece--one { top: 2%; left: 3%; }
.mahj-piece--two { top: 2%; right: 5%; }
.mahj-piece--three { bottom: 9%; left: 3.5%; }
.mahj-piece--four { z-index: 4; right: 8%; bottom: 5%; }
.mahj-piece--five { top: 43%; right: 0.5%; }
.mahj-piece--six { z-index: 4; bottom: 0; left: 23%; }

.mahj-piece--dots {
  grid-template-columns: repeat(2, 13px);
  gap: 9px;
}

.mahj-piece--dots i {
  width: 13px;
  height: 13px;
  border: 2px solid var(--paint-blue);
  border-radius: 50%;
  background: var(--paint-coral);
  box-shadow: inset 0 0 0 2px var(--porcelain);
}

.mahj-piece--dots i:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  background: var(--paint-green);
}

.mahj-piece--bamboo {
  grid-auto-flow: column;
  gap: 6px;
}

.mahj-piece--bamboo i {
  position: relative;
  width: 8px;
  height: 45px;
  border-radius: 50%;
  background: var(--paint-green);
  transform: rotate(5deg);
}

.mahj-piece--bamboo i::before,
.mahj-piece--bamboo i::after {
  position: absolute;
  left: -2px;
  width: 12px;
  height: 3px;
  border-radius: 50%;
  background: var(--paint-blue);
  content: '';
}

.mahj-piece--bamboo i::before { top: 13px; }
.mahj-piece--bamboo i::after { bottom: 12px; }
.mahj-piece--bamboo i:nth-child(2) { background: var(--paint-coral); transform: rotate(-3deg); }

.mahj-piece--flower i {
  color: var(--paint-coral);
  font-family: var(--serif);
  font-size: 3.3rem;
  font-style: normal;
  text-shadow: 0 0 0 var(--paint-blue);
}

.mahj-piece--back {
  border-color: var(--porcelain);
  background-color: var(--paint-blue);
  background-image:
    radial-gradient(circle, var(--porcelain) 0 2px, transparent 2.5px),
    linear-gradient(45deg, transparent 43%, rgba(255, 255, 255, 0.55) 44% 48%, transparent 49%);
  background-size: 16px 16px, 24px 24px;
}

.mahj-piece--back i {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 250, 240, 0.75);
  transform: rotate(45deg);
}

.mahj-piece--single i {
  width: 30px;
  height: 30px;
  border: 5px double var(--paint-blue);
  border-radius: 50%;
  background: var(--paint-orange);
  box-shadow: inset 0 0 0 4px var(--porcelain);
}

.mahj-piece--petal i {
  position: relative;
  width: 42px;
  height: 42px;
  border: 3px solid var(--paint-blue);
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
}

.mahj-piece--petal i::after {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paint-green);
  content: '';
}

/* Placement and reveal primitives are intentionally generic for later chapters. */
.has-js [data-deal] {
  opacity: 0;
  transform: translate(var(--deal-x, 0), var(--deal-y, -60px)) rotate(var(--deal-r, 0deg));
  transition:
    opacity 520ms ease var(--deal-delay, 0ms),
    transform 880ms cubic-bezier(0.2, 0.72, 0.25, 1) var(--deal-delay, 0ms);
}

.has-js [data-deal][data-visible='true'] {
  opacity: 1;
  transform: translate(0, 0) rotate(var(--rest-r, 0deg));
}

.has-js [data-place] {
  opacity: 0;
  transform: translate(-50%, calc(-50% - 34px)) rotate(-2deg);
  transition:
    opacity 620ms ease var(--place-delay, 0ms),
    transform 1000ms cubic-bezier(0.2, 0.72, 0.25, 1) var(--place-delay, 0ms);
}

.has-js [data-place][data-visible='true'] {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-0.8deg);
}

.has-js [data-draw] {
  opacity: 0;
  transform: translateY(-20px) rotate(5deg);
  transition: opacity 500ms ease 520ms, transform 760ms cubic-bezier(0.2, 0.72, 0.25, 1) 520ms;
}

.has-js [data-draw][data-visible='true'] {
  opacity: 1;
  transform: translateY(0) rotate(2.2deg);
}

.has-js [data-brush] {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 350ms ease 700ms, clip-path 900ms cubic-bezier(0.2, 0.72, 0.25, 1) 700ms;
}

.has-js [data-brush][data-visible='true'] {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

@media (min-width: 1440px) {
  .hero-tile {
    width: min(940px, 72vw);
  }

  .mahj-piece--one { left: 7%; }
  .mahj-piece--two { right: 9%; }
  .mahj-piece--three { left: 8%; }
  .mahj-piece--five { right: 4%; }
}

@media (max-width: 980px) {
  :root {
    --frame-size: 14px;
  }

  .site-header {
    top: var(--frame-size);
    padding: 10px 0 0;
  }

  .site-header__inner {
    min-height: 62px;
    align-items: center;
  }

  .table-signature {
    margin-top: 0;
  }

  .nav-toggle {
    display: inline-flex;
    color: var(--porcelain);
  }

  .nav-toggle__label {
    color: var(--porcelain);
  }

  .site-nav {
    position: absolute;
    top: 64px;
    right: 0;
    left: auto;
    display: none;
    width: min(320px, calc(100vw - 52px));
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 10px 6px 18px 18px;
  }

  .site-header[data-open] .site-nav {
    display: block;
  }

  .site-nav ul {
    display: grid;
    gap: 8px;
  }

  .site-nav li {
    display: block;
  }

  .site-nav .rack-tile {
    width: 100%;
    min-height: 51px;
    justify-content: start;
    border-bottom: 1px solid rgba(18, 77, 152, 0.5);
    padding: 0.85rem 1rem;
    font-size: 0.78rem;
    opacity: 0;
    transform: translateX(25px) rotate(1deg);
  }

  .site-header[data-open] .rack-tile {
    animation: rack-deal 440ms cubic-bezier(0.2, 0.72, 0.25, 1) both;
    animation-delay: calc(var(--tile-index) * 55ms);
  }

  .site-nav .rack-tile[aria-current='page'] {
    transform: translateX(-7px) rotate(-0.5deg);
  }

  .rack-rail {
    z-index: -1;
    top: 4px;
    right: 0;
    bottom: 4px;
    left: 5px;
    width: 13px;
    height: auto;
    border-radius: 5px 2px 2px 5px;
  }

  .tabletop-hero {
    min-height: calc(100svh - 76px - (var(--frame-size) * 2));
    padding-top: 1rem;
  }

  .hero-stage {
    min-height: clamp(650px, 76vh, 760px);
  }

  .hero-tile {
    width: min(760px, 86vw);
    min-height: 540px;
    grid-template-columns: minmax(0, 1fr) 145px;
    padding: clamp(2.7rem, 6vw, 4.5rem);
  }

  .hero-tile h1 {
    font-size: clamp(3.6rem, 8.4vw, 5.8rem);
  }

  .hero-tile h1 span + span {
    padding-left: 0.2em;
  }
}

@keyframes rack-deal {
  from { opacity: 0; transform: translateX(25px) rotate(1deg); }
  to { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@media (max-width: 680px) {
  :root {
    --frame-size: 8px;
    --shell: calc(100vw - 34px);
  }

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

  .tabletop-shell {
    min-height: calc(100svh - 16px);
    border-width: 2px;
    box-shadow: 0 0 0 2px var(--porcelain-warm), 0 0 0 4px var(--paint-blue), inset 0 0 45px rgba(0, 13, 45, 0.36);
  }

  .tabletop-shell::before {
    inset: 4px;
    opacity: 0.65;
  }

  .site-header {
    top: 8px;
  }

  .site-header__inner {
    width: calc(100vw - 44px);
  }

  .table-signature {
    font-size: 0.61rem;
  }

  .table-signature strong {
    font-size: 0.8rem;
  }

  .nav-toggle {
    gap: 0.5rem;
  }

  .nav-toggle__label {
    font-size: 0.64rem;
  }

  .site-nav {
    right: -2px;
    width: min(300px, calc(100vw - 42px));
  }

  .tabletop-hero {
    min-height: 760px;
    padding: 0.5rem 0 4rem;
  }

  .hero-stage {
    width: calc(100vw - 38px);
    min-height: 710px;
  }

  .hero-tile {
    top: 48%;
    width: calc(100% - 12px);
    min-height: 590px;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0;
    border-radius: 11px 9px 12px 8px;
    padding: 3.25rem 1.5rem 8.7rem;
  }

  .has-js [data-place] {
    transform: translate(-50%, calc(-48% - 28px)) rotate(-1.4deg);
  }

  .has-js [data-place][data-visible='true'] {
    transform: translate(-50%, -48%) rotate(-0.45deg);
  }

  .hero-tile::before,
  .hero-tile::after {
    width: 48px;
    height: 48px;
  }

  .hero-tile .eyebrow {
    max-width: 17rem;
    margin-bottom: 1.35rem;
    font-size: 0.65rem;
    line-height: 1.45;
  }

  .hero-tile h1 {
    margin-bottom: 1.55rem;
    font-size: clamp(3.1rem, 14.4vw, 4.45rem);
    line-height: 0.87;
  }

  .hero-tile h1 span + span {
    margin-top: 0.16em;
    padding-left: 0;
  }

  .hero-tile__intro {
    max-width: 29rem;
    margin-bottom: 1.75rem;
    font-size: 1rem;
    line-height: 1.55;
  }

  .hero-action {
    min-width: 170px;
    min-height: 58px;
  }

  .hero-maker-mark {
    position: absolute;
    right: 1.65rem;
    bottom: 1.55rem;
    width: 92px;
    padding: 5px;
    transform: rotate(2deg);
  }

  .has-js [data-draw] {
    transform: translateY(-15px) rotate(5deg);
  }

  .has-js [data-draw][data-visible='true'] {
    transform: translateY(0) rotate(2deg);
  }

  .hero-tile__side-note {
    right: auto;
    top: auto;
    bottom: 3.5rem;
    left: 1.55rem;
    max-width: 8.5rem;
    font-size: 0.48rem;
    line-height: 1.5;
    transform: none;
    writing-mode: initial;
  }

  .hero-tile__ornament--top {
    top: 21px;
    right: 21px;
  }

  .hero-tile__ornament--bottom {
    bottom: 22px;
    left: 21px;
  }

  .mahj-piece {
    width: 48px;
    border-radius: 5px;
  }

  .mahj-piece--one { z-index: 4; top: 2%; left: 1%; }
  .mahj-piece--two { top: 1%; right: 2%; }
  .mahj-piece--three { z-index: 4; bottom: 5%; left: 1%; }
  .mahj-piece--four { right: 1%; bottom: 4%; }
  .mahj-piece--five,
  .mahj-piece--six { display: none; }

  .mahj-piece--dots {
    grid-template-columns: repeat(2, 10px);
    gap: 6px;
  }

  .mahj-piece--dots i {
    width: 10px;
    height: 10px;
  }

  .mahj-piece--bamboo i {
    width: 6px;
    height: 34px;
  }

  .mahj-piece--flower i {
    font-size: 2.7rem;
  }

  .hero-free-type {
    right: 0;
    bottom: 0;
    left: 0;
    justify-content: center;
    gap: 0;
    font-size: 0.54rem;
    text-align: center;
  }

  .hero-free-type span:nth-child(2) {
    display: none;
  }

  .promise-band {
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 390px) {
  .hero-tile {
    min-height: 575px;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .hero-tile h1 {
    font-size: clamp(2.95rem, 14.2vw, 3.45rem);
  }

  .hero-tile__intro {
    font-size: 0.96rem;
  }

  .hero-maker-mark {
    right: 1.25rem;
    width: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-js [data-deal],
  .has-js [data-place],
  .has-js [data-draw],
  .has-js [data-brush] {
    opacity: 1;
    clip-path: none;
  }

  .has-js [data-deal] {
    transform: rotate(var(--rest-r, 0deg));
  }

  .has-js [data-place] {
    transform: translate(-50%, -50%) rotate(-0.8deg);
  }
}


/* Source: /styles/home-content-tiles.css */
/* =========================================================
   SMALL TOWN MAHJ — CONTENT TILE SYSTEM
   Cobalt is the table. Ivory, soft blue, sage, and coral pieces
   sit on top of the field like arranged Mahjong objects.
   ========================================================= */

:root {
  --tile-field: #083477;
  --tile-ivory: #fff9ee;
  --tile-ivory-deep: #f4ecde;
  --tile-blue: #174b8f;
  --tile-blue-dark: #0a356f;
  --tile-blue-soft: #dfeaf6;
  --tile-blue-soft-2: #edf4fb;
  --tile-sage: #dfe7d7;
  --tile-sage-deep: #b6c8ac;
  --tile-coral: #de7667;
  --tile-coral-soft: #f1b2a7;
  --tile-ink: #183b67;
  --tile-muted: #64758a;
  --tile-gap-xs: 14px;
  --tile-gap-sm: 18px;
  --tile-gap-md: 28px;
  --tile-gap-lg: 42px;
  --tile-gap-xl: 52px;
  --tile-radius-lg: 20px;
  --tile-radius-md: 14px;
}

.home-tile-flow {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 0 4rem;
  background: transparent;
}

.home-piece {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-inline: clamp(18px, 3.5vw, 46px);
}

.home-piece + .home-piece {
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
}

.tile-kicker {
  margin: 0 0 .72rem;
  color: var(--tile-blue);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1.25;
  text-transform: uppercase;
}

.field-heading {
  width: min(620px, 100%);
  margin: 0 0 1.8rem;
  color: var(--tile-ivory);
}

.field-heading .tile-kicker {
  color: #bcd1ea;
}

.field-heading h2 {
  max-width: 9em;
  margin: 0;
  color: var(--tile-ivory);
  font-size: clamp(2.7rem, 5.5vw, 5.25rem);
  line-height: .96;
}

.field-heading--centered {
  margin-inline: auto;
  text-align: center;
}

.field-heading--centered h2 {
  margin-inline: auto;
}

.content-tile {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(23,75,143,.82);
  border-radius: var(--tile-radius-lg);
  box-shadow:
    0 7px 0 rgba(181,164,140,.92),
    0 13px 0 rgba(3,31,73,.24),
    0 25px 42px rgba(0,12,42,.22),
    inset 0 0 0 6px rgba(255,255,255,.34);
  color: var(--tile-ink);
  padding: clamp(1.7rem, 4vw, 3.25rem);
}

.content-tile::before {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(23,75,143,.18);
  border-radius: calc(var(--tile-radius-lg) - 7px);
  content: '';
  pointer-events: none;
}

.content-tile h2,
.content-tile h3,
.content-tile p,
.content-tile a,
.content-tile ul {
  position: relative;
  z-index: 2;
}

.content-tile h2,
.content-tile h3 {
  color: var(--tile-blue-dark);
}

.content-tile h2 {
  margin: 0 0 1rem;
  font-size: clamp(2.55rem, 5vw, 5rem);
  line-height: .94;
}

.content-tile h3 {
  margin: 0 0 .8rem;
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1;
}

.content-tile > p:not(.tile-kicker) {
  max-width: 42rem;
  margin: 0;
  color: #53657a;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.68;
}

.content-tile--porcelain {
  background:
    radial-gradient(circle at 86% 12%, rgba(255,255,255,.95), transparent 17rem),
    linear-gradient(145deg, #fffdf8 0%, var(--tile-ivory) 56%, #f2e9dc 100%);
}

.content-tile--soft-blue {
  border-color: rgba(50,91,145,.72);
  background:
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.72), transparent 15rem),
    linear-gradient(145deg, var(--tile-blue-soft-2), var(--tile-blue-soft));
}

.content-tile--sage {
  border-color: rgba(70,108,76,.42);
  background:
    radial-gradient(circle at 80% 12%, rgba(255,255,255,.62), transparent 14rem),
    linear-gradient(145deg, #edf1e8, var(--tile-sage));
  box-shadow:
    0 7px 0 rgba(169,182,153,.88),
    0 13px 0 rgba(3,31,73,.20),
    0 25px 42px rgba(0,12,42,.18),
    inset 0 0 0 6px rgba(255,255,255,.32);
}

.content-tile--sage::before {
  border-color: rgba(74,112,79,.16);
}

.content-tile__botanical,
.invitation-flower {
  position: absolute;
  z-index: 1;
  right: 1.2rem;
  bottom: .55rem;
  color: var(--tile-coral);
  font-family: var(--serif);
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: 1;
  opacity: .22;
  transform: rotate(-10deg);
}

.content-tile__botanical--left {
  right: auto;
  left: .7rem;
  bottom: .2rem;
  color: #6f9073;
}

.content-tile--statement {
  width: min(980px, 86%);
  margin: 0 auto;
  text-align: center;
}

.content-tile--statement h2,
.content-tile--statement > p:not(.tile-kicker) {
  margin-inline: auto;
}

.gathering-tile-stack {
  display: grid;
  gap: 1.35rem;
  width: min(940px, 100%);
  margin: 0 auto;
}

.content-tile--offset-left {
  width: 78%;
  justify-self: start;
}

.content-tile--offset-right {
  width: 72%;
  justify-self: end;
}

.content-tile--offset-left-wide {
  width: 82%;
  justify-self: start;
}

.tile-symbol {
  position: absolute;
  top: 1rem;
  right: 1.15rem;
  color: rgba(23,75,143,.16);
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 1;
}

.tile-symbol--coral {
  color: rgba(222,118,103,.32);
}

.field-link,
.tile-text-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--tile-ivory);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.field-link {
  margin: 1.7rem 0 0 2%;
  border-bottom: 1px solid rgba(255,249,238,.35);
  padding-bottom: .35rem;
}

.tile-text-link {
  margin-top: 1.4rem;
  color: var(--tile-blue);
  border-bottom: 1px solid rgba(23,75,143,.30);
  padding-bottom: .3rem;
}

.about-object-pair {
  display: grid;
  width: min(980px, 100%);
  margin: 0 auto;
  grid-template-columns: .75fr 1.25fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
}

.photo-tile {
  position: relative;
  margin: 0;
  border: 2px solid rgba(23,75,143,.78);
  border-radius: 18px;
  background: var(--tile-ivory);
  box-shadow:
    0 7px 0 rgba(181,164,140,.9),
    0 14px 0 rgba(3,31,73,.23),
    0 25px 42px rgba(0,12,42,.22);
  padding: 10px 10px 14px;
}

.photo-tile__surface {
  position: relative;
  display: grid;
  min-height: 380px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(23,75,143,.30);
  border-radius: 11px;
  background:
    radial-gradient(circle at 25% 20%, rgba(239,178,167,.46), transparent 22%),
    radial-gradient(circle at 78% 75%, rgba(182,200,172,.48), transparent 26%),
    linear-gradient(145deg, #e9f0f8, #cfddeb 52%, #f7eee3);
}

.photo-tile__flower {
  color: var(--tile-coral);
  font-family: var(--serif);
  font-size: clamp(5rem, 9vw, 8rem);
  opacity: .9;
}

.photo-tile__label {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  color: var(--tile-blue-dark);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}

.photo-tile figcaption {
  margin-top: .75rem;
  color: var(--tile-blue-dark);
  font-family: var(--serif);
  font-size: .9rem;
  font-style: italic;
  text-align: center;
}

.content-tile--story {
  transform: translateY(22px);
}

.step-piece-stack {
  display: grid;
  gap: 1rem;
  width: min(900px, 100%);
  margin: 0 auto;
}

.mahjong-step {
  position: relative;
  display: grid;
  width: 76%;
  min-height: 130px;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 1rem;
  border: 2px solid rgba(23,75,143,.75);
  border-radius: 13px;
  background: linear-gradient(180deg, #fffdf8, #f4ecdf);
  box-shadow:
    0 8px 0 #c3b39d,
    0 13px 0 rgba(3,31,73,.24),
    0 19px 28px rgba(0,12,42,.18),
    inset 0 0 0 4px rgba(255,255,255,.68);
  color: var(--tile-ink);
  padding: 1.2rem 1.35rem;
}

.mahjong-step::before {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(23,75,143,.14);
  border-radius: 8px;
  content: '';
  pointer-events: none;
}

.mahjong-step--left { justify-self: start; }
.mahjong-step--right { justify-self: end; }

.mahjong-step__number {
  position: relative;
  z-index: 2;
  display: grid;
  width: 62px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(23,75,143,.24);
  border-radius: 9px;
  background: #edf4fb;
  color: var(--tile-blue);
  font-family: var(--serif);
  font-size: 1.7rem;
}

.mahjong-step div {
  position: relative;
  z-index: 2;
}

.mahjong-step h3 {
  margin: 0 0 .3rem;
  color: var(--tile-blue-dark);
  font-size: clamp(1.65rem, 2.3vw, 2.5rem);
  line-height: 1;
}

.mahjong-step p {
  margin: 0;
  color: var(--tile-muted);
  font-size: .95rem;
  line-height: 1.5;
}

.content-tile--reassurance {
  width: min(820px, 86%);
  margin: 0 auto;
  text-align: center;
}

.content-tile--reassurance > p:not(.tile-kicker) {
  margin-inline: auto;
}

.content-tile--ledger {
  width: min(920px, 90%);
  margin: 0 auto;
}

.ledger-heading {
  max-width: 40rem;
  margin-bottom: 1.5rem;
}

.porcelain-ledger {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.porcelain-ledger li {
  display: grid;
  grid-template-columns: 34px minmax(120px,.65fr) 1fr;
  align-items: center;
  gap: .8rem;
  border-top: 1px solid rgba(23,75,143,.16);
  padding: 1rem 0;
}

.porcelain-ledger li:first-child {
  border-top: 0;
}

.porcelain-ledger li > span {
  color: var(--tile-coral);
  font-family: var(--serif);
  font-size: 1.05rem;
  text-align: center;
}

.porcelain-ledger strong {
  color: var(--tile-blue-dark);
  font-size: .75rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.porcelain-ledger small {
  color: var(--tile-muted);
  font-size: .9rem;
  line-height: 1.45;
}

.photo-tile--wide {
  width: min(880px, 86%);
  margin: 0 auto;
  transform: rotate(-.6deg);
}

.photo-tile__surface--table {
  min-height: 430px;
  background:
    radial-gradient(circle at 22% 24%, rgba(239,178,167,.35), transparent 18%),
    radial-gradient(circle at 80% 70%, rgba(182,200,172,.34), transparent 20%),
    linear-gradient(145deg, #174b8f, #0d3f83 58%, #082f67);
}

.atmosphere-piece {
  position: absolute;
  display: grid;
  min-width: 72px;
  min-height: 88px;
  place-items: center;
  border: 1px solid #7897bf;
  border-radius: 9px;
  background: #fff9ee;
  box-shadow: 0 6px 0 #c3b39d, 0 11px 16px rgba(0,18,49,.25);
  color: var(--tile-blue);
  font-family: var(--serif);
  font-size: 2.2rem;
}

.atmosphere-piece--one { left: 18%; top: 24%; transform: rotate(-8deg); }
.atmosphere-piece--two { right: 23%; top: 18%; color: var(--tile-coral); transform: rotate(7deg); }
.atmosphere-piece--three { left: 42%; bottom: 20%; font-size: 1rem; letter-spacing: .2em; transform: rotate(3deg); }

.photo-tile__surface--table .photo-tile__label {
  color: rgba(255,249,238,.74);
}

.content-tile--invitation {
  width: min(900px, 90%);
  margin: 0 auto;
  text-align: center;
}

.content-tile--invitation > p:not(.tile-kicker) {
  margin-inline: auto;
}

.invitation-flower {
  right: .8rem;
  bottom: .2rem;
}

.physical-cta {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 54px;
  margin-top: 1.6rem;
  border: 2px solid rgba(23,75,143,.72);
  border-radius: 10px;
  background: linear-gradient(180deg, #f9fbfe, #dce8f4);
  box-shadow: 0 5px 0 #9eb4ce, 0 9px 0 rgba(3,31,73,.20);
  color: var(--tile-blue-dark);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  padding: 0 1.4rem;
  text-decoration: none;
  text-transform: uppercase;
}

.home-piece--signoff {
  display: grid;
  justify-items: center;
  gap: 1rem;
  color: rgba(255,249,238,.82);
  text-align: center;
}

.signoff-piece {
  display: grid;
  width: 52px;
  aspect-ratio: .82;
  place-items: center;
  border: 1px solid rgba(23,75,143,.65);
  border-radius: 7px;
  background: #fff9ee;
  box-shadow: 0 5px 0 #c3b39d, 0 10px 18px rgba(0,18,49,.22);
  color: var(--tile-coral);
  font-family: var(--serif);
  font-size: 1.75rem;
  transform: rotate(-4deg);
}

.home-piece--signoff p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: .02em;
}

/* ---------------------------------------------------------
   MOBILE — the primary art direction target
   --------------------------------------------------------- */
@media (max-width: 680px) {
  .home-tile-flow {
    padding-bottom: 3.1rem;
  }

  .home-piece {
    padding-inline: 18px;
  }

  .home-piece + .home-piece {
    margin-top: 44px;
  }

  .content-tile {
    border-width: 1.5px;
    border-radius: 18px;
    padding: 24px 20px;
    box-shadow:
      0 5px 0 rgba(181,164,140,.92),
      0 9px 0 rgba(3,31,73,.22),
      0 18px 30px rgba(0,12,42,.19),
      inset 0 0 0 4px rgba(255,255,255,.32);
  }

  .content-tile::before {
    inset: 6px;
    border-radius: 12px;
  }

  .content-tile h2 {
    font-size: clamp(2.45rem, 11vw, 3.35rem);
  }

  .content-tile h3 {
    font-size: clamp(1.9rem, 9vw, 2.55rem);
  }

  .content-tile > p:not(.tile-kicker) {
    font-size: .98rem;
    line-height: 1.6;
  }

  .content-tile--statement {
    width: 90%;
    padding: 28px 21px;
  }

  .content-tile--statement h2 {
    font-size: clamp(2.45rem, 11.5vw, 3.4rem);
  }

  .field-heading {
    width: 90%;
    margin: 0 auto 22px;
  }

  .field-heading h2 {
    font-size: clamp(2.45rem, 11vw, 3.25rem);
  }

  .gathering-tile-stack {
    gap: 16px;
  }

  .content-tile--offset-left { width: 82%; }
  .content-tile--offset-right { width: 76%; }
  .content-tile--offset-left-wide { width: 84%; }

  .tile-symbol {
    top: .75rem;
    right: .8rem;
    font-size: 3.1rem;
  }

  .field-link {
    margin-top: 20px;
    margin-left: 8%;
  }

  .about-object-pair {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .photo-tile--host {
    width: 78%;
    justify-self: end;
    transform: rotate(1deg);
  }

  .photo-tile__surface {
    min-height: 290px;
  }

  .content-tile--story {
    width: 90%;
    justify-self: start;
    transform: none;
  }

  .step-piece-stack {
    gap: 14px;
  }

  .mahjong-step {
    width: 80%;
    min-height: 116px;
    grid-template-columns: 58px 1fr;
    gap: .85rem;
    border-width: 1.5px;
    padding: 1rem;
  }

  .mahjong-step__number {
    width: 52px;
    font-size: 1.4rem;
  }

  .mahjong-step h3 {
    font-size: 1.72rem;
  }

  .mahjong-step p {
    font-size: .87rem;
  }

  .content-tile--reassurance {
    width: 88%;
  }

  .content-tile--ledger {
    width: 90%;
  }

  .porcelain-ledger li {
    grid-template-columns: 30px 1fr;
    gap: .4rem .7rem;
    padding: .9rem 0;
  }

  .porcelain-ledger small {
    grid-column: 2;
    font-size: .84rem;
  }

  .photo-tile--wide {
    width: 88%;
  }

  .photo-tile__surface--table {
    min-height: 320px;
  }

  .atmosphere-piece {
    min-width: 58px;
    min-height: 72px;
    font-size: 1.65rem;
  }

  .atmosphere-piece--one { left: 11%; top: 26%; }
  .atmosphere-piece--two { right: 12%; top: 17%; }
  .atmosphere-piece--three { left: 38%; bottom: 19%; font-size: .78rem; }

  .content-tile--invitation {
    width: 92%;
    padding-block: 28px;
  }

  .physical-cta {
    min-height: 50px;
    margin-top: 1.4rem;
  }

  .home-piece--signoff {
    margin-top: 36px !important;
  }
}

@media (min-width: 681px) and (max-width: 980px) {
  .home-piece {
    padding-inline: 32px;
  }

  .about-object-pair {
    grid-template-columns: .8fr 1.2fr;
  }
}


/* Source: /styles/home-traditional.css */
/* =========================================================
   SMALL TOWN MAHJ — EDITORIAL HOMEPAGE + PHOTO SHUFFLE HERO
   The side rails carry the decorative language. The center is calmer,
   more editorial, and more photography-led.
   ========================================================= */

.home-photo-hero {
  position: relative;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(4rem, 8vw, 7rem);
}

.home-photo-hero__grid {
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(360px,1.08fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
}

.home-photo-hero__copy {
  position: relative;
  z-index: 5;
  max-width: 620px;
}

.home-photo-hero__eyebrow {
  margin: 0 0 1rem;
  color: #174b8f;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1.35;
  text-transform: uppercase;
}

.home-photo-hero h1 {
  max-width: 7.8em;
  margin: 0;
  color: #082f67;
  font-size: clamp(3.8rem, 7vw, 7.4rem);
  line-height: .9;
  letter-spacing: -.035em;
}

.home-photo-hero h1 em {
  color: #174b8f;
  font-weight: 500;
}

.home-photo-hero__intro {
  max-width: 32rem;
  margin: 1.6rem 0 0;
  color: #5d6e83;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
}

.home-photo-hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.home-photo-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 52px;
  border: 1px solid #174b8f;
  border-radius: 999px;
  background: #174b8f;
  color: #fffaf1;
  padding: 0 1.35rem;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.home-photo-hero__secondary {
  color: #174b8f;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.photo-shuffle-hero {
  position: relative;
  width: min(510px, 100%);
  min-height: 620px;
  margin-left: auto;
}

.photo-shuffle-hero__stack {
  position: absolute;
  inset: 0 0 68px;
}

.shuffle-photo {
  --photo-rotation: 0deg;
  --photo-x: 0px;
  --photo-y: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82%;
  aspect-ratio: 4 / 5;
  margin: 0;
  border: 9px solid #fffdf7;
  border-bottom-width: 38px;
  border-radius: 9px;
  background: #fffdf7;
  box-shadow: 0 18px 42px rgba(15,45,83,.18);
  overflow: hidden;
  transform: translate(calc(-50% + var(--photo-x)), calc(-50% + var(--photo-y))) rotate(var(--photo-rotation));
  transform-origin: 50% 75%;
  transition:
    transform .62s cubic-bezier(.2,.75,.2,1),
    opacity .42s ease,
    filter .42s ease,
    z-index 0s linear .31s;
}

.shuffle-photo__image {
  position: absolute;
  inset: 0 0 29px;
  overflow: hidden;
  background:
    var(--photo, linear-gradient(135deg, #dfe9f3, #f2dfd9 52%, #dce6d6));
  background-position: center;
  background-size: cover;
}

.shuffle-photo__image::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(180deg, transparent 58%, rgba(7,44,94,.22));
}

.shuffle-photo__hint {
  position: absolute;
  right: 14px;
  bottom: 9px;
  left: 14px;
  color: #174b8f;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

.shuffle-photo[data-position="0"] {
  --photo-rotation: -1.5deg;
  --photo-x: 0px;
  --photo-y: -4px;
  z-index: 4;
  opacity: 1;
  filter: none;
}

.shuffle-photo[data-position="1"] {
  --photo-rotation: 5deg;
  --photo-x: 24px;
  --photo-y: 12px;
  z-index: 3;
  opacity: .96;
}

.shuffle-photo[data-position="2"] {
  --photo-rotation: -6deg;
  --photo-x: -25px;
  --photo-y: 20px;
  z-index: 2;
  opacity: .91;
  filter: saturate(.92);
}

.shuffle-photo[data-position="3"] {
  --photo-rotation: 2deg;
  --photo-x: 7px;
  --photo-y: 25px;
  z-index: 1;
  opacity: .48;
  filter: saturate(.82);
}

.photo-shuffle-hero.is-shuffling .shuffle-photo[data-position="0"] {
  --photo-x: 155px;
  --photo-y: -12px;
  --photo-rotation: 11deg;
  opacity: 0;
}

.photo-shuffle-hero__control {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: .75rem;
  border: 0;
  border-bottom: 1px solid rgba(23,75,143,.3);
  background: transparent;
  color: #174b8f;
  padding: .4rem .1rem;
  font: inherit;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
  cursor: pointer;
  text-transform: uppercase;
}

.photo-shuffle-hero__control i {
  font-size: 1.1rem;
  font-style: normal;
}

/* Temporary image-ready surfaces. These deliberately read like muted photo
   placeholders rather than cartoon Mahjong tiles. Replace --photo with real
   event photography as soon as those files are added to the repo. */
.shuffle-photo--one { --photo: radial-gradient(circle at 25% 28%, rgba(255,255,255,.7), transparent 16%), linear-gradient(145deg,#a9bdd0,#e7d1cb 55%,#8eaa91); }
.shuffle-photo--two { --photo: radial-gradient(circle at 72% 25%, rgba(255,255,255,.64), transparent 14%), linear-gradient(145deg,#d6e1ec,#9eb6cf 55%,#e4c0b8); }
.shuffle-photo--three { --photo: radial-gradient(circle at 35% 68%, rgba(255,255,255,.58), transparent 16%), linear-gradient(145deg,#b7c8b1,#e3d6c4 48%,#98b3cd); }
.shuffle-photo--four { --photo: radial-gradient(circle at 60% 34%, rgba(255,255,255,.58), transparent 15%), linear-gradient(145deg,#d7c4b8,#9db3c7 50%,#d9e0d0); }

/* ---------------------------------------------------------
   Traditional content field
   --------------------------------------------------------- */
.home-tile-flow {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 5rem;
  background: transparent;
}

.home-piece {
  width: 100%;
  padding-inline: 0 !important;
}

.home-piece + .home-piece {
  margin-top: clamp(4.5rem, 8vw, 8rem);
}

.home-piece--statement {
  padding-top: clamp(1rem, 2vw, 2rem);
}

.field-heading,
.field-heading--centered {
  width: min(720px, 100%);
  margin: 0 0 2rem;
  color: #082f67;
  text-align: left;
}

.field-heading .tile-kicker,
.field-heading--centered .tile-kicker {
  color: #174b8f;
}

.field-heading h2,
.field-heading--centered h2 {
  max-width: 10em;
  margin: 0;
  color: #082f67;
  font-size: clamp(2.7rem, 5vw, 5.3rem);
}

.content-tile,
.mahjong-step,
.photo-tile,
.signoff-piece {
  border-radius: 14px !important;
  box-shadow: 0 14px 34px rgba(18,54,94,.08) !important;
}

.content-tile {
  border: 1px solid rgba(23,75,143,.18) !important;
  background: rgba(255,253,248,.88) !important;
  padding: clamp(1.6rem, 4vw, 3.2rem) !important;
}

.content-tile::before {
  display: none !important;
}

.content-tile--statement,
.content-tile--reassurance,
.content-tile--ledger {
  width: min(900px, 100%) !important;
}

.content-tile--statement {
  text-align: left !important;
}

.gathering-tile-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem;
  width: 100%;
}

.content-tile--offset-left,
.content-tile--offset-right,
.content-tile--offset-left-wide {
  width: 100% !important;
  justify-self: stretch !important;
}

.tile-symbol,
.content-tile__botanical,
.invitation-flower,
.atmosphere-piece,
.photo-tile__flower {
  opacity: .13 !important;
}

.about-object-pair {
  width: 100%;
  gap: clamp(2rem, 5vw, 5rem);
}

.photo-tile {
  border: 1px solid rgba(23,75,143,.16) !important;
  padding: 8px 8px 12px !important;
  background: #fffdf8 !important;
}

.content-tile--story {
  transform: none !important;
}

.step-piece-stack {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem;
}

.mahjong-step {
  width: 100% !important;
  min-height: 0 !important;
  grid-template-columns: 48px 1fr !important;
  border: 1px solid rgba(23,75,143,.15) !important;
  background: #fffdf8 !important;
  padding: 1.4rem !important;
}

.mahjong-step::before { display: none !important; }

.mahjong-step__number {
  width: 42px !important;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--sans) !important;
  font-size: .74rem !important;
  font-weight: 900;
  letter-spacing: .1em;
}

.photo-tile--wide {
  width: min(860px, 100%) !important;
  transform: none !important;
}

.photo-tile__surface--table {
  min-height: 380px;
  background: linear-gradient(145deg,#dce6ef,#f0dfd8 52%,#dce5d7) !important;
}

.field-link {
  margin-left: 0 !important;
  color: #174b8f !important;
  border-bottom-color: rgba(23,75,143,.28) !important;
}

.home-piece--signoff {
  color: #174b8f !important;
}

@media (max-width: 900px) {
  .home-photo-hero__grid {
    grid-template-columns: 1fr;
  }

  .home-photo-hero__copy {
    max-width: 680px;
  }

  .photo-shuffle-hero {
    width: min(500px, 92%);
    min-height: 570px;
    margin: 0 auto;
  }

  .gathering-tile-stack,
  .step-piece-stack {
    grid-template-columns: 1fr;
  }

  .about-object-pair {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .home-photo-hero {
    width: calc(100% - 28px);
    padding: 2.8rem 0 4.4rem;
  }

  .home-photo-hero__grid {
    gap: 2.6rem;
  }

  .home-photo-hero h1 {
    max-width: 7.3em;
    font-size: clamp(3.45rem, 15vw, 5.1rem);
  }

  .home-photo-hero__intro {
    margin-top: 1.3rem;
    font-size: 1.05rem;
  }

  .home-photo-hero__actions {
    margin-top: 1.5rem;
  }

  .photo-shuffle-hero {
    width: 100%;
    min-height: 500px;
  }

  .photo-shuffle-hero__stack {
    inset-bottom: 60px;
  }

  .shuffle-photo {
    width: 78%;
    border-width: 7px;
    border-bottom-width: 32px;
  }

  .shuffle-photo__image {
    inset-bottom: 24px;
  }

  .shuffle-photo__hint {
    bottom: 7px;
  }

  .photo-shuffle-hero__control {
    right: 2px;
  }

  .home-tile-flow {
    width: calc(100% - 28px);
    padding-bottom: 4rem;
  }

  .home-piece + .home-piece {
    margin-top: 4.5rem;
  }

  .content-tile h2,
  .field-heading h2,
  .field-heading--centered h2 {
    font-size: clamp(2.55rem, 12vw, 3.75rem) !important;
  }

  .photo-tile__surface,
  .photo-tile__surface--table {
    min-height: 300px !important;
  }
}

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


/* Source: /styles/home-mobile-photo-overlay.css */
/* =========================================================
   SMALL TOWN MAHJ — MOBILE PHOTO-LED HERO + BRIEF ABOUT
   On phones, photography becomes a full-bleed hero background while the copy
   stays compact and readable. Desktop/tablet keep the editorial split layout.
   ========================================================= */

.home-about-brief {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  border-top: 1px solid rgba(23,75,143,.16);
  border-bottom: 1px solid rgba(23,75,143,.12);
}

.home-about-brief__inner {
  max-width: 780px;
}

.home-about-brief__eyebrow {
  margin: 0 0 .8rem;
  color: #174b8f;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.home-about-brief h2 {
  max-width: 9em;
  margin: 0 0 1rem;
  color: #082f67;
  font-size: clamp(2.75rem, 5vw, 4.9rem);
  line-height: .96;
}

.home-about-brief p:not(.home-about-brief__eyebrow) {
  max-width: 44rem;
  margin: 0;
  color: #5d6e83;
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.72;
}

.home-about-brief__link {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 1.45rem;
  border: 1px solid #062f68;
  border-radius: 7px 7px 9px 8px;
  background:
    linear-gradient(180deg, rgba(34,91,165,.98) 0%, rgba(18,70,139,.98) 52%, rgba(7,47,103,.99) 100%),
    #0d4488;
  box-shadow:
    0 3px 0 #05275a,
    0 5px 0 rgba(2,24,58,.36),
    0 9px 15px rgba(2,22,54,.22),
    inset 0 0 0 2px rgba(255,255,255,.15),
    inset 0 0 0 3px rgba(255,250,241,.08);
  color: #fffaf1;
  padding: 0 1.15rem;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.home-about-brief__link::before {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,250,241,.34);
  border-radius: 4px 4px 6px 5px;
  content: '';
  pointer-events: none;
}

.home-about-brief__link:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 0 #05275a,
    0 6px 0 rgba(2,24,58,.36),
    0 11px 17px rgba(2,22,54,.25),
    inset 0 0 0 2px rgba(255,255,255,.15),
    inset 0 0 0 3px rgba(255,250,241,.08);
}

.home-about-brief__link:active {
  transform: translateY(2px);
}

.home-about-brief__link:focus-visible {
  outline: 3px solid rgba(233,163,45,.78);
  outline-offset: 3px;
}

.home-hero-bridge {
  width: min(640px, calc(100% - 72px));
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  padding: 1.1rem 1.35rem;
  border-top: 1px solid rgba(23,75,143,.13);
  border-bottom: 1px solid rgba(23,75,143,.13);
  text-align: center;
}

.home-hero-bridge p {
  margin: 0;
  color: #344a65;
  font-size: clamp(.98rem, 1.25vw, 1.12rem);
  line-height: 1.6;
}

/* Hero booking action uses the same physical Mahjong-tile language as the
   header controls, translated into cobalt so it reads clearly over photos. */
.home-photo-hero__cta {
  position: relative;
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border: 1px solid #315f9d !important;
  border-radius: 7px 7px 9px 8px !important;
  background:
    linear-gradient(180deg, rgba(34,88,156,.98) 0%, rgba(18,67,132,.98) 52%, rgba(7,46,104,.99) 100%),
    #174b8f !important;
  box-shadow:
    0 3px 0 #082f67,
    0 5px 0 rgba(3,29,72,.2),
    0 10px 18px rgba(3,28,65,.22),
    inset 0 0 0 2px rgba(255,255,255,.15),
    inset 0 0 0 3px rgba(255,250,241,.08) !important;
  color: #fffaf1 !important;
  padding: 0 1.35rem !important;
  font-size: .68rem !important;
  font-weight: 900;
  letter-spacing: .12em !important;
  line-height: 1;
  text-decoration: none;
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent !important;
  paint-order: normal !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  text-transform: uppercase;
  white-space: nowrap;
  transform: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.home-photo-hero__cta,
.home-photo-hero__cta * {
  text-shadow: none !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-stroke-color: transparent !important;
  paint-order: normal !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}

.home-photo-hero__cta::before {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,250,241,.34);
  border-radius: 4px 4px 6px 5px;
  content: '';
  pointer-events: none;
}

.home-photo-hero__cta:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(43,98,168,.99) 0%, rgba(24,76,145,.99) 52%, rgba(8,51,113,.99) 100%),
    #174b8f !important;
  box-shadow:
    0 4px 0 #082f67,
    0 6px 0 rgba(3,29,72,.2),
    0 12px 20px rgba(3,28,65,.24),
    inset 0 0 0 2px rgba(255,255,255,.17),
    inset 0 0 0 3px rgba(255,250,241,.09) !important;
}

.home-photo-hero__cta:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 #082f67,
    0 3px 8px rgba(3,28,65,.18),
    inset 0 0 0 2px rgba(255,255,255,.15),
    inset 0 0 0 3px rgba(255,250,241,.08) !important;
}

.home-photo-hero__cta:focus-visible {
  outline: 3px solid rgba(233,163,45,.78);
  outline-offset: 3px;
}

@media (max-width: 680px) {
  .home-photo-hero {
    position: relative;
    width: 100% !important;
    min-height: 610px;
    margin: 0 !important;
    padding: 0 0 2.2rem !important;
    overflow: hidden;
    isolation: isolate;
  }

  .home-photo-hero__grid {
    position: relative;
    display: block !important;
    min-height: 570px;
  }

  .photo-shuffle-hero {
    position: absolute !important;
    z-index: 1;
    inset: 0 !important;
    width: 100% !important;
    min-height: 570px !important;
    margin: 0 !important;
    pointer-events: none;
  }

  .photo-shuffle-hero__stack {
    position: absolute !important;
    inset: 0 !important;
  }

  .shuffle-photo {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden;
    transform: none !important;
    transform-origin: center !important;
    transition: opacity .55s ease, filter .55s ease !important;
  }

  .shuffle-photo__image {
    position: absolute !important;
    inset: 0 !important;
    background-position: center !important;
    background-size: cover !important;
  }

  .shuffle-photo__image::after {
    background: linear-gradient(180deg, rgba(7,44,94,.08) 0%, rgba(7,44,94,.02) 48%, rgba(7,44,94,.22) 100%) !important;
  }

  .shuffle-photo__hint {
    display: none !important;
  }

  .shuffle-photo[data-position="0"] {
    z-index: 4 !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .shuffle-photo[data-position="1"] {
    z-index: 3 !important;
    opacity: 0 !important;
  }

  .shuffle-photo[data-position="2"] {
    z-index: 2 !important;
    opacity: 0 !important;
  }

  .shuffle-photo[data-position="3"] {
    z-index: 1 !important;
    opacity: 0 !important;
  }

  .photo-shuffle-hero.is-shuffling .shuffle-photo[data-position="0"] {
    opacity: 0 !important;
    transform: none !important;
  }

  .photo-shuffle-hero::after {
    position: absolute;
    z-index: 8;
    inset: 0;
    content: '';
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(6,38,78,.02) 0%,
      rgba(6,38,78,.01) 55%,
      rgba(6,38,78,.10) 100%);
  }

  .home-photo-hero__copy {
    position: relative;
    z-index: 12;
    display: flex;
    min-height: 570px;
    max-width: none !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 34px 46px 42px;
    text-align: center;
    pointer-events: none;
  }

  .home-photo-hero__copy::before {
    display: none !important;
  }

  .home-photo-hero h1 {
    max-width: 7.8em !important;
    margin: 0 !important;
    color: #082f67 !important;
    font-size: clamp(2.45rem, 10vw, 3.2rem) !important;
    line-height: .96 !important;
    letter-spacing: -.025em !important;
    -webkit-text-stroke: .7px rgba(255,250,241,.96);
    paint-order: stroke fill;
    text-shadow: 0 1px 1.5px rgba(3,31,72,.18);
  }

  .home-photo-hero__intro {
    width: 100%;
    max-width: 22.5rem !important;
    margin: 1rem 0 0 !important;
    color: #344a65 !important;
    font-size: .94rem !important;
    line-height: 1.52 !important;
    text-align: center;
    -webkit-text-stroke: .45px rgba(255,250,241,.92);
    paint-order: stroke fill;
    text-shadow: 0 1px 1px rgba(3,31,72,.12);
  }

  .home-photo-hero__intro-break {
    display: block;
  }

  .home-photo-hero__actions {
    justify-content: center;
    gap: .8rem 1rem !important;
    margin-top: 1.15rem !important;
    pointer-events: auto;
  }

  .home-photo-hero__cta {
    min-height: 46px !important;
    padding: 0 1rem !important;
    font-size: .62rem !important;
    letter-spacing: .105em !important;
  }

  .home-photo-hero__cta::before {
    inset: 3px;
  }

  .home-photo-hero__secondary {
    font-size: .64rem !important;
  }

  .photo-shuffle-hero__control {
    z-index: 15;
    right: 14px !important;
    bottom: 10px !important;
    pointer-events: auto;
    background: rgba(255,250,241,.92) !important;
    border: 1px solid rgba(23,75,143,.18) !important;
    border-radius: 999px;
    padding: .55rem .8rem !important;
    box-shadow: 0 8px 18px rgba(15,45,83,.12);
  }

  .home-hero-bridge {
    width: calc(100% - 76px);
    margin-top: 1.65rem;
    padding: 1rem .8rem;
  }

  .home-hero-bridge p {
    font-size: .95rem;
    line-height: 1.55;
  }

  .home-about-brief {
    width: calc(100% - 36px);
    padding: 3.5rem 0 3.7rem;
  }

  .home-about-brief h2 {
    max-width: 8.5em;
    font-size: clamp(2.45rem, 10.5vw, 3.25rem);
  }

  .home-about-brief p:not(.home-about-brief__eyebrow) {
    font-size: 1rem;
    line-height: 1.65;
  }

  .home-about-brief__link {
    min-height: 46px;
    padding: 0 .95rem;
    font-size: .62rem;
    letter-spacing: .105em;
  }

  .home-about-brief__link::before {
    inset: 3px;
  }
}

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


/* Source: /styles/home-real-photos.css */
/* Real Small Town Mahj photography for the homepage shuffle.
   Load only the photos required by the initial composition at each breakpoint;
   later hidden photos are promoted by home-photo-shuffle.js shortly before use. */
.shuffle-photo--one { --photo: url('/photos/home-shuffle-1.jpg'); }

@media (min-width: 681px) and (max-width: 980px) {
  .shuffle-photo--two { --photo: url('/photos/home-shuffle-2.jpg'); }
  .shuffle-photo--three { --photo: url('/photos/home-shuffle-3.jpg'); }
  .shuffle-photo--four { --photo: url('/photos/home-shuffle-4.jpg'); }
  .shuffle-photo--five { --photo: url('/photos/home-shuffle-5.jpg'); }
  .shuffle-photo--six { --photo: url('/photos/home-shuffle-6.jpg'); }
}

@media (min-width: 981px) {
  .shuffle-photo--two { --photo: url('/photos/home-shuffle-2.jpg'); }
  .shuffle-photo--three { --photo: url('/photos/home-shuffle-3.jpg'); }
}

/* Keep the physical photo-card transitions, but leave the photograph itself
   stationary. The former sway could expose a one-frame decode/animation handoff
   on slower devices before motion began. */
.shuffle-photo {
  transition:
    opacity 1.5s cubic-bezier(.4,0,.2,1),
    filter 1.5s cubic-bezier(.4,0,.2,1),
    transform 1.5s cubic-bezier(.4,0,.2,1) !important;
}

.shuffle-photo__image {
  transform: scale(1.05);
  transform-origin: center center;
  will-change: auto;
}

/* Keep the current image fully visible while the next image fades over it.
   This avoids an empty-frame blink during the dissolve. */
.shuffle-photo.is-outgoing {
  z-index: 20 !important;
  opacity: 1 !important;
}

.shuffle-photo.is-incoming {
  z-index: 21 !important;
  opacity: 0 !important;
}

.photo-shuffle-hero.is-dissolving .shuffle-photo.is-incoming {
  opacity: 1 !important;
}

.photo-shuffle-hero.is-dissolving .shuffle-photo.is-outgoing {
  opacity: 1 !important;
}

.shuffle-photo[data-position="4"] {
  --photo-rotation: -3deg;
  --photo-x: -10px;
  --photo-y: 30px;
  z-index: 0;
  opacity: .34;
  filter: saturate(.78);
}

.shuffle-photo[data-position="5"] {
  --photo-rotation: 4deg;
  --photo-x: 14px;
  --photo-y: 34px;
  z-index: -1;
  opacity: .22;
  filter: saturate(.72);
}

@media (max-width: 680px) {
  .shuffle-photo {
    transition:
      opacity 1.5s cubic-bezier(.4,0,.2,1),
      filter 1.5s cubic-bezier(.4,0,.2,1) !important;
  }

  .shuffle-photo[data-position="4"],
  .shuffle-photo[data-position="5"] {
    --photo-rotation: 0deg;
    --photo-x: 0px;
    --photo-y: 0px;
    opacity: 0;
  }

  .shuffle-photo__image {
    background-position: center center !important;
    background-size: cover !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shuffle-photo,
  .shuffle-photo__image {
    transition: none !important;
    animation: none !important;
  }

  .shuffle-photo__image {
    transform: none !important;
    will-change: auto !important;
  }
}


/* Source: /styles/home-desktop-final.css */
/* =========================================================
   SMALL TOWN MAHJ — FINAL DESKTOP HOMEPAGE ART DIRECTION
   Desktop only. Mobile/tablet remain owned by the approved existing rules.
   ========================================================= */

@media (min-width: 981px) {
  /* The decorative rails are one mirrored pair, never two unrelated strips. */
  body:has(.home-photo-hero) .mat-edge--right {
    transform: scaleX(-1) !important;
    transform-origin: center !important;
  }

  /* -------------------------------------------------------
     HERO
     Photography remains dominant but its desktop height is bounded so the
     card stack no longer becomes a nearly 1,000px-tall portrait object.
     ------------------------------------------------------- */
  body:has(.home-photo-hero) .home-photo-hero {
    width: min(1540px, calc(100% - clamp(44px, 4vw, 72px))) !important;
    margin-inline: auto !important;
    padding: clamp(2.2rem, 3.2vh, 2.9rem) 0 clamp(2.45rem, 3.8vh, 3.35rem) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: clamp(500px, calc(100vh - 170px), 620px) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    position: relative !important;
    z-index: 8 !important;
    grid-column: 1 / 7 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 1rem clamp(2rem, 3vw, 3.8rem) 1rem clamp(2.2rem, 4vw, 4.8rem) !important;
    transform: translateY(-.35rem) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy::before {
    position: absolute;
    z-index: -1;
    inset: -2rem -9rem -2rem -1.2rem;
    display: block !important;
    content: '';
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(255,250,241,.995) 0%,
      rgba(255,250,241,.985) 54%,
      rgba(255,250,241,.90) 67%,
      rgba(255,250,241,.52) 80%,
      rgba(255,250,241,0) 100%
    );
  }

  body:has(.home-photo-hero) .home-photo-hero h1 {
    max-width: 7.25em !important;
    margin: 0 !important;
    color: #082f67 !important;
    font-size: clamp(4rem, 5.2vw, 6.1rem) !important;
    line-height: .9 !important;
    letter-spacing: -.041em !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__actions {
    margin-top: clamp(1.8rem, 2.5vw, 2.45rem) !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    position: relative !important;
    z-index: 4 !important;
    grid-column: 5 / 13 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 980px !important;
    height: clamp(540px, 69vh, 690px) !important;
    min-height: 0 !important;
    margin: 0 0 0 auto !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero__stack {
    inset: 0 !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    left: 52% !important;
    width: min(94%, 780px) !important;
    height: clamp(520px, 66vh, 660px) !important;
    aspect-ratio: auto !important;
    border-width: 8px !important;
    border-bottom-width: 36px !important;
    border-radius: 10px !important;
    box-shadow:
      0 24px 54px rgba(15,45,83,.18),
      0 4px 0 rgba(23,75,143,.07) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__image {
    bottom: 27px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__hint {
    bottom: 8px !important;
  }

  body:has(.home-photo-hero) .home-hero-bridge {
    display: grid !important;
    width: min(1380px, calc(100% - clamp(64px, 7vw, 112px))) !important;
    grid-template-columns: repeat(12, minmax(0,1fr)) !important;
    margin: 0 auto !important;
    border-top: 1px solid rgba(23,75,143,.17) !important;
    border-bottom: 0 !important;
    padding: 1.05rem 0 0 !important;
    text-align: left !important;
  }

  body:has(.home-photo-hero) .home-hero-bridge p {
    grid-column: 4 / 10 !important;
    max-width: 44rem !important;
    font-size: clamp(1rem, 1.05vw, 1.1rem) !important;
    line-height: 1.58 !important;
  }

  /* -------------------------------------------------------
     ABOUT BRIEF
     ------------------------------------------------------- */
  body:has(.home-photo-hero) .home-about-brief {
    width: min(1280px, calc(100% - clamp(72px, 8vw, 128px))) !important;
    padding: clamp(4.8rem, 6.2vw, 6.4rem) 0 !important;
  }

  body:has(.home-photo-hero) .home-about-brief__inner {
    display: grid !important;
    max-width: none !important;
    grid-template-columns: repeat(12, minmax(0,1fr)) !important;
    column-gap: clamp(1.25rem, 2.2vw, 2.5rem) !important;
    align-items: start !important;
  }

  body:has(.home-photo-hero) .home-about-brief__eyebrow {
    grid-column: 1 / 6 !important;
    margin-bottom: 1rem !important;
  }

  body:has(.home-photo-hero) .home-about-brief h2 {
    grid-column: 1 / 7 !important;
    max-width: 8.2em !important;
    margin: 0 !important;
    font-size: clamp(3.1rem, 4.1vw, 4.75rem) !important;
  }

  body:has(.home-photo-hero) .home-about-brief p:not(.home-about-brief__eyebrow) {
    grid-column: 8 / 13 !important;
    grid-row: 1 / 3 !important;
    max-width: 35rem !important;
    margin-top: 1.45rem !important;
    font-size: clamp(1rem, 1.02vw, 1.1rem) !important;
  }

  body:has(.home-photo-hero) .home-about-brief__link {
    grid-column: 8 / 13 !important;
    justify-self: start !important;
    margin-top: 1.35rem !important;
  }

  /* -------------------------------------------------------
     CONTENT FIELD — architectural Mahjong objects, not card rows.
     ------------------------------------------------------- */
  body:has(.home-photo-hero) .home-tile-flow {
    width: min(1280px, calc(100% - clamp(72px, 8vw, 128px))) !important;
    padding-bottom: clamp(5rem, 7vw, 7rem) !important;
  }

  body:has(.home-photo-hero) .home-piece + .home-piece {
    margin-top: clamp(5.8rem, 7.5vw, 8rem) !important;
  }

  body:has(.home-photo-hero) .content-tile,
  body:has(.home-photo-hero) .mahjong-step {
    border-radius: 15px !important;
    box-shadow:
      0 5px 0 rgba(183,169,148,.72),
      0 15px 36px rgba(18,54,94,.09),
      inset 0 0 0 4px rgba(255,255,255,.3) !important;
  }

  body:has(.home-photo-hero) .content-tile {
    border: 1px solid rgba(23,75,143,.2) !important;
    padding: clamp(2rem, 3vw, 3.1rem) !important;
  }

  body:has(.home-photo-hero) .content-tile::before {
    display: block !important;
    inset: 7px !important;
    border: 1px solid rgba(23,75,143,.11) !important;
    border-radius: 9px !important;
  }

  body:has(.home-photo-hero) .content-tile--porcelain {
    background: linear-gradient(145deg,#fffdf8 0%,#fff9ee 62%,#f4ecdf 100%) !important;
  }

  body:has(.home-photo-hero) .content-tile--soft-blue {
    background: linear-gradient(145deg,#edf4fb 0%,#dfeaf6 100%) !important;
  }

  body:has(.home-photo-hero) .content-tile--sage {
    background: linear-gradient(145deg,#eef2ea 0%,#dfe7d7 100%) !important;
  }

  body:has(.home-photo-hero) .content-tile h2,
  body:has(.home-photo-hero) .field-heading h2,
  body:has(.home-photo-hero) .field-heading--centered h2 {
    font-size: clamp(2.9rem, 3.9vw, 4.6rem) !important;
    line-height: .95 !important;
  }

  body:has(.home-photo-hero) .content-tile h3 {
    font-size: clamp(2rem, 2.4vw, 2.8rem) !important;
  }

  body:has(.home-photo-hero) .content-tile > p:not(.tile-kicker) {
    max-width: 38rem !important;
    font-size: clamp(.98rem, 1vw, 1.08rem) !important;
  }

  body:has(.home-photo-hero) .home-piece--statement .content-tile--statement {
    width: min(980px, 80%) !important;
    margin: 0 0 0 3% !important;
    text-align: left !important;
  }

  body:has(.home-photo-hero) .home-piece--statement .content-tile--statement h2,
  body:has(.home-photo-hero) .home-piece--statement .content-tile--statement > p:not(.tile-kicker) {
    margin-inline: 0 !important;
  }

  body:has(.home-photo-hero) .home-piece--gatherings {
    padding-bottom: 4.4rem !important;
  }

  body:has(.home-photo-hero) .home-piece--gatherings .field-heading {
    width: min(760px, 66%) !important;
    margin: 0 0 2.8rem 4% !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(12, minmax(0,1fr)) !important;
    gap: clamp(1.1rem, 1.7vw, 1.7rem) !important;
    margin: 0 !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack .content-tile--offset-left {
    grid-column: 1 / 5 !important;
    width: 100% !important;
    transform: translateY(0) !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack .content-tile--offset-right {
    grid-column: 5 / 9 !important;
    width: 100% !important;
    transform: translateY(4.2rem) !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack .content-tile--offset-left-wide {
    grid-column: 9 / 13 !important;
    width: 100% !important;
    transform: translateY(1.35rem) !important;
  }

  body:has(.home-photo-hero) .home-piece--steps .field-heading {
    width: min(720px, 60%) !important;
    margin: 0 4% 3rem auto !important;
    text-align: right !important;
  }

  body:has(.home-photo-hero) .home-piece--steps .field-heading h2 {
    margin-left: auto !important;
  }

  body:has(.home-photo-hero) .step-piece-stack {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(12, minmax(0,1fr)) !important;
    gap: clamp(1.1rem, 1.7vw, 1.7rem) !important;
    margin: 0 !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step {
    width: 100% !important;
    min-height: 154px !important;
    grid-template-columns: 52px 1fr !important;
    padding: 1.45rem !important;
    background: linear-gradient(180deg,#fffdf8 0%,#f7f0e5 100%) !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(1) {
    grid-column: 1 / 5 !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(2) {
    grid-column: 5 / 9 !important;
    transform: translateY(1.7rem) !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(3) {
    grid-column: 9 / 13 !important;
    transform: translateY(3.4rem) !important;
  }

  body:has(.home-photo-hero) .mahjong-step__number {
    width: 46px !important;
    aspect-ratio: 1 !important;
    border: 1px solid rgba(23,75,143,.18) !important;
    border-radius: 8px !important;
    background: #edf4fb !important;
    font-family: var(--serif) !important;
    font-size: 1.25rem !important;
    letter-spacing: 0 !important;
  }

  body:has(.home-photo-hero) .mahjong-step::before {
    display: block !important;
    inset: 6px !important;
    border: 1px solid rgba(23,75,143,.1) !important;
    border-radius: 9px !important;
  }

  body:has(.home-photo-hero) .home-piece--beginner .content-tile--reassurance {
    width: min(860px, 70%) !important;
    margin: 0 3% 0 auto !important;
    text-align: left !important;
  }

  body:has(.home-photo-hero) .home-piece--beginner .content-tile--reassurance > p:not(.tile-kicker) {
    margin-inline: 0 !important;
  }

  body:has(.home-photo-hero) .home-piece--included .content-tile--ledger {
    display: grid !important;
    width: min(1080px, 86%) !important;
    grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr) !important;
    align-items: start !important;
    gap: clamp(2rem, 4vw, 4.5rem) !important;
    margin: 0 auto 0 2% !important;
  }

  body:has(.home-photo-hero) .home-piece--included .ledger-heading {
    max-width: 30rem !important;
    margin: 0 !important;
    padding-top: .35rem !important;
  }

  body:has(.home-photo-hero) .home-piece--included .porcelain-ledger li {
    grid-template-columns: 28px minmax(120px,.72fr) 1fr !important;
    gap: .75rem !important;
    padding: .9rem 0 !important;
  }

  body:has(.home-photo-hero) .home-piece--invite .content-tile--invitation {
    width: min(900px, 70%) !important;
    margin-inline: auto !important;
    padding-block: clamp(2.5rem, 4vw, 3.5rem) !important;
  }

  body:has(.home-photo-hero) .home-piece--signoff {
    margin-top: clamp(4.5rem, 6vw, 6rem) !important;
    color: #174b8f !important;
  }

  body:has(.home-photo-hero) .home-piece--signoff p {
    font-size: 1.05rem !important;
  }
}

/* Wide desktop: increase the physical relationship between copy and photo
   instead of letting the composition drift back into two separate columns. */
@media (min-width: 1500px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: min(1600px, calc(100% - 56px)) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    grid-column: 1 / 7 !important;
    padding-left: clamp(4.8rem, 5vw, 6rem) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy::before {
    right: -12rem !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 4 / 13 !important;
    max-width: 1080px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    left: 49% !important;
    width: min(94%, 840px) !important;
    height: clamp(570px, 65vh, 680px) !important;
  }

  body:has(.home-photo-hero) .home-hero-bridge p {
    grid-column: 5 / 11 !important;
  }
}

/* Compact desktop/laptop band. This is deliberately not tablet styling:
   approved <=980px behavior remains untouched. The goal is simply to stop
   1024-class screens from inheriting three cramped wide-desktop card rows. */
@media (min-width: 981px) and (max-width: 1180px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: calc(100% - 32px) !important;
    padding-top: 1.9rem !important;
    padding-bottom: 2.35rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__grid {
    min-height: 520px !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    grid-column: 1 / 7 !important;
    padding-left: 1.75rem !important;
    padding-right: 1.6rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy::before {
    inset: -1.6rem -6rem -1.6rem -.7rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero h1 {
    font-size: clamp(3.5rem, 5.6vw, 4.35rem) !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 5 / 13 !important;
    height: 520px !important;
    min-height: 0 !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    left: 52% !important;
    width: min(93%, 560px) !important;
    height: 500px !important;
  }

  body:has(.home-photo-hero) .home-hero-bridge {
    width: calc(100% - 48px) !important;
  }

  body:has(.home-photo-hero) .home-hero-bridge p {
    grid-column: 3 / 11 !important;
  }

  body:has(.home-photo-hero) .home-about-brief,
  body:has(.home-photo-hero) .home-tile-flow {
    width: calc(100% - 64px) !important;
  }

  body:has(.home-photo-hero) .home-about-brief {
    padding: 4.5rem 0 !important;
  }

  body:has(.home-photo-hero) .home-about-brief h2 {
    font-size: clamp(2.75rem, 4.3vw, 3.7rem) !important;
  }

  body:has(.home-photo-hero) .home-piece + .home-piece {
    margin-top: 5.5rem !important;
  }

  body:has(.home-photo-hero) .content-tile {
    padding: 1.65rem !important;
  }

  body:has(.home-photo-hero) .content-tile h2,
  body:has(.home-photo-hero) .field-heading h2,
  body:has(.home-photo-hero) .field-heading--centered h2 {
    font-size: clamp(2.5rem, 3.9vw, 3.45rem) !important;
  }

  body:has(.home-photo-hero) .content-tile h3 {
    font-size: clamp(1.65rem, 2.3vw, 2.1rem) !important;
  }

  body:has(.home-photo-hero) .home-piece--statement .content-tile--statement,
  body:has(.home-photo-hero) .home-piece--beginner .content-tile--reassurance,
  body:has(.home-photo-hero) .home-piece--invite .content-tile--invitation {
    width: min(90%, 820px) !important;
  }

  body:has(.home-photo-hero) .home-piece--gatherings {
    padding-bottom: 5.5rem !important;
  }

  body:has(.home-photo-hero) .home-piece--gatherings .field-heading {
    width: min(760px, 80%) !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack,
  body:has(.home-photo-hero) .step-piece-stack {
    gap: 1rem !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack .content-tile--offset-left {
    grid-column: 1 / 7 !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack .content-tile--offset-right {
    grid-column: 7 / 13 !important;
    transform: translateY(1.7rem) !important;
  }

  body:has(.home-photo-hero) .gathering-tile-stack .content-tile--offset-left-wide {
    grid-column: 4 / 10 !important;
    transform: translateY(3.4rem) !important;
  }

  body:has(.home-photo-hero) .home-piece--steps .field-heading {
    width: min(720px, 78%) !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(1) {
    grid-column: 1 / 7 !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(2) {
    grid-column: 7 / 13 !important;
    transform: translateY(1.7rem) !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(3) {
    grid-column: 4 / 10 !important;
    transform: translateY(3.4rem) !important;
  }

  body:has(.home-photo-hero) .home-piece--included .content-tile--ledger {
    width: min(92%, 880px) !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-inline: auto !important;
  }

  body:has(.home-photo-hero) .home-piece--included .porcelain-ledger li {
    grid-template-columns: 28px minmax(120px,.72fr) 1fr !important;
  }
}

/* Source: /styles/home-about-founder-card.css */
/* Homepage story teaser refinement.
   Adela's portrait carries more visual weight while the section label and
   story CTA are centered against the full content field, not just the copy column. */

.home-about-brief__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem) clamp(1.25rem, 3.5vw, 3.5rem);
}

/* Let the eyebrow, heading, and CTA participate directly in the parent grid.
   This allows the eyebrow and CTA to be centered against the whole section. */
.home-about-brief__copy {
  display: contents;
}

.home-about-brief__eyebrow {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  width: 100%;
  margin-inline: auto !important;
  text-align: center !important;
}

.home-about-brief h2 {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: start;
}

.home-about-brief__portrait {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(23,75,143,.18);
  border-radius: 18px;
  background: #f6efe4;
  box-shadow: 0 12px 28px rgba(19,52,91,.12);
  transform: rotate(.7deg);
}

.home-about-brief__portrait img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.home-about-brief__link {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex !important;
  width: fit-content !important;
  max-width: max-content !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: center !important;
  margin-top: clamp(.5rem, 1.5vw, 1.2rem) !important;
  margin-inline: auto !important;
  white-space: normal !important;
  text-align: center !important;
}

.home-about-brief__link > span {
  display: block;
  white-space: nowrap;
}

@media (min-width: 981px) {
  body:has(.home-photo-hero) .home-about-brief__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(1.5rem, 2.8vw, 2.8rem) clamp(2rem, 4vw, 4.25rem) !important;
  }

  body:has(.home-photo-hero) .home-about-brief h2 {
    max-width: 8em !important;
  }

  body:has(.home-photo-hero) .home-about-brief__link {
    justify-self: center !important;
    margin-inline: auto !important;
    padding-inline: 1.05rem !important;
  }

  body:has(.home-photo-hero) .home-about-brief__portrait {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    border-radius: 18px !important;
    transform: rotate(.7deg) translateY(.1rem);
  }
}

@media (max-width: 980px) {
  .home-about-brief__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.35rem 1rem;
  }

  .home-about-brief__portrait {
    width: 100%;
    max-width: none;
    align-self: center;
    border-radius: 16px;
    transform: rotate(.8deg);
  }
}

@media (max-width: 680px) {
  .home-about-brief {
    padding-top: 3.05rem !important;
    padding-bottom: 3.35rem !important;
  }

  .home-about-brief__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.1rem .8rem;
  }

  .home-about-brief h2 {
    margin-bottom: 0 !important;
  }

  .home-about-brief__portrait {
    width: 100%;
    max-width: none;
    border-radius: 15px;
    box-shadow: 0 10px 22px rgba(19,52,91,.13);
  }

  .home-about-brief__link {
    min-height: 48px !important;
    margin-top: .65rem !important;
    margin-inline: auto !important;
    padding: .72rem .82rem !important;
    font-size: .59rem !important;
    line-height: 1.24 !important;
  }
}

/* Source: /styles/home-hero-bottom-left.css */
/* Homepage hero composition refinement.
   Mobile/tablet remain approved and unchanged.
   Desktop uses a full-width framed photo composition inside the ivory tabletop,
   with the message kept separate from the photography for clean readability. */

/* Remove the divider between the photo hero and the About teaser. */
.home-about-brief {
  border-top: 0 !important;
}

@media (max-width: 680px) {
  .home-photo-hero {
    min-height: 570px !important;
    padding-bottom: 0 !important;
  }

  .home-photo-hero__copy {
    min-height: 570px !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 34px 34px 72px 10% !important;
    text-align: left !important;
  }

  /* Keep the photograph completely clean behind the headline. */
  .home-photo-hero__copy::after,
  .home-photo-hero__copy::before,
  .photo-shuffle-hero::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  .home-photo-hero h1 {
    max-width: 7.6em !important;
    color: #fffaf1 !important;
    -webkit-text-stroke: 1px rgba(8,47,103,.96) !important;
    paint-order: stroke fill !important;
    text-shadow: 0 1px 2px rgba(3,24,58,.16) !important;
  }

  .home-photo-hero__actions {
    justify-content: flex-start !important;
    margin-top: 1rem !important;
  }
}

@media (min-width: 681px) and (max-width: 980px) {
  .home-photo-hero {
    padding-bottom: 0 !important;
  }

  .home-photo-hero__copy {
    align-items: flex-start !important;
    justify-content: flex-end !important;
    text-align: left !important;
  }

  .home-photo-hero__copy::before,
  .home-photo-hero__copy::after,
  .photo-shuffle-hero::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  .home-photo-hero h1 {
    color: #fffaf1 !important;
    -webkit-text-stroke: 1px rgba(8,47,103,.96) !important;
    paint-order: stroke fill !important;
    text-shadow: 0 1px 2px rgba(3,24,58,.16) !important;
  }
}

/* =========================================================
   DESKTOP — FULL-WIDTH FRAMED TABLETOP HERO
   The Polaroid spans essentially the entire central ivory field between the
   floral rails. It remains framed by the tabletop and is not browser-edge
   full bleed. Mobile/tablet are untouched.
   ========================================================= */
@media (min-width: 981px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: clamp(1.8rem, 2.8vh, 2.5rem) clamp(10px, 1vw, 18px) clamp(2.4rem, 3.5vh, 3rem) !important;
    box-sizing: border-box !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__grid {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: clamp(1.4rem, 2.3vh, 2rem) 0 !important;
    min-height: 0 !important;
  }

  /* Keep the message on ivory above the photograph rather than laying any
     wash, card, or translucent panel over the image. */
  body:has(.home-photo-hero) .home-photo-hero__copy {
    position: relative !important;
    z-index: 8 !important;
    grid-column: 1 / 13 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: 100% !important;
    max-width: none !important;
    padding: .6rem clamp(2rem, 4vw, 5rem) .35rem !important;
    transform: none !important;
    text-align: left !important;
    pointer-events: auto !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy::before,
  body:has(.home-photo-hero) .home-photo-hero__copy::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  body:has(.home-photo-hero) .home-photo-hero h1 {
    max-width: 7.1em !important;
    margin: 0 !important;
    color: #082f67 !important;
    font-size: clamp(4rem, 5vw, 6rem) !important;
    line-height: .91 !important;
    letter-spacing: -.041em !important;
    -webkit-text-stroke: 0 !important;
    paint-order: normal !important;
    text-shadow: none !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__actions {
    justify-content: flex-start !important;
    margin-top: clamp(1.45rem, 1.8vw, 2rem) !important;
    pointer-events: auto !important;
  }

  /* The photo object now owns the full width of the central tabletop field. */
  body:has(.home-photo-hero) .photo-shuffle-hero {
    position: relative !important;
    z-index: 3 !important;
    grid-column: 1 / 13 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(500px, 40vw, 620px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero__stack {
    position: absolute !important;
    inset: 0 !important;
  }

  /* Full-width Polaroid with only a narrow ivory margin from the rails. */
  body:has(.home-photo-hero) .shuffle-photo {
    top: 50% !important;
    left: 50% !important;
    width: calc(100% - clamp(12px, 1.2vw, 22px)) !important;
    max-width: none !important;
    height: clamp(470px, 37vw, 580px) !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border: 7px solid #fffdf7 !important;
    border-radius: 9px !important;
    background: #fffdf7 !important;
    box-shadow:
      0 22px 48px rgba(15,45,83,.15),
      0 3px 0 rgba(23,75,143,.06) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__image {
    position: absolute !important;
    inset: 0 0 48px 0 !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* Caption belongs to the physical white Polaroid footer, never the image. */
  body:has(.home-photo-hero) .shuffle-photo__hint {
    position: absolute !important;
    z-index: 5 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    background: #fffdf7 !important;
    color: #174b8f !important;
    padding: 0 1rem !important;
    font-size: .58rem !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: none !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
  }

  /* Calm stack: one lead image, two quiet backing prints. */
  body:has(.home-photo-hero) .shuffle-photo[data-position="0"] {
    --photo-rotation: -.18deg !important;
    --photo-x: 0px !important;
    --photo-y: -2px !important;
    z-index: 7 !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="1"] {
    --photo-rotation: .7deg !important;
    --photo-x: 10px !important;
    --photo-y: 11px !important;
    z-index: 5 !important;
    opacity: .22 !important;
    filter: saturate(.9) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="2"] {
    --photo-rotation: -.65deg !important;
    --photo-x: -9px !important;
    --photo-y: 15px !important;
    z-index: 4 !important;
    opacity: .11 !important;
    filter: saturate(.84) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="3"],
  body:has(.home-photo-hero) .shuffle-photo[data-position="4"],
  body:has(.home-photo-hero) .shuffle-photo[data-position="5"] {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Compact desktop/laptop keeps the same full-width photo treatment with
   reduced vertical scale. This begins above the approved 980px boundary. */
@media (min-width: 981px) and (max-width: 1180px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: 100% !important;
    max-width: none !important;
    padding: 1.55rem 8px 2rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    grid-column: 1 / 13 !important;
    max-width: none !important;
    padding: .5rem 1.5rem .25rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero h1 {
    font-size: clamp(3.5rem, 5.5vw, 4.35rem) !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 1 / 13 !important;
    max-width: none !important;
    height: 455px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    height: 425px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__image {
    inset: 0 0 44px 0 !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__hint {
    height: 44px !important;
    font-size: .54rem !important;
  }
}

/* Wide desktop has no artificial max width. The photograph continues to use
   the available tabletop field rather than stopping at 1160/1280px. */
@media (min-width: 1500px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: 100% !important;
    max-width: none !important;
    padding-inline: clamp(12px, 1vw, 20px) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    max-width: none !important;
    padding-left: clamp(3.5rem, 4.5vw, 5.8rem) !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 1 / 13 !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(540px, 36vw, 650px) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    width: calc(100% - 20px) !important;
    max-width: none !important;
    height: clamp(500px, 33vw, 610px) !important;
  }
}


/* Source: /styles/home-inner-frame.css */
/* Homepage framing refinement.
   The decorative Chinoiserie/Talavera rails belong only to the inner
   content field. Header, photo hero, and footer remain visually open. */

body:has(.home-photo-hero) {
  padding-inline: 0 !important;
}

body:has(.home-photo-hero) > .mat-edge-frame {
  display: none !important;
}

body:has(.home-photo-hero) .site-header.mat-header,
body:has(.home-photo-hero) .site-header.mat-header[data-scrolled] {
  right: 0 !important;
  left: 0 !important;
}

body:has(.home-photo-hero) > .tabletop-shell {
  width: 100% !important;
}

.home-framed-content {
  --home-inner-rail: var(--site-side-frame);
  position: relative;
  isolation: isolate;
  width: 100%;
  padding-inline: var(--home-inner-rail);
  box-sizing: border-box;
  background: var(--site-paper);
}

.home-framed-content::before,
.home-framed-content::after {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: var(--home-inner-rail);
  box-sizing: border-box;
  content: '';
  pointer-events: none;
  background-color: var(--mat-porcelain-ivory);
  background-image: var(--mat-frame-art);
  background-repeat: repeat;
  background-position: center;
  background-size: var(--mat-frame-art-size);
}

.home-framed-content::before {
  left: 0;
  border-right: var(--mat-rule-width) solid var(--mat-porcelain-blue);
}

/* The artwork is mirrored on the right. Define the rule on the outer edge
   before mirroring so it lands on the INNER edge after scaleX(-1). */
.home-framed-content::after {
  right: 0;
  border-right: var(--mat-rule-width) solid var(--mat-porcelain-blue);
  border-left: 0;
  transform: scaleX(-1);
  transform-origin: center;
}

.home-framed-content > * {
  position: relative;
  z-index: 5;
}

/* Give the centered About label a little more breathing room from the top
   edge of the framed content without reopening the larger gap below it. */
.home-framed-content > .home-about-brief {
  padding-top: clamp(2.5rem, 4vw, 3.5rem) !important;
  padding-bottom: clamp(.8rem, 1.5vw, 1.4rem) !important;
  border-bottom: 0 !important;
}

/* Custom Mahjong artwork supplied for the brand. Keep each divider compact
   and give every section transition the same visual breathing room. */
.home-mahjong-divider {
  position: relative;
  z-index: 5;
  width: min(260px, 31vw);
  margin: clamp(2.9rem, 5vw, 4.6rem) auto;
  line-height: 0;
  pointer-events: none;
}

.home-mahjong-divider img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Pull the first divider closer to the centered story CTA so the About
   section does not end with an oversized empty band. */
.home-framed-content > .home-about-brief + .home-mahjong-divider {
  margin-top: clamp(1.35rem, 2.5vw, 2.2rem);
  margin-bottom: clamp(2.9rem, 5vw, 4.6rem);
}

.home-framed-content > .home-mahjong-divider + .home-tile-flow {
  padding-top: 0 !important;
}

.home-tile-flow > .home-piece,
.home-tile-flow > .home-mahjong-divider {
  position: relative;
  z-index: 5;
}

.home-tile-flow > .home-piece + .home-mahjong-divider {
  margin-top: clamp(2.9rem, 5vw, 4.6rem);
  margin-bottom: clamp(2.9rem, 5vw, 4.6rem);
}

.home-tile-flow > .home-mahjong-divider + .home-piece {
  margin-top: 0 !important;
}

body:has(.home-photo-hero) .site-footer {
  position: relative;
  z-index: 6;
  width: 100% !important;
  margin-inline: 0 !important;
}

@media (max-width: 980px) {
  .home-framed-content > .home-about-brief {
    padding-top: 2.1rem !important;
    padding-bottom: 1rem !important;
  }

  .home-mahjong-divider {
    width: min(215px, 35vw);
    margin-block: 2.9rem;
  }

  .home-framed-content > .home-about-brief + .home-mahjong-divider {
    margin-top: 1.5rem;
    margin-bottom: 2.9rem;
  }

  .home-tile-flow > .home-piece + .home-mahjong-divider {
    margin-top: 2.9rem;
    margin-bottom: 2.9rem;
  }
}

@media (max-width: 680px) {
  .home-framed-content {
    --home-inner-rail: 18px;
  }

  .home-framed-content > .home-about-brief {
    padding-top: 1.6rem !important;
    padding-bottom: .8rem !important;
  }

  .home-mahjong-divider {
    width: min(165px, 39vw);
    margin-block: 2.5rem;
  }

  .home-framed-content > .home-about-brief + .home-mahjong-divider {
    margin-top: 1.15rem;
    margin-bottom: 2.5rem;
  }

  .home-tile-flow > .home-piece + .home-mahjong-divider {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
}


/* Source: /styles/mat-header.css */
/* =========================================================
   SMALL TOWN MAHJ — THE CREST IN THE MAT
   Global header + outer mat-edge system.
   Loaded after page-specific styles so the header remains one
   consistent physical object across the entire site.
   ========================================================= */

:root {
  --mat-edge: clamp(28px, 2.75vw, 44px);
  --mat-header-block: 116px;
  --mat-crest-size: clamp(190px, 15.5vw, 228px);
  --mat-ivory: #fff9ee;
  --mat-cobalt: #062b67;
  --mat-cobalt-deep: #031d4d;
  --mat-blue: #174b8f;
  --mat-blue-soft: #78a3d0;
  --mat-green: #4e7b45;
  --mat-coral: #e96f61;
  --mat-gold: #e9a32d;
}

/* The browser edge is part of the physical mat, not wallpaper behind it. */
body {
  padding: var(--mat-edge);
  background: var(--mat-ivory);
}

body::before {
  position: fixed;
  z-index: 390;
  inset: 0;
  border: var(--mat-edge) solid transparent;
  border-image-source: url('/decor/mat-floral-frame.svg');
  border-image-slice: 58;
  border-image-repeat: round;
  content: '';
  pointer-events: none;
}

body::after {
  position: fixed;
  z-index: 389;
  inset: calc(var(--mat-edge) - 5px);
  border: 4px solid #153c75;
  border-radius: 2px;
  box-shadow:
    0 0 0 2px rgba(255,249,238,.92),
    inset 0 0 0 1px rgba(120,163,208,.72),
    0 4px 14px rgba(0,17,53,.18);
  content: '';
  pointer-events: none;
}

.tabletop-shell {
  border: 0;
  background-color: var(--mat-cobalt);
  box-shadow:
    0 12px 36px rgba(2,25,64,.25),
    inset 0 0 74px rgba(0,13,45,.34);
}

/* The old dotted/geometric inner frame competed with the floral edge. */
.tabletop-shell::before {
  z-index: 80;
  inset: 9px;
  border: 1px solid rgba(255,250,240,.14);
  background: none;
  opacity: .72;
}

/* ---------------------------------------------------------
   Header as the top edge of the mat
   --------------------------------------------------------- */
.site-header.mat-header {
  position: sticky;
  z-index: 430;
  top: var(--mat-edge);
  height: var(--mat-header-block);
  overflow: visible;
  border: 0;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
  isolation: isolate;
}

.site-header.mat-header::before {
  position: absolute;
  z-index: 0;
  top: calc(var(--mat-edge) * -1);
  right: 0;
  left: 0;
  height: 166px;
  background-image: url('/decor/mat-header-band.svg');
  background-position: center top;
  background-repeat: repeat-x;
  background-size: auto 166px;
  content: '';
  filter: drop-shadow(0 9px 8px rgba(0,15,47,.17));
  pointer-events: none;
  transition: height 240ms ease, opacity 240ms ease, transform 240ms ease;
}

.site-header.mat-header::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -24px;
  left: 0;
  height: 42px;
  background: linear-gradient(180deg, rgba(2,22,59,.15), transparent 78%);
  content: '';
  opacity: .38;
  pointer-events: none;
}

.site-header.mat-header .site-header__inner {
  position: relative;
  z-index: 4;
  display: block;
  min-height: var(--mat-header-block);
  width: min(1240px, calc(100vw - (var(--mat-edge) * 2) - 28px));
}

/* The logo itself is the crest. No card, box, circle or extra badge. */
.mat-crest {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 50%;
  width: var(--mat-crest-size);
  aspect-ratio: 1;
  transform: translateX(-50%);
  transform-origin: 50% 22%;
  transition: width 260ms cubic-bezier(.2,.7,.25,1), top 260ms ease, filter 260ms ease;
}

.mat-crest img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 9px 7px rgba(1,23,62,.18)) drop-shadow(0 2px 1px rgba(255,255,255,.34));
}

.mat-crest:hover img {
  filter: drop-shadow(0 11px 9px rgba(1,23,62,.22)) drop-shadow(0 2px 1px rgba(255,255,255,.4));
}

/* Navigation becomes quiet typography balanced around the crest. */
.site-header.mat-header .site-nav {
  position: absolute;
  z-index: 7;
  top: 42px;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(210px, 18vw, 270px) minmax(0,1fr);
  align-items: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.site-header.mat-header .rack-rail {
  display: none;
}

.site-header.mat-header .site-nav__group {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: clamp(1.15rem, 2.1vw, 2.45rem);
}

.site-header.mat-header .site-nav__group--left {
  grid-column: 1;
  justify-self: end;
  padding-right: clamp(1.2rem, 2vw, 2.4rem);
}

.site-header.mat-header .site-nav__group--right {
  grid-column: 3;
  justify-self: start;
  padding-left: clamp(1.2rem, 2vw, 2.4rem);
}

.site-header.mat-header .site-nav li {
  display: block;
}

.site-header.mat-header .site-nav .rack-tile {
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #113b72;
  font-family: var(--sans);
  font-size: clamp(.66rem, .72vw, .76rem);
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  padding: .5rem 0;
  text-decoration: none;
  text-shadow: 0 1px rgba(255,255,255,.5);
  text-transform: uppercase;
  transform: none;
  transition: color 180ms ease, transform 180ms ease;
}

.site-header.mat-header .site-nav .rack-tile::before {
  position: absolute;
  right: 8%;
  bottom: 0;
  left: 8%;
  display: block;
  height: 2px;
  border-radius: 999px;
  background: var(--mat-coral);
  content: '';
  opacity: 0;
  transform: scaleX(.35) rotate(-1deg);
  transition: opacity 160ms ease, transform 180ms ease;
}

.site-header.mat-header .site-nav .rack-tile::after {
  display: none;
}

.site-header.mat-header .site-nav .rack-tile:hover,
.site-header.mat-header .site-nav .rack-tile[aria-current='page'] {
  color: var(--mat-cobalt-deep);
  box-shadow: none;
  transform: translateY(-1px);
}

.site-header.mat-header .site-nav .rack-tile:hover::before,
.site-header.mat-header .site-nav .rack-tile[aria-current='page']::before {
  opacity: 1;
  transform: scaleX(1) rotate(-1deg);
}

/* Mobile trigger is a restrained little porcelain control, not another rack. */
.site-header.mat-header .nav-toggle {
  position: absolute;
  z-index: 16;
  top: 22px;
  right: 2px;
  display: none;
  min-width: 54px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--mat-cobalt-deep);
  gap: .45rem;
  cursor: pointer;
}

.site-header.mat-header .nav-toggle__face {
  display: grid;
  width: 34px;
  height: 38px;
  place-content: center;
  grid-template-columns: 16px;
  gap: 4px;
  border: 1px solid rgba(23,75,143,.5);
  border-radius: 5px 5px 6px 4px;
  background: linear-gradient(180deg,#fffdf7,#efe5d5);
  box-shadow: 0 3px 0 #c9baa3,0 6px 10px rgba(3,28,65,.18);
}

.site-header.mat-header .nav-toggle__face i {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--mat-blue);
}

.site-header.mat-header .nav-toggle__face i:nth-child(4) {
  display: none;
}

.site-header.mat-header .nav-toggle__label {
  color: #113b72;
  font-size: .61rem;
  letter-spacing: .11em;
}

/* A compressed sticky state keeps the crest recognizable without becoming
   a permanent billboard over the content. */
.site-header.mat-header[data-scrolled]::before {
  height: 126px;
  opacity: .985;
  transform: translateY(-8px);
}

.site-header.mat-header[data-scrolled] .mat-crest {
  top: -4px;
  width: clamp(142px, 11vw, 164px);
}

.site-header.mat-header[data-scrolled] .site-nav {
  top: 28px;
}

/* The crest is now the brand anchor; avoid repeating the same full logo
   immediately inside the homepage hero tile. */
.tabletop-hero .hero-maker-mark {
  display: none;
}

.tabletop-hero .hero-tile {
  grid-template-columns: 1fr;
  width: min(790px, 78vw);
}

.tabletop-hero .hero-tile__copy {
  max-width: 650px;
}

/* Make room for the hanging lower half of the crest. */
.tabletop-hero {
  padding-top: clamp(6rem, 8vw, 8.5rem);
}

.page-hero {
  padding-top: clamp(7rem, 10vw, 9.5rem);
}

/* ---------------------------------------------------------
   Tablet / mobile
   --------------------------------------------------------- */
@media (max-width: 980px) {
  :root {
    --mat-edge: 20px;
    --mat-header-block: 94px;
    --mat-crest-size: 156px;
  }

  body {
    padding: var(--mat-edge);
  }

  body::after {
    inset: calc(var(--mat-edge) - 4px);
    border-width: 3px;
  }

  .site-header.mat-header {
    top: var(--mat-edge);
    height: var(--mat-header-block);
  }

  .site-header.mat-header::before {
    top: calc(var(--mat-edge) * -1);
    height: 124px;
    background-size: auto 124px;
  }

  .site-header.mat-header::after {
    bottom: -28px;
  }

  .site-header.mat-header .site-header__inner {
    min-height: var(--mat-header-block);
    width: min(100% - 16px, 900px);
  }

  .mat-crest {
    top: -4px;
    width: var(--mat-crest-size);
  }

  .site-header.mat-header .nav-toggle {
    display: inline-flex;
  }

  .site-header.mat-header .site-nav {
    position: absolute;
    z-index: 14;
    top: 132px;
    right: 8px;
    left: 8px;
    display: none;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 2px solid #174b8f;
    border-radius: 11px 8px 14px 9px;
    background:
      radial-gradient(circle at 88% 82%,rgba(120,163,208,.16),transparent 13rem),
      #fff9ee;
    box-shadow:
      0 7px 0 #cbbca7,
      0 20px 34px rgba(0,14,44,.34),
      inset 0 0 0 4px rgba(120,163,208,.08);
    padding: .8rem 1.2rem 1rem;
  }

  .site-header.mat-header[data-open] .site-nav {
    display: grid;
  }

  .site-header.mat-header .site-nav::after {
    position: absolute;
    right: -2.5rem;
    bottom: -3rem;
    width: 11rem;
    height: 8rem;
    background: url('/decor/porcelain-sprig.svg') center/contain no-repeat;
    content: '';
    opacity: .1;
    pointer-events: none;
    transform: rotate(-10deg);
  }

  .site-header.mat-header .site-nav__group,
  .site-header.mat-header .site-nav__group--left,
  .site-header.mat-header .site-nav__group--right {
    grid-column: 1;
    display: grid;
    width: 100%;
    justify-self: stretch;
    gap: 0;
    padding: 0;
  }

  .site-header.mat-header .site-nav .rack-tile {
    display: flex;
    width: 100%;
    min-height: 48px;
    border-bottom: 1px solid rgba(23,75,143,.15);
    color: #103a70;
    font-size: .78rem;
    padding: .9rem .25rem;
  }

  .site-header.mat-header .site-nav__group--right li:last-child .rack-tile {
    border-bottom: 0;
  }

  .site-header.mat-header .site-nav .rack-tile::before {
    right: auto;
    bottom: 11px;
    left: .25rem;
    width: 22px;
  }

  .site-header.mat-header[data-scrolled]::before {
    height: 105px;
    transform: translateY(-5px);
  }

  .site-header.mat-header[data-scrolled] .mat-crest {
    top: -5px;
    width: 132px;
  }

  .site-header.mat-header[data-scrolled] .site-nav {
    top: 116px;
  }

  .tabletop-hero {
    padding-top: 5.5rem;
  }

  .page-hero {
    padding-top: 6rem;
  }
}

@media (max-width: 680px) {
  :root {
    --mat-edge: 17px;
    --mat-header-block: 88px;
    --mat-crest-size: 148px;
  }

  body::before {
    border-width: var(--mat-edge);
    border-image-slice: 58;
  }

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

  .site-header.mat-header::before {
    height: 116px;
    background-size: auto 116px;
  }

  .site-header.mat-header .site-header__inner {
    width: calc(100vw - (var(--mat-edge) * 2) - 12px);
  }

  .site-header.mat-header .nav-toggle {
    top: 18px;
    right: 0;
    gap: .25rem;
  }

  .site-header.mat-header .nav-toggle__label {
    display: none;
  }

  .site-header.mat-header .site-nav {
    top: 124px;
    right: 2px;
    left: 2px;
  }

  .site-header.mat-header[data-scrolled] .site-nav {
    top: 108px;
  }

  .tabletop-hero {
    padding-top: 5.2rem;
  }

  .tabletop-hero .hero-tile {
    width: calc(100% - 4px);
  }

  .page-hero {
    padding-top: 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.mat-header::before,
  .mat-crest,
  .site-header.mat-header .site-nav,
  .site-header.mat-header .rack-tile {
    transition: none !important;
  }
}


/* Source: /styles/mat-header-polish.css */
/* Final QA overrides for the mat-edge + hanging crest system. */

:root {
  --shell: min(1180px, calc(100vw - var(--mat-edge) - var(--mat-edge) - 36px));
}

.site-header.mat-header::before {
  top: calc(0px - var(--mat-edge));
}

/* Keep the logo's hanging half visually clear of the first hero object. */
.site-header.mat-header + main {
  position: relative;
}

@media (max-width: 980px) {
  .site-header.mat-header::before {
    top: calc(0px - var(--mat-edge));
  }

  .site-header.mat-header .site-nav {
    top: 154px;
  }

  .site-header.mat-header[data-scrolled] .site-nav {
    top: 130px;
  }
}

@media (max-width: 680px) {
  :root {
    --mat-edge: 19px;
    --shell: calc(100vw - var(--mat-edge) - var(--mat-edge) - 22px);
  }

  .site-header.mat-header .site-nav {
    top: 148px;
  }

  .site-header.mat-header[data-scrolled] .site-nav {
    top: 122px;
  }

  .tabletop-hero {
    padding-top: 5.8rem;
  }

  .page-hero {
    padding-top: 6rem;
  }
}


/* Source: /styles/mat-field.css */
/* =========================================================
   SMALL TOWN MAHJ — MAT FIELD
   The cobalt center should read immediately as a designed Mahjong mat,
   not as a flat blue website background.
   ========================================================= */

.tabletop-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.07), transparent 28rem),
    radial-gradient(circle at 50% 84%, rgba(83,130,183,.09), transparent 34rem),
    linear-gradient(180deg, #0b377a 0%, #062b67 32%, #05265c 70%, #042352 100%);
  box-shadow:
    0 12px 36px rgba(2,25,64,.25),
    inset 0 0 82px rgba(0,13,45,.34);
}

/* Upholstered / piped inner seam. */
.tabletop-shell::before {
  z-index: 0;
  inset: 10px;
  border: 1px solid rgba(236,244,251,.16);
  border-radius: 2px;
  background: none;
  box-shadow:
    inset 0 0 0 1px rgba(0,8,28,.09),
    inset 0 0 30px rgba(255,255,255,.022);
  opacity: 1;
  pointer-events: none;
}

/* The center field pattern is intentionally visible now: still tonal, but
   strong enough to read as part of the mat in a normal phone screenshot. */
.tabletop-shell::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.045), transparent 21rem),
    radial-gradient(circle at 50% 70%, rgba(123,165,207,.04), transparent 24rem),
    url('/decor/mat-field-pattern.svg') center top / 640px 640px repeat,
    repeating-linear-gradient(88deg, rgba(255,255,255,.014) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(2deg, rgba(0,8,28,.016) 0 1px, transparent 1px 10px);
  content: '';
  opacity: .42;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Visible floral vines run down the left and right edges of the cobalt field,
   echoing the real floral-trim Mahjong mat reference. */
.mat-side-ornament {
  position: absolute !important;
  z-index: 0 !important;
  top: 128px;
  bottom: 100px;
  width: clamp(46px, 5vw, 72px);
  background-image: url('/decor/mat-side-vine.svg');
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
  opacity: .48;
  pointer-events: none;
  filter: saturate(.92) drop-shadow(0 0 10px rgba(116,160,204,.08));
}

.mat-side-ornament--left {
  left: 8px;
}

.mat-side-ornament--right {
  right: 8px;
  transform: scaleX(-1);
}

/* Ensure interface objects sit above the mat artwork. */
.tabletop-shell > * {
  position: relative;
  z-index: 1;
}

.tabletop-shell > .mat-side-ornament {
  position: absolute;
  z-index: 0;
}

/* Transparent landing chapters let the field and vines remain visible. */
.landing-moments,
.landing-about,
.landing-invite {
  background-color: transparent;
}

/* The hero previously covered almost the entire blue field on phones. Leave
   a deliberate strip of mat visible so the visitor can actually read the
   tabletop concept before scrolling. */
@media (max-width: 680px) {
  .tabletop-hero .hero-tile {
    width: calc(100% - 34px);
  }
}

@media (max-width: 980px) {
  .tabletop-shell::before {
    inset: 8px;
  }

  .tabletop-shell::after {
    background:
      radial-gradient(circle at 50% 28%, rgba(255,255,255,.04), transparent 17rem),
      url('/decor/mat-field-pattern.svg') center top / 520px 520px repeat,
      repeating-linear-gradient(88deg, rgba(255,255,255,.012) 0 1px, transparent 1px 7px),
      repeating-linear-gradient(2deg, rgba(0,8,28,.014) 0 1px, transparent 1px 9px);
    opacity: .38;
  }

  .mat-side-ornament {
    top: 110px;
    bottom: 80px;
    width: 52px;
    opacity: .45;
  }

  .mat-side-ornament--left { left: 3px; }
  .mat-side-ornament--right { right: 3px; }
}

@media (max-width: 680px) {
  .tabletop-shell::before {
    inset: 6px;
  }

  .tabletop-shell::after {
    background:
      radial-gradient(circle at 50% 24%, rgba(255,255,255,.036), transparent 12rem),
      url('/decor/mat-field-pattern.svg') center top / 390px 390px repeat,
      repeating-linear-gradient(88deg, rgba(255,255,255,.01) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(2deg, rgba(0,8,28,.012) 0 1px, transparent 1px 8px);
    opacity: .36;
  }

  .mat-side-ornament {
    top: 96px;
    bottom: 60px;
    width: 42px;
    opacity: .42;
  }

  .mat-side-ornament--left { left: -4px; }
  .mat-side-ornament--right { right: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .tabletop-shell::after {
    mix-blend-mode: normal;
    opacity: .28;
  }
}


/* Source: /styles/mat-reference-pass.css */
/* =========================================================
   SMALL TOWN MAHJ — MAT RESTRAINT PASS
   One floral textile edge. One cobalt piping line. Solid cobalt field.
   Loaded last so this is the final visual authority for the mat/header.
   ========================================================= */

:root {
  --mat-edge-side: clamp(42px, 4.8vw, 64px);
  --mat-edge-top: clamp(54px, 5.6vw, 70px);
  --mat-edge-bottom: var(--mat-edge-side);
  --mat-edge: var(--mat-edge-side);
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  position: relative;
  margin: 0;
  padding: var(--mat-edge-top) var(--mat-edge-side) var(--mat-edge-bottom);
  background: #fff9ee;
}

body::before,
body::after {
  display: none !important;
}

/* ---------------------------------------------------------
   ONE OUTER FLORAL EDGE
   --------------------------------------------------------- */
.mat-edge-frame {
  position: fixed;
  z-index: 390;
  inset: 0;
  pointer-events: none;
}

.mat-edge {
  position: absolute;
  display: block;
  background-color: #fff9ee;
  filter: drop-shadow(0 2px 5px rgba(5,30,68,.1));
}

.mat-edge--top,
.mat-edge--bottom {
  right: 0;
  left: 0;
  background-image: url('/decor/mat-edge-horizontal.svg');
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
}

.mat-edge--top {
  top: 0;
  height: calc(var(--mat-edge-top) + 4px);
}

.mat-edge--bottom {
  bottom: 0;
  height: calc(var(--mat-edge-bottom) + 4px);
  transform: scaleY(-1);
  transform-origin: center;
}

.mat-edge--left,
.mat-edge--right {
  top: 0;
  bottom: 0;
  width: calc(var(--mat-edge-side) + 4px);
  background-image: url('/decor/mat-edge-vertical.svg');
  background-repeat: repeat-y;
  background-position: right center;
  background-size: 100% auto;
}

.mat-edge--left { left: 0; }
.mat-edge--right {
  right: 0;
  transform: scaleX(-1);
  transform-origin: center;
}

/* ---------------------------------------------------------
   SOLID COBALT PLAYING FIELD
   --------------------------------------------------------- */
.tabletop-shell {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 0 !important;
  background: #083477 !important;
  background-image: none !important;
  box-shadow:
    0 10px 28px rgba(0,18,51,.18),
    inset 0 0 52px rgba(0,12,42,.14) !important;
}

.tabletop-shell::after {
  display: none !important;
}

.tabletop-shell::before {
  z-index: 0 !important;
  inset: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02) !important;
  opacity: 1 !important;
}

.mat-side-ornament { display: none !important; }

.tabletop-shell > *,
.tabletop-shell main,
.tabletop-shell section,
.tabletop-shell footer,
.tabletop-shell header {
  min-width: 0;
  max-width: 100%;
}

.tabletop-shell main {
  overflow-x: clip;
}

/* ---------------------------------------------------------
   HEADER — no second ornamental band
   --------------------------------------------------------- */
.site-header.mat-header {
  top: var(--mat-edge-top);
  height: 88px;
  overflow: visible;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-header.mat-header::before,
.site-header.mat-header::after {
  display: none !important;
  background: none !important;
  content: none !important;
}

.site-header.mat-header .site-header__inner {
  min-height: 88px;
}

/* The crest crosses the one floral edge / cobalt boundary. */
.mat-crest,
.site-header.mat-header[data-scrolled] .mat-crest {
  top: -50px;
  width: 148px;
  filter: none;
}

.mat-crest img {
  filter: drop-shadow(0 7px 6px rgba(1,23,62,.17)) drop-shadow(0 1px 1px rgba(255,255,255,.28));
}

/* Desktop navigation sits quietly in the floral edge, not on a second bar. */
.site-header.mat-header .site-nav,
.site-header.mat-header[data-scrolled] .site-nav {
  top: -34px;
}

.site-header.mat-header .site-nav .rack-tile {
  color: #123b70;
  text-shadow: 0 1px rgba(255,255,255,.55);
}

/* ---------------------------------------------------------
   LANDING SCALE / OVERFLOW PROTECTION
   --------------------------------------------------------- */
body:has(.landing-invite) .landing-moments,
body:has(.landing-invite) .landing-about,
body:has(.landing-invite) .landing-invite {
  background: transparent !important;
}

body:has(.landing-invite) .tabletop-hero {
  padding-top: 4.1rem;
}

body:has(.landing-invite) .tabletop-hero .hero-tile {
  width: min(680px, 68vw);
}

body:has(.landing-invite) .landing-about__panel,
body:has(.landing-invite) .landing-about__panel[data-place],
body:has(.landing-invite) .landing-about__panel[data-place][data-visible='true'] {
  width: min(100%, 960px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  box-sizing: border-box;
  transform: none !important;
}

body:has(.landing-invite) .landing-about__copy,
body:has(.landing-invite) .landing-about__copy * {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Footer remains a quiet signature after the CTA. */
body:has(.landing-invite) .site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.25rem;
}

body:has(.landing-invite) .site-footer__brand {
  display: flex;
  align-items: center;
  gap: .75rem;
}

body:has(.landing-invite) .site-footer__brand img {
  width: 58px;
  height: 58px;
  margin: 0;
  border-width: 3px;
}

body:has(.landing-invite) .site-footer__brand p,
body:has(.landing-invite) .site-footer__invitation,
body:has(.landing-invite) .site-footer__bottom span:last-child {
  display: none;
}

body:has(.landing-invite) .site-footer__nav {
  justify-content: flex-end;
  gap: .55rem .9rem;
}

body:has(.landing-invite) .site-footer__bottom {
  justify-content: center;
  padding-block: .75rem .9rem;
  text-align: center;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */
@media (max-width: 980px) {
  :root {
    --mat-edge-side: 32px;
    --mat-edge-top: 48px;
    --mat-edge-bottom: 32px;
    --mat-edge: var(--mat-edge-side);
  }

  .site-header.mat-header {
    top: var(--mat-edge-top);
    height: 78px;
  }

  .site-header.mat-header .site-header__inner {
    min-height: 78px;
  }

  .mat-crest,
  .site-header.mat-header[data-scrolled] .mat-crest {
    top: -43px;
    width: 126px;
  }

  .site-header.mat-header .nav-toggle {
    top: -33px;
    right: 0;
  }

  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: 82px;
  }

  body:has(.landing-invite) .tabletop-hero {
    padding-top: 3.5rem;
  }

  body:has(.landing-invite) .tabletop-hero .hero-tile {
    width: min(610px, calc(100% - 30px));
  }
}

/* ---------------------------------------------------------
   MOBILE — 35–40% thinner side floral edge
   Previous side edge was ~38px; this is 24px.
   --------------------------------------------------------- */
@media (max-width: 680px) {
  :root {
    --mat-edge-side: 24px;
    --mat-edge-top: 42px;
    --mat-edge-bottom: 24px;
    --mat-edge: var(--mat-edge-side);
    --mat-header-block: 70px;
    --mat-crest-size: 132px;
    --shell: calc(100% - 18px);
  }

  body {
    padding: var(--mat-edge-top) var(--mat-edge-side) var(--mat-edge-bottom);
  }

  .mat-edge--top {
    height: 46px;
  }

  .mat-edge--bottom {
    height: 28px;
  }

  .mat-edge--left,
  .mat-edge--right {
    width: 28px;
  }

  .site-header.mat-header {
    top: var(--mat-edge-top);
    height: var(--mat-header-block);
  }

  .site-header.mat-header .site-header__inner,
  .tabletop-shell .shell {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }

  .site-header.mat-header .site-header__inner {
    min-height: var(--mat-header-block);
  }

  /* Logo is mounted into the floral edge instead of floating in the blue. */
  .mat-crest,
  .site-header.mat-header[data-scrolled] .mat-crest {
    top: -39px;
    width: var(--mat-crest-size);
  }

  /* Quiet three-line control placed inside the upper-right floral edge. */
  .site-header.mat-header .nav-toggle {
    top: -32px;
    right: 0;
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    border: 1px solid rgba(23,75,143,.34);
    border-radius: 8px;
    background: rgba(255,249,238,.94);
    box-shadow: 0 2px 6px rgba(3,28,65,.12);
    padding: 0;
  }

  .site-header.mat-header .nav-toggle__face {
    display: grid;
    width: 24px;
    height: auto;
    grid-template-columns: 1fr;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .site-header.mat-header .nav-toggle__face i {
    width: 24px;
    height: 2px;
    background: #174b8f;
  }

  .site-header.mat-header .nav-toggle__face i:nth-child(4) {
    display: none;
  }

  .site-header.mat-header .nav-toggle__label {
    display: none;
  }

  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: 78px;
    right: 0;
    left: 0;
    max-width: 100%;
  }

  .tabletop-shell main,
  .tabletop-shell section,
  .tabletop-shell article,
  .tabletop-shell figure,
  .tabletop-shell footer {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:has(.landing-invite) .tabletop-hero {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
  }

  body:has(.landing-invite) .tabletop-hero .hero-stage {
    width: calc(100% - 14px) !important;
    max-width: calc(100% - 14px) !important;
  }

  body:has(.landing-invite) .tabletop-hero .hero-tile {
    width: calc(100% - 32px) !important;
    max-width: 100%;
    padding: 2.35rem 1.2rem 1.9rem;
  }

  body:has(.landing-invite) .tabletop-hero .hero-tile h1 {
    font-size: clamp(3rem, 13.3vw, 4rem);
    line-height: .91;
  }

  body:has(.landing-invite) .hero-tile__intro {
    font-size: .96rem;
    line-height: 1.55;
  }

  body:has(.landing-invite) .landing-about__panel,
  body:has(.landing-invite) .landing-about__panel[data-place],
  body:has(.landing-invite) .landing-about__panel[data-place][data-visible='true'] {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: .6rem;
    overflow: hidden;
    padding: 2.05rem 1.05rem 1.7rem;
    transform: none !important;
  }

  body:has(.landing-invite) .landing-about__copy h2 {
    font-size: clamp(2.7rem, 11vw, 3.55rem);
  }

  body:has(.landing-invite) .landing-about__copy > p:not(.eyebrow) {
    font-size: .95rem;
    line-height: 1.55;
  }

  body:has(.landing-invite) .landing-about__mark {
    display: none;
  }

  body:has(.landing-invite) .site-footer__top {
    flex-direction: column;
    justify-content: center;
    gap: .85rem;
    padding-block: 1.05rem .75rem;
  }

  body:has(.landing-invite) .site-footer__brand {
    justify-content: center;
  }

  body:has(.landing-invite) .site-footer__brand img {
    width: 50px;
    height: 50px;
  }

  body:has(.landing-invite) .site-footer__nav {
    justify-content: center;
    gap: .4rem .75rem;
    font-size: .76rem;
    text-align: center;
  }
}

/* =========================================================
   CONTINUOUS FLORAL BINDING PASS
   Exact trim widths; dedicated corners; uninterrupted piping.
   Content and hero sizing intentionally remain untouched.
   ========================================================= */

:root {
  --mat-edge-side: 34px;
  --mat-edge-top: 44px;
  --mat-edge-bottom: 34px;
  --mat-edge: var(--mat-edge-side);
}

.mat-edge {
  z-index: 1;
  filter: drop-shadow(0 1px 3px rgba(5,30,68,.08));
}

.mat-edge--top,
.mat-edge--bottom {
  right: var(--mat-edge-side);
  left: var(--mat-edge-side);
}

.mat-edge--top {
  height: var(--mat-edge-top);
}

.mat-edge--bottom {
  height: var(--mat-edge-bottom);
}

.mat-edge--left,
.mat-edge--right {
  top: var(--mat-edge-top);
  bottom: var(--mat-edge-bottom);
  width: var(--mat-edge-side);
}

.mat-corner {
  position: absolute;
  z-index: 2;
  display: block;
  width: var(--mat-edge-side);
  background-color: #fff9ee;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: drop-shadow(0 1px 3px rgba(5,30,68,.08));
}

.mat-corner--top-left,
.mat-corner--top-right {
  top: 0;
  height: var(--mat-edge-top);
}

.mat-corner--bottom-left,
.mat-corner--bottom-right {
  bottom: 0;
  height: var(--mat-edge-bottom);
}

.mat-corner--top-left {
  left: 0;
  background-image: url('/decor/mat-corner-top-left.svg');
}

.mat-corner--top-right {
  right: 0;
  background-image: url('/decor/mat-corner-top-right.svg');
}

.mat-corner--bottom-right {
  right: 0;
  background-image: url('/decor/mat-corner-bottom-right.svg');
}

.mat-corner--bottom-left {
  left: 0;
  background-image: url('/decor/mat-corner-bottom-left.svg');
}

/* Keep the crest/nav at nearly the same viewport position as the thicker baseline. */
.mat-crest,
.site-header.mat-header[data-scrolled] .mat-crest {
  top: -34px;
}

.site-header.mat-header .site-nav,
.site-header.mat-header[data-scrolled] .site-nav {
  top: -24px;
}

@media (max-width: 980px) {
  :root {
    --mat-edge-side: 26px;
    --mat-edge-top: 36px;
    --mat-edge-bottom: 26px;
    --mat-edge: var(--mat-edge-side);
  }

  .mat-crest,
  .site-header.mat-header[data-scrolled] .mat-crest {
    top: -31px;
  }

  .site-header.mat-header .nav-toggle {
    top: -21px;
  }

  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: 94px;
  }
}

@media (max-width: 680px) {
  :root {
    --mat-edge-side: 20px;
    --mat-edge-top: 30px;
    --mat-edge-bottom: 20px;
    --mat-edge: var(--mat-edge-side);
    --mat-crest-size: 132px;
  }

  .mat-edge--top {
    height: var(--mat-edge-top);
  }

  .mat-edge--bottom {
    height: var(--mat-edge-bottom);
  }

  .mat-edge--left,
  .mat-edge--right {
    width: var(--mat-edge-side);
  }

  .mat-crest,
  .site-header.mat-header[data-scrolled] .mat-crest {
    top: -27px;
    width: var(--mat-crest-size);
  }

  .site-header.mat-header .nav-toggle {
    top: -20px;
  }

  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: 90px;
  }
}


/* Source: /styles/mat-header-final.css */
/* =========================================================
   SMALL TOWN MAHJ — FINAL FRAME / HEADER PLACEMENT
   Keeps the floral mat locked to the viewport and gives mobile
   a compact three-piece header: booking tile, crest, menu tile.
   Loaded after mat-reference-pass.css.
   ========================================================= */

/* Keep the decorative mat physically pinned to the browser viewport. */
.mat-edge-frame {
  position: fixed !important;
  z-index: 500 !important;
  inset: 0 !important;
  width: 100dvw;
  height: 100dvh;
  max-width: none !important;
  max-height: none !important;
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(0);
}

.mat-edge,
.mat-corner {
  position: fixed !important;
}

/* Straight runs stop at the dedicated corners. */
.mat-edge--top {
  top: 0 !important;
  right: var(--mat-edge-side) !important;
  left: var(--mat-edge-side) !important;
}

.mat-edge--bottom {
  right: var(--mat-edge-side) !important;
  bottom: 0 !important;
  left: var(--mat-edge-side) !important;
}

.mat-edge--left {
  top: var(--mat-edge-top) !important;
  bottom: var(--mat-edge-bottom) !important;
  left: 0 !important;
}

.mat-edge--right {
  top: var(--mat-edge-top) !important;
  right: 0 !important;
  bottom: var(--mat-edge-bottom) !important;
}

.mat-corner--top-left { top: 0 !important; left: 0 !important; }
.mat-corner--top-right { top: 0 !important; right: 0 !important; }
.mat-corner--bottom-right { right: 0 !important; bottom: 0 !important; }
.mat-corner--bottom-left { bottom: 0 !important; left: 0 !important; }

/* Booking action reads as a small physical ivory Mahjong tile. */
.header-book-tile {
  position: absolute;
  z-index: 18;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  min-height: 48px;
  border: 1px solid #4c6f9f;
  border-radius: 7px 7px 9px 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,252,244,.82) 52%, rgba(236,227,210,.96) 100%),
    #fff9ee;
  box-shadow:
    0 3px 0 #c9bca7,
    0 5px 0 rgba(7,39,84,.16),
    0 9px 15px rgba(3,28,65,.16),
    inset 0 0 0 2px rgba(255,255,255,.72),
    inset 0 0 0 3px rgba(23,75,143,.10);
  color: #123f78;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1;
  padding: 0 1rem;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  white-space: nowrap;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.header-book-tile::before {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(23,75,143,.24);
  border-radius: 4px 4px 6px 5px;
  content: '';
  pointer-events: none;
}

.header-book-tile::after {
  content: '◆';
  margin-left: .48rem;
  color: #174b8f;
  font-size: .48rem;
  opacity: .82;
}

.header-book-tile:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 0 #c9bca7,
    0 6px 0 rgba(7,39,84,.16),
    0 11px 17px rgba(3,28,65,.18),
    inset 0 0 0 2px rgba(255,255,255,.72),
    inset 0 0 0 3px rgba(23,75,143,.10);
}

.header-book-tile:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 #c9bca7,
    0 3px 7px rgba(3,28,65,.14),
    inset 0 0 0 2px rgba(255,255,255,.72),
    inset 0 0 0 3px rgba(23,75,143,.10);
}

.header-book-tile:focus-visible,
.site-header.mat-header .nav-toggle:focus-visible {
  outline: 3px solid rgba(233,163,45,.78);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .header-book-tile {
    display: inline-flex;
    top: 10px;
    left: 0;
  }

  /* Header controls stay fully in the cobalt header area. */
  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    top: 10px !important;
    right: 0 !important;
    display: inline-grid !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 46px !important;
    min-height: 46px !important;
    place-items: center;
    border: 1px solid rgba(23,75,143,.46) !important;
    border-radius: 8px 8px 10px 7px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,249,238,.08)),
      #fff9ee !important;
    box-shadow:
      0 3px 0 #cabaa3,
      0 7px 14px rgba(3,28,65,.16),
      inset 0 0 0 2px rgba(120,163,208,.08) !important;
    padding: 0 !important;
  }

  .site-header.mat-header .nav-toggle__face {
    width: 24px !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .site-header.mat-header .nav-toggle__face i {
    width: 24px !important;
    height: 2px !important;
    background: #174b8f !important;
  }

  .site-header.mat-header .nav-toggle__label {
    display: none !important;
  }

  /* The crest is intentionally mounted into the top floral binding. */
  .mat-crest,
  .site-header.mat-header[data-scrolled] .mat-crest {
    top: -28px !important;
  }
}

@media (max-width: 680px) {
  .site-header.mat-header {
    height: 78px !important;
  }

  .site-header.mat-header .site-header__inner {
    min-height: 78px !important;
  }

  .header-book-tile {
    top: 12px;
    left: 0;
    min-width: 84px;
    min-height: 44px;
    font-size: .62rem;
    letter-spacing: .105em;
    padding-inline: .7rem;
  }

  .header-book-tile::before {
    inset: 3px;
  }

  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    top: 12px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .mat-crest,
  .site-header.mat-header[data-scrolled] .mat-crest {
    top: -30px !important;
    width: 132px !important;
  }

  /* Keep the open menu below the complete header cluster. */
  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: 84px !important;
  }
}

/* =========================================================
   MAT FRAME STRUCTURE — ARTWORK-AGNOSTIC
   The physical mat frame is now independent from its future artwork.
   Drop the chosen repeatable border texture into --mat-frame-art.
   ========================================================= */
:root {
  --mat-frame-side: 38px;
  --mat-frame-top: 42px;
  --mat-frame-bottom: 38px;
  --mat-frame-surface: #fff9ee;
  --mat-frame-pipe: #153c75;
  --mat-frame-pipe-soft: #7ea6d5;
  --mat-frame-art: none;
  --mat-frame-art-size: 220px 220px;

  --mat-edge-side: var(--mat-frame-side);
  --mat-edge-top: var(--mat-frame-top);
  --mat-edge-bottom: var(--mat-frame-bottom);
}

body {
  padding: var(--mat-frame-top) var(--mat-frame-side) var(--mat-frame-bottom) !important;
}

.mat-edge,
.mat-corner {
  background-color: var(--mat-frame-surface) !important;
  background-image: var(--mat-frame-art) !important;
  background-repeat: repeat !important;
  background-size: var(--mat-frame-art-size) !important;
  filter: none !important;
}

.mat-edge--top,
.mat-edge--bottom {
  height: auto !important;
}

.mat-edge--top {
  height: var(--mat-frame-top) !important;
  box-shadow:
    inset 0 -2px 0 var(--mat-frame-pipe),
    inset 0 -4px 0 rgba(255,249,238,.92),
    0 3px 8px rgba(0,18,51,.10);
}

.mat-edge--bottom {
  height: var(--mat-frame-bottom) !important;
  transform: none !important;
  box-shadow:
    inset 0 2px 0 var(--mat-frame-pipe),
    inset 0 4px 0 rgba(255,249,238,.92),
    0 -3px 8px rgba(0,18,51,.08);
}

.mat-edge--left {
  width: var(--mat-frame-side) !important;
  box-shadow:
    inset -2px 0 0 var(--mat-frame-pipe),
    inset -4px 0 0 rgba(255,249,238,.92),
    3px 0 8px rgba(0,18,51,.08);
}

.mat-edge--right {
  width: var(--mat-frame-side) !important;
  transform: none !important;
  box-shadow:
    inset 2px 0 0 var(--mat-frame-pipe),
    inset 4px 0 0 rgba(255,249,238,.92),
    -3px 0 8px rgba(0,18,51,.08);
}

.mat-corner {
  width: var(--mat-frame-side) !important;
  box-shadow: none !important;
}

.mat-corner--top-left,
.mat-corner--top-right {
  height: var(--mat-frame-top) !important;
}

.mat-corner--bottom-left,
.mat-corner--bottom-right {
  height: var(--mat-frame-bottom) !important;
}

/* Rounded inner piping makes the frame read as one sewn mat binding. */
.mat-corner::after {
  position: absolute;
  width: 14px;
  height: 14px;
  content: '';
  pointer-events: none;
}

.mat-corner--top-left::after {
  right: 0;
  bottom: 0;
  border-right: 2px solid var(--mat-frame-pipe);
  border-bottom: 2px solid var(--mat-frame-pipe);
  border-bottom-right-radius: 14px;
}

.mat-corner--top-right::after {
  left: 0;
  bottom: 0;
  border-left: 2px solid var(--mat-frame-pipe);
  border-bottom: 2px solid var(--mat-frame-pipe);
  border-bottom-left-radius: 14px;
}

.mat-corner--bottom-left::after {
  right: 0;
  top: 0;
  border-right: 2px solid var(--mat-frame-pipe);
  border-top: 2px solid var(--mat-frame-pipe);
  border-top-right-radius: 14px;
}

.mat-corner--bottom-right::after {
  left: 0;
  top: 0;
  border-left: 2px solid var(--mat-frame-pipe);
  border-top: 2px solid var(--mat-frame-pipe);
  border-top-left-radius: 14px;
}

/* Quiet stitched seam just inside the frame, independent of the artwork. */
.mat-edge--top::after,
.mat-edge--bottom::after,
.mat-edge--left::after,
.mat-edge--right::after {
  position: absolute;
  content: '';
  pointer-events: none;
  opacity: .6;
}

.mat-edge--top::after,
.mat-edge--bottom::after {
  right: 8px;
  left: 8px;
  border-top: 1px dashed rgba(23,75,143,.32);
}

.mat-edge--top::after { bottom: 7px; }
.mat-edge--bottom::after { top: 7px; }

.mat-edge--left::after,
.mat-edge--right::after {
  top: 8px;
  bottom: 8px;
  border-left: 1px dashed rgba(23,75,143,.32);
}

.mat-edge--left::after { right: 7px; }
.mat-edge--right::after { left: 7px; }

@media (max-width: 980px) {
  :root {
    --mat-frame-side: 30px;
    --mat-frame-top: 34px;
    --mat-frame-bottom: 30px;
    --mat-frame-art-size: 180px 180px;
  }
}

@media (max-width: 680px) {
  :root {
    --mat-frame-side: 24px;
    --mat-frame-top: 28px;
    --mat-frame-bottom: 24px;
    --mat-frame-art-size: 150px 150px;
  }

  .mat-corner::after {
    width: 11px;
    height: 11px;
  }

  .mat-edge--top::after { bottom: 5px; }
  .mat-edge--bottom::after { top: 5px; }
  .mat-edge--left::after { right: 5px; }
  .mat-edge--right::after { left: 5px; }
}


/* Source: /styles/mat-porcelain-frame.css */
/* =========================================================
   SMALL TOWN MAHJ — FIXED MAHJONG MAT FRAME
   Artwork fills the binding. Two matching porcelain rails cross
   at every corner. The inner playing field begins exactly where
   the inside rail ends, with no extra gutter.
   ========================================================= */

:root {
  --mat-porcelain-blue: #174b8f;
  --mat-porcelain-ivory: #fff9ee;

  /* Slightly deeper binding gives the artwork breathing room. */
  --mat-frame-side: 30px;
  --mat-frame-top: 30px;
  --mat-frame-bottom: 30px;

  /* Matching 3px rails. Outer rail moves inward so more artwork is visible
     between the screen edge and the first porcelain line. */
  --mat-rule-width: 3px;
  --mat-rule-gap: 10px;
  --mat-rule-outer-offset: 11px;

  /* Artwork slot. The design covers the fixed frame, including the top and
     bottom safe-area portions of the page viewport. */
  --mat-frame-art: url('/decor/mat-frame-design.png');
  --mat-frame-art-size: 220px 220px;

  --mat-edge-side: var(--mat-frame-side);
  --mat-edge-top: var(--mat-frame-top);
  --mat-edge-bottom: var(--mat-frame-bottom);
}

html,
body {
  max-width: 100%;
  min-height: 100%;
  overflow-x: clip;
  background: var(--mat-porcelain-ivory) !important;
}

body {
  margin: 0 !important;
  padding:
    calc(var(--mat-frame-top) + env(safe-area-inset-top, 0px))
    var(--mat-frame-side)
    calc(var(--mat-frame-bottom) + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   FIXED FRAME SURFACE
   --------------------------------------------------------- */
.mat-edge-frame {
  position: fixed !important;
  z-index: 500 !important;
  inset: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: translateZ(0);
  background-color: transparent;
}

.mat-edge {
  position: fixed !important;
  z-index: 1 !important;
  display: block !important;
  background-color: var(--mat-porcelain-ivory) !important;
  background-image: var(--mat-frame-art) !important;
  background-repeat: repeat !important;
  background-position: center !important;
  background-size: var(--mat-frame-art-size) !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Top and bottom include safe-area depth so artwork visually reaches
   the very top and bottom of the page viewport on supported mobile browsers. */
.mat-edge--top {
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: calc(var(--mat-frame-top) + env(safe-area-inset-top, 0px)) !important;
}

.mat-edge--bottom {
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: calc(var(--mat-frame-bottom) + env(safe-area-inset-bottom, 0px)) !important;
}

.mat-edge--left {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--mat-frame-side) !important;
}

.mat-edge--right {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: var(--mat-frame-side) !important;
}

.mat-corner,
.mat-edge::before,
.mat-edge::after {
  display: none !important;
  content: none !important;
}

/* ---------------------------------------------------------
   CROSSING DOUBLE PORCELAIN RAILS
   Both rails use the same cobalt. Horizontal and vertical rails run
   edge-to-edge so they visibly cross at every corner.
   --------------------------------------------------------- */
.mat-edge-frame::before {
  position: fixed;
  z-index: 4;
  inset: 0;
  content: '';
  pointer-events: none;
  background:
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      0 calc(env(safe-area-inset-top, 0px) + var(--mat-rule-outer-offset)) / 100% var(--mat-rule-width) no-repeat,
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      0 calc(env(safe-area-inset-top, 0px) + var(--mat-frame-top) - var(--mat-rule-width)) / 100% var(--mat-rule-width) no-repeat,

    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      0 calc(100% - env(safe-area-inset-bottom, 0px) - var(--mat-frame-bottom)) / 100% var(--mat-rule-width) no-repeat,
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      0 calc(100% - env(safe-area-inset-bottom, 0px) - var(--mat-rule-outer-offset) - var(--mat-rule-width)) / 100% var(--mat-rule-width) no-repeat,

    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      var(--mat-rule-outer-offset) 0 / var(--mat-rule-width) 100% no-repeat,
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      calc(var(--mat-frame-side) - var(--mat-rule-width)) 0 / var(--mat-rule-width) 100% no-repeat,

    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      calc(100% - var(--mat-frame-side)) 0 / var(--mat-rule-width) 100% no-repeat,
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      calc(100% - var(--mat-rule-outer-offset) - var(--mat-rule-width)) 0 / var(--mat-rule-width) 100% no-repeat;
}

.mat-edge-frame::after {
  display: none !important;
  content: none !important;
}

/* ---------------------------------------------------------
   INNER PLAYING FIELD
   No extra gutter: cobalt begins exactly at the inside rail boundary.
   Important: do not create a clipping/stacking context here. The fixed crest
   must be able to rise out of the playing field and render above the frame.
   --------------------------------------------------------- */
.tabletop-shell {
  position: relative;
  isolation: auto !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #083477 !important;
  box-shadow: inset 0 0 46px rgba(0,12,42,.14) !important;
}

.tabletop-shell::before,
.tabletop-shell::after {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body > .tabletop-shell {
  min-height: calc(100dvh - var(--mat-frame-top) - var(--mat-frame-bottom) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------
   FIXED CONTROL RAIL
   On tablet/mobile, the logo + Book Now + hamburger stay locked directly
   beneath the fixed top mat binding while page content scrolls behind them.
   The crest intentionally rises above the rail and over the frame artwork.
   --------------------------------------------------------- */
@media (max-width: 980px) {
  :root {
    --mat-frame-side: 28px;
    --mat-frame-top: 28px;
    --mat-frame-bottom: 28px;
    --mat-rule-width: 3px;
    --mat-rule-gap: 9px;
    --mat-rule-outer-offset: 10px;
    --mat-frame-art-size: 180px 180px;
    --mat-control-height: 72px;
  }

  .site-header.mat-header,
  .site-header.mat-header[data-scrolled] {
    position: fixed !important;
    z-index: 700 !important;
    top: calc(var(--mat-frame-top) + env(safe-area-inset-top, 0px)) !important;
    right: var(--mat-frame-side) !important;
    left: var(--mat-frame-side) !important;
    width: auto !important;
    height: var(--mat-control-height) !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(126,166,213,.14) !important;
    background: rgba(8,52,119,.985) !important;
    box-shadow: 0 7px 16px rgba(0,18,51,.10) !important;
    backdrop-filter: none !important;
  }

  .tabletop-shell > main {
    padding-top: var(--mat-control-height) !important;
  }

  .site-header.mat-header::before,
  .site-header.mat-header::after,
  .site-header.mat-header[data-scrolled]::before,
  .site-header.mat-header[data-scrolled]::after {
    display: none !important;
    content: none !important;
  }

  .site-header.mat-header .site-header__inner {
    position: relative;
    z-index: 701 !important;
    min-height: var(--mat-control-height) !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  .mat-crest,
  .site-header.mat-header[data-scrolled] .mat-crest {
    position: absolute !important;
    top: -22px !important;
    width: 132px !important;
    z-index: 750 !important;
    overflow: visible !important;
  }

  .mat-crest img {
    position: relative !important;
    z-index: 751 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .header-book-tile {
    top: 14px !important;
    left: 0 !important;
  }

  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    top: 14px !important;
    right: 0 !important;
  }

  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: 78px !important;
  }
}

@media (max-width: 680px) {
  :root {
    --mat-frame-side: 26px;
    --mat-frame-top: 26px;
    --mat-frame-bottom: 26px;
    --mat-rule-width: 3px;
    --mat-rule-gap: 8px;
    --mat-rule-outer-offset: 10px;
    --mat-frame-art-size: 150px 150px;
    --mat-control-height: 68px;
  }

  .site-header.mat-header,
  .site-header.mat-header[data-scrolled] {
    height: var(--mat-control-height) !important;
  }

  .site-header.mat-header .site-header__inner {
    min-height: var(--mat-control-height) !important;
    width: calc(100% - 16px) !important;
  }

  .mat-crest,
  .site-header.mat-header[data-scrolled] .mat-crest {
    top: -24px !important;
    width: 132px !important;
  }

  .header-book-tile {
    top: 13px !important;
    min-height: 40px !important;
  }

  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    top: 13px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: 74px !important;
  }
}


/* Source: /styles/mat-top-assembly.css */
/* =========================================================
   SMALL TOWN MAHJ — FIXED VIEWPORT MAT + FIXED HEADER CONTROLS
   Mobile/tablet only. The complete decorative mat frame is owned by the
   fixed frame layer. The header controls float above it. Only the cobalt
   playing-field content scrolls inside the inner rectangle.
   ========================================================= */

@media (max-width: 980px) {
  :root {
    --mat-top-safe: env(safe-area-inset-top, 0px);
    --mat-bottom-safe: env(safe-area-inset-bottom, 0px);
    --mat-top-binding-height: calc(var(--mat-top-safe) + var(--mat-frame-top));
    --mat-top-assembly-height: calc(var(--mat-top-binding-height) + var(--mat-control-height));
    --mat-header-cobalt: #062e68;
    --mat-field-cobalt: #083477;
  }

  html,
  body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body {
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mat-edge--top {
    display: block !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: var(--mat-top-binding-height) !important;
    background-color: var(--mat-porcelain-ivory) !important;
    background-image: var(--mat-frame-art) !important;
    background-repeat: repeat !important;
    background-position: center !important;
    background-size: var(--mat-frame-art-size) !important;
  }

  .mat-edge-frame {
    z-index: 500 !important;
  }

  body > .tabletop-shell {
    position: fixed !important;
    z-index: 100 !important;
    top: var(--mat-top-binding-height) !important;
    right: var(--mat-frame-side) !important;
    bottom: calc(var(--mat-frame-bottom) + var(--mat-bottom-safe)) !important;
    left: var(--mat-frame-side) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    background: var(--mat-field-cobalt) !important;
  }

  .tabletop-shell > main {
    padding-top: var(--mat-control-height) !important;
  }

  .site-header.mat-header,
  .site-header.mat-header[data-scrolled] {
    position: fixed !important;
    z-index: 900 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: var(--mat-top-assembly-height) !important;
    overflow: visible !important;
    border: 0 !important;
    background:
      linear-gradient(var(--mat-header-cobalt), var(--mat-header-cobalt))
        var(--mat-frame-side) var(--mat-top-binding-height) /
        calc(100% - (var(--mat-frame-side) * 2)) var(--mat-control-height) no-repeat !important;
    box-shadow: 0 10px 18px rgba(0,18,51,.18) !important;
    backdrop-filter: none !important;
    transform: none !important;
    pointer-events: none;
  }

  .site-header.mat-header::before,
  .site-header.mat-header[data-scrolled]::before {
    display: none !important;
    content: none !important;
  }

  /* A single porcelain rail cleanly separates the fixed header rack from
     the scrolling playing field without over-decorating the transition. */
  .site-header.mat-header::after,
  .site-header.mat-header[data-scrolled]::after {
    position: absolute !important;
    z-index: 905 !important;
    right: var(--mat-frame-side) !important;
    bottom: 0 !important;
    left: var(--mat-frame-side) !important;
    display: block !important;
    height: 1px !important;
    content: '' !important;
    pointer-events: none !important;
    background: var(--mat-porcelain-ivory) !important;
    box-shadow: 0 7px 11px rgba(0,18,51,.16) !important;
  }

  .site-header.mat-header .site-header__inner,
  .site-header.mat-header[data-scrolled] .site-header__inner {
    position: absolute !important;
    z-index: 910 !important;
    top: var(--mat-top-binding-height) !important;
    right: var(--mat-frame-side) !important;
    left: var(--mat-frame-side) !important;
    width: auto !important;
    max-width: none !important;
    min-height: var(--mat-control-height) !important;
    height: var(--mat-control-height) !important;
    margin: 0 !important;
    overflow: visible !important;
    pointer-events: auto;
  }

  /* Slightly smaller crest with a guaranteed visible top edge. It still
     overlaps the patterned binding, but its box stays below the safe-area
     ceiling so no part of the logo is clipped by the viewport. */
  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    position: absolute !important;
    z-index: 2000 !important;
    top: max(calc(var(--mat-top-safe) + 4px), calc(var(--mat-top-binding-height) - 28px)) !important;
    left: 50% !important;
    width: 118px !important;
    max-width: 118px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    pointer-events: auto;
  }

  .site-header.mat-header > .mat-crest img,
  .site-header.mat-header[data-scrolled] > .mat-crest img {
    position: relative !important;
    z-index: 2001 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }

  /* Pull both controls inward so the top composition reads as a centered
     three-piece cluster: BOOK — crest — menu. */
  .header-book-tile {
    top: 12px !important;
    left: 24px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(23,75,143,.38) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #fffdf8 0%, #f7f1e7 100%) !important;
    box-shadow:
      0 2px 0 rgba(182,166,143,.9),
      0 5px 12px rgba(3,28,65,.12),
      inset 0 0 0 2px rgba(255,255,255,.8) !important;
    font-size: .64rem !important;
    letter-spacing: .11em !important;
  }

  .header-book-tile::before {
    inset: 4px !important;
    border-color: rgba(23,75,143,.16) !important;
    border-radius: 6px !important;
  }

  .header-book-tile::after {
    margin-left: .38rem !important;
    font-size: .4rem !important;
    opacity: .68 !important;
  }

  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    top: 12px !important;
    right: 24px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 1px solid rgba(23,75,143,.38) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #fffdf8 0%, #f7f1e7 100%) !important;
    box-shadow:
      0 2px 0 rgba(182,166,143,.9),
      0 5px 12px rgba(3,28,65,.12),
      inset 0 0 0 2px rgba(255,255,255,.8) !important;
    padding: 0 !important;
  }

  .site-header.mat-header .nav-toggle__face,
  .site-header.mat-header[data-scrolled] .nav-toggle__face {
    width: 22px !important;
    gap: 4px !important;
  }

  .site-header.mat-header .nav-toggle__face i,
  .site-header.mat-header[data-scrolled] .nav-toggle__face i {
    width: 22px !important;
    height: 2px !important;
    border-radius: 999px !important;
  }

  .header-book-tile,
  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle,
  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    z-index: 1000 !important;
    pointer-events: auto;
  }
}

@media (min-width: 681px) and (max-width: 980px) {
  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    top: max(calc(var(--mat-top-safe) + 5px), calc(var(--mat-top-binding-height) - 32px)) !important;
    width: 122px !important;
    max-width: 122px !important;
  }

  .header-book-tile {
    left: 30px !important;
  }

  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    right: 30px !important;
  }
}


/* Source: /styles/site-side-frame.css */
/* =========================================================
   SMALL TOWN MAHJ — SIDE-FRAME SITE SHELL
   Keep the Chinoiserie/Talavera artwork as a signature side treatment,
   remove the top/bottom frame, and let the center behave like a normal site.
   Loaded last so it intentionally replaces the earlier full-mat viewport shell.
   ========================================================= */

:root {
  --site-side-frame: clamp(18px, 4.5vw, 34px);
  --site-paper: #fffaf1;
  --site-paper-deep: #f6efe4;
  --site-cobalt: #083477;
  --site-header-cobalt: #062e68;
  --site-header-height: 100px;
}

html,
body {
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: auto !important;
  background: var(--site-paper) !important;
}

body {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 0 var(--site-side-frame) !important;
  box-sizing: border-box !important;
}

.mat-edge-frame {
  position: fixed !important;
  z-index: 500 !important;
  inset: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.mat-edge--top,
.mat-edge--bottom,
.mat-corner {
  display: none !important;
}

.mat-edge--left,
.mat-edge--right {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  width: var(--site-side-frame) !important;
  min-width: var(--site-side-frame) !important;
  max-width: var(--site-side-frame) !important;
  height: 100vh !important;
  height: 100dvh !important;
  box-sizing: border-box !important;
  background-color: var(--mat-porcelain-ivory) !important;
  background-image: var(--mat-frame-art) !important;
  background-repeat: repeat !important;
  background-position: center !important;
  background-size: var(--mat-frame-art-size) !important;
  transform: none !important;
}

.mat-edge--left { left: 0 !important; right: auto !important; }
.mat-edge--right { right: 0 !important; left: auto !important; }

.mat-edge-frame::before {
  position: fixed !important;
  z-index: 4 !important;
  inset: 0 !important;
  display: block !important;
  content: '' !important;
  pointer-events: none !important;
  background:
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      calc(var(--site-side-frame) - var(--mat-rule-width)) 0 / var(--mat-rule-width) 100% no-repeat,
    linear-gradient(var(--mat-porcelain-blue), var(--mat-porcelain-blue))
      calc(100% - var(--site-side-frame)) 0 / var(--mat-rule-width) 100% no-repeat !important;
}

.mat-edge-frame::after { display: none !important; }

body > .tabletop-shell {
  position: relative !important;
  z-index: 100 !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  margin: 0 !important;
  padding-top: var(--site-header-height) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  background: var(--site-paper) !important;
  box-shadow: none !important;
}

.tabletop-shell > main {
  padding-top: 0 !important;
  background: var(--site-paper) !important;
}

.site-header.mat-header,
.site-header.mat-header[data-scrolled] {
  position: fixed !important;
  z-index: 900 !important;
  top: 0 !important;
  right: var(--site-side-frame) !important;
  left: var(--site-side-frame) !important;
  width: auto !important;
  height: var(--site-header-height) !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,249,238,.34) !important;
  background: var(--site-header-cobalt) !important;
  box-shadow: 0 10px 24px rgba(4,30,70,.12) !important;
  pointer-events: auto !important;
  transform: none !important;
}

.site-header.mat-header::before,
.site-header.mat-header::after,
.site-header.mat-header[data-scrolled]::before,
.site-header.mat-header[data-scrolled]::after {
  display: none !important;
  content: none !important;
}

.site-header.mat-header .site-header__inner,
.site-header.mat-header[data-scrolled] .site-header__inner {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: min(1180px, calc(100% - 28px)) !important;
  height: var(--site-header-height) !important;
  min-height: var(--site-header-height) !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.site-header.mat-header > .mat-crest,
.site-header.mat-header[data-scrolled] > .mat-crest {
  position: absolute !important;
  z-index: 2000 !important;
  top: 3px !important;
  left: 50% !important;
  width: 154px !important;
  max-width: 154px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  outline: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  animation: none !important;
}

.site-header.mat-header > .mat-crest::before,
.site-header.mat-header > .mat-crest::after,
.site-header.mat-header[data-scrolled] > .mat-crest::before,
.site-header.mat-header[data-scrolled] > .mat-crest::after {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.site-header.mat-header > .mat-crest img,
.site-header.mat-header[data-scrolled] > .mat-crest img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  transition: none !important;
  animation: none !important;
}

.header-book-tile,
.site-header.mat-header .nav-toggle,
.site-header.mat-header[data-scrolled] .nav-toggle { top: 28px !important; }
.header-book-tile { left: 18px !important; }
.site-header.mat-header .nav-toggle,
.site-header.mat-header[data-scrolled] .nav-toggle { right: 18px !important; }

/* ---------------------------------------------------------
   Unified Mahjong button system
   All primary booking buttons share identical geometry, typography,
   inset detail, depth, and interaction. Only their color tokens differ.
   --------------------------------------------------------- */
.header-book-tile,
.home-photo-hero__cta,
.physical-cta {
  --mahj-btn-bg-top: rgba(255,255,255,.9);
  --mahj-btn-bg-mid: rgba(255,252,244,.82);
  --mahj-btn-bg-bottom: rgba(236,227,210,.96);
  --mahj-btn-base: #fff9ee;
  --mahj-btn-border: #4c6f9f;
  --mahj-btn-text: #123f78;
  --mahj-btn-accent: #174b8f;
  --mahj-btn-depth: #c9bca7;
  --mahj-btn-depth-blue: rgba(7,39,84,.16);
  --mahj-btn-shadow: rgba(3,28,65,.16);
  --mahj-btn-inset: rgba(23,75,143,.24);

  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 48px !important;
  border: 1px solid var(--mahj-btn-border) !important;
  border-radius: 7px 7px 9px 8px !important;
  background:
    linear-gradient(180deg, var(--mahj-btn-bg-top) 0%, var(--mahj-btn-bg-mid) 52%, var(--mahj-btn-bg-bottom) 100%),
    var(--mahj-btn-base) !important;
  box-shadow:
    0 3px 0 var(--mahj-btn-depth),
    0 5px 0 var(--mahj-btn-depth-blue),
    0 9px 15px var(--mahj-btn-shadow),
    inset 0 0 0 2px rgba(255,255,255,.72),
    inset 0 0 0 3px rgba(23,75,143,.10) !important;
  color: var(--mahj-btn-text) !important;
  font-family: var(--sans) !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  gap: 0 !important;
  padding: 0 1rem !important;
  text-decoration: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  paint-order: normal !important;
  filter: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transform: none;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}

.header-book-tile *,
.home-photo-hero__cta *,
.physical-cta * {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  paint-order: normal !important;
  filter: none !important;
}

.header-book-tile::before,
.home-photo-hero__cta::before,
.physical-cta::before {
  position: absolute;
  inset: 4px;
  border: 1px solid var(--mahj-btn-inset);
  border-radius: 4px 4px 6px 5px;
  content: '';
  pointer-events: none;
}

.header-book-tile::after,
.home-photo-hero__cta::after,
.physical-cta::after {
  content: '◆';
  margin-left: .48rem;
  color: var(--mahj-btn-accent);
  font-size: .48rem;
  opacity: .82;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
}

.header-book-tile:hover,
.home-photo-hero__cta:hover,
.physical-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 4px 0 var(--mahj-btn-depth),
    0 6px 0 var(--mahj-btn-depth-blue),
    0 11px 17px rgba(3,28,65,.18),
    inset 0 0 0 2px rgba(255,255,255,.72),
    inset 0 0 0 3px rgba(23,75,143,.10) !important;
}

.header-book-tile:active,
.home-photo-hero__cta:active,
.physical-cta:active {
  transform: translateY(2px) !important;
  box-shadow:
    0 1px 0 var(--mahj-btn-depth),
    0 3px 7px rgba(3,28,65,.14),
    inset 0 0 0 2px rgba(255,255,255,.72),
    inset 0 0 0 3px rgba(23,75,143,.10) !important;
}

.header-book-tile:focus-visible,
.home-photo-hero__cta:focus-visible,
.physical-cta:focus-visible {
  outline: 3px solid rgba(233,163,45,.78) !important;
  outline-offset: 3px !important;
}

/* Cobalt variants use the exact same physical button styling. */
.home-photo-hero__cta,
.physical-cta {
  --mahj-btn-bg-top: rgba(34,91,165,.98);
  --mahj-btn-bg-mid: rgba(18,70,139,.98);
  --mahj-btn-bg-bottom: rgba(7,47,103,.99);
  --mahj-btn-base: #0d4488;
  --mahj-btn-border: #062f68;
  --mahj-btn-text: #fffaf1;
  --mahj-btn-accent: #fffaf1;
  --mahj-btn-depth: #05275a;
  --mahj-btn-depth-blue: rgba(2,24,58,.36);
  --mahj-btn-shadow: rgba(2,22,54,.25);
  --mahj-btn-inset: rgba(255,250,241,.34);
}

@media (min-width: 981px) {
  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    width: 168px !important;
    max-width: 168px !important;
  }
}

@media (max-width: 680px) {
  :root {
    --site-side-frame: 18px;
    --site-header-height: 94px;
  }

  .site-header.mat-header .site-header__inner,
  .site-header.mat-header[data-scrolled] .site-header__inner {
    width: calc(100% - 12px) !important;
  }

  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    top: 3px !important;
    width: 142px !important;
    max-width: 142px !important;
  }

  .header-book-tile,
  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle { top: 25px !important; }

  .header-book-tile { left: 10px !important; }

  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle { right: 10px !important; }

  .header-book-tile,
  .home-photo-hero__cta,
  .physical-cta {
    min-height: 44px !important;
    font-size: .62rem !important;
    letter-spacing: .105em !important;
    padding-inline: .7rem !important;
  }

  .header-book-tile::before,
  .home-photo-hero__cta::before,
  .physical-cta::before {
    inset: 3px;
  }
}


/* Source: /styles/footer-editorial.css */
/* =========================================================
   SMALL TOWN MAHJ — EDITORIAL FOOTER
   Content is anchored left while the transparent crest sits large at the
   lower-right. The copyright/tagline row stays level on a single line.
   ========================================================= */

.site-footer {
  position: relative;
  background: #062e68 !important;
  color: #fffaf1 !important;
}

.site-footer .site-footer__top {
  position: relative !important;
  display: block !important;
  padding-top: clamp(2.1rem, 4vw, 3.4rem) !important;
  padding-right: clamp(190px, 23vw, 290px) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

.site-footer__brand {
  position: absolute !important;
  right: 0 !important;
  bottom: 1.2rem !important;
  display: block !important;
  margin: 0 !important;
}

.site-footer__brand img {
  display: block !important;
  width: clamp(165px, 17vw, 230px) !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

.site-footer__brand p {
  display: none !important;
}

.site-footer__content {
  display: block !important;
  width: min(720px, 100%) !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

.site-footer__invitation {
  min-width: 0 !important;
  margin: 0 !important;
}

.site-footer__invitation .eyebrow {
  margin: 0 0 .5rem !important;
  color: rgba(255,250,241,.7) !important;
  font-size: .64rem !important;
  letter-spacing: .16em !important;
}

.site-footer__invitation h2 {
  max-width: 11em !important;
  margin: 0 0 .8rem !important;
  color: #fffaf1 !important;
  font-size: clamp(1.85rem, 3vw, 3rem) !important;
  line-height: 1.02 !important;
}

.site-footer__invitation .text-link {
  color: #fffaf1 !important;
  border-bottom-color: rgba(255,250,241,.35) !important;
}

.site-footer__nav {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: .65rem 1.15rem !important;
  max-width: 620px !important;
  margin: 1.5rem 0 0 !important;
  text-align: left !important;
}

.site-footer__nav a {
  color: rgba(255,250,241,.82) !important;
  font-size: .82rem !important;
  text-decoration: none !important;
}

.site-footer .site-footer__bottom {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: max-content 1fr max-content !important;
  align-items: center !important;
  gap: 1rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1.15rem !important;
  border-top: 1px solid rgba(255,250,241,.22) !important;
  color: rgba(255,250,241,.72) !important;
  font-size: .7rem !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
}

.site-footer__bottom::after {
  content: '';
  grid-column: 2;
}

.site-footer__legal {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  white-space: nowrap;
  font-size: .8rem;
  line-height: 1.2;
}

.site-footer__credit {
  display: inline-flex;
  align-items: center;
}

.site-footer__credit::before {
  display: none !important;
  content: none !important;
}

.site-footer__credit a {
  color: #fffaf1;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,250,241,.38);
  padding-bottom: .08rem;
}

.site-footer__credit a:hover {
  border-bottom-color: rgba(255,250,241,.8);
}

.site-footer__bottom > span:last-child {
  grid-column: 3;
  margin: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .site-footer .site-footer__top {
    padding-top: 1.75rem !important;
    padding-right: 138px !important;
    padding-bottom: 3rem !important;
  }

  .site-footer__brand {
    right: -4px !important;
    bottom: 1rem !important;
  }

  .site-footer__brand img {
    width: 132px !important;
  }

  .site-footer__content {
    width: 100% !important;
  }

  .site-footer__invitation .eyebrow {
    margin-bottom: .35rem !important;
    font-size: .57rem !important;
  }

  .site-footer__invitation h2 {
    max-width: 9em !important;
    margin-bottom: .65rem !important;
    font-size: clamp(1.45rem, 6vw, 1.9rem) !important;
    line-height: 1.03 !important;
  }

  .site-footer__invitation .text-link {
    font-size: .76rem !important;
  }

  .site-footer__nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, max-content)) !important;
    justify-content: start !important;
    gap: .5rem .9rem !important;
    max-width: calc(100% - 10px) !important;
    margin-top: 1.25rem !important;
    text-align: left !important;
  }

  .site-footer__nav a {
    font-size: .72rem !important;
  }

  .site-footer .site-footer__bottom {
    width: calc(100% - 20px) !important;
    margin: 0 auto !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: .45rem !important;
    padding: .8rem 0 .95rem !important;
    font-size: clamp(.46rem, 1.95vw, .58rem) !important;
    letter-spacing: 0 !important;
  }

  .site-footer__bottom::after {
    display: none !important;
  }

  .site-footer__legal {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .28rem;
    white-space: normal;
    text-align: left;
    font-size: .68rem;
    line-height: 1.25;
  }

  .site-footer__credit {
    display: block;
    width: 100%;
    text-align: left;
  }

  .site-footer__bottom > span:last-child {
    grid-column: 2;
  }
}

@media (max-width: 430px) {
  .site-footer .site-footer__top {
    padding-right: 118px !important;
    padding-bottom: 2.7rem !important;
  }

  .site-footer__brand img {
    width: 114px !important;
  }

  .site-footer__nav {
    gap: .45rem .75rem !important;
  }

  .site-footer .site-footer__bottom {
    width: calc(100% - 12px) !important;
    gap: .35rem !important;
    font-size: .45rem !important;
  }

  .site-footer__legal {
    font-size: .62rem;
  }
}


/* Source: /styles/header-half-crest.css */
/* =========================================================
   SMALL TOWN MAHJ — HALF-CREST HEADER ALIGNMENT
   Mobile/tablet retain the approved centered-crest composition.
   Desktop moves the crest to the right and keeps navigation visible.
   Loaded last as the final authority for header geometry only.
   ========================================================= */

:root {
  /* 3px crest offset + half of the 139px default crest. */
  --site-header-height: 73px;
  --site-header-logo-clearance: 76px;
}

.site-header.mat-header,
.site-header.mat-header[data-scrolled],
.site-header.mat-header .site-header__inner,
.site-header.mat-header[data-scrolled] .site-header__inner {
  height: var(--site-header-height) !important;
  min-height: var(--site-header-height) !important;
}

body > .tabletop-shell {
  padding-top: calc(var(--site-header-height) + var(--site-header-logo-clearance)) !important;
}

/* The homepage is intentionally different: its shuffle-photo hero may begin
   immediately at the cobalt header edge and sit behind the lower half of the crest. */
.tabletop-shell > main > .home-photo-hero:first-child {
  margin-top: calc(-1 * var(--site-header-logo-clearance)) !important;
}

.site-header.mat-header > .mat-crest,
.site-header.mat-header[data-scrolled] > .mat-crest {
  width: 139px !important;
  max-width: 139px !important;
}

.header-book-tile,
.site-header.mat-header .nav-toggle,
.site-header.mat-header[data-scrolled] .nav-toggle {
  top: 12px !important;
}

@media (min-width: 981px) {
  :root {
    --site-header-height: 79px;
    /* The crest no longer hangs through the center of page content. */
    --site-header-logo-clearance: 0px;
    --desktop-nav-gap: clamp(1.2rem, 1.7vw, 2rem);
  }

  /* The desktop crest behaves like a brand seal at the right edge instead
     of a divider splitting navigation into two unrelated groups. */
  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    top: -3px !important;
    right: clamp(20px, 2.6vw, 44px) !important;
    left: auto !important;
    width: 108px !important;
    max-width: 108px !important;
    transform: none !important;
    transform-origin: 100% 22% !important;
  }

  .site-header.mat-header .site-header__inner,
  .site-header.mat-header[data-scrolled] .site-header__inner {
    width: min(1500px, calc(100% - 48px)) !important;
    max-width: none !important;
  }

  .header-book-tile,
  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    top: 15px !important;
  }

  .header-book-tile {
    left: 0 !important;
  }

  /* Home / Story / Availability / Contact become one continuous visible row.
     The existing two ULs remain in the DOM so approved mobile behavior and
     menu structure do not change. */
  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: 20px !important;
    right: clamp(118px, 9vw, 150px) !important;
    left: clamp(118px, 9vw, 150px) !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--desktop-nav-gap) !important;
  }

  .site-header.mat-header .site-nav__group {
    display: flex !important;
    align-items: center !important;
    gap: var(--desktop-nav-gap) !important;
  }

  .site-header.mat-header .site-nav__group--left,
  .site-header.mat-header .site-nav__group--right {
    grid-column: auto !important;
    justify-self: auto !important;
    padding: 0 !important;
  }

  .site-header.mat-header .site-nav .rack-tile {
    min-height: 38px !important;
    color: rgba(255, 250, 241, .84) !important;
    font-size: clamp(.66rem, .68vw, .74rem) !important;
    letter-spacing: .14em !important;
    text-shadow: none !important;
  }

  .site-header.mat-header .site-nav .rack-tile:hover,
  .site-header.mat-header .site-nav .rack-tile[aria-current='page'] {
    color: #fffaf1 !important;
  }

  .site-header.mat-header .site-nav .rack-tile::before {
    background: #ef8a78 !important;
  }

  /* With the crest out of the center, generic interior heroes no longer need
     a second large clearance band. This affects Availability/Contact desktop
     only; About owns its own desktop hero and mobile remains unchanged. */
  .page-hero {
    padding: clamp(2.7rem, 3.8vw, 4.1rem) 0 clamp(3.1rem, 4.5vw, 4.8rem) !important;
  }
}

/* Compact desktop/laptop header: retain visible navigation without allowing
   the BOOK tile, four links, and crest to crowd one another at 981–1180px. */
@media (min-width: 981px) and (max-width: 1180px) {
  :root {
    --desktop-nav-gap: clamp(.9rem, 1.35vw, 1.15rem);
  }

  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    top: 1px !important;
    right: 14px !important;
    width: 92px !important;
    max-width: 92px !important;
  }

  .site-header.mat-header .site-header__inner,
  .site-header.mat-header[data-scrolled] .site-header__inner {
    width: calc(100% - 32px) !important;
  }

  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    right: 102px !important;
    left: 108px !important;
  }

  .site-header.mat-header .site-nav .rack-tile {
    font-size: .64rem !important;
    letter-spacing: .105em !important;
  }

  .page-hero {
    padding-top: 2.45rem !important;
    padding-bottom: 3.2rem !important;
  }
}

@media (max-width: 680px) {
  :root {
    /* 3px crest offset + half of the 128px mobile crest. */
    --site-header-height: 67px;
    --site-header-logo-clearance: 70px;
  }

  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    width: 128px !important;
    max-width: 128px !important;
  }

  .header-book-tile,
  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    top: 11px !important;
  }
}

/* Source: /styles/home-desktop-hero-polish.css */
/* =========================================================
   SMALL TOWN MAHJ — DESKTOP HERO POLISH
   Desktop only. The approved <=980px experience is untouched.
   Simplifies the photo shuffle into one dominant tabletop photograph with
   restrained back layers and removes the ivory copy wash over photography.
   ========================================================= */

@media (min-width: 981px) {
  /* The previous gradient extended far into the photo field and appeared as
     a translucent white rectangle across the photographs. Desktop no longer
     needs that masking device. */
  body:has(.home-photo-hero) .home-photo-hero__copy::before {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  body:has(.home-photo-hero) .home-photo-hero {
    width: min(1500px, calc(100% - clamp(52px, 5vw, 88px))) !important;
    padding: clamp(2.5rem, 3.4vh, 3rem) 0 clamp(2.2rem, 3.2vh, 2.8rem) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__grid {
    min-height: clamp(520px, calc(100vh - 165px), 610px) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    grid-column: 1 / 6 !important;
    padding-left: clamp(2.5rem, 4vw, 4.75rem) !important;
    padding-right: clamp(1.4rem, 2vw, 2.4rem) !important;
    transform: none !important;
  }

  body:has(.home-photo-hero) .home-photo-hero h1 {
    max-width: 7.1em !important;
    font-size: clamp(4rem, 5vw, 5.95rem) !important;
    line-height: .91 !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 5 / 13 !important;
    max-width: 930px !important;
    height: clamp(500px, 64vh, 620px) !important;
    overflow: visible !important;
  }

  /* One photograph is the hero. The next two merely suggest a tabletop stack;
     the remaining cards stay hidden until rotation brings them forward. */
  body:has(.home-photo-hero) .shuffle-photo {
    top: 50% !important;
    left: 55% !important;
    width: min(86%, 760px) !important;
    height: clamp(500px, 61vh, 585px) !important;
    aspect-ratio: auto !important;
    border-width: 7px !important;
    border-bottom-width: 32px !important;
    border-radius: 9px !important;
    box-shadow:
      0 22px 46px rgba(15,45,83,.17),
      0 3px 0 rgba(23,75,143,.07) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="0"] {
    --photo-rotation: -.6deg !important;
    --photo-x: 0px !important;
    --photo-y: 0px !important;
    z-index: 6 !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="1"] {
    --photo-rotation: 2.1deg !important;
    --photo-x: 22px !important;
    --photo-y: 13px !important;
    z-index: 4 !important;
    opacity: .38 !important;
    filter: saturate(.86) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="2"] {
    --photo-rotation: -1.9deg !important;
    --photo-x: -18px !important;
    --photo-y: 17px !important;
    z-index: 3 !important;
    opacity: .18 !important;
    filter: saturate(.8) !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="3"],
  body:has(.home-photo-hero) .shuffle-photo[data-position="4"],
  body:has(.home-photo-hero) .shuffle-photo[data-position="5"] {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__image {
    bottom: 23px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__hint {
    bottom: 7px !important;
    font-size: .54rem !important;
    letter-spacing: .13em !important;
  }
}

/* Compact desktop/laptop: keep the same calmer concept without crowding the
   headline or forcing the photo stack into the decorative rails. */
@media (min-width: 981px) and (max-width: 1180px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: calc(100% - 36px) !important;
    padding-top: 2rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__grid {
    min-height: 500px !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    grid-column: 1 / 7 !important;
    padding-left: 1.7rem !important;
    padding-right: 1.4rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero h1 {
    font-size: clamp(3.45rem, 5.5vw, 4.3rem) !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 6 / 13 !important;
    height: 475px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    left: 52% !important;
    width: min(94%, 560px) !important;
    height: 455px !important;
  }
}

/* Wide desktop: let the photograph matter more without returning to the giant
   loose stack. The lead image grows modestly and moves toward the copy field. */
@media (min-width: 1500px) {
  body:has(.home-photo-hero) .home-photo-hero {
    width: min(1580px, calc(100% - 64px)) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    grid-column: 1 / 6 !important;
    padding-left: clamp(5rem, 5vw, 6.2rem) !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    grid-column: 5 / 13 !important;
    max-width: 1010px !important;
  }

  body:has(.home-photo-hero) .shuffle-photo {
    left: 53% !important;
    width: min(88%, 820px) !important;
    height: clamp(540px, 60vh, 610px) !important;
  }
}


/* Source: /styles/site-shell-final.css */
/* =========================================================
   SMALL TOWN MAHJ — FINAL SHARED SITE SHELL
   One header and footer treatment on every route. Decorative side artwork
   belongs to page content only; it never runs behind the fixed header or footer.
   Homepage photo hero remains the intentional unframed exception.
   ========================================================= */

body {
  padding-inline: 0 !important;
}

/* Retire the old viewport-fixed frame so the floral artwork cannot appear
   behind the shared header/footer. Content owns the rails instead. */
body > .mat-edge-frame {
  display: none !important;
}

body > .tabletop-shell {
  width: 100% !important;
  margin-inline: 0 !important;
}

/* Shared header: always full viewport width, regardless of page. */
.site-header.mat-header,
.site-header.mat-header[data-scrolled] {
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Shared footer: always full viewport width and never framed. */
.site-footer {
  position: relative !important;
  z-index: 20 !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Interior pages: start the framed content field immediately below the fixed
   header. The logo-clearance space lives INSIDE main so the floral rails are
   already visible while page content waits safely below the hanging crest. */
body:not(:has(.home-photo-hero)) > .tabletop-shell {
  padding-top: var(--site-header-height) !important;
}

body:not(:has(.home-photo-hero)) .tabletop-shell > main {
  position: relative !important;
  isolation: isolate;
  width: 100% !important;
  padding-top: var(--site-header-logo-clearance) !important;
  padding-inline: var(--site-side-frame) !important;
  box-sizing: border-box !important;
  background: var(--site-paper) !important;
}

body:not(:has(.home-photo-hero)) .tabletop-shell > main::before,
body:not(:has(.home-photo-hero)) .tabletop-shell > main::after {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: var(--site-side-frame);
  box-sizing: border-box;
  content: '';
  pointer-events: none;
  background-color: var(--mat-porcelain-ivory);
  background-image: var(--mat-frame-art);
  background-repeat: repeat;
  background-position: center;
  background-size: var(--mat-frame-art-size);
}

body:not(:has(.home-photo-hero)) .tabletop-shell > main::before {
  left: 0;
  border-right: var(--mat-rule-width) solid var(--mat-porcelain-blue);
}

body:not(:has(.home-photo-hero)) .tabletop-shell > main::after {
  right: 0;
  border-right: var(--mat-rule-width) solid var(--mat-porcelain-blue);
  transform: scaleX(-1);
  transform-origin: center;
}

body:not(:has(.home-photo-hero)) .tabletop-shell > main > * {
  position: relative;
  z-index: 1;
}

/* Homepage exception: the photo hero remains open/full-width. Its existing
   .home-framed-content wrapper continues to own the floral rails below it. */
body:has(.home-photo-hero) .tabletop-shell > main {
  width: 100% !important;
  padding-inline: 0 !important;
}

/* Mobile/tablet menu: a true compact dropdown tucked beneath the hamburger.
   It should read as navigation, not as another oversized decorative tile. */
@media (max-width: 980px) {
  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: calc(var(--site-header-height) + 5px) !important;
    right: 12px !important;
    left: auto !important;
    width: clamp(142px, 21vw, 185px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(23,75,143,.62) !important;
    border-radius: 8px !important;
    background: rgba(255,249,238,.985) !important;
    box-shadow: 0 8px 20px rgba(0,14,44,.18) !important;
    padding: .22rem .38rem .26rem !important;
  }

  .site-header.mat-header .site-nav::after,
  .site-header.mat-header[data-scrolled] .site-nav::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  .site-header.mat-header .site-nav__group,
  .site-header.mat-header .site-nav__group--left,
  .site-header.mat-header .site-nav__group--right {
    grid-column: 1 !important;
    display: grid !important;
    width: 100% !important;
    justify-self: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-header.mat-header .site-nav li {
    width: 100% !important;
  }

  .site-header.mat-header .site-nav .rack-tile,
  .site-header.mat-header .site-nav .rack-tile:hover,
  .site-header.mat-header .site-nav .rack-tile[aria-current='page'] {
    display: flex !important;
    width: 100% !important;
    min-height: 35px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(23,75,143,.09) !important;
    border-radius: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #103a70 !important;
    font-size: .62rem !important;
    letter-spacing: .065em !important;
    padding: .45rem .1rem !important;
    text-align: right !important;
    transform: none !important;
  }

  .site-header.mat-header .site-nav__group--right li:last-child .rack-tile {
    border-bottom: 0 !important;
  }

  /* Keep focus from adding a second marker beside the active page. The coral
     dash below is the sole visible active/focus treatment in this compact menu. */
  .site-header.mat-header .site-nav .rack-tile:focus,
  .site-header.mat-header .site-nav .rack-tile:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
  }

  .site-header.mat-header .site-nav .rack-tile::before {
    right: .1rem !important;
    bottom: 5px !important;
    left: auto !important;
    width: 10px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #ef8a78 !important;
  }

  .site-header.mat-header .site-nav .rack-tile[aria-current='page']::before {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 680px) {
  body:not(:has(.home-photo-hero)) .tabletop-shell > main {
    padding-inline: 18px !important;
  }

  body:not(:has(.home-photo-hero)) .tabletop-shell > main::before,
  body:not(:has(.home-photo-hero)) .tabletop-shell > main::after {
    width: 18px;
  }

  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: calc(var(--site-header-height) + 4px) !important;
    right: 9px !important;
    left: auto !important;
    width: 130px !important;
    max-width: calc(100vw - 18px) !important;
    border-radius: 7px !important;
    padding: .18rem .32rem .22rem !important;
  }

  .site-header.mat-header .site-nav .rack-tile,
  .site-header.mat-header .site-nav .rack-tile:hover,
  .site-header.mat-header .site-nav .rack-tile[aria-current='page'] {
    min-height: 34px !important;
    font-size: .58rem !important;
    letter-spacing: .052em !important;
    padding: .42rem .08rem !important;
  }
}


/* Source: /styles/typography-system.css */
/* =========================================================
   SMALL TOWN MAHJ — TYPOGRAPHY SYSTEM
   Cormorant Garamond is the editorial voice, Alex Brush is the
   restrained handwritten accent, and Montserrat is reserved for
   compact utility/navigation text where clarity matters most.
   ========================================================= */

:root {
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --script: "Alex Brush", "Brush Script MT", cursive;
  --utility: Montserrat, "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Editorial display voice across every page. Existing components already use
   --serif extensively, so this updates the whole system without restyling each page. */
.display,
h1,
h2,
h3,
.wordmark,
.hero__notes span,
.promise-band p,
.gathering-row__number,
.photo-tile figcaption,
.mahjong-step__number,
.porcelain-ledger li > span,
.content-tile__botanical,
.invitation-flower,
.tile-symbol {
  font-family: var(--serif) !important;
}

/* Montserrat is the third font, used only for small structured UI copy. */
.eyebrow,
.tile-kicker,
.button,
.header-book-tile,
.site-header.mat-header .site-nav .rack-tile,
.nav-toggle__label,
.site-footer__nav,
.text-link,
.field-link,
.tile-text-link,
.photo-tile__label,
.porcelain-ledger strong,
label,
input,
select,
textarea,
button {
  font-family: var(--utility) !important;
}

/* Alex Brush stays special. Keep it close to the surrounding editorial scale
   so it reads as a graceful handwritten accent rather than an oversized display. */
.home-piece--signoff p,
.promise-band p,
.site-footer__bottom > span:last-child {
  font-family: var(--script) !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

.home-piece--signoff p {
  font-size: clamp(1.65rem, 3vw, 2.55rem) !important;
  line-height: 1.12 !important;
}

.promise-band p {
  font-size: clamp(1.45rem, 2.5vw, 2.15rem) !important;
  line-height: 1.12 !important;
}

.site-footer__bottom > span:last-child {
  font-size: clamp(1.05rem, 1.45vw, 1.35rem) !important;
  line-height: 1.1 !important;
}

.site-footer__credit,
.site-footer__credit a {
  font-family: var(--utility) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

/* Cormorant can carry slightly softer spacing than the former system serif. */
h1,
h2,
h3,
.display {
  letter-spacing: -.025em;
}

@media (max-width: 680px) {
  .home-piece--signoff p {
    font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
  }

  .promise-band p {
    font-size: clamp(1.4rem, 6.5vw, 1.9rem) !important;
  }

  .site-footer__bottom > span:last-child {
    font-size: 1.05rem !important;
  }
}


/* Source: /styles/home-hardening.css */
/* Homepage-only accessibility hardening. No visual changes unless a keyboard
   user is actively moving through the compact mobile/tablet navigation. */
@media (max-width: 980px) {
  body:has(.home-photo-hero) .site-header.mat-header .site-nav .rack-tile:focus-visible {
    outline: 3px solid rgba(233,163,45,.9) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 2px rgba(255,249,238,.96) !important;
  }
}