/* ════════════════════════════════════════════════════════════════
   BURMESE VILLAGE — Tea House & Restaurant · Đà Nẵng
   "A sunlit house on Phạm Hồng Thái": ivory, bamboo gold,
   terracotta breeze blocks and a teal balcony rail.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* The house */
  --ivory:    #FBF5E8;
  --ivory-2:  #F4EAD4;
  --card:     #FFFDF6;
  --line:     rgba(70, 51, 31, .14);

  /* Signboard & blinds */
  --terra:       #C95F35;
  --terra-deep:  #A8492A;
  --terra-soft:  #EBC9B4;
  --bamboo:      #D9A441;
  --bamboo-deep: #A8762A;
  --sun:         #F2BC5B;

  /* Balcony rail */
  --teal:      #3E7C74;
  --teal-deep: #2E5F58;

  /* Teak & ink */
  --ink:      #46331F;
  --ink-soft: #7A6248;
  --teak:     #332516;
  --teak-2:   #241A0F;

  --display: "Fraunces", Georgia, serif;
  --body:    "Be Vietnam Pro", "Helvetica Neue", sans-serif;
  --mm:      "Noto Sans Myanmar", "Myanmar MN", "Myanmar Text", sans-serif;

  --wrap: 1160px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --breeze: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M23 6 L40 23 L23 40 L6 23 Z' fill='none' stroke='%23C95F35' stroke-width='2' opacity='.16'/%3E%3Cpath d='M23 14 L32 23 L23 32 L14 23 Z' fill='none' stroke='%233E7C74' stroke-width='1.6' opacity='.14'/%3E%3C/svg%3E");
}

/* ── Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--body);
  font-size: 1.03rem;
  line-height: 1.68;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
ol, ul { list-style: none; }
i { font-style: normal; }
a { color: inherit; }

::selection { background: var(--bamboo); color: var(--teak-2); }

:focus-visible {
  outline: 2.5px solid var(--terra);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  padding: .6em 1.2em;
  background: var(--terra); color: var(--ivory);
  font-weight: 600; font-size: .85rem;
  text-decoration: none; border-radius: 0 0 8px 8px;
  transition: top .25s ease;
}
.skip:focus { top: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 28px; }

[lang="my"] { font-family: var(--mm); line-height: 1.9; }

/* Type ─────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); line-height: 1.08; font-weight: 560; }

h2 {
  font-size: clamp(1.9rem, 1.15rem + 2.8vw, 3.1rem);
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
h2 br { display: inline; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: var(--terra); border-radius: 2px;
}

.section-lede { color: var(--ink-soft); max-width: 54ch; margin-top: 1rem; }
.section-lede a { color: var(--teal); text-underline-offset: 3px; }
.section-lede b { color: var(--terra-deep); }

/* Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: .92rem; font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  padding: .85em 1.7em;
  border-radius: 999px;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.btn-terra {
  color: #FFF7EA;
  background: linear-gradient(160deg, #DA7448, var(--terra) 55%, var(--terra-deep));
  box-shadow: 0 12px 24px -12px rgba(169, 73, 42, .65);
}
.btn-terra:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(169, 73, 42, .7); }
.btn-ghost {
  color: var(--teal-deep);
  border: 1.6px solid var(--teal);
  background: rgba(62, 124, 116, .06);
}
.btn-ghost:hover { background: rgba(62, 124, 116, .14); transform: translateY(-2px); }
.btn.small { font-size: .84rem; padding: .7em 1.4em; }
.btn:active { transform: translateY(1px) scale(.99); }

/* ── Masthead ─────────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ivory) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead-inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 12px 28px;
  display: flex; align-items: center; gap: 30px;
}

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-sign {
  width: 46px; flex: none;
  display: grid; place-items: center;
  filter: drop-shadow(0 3px 6px rgba(70, 51, 31, .25));
}
.brand-sign svg { width: 46px; height: auto; }
.brand-word strong {
  display: block;
  font-family: var(--display);
  font-size: 1.14rem; font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}
.brand-word small {
  display: block;
  font-size: .72rem; letter-spacing: .04em;
  color: var(--ink-soft);
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav a {
  font-size: .92rem; font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 0;
  background: linear-gradient(var(--terra), var(--terra)) bottom left / 0 2px no-repeat;
  transition: color .22s ease, background-size .28s ease;
}
.nav a:hover { color: var(--terra-deep); background-size: 100% 2px; }
.nav a.nav-cta {
  color: #fff;
  background: var(--teal);
  border-radius: 999px;
  padding: .6em 1.25em;
  font-weight: 600;
}
.nav a.nav-cta:hover { background: var(--teal-deep); color: #fff; }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.burger { display: none; }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 82% -10%, rgba(242, 188, 91, .38), transparent 65%),
    linear-gradient(180deg, #FDF4DE 0%, var(--ivory) 70%);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--noise);
  opacity: .35; mix-blend-mode: multiply; pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: var(--wrap); margin-inline: auto;
  padding: clamp(48px, 7vw, 96px) 28px clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hello {
  font-size: 1.02rem;
  color: var(--terra-deep);
  font-weight: 500;
}
.hello i { opacity: .45; margin-inline: .5em; }
.hello [lang="my"] { font-size: .95rem; }

.hero h1 {
  margin-top: .45em;
  text-wrap: balance;
  font-size: clamp(2.4rem, 1.3rem + 4.2vw, 4rem);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
}
.hero h1 em {
  font-style: italic; font-weight: 500;
  color: var(--terra);
}

.lede {
  margin-top: 1.3rem; max-width: 46ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
  color: var(--ink-soft);
}

.cta-row { margin-top: 2rem; display: flex; gap: 14px; flex-wrap: wrap; }

.hero-art { position: relative; perspective: 1400px; }
.hero-scene {
  position: relative;
  transform: rotateY(-7deg) rotateX(1.5deg);
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.hero-art:hover .hero-scene { transform: rotateY(0deg) rotateX(0deg); }
.hero-building {
  width: 100%; height: auto;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 86%, transparent 86.5%),
    radial-gradient(ellipse 58% 15% at 50% 84.5%, #000 88%, transparent 97%);
  -webkit-mask-repeat: no-repeat;
  mask-image:
    linear-gradient(to bottom, #000 0%, #000 86%, transparent 86.5%),
    radial-gradient(ellipse 58% 15% at 50% 84.5%, #000 88%, transparent 97%);
  mask-repeat: no-repeat;
  user-select: none;
}
.hero-welcome {
  position: absolute;
  left: 50%; bottom: 1.9%;
  width: 35%; height: auto;
  transform: translateX(-50%) translateZ(46px);
  user-select: none;
}
.hero-scene::after { /* contact shadow under the greeters */
  content: "";
  position: absolute;
  left: 50%; bottom: 8.6%;
  width: 22%; height: 2.6%;
  transform: translateX(-50%) translateZ(44px);
  background: radial-gradient(50% 100% at 50% 50%, rgba(51, 37, 22, .5), transparent 70%);
  filter: blur(4px);
}
.hero-art figcaption {
  margin-top: .9rem;
  text-align: center;
  font-size: .84rem; font-style: italic;
  color: var(--ink-soft);
}

/* Hero entrance */
.r1, .r2, .r3, .r4, .r5 {
  opacity: 0;
  animation: rise .8s cubic-bezier(.2, .74, .26, 1) forwards;
}
.r1 { animation-delay: .08s; } .r2 { animation-delay: .18s; }
.r3 { animation-delay: .3s; }  .r4 { animation-delay: .42s; }
.r5 { animation-delay: .54s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ── Ribbon ───────────────────────────────────────────────────── */
.ribbon {
  overflow: hidden;
  background: var(--terra-deep);
  border-block: 3px solid #8F3B20;
  padding: .68em 0;
}
.ribbon-track {
  display: flex; width: max-content;
  animation: ribbon 36s linear infinite;
}
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-track span {
  white-space: nowrap;
  font-size: .95rem; font-weight: 600;
  letter-spacing: .06em;
  color: #FFF3E2;
  padding-right: .5em;
}
.ribbon-track i { font-size: .85rem; opacity: .85; font-weight: 400; }
@keyframes ribbon {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── The house (story) ────────────────────────────────────────── */
.story { padding: clamp(72px, 9vw, 118px) 0; }
.story-head { max-width: 640px; }

.vignettes {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.vignette {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0 24px 26px;
  box-shadow: 0 18px 30px -24px rgba(70, 51, 31, .35);
  transition: transform .28s ease, box-shadow .28s ease;
  overflow: hidden;
}
.vignette:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 40px -24px rgba(70, 51, 31, .45);
}
.v-photo {
  margin: 0 -24px 0;
  border-radius: 18px 18px 0 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
}
.v-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.vignette:hover .v-photo img { transform: scale(1.045); }
.vignette h3 { font-size: 1.32rem; margin: 1.1rem 0 .45em; }
.vignette p { font-size: .92rem; color: var(--ink-soft); }
.vignette em { font-style: italic; color: var(--terra-deep); }

.story-team {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: minmax(0, 56ch) 240px;
  gap: 40px;
  align-items: center;
}
.story-team p { font-size: 1.05rem; color: var(--ink-soft); }
.story-team [lang="my"] {
  display: block; margin-top: .4em;
  color: var(--teal-deep); font-size: .95rem;
}
.team-snap { justify-self: end; }

/* Scrapbook snaps (polaroid-style photos) */
.snap {
  background: #FFFEFA;
  padding: 9px 9px 12px;
  border: 1px solid rgba(70, 51, 31, .12);
  border-radius: 4px;
  box-shadow: 0 14px 26px -14px rgba(70, 51, 31, .45);
  position: relative;
  width: 224px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.snap img {
  width: 100%; height: auto;
  border-radius: 2px;
  display: block;
}
.snap figcaption {
  margin-top: .55em;
  text-align: center;
  font-size: .8rem; font-style: italic;
  color: var(--ink-soft);
}
.snap::before { /* washi tape */
  content: "";
  position: absolute; top: -12px; left: 50%;
  width: 84px; height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(217, 164, 65, .45);
  border-left: 1px dashed rgba(168, 118, 42, .5);
  border-right: 1px dashed rgba(168, 118, 42, .5);
}
.tilt-l { transform: rotate(-2.2deg); }
.tilt-r { transform: rotate(1.8deg); }
.snap:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 22px 34px -16px rgba(70, 51, 31, .5); }

/* ── Memories ─────────────────────────────────────────────────── */
.memories {
  position: relative;
  padding: clamp(72px, 9vw, 118px) 0;
  background:
    linear-gradient(180deg, var(--ivory-2), #F8F0DD 60%, var(--ivory));
}
.memories::before {
  content: ""; position: absolute; inset: 0;
  background: var(--breeze);
  opacity: .5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.memories .wrap { position: relative; }
.mem-head { max-width: 620px; }

.journal {
  margin-top: 3.2rem;
  position: relative;
  display: grid;
  gap: 2.4rem;
  max-width: 880px;
}
.journal::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px;
  width: 2px;
  background: linear-gradient(180deg, var(--bamboo), var(--terra) 60%, var(--terra-soft));
  border-radius: 2px;
}
.entry {
  position: relative;
  padding-left: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 224px;
  gap: 10px 36px;
  align-items: center;
}
.entry .snap { margin-block: 6px; }
.entry::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--card);
  border: 4px solid var(--terra);
  box-shadow: 0 0 0 4px rgba(201, 95, 53, .15);
}
.entry .date {
  display: inline-block;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-deep);
  background: rgba(62, 124, 116, .1);
  border-radius: 999px;
  padding: .3em 1em;
  margin-bottom: .55em;
}
.entry h3 { font-size: 1.5rem; margin-bottom: .35em; }
.entry p { color: var(--ink-soft); max-width: 56ch; }

.guest-card {
  margin-top: 3rem;
  max-width: 720px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 6px solid var(--bamboo);
  border-radius: 16px;
  padding: 30px 34px;
  box-shadow: 0 22px 36px -26px rgba(70, 51, 31, .4);
}
.gc-title {
  font-family: var(--display);
  font-size: 1.28rem; font-weight: 600;
  margin-bottom: .5em;
}
.gc-body { color: var(--ink-soft); }
.gc-body [lang="my"] { color: var(--terra-deep); }

/* ── Rhythm ───────────────────────────────────────────────────── */
.rhythm {
  padding: clamp(72px, 9vw, 118px) 0;
  background: var(--ivory);
}
.sunpath { margin: 2rem 0 0; }
.sunpath svg { width: 100%; height: clamp(80px, 12vw, 150px); }

.daycols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: .6rem;
}
.daycols li {
  border-top: 2.5px solid var(--line);
  padding-top: 18px;
}
.daycols li:nth-child(1) { border-top-color: var(--bamboo); }
.daycols li:nth-child(2) { border-top-color: var(--sun); }
.daycols li:nth-child(3) { border-top-color: var(--terra); }
.daycols li:nth-child(4) { border-top-color: var(--teal); }
.d-time {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--terra-deep);
}
.daycols h3 { font-size: 1.34rem; margin: .45em 0 .4em; }
.daycols p { font-size: .93rem; color: var(--ink-soft); }

/* ── Menu ─────────────────────────────────────────────────────── */
.menu {
  padding: clamp(72px, 9vw, 118px) 0;
  background:
    linear-gradient(180deg, var(--ivory), var(--ivory-2) 30%, var(--ivory));
}
.menu-head { max-width: 640px; margin-bottom: 2.2rem; }

/* From-the-table photo strip */
.table-strip {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 14px 4px 22px;
  margin-bottom: 2.6rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--bamboo) transparent;
}
.table-strip li {
  flex: 0 0 224px;
  scroll-snap-align: start;
}
.table-strip figure {
  background: #FFFEFA;
  padding: 8px 8px 10px;
  border: 1px solid rgba(70, 51, 31, .12);
  border-radius: 4px;
  box-shadow: 0 12px 22px -14px rgba(70, 51, 31, .4);
  transition: transform .3s ease;
}
.table-strip li:nth-child(odd) figure { transform: rotate(-1.4deg); }
.table-strip li:nth-child(even) figure { transform: rotate(1.2deg); }
.table-strip li:hover figure { transform: rotate(0deg) translateY(-4px); }
.table-strip img {
  width: 100%; height: auto;
  border-radius: 2px;
}
.table-strip figcaption {
  margin-top: .5em;
  text-align: center;
  font-size: .78rem; font-style: italic;
  color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Breakfast board */
.board {
  background: var(--card);
  border: 1.6px solid var(--terra-soft);
  border-radius: 22px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 30px 50px -32px rgba(169, 73, 42, .5);
  position: relative;
  overflow: hidden;
}
.board::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px;
  background: repeating-linear-gradient(90deg,
    var(--bamboo) 0 26px, var(--bamboo-deep) 26px 30px);
}
.board header { margin: .6rem 0 1.8rem; }
.board-tag {
  display: inline-block;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: #FFF7EA;
  background: var(--terra-deep);
  border-radius: 999px;
  padding: .38em 1.1em;
  margin-bottom: .8em;
}
.board-tag.light { background: rgba(255, 247, 234, .2); color: #FFF3E2; }
.board h3 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
.board h3 [lang="vi"] {
  display: block;
  font-family: var(--body); font-style: italic; font-weight: 400;
  font-size: .55em; color: var(--ink-soft);
  margin-top: .4em;
}
.board-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 3rem;
}
.board-list p { font-size: .87rem; color: var(--ink-soft); margin-top: .25em; }
.board-foot {
  margin-top: 1.8rem;
  font-size: .85rem; font-style: italic;
  color: var(--ink-soft);
}
.board-foot a { color: var(--teal); text-underline-offset: 3px; }

/* Dish rows (shared) */
.dish { display: flex; align-items: baseline; gap: .5em; }
.dish b {
  font-family: var(--display);
  font-size: 1.12rem; font-weight: 600;
  color: var(--ink);
}
.dish .mm { font-size: .72rem; color: var(--bamboo-deep); white-space: nowrap; }
.dish .dots {
  flex: 1; min-width: 24px;
  border-bottom: 2px dotted rgba(122, 98, 72, .45);
  transform: translateY(-4px);
  transition: border-color .22s ease;
}
.dish data {
  font-weight: 600; font-size: .92rem;
  color: var(--terra-deep);
  white-space: nowrap;
  transition: color .22s ease;
}
li:hover > .dish .dots { border-color: var(--terra); }

/* Everyday book */
.bookgrid {
  margin-top: 2.6rem;
  columns: 2;
  column-gap: 26px;
}
.cat {
  break-inside: avoid;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 28px;
  margin-bottom: 26px;
  box-shadow: 0 16px 28px -24px rgba(70, 51, 31, .35);
}
.cat h3 {
  display: flex; align-items: baseline; gap: .7em;
  font-size: 1.06rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--body);
  color: var(--teal-deep);
  padding-bottom: .8em;
  border-bottom: 2px solid var(--ivory-2);
  margin-bottom: .6em;
}
.cat h3 span {
  font-family: var(--display);
  font-size: .95em;
  color: var(--terra);
}
.mm-h { font-size: .82rem; letter-spacing: 0; text-transform: none; color: var(--bamboo-deep); }
.items li { padding: .75em 0; }
.items li + li { border-top: 1px dashed rgba(122, 98, 72, .22); }
.items p {
  margin-top: .22em;
  font-size: .88rem;
  color: var(--ink-soft);
}
.items .vi { font-size: .8rem; color: var(--teal-deep); }
.items .vi::before { content: "◈ "; font-size: .7em; vertical-align: .2em; color: var(--teal); }

/* Combo strip */
.combo {
  margin-top: 2.4rem;
  background: linear-gradient(150deg, var(--teal), var(--teal-deep));
  border-radius: 22px;
  padding: clamp(30px, 4vw, 48px);
  color: #F2F7F0;
  box-shadow: 0 30px 50px -30px rgba(46, 95, 88, .7);
}
.combo-head h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  color: #FDFBF2;
}
.combo-parts {
  margin-top: 1.8rem;
  display: flex; flex-wrap: wrap;
  gap: 16px 34px;
}
.combo-parts li { display: flex; align-items: center; gap: 12px; }
.combo-parts b {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.05rem;
  color: var(--teal-deep);
  background: var(--sun);
  border-radius: 50%;
}
.combo-parts span { font-size: .95rem; }

/* ── Visit ────────────────────────────────────────────────────── */
.visit {
  position: relative;
  padding: clamp(72px, 9vw, 118px) 0 clamp(80px, 10vw, 130px);
  background: var(--ivory-2);
}
.visit::before {
  content: ""; position: absolute; inset: 0;
  background: var(--breeze);
  opacity: .55;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%);
          mask-image: linear-gradient(180deg, transparent, #000 25%);
}
.visit .wrap { position: relative; }
.visit-head { margin-bottom: 2.6rem; }

/* ── Journey: 5 minutes from the Dragon Bridge ────────────────── */
.journey {
  --j-h: clamp(230px, 26vw, 330px);
  position: relative;
  height: var(--j-h);
  margin: 0 0 3rem;
}
.j-stop { position: absolute; margin: 0; }
.j-stop img { width: 100%; height: auto; }
.j-stop figcaption {
  margin-top: .6rem;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(.8rem, 1.3vw, 1.05rem);
  color: var(--ink);
}
.j-bridge { left: 1%; bottom: 4%; width: 27%; }
.j-bridge img {
  border-radius: 16px;
  border: 5px solid var(--card);
  box-shadow: 0 16px 28px -16px rgba(70, 51, 31, .5);
  transform: rotate(-3deg);
}
.j-home { right: 1%; bottom: 2%; width: 15%; }
.j-home img { filter: drop-shadow(0 10px 14px rgba(70, 51, 31, .25)); }

.j-route {
  position: absolute;
  left: 26%; bottom: 26%;
  /* The SVG is a replaced element: height is set and width is auto, so it sizes
     itself from the viewBox ratio (52% × 600/130 = 2.4 × the journey height) and
     ignores `right`. Cap that at 74% or a short, narrow journey box sends the
     route off the side of the page. */
  width: min(74%, calc(var(--j-h) * 2.4));
  height: 52%;
  overflow: visible;
}
.j-route line {
  stroke: var(--terra-deep);
  stroke-width: 5.5;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}
.j-scooter {
  position: absolute;
  left: 73%; bottom: 32.6%;
  width: 11%;
  transform-origin: 50% 100%;
}
.j-scooter img { width: 100%; height: auto; }
.j-smoke {
  position: absolute;
  left: -18%; bottom: 3%;
  width: 52%; aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
}
.j-smoke i {
  position: absolute;
  right: 0; bottom: 0;
  width: 72%; aspect-ratio: 1.3;
  background:
    radial-gradient(circle at 28% 68%, rgba(255, 253, 246, .96) 0 26%, transparent 28%),
    radial-gradient(circle at 52% 40%, rgba(255, 253, 246, .96) 0 30%, transparent 32%),
    radial-gradient(circle at 74% 66%, rgba(255, 253, 246, .96) 0 24%, transparent 26%),
    radial-gradient(circle at 50% 72%, rgba(255, 253, 246, .96) 0 26%, transparent 28%),
    radial-gradient(circle at 31% 74%, rgba(186, 172, 150, .38) 0 28%, transparent 30%),
    radial-gradient(circle at 55% 46%, rgba(186, 172, 150, .38) 0 33%, transparent 35%),
    radial-gradient(circle at 77% 72%, rgba(186, 172, 150, .38) 0 27%, transparent 29%);
  filter: blur(1px);
}
.j-smoke i:nth-child(2) { width: 56%; }
.j-smoke i:nth-child(3) { width: 42%; }

.j-badge {
  position: absolute;
  left: 45%; top: -4%;
  width: clamp(64px, 8vw, 96px);
  aspect-ratio: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--sun);
  border: 3px solid var(--card);
  border-radius: 50%;
  box-shadow: 0 12px 22px -12px rgba(169, 73, 42, .6);
  transform: rotate(-8deg);
  text-align: center;
  line-height: 1;
}
.j-badge b {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--teak);
}
.j-badge span {
  font-size: clamp(.5rem, .8vw, .66rem);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teak);
}
.j-badge i { font-style: italic; text-transform: none; letter-spacing: 0; }

@media (prefers-reduced-motion: no-preference) {
  .journey.is-playing .j-bridge { animation: j-bridge 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
  .journey.is-playing .j-route { animation: j-route 12s linear infinite; }
  .journey.is-playing .j-route line:nth-child(1) { animation: jdot1 12s ease-out infinite; }
  .journey.is-playing .j-route line:nth-child(2) { animation: jdot2 12s ease-out infinite; }
  .journey.is-playing .j-route line:nth-child(3) { animation: jdot3 12s ease-out infinite; }
  .journey.is-playing .j-route line:nth-child(4) { animation: jdot4 12s ease-out infinite; }
  .journey.is-playing .j-route line:nth-child(5) { animation: jdot5 12s ease-out infinite; }
  .journey.is-playing .j-route line:nth-child(6) { animation: jdot6 12s ease-out infinite; }
  .journey.is-playing .j-route line:nth-child(7) { animation: jdot7 12s ease-out infinite; }
  .journey.is-playing .j-route line:nth-child(8) { animation: jdot8 12s ease-out infinite; }
  .journey.is-playing .j-route line:nth-child(9) { animation: jdot9 12s ease-out infinite; }
  .journey.is-playing .j-route line:nth-child(10) { animation: jdot10 12s ease-out infinite; }
  .journey.is-playing .j-route line:nth-child(11) { animation: jdot11 12s ease-out infinite; }
  .journey.is-playing .j-route line:nth-child(12) { animation: jdot12 12s ease-out infinite; }
  .journey.is-playing .j-route line:nth-child(13) { animation: jdot13 12s ease-out infinite; }
  .journey.is-playing .j-route line:nth-child(14) { animation: jdot14 12s ease-out infinite; }
  .journey.is-playing .j-scooter { animation: j-ride 12s ease-in-out infinite; }
  .journey.is-playing .j-smoke { animation: j-smoke-gate 12s linear infinite; }
  .journey.is-playing .j-smoke i { animation: j-puff 1.5s ease-out infinite; }
  .journey.is-playing .j-smoke i:nth-child(2) { animation-delay: .5s; }
  .journey.is-playing .j-smoke i:nth-child(3) { animation-delay: 1s; }
  .journey.is-playing .j-home { animation: j-home 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
  .journey.is-playing .j-badge { animation: j-badge 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
}

@keyframes j-bridge {
  0% { opacity: 0; transform: scale(.5) rotate(-14deg); }
  5% { opacity: 1; transform: scale(1.06) rotate(-1deg); }
  7%, 90% { opacity: 1; transform: scale(1) rotate(0); }
  96%, 100% { opacity: 0; transform: scale(.94); }
}
@keyframes jdot1 {
  0%, 8.5% { transform: scale(0); }
  10.0% { transform: scale(1.5); }
  11.6%, 100% { transform: scale(1); }
}
@keyframes jdot2 {
  0%, 11.3% { transform: scale(0); }
  12.8% { transform: scale(1.5); }
  14.4%, 100% { transform: scale(1); }
}
@keyframes jdot3 {
  0%, 14.0% { transform: scale(0); }
  15.5% { transform: scale(1.5); }
  17.1%, 100% { transform: scale(1); }
}
@keyframes jdot4 {
  0%, 16.8% { transform: scale(0); }
  18.3% { transform: scale(1.5); }
  19.9%, 100% { transform: scale(1); }
}
@keyframes jdot5 {
  0%, 19.6% { transform: scale(0); }
  21.1% { transform: scale(1.5); }
  22.7%, 100% { transform: scale(1); }
}
@keyframes jdot6 {
  0%, 22.3% { transform: scale(0); }
  23.8% { transform: scale(1.5); }
  25.4%, 100% { transform: scale(1); }
}
@keyframes jdot7 {
  0%, 25.1% { transform: scale(0); }
  26.6% { transform: scale(1.5); }
  28.2%, 100% { transform: scale(1); }
}
@keyframes jdot8 {
  0%, 27.9% { transform: scale(0); }
  29.4% { transform: scale(1.5); }
  31.0%, 100% { transform: scale(1); }
}
@keyframes jdot9 {
  0%, 30.7% { transform: scale(0); }
  32.2% { transform: scale(1.5); }
  33.8%, 100% { transform: scale(1); }
}
@keyframes jdot10 {
  0%, 33.4% { transform: scale(0); }
  34.9% { transform: scale(1.5); }
  36.5%, 100% { transform: scale(1); }
}
@keyframes jdot11 {
  0%, 36.2% { transform: scale(0); }
  37.7% { transform: scale(1.5); }
  39.3%, 100% { transform: scale(1); }
}
@keyframes jdot12 {
  0%, 39.0% { transform: scale(0); }
  40.5% { transform: scale(1.5); }
  42.1%, 100% { transform: scale(1); }
}
@keyframes jdot13 {
  0%, 41.7% { transform: scale(0); }
  43.2% { transform: scale(1.5); }
  44.8%, 100% { transform: scale(1); }
}
@keyframes jdot14 {
  0%, 44.5% { transform: scale(0); }
  46.0% { transform: scale(1.5); }
  47.6%, 100% { transform: scale(1); }
}

@keyframes j-route {
  0%, 90% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes j-smoke-gate {
  0%, 10.5% { opacity: 0; }
  12%, 45% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
@keyframes j-puff {
  0% { transform: translate(0, 0) scale(.15); opacity: 0; }
  14% { opacity: 1; }
  70% { opacity: .95; }
  100% { transform: translate(-150%, -80%) scale(1.2); opacity: 0; }
}
@keyframes j-ride {
  0% { opacity: 0; left: 15.5%; bottom: 24.5%; transform: scale(.14); }
  5% { opacity: 1; left: 15.5%; bottom: 24.5%; transform: scale(.28); }
  7%, 9% { opacity: 1; left: 15.5%; bottom: 24.5%; transform: scale(.25); }
  10.5% { opacity: 1; left: 17%; bottom: 25.5%; transform: scale(.36); animation-timing-function: ease-in; }
  17% { left: 22.5%; bottom: 30.2%; transform: scale(1); animation-timing-function: linear; }
  25% { left: 35.7%; bottom: 49.6%; transform: scale(1); animation-timing-function: linear; }
  32% { left: 50.5%; bottom: 56.3%; transform: scale(1); animation-timing-function: linear; }
  40% { left: 65.2%; bottom: 50.6%; transform: scale(1); animation-timing-function: ease-out; }
  48%, 90% { opacity: 1; left: 73%; bottom: 32.6%; transform: scale(1); }
  94%, 100% { opacity: 0; left: 73%; bottom: 32.6%; transform: scale(1); }
}
@keyframes j-home {
  0%, 46% { opacity: 0; transform: scale(.4) rotate(6deg); }
  52% { opacity: 1; transform: scale(1.08) rotate(-1deg); }
  55%, 90% { opacity: 1; transform: scale(1) rotate(0); }
  96%, 100% { opacity: 0; transform: scale(.94); }
}
@keyframes j-badge {
  0%, 55% { opacity: 0; transform: scale(0) rotate(-30deg); }
  61% { opacity: 1; transform: scale(1.18) rotate(-4deg); }
  64% { opacity: 1; transform: scale(1) rotate(-8deg); }
  74% { transform: scale(1.06) rotate(-6deg); }
  84%, 90% { opacity: 1; transform: scale(1) rotate(-8deg); }
  96%, 100% { opacity: 0; transform: scale(.9) rotate(-8deg); }
}

.visit-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.v-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: 0 22px 36px -26px rgba(70, 51, 31, .4);
  transition: transform .26s ease, box-shadow .26s ease;
}
.v-card:hover { transform: translateY(-4px); box-shadow: 0 30px 44px -26px rgba(70, 51, 31, .5); }
.v-card h3 {
  font-size: .82rem; font-weight: 600;
  font-family: var(--body);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 1rem;
}
.v-big {
  font-family: var(--display);
  font-size: 1.5rem; font-weight: 560; line-height: 1.3;
  margin-bottom: 1.3rem;
}
.v-hours li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: .5em 0;
  border-bottom: 1px dashed rgba(122, 98, 72, .25);
  font-size: .94rem;
}
.v-hours span {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.v-hours b { font-weight: 500; }
.v-foot { margin-top: 1rem; font-size: .84rem; font-style: italic; color: var(--ink-soft); }
.v-contact li + li { margin-top: .4em; }
.v-contact a {
  display: inline-block;
  padding: .35em 0;
  font-size: .95rem;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(var(--terra), var(--terra)) bottom left / 0 1.6px no-repeat;
  transition: background-size .25s ease, color .2s ease;
}
.v-contact a:hover { background-size: 100% 1.6px; color: var(--terra-deep); }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq {
  padding: clamp(64px, 8vw, 100px) 0 clamp(72px, 9vw, 110px);
  background: var(--ivory);
}
.faq h2 { margin-bottom: 2.2rem; }
.faq-list { max-width: 760px; }
.faq-list details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: 0 14px 24px -20px rgba(70, 51, 31, .35);
  overflow: hidden;
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  font-family: var(--display);
  font-size: 1.16rem; font-weight: 600;
  color: var(--ink);
  transition: color .2s ease, background-color .2s ease;
  min-height: 44px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  flex: none;
  width: 30px; height: 30px;
  box-sizing: border-box;
  border: 1.6px solid var(--terra-soft);
  border-radius: 50%;
  background-color: transparent;
  background-image:
    linear-gradient(var(--terra), var(--terra)),
    linear-gradient(var(--terra), var(--terra));
  background-size: 12px 2.4px, 2.4px 12px;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform .25s ease, background-color .25s ease;
}
.faq-list summary:hover { color: var(--terra-deep); }
.faq-list details[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--terra);
  background-image:
    linear-gradient(#FFF7EA, #FFF7EA),
    linear-gradient(#FFF7EA, #FFF7EA);
}
.faq-list details p {
  padding: 0 22px 20px;
  color: var(--ink-soft);
  max-width: 62ch;
}
.faq-list details p b { color: var(--ink); }
.faq-list details a { color: var(--teal); text-underline-offset: 3px; }

/* ── Footer ───────────────────────────────────────────────────── */
.footer {
  background: var(--teak);
  color: #EFE4CE;
  text-align: center;
  padding-bottom: 46px;
}
.foot-blind {
  height: 18px;
  background: repeating-linear-gradient(90deg,
    var(--bamboo) 0 30px, var(--bamboo-deep) 30px 34px);
  border-bottom: 4px solid var(--teak-2);
}
.footer .wrap { padding-top: 54px; }
.foot-name {
  font-family: var(--display);
  font-size: 1.6rem; font-weight: 600;
  color: #F7EBD2;
}
.foot-name span {
  display: block;
  font-family: var(--body); font-weight: 400;
  font-size: .82rem; letter-spacing: .06em;
  color: rgba(239, 228, 206, .6);
  margin-top: .45em;
}
.foot-line {
  max-width: 54ch; margin: 1.5rem auto 0;
  font-size: .95rem;
  color: rgba(239, 228, 206, .75);
}
.foot-sign { margin-top: .9rem; font-size: .88rem; color: var(--bamboo); }
.foot-nav {
  margin-top: 1.9rem;
  display: flex; gap: 26px; justify-content: center; flex-wrap: wrap;
}
.foot-nav a {
  font-size: .84rem; font-weight: 500;
  letter-spacing: .08em;
  color: rgba(239, 228, 206, .75);
  text-decoration: none;
}
.foot-nav a:hover { color: var(--sun); }
.foot-fine {
  margin-top: 2rem;
  font-size: .76rem;
  color: rgba(239, 228, 206, .4);
}

/* ── Scroll reveals ───────────────────────────────────────────── */
@supports (animation-timeline: view()) {
  .sunpath path {
    animation: dot-walk linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes dot-walk {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -66; }
  }
  .reveal {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 4% entry 36%;
  }
  @keyframes reveal-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .vignettes { grid-template-columns: 1fr 1fr; }
  .daycols { grid-template-columns: 1fr 1fr; gap: 26px; }
  .visit-grid { grid-template-columns: 1fr 1fr; }
  .visit-grid .v-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { max-width: 560px; margin-inline: auto; }
  .bookgrid { columns: 1; }
  .board-list { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 780px) {
  .burger {
    display: flex; flex-direction: column; gap: 5px;
    margin-left: auto;
    padding: 10px; cursor: pointer;
  }
  .burger span {
    width: 24px; height: 2.4px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
  }
  .nav-toggle:checked ~ .masthead-inner .burger span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
  .nav-toggle:checked ~ .masthead-inner .burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .masthead-inner .burger span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }

  .masthead-inner { position: relative; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivory);
    border-bottom: 2px solid var(--line);
    padding: 6px 28px 18px;
    display: none;
    box-shadow: 0 24px 30px -22px rgba(70, 51, 31, .3);
  }
  .nav-toggle:checked ~ .masthead-inner .nav { display: flex; }
  .nav a { padding: 14px 4px; border-bottom: 1px dashed var(--line); }
  .nav a.nav-cta { margin-top: 14px; text-align: center; border-bottom: none; }

  .vignettes { grid-template-columns: 1fr; }
  .daycols { grid-template-columns: 1fr; }
  .visit-grid { grid-template-columns: 1fr; }
  .visit-grid .v-card:last-child { grid-column: auto; }
  .combo-parts { flex-direction: column; align-items: flex-start; }
  .journal { gap: 2rem; }
  .entry { grid-template-columns: 1fr; }
  .entry .snap { justify-self: start; margin-top: 14px; }
  .story-team { grid-template-columns: 1fr; }
  .team-snap { justify-self: start; }
}

@media (max-width: 520px) {
  .dish { flex-wrap: wrap; }
  .dish .mm { order: 3; width: 100%; margin-top: .06em; }
  .dish .dots { min-width: 18px; }
  .brand-word small { display: none; }
  .cat { padding: 22px 20px; }
  .board { padding: 26px 20px; }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .r1, .r2, .r3, .r4, .r5 { opacity: 1; }
  .ribbon-track { animation: none; }
}

/* ── Print ────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; }
  .masthead, .hero-art, .ribbon, .rhythm, .visit, .footer, .skip, .cta-row { display: none; }
  .memories, .menu, .story, .hero { background: #fff; padding: 12px 0; }
  .board, .cat, .combo, .v-card { box-shadow: none; }
  .combo { background: #fff; color: #000; border: 1px solid #999; }
  .combo-head h3, .combo-parts span { color: #000; }
}