/* 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.
   The photographs are real <img> elements so the browser can discover every
   homepage photo directly from the HTML without waiting on CSS or JavaScript. */
.shuffle-photo {
  --photo: none;
  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__asset {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* The photograph itself stays stationary. Sway/zoom motion remains disabled. */
.shuffle-photo__image {
  transform: scale(1.05);
  transform-origin: center center;
  will-change: auto;
}

/* Keep the current image fully visible while the next real photograph fades
   over it. Every card owns its <img> from first render, so a placeholder can
   never become an intended carousel state. */
.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;
  }

  .shuffle-photo__asset {
    object-position: center center;
  }
}

@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 authority.
   The Polaroid concept is retired at every viewport: no white photo frames,
   caption bands, stacked prints, or rotated cards. Mobile/tablet keep their
   existing responsive structure; desktop now uses the same photo-led language
   as mobile, with the headline and CTA layered directly over the photography. */

.home-about-brief {
  border-top: 0 !important;
}

/* =========================================================
   ALL VIEWPORTS — RETIRE THE POLAROID SYSTEM
   Keep the existing six real images and dissolve script, but make every card
   a clean photographic surface rather than a physical print.
   ========================================================= */
body:has(.home-photo-hero) .photo-shuffle-hero__stack {
  inset: 0 !important;
}

body:has(.home-photo-hero) .shuffle-photo {
  --photo-rotation: 0deg !important;
  --photo-x: 0px !important;
  --photo-y: 0px !important;
  border: 0 !important;
  border-bottom-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

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

body:has(.home-photo-hero) .shuffle-photo__hint {
  display: none !important;
}

/* ---------------------------------------------------------
   Approved phone treatment remains photo-led and full bleed.
   --------------------------------------------------------- */
@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;
  }

  .home-photo-hero__copy::after,
  .home-photo-hero__copy::before {
    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;
  }
}

/* Tablet keeps its existing responsive composition, but the photographs are
   now clean images instead of Polaroid cards. */
@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 {
    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 — MOBILE-LIKE PHOTO HERO
   One photograph fills the entire central field between the floral rails.
   Copy sits directly on the image at lower left, supported only by a subtle
   photographic gradient. There is no separate ivory headline strip.
   ========================================================= */
@media (min-width: 981px) {
  body:has(.home-photo-hero) .home-photo-hero {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    box-sizing: border-box !important;
    background: #dfe8ee !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__grid {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    min-height: clamp(560px, 48vw, 760px) !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  /* Photography is the base layer. */
  body:has(.home-photo-hero) .photo-shuffle-hero {
    position: relative !important;
    z-index: 1 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #dfe8ee !important;
    box-shadow: none !important;
  }

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

  body:has(.home-photo-hero) .shuffle-photo {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transform-origin: center center !important;
    filter: none !important;
    pointer-events: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: none !important;
    transform: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__image::after {
    display: none !important;
    content: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__asset {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  /* A restrained gradient protects the ivory headline without introducing a
     visible card, panel, or white wash over the image. */
  body:has(.home-photo-hero) .photo-shuffle-hero::after {
    position: absolute !important;
    z-index: 8 !important;
    inset: 0 !important;
    display: block !important;
    content: '' !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg,
        rgba(3,27,63,.44) 0%,
        rgba(3,27,63,.30) 24%,
        rgba(3,27,63,.10) 48%,
        rgba(3,27,63,0) 72%),
      linear-gradient(0deg,
        rgba(3,27,63,.32) 0%,
        rgba(3,27,63,.10) 34%,
        rgba(3,27,63,0) 62%) !important;
  }

  /* Copy overlays the photograph like mobile: lower-left, generous, and
     responsive rather than occupying a separate layout row. */
  body:has(.home-photo-hero) .home-photo-hero__copy {
    position: relative !important;
    z-index: 12 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    width: min(1040px, 78%) !important;
    max-width: none !important;
    min-height: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    align-self: stretch !important;
    justify-self: start !important;
    padding: clamp(3rem, 5.3vw, 6rem) clamp(2.8rem, 5vw, 5.8rem) !important;
    transform: none !important;
    text-align: left !important;
    pointer-events: none !important;
    box-sizing: border-box !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: 8.4em !important;
    margin: 0 !important;
    color: #fffaf1 !important;
    font-size: clamp(4.6rem, 6vw, 7.2rem) !important;
    line-height: .88 !important;
    letter-spacing: -.04em !important;
    -webkit-text-stroke: 1px rgba(8,47,103,.86) !important;
    paint-order: stroke fill !important;
    text-shadow: 0 2px 5px rgba(3,24,58,.20) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: flex-start !important;
    margin: clamp(1.25rem, 1.8vw, 1.8rem) 0 0 !important;
    pointer-events: auto !important;
  }

  /* One image visible at rest; the existing JS classes drive the dissolve. */
  body:has(.home-photo-hero) .shuffle-photo[data-position="0"] {
    z-index: 2 !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="1"],
  body:has(.home-photo-hero) .shuffle-photo[data-position="2"],
  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"] {
    z-index: 1 !important;
    opacity: 0 !important;
    filter: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo.is-outgoing {
    z-index: 20 !important;
    opacity: 1 !important;
  }

  body:has(.home-photo-hero) .shuffle-photo.is-incoming {
    z-index: 21 !important;
    opacity: 0 !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero.is-dissolving .shuffle-photo.is-incoming {
    opacity: 1 !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero.is-dissolving .shuffle-photo.is-outgoing {
    opacity: 1 !important;
  }
}

/* Compact desktop uses the same over-photo composition, only reducing type
   and hero depth so laptop screens and browser zoom remain balanced. */
@media (min-width: 981px) and (max-width: 1180px) {
  body:has(.home-photo-hero) .home-photo-hero__grid {
    min-height: clamp(520px, 55vw, 620px) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    width: min(820px, 82%) !important;
    padding: 2.6rem 2.35rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero h1 {
    max-width: 8em !important;
    font-size: clamp(3.65rem, 5.8vw, 4.8rem) !important;
  }
}

@media (min-width: 1500px) {
  body:has(.home-photo-hero) .home-photo-hero__grid {
    min-height: clamp(620px, 43vw, 790px) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    width: min(1120px, 74%) !important;
    padding-left: clamp(4.6rem, 5.4vw, 6.4rem) !important;
    padding-bottom: clamp(4rem, 5vw, 5.8rem) !important;
  }

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


/* Source: /styles/home-inner-frame.css */
/* Homepage framing refinement.
   Mobile/tablet retain the existing inner-content rails below the open photo
   hero. On desktop, the shared site shell owns one continuous pair of rails
   around the hero and all homepage content, so this wrapper must not draw a
   second decorative frame. */

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);
}

.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;
}

.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;
}

.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;
}

.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;
}

/* =========================================================
   DESKTOP HOMEPAGE CONTENT SYSTEM
   The earlier desktop art direction used staggered objects and large open
   fields. The final desktop system below keeps the tabletop character but
   uses conventional editorial rhythm: balanced columns, aligned rows, and
   consistent section spacing. This file is the last homepage page stylesheet,
   so it intentionally owns the lower-page desktop composition.
   ========================================================= */
@media (min-width: 981px) {
  .home-framed-content {
    --home-inner-rail: 0px;
    isolation: auto;
    padding-inline: 0 !important;
  }

  .home-framed-content::before,
  .home-framed-content::after {
    display: none !important;
    content: none !important;
  }

  /* Overall rhythm below the photo hero. */
  body:has(.home-photo-hero) .home-framed-content {
    padding-top: clamp(2.2rem, 3.2vw, 3.4rem) !important;
  }

  body:has(.home-photo-hero) .home-tile-flow {
    width: 100% !important;
    padding-bottom: clamp(3.8rem, 5vw, 5.5rem) !important;
  }

  body:has(.home-photo-hero) .home-piece {
    width: min(1240px, calc(100% - clamp(72px, 8vw, 128px))) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  /* About: one intentional two-column editorial block. */
  body:has(.home-photo-hero) .home-framed-content > .home-about-brief {
    width: min(1160px, calc(100% - clamp(80px, 9vw, 144px))) !important;
    margin-inline: auto !important;
    padding: clamp(2.2rem, 3vw, 3.2rem) 0 clamp(2rem, 3vw, 3rem) !important;
  }

  body:has(.home-photo-hero) .home-about-brief__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    column-gap: clamp(3rem, 6vw, 6.5rem) !important;
    row-gap: .9rem !important;
    max-width: none !important;
  }

  body:has(.home-photo-hero) .home-about-brief__eyebrow {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: auto !important;
    margin: 0 0 .25rem !important;
    text-align: left !important;
  }

  body:has(.home-photo-hero) .home-about-brief h2 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: start !important;
    max-width: 7.8em !important;
    margin: 0 !important;
    font-size: clamp(3.4rem, 4.6vw, 5rem) !important;
    line-height: .94 !important;
  }

  body:has(.home-photo-hero) .home-about-brief__link {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    margin: 1rem 0 0 !important;
  }

  body:has(.home-photo-hero) .home-about-brief__portrait {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    width: min(420px, 100%) !important;
    height: clamp(430px, 34vw, 520px) !important;
    max-width: 420px !important;
    justify-self: end !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    transform: none !important;
  }

  body:has(.home-photo-hero) .home-about-brief__portrait img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Section dividers become pauses, not large empty zones. */
  body:has(.home-photo-hero) .home-mahjong-divider {
    width: min(220px, 18vw) !important;
    margin: clamp(2.25rem, 3.3vw, 3.25rem) auto !important;
  }

  body:has(.home-photo-hero) .home-framed-content > .home-about-brief + .home-mahjong-divider {
    margin-top: clamp(1.7rem, 2.4vw, 2.4rem) !important;
    margin-bottom: clamp(2.25rem, 3.3vw, 3.25rem) !important;
  }

  body:has(.home-photo-hero) .home-tile-flow > .home-piece + .home-mahjong-divider {
    margin-top: clamp(2.6rem, 3.6vw, 3.6rem) !important;
    margin-bottom: clamp(2.6rem, 3.6vw, 3.6rem) !important;
  }

  /* How it works: one centered heading and one aligned three-column row. */
  body:has(.home-photo-hero) .home-piece--steps {
    padding-top: .35rem !important;
    padding-bottom: .45rem !important;
  }

  body:has(.home-photo-hero) .home-piece--steps .field-heading,
  body:has(.home-photo-hero) .field-heading--centered {
    width: min(760px, 100%) !important;
    margin: 0 auto clamp(2rem, 2.8vw, 2.8rem) !important;
    text-align: center !important;
  }

  body:has(.home-photo-hero) .home-piece--steps .field-heading h2,
  body:has(.home-photo-hero) .field-heading--centered h2 {
    max-width: 10em !important;
    margin-inline: auto !important;
    font-size: clamp(3.3rem, 4.35vw, 4.8rem) !important;
    line-height: .95 !important;
  }

  body:has(.home-photo-hero) .step-piece-stack {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1.25rem, 2vw, 2rem) !important;
    align-items: stretch !important;
    margin: 0 !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step,
  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(1),
  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(2),
  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(3) {
    grid-column: auto !important;
    width: 100% !important;
    min-height: 176px !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 1rem !important;
    padding: clamp(1.35rem, 1.8vw, 1.7rem) !important;
    transform: none !important;
  }

  body:has(.home-photo-hero) .mahjong-step h3 {
    font-size: clamp(1.85rem, 2.05vw, 2.35rem) !important;
    line-height: 1.02 !important;
  }

  body:has(.home-photo-hero) .mahjong-step p {
    font-size: .96rem !important;
    line-height: 1.5 !important;
  }

  /* Everything included: centered, balanced two-column tile with no lateral drift. */
  body:has(.home-photo-hero) .home-piece--included .content-tile--ledger {
    display: grid !important;
    width: min(1120px, 100%) !important;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
    align-items: center !important;
    gap: clamp(2.5rem, 4vw, 4.5rem) !important;
    margin: 0 auto !important;
    padding: clamp(2.25rem, 3vw, 3.25rem) !important;
  }

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

  body:has(.home-photo-hero) .home-piece--included .ledger-heading h2 {
    margin-bottom: 0 !important;
    font-size: clamp(3rem, 3.8vw, 4.25rem) !important;
  }

  body:has(.home-photo-hero) .home-piece--included .porcelain-ledger {
    width: 100% !important;
    margin: 0 !important;
  }

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

  /* Final invitation: centered and compact enough to read as a destination. */
  body:has(.home-photo-hero) .home-piece--invite .content-tile--invitation {
    width: min(960px, 100%) !important;
    margin-inline: auto !important;
    padding: clamp(2.6rem, 4vw, 3.8rem) clamp(2rem, 4vw, 4rem) !important;
    text-align: center !important;
  }

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

  body:has(.home-photo-hero) .home-piece--invite .physical-cta {
    margin-top: 1.5rem !important;
  }

  body:has(.home-photo-hero) .home-piece--signoff {
    width: min(960px, calc(100% - 80px)) !important;
    margin: clamp(2.8rem, 4vw, 4rem) auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
    color: #174b8f !important;
  }

  body:has(.home-photo-hero) .home-piece--signoff p {
    margin: 0 !important;
    font-size: clamp(1.8rem, 2.6vw, 2.5rem) !important;
  }
}

/* Compact desktop still uses the same composition; only scale tightens. */
@media (min-width: 981px) and (max-width: 1180px) {
  body:has(.home-photo-hero) .home-framed-content > .home-about-brief {
    width: calc(100% - 72px) !important;
  }

  body:has(.home-photo-hero) .home-about-brief__inner {
    grid-template-columns: minmax(0, 1fr) minmax(290px, .7fr) !important;
    column-gap: 2.5rem !important;
  }

  body:has(.home-photo-hero) .home-about-brief__portrait {
    width: min(360px, 100%) !important;
    height: 440px !important;
  }

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

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

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step,
  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(1),
  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(2),
  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(3) {
    min-height: 165px !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: .8rem !important;
    padding: 1.2rem !important;
  }

  body:has(.home-photo-hero) .mahjong-step__number {
    width: 42px !important;
    font-size: 1.1rem !important;
  }

  body:has(.home-photo-hero) .mahjong-step h3 {
    font-size: clamp(1.55rem, 2.2vw, 1.9rem) !important;
  }

  body:has(.home-photo-hero) .mahjong-step p {
    font-size: .88rem !important;
  }

  body:has(.home-photo-hero) .home-piece--included .content-tile--ledger {
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important;
    gap: 2rem !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/home-tablet-final.css */
/* =========================================================
   SMALL TOWN MAHJ — TABLET / HALF-WINDOW HOMEPAGE AUTHORITY
   681–980px previously sat between the approved phone treatment and the
   desktop system. This layer gives that range its own intentional composition
   so browser split-screen, tablets, and desktop zoom never inherit a squeezed
   desktop hero or overly dense content columns.
   ========================================================= */

@media (min-width: 681px) and (max-width: 980px) {
  /* -------------------------------------------------------
     HERO — one full photographic field, copy over lower-left.
     This mirrors the approved visual language at both ends of the responsive
     system instead of reverting to the old split/Polaroid-era layout.
     ------------------------------------------------------- */
  body:has(.home-photo-hero) .home-photo-hero {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: #dfe8ee !important;
    box-sizing: border-box !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__grid {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    min-height: clamp(570px, 72vw, 700px) !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero {
    position: relative !important;
    z-index: 1 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #dfe8ee !important;
    box-shadow: none !important;
  }

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

  body:has(.home-photo-hero) .shuffle-photo {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transform-origin: center center !important;
    filter: none !important;
    pointer-events: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: none !important;
    transform: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__image::after {
    display: none !important;
    content: none !important;
  }

  body:has(.home-photo-hero) .shuffle-photo__asset {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero::after {
    position: absolute !important;
    z-index: 8 !important;
    inset: 0 !important;
    display: block !important;
    content: '' !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg,
        rgba(3,27,63,.48) 0%,
        rgba(3,27,63,.31) 30%,
        rgba(3,27,63,.09) 62%,
        rgba(3,27,63,0) 88%),
      linear-gradient(0deg,
        rgba(3,27,63,.38) 0%,
        rgba(3,27,63,.12) 38%,
        rgba(3,27,63,0) 67%) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    position: relative !important;
    z-index: 12 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    width: min(760px, 86%) !important;
    max-width: none !important;
    min-height: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    align-self: stretch !important;
    justify-self: start !important;
    padding: clamp(2.7rem, 6vw, 4rem) clamp(2.2rem, 5vw, 3.5rem) !important;
    transform: none !important;
    text-align: left !important;
    pointer-events: none !important;
    box-sizing: border-box !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: 8em !important;
    margin: 0 !important;
    color: #fffaf1 !important;
    font-size: clamp(3.5rem, 7.4vw, 5rem) !important;
    line-height: .9 !important;
    letter-spacing: -.038em !important;
    -webkit-text-stroke: 1px rgba(8,47,103,.88) !important;
    paint-order: stroke fill !important;
    text-shadow: 0 2px 5px rgba(3,24,58,.2) !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: flex-start !important;
    margin: 1.25rem 0 0 !important;
    pointer-events: auto !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__cta {
    min-height: 48px !important;
    padding-inline: 1.15rem !important;
    font-size: .64rem !important;
    letter-spacing: .11em !important;
  }

  /* One photograph at rest; keep the existing dissolve behavior. */
  body:has(.home-photo-hero) .shuffle-photo[data-position="0"] {
    z-index: 2 !important;
    opacity: 1 !important;
  }

  body:has(.home-photo-hero) .shuffle-photo[data-position="1"],
  body:has(.home-photo-hero) .shuffle-photo[data-position="2"],
  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"] {
    z-index: 1 !important;
    opacity: 0 !important;
  }

  body:has(.home-photo-hero) .shuffle-photo.is-outgoing {
    z-index: 20 !important;
    opacity: 1 !important;
  }

  body:has(.home-photo-hero) .shuffle-photo.is-incoming {
    z-index: 21 !important;
    opacity: 0 !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero.is-dissolving .shuffle-photo.is-incoming {
    opacity: 1 !important;
  }

  body:has(.home-photo-hero) .photo-shuffle-hero.is-dissolving .shuffle-photo.is-outgoing {
    opacity: 1 !important;
  }

  /* -------------------------------------------------------
     LOWER HOMEPAGE — deliberate tablet rhythm.
     ------------------------------------------------------- */
  body:has(.home-photo-hero) .home-framed-content > .home-about-brief {
    width: min(760px, calc(100% - clamp(56px, 8vw, 88px))) !important;
    margin-inline: auto !important;
    padding-top: clamp(3.2rem, 5.5vw, 4.4rem) !important;
    padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem) !important;
  }

  /* Tablet About is intentionally one centered editorial column. Keeping it
     single-column across the entire 681–980px range prevents the heading and
     founder portrait from drifting onto separate visual axes. */
  body:has(.home-photo-hero) .home-about-brief__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    row-gap: 0 !important;
    justify-items: center !important;
    align-items: start !important;
    max-width: none !important;
  }

  body:has(.home-photo-hero) .home-about-brief__eyebrow {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: auto !important;
    margin: 0 0 .8rem !important;
    text-align: center !important;
  }

  body:has(.home-photo-hero) .home-about-brief h2 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    max-width: 8.5em !important;
    margin: 0 auto clamp(2rem, 4vw, 2.8rem) !important;
    font-size: clamp(3rem, 6vw, 4.15rem) !important;
    line-height: .95 !important;
    text-align: center !important;
  }

  body:has(.home-photo-hero) .home-about-brief__portrait {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: min(560px, 82vw) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 5 !important;
    justify-self: center !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    transform: none !important;
  }

  body:has(.home-photo-hero) .home-about-brief__portrait img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 42% !important;
  }

  body:has(.home-photo-hero) .home-about-brief__link {
    grid-column: 1 !important;
    grid-row: 4 !important;
    justify-self: center !important;
    margin: clamp(1.7rem, 3vw, 2.2rem) auto 0 !important;
  }

  body:has(.home-photo-hero) .home-tile-flow {
    width: calc(100% - clamp(42px, 7vw, 72px)) !important;
    padding-bottom: 4.5rem !important;
  }

  body:has(.home-photo-hero) .home-piece + .home-piece {
    margin-top: clamp(3.6rem, 6vw, 5rem) !important;
  }

  body:has(.home-photo-hero) .field-heading,
  body:has(.home-photo-hero) .field-heading--centered {
    width: min(680px, 100%) !important;
    margin: 0 auto 1.8rem !important;
    text-align: center !important;
  }

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

  body:has(.home-photo-hero) .step-piece-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: min(720px, 100%) !important;
    margin-inline: auto !important;
  }

  body:has(.home-photo-hero) .step-piece-stack .mahjong-step,
  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(1),
  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(2),
  body:has(.home-photo-hero) .step-piece-stack .mahjong-step:nth-child(3) {
    grid-column: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    transform: none !important;
    padding: 1.35rem 1.5rem !important;
  }

  body:has(.home-photo-hero) .home-piece--included .content-tile--ledger {
    width: min(760px, 100%) !important;
    margin-inline: auto !important;
  }

  body:has(.home-photo-hero) .home-piece--invite .content-tile--invitation {
    width: min(760px, 100%) !important;
    margin-inline: auto !important;
  }

  body:has(.home-photo-hero) .home-mahjong-divider {
    width: min(210px, 25vw) !important;
    margin-top: 2.6rem !important;
    margin-bottom: 2.6rem !important;
  }

  body:has(.home-photo-hero) .home-piece--signoff {
    width: min(760px, calc(100% - 40px)) !important;
    margin-inline: auto !important;
    text-align: center !important;
  }
}

@media (min-width: 681px) and (max-width: 780px) {
  body:has(.home-photo-hero) .home-photo-hero__grid {
    min-height: 590px !important;
  }

  body:has(.home-photo-hero) .home-photo-hero__copy {
    width: 92% !important;
    padding: 2.5rem 2rem 3rem !important;
  }

  body:has(.home-photo-hero) .home-photo-hero h1 {
    font-size: clamp(3.15rem, 8vw, 4.1rem) !important;
  }

  body:has(.home-photo-hero) .home-framed-content > .home-about-brief {
    width: calc(100% - 48px) !important;
  }

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

  body:has(.home-photo-hero) .home-about-brief__portrait {
    width: min(500px, 88vw) !important;
  }
}


/* Source: /styles/home-experiences.css */
/* =========================================================
   SMALL TOWN MAHJ — LEARN / PLAY / GATHER
   Service architecture integrated as objects on the tabletop.
   ========================================================= */

.home-photo-hero__service-line {
  max-width: 30rem;
  margin: 1.15rem 0 0;
  color: rgba(255, 253, 248, .9);
  font-family: var(--sans);
  font-size: clamp(.92rem, 1.35vw, 1.08rem);
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.55;
  text-shadow: 0 2px 12px rgba(2, 20, 50, .55);
}

.home-experiences {
  scroll-margin-top: 118px;
  width: min(1180px, calc(100% - clamp(44px, 7vw, 92px)));
  margin-inline: auto;
  padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(3.8rem, 7vw, 6.5rem);
}

.home-experiences__heading {
  width: min(760px, 100%);
  margin: 0 auto clamp(2.2rem, 5vw, 4rem);
  text-align: center;
}

.home-experiences__eyebrow,
.availability-page__eyebrow,
.public-schedule__eyebrow,
.private-availability__eyebrow {
  margin: 0 0 .85rem;
  color: var(--paint-blue, var(--blue));
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.home-experiences__heading h2 {
  margin: 0 0 1rem;
  color: var(--table-cobalt-deep, var(--blue-deep));
  font-size: clamp(3rem, 6vw, 5.7rem);
  line-height: .92;
}

.home-experiences__heading > p:last-child {
  max-width: 42rem;
  margin: 0 auto;
  color: #58687b;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.7;
}

.mahj-experience-rack {
  position: relative;
  display: grid;
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.65rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 clamp(.2rem, 1vw, .8rem) 1.4rem;
}

.mahj-experience-rack__rail {
  position: absolute;
  z-index: 0;
  right: -.5rem;
  bottom: .15rem;
  left: -.5rem;
  height: 1.15rem;
  border: 1px solid #16375f;
  border-radius: 3px 3px 9px 9px;
  background: linear-gradient(180deg, #4f78a7, #0b2f61 68%, #061c42);
  box-shadow: 0 8px 15px rgba(5, 25, 54, .25), inset 0 2px rgba(255, 255, 255, .2);
}

.mahj-experience {
  --experience-accent: #5d91c4;
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1.5px solid rgba(18, 75, 143, .66);
  border-radius: 13px 13px 8px 8px;
  background:
    linear-gradient(112deg, transparent 0 22%, rgba(255, 255, 255, .72) 29%, transparent 38%),
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--experience-accent) 15%, transparent), transparent 34%),
    linear-gradient(180deg, #fffef9, #f4eadb);
  box-shadow:
    0 7px 0 #c8b79e,
    0 12px 20px rgba(5, 27, 62, .17),
    inset 0 0 0 5px rgba(255, 255, 255, .42);
  padding: clamp(1.35rem, 2.5vw, 2rem);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.mahj-experience:nth-child(2) {
  --experience-accent: #e98b73;
  transform: translateY(.8rem) rotate(.2deg);
}

.mahj-experience--featured {
  --experience-accent: #e8952d;
  border-color: rgba(196, 100, 37, .68);
  background:
    linear-gradient(112deg, transparent 0 22%, rgba(255, 255, 255, .72) 29%, transparent 38%),
    radial-gradient(circle at 88% 12%, rgba(235, 140, 120, .2), transparent 32%),
    radial-gradient(circle at 12% 88%, rgba(46, 111, 85, .12), transparent 34%),
    linear-gradient(180deg, #fffdf6, #f6e6d6);
  transform: translateY(-.35rem) rotate(-.18deg);
}

.mahj-experience:hover {
  transform: translateY(-.35rem);
  box-shadow: 0 9px 0 #c8b79e, 0 19px 28px rgba(5, 27, 62, .2), inset 0 0 0 5px rgba(255, 255, 255, .48);
}

.mahj-experience:nth-child(2):hover { transform: translateY(.4rem) rotate(0); }
.mahj-experience--featured:hover { transform: translateY(-.7rem) rotate(0); }

.mahj-experience__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.mahj-experience__number {
  color: var(--experience-accent);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  line-height: .8;
}

.mahj-experience__mode {
  border: 1px solid color-mix(in srgb, var(--experience-accent) 56%, white);
  border-radius: 999px;
  color: #183d6d;
  padding: .38rem .68rem .32rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.mahj-experience h3 {
  margin: 0;
  color: var(--table-cobalt-deep, var(--blue-deep));
  font-size: clamp(2rem, 3.1vw, 2.85rem);
  line-height: .95;
}

.mahj-experience__subtitle {
  margin: .6rem 0 0;
  color: #c95f4f;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mahj-experience__tagline {
  margin: 1.35rem 0 .5rem;
  color: #173f74;
  font-family: var(--serif);
  font-size: 1.28rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.2;
}

.mahj-experience__copy > p:last-child {
  margin: 0;
  color: #536277;
  font-size: .94rem;
  line-height: 1.65;
}

.mahj-experience__details {
  margin: 1.35rem 0 1.1rem;
  border-top: 1px solid rgba(18, 75, 143, .16);
  border-bottom: 1px solid rgba(18, 75, 143, .16);
  padding: .85rem 0;
}

.mahj-experience__details summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  color: #163f75;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .11em;
  list-style: none;
  text-transform: uppercase;
}

.mahj-experience__details summary::-webkit-details-marker { display: none; }
.mahj-experience__details summary::after { content: '+'; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.mahj-experience__details[open] summary::after { content: '−'; }

.mahj-experience__details dl,
.mahj-experience__details dd { margin: 0; }

.mahj-experience__details dl {
  display: grid;
  gap: .85rem;
  padding: .45rem 0 .35rem;
}

.mahj-experience__details dt {
  color: #bf5e45;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mahj-experience__details dd {
  margin-top: .22rem;
  color: #596779;
  font-size: .86rem;
  line-height: 1.55;
}

.mahj-experience__cta {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  gap: .55rem;
  margin-top: auto;
  color: #103d78;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
}

.mahj-experience__cta span { transition: transform 180ms ease; }
.mahj-experience__cta:hover span { transform: translateX(.3rem); }

.home-experiences__progression {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.75rem, 2vw, 1.4rem);
  margin: 2.2rem 0 0;
  color: #143f75;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.home-experiences__progression i {
  color: #d97b55;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: normal;
}

.upcoming-table-tile,
.private-mahj-story {
  width: min(1060px, 92%);
  margin-inline: auto;
}

.upcoming-table-tile {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
}

.upcoming-table-tile__markers {
  display: grid;
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.upcoming-table-tile__markers li {
  display: grid;
  min-height: 78px;
  align-items: center;
  gap: .1rem .75rem;
  grid-template-columns: 46px minmax(0, 1fr);
  border: 1px solid rgba(18, 75, 143, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .42);
  padding: .75rem 1rem;
}

.upcoming-table-tile__markers span {
  grid-row: 1 / 3;
  color: #d9795e;
  font-family: var(--serif);
  font-size: 1.7rem;
}

.upcoming-table-tile__markers strong { color: #133e76; font-family: var(--serif); font-size: 1.12rem; }
.upcoming-table-tile__markers small { color: #687587; font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.private-mahj-story {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr);
  border: 1.5px solid rgba(18, 75, 143, .58);
  border-radius: 22px 18px 24px 17px;
  background:
    radial-gradient(circle at 87% 14%, rgba(236, 130, 110, .19), transparent 28%),
    radial-gradient(circle at 78% 82%, rgba(73, 123, 91, .13), transparent 32%),
    linear-gradient(145deg, #fffdf5, #f3e6d5);
  box-shadow: 0 8px 0 #c8b59b, 0 18px 35px rgba(5, 26, 60, .2), inset 0 0 0 6px rgba(255, 255, 255, .38);
  padding: clamp(2rem, 5vw, 4.5rem);
}

.private-mahj-story h2 { margin-bottom: 1.2rem; font-size: clamp(3rem, 5vw, 5rem); }
.private-mahj-story__copy > p:not(.tile-kicker) { max-width: 38rem; color: #536277; font-size: 1rem; line-height: 1.7; }

.private-mahj-story__place-setting {
  position: relative;
  min-height: 330px;
}

.place-tile {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(18, 75, 143, .62);
  border-radius: 9px;
  background: linear-gradient(145deg, #fffef9, #efe3d2);
  box-shadow: 0 7px 0 #c7b59c, 0 14px 22px rgba(5, 25, 55, .18), inset 0 0 0 4px rgba(255, 255, 255, .5);
  color: #16467f;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
}

.place-tile--one { top: 7%; left: 8%; width: 112px; height: 142px; transform: rotate(-7deg); }
.place-tile--two { top: 25%; right: 5%; width: 118px; height: 150px; color: #d26954; transform: rotate(6deg); }
.place-tile--three { bottom: 3%; left: 23%; width: 150px; height: 118px; color: #3f7451; transform: rotate(-1deg); }

@media (max-width: 980px) {
  .home-experiences { width: calc(100% - clamp(42px, 7vw, 72px)); padding-top: 4.2rem; }
  .mahj-experience-rack { grid-template-columns: 1fr; width: min(720px, 100%); margin-inline: auto; gap: 1rem; padding-bottom: 1.15rem; }
  .mahj-experience:nth-child(2),
  .mahj-experience--featured { transform: none; }
  .mahj-experience-rack__rail { right: -.3rem; left: -.3rem; }
  .upcoming-table-tile,
  .private-mahj-story { width: min(760px, 100%); }
  .upcoming-table-tile { grid-template-columns: 1fr; }
  .private-mahj-story { grid-template-columns: 1fr; }
  .private-mahj-story__place-setting { min-height: 255px; width: min(360px, 100%); margin-inline: auto; }
  .place-tile--one { top: 2%; }
  .place-tile--two { top: 9%; }
}

@media (max-width: 680px) {
  .home-photo-hero__service-line {
    max-width: 24rem;
    margin: .8rem auto 0;
    font-size: .84rem;
    line-height: 1.45;
    text-align: center;
  }

  .home-experiences { width: calc(100% - 34px); padding: 3.7rem 0 3.2rem; }
  .home-experiences__heading { margin-bottom: 1.8rem; }
  .home-experiences__heading h2 { font-size: clamp(2.65rem, 12vw, 3.7rem); }
  .home-experiences__heading > p:last-child { font-size: .94rem; line-height: 1.6; }
  .mahj-experience { border-radius: 11px 11px 7px 7px; padding: 1.35rem 1.2rem; }
  .mahj-experience__topline { margin-bottom: 1.1rem; }
  .mahj-experience h3 { font-size: clamp(2rem, 10vw, 2.6rem); }
  .mahj-experience__copy > p:last-child { font-size: .9rem; }
  .home-experiences__progression { gap: .55rem; font-size: .75rem; letter-spacing: .1em; }
  .upcoming-table-tile { width: 92%; gap: 1.65rem; }
  .private-mahj-story { width: 94%; gap: 1.2rem; border-radius: 17px; padding: 1.7rem 1.35rem 2rem; }
  .private-mahj-story h2 { font-size: clamp(2.5rem, 11vw, 3.35rem); }
  .private-mahj-story__place-setting { min-height: 220px; }
  .place-tile { font-size: 1rem; }
  .place-tile--one { width: 94px; height: 120px; }
  .place-tile--two { width: 98px; height: 126px; }
  .place-tile--three { width: 126px; height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .mahj-experience,
  .mahj-experience__cta span { transition: none; }
}


/* Source: /styles/home-public-events.css */
/* =========================================================
   SMALL TOWN MAHJ — UPCOMING PUBLIC EVENTS
   Homepage-only public event board with distinct photo cards.
   ========================================================= */

.home-piece--public-events {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.public-events-board {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(18, 75, 143, .28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 9% 10%, rgba(73, 127, 177, .1), transparent 28%),
    radial-gradient(circle at 94% 90%, rgba(224, 127, 90, .1), transparent 28%),
    linear-gradient(145deg, #fffef9, #f7efe3);
  box-shadow: 0 7px 0 rgba(190, 172, 145, .78), 0 14px 28px rgba(8, 36, 72, .1);
  padding: clamp(1.7rem, 4.5vw, 3.4rem);
}

.public-events-board__heading {
  max-width: 720px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.2rem);
  text-align: center;
}

.public-events-board__heading h2 {
  margin: .15rem 0 .65rem;
  color: var(--blue-deep);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  line-height: .98;
}

.public-events-board__heading > p:last-child {
  max-width: 38rem;
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.65;
}

.public-events-board__list {
  display: grid;
  gap: clamp(1.15rem, 2.5vw, 1.75rem);
}

.public-events-board__empty {
  margin: 0;
  border-top: 1px solid rgba(18, 75, 143, .16);
  padding: clamp(1.4rem, 3vw, 2.1rem) 1rem .25rem;
  color: #52677c;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-style: italic;
  line-height: 1.55;
  text-align: center;
}

.public-event-card {
  display: grid;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(18, 75, 143, .2);
  border-radius: 15px;
  background: rgba(255, 253, 248, .96);
  box-shadow: 0 8px 22px rgba(18, 56, 102, .07);
  padding: clamp(.85rem, 2vw, 1.15rem);
}

/*
 * Public-event artwork is often a complete flyer. Never crop it on the
 * homepage: preserve the source image's natural aspect ratio at every size.
 */
.public-events-board .public-event-card__image {
  display: block;
  align-self: start;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible;
  aspect-ratio: auto !important;
  border: 1px solid rgba(18, 56, 102, .12);
  border-radius: 11px;
  background: #edf3f8;
}

.public-events-board .public-event-card__image img {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

.public-event-card__content {
  display: grid;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.45rem);
  grid-template-columns: minmax(135px, .34fr) minmax(0, 1fr) minmax(145px, .34fr);
}

.public-event-card__date {
  color: var(--blue-deep);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 600;
  line-height: 1.1;
}

.public-event-card__date span {
  display: block;
  margin-top: .45rem;
  color: #7f8b98;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.public-event-card__type {
  margin: 0 0 .35rem;
  color: #c76652;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.public-event-card__body h3 {
  margin: 0 0 .35rem;
  color: var(--blue-deep);
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  line-height: 1.05;
}

.public-event-card__place,
.public-event-card__description {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.5;
}

.public-event-card__place {
  color: #334f6e;
  font-weight: 700;
}

.public-event-card__description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.public-event-card__action {
  display: grid;
  justify-items: end;
  gap: .7rem;
  text-align: right;
}

.public-event-card__action p {
  margin: 0;
}

.public-event-card__action p span {
  display: block;
  color: #7a8795;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.public-event-card__action p strong {
  display: block;
  margin-top: .18rem;
  color: var(--blue-deep);
  font-family: var(--serif);
  font-size: 1.3rem;
}

.public-event-card__action .physical-cta {
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .public-event-card__content {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .public-event-card__action {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: flex-start;
    gap: .8rem 1.25rem;
    text-align: left;
  }
}

@media (max-width: 680px) {
  .public-event-card {
    grid-template-columns: 1fr;
  }

  .public-events-board .public-event-card__image {
    width: min(100%, 420px);
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .public-events-board {
    border-radius: 9px;
    padding: 1.45rem 1.1rem;
  }

  .public-events-board__heading h2 {
    font-size: clamp(2.35rem, 11vw, 3rem);
  }

  .public-event-card {
    gap: .95rem;
    border-radius: 12px;
    padding: .8rem;
  }

  .public-events-board .public-event-card__image {
    width: 100%;
  }
}


/* 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
   Desktop uses a compact two-column close: invitation/navigation at left,
   official crest at right, then one quiet legal/tagline row. Mobile retains
   the approved stacked treatment below 760px.
   ========================================================= */

.site-footer {
  position: relative;
  overflow: hidden;
  background: #062e68 !important;
  color: #fffaf1 !important;
}

.site-footer .site-footer__top {
  position: relative !important;
  display: grid !important;
  width: min(1320px, calc(100% - clamp(56px, 8vw, 112px))) !important;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 18vw, 250px) !important;
  align-items: center !important;
  gap: clamp(3rem, 7vw, 8rem) !important;
  margin: 0 auto !important;
  padding: clamp(2.2rem, 3.6vw, 3.1rem) 0 clamp(2rem, 3.2vw, 2.8rem) !important;
}

/* DOM order places the logo first, so assign explicit grid columns on desktop:
   content is always left and the official crest is always right. */
.site-footer__brand {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
}

.site-footer__brand img {
  display: block !important;
  width: min(100%, 225px) !important;
  height: auto !important;
  margin: 0 auto !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 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 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 .45rem !important;
  color: rgba(255,250,241,.7) !important;
  font-size: .62rem !important;
  letter-spacing: .16em !important;
}

.site-footer__invitation h2 {
  max-width: 12em !important;
  margin: 0 0 .7rem !important;
  color: #fffaf1 !important;
  font-size: clamp(2rem, 2.8vw, 2.85rem) !important;
  line-height: .98 !important;
}

.site-footer__invitation .text-link {
  color: #fffaf1 !important;
  border-bottom-color: #f3a078 !important;
}

.site-footer__nav {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: .55rem clamp(.9rem, 1.5vw, 1.35rem) !important;
  max-width: 640px !important;
  margin: 1.25rem 0 0 !important;
  text-align: left !important;
}

.site-footer__nav a {
  color: #f3a078 !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
  transition: color 160ms ease !important;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: #ffc09f !important;
}

.site-footer .site-footer__bottom {
  display: grid !important;
  width: min(1320px, calc(100% - clamp(56px, 8vw, 112px))) !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 1.5rem !important;
  margin: 0 auto !important;
  padding: 1rem 0 1.15rem !important;
  border-top: 1px solid rgba(255,250,241,.18) !important;
  color: rgba(255,250,241,.7) !important;
  font-size: .72rem !important;
  line-height: 1.25 !important;
  letter-spacing: .01em !important;
}

.site-footer__bottom::after {
  display: none !important;
  content: none !important;
}

.site-footer__legal {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  min-width: 0 !important;
  white-space: normal !important;
  font-size: .76rem !important;
  line-height: 1.25 !important;
}

.site-footer__credit {
  display: inline-flex !important;
  align-items: center !important;
  gap: .24rem !important;
}

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

.site-footer__credit a {
  color: #fffaf1 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(243,160,120,.65) !important;
  padding-bottom: .06rem !important;
}

.site-footer__credit a:hover {
  border-bottom-color: #ffc09f !important;
}

.site-footer__bottom > span:last-child {
  grid-column: 2 !important;
  margin: 0 !important;
  color: rgba(255,250,241,.82) !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Compact desktop keeps the same content-left/logo-right composition without
   letting either side dominate 1024-class viewports. */
@media (min-width: 761px) and (max-width: 1100px) {
  .site-footer .site-footer__top {
    width: calc(100% - 56px) !important;
    grid-template-columns: minmax(0, 1fr) 180px !important;
    gap: 2.5rem !important;
    padding: 2rem 0 1.85rem !important;
  }

  .site-footer__brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .site-footer__content {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .site-footer__brand img {
    width: 175px !important;
  }

  .site-footer__invitation h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.35rem) !important;
  }

  .site-footer__nav {
    gap: .5rem .9rem !important;
    margin-top: 1rem !important;
  }

  .site-footer__nav a {
    font-size: .7rem !important;
  }

  .site-footer .site-footer__bottom {
    width: calc(100% - 56px) !important;
  }
}

@media (max-width: 760px) {
  .site-footer .site-footer__top {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding-top: 1.75rem !important;
    padding-right: 146px !important;
    padding-bottom: 3rem !important;
    padding-left: 24px !important;
  }

  .site-footer__brand {
    position: absolute !important;
    right: -4px !important;
    bottom: 1rem !important;
    display: block !important;
    width: auto !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 {
    color: rgba(255,250,241,.82) !important;
    font-size: .72rem !important;
  }

  .site-footer .site-footer__bottom {
    width: calc(100% - 40px) !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__legal {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .28rem !important;
    white-space: normal !important;
    text-align: left !important;
    font-size: .68rem !important;
    line-height: 1.25 !important;
  }

  .site-footer__credit {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  .site-footer__bottom > span:last-child {
    grid-column: 2 !important;
  }
}

@media (max-width: 430px) {
  .site-footer .site-footer__top {
    padding-right: 122px !important;
    padding-bottom: 2.7rem !important;
    padding-left: 20px !important;
  }

  .site-footer__brand img {
    width: 114px !important;
  }

  .site-footer__nav {
    gap: .45rem .75rem !important;
  }

  .site-footer .site-footer__bottom {
    width: calc(100% - 32px) !important;
    gap: .35rem !important;
    font-size: .45rem !important;
  }

  .site-footer__legal {
    font-size: .62rem !important;
  }
}


/* Source: /styles/header-half-crest.css */
/* =========================================================
   SMALL TOWN MAHJ — FINAL HEADER ALIGNMENT
   Mobile/tablet retain the approved centered-crest composition.
   Desktop keeps BOOK at left, centers the crest, and places the full
   navigation row to the right in the brand's warm orange/coral.
   Loaded late as the final authority for shared header geometry.
   ========================================================= */

: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 may begin immediately beneath the cobalt header. */
.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 160px centered crest hangs roughly half its height below the header.
       Reserve that overhang plus a small breathing buffer on every interior
       page so headings and controls can never sit beneath the logo. */
    --site-header-logo-clearance: 92px;
    --desktop-nav-gap: clamp(.8rem, 1.15vw, 1.4rem);
    --desktop-header-inset: clamp(34px, 3vw, 58px);
  }

  /* The official crest is deliberately larger on desktop. Its midpoint sits
     exactly on the bottom edge of the 79px header: 79px - (160px / 2) = -1px. */
  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    top: -1px !important;
    right: auto !important;
    left: 50% !important;
    width: 160px !important;
    max-width: 160px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    transform-origin: 50% 50% !important;
  }

  .site-header.mat-header .site-header__inner,
  .site-header.mat-header[data-scrolled] .site-header__inner {
    width: 100% !important;
    max-width: 1760px !important;
    margin-inline: auto !important;
  }

  .header-book-tile,
  .site-header.mat-header .nav-toggle,
  .site-header.mat-header[data-scrolled] .nav-toggle {
    top: 15px !important;
  }

  /* Pull the controls away from the viewport edges so the cobalt header reads
     as a composed frame around the centered crest rather than edge-pinned UI. */
  .header-book-tile {
    left: var(--desktop-header-inset) !important;
  }

  /* Four desktop links become one right-aligned row. The two existing UL
     groups remain intact in the DOM so <=980px menu behavior is untouched. */
  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    top: 20px !important;
    right: var(--desktop-header-inset) !important;
    left: calc(50% + 104px) !important;
    width: auto !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--desktop-nav-gap) !important;
    margin: 0 !important;
  }

  .site-header.mat-header .site-nav__group {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--desktop-nav-gap) !important;
    margin: 0 !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: #f3a078 !important;
    font-size: clamp(.63rem, .66vw, .72rem) !important;
    font-weight: 800 !important;
    letter-spacing: .13em !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: #ffc09f !important;
  }

  .site-header.mat-header .site-nav .rack-tile::before {
    background: #f18f72 !important;
  }

  /* Interior page heroes now sit below the reserved crest clearance supplied
     by the shared shell, so this padding can remain focused on page rhythm. */
  .page-hero {
    padding: clamp(2.7rem, 3.8vw, 4.1rem) 0 clamp(3.1rem, 4.5vw, 4.8rem) !important;
  }
}

/* Compact desktop/laptop: preserve the same centered-logo/right-nav structure
   without crowding at 981–1180px. The midpoint of the 140px crest also lands
   on the 79px header edge: 79px - 70px = 9px. */
@media (min-width: 981px) and (max-width: 1180px) {
  :root {
    /* 70px crest overhang + a small safe gap for compact desktop content. */
    --site-header-logo-clearance: 82px;
    --desktop-nav-gap: clamp(.5rem, .82vw, .78rem);
    --desktop-header-inset: clamp(20px, 2.2vw, 28px);
  }

  .site-header.mat-header > .mat-crest,
  .site-header.mat-header[data-scrolled] > .mat-crest {
    top: 9px !important;
    left: 50% !important;
    right: auto !important;
    width: 140px !important;
    max-width: 140px !important;
    transform: translateX(-50%) !important;
  }

  .site-header.mat-header .site-header__inner,
  .site-header.mat-header[data-scrolled] .site-header__inner {
    width: 100% !important;
    max-width: none !important;
  }

  .site-header.mat-header .site-nav,
  .site-header.mat-header[data-scrolled] .site-nav {
    left: calc(50% + 88px) !important;
    right: var(--desktop-header-inset) !important;
  }

  .site-header.mat-header .site-nav .rack-tile {
    font-size: .57rem !important;
    letter-spacing: .075em !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/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.
   On desktop the homepage hero and all homepage content share one continuous
   framed ivory field. Mobile/tablet retain the approved open-photo hero.
   ========================================================= */

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 base behavior remains open so the approved <=980px photo hero is
   unchanged. Desktop below overrides this and makes main the single rail owner. */
body:has(.home-photo-hero) .tabletop-shell > main {
  width: 100% !important;
  padding-inline: 0 !important;
}

@media (min-width: 981px) {
  body:has(.home-photo-hero) .tabletop-shell > main {
    position: relative !important;
    isolation: isolate;
    width: 100% !important;
    padding-inline: var(--site-side-frame) !important;
    box-sizing: border-box !important;
    background: var(--site-paper) !important;
  }

  body:has(.home-photo-hero) .tabletop-shell > main::before,
  body: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:has(.home-photo-hero) .tabletop-shell > main::before {
    left: 0;
    border-right: var(--mat-rule-width) solid var(--mat-porcelain-blue);
  }

  body: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:has(.home-photo-hero) .tabletop-shell > main > * {
    position: relative;
    z-index: 1;
  }
}

/* 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;
  }
}
/* Keep the tile navigation and footer labels legible at compact desktop widths. */
.site-nav .rack-tile,
.header-book-tile,
.site-footer__nav a {
  font-size: .75rem;
}

@media (max-width: 980px) {
  .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: 48px !important;
    font-size: .75rem !important;
  }
}

@media (max-width: 680px) {
  .site-footer__nav a {
    display: flex;
    min-height: 44px;
    align-items: center;
  }
}


/* 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;
  }
}