/* Beach Street Arts — V4 "shophouse" layout.
   Built from the real shop: slatted signboard with red slab letters, marigold garland,
   paper flags, wooden shutters & floors, framed art wall, Phuket red/white curb. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* palette from the original site: red, yellow, pink, orange, cream */
  --red:      #ad1500;
  --sign-red: #ad1500;
  --deep:     #7a0f00;
  --yellow:   #ffe500;
  --gold:     #fca600;
  --marigold: #fca600;
  --pink:     #faabfe;
  --wood:     #6b3f22;
  --wood-dk:  #3d2212;
  --plaster:  #fae6b7;
  --paper:    #fff6e3;
  --ink:      #2a0c04;
  --sand:     #f1d49c;
  --slab:  'Alfa Slab One', 'Rockwell', Georgia, serif;
  --type:  'Courier Prime', 'Courier New', monospace;
  --body:  'Inter', system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --bar-h: 64px;
  --noise: url("noise.png"); /* pre-made grain tile: a live SVG noise filter was slow to repaint */
  --planks: repeating-linear-gradient(90deg, #5a331b 0 2px, #7b4a2a 2px 118px, #6e4124 118px 120px, #845231 120px 238px, #5f371e 238px 240px, #73452a 240px 360px);
}

html { scroll-behavior: smooth; }
body { font-family: var(--body); color: var(--ink); background: var(--plaster) var(--noise); line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: calc(var(--bar-h) + 8px); }

/* ─── SHARED ─── */
.label { font-family: var(--type); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.sec-title { font-family: var(--slab); font-weight: 400; font-size: clamp(34px, 5vw, 64px); line-height: 1.02; color: var(--sign-red); }
.sec-copy { max-width: 56ch; margin-top: 14px; font-size: 17px; color: rgba(27,17,11,0.75); }
.sec-head { padding-inline: var(--gutter); margin-bottom: clamp(32px, 5vw, 56px); text-align: center; display: grid; justify-items: center; }
.sec-head.light .label, .sec-head.light .sec-title { color: var(--yellow); }
.sec-head.light .sec-copy { color: rgba(255,250,240,0.85); }
.sec-head.red .label { color: var(--yellow); }
.sec-head.red .sec-title { color: var(--paper); }
.sec-head.red .sec-copy { color: rgba(255,250,240,0.85); }
.center { text-align: center; margin-top: 48px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border: 2px solid var(--ink);
  font-weight: 800; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-red { background: var(--sign-red); color: var(--yellow); }
.btn-red:hover { background: var(--deep); }
.btn-plain { background: transparent; }
.btn-plain:hover { background: var(--ink); color: var(--paper); }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: var(--paper); }
.btn-wide { width: 100%; padding-block: 16px; }

.rv { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
.rv.in { opacity: 1; transform: none; }

/* ─── BAR ─── */
.bar {
  position: sticky; top: 0; z-index: 900; height: var(--bar-h);
  display: flex; align-items: center; gap: 24px; padding-inline: var(--gutter);
  background: var(--red); color: var(--paper);
  border-bottom: 2px solid var(--yellow);
}
.bar-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bar-brand img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--yellow); object-fit: cover; }
.bar-brand span { font-family: var(--slab); font-size: 19px; color: var(--yellow); letter-spacing: 0.02em; }
.bar-nav { display: flex; gap: 4px; flex: 1; justify-content: center; flex-wrap: wrap; }
.bar-nav a { font-family: var(--type); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; transition: color 0.2s; }
.bar-nav a:hover { color: var(--yellow); }
.bar-nav-book { display: none; }
.bar-book { background: var(--yellow); color: var(--red); padding: 10px 16px; font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; border: 2px solid var(--yellow); flex-shrink: 0; }
.bar-book:hover { background: var(--paper); border-color: var(--paper); }
.bar-burger { display: none; width: 44px; height: 44px; margin-left: auto; flex-direction: column; justify-content: center; gap: 6px; padding: 10px; }
.bar-burger span { display: block; height: 2px; background: var(--paper); transition: transform 0.3s, opacity 0.3s; }
.bar-burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.bar-burger.open span:nth-child(2) { opacity: 0; }
.bar-burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ─── 1. STOREFRONT ─── */
.front { padding-top: clamp(20px, 3vw, 36px); }
.sign {
  margin-inline: var(--gutter);
  position: relative; text-align: center;
  padding: clamp(32px, 3vw + 12px, 46px) 16px clamp(16px, 2.4vw, 26px);
  background: repeating-linear-gradient(180deg, #fff6e3 0 20px, #e8d3a8 20px 22px, #fbecc9 22px 23px);
  border-top: 10px solid var(--sign-red);
  box-shadow: 0 14px 24px -14px rgba(27,17,11,0.5);
}
.sign-name {
  font-family: var(--slab); font-weight: 400; text-transform: uppercase;
  font-size: clamp(40px, 8.4vw, 128px); line-height: 0.95; letter-spacing: 0.02em;
  color: var(--sign-red);
  -webkit-text-stroke: clamp(2px, 0.35vw, 5px) var(--gold); paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(61,34,18,0.35);
}
.sign-sub {
  font-family: var(--slab); text-transform: uppercase; color: var(--sign-red);
  font-size: clamp(18px, 3vw, 44px); letter-spacing: 0.24em; margin-top: 6px;
  -webkit-text-stroke: 1px var(--gold); paint-order: stroke fill;
}
.sign-no {
  position: absolute; left: 34px; top: 50%; transform: translateY(-50%) rotate(-90deg);
  font-family: var(--type); font-weight: 700; font-size: 13px; letter-spacing: 0.2em; color: var(--wood-dk);
}
.sign-no-r { left: auto; right: 34px; transform: translateY(-50%) rotate(90deg); }

/* marquee bulbs along the top and sides: dark sockets underneath, two lit sets
   that take turns, so the light chases around the sign */
.bulbs, .bulbs::before, .bulbs::after {
  position: absolute; inset: 0; pointer-events: none;
  background:
    var(--bulb) 0 0 / var(--tile) 24px repeat-x,
    var(--bulb-y) left 0 top 24px / 24px var(--tile) repeat-y,
    var(--bulb-y) right 0 top 24px / 24px var(--tile) repeat-y;
}
.bulbs { inset: 0 4px 0;
  --tile: 28px; --off: 14px;
  --bulb: radial-gradient(circle at var(--off) 12px, #b98a52 0 3px, #8a5532 4px, transparent 5px);
  --bulb-y: radial-gradient(circle at 12px var(--off), #b98a52 0 3px, #8a5532 4px, transparent 5px);
}
.bulbs::before, .bulbs::after {
  content: ''; --tile: 56px; will-change: opacity;
  --bulb: radial-gradient(circle at var(--off) 12px, #fffbe0 0 3px, var(--yellow) 4px 5px, rgba(252,166,0,0.5) 6px, transparent 11px);
  --bulb-y: radial-gradient(circle at 12px var(--off), #fffbe0 0 3px, var(--yellow) 4px 5px, rgba(252,166,0,0.5) 6px, transparent 11px);
  animation: blink 1.2s steps(1) infinite;
}
.bulbs::after { --off: 42px; animation-delay: -0.6s; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.1; } }

/* marigold garland hanging under the sign */
.garland {
  height: 22px; margin: -4px calc(var(--gutter) + 8px) 0;
  background:
    radial-gradient(circle at 11px 9px, #ffc94d 0 5px, var(--marigold) 6px 8px, #c97a00 9px, transparent 10px) 0 0 / 20px 22px repeat-x;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.25));
  position: relative; z-index: 2;
}

/* paper flags on a string (filled by v4.js): the string droops between hooks and
   each flag hangs on the curve, rippling in the wind one after another */
.flags {
  --sag: 14px; --dips: 2;
  display: flex; margin: 4px var(--gutter) 0; height: calc(46px + var(--sag));
  position: relative; z-index: 1;
}
.flags::before { /* the string */
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: calc(var(--sag) + 2px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%232a0c04' stroke-width='2' vector-effect='non-scaling-stroke' d='M0 1Q100 37 200 1'/%3E%3C/svg%3E") 0 0 / calc(100% / var(--dips)) 100% repeat-x;
}
/* prayer flags as over our door, printed in the site palette */
.flags span {
  flex: 1; margin-inline: 3px; height: 40px; transform-origin: 50% 0;
  translate: 0 calc(var(--y, 0) * var(--sag)); rotate: calc(var(--s, 0) * 6deg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%231b110b' stroke-opacity='.32'%3E%3Crect x='2.5' y='2.5' width='35' height='33' stroke-width='1'/%3E%3Cpath stroke-width='1.1' stroke-dasharray='3 1.4' d='M7 7.5h26M7 10.5h21M7 29h24M7 32h17'/%3E%3Ccircle cx='20' cy='19.5' r='6.2' stroke-width='1.2'/%3E%3Ccircle cx='20' cy='19.5' r='8' stroke-width='.6' stroke-dasharray='1 1.2'/%3E%3C/g%3E%3Cg fill='%231b110b' fill-opacity='.34'%3E%3Cpath d='M20 14.6c2.4 2 3.4 4.6.2 7.6-.1 0-.3 0-.4 0-3.2-3-2.2-5.6.2-7.6z'/%3E%3Ccircle cx='17.2' cy='23' r='1'/%3E%3Ccircle cx='22.8' cy='23' r='1'/%3E%3Ccircle cx='7' cy='19.5' r='1.6'/%3E%3Ccircle cx='33' cy='19.5' r='1.6'/%3E%3C/g%3E%3Cpath stroke='%231b110b' stroke-opacity='.3' stroke-width='.8' d='M4 37v3M9 38v2M14 37v3M19 38v2M24 37v3M29 38v2M34 37v3'/%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(27,17,11,0.14), transparent 28%, rgba(255,246,227,0.18) 52%, transparent 74%, rgba(27,17,11,0.16));
  background-size: 100% 100%;
  animation: flutter 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.16s);
}
@keyframes flutter {
  0%, 100% { transform: perspective(160px) rotateY(0deg) skewY(0deg) rotate(-2deg); }
  30%      { transform: perspective(160px) rotateY(20deg) skewY(3deg) rotate(3deg); }
  62%      { transform: perspective(160px) rotateY(-12deg) skewY(-2deg) rotate(-1deg); }
}
.flags span:nth-child(5n+1) { background-color: var(--red); }
.flags span:nth-child(5n+2) { background-color: var(--paper); }
.flags span:nth-child(5n+3) { background-color: var(--orange, #fca600); }
.flags span:nth-child(5n+4) { background-color: var(--pink); }
.flags span:nth-child(5n+5) { background-color: var(--yellow); }

.shopfront {
  display: grid; grid-template-columns: minmax(200px, 0.75fr) 1.6fr 1.15fr; gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(24px, 3vw, 40px) var(--gutter) clamp(40px, 6vw, 72px); align-items: stretch;
}
.shutter-l {
  background: repeating-linear-gradient(180deg, #7b4a2a 0 11px, #4f2c16 11px 14px), var(--wood);
  border: 10px solid var(--wood-dk); box-shadow: inset 0 0 0 2px #8f5a35;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 28px 16px;
}
.plaque {
  background: var(--sign-red); color: var(--gold);
  border: 3px solid var(--gold); outline: 4px solid var(--sign-red);
  padding: 18px 16px; text-align: center; display: grid; gap: 4px; min-width: 150px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.4);
}
.plaque-th { font-size: 22px; font-weight: 700; }
.plaque-en { font-family: var(--type); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.plaque-time { font-family: var(--slab); font-size: 24px; color: var(--yellow); }
.shutter-note { font-family: var(--type); font-weight: 700; color: var(--paper); text-align: center; font-size: 14px; background: rgba(27,17,11,0.6); padding: 8px 12px; }
.doorway { border: 12px solid var(--wood-dk); background: var(--ink); position: relative; box-shadow: 0 18px 30px -12px rgba(27,17,11,0.55); min-height: 420px; }
.doorway img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; position: absolute; inset: 0; }
.doorway figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(27,17,11,0.85)); color: var(--paper);
  font-family: var(--type); font-size: 13px; padding: 40px 16px 12px;
}
.shutter-r { display: flex; flex-direction: column; justify-content: center; padding-block: 8px; }
.tag { font-family: var(--type); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wood); border-block: 2px solid var(--ink); padding: 6px 0; align-self: flex-start; margin-bottom: 18px; }
.front-line { font-family: var(--slab); font-weight: 400; font-size: clamp(34px, 4vw, 58px); line-height: 1.02; color: var(--sign-red); margin-bottom: 18px; }
.front-copy { font-size: 17px; color: rgba(27,17,11,0.78); margin-bottom: 26px; max-width: 42ch; }
.front-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Phuket red/white curb */
.curb {
  height: 16px;
  background: repeating-linear-gradient(90deg, var(--red) 0 90px, var(--paper) 90px 180px);
  border-block: 2px solid var(--ink);
}

/* ─── 2. THE WALL ─── */
.wall { padding-block: clamp(56px, 8vw, 104px); }
/* longboard with two red masks under it, like the real shop wall */
.hang { position: relative; max-width: 760px; margin: -12px auto clamp(84px, 9vw, 110px); padding-inline: var(--gutter); }
.hang-board { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 8px rgba(27,17,11,0.3)); }
.hang-mask { position: absolute; top: 72%; width: clamp(50px, 7vw, 72px); height: clamp(54px, 7.6vw, 78px); filter: drop-shadow(0 6px 5px rgba(27,17,11,0.35)); }
.hang-mask:nth-of-type(2) { left: 30%; transform: rotate(-4deg); }
.hang-mask:nth-of-type(3) { right: 30%; transform: rotate(4deg); }
/* salon hang: frames of every size and shape, packed edge to edge like the shop walls.
   v4.js stacks them into columns of uneven width (shortest column first) so no wall shows between them;
   without JS, CSS columns give the same packed look. The ragged bottom fades out under the wall. */
.frames {
  --gap: 12px;
  columns: 4 200px; column-gap: var(--gap);
  padding-inline: var(--gutter); max-width: 1400px; margin-inline: auto;
  max-height: 1750px; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, #000 84%, transparent); mask: linear-gradient(180deg, #000 84%, transparent);
}
.frames > * { break-inside: avoid; margin-bottom: var(--gap); }
.frames.packed { columns: auto; display: flex; gap: var(--gap); align-items: flex-start; }
.frames.packed > * { margin-bottom: 0; }
.wall-col { flex: var(--g, 1) 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.t-xl    { aspect-ratio: 3 / 4; }
.t-pl    { aspect-ratio: 3 / 4.6; }
.t-p     { aspect-ratio: 3 / 4; }
.t-arch  { aspect-ratio: 3 / 4.3; }
.t-s     { aspect-ratio: 1 / 1; }
.t-w     { aspect-ratio: 4 / 3; }
.t-round { aspect-ratio: 1 / 1; }
/* real picture frames: four moulding pieces meeting at 45° mitred corners. Each side is a different shade
   (lit from the top left) so the corner joints show, with a little wood grain, a raised inner lip, a card mat
   in the wood, gold and black frames, and the frame's shadow falling onto the picture */
.pic {
  --fw: 15px; --t: #a8703f; --l: #8a5532; --r: #5e3519; --b: #3f2210; --lip: rgba(255,236,200,0.35);
  position: relative; display: block; padding: 0;
  border: var(--fw) solid; border-color: var(--t) var(--r) var(--b) var(--l);
  box-shadow: 0 14px 20px -8px rgba(27,17,11,0.55), 0 2px 3px rgba(27,17,11,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s;
}
.pic::before { /* grain and the outer edge of the moulding */
  content: ''; position: absolute; inset: calc(var(--fw) * -1); padding: var(--fw); border-radius: inherit; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(115deg, rgba(0,0,0,0.07) 0 1px, transparent 1px 5px, rgba(255,255,255,0.05) 5px 6px, transparent 6px 11px);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
}
.pic.gold  { --t: #ffe08a; --l: #f2b53a; --r: #b97a0c; --b: #8a5806; --lip: rgba(122,15,0,0.6); }
.pic.red   { --t: #d8431f; --l: #ad1500; --r: #7a0f00; --b: #520900; --lip: rgba(252,166,0,0.7); }
.pic.white { --t: #fffaf0; --l: #efe2c6; --r: #d2c09c; --b: #b9a47c; --lip: rgba(255,255,255,0.6); }
.pic.black { --t: #4d3d33; --l: #30241c; --r: #1b130d; --b: #0c0805; --lip: rgba(252,166,0,0.55); }
.pic:nth-child(4n+1) { transform: rotate(-0.7deg); }
.pic:nth-child(5n+2) { transform: rotate(0.8deg); }
.pic:hover { transform: scale(1.03); z-index: 3; box-shadow: 0 22px 28px -12px rgba(27,17,11,0.7); }
.pic-in { position: relative; display: block; height: 100%; overflow: hidden; background: var(--ink); box-shadow: 0 0 0 2px var(--lip), 0 0 0 3px rgba(0,0,0,0.45); }
.pic.wood .pic-in, .pic.gold .pic-in, .pic.black .pic-in { border: 9px solid var(--paper); } /* cream card mat */
.pic-in::after { /* the frame's shadow on the picture */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 4px 5px 8px rgba(0,0,0,0.45), inset -1px -1px 2px rgba(255,255,255,0.1);
}
.pic-in img { width: 100%; height: 100%; object-fit: cover; }
.t-round, .t-round .pic-in { border-radius: 50%; }
.t-arch, .t-arch .pic-in { border-radius: 999px 999px 4px 4px; }
.pic-tag {
  position: absolute; z-index: 2; left: 50%; bottom: 14px; transform: translate(-50%, 6px); white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
  background: var(--yellow); color: var(--red); border: 1px solid var(--red);
  font-family: var(--type); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px;
  opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
.pic:hover .pic-tag, .pic:focus-visible .pic-tag { opacity: 1; transform: translate(-50%, 0); }
.wall-mask { display: grid; place-items: center; aspect-ratio: 2 / 1; }
.wall-mask svg { width: 46%; max-width: 76px; height: 100%; filter: drop-shadow(0 6px 5px rgba(27,17,11,0.35)); }

/* ─── 2. STYLES: skate decks on the rack ─── */
.decks-sec {
  background:
    radial-gradient(rgba(255,246,227,0.08) 2px, transparent 2.5px) 0 0 / 26px 26px,
    var(--deep);
  padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 120px);
}
.rack { position: relative; padding: 34px var(--gutter) 0; scrollbar-width: none; }
.rack::-webkit-scrollbar { display: none; }
.rack::before { /* wooden rail the decks hang from */
  content: ''; position: absolute; left: var(--gutter); right: var(--gutter); top: 14px; height: 16px;
  background: linear-gradient(180deg, #a5693b, #6b3f22 60%, #4f2c16); border-radius: 3px; box-shadow: 0 6px 10px rgba(0,0,0,0.5);
}
.decks { display: flex; justify-content: center; gap: clamp(18px, 2.6vw, 40px); }
.deck { flex: 0 1 180px; min-width: 0; display: grid; justify-items: center; text-align: center; transform-origin: 50% -20px; transition: transform 0.5s cubic-bezier(.34,1.56,.64,1); }
.deck:nth-child(odd) { transform: rotate(-2deg); }
.deck:nth-child(even) { transform: rotate(2deg); }
.deck:hover, .deck:focus-visible { transform: rotate(0) translateY(-6px); outline: none; }
.deck::before { /* strap to the rail */
  content: ''; width: 4px; height: 22px; background: var(--gold); margin-top: -20px; margin-bottom: -2px;
}
.deck-board {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 3.3;
  border-radius: 999px; overflow: hidden; border: 4px solid #0c0705;
  background: #0c0705; box-shadow: 0 18px 24px -8px rgba(0,0,0,0.7), inset 0 0 0 2px rgba(255,255,255,0.08);
}
.deck-board img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.deck:hover .deck-board img { transform: scale(1.06); }
.deck-board::before, .deck-board::after { /* truck bolts */
  content: ''; position: absolute; left: 50%; width: 30px; height: 18px; transform: translateX(-50%);
  background:
    radial-gradient(circle, #c9c3b6 0 2.5px, #3a332b 3px, transparent 3.5px) 0 0 / 15px 9px;
  z-index: 1;
}
.deck-board::before { top: 18%; }
.deck-board::after { bottom: 18%; }
.deck-name {
  margin-top: 16px; padding: 6px 12px; background: var(--yellow); color: var(--sign-red);
  font-family: var(--slab); font-size: 17px; line-height: 1.1;
  box-shadow: 0 0 0 3px #fff, 3px 5px 8px rgba(0,0,0,0.5); transform: rotate(-3deg);
}
.deck:nth-child(even) .deck-name { background: var(--pink); transform: rotate(3deg); }
.deck-note { margin-top: 10px; font-family: var(--type); font-size: 12px; color: rgba(255,250,240,0.7); }

/* ─── 2. STEP INSIDE: plaster wall over a wooden floor ─── */
.inside { background: var(--plaster) var(--noise); }
.inside-wall { padding-block: clamp(56px, 8vw, 104px) clamp(36px, 5vw, 56px); }
.room {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, clamp(200px, 19vw, 270px));
  gap: clamp(14px, 2vw, 26px); padding-inline: var(--gutter); max-width: 1320px; margin-inline: auto;
}
.spot { position: relative; cursor: zoom-in; background: var(--ink); overflow: hidden; border: 8px solid var(--paper); box-shadow: 0 14px 24px -12px rgba(27,17,11,0.55); }
.spot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.spot:hover img, .spot:focus-visible img { transform: scale(1.05); }
.spot:focus-visible { outline: 3px solid var(--sign-red); }
.spot figcaption {
  position: absolute; left: 10px; bottom: 10px; background: var(--paper); color: var(--ink);
  font-family: var(--type); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; padding: 4px 10px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3); transform: rotate(-2deg);
}
.spot-a { grid-column: span 2; grid-row: span 2; }
.spot-b { grid-row: span 2; }
.spot-c, .spot-d { grid-column: 4; }
.spot-e, .spot-f { grid-column: span 2; }
.floor { height: clamp(60px, 8vw, 110px); background: var(--planks); border-top: 12px solid var(--wood-dk); box-shadow: inset 0 14px 18px -10px rgba(0,0,0,0.6); }

/* ─── 6. SALT WATER: the Andaman sea, the shore, boards in the sand ─── */
.sea-edge {
  position: relative; height: 78px; overflow: hidden; margin-top: -1px; background-color: var(--deep);
}
.sea-edge::before { /* right-hand breakers peeling along, slid on the GPU */
  content: ''; position: absolute; top: 0; bottom: 0; left: -220px; right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='56' viewBox='0 0 220 56'%3E%3Cpath fill='%23ad1500' d='M0 50C40 50 70 42 100 28C122 17 140 10 160 11C180 12 194 22 192 32C191 38 184 39 182 34C181 30 184 28 186 30C180 22 170 20 164 26C158 34 170 46 196 50L220 50V56H0z'/%3E%3Cpath fill='none' stroke='%23fae6b7' stroke-opacity='.28' stroke-width='1.2' d='M24 50C56 48 80 40 104 30M60 52C90 50 112 42 132 30'/%3E%3Cpath fill='none' stroke='%23fae6b7' stroke-width='3' stroke-linecap='round' d='M112 22C134 12 158 8 176 13C191 19 196 30 189 36C185 39 181 35 184 31'/%3E%3Cpath fill='none' stroke='%23fff6e3' stroke-width='2.4' stroke-linecap='round' d='M174 49C182 46 190 47 198 50M160 47c4-2 8-2 11 0'/%3E%3Cg fill='%23fff6e3'%3E%3Ccircle cx='197' cy='27' r='1.7'/%3E%3Ccircle cx='202' cy='33' r='1.2'/%3E%3Ccircle cx='194' cy='41' r='1.5'/%3E%3Ccircle cx='200' cy='44' r='1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: 0 100%; background-size: 220px 56px;
  animation: tide var(--tide, 12s) linear infinite; animation-delay: var(--tide-delay, 0s); will-change: transform;
}
/* a little guy riding the face of one breaker, left to right (v4.js keeps him and the waves in step) */
.surfer {
  position: absolute; left: 0; bottom: 6px; z-index: 1; width: 58px; height: 54px; will-change: translate, transform;
  animation: ride 16s linear infinite, bob 1.4s ease-in-out infinite alternate;
}
.surfer .spray { animation: spray 0.5s ease-out infinite; transform-origin: 6px 48px; }
@keyframes ride { from { translate: -70px 0; } to { translate: var(--ride-end, calc(100vw + 10px)) 0; } }
@keyframes bob { from { transform: translateY(2px) rotate(-5deg); } to { transform: translateY(-9px) rotate(4deg); } }
@keyframes spray { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(-8px) scale(0.5); } }
@keyframes tide { to { transform: translateX(220px); } }
.beach {
  position: relative; color: var(--paper); overflow: hidden;
  background:
    repeating-linear-gradient(170deg, transparent 0 46px, rgba(250,230,183,0.07) 46px 48px),
    linear-gradient(180deg, var(--red) 0%, #b81e05 45%, #c4361a 72%, var(--sand) 72.2%);
}
.beach-top {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(56px, 8vw, 104px) var(--gutter) clamp(36px, 5vw, 56px); max-width: 1320px; margin-inline: auto;
}
.beach-head { text-align: left; justify-items: start; padding-inline: 0; margin-bottom: 0; }
.beach-head .label { color: var(--yellow); }
.beach-head .sec-copy { margin-bottom: 24px; }
/* lifeguard sign: red-over-yellow flag on a post, wooden board */
.lifeguard { position: relative; padding-left: 44px; }
.lifeguard::before { content: ''; position: absolute; left: 14px; top: -24px; bottom: -40px; width: 8px; background: linear-gradient(90deg, #c9c3b6, #fffaf0, #9b917f); border-radius: 4px; }
.lg-flag {
  position: absolute; left: 22px; top: -24px; width: 62px; height: 44px;
  background: linear-gradient(180deg, var(--yellow) 50%, var(--pink) 50%);
  transform-origin: 0 50%; animation: flap 2.6s ease-in-out infinite;
  clip-path: polygon(0 0, 100% 6%, 96% 50%, 100% 94%, 0 100%);
}
@keyframes flap { 0%, 100% { transform: skewY(-4deg) scaleX(1); } 50% { transform: skewY(4deg) scaleX(0.92); } }
.lg-board {
  background: repeating-linear-gradient(180deg, #8a5532 0 30px, #6b3f22 30px 32px); color: var(--paper);
  border: 6px solid var(--wood-dk); padding: 22px 22px 16px; margin-top: 34px;
  box-shadow: 0 18px 26px -12px rgba(0,0,0,0.55);
}
.lg-title { font-family: var(--slab); font-size: 26px; color: var(--yellow); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.lg-board dl div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 0; border-top: 1px dashed rgba(255,250,240,0.35); }
.lg-board dt { font-family: var(--type); font-weight: 700; font-size: 13px; color: var(--yellow); }
.lg-board dd { font-size: 14px; line-height: 1.5; }
.lg-board dd b { color: var(--paper); }

.shore { position: relative; padding: 0 var(--gutter) 28px; --foam: 52%; --sea-h: 190px; }
/* sunset sea under the red sky: dark red water, a sun sinking on the horizon, gold glints */
.sea {
  position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  top: calc(var(--foam) - var(--sea-h)); bottom: calc(100% - var(--foam) - 14px);
  background: linear-gradient(180deg, #9c1400 0%, var(--deep) 45%, #5e0b00 100%);
  box-shadow: 0 -2px 0 rgba(255,229,0,0.55), 0 -10px 22px -6px rgba(252,166,0,0.45);
}
.sea::before { /* little wave glints drifting along */
  content: ''; position: absolute; top: 6px; bottom: 0; left: -360px; right: 0; will-change: transform;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='90' viewBox='0 0 360 90'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath stroke='%23fca600' stroke-width='2' d='M14 12h46M150 30h70M250 8h30M40 52h84M210 66h56M310 44h36M90 84h40'/%3E%3Cpath stroke='%23faabfe' stroke-width='1.5' opacity='.6' d='M100 20h24M280 26h22M170 48h30M10 74h28M300 82h34'/%3E%3C/g%3E%3C/svg%3E") repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
          mask-image: linear-gradient(180deg, transparent, #000 45%);
  opacity: 0.4; animation: glint 22s linear infinite;
}
.sea::after { /* the sun's path across the water */
  content: ''; position: absolute; top: 0; bottom: 0; left: 56%; width: 150px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(255,229,0,0.85) 0 3px, transparent 3px 11px);
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000 20%, transparent 100%);
  animation: shimmer 3s ease-in-out infinite alternate;
}
.sun {
  position: absolute; left: 56%; top: 0; width: 120px; height: 60px; transform: translateX(-50%) translateY(-100%);
  border-radius: 120px 120px 0 0; background: linear-gradient(180deg, var(--yellow), var(--gold));
  box-shadow: 0 0 40px 14px rgba(252,166,0,0.5);
}
.swell { position: absolute; left: 0; right: 0; background-repeat: repeat-x; background-position: 0 0; }
/* waves rolling in: each one starts small at the horizon, grows as it nears the beach,
   and breaks into a wash up the sand. Four of them, two seconds apart. */
.roller {
  top: 0; height: 40px; opacity: 0; transform-origin: 50% 100%; will-change: transform, opacity;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40'%3E%3Cpath fill='%23660c00' d='M0 12Q30 7 60 11T120 11T180 11T240 12V40H0z'/%3E%3Cpath fill='%238f1200' opacity='.8' d='M0 12Q30 7 60 11T120 11T180 11T240 12V22Q180 26 120 22T0 22z'/%3E%3Cpath fill='%23fff6e3' d='M0 12Q30 7 60 11T120 11T180 11T240 12V15Q228 22 216 15Q204 21 192 15Q178 23 164 15Q152 20 140 15Q126 22 112 15Q100 21 88 15Q74 23 60 15Q48 20 36 15Q24 22 12 15Q6 19 0 15z'/%3E%3Cg fill='%23fff6e3' opacity='.75'%3E%3Ccircle cx='24' cy='24' r='1.6'/%3E%3Ccircle cx='74' cy='26' r='1.3'/%3E%3Ccircle cx='126' cy='25' r='1.6'/%3E%3Ccircle cx='178' cy='26' r='1.3'/%3E%3Ccircle cx='222' cy='24' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-position-x: var(--x, 0);
  animation: roll-in 8s cubic-bezier(.45,0,.8,1) infinite;
  animation-delay: var(--d, 0s);
}
.roller:nth-of-type(3) { --d: -2s; --x: 90px; }
.roller:nth-of-type(4) { --d: -4s; --x: 30px; }
.roller:nth-of-type(5) { --d: -6s; --x: 160px; }
@keyframes roll-in {
  0%   { transform: translateY(6px) scaleY(0.25); opacity: 0; }
  20%  { opacity: 0.55; }
  86%  { transform: translateY(calc(var(--sea-h) - 30px)) scaleY(1); opacity: 1; }
  100% { transform: translateY(calc(var(--sea-h) - 16px)) scaleY(0.4); opacity: 0; }
}
/* the wave sheet sliding up the sand and pulling back, once per wave */
.wash {
  position: absolute; left: 0; right: 0; z-index: 1; top: var(--foam); height: 64px; pointer-events: none;
  transform-origin: 50% 0; transform: scaleY(0.1); will-change: transform, opacity;
  background: linear-gradient(180deg, rgba(255,246,227,0.95), rgba(255,246,227,0.45) 70%, rgba(255,246,227,0));
  border-radius: 0 0 50% 50% / 0 0 14px 14px;
  animation: wash 2s ease-out 0.85s infinite;
}
@keyframes wash {
  0%   { transform: scaleY(0.1);  opacity: 0.9; }
  45%  { transform: scaleY(1);    opacity: 0.85; }
  100% { transform: scaleY(0.06); opacity: 0; }
}
@keyframes glint { to { transform: translateX(360px); } }
@keyframes shimmer { from { opacity: 0.55; } to { opacity: 0.95; } }
.boards { position: relative; z-index: 2; display: flex; justify-content: center; gap: clamp(16px, 3vw, 48px); flex-wrap: wrap; max-width: 1200px; margin-inline: auto; }
/* each beach is a different board stuck in the sand: shortboard, longboard, fish (nose down), mid-length, skim */
.boards { align-items: flex-end; }
.board { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 0 0 auto; }
.board-svg {
  display: block; height: auto; overflow: visible;
  transform: rotate(var(--r, 0deg)); transform-origin: 50% 92%;
  filter: drop-shadow(6px 12px 10px rgba(80,10,0,0.4)); will-change: transform;
  margin-bottom: -66px; /* the tail sinks into the sand pile */
  transition: transform 0.45s cubic-bezier(.34,1.56,.64,1);
}
.board:hover .board-svg, .board:focus-visible .board-svg { transform: rotate(0deg) translateY(-14px); }
.board:focus-visible { outline: none; }
/* widths follow real board proportions, so the longboard ends up tallest and the skim shortest */
.b-long  .board-svg { width: clamp(72px, 7.4vw, 104px); }
.b-short .board-svg { width: clamp(64px, 6.6vw, 92px); }
.b-fish  .board-svg { width: clamp(70px, 7.2vw, 100px); }
.b-egg   .board-svg { width: clamp(70px, 7vw, 98px); }
.b-skim  .board-svg { width: clamp(90px, 9vw, 124px); margin-bottom: -52px; }
.board-pile { /* a lumpy heap of sand the tail is pushed into */
  position: relative; z-index: 1; width: 180%; max-width: 236px; height: 78px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 270 78' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fbe9c2'/%3E%3Cstop offset='.55' stop-color='%23f1d49c'/%3E%3Cstop offset='1' stop-color='%23d9b06e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='140' cy='72' rx='128' ry='6' fill='%236b3f22' opacity='.18'/%3E%3Cpath fill='url(%23s)' d='M6 72C18 66 26 66 36 60C46 54 52 56 62 49C72 42 78 44 88 36C98 28 106 30 116 24C126 18 134 22 142 20C152 18 158 24 168 27C178 30 184 36 194 40C204 44 210 42 220 50C230 57 240 58 250 64C258 68 262 70 266 73Z'/%3E%3Cpath fill='%236b3f22' opacity='.16' d='M142 20C152 18 158 24 168 27C178 30 184 36 194 40C204 44 210 42 220 50C230 57 240 58 250 64C258 68 262 70 266 73L170 73C178 60 170 44 156 34C150 29 146 24 142 20Z'/%3E%3Cpath fill='none' stroke='%23fff6e3' stroke-width='2' stroke-linecap='round' opacity='.6' d='M70 47C82 38 96 32 112 27M42 60C50 56 56 55 62 51'/%3E%3Cg fill='%238a5532' opacity='.45'%3E%3Ccircle cx='60' cy='60' r='1.2'/%3E%3Ccircle cx='96' cy='46' r='1'/%3E%3Ccircle cx='120' cy='58' r='1.3'/%3E%3Ccircle cx='150' cy='40' r='1'/%3E%3Ccircle cx='176' cy='56' r='1.2'/%3E%3Ccircle cx='204' cy='62' r='1'/%3E%3Ccircle cx='232' cy='66' r='1.2'/%3E%3Ccircle cx='84' cy='66' r='1'/%3E%3Ccircle cx='138' cy='66' r='1.1'/%3E%3C/g%3E%3Cg fill='%23fff6e3' opacity='.7'%3E%3Ccircle cx='72' cy='56' r='1'/%3E%3Ccircle cx='108' cy='40' r='1.1'/%3E%3Ccircle cx='130' cy='34' r='.9'/%3E%3Ccircle cx='46' cy='66' r='1'/%3E%3C/g%3E%3Cg fill='%23e7c486'%3E%3Cellipse cx='22' cy='71' rx='9' ry='3'/%3E%3Cellipse cx='252' cy='72' rx='8' ry='2.6'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: scale(var(--pile-x, 1), var(--pile-y, 1)); transform-origin: 50% 100%;
}
/* every heap is a different size; two are mirrored so the shading isn't the same each time */
.b-short .board-pile { --pile-x: 0.82; --pile-y: 0.78; }
.b-long  .board-pile { --pile-x: 1.12; --pile-y: 1.2; }
.b-fish  .board-pile { --pile-x: -0.94; --pile-y: 0.9; }
.b-egg   .board-pile { --pile-x: 1; --pile-y: 1.06; }
.b-skim  .board-pile { --pile-x: -1.18; --pile-y: 0.72; }
.board-name { position: relative; z-index: 2; margin-top: -14px; background: var(--sign-red); color: var(--yellow); font-family: var(--slab); font-size: 17px; padding: 5px 12px; box-shadow: 0 0 0 3px #fff, 3px 5px 8px rgba(0,0,0,0.3); transform: rotate(-2deg); white-space: nowrap; }
.board:nth-child(even) .board-name { transform: rotate(2deg); }
.board-tag { margin-top: 8px; font-family: var(--type); font-weight: 700; font-size: 11px; color: var(--wood-dk); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }

/* die-cut street sticker */
.sticker {
  position: absolute; z-index: 2; display: grid; place-items: center; text-align: center;
  background: var(--yellow); color: var(--sign-red);
  font-family: var(--slab); text-transform: uppercase; line-height: 1.05;
  box-shadow: 0 0 0 4px #fff, 4px 6px 10px rgba(0,0,0,0.45);
}
.sticker-round { top: 18px; right: 18px; width: 108px; height: 108px; border-radius: 50%; font-size: 16px; transform: rotate(12deg); }

/* prayer flags strung across between sections */
.flags-div { margin: 0; padding: 0 var(--gutter); background: var(--plaster) var(--noise); height: calc(52px + var(--sag)); }
.flags-div::before { left: var(--gutter); right: var(--gutter); }
.flags-div.sand { background: var(--sand); }
/* the long string over the gallery wall swoops four times (twice on phones) */
.flags-wall { --dips: 4; --sag: 20px; }

/* ─── 5. SOUVENIR ─── */
.souvenir {
  background: radial-gradient(rgba(0,0,0,0.12) 1.2px, transparent 1.4px) 0 0 / 9px 9px, var(--red);
  padding-block: clamp(56px, 8vw, 104px);
}
.tickets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-inline: var(--gutter); }
.ticket {
  background: var(--paper); color: var(--ink); position: relative;
  -webkit-mask: radial-gradient(circle 12px at 0 62%, transparent 98%, #000) , radial-gradient(circle 12px at 100% 62%, transparent 98%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.ticket img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 2px dashed var(--ink); }
.ticket-body { padding: 18px 18px 22px; }
.ticket-no { font-family: var(--type); font-weight: 700; color: var(--red); font-size: 13px; letter-spacing: 0.16em; }
.ticket h3 { font-family: var(--slab); font-weight: 400; font-size: 26px; color: var(--sign-red); line-height: 1.1; margin: 4px 0 8px; }
.ticket p { font-size: 15px; color: rgba(27,17,11,0.78); }
.flash-soon {
  margin: 36px var(--gutter) 0; border: 2px dashed var(--yellow); color: var(--paper);
  padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.flash-soon b { color: var(--yellow); font-family: var(--slab); font-weight: 400; font-size: 20px; }

/* ─── 6. SACRED PATH: a temple skyline under the red sky (Thai ubosot, golden chedi,
   Chinese shrine and gate with lanterns), then a tiled courtyard where the places stand ─── */
.temple { position: relative; background: linear-gradient(180deg, var(--red) 0%, #b81e05 45%, #d4400f 88%, #e8600f 100%); padding-top: clamp(84px, 7vw, 100px); }
.temple .sec-head { margin-bottom: clamp(8px, 2vw, 24px); position: relative; z-index: 3; }
/* the top of the heading sits in the cloud bank: a deep-red cut-paper shadow keeps it readable on the light layers */
.temple .sec-title { text-shadow: 0 3px 0 var(--deep), 0 8px 18px rgba(74,9,0,0.45); }
.temple .label { text-shadow: 0 2px 0 var(--deep), 0 0 10px rgba(74,9,0,0.6); }
.temple-top { position: relative; overflow: hidden; }
/* paper-cut cloud bank hanging from the sand divider: five layers, the front one sand-coloured,
   each layer behind it reaching lower and shading toward the red sky, with soft shadows between.
   The layers sway sideways at different speeds for a little depth */
.temple-clouds { position: absolute; left: 0; right: 0; top: 0; height: 190px; z-index: 2; overflow: hidden; pointer-events: none; }
.temple-clouds span {
  position: absolute; top: 0; bottom: 0; left: -60px; right: -60px;
  background: var(--img) 0 0 / 1200px 190px repeat-x;
  animation: cloud-sway var(--t) ease-in-out var(--d, 0s) infinite alternate; will-change: transform;
}
.temple-clouds span:nth-child(1) { --img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='190' viewBox='0 0 1200 190'%3E%3Cfilter id='s' x='-5%' y='-5%' width='110%' height='150%'%3E%3CfeDropShadow dx='0' dy='6' stdDeviation='6' flood-color='%234a0900' flood-opacity='.38'/%3E%3C/filter%3E%3Cg fill='%23c23a17' filter='url(%23s)'%3E%3Crect x='-20' y='-20' width='1240' height='105'/%3E%3Ccircle cx='-74' cy='106' r='61'/%3E%3Ccircle cx='-28' cy='92' r='62'/%3E%3Ccircle cx='19' cy='87' r='68'/%3E%3Ccircle cx='66' cy='97' r='68'/%3E%3Ccircle cx='110' cy='117' r='35'/%3E%3Ccircle cx='137' cy='109' r='44'/%3E%3Ccircle cx='165' cy='96' r='51'/%3E%3Ccircle cx='204' cy='93' r='69'/%3E%3Ccircle cx='259' cy='96' r='64'/%3E%3Ccircle cx='304' cy='120' r='35'/%3E%3Ccircle cx='332' cy='101' r='51'/%3E%3Ccircle cx='365' cy='126' r='26'/%3E%3Ccircle cx='384' cy='107' r='33'/%3E%3Ccircle cx='406' cy='128' r='27'/%3E%3Ccircle cx='426' cy='102' r='63'/%3E%3Ccircle cx='470' cy='111' r='54'/%3E%3Ccircle cx='515' cy='97' r='51'/%3E%3Ccircle cx='547' cy='123' r='23'/%3E%3Ccircle cx='564' cy='88' r='66'/%3E%3Ccircle cx='617' cy='96' r='57'/%3E%3Ccircle cx='656' cy='113' r='32'/%3E%3Ccircle cx='684' cy='108' r='56'/%3E%3Ccircle cx='729' cy='85' r='74'/%3E%3Ccircle cx='780' cy='117' r='25'/%3E%3Ccircle cx='796' cy='93' r='61'/%3E%3Ccircle cx='844' cy='109' r='58'/%3E%3Ccircle cx='888' cy='87' r='70'/%3E%3Ccircle cx='934' cy='111' r='32'/%3E%3Ccircle cx='956' cy='109' r='34'/%3E%3Ccircle cx='986' cy='117' r='29'/%3E%3Ccircle cx='1005' cy='86' r='73'/%3E%3Ccircle cx='1065' cy='95' r='69'/%3E%3Ccircle cx='1113' cy='88' r='66'/%3E%3Ccircle cx='1158' cy='95' r='70'/%3E%3Ccircle cx='1126' cy='106' r='61'/%3E%3Ccircle cx='1172' cy='92' r='62'/%3E%3Ccircle cx='1219' cy='87' r='68'/%3E%3Ccircle cx='1266' cy='97' r='68'/%3E%3Ccircle cx='-42' cy='95' r='70'/%3E%3C/g%3E%3C/svg%3E"); --t: 26s; --d: -4s; }
.temple-clouds span:nth-child(2) { --img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='190' viewBox='0 0 1200 190'%3E%3Cfilter id='s' x='-5%' y='-5%' width='110%' height='150%'%3E%3CfeDropShadow dx='0' dy='6' stdDeviation='6' flood-color='%234a0900' flood-opacity='.38'/%3E%3C/filter%3E%3Cg fill='%23cf5a2c' filter='url(%23s)'%3E%3Crect x='-20' y='-20' width='1240' height='84'/%3E%3Ccircle cx='-68' cy='102' r='31'/%3E%3Ccircle cx='-48' cy='82' r='52'/%3E%3Ccircle cx='-14' cy='76' r='52'/%3E%3Ccircle cx='25' cy='91' r='42'/%3E%3Ccircle cx='57' cy='74' r='61'/%3E%3Ccircle cx='95' cy='101' r='26'/%3E%3Ccircle cx='116' cy='104' r='23'/%3E%3Ccircle cx='133' cy='74' r='58'/%3E%3Ccircle cx='170' cy='78' r='60'/%3E%3Ccircle cx='215' cy='80' r='45'/%3E%3Ccircle cx='247' cy='94' r='21'/%3E%3Ccircle cx='261' cy='86' r='48'/%3E%3Ccircle cx='301' cy='79' r='50'/%3E%3Ccircle cx='337' cy='94' r='26'/%3E%3Ccircle cx='353' cy='103' r='28'/%3E%3Ccircle cx='373' cy='75' r='66'/%3E%3Ccircle cx='431' cy='64' r='67'/%3E%3Ccircle cx='480' cy='79' r='63'/%3E%3Ccircle cx='536' cy='95' r='31'/%3E%3Ccircle cx='564' cy='108' r='23'/%3E%3Ccircle cx='581' cy='87' r='42'/%3E%3Ccircle cx='609' cy='89' r='31'/%3E%3Ccircle cx='630' cy='87' r='45'/%3E%3Ccircle cx='668' cy='89' r='52'/%3E%3Ccircle cx='706' cy='79' r='65'/%3E%3Ccircle cx='763' cy='86' r='52'/%3E%3Ccircle cx='807' cy='81' r='47'/%3E%3Ccircle cx='841' cy='99' r='26'/%3E%3Ccircle cx='863' cy='75' r='58'/%3E%3Ccircle cx='908' cy='109' r='21'/%3E%3Ccircle cx='921' cy='75' r='55'/%3E%3Ccircle cx='964' cy='85' r='53'/%3E%3Ccircle cx='997' cy='69' r='62'/%3E%3Ccircle cx='1051' cy='71' r='59'/%3E%3Ccircle cx='1095' cy='91' r='42'/%3E%3Ccircle cx='1126' cy='81' r='55'/%3E%3Ccircle cx='1169' cy='66' r='65'/%3E%3Ccircle cx='1132' cy='102' r='31'/%3E%3Ccircle cx='1152' cy='82' r='52'/%3E%3Ccircle cx='1186' cy='76' r='52'/%3E%3Ccircle cx='1225' cy='91' r='42'/%3E%3Ccircle cx='1257' cy='74' r='61'/%3E%3Ccircle cx='-31' cy='66' r='65'/%3E%3C/g%3E%3C/svg%3E"); --t: 22s; --d: -9s; }
.temple-clouds span:nth-child(3) { --img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='190' viewBox='0 0 1200 190'%3E%3Cfilter id='s' x='-5%' y='-5%' width='110%' height='150%'%3E%3CfeDropShadow dx='0' dy='6' stdDeviation='6' flood-color='%234a0900' flood-opacity='.38'/%3E%3C/filter%3E%3Cg fill='%23de8a4f' filter='url(%23s)'%3E%3Crect x='-20' y='-20' width='1240' height='66'/%3E%3Ccircle cx='-62' cy='70' r='38'/%3E%3Ccircle cx='-29' cy='80' r='23'/%3E%3Ccircle cx='-13' cy='71' r='39'/%3E%3Ccircle cx='18' cy='68' r='46'/%3E%3Ccircle cx='52' cy='80' r='28'/%3E%3Ccircle cx='70' cy='63' r='44'/%3E%3Ccircle cx='106' cy='80' r='23'/%3E%3Ccircle cx='124' cy='56' r='50'/%3E%3Ccircle cx='161' cy='66' r='53'/%3E%3Ccircle cx='195' cy='67' r='37'/%3E%3Ccircle cx='219' cy='83' r='25'/%3E%3Ccircle cx='236' cy='77' r='25'/%3E%3Ccircle cx='258' cy='69' r='43'/%3E%3Ccircle cx='291' cy='52' r='52'/%3E%3Ccircle cx='330' cy='72' r='36'/%3E%3Ccircle cx='353' cy='56' r='45'/%3E%3Ccircle cx='393' cy='67' r='40'/%3E%3Ccircle cx='421' cy='63' r='48'/%3E%3Ccircle cx='458' cy='70' r='41'/%3E%3Ccircle cx='489' cy='46' r='60'/%3E%3Ccircle cx='531' cy='73' r='37'/%3E%3Ccircle cx='558' cy='75' r='41'/%3E%3Ccircle cx='584' cy='84' r='25'/%3E%3Ccircle cx='604' cy='68' r='50'/%3E%3Ccircle cx='636' cy='71' r='25'/%3E%3Ccircle cx='658' cy='65' r='36'/%3E%3Ccircle cx='686' cy='59' r='51'/%3E%3Ccircle cx='722' cy='86' r='24'/%3E%3Ccircle cx='743' cy='81' r='28'/%3E%3Ccircle cx='764' cy='65' r='48'/%3E%3Ccircle cx='807' cy='53' r='51'/%3E%3Ccircle cx='848' cy='59' r='40'/%3E%3Ccircle cx='880' cy='70' r='24'/%3E%3Ccircle cx='900' cy='61' r='54'/%3E%3Ccircle cx='948' cy='63' r='42'/%3E%3Ccircle cx='975' cy='70' r='24'/%3E%3Ccircle cx='993' cy='52' r='61'/%3E%3Ccircle cx='1031' cy='82' r='20'/%3E%3Ccircle cx='1048' cy='69' r='50'/%3E%3Ccircle cx='1083' cy='51' r='54'/%3E%3Ccircle cx='1128' cy='81' r='28'/%3E%3Ccircle cx='1150' cy='63' r='50'/%3E%3Ccircle cx='1195' cy='61' r='49'/%3E%3Ccircle cx='1138' cy='70' r='38'/%3E%3Ccircle cx='1171' cy='80' r='23'/%3E%3Ccircle cx='1187' cy='71' r='39'/%3E%3Ccircle cx='1218' cy='68' r='46'/%3E%3Ccircle cx='1252' cy='80' r='28'/%3E%3Ccircle cx='-50' cy='63' r='50'/%3E%3Ccircle cx='-5' cy='61' r='49'/%3E%3C/g%3E%3C/svg%3E"); --t: 19s; --d: -2s; }
.temple-clouds span:nth-child(4) { --img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='190' viewBox='0 0 1200 190'%3E%3Cfilter id='s' x='-5%' y='-5%' width='110%' height='150%'%3E%3CfeDropShadow dx='0' dy='6' stdDeviation='6' flood-color='%234a0900' flood-opacity='.38'/%3E%3C/filter%3E%3Cg fill='%23e9b77c' filter='url(%23s)'%3E%3Crect x='-20' y='-20' width='1240' height='48'/%3E%3Ccircle cx='-56' cy='41' r='38'/%3E%3Ccircle cx='-23' cy='41' r='49'/%3E%3Ccircle cx='12' cy='62' r='21'/%3E%3Ccircle cx='29' cy='52' r='19'/%3E%3Ccircle cx='42' cy='63' r='16'/%3E%3Ccircle cx='55' cy='30' r='51'/%3E%3Ccircle cx='99' cy='64' r='17'/%3E%3Ccircle cx='112' cy='33' r='48'/%3E%3Ccircle cx='155' cy='28' r='56'/%3E%3Ccircle cx='194' cy='35' r='47'/%3E%3Ccircle cx='234' cy='53' r='18'/%3E%3Ccircle cx='249' cy='40' r='48'/%3E%3Ccircle cx='284' cy='47' r='35'/%3E%3Ccircle cx='313' cy='40' r='50'/%3E%3Ccircle cx='356' cy='39' r='40'/%3E%3Ccircle cx='381' cy='44' r='53'/%3E%3Ccircle cx='425' cy='34' r='48'/%3E%3Ccircle cx='467' cy='41' r='50'/%3E%3Ccircle cx='504' cy='50' r='25'/%3E%3Ccircle cx='522' cy='55' r='22'/%3E%3Ccircle cx='539' cy='54' r='17'/%3E%3Ccircle cx='553' cy='34' r='54'/%3E%3Ccircle cx='600' cy='42' r='53'/%3E%3Ccircle cx='644' cy='39' r='36'/%3E%3Ccircle cx='668' cy='44' r='34'/%3E%3Ccircle cx='694' cy='40' r='40'/%3E%3Ccircle cx='726' cy='37' r='56'/%3E%3Ccircle cx='772' cy='51' r='44'/%3E%3Ccircle cx='810' cy='62' r='15'/%3E%3Ccircle cx='823' cy='45' r='44'/%3E%3Ccircle cx='853' cy='48' r='23'/%3E%3Ccircle cx='871' cy='48' r='40'/%3E%3Ccircle cx='906' cy='53' r='18'/%3E%3Ccircle cx='922' cy='44' r='52'/%3E%3Ccircle cx='958' cy='51' r='39'/%3E%3Ccircle cx='990' cy='44' r='44'/%3E%3Ccircle cx='1020' cy='35' r='43'/%3E%3Ccircle cx='1053' cy='47' r='24'/%3E%3Ccircle cx='1073' cy='48' r='22'/%3E%3Ccircle cx='1092' cy='35' r='51'/%3E%3Ccircle cx='1129' cy='32' r='53'/%3E%3Ccircle cx='1174' cy='51' r='36'/%3E%3Ccircle cx='1144' cy='41' r='38'/%3E%3Ccircle cx='1177' cy='41' r='49'/%3E%3Ccircle cx='1212' cy='62' r='21'/%3E%3Ccircle cx='1229' cy='52' r='19'/%3E%3Ccircle cx='1242' cy='63' r='16'/%3E%3Ccircle cx='1255' cy='30' r='51'/%3E%3Ccircle cx='-26' cy='51' r='36'/%3E%3C/g%3E%3C/svg%3E"); --t: 16s; --d: -7s; }
.temple-clouds span:nth-child(5) { --img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='190' viewBox='0 0 1200 190'%3E%3Cfilter id='s' x='-5%' y='-5%' width='110%' height='150%'%3E%3CfeDropShadow dx='0' dy='6' stdDeviation='6' flood-color='%234a0900' flood-opacity='.38'/%3E%3C/filter%3E%3Cg fill='%23f1d49c' filter='url(%23s)'%3E%3Crect x='-20' y='-20' width='1240' height='33'/%3E%3Ccircle cx='-48' cy='17' r='46'/%3E%3Ccircle cx='-10' cy='39' r='18'/%3E%3Ccircle cx='4' cy='32' r='13'/%3E%3Ccircle cx='16' cy='41' r='15'/%3E%3Ccircle cx='26' cy='18' r='37'/%3E%3Ccircle cx='50' cy='17' r='41'/%3E%3Ccircle cx='83' cy='34' r='13'/%3E%3Ccircle cx='92' cy='22' r='36'/%3E%3Ccircle cx='117' cy='33' r='20'/%3E%3Ccircle cx='134' cy='33' r='35'/%3E%3Ccircle cx='157' cy='31' r='29'/%3E%3Ccircle cx='182' cy='21' r='38'/%3E%3Ccircle cx='209' cy='17' r='36'/%3E%3Ccircle cx='240' cy='25' r='39'/%3E%3Ccircle cx='271' cy='30' r='38'/%3E%3Ccircle cx='297' cy='29' r='34'/%3E%3Ccircle cx='322' cy='21' r='30'/%3E%3Ccircle cx='346' cy='18' r='37'/%3E%3Ccircle cx='372' cy='20' r='46'/%3E%3Ccircle cx='407' cy='19' r='45'/%3E%3Ccircle cx='436' cy='14' r='47'/%3E%3Ccircle cx='471' cy='13' r='45'/%3E%3Ccircle cx='506' cy='33' r='18'/%3E%3Ccircle cx='518' cy='28' r='33'/%3E%3Ccircle cx='548' cy='36' r='19'/%3E%3Ccircle cx='561' cy='30' r='22'/%3E%3Ccircle cx='574' cy='30' r='37'/%3E%3Ccircle cx='605' cy='22' r='39'/%3E%3Ccircle cx='636' cy='15' r='41'/%3E%3Ccircle cx='671' cy='26' r='33'/%3E%3Ccircle cx='692' cy='22' r='34'/%3E%3Ccircle cx='714' cy='13' r='40'/%3E%3Ccircle cx='747' cy='36' r='18'/%3E%3Ccircle cx='763' cy='20' r='41'/%3E%3Ccircle cx='794' cy='32' r='30'/%3E%3Ccircle cx='818' cy='28' r='44'/%3E%3Ccircle cx='850' cy='39' r='15'/%3E%3Ccircle cx='863' cy='18' r='34'/%3E%3Ccircle cx='889' cy='25' r='38'/%3E%3Ccircle cx='915' cy='31' r='29'/%3E%3Ccircle cx='938' cy='28' r='32'/%3E%3Ccircle cx='963' cy='33' r='20'/%3E%3Ccircle cx='977' cy='21' r='40'/%3E%3Ccircle cx='1008' cy='20' r='42'/%3E%3Ccircle cx='1036' cy='22' r='34'/%3E%3Ccircle cx='1063' cy='34' r='17'/%3E%3Ccircle cx='1076' cy='42' r='20'/%3E%3Ccircle cx='1089' cy='22' r='35'/%3E%3Ccircle cx='1114' cy='22' r='43'/%3E%3Ccircle cx='1142' cy='16' r='45'/%3E%3Ccircle cx='1173' cy='18' r='40'/%3E%3Ccircle cx='1199' cy='30' r='31'/%3E%3Ccircle cx='1152' cy='17' r='46'/%3E%3Ccircle cx='1190' cy='39' r='18'/%3E%3Ccircle cx='1204' cy='32' r='13'/%3E%3Ccircle cx='1216' cy='41' r='15'/%3E%3Ccircle cx='1226' cy='18' r='37'/%3E%3Ccircle cx='-27' cy='18' r='40'/%3E%3Ccircle cx='-1' cy='30' r='31'/%3E%3C/g%3E%3C/svg%3E"); --t: 13s; --d: -11s; }
@keyframes cloud-sway { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
/* Yi Peng sky lanterns drifting up from behind the temples, swaying as they go */
.sky-lanterns { position: absolute; inset: 0; pointer-events: none; }
.sky-lanterns span {
  position: absolute; bottom: 40px; left: var(--x); width: var(--w, 30px); aspect-ratio: 24 / 30; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fca600'/%3E%3Cstop offset='1' stop-color='%23ffe500'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23l)' d='M2 2H22L18 24H6Z'/%3E%3Cpath fill='none' stroke='%23b86e00' stroke-width='.8' d='M8 2L9 24M16 2L15 24M3 10H21'/%3E%3Cellipse cx='12' cy='25' rx='3' ry='2' fill='%23fff6e3'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255,229,0,0.8));
  animation: lantern-rise var(--t, 16s) linear var(--d, 0s) infinite, lantern-sway 3.4s ease-in-out var(--d, 0s) infinite alternate;
  will-change: transform, opacity;
}
.sky-lanterns span:nth-child(1) { --x: 8%;  --w: 25px; --t: 18s; --d: -2s; }
.sky-lanterns span:nth-child(2) { --x: 19%; --w: 36px; --t: 14s; --d: -9s; }
.sky-lanterns span:nth-child(3) { --x: 31%; --w: 22px; --t: 20s; --d: -14s; }
.sky-lanterns span:nth-child(4) { --x: 44%; --w: 31px; --t: 16s; --d: -5s; }
.sky-lanterns span:nth-child(5) { --x: 57%; --w: 42px; --t: 13s; --d: -11s; }
.sky-lanterns span:nth-child(6) { --x: 66%; --w: 25px; --t: 19s; --d: -1s; }
.sky-lanterns span:nth-child(7) { --x: 76%; --w: 34px; --t: 15s; --d: -7s; }
.sky-lanterns span:nth-child(8) { --x: 87%; --w: 22px; --t: 21s; --d: -16s; }
.sky-lanterns span:nth-child(9) { --x: 94%; --w: 31px; --t: 17s; --d: -12s; }
@keyframes lantern-rise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  8%   { opacity: 1; }
  75%  { opacity: 0.85; }
  100% { transform: translateY(-640px) scale(0.55); opacity: 0; }
}
@keyframes lantern-sway { from { translate: -10px 0; rotate: -6deg; } to { translate: 10px 0; rotate: 6deg; } }
/* the glow behind the golden chedi breathes slowly */
.temple-glow {
  position: absolute; left: 50%; bottom: calc(clamp(150px, 18vw, 260px) * -0.1); width: clamp(260px, 26vw, 380px); aspect-ratio: 1;
  translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,229,0,0.42), rgba(252,166,0,0.22) 40%, transparent 70%);
  animation: glow 4s ease-in-out infinite alternate; will-change: transform, opacity;
}
@keyframes glow { from { opacity: 0.6; transform: scale(0.92); } to { opacity: 1; transform: scale(1.06); } }
.temple .sec-copy { margin-bottom: 22px; }
.temple-sky { position: relative; z-index: 1; display: block; width: 100%; height: clamp(150px, 18vw, 260px); }
.temple-floor {
  padding: clamp(36px, 4vw, 56px) var(--gutter) clamp(56px, 7vw, 88px);
  background:
    repeating-linear-gradient(90deg, rgba(252,166,0,0.1) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(180deg, rgba(252,166,0,0.1) 0 1px, transparent 1px 64px),
    linear-gradient(180deg, #4a0900, #3a0700);
}
.arches {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(28px, 3.4vw, 44px) clamp(18px, 2.4vw, 36px);
  max-width: 1160px; margin-inline: auto; align-items: flex-start;
}
.arch { flex: 0 1 190px; display: grid; justify-items: center; text-align: center; color: var(--paper); padding-top: 12px; }
.arch-frame { /* round Chinese moon gate: gold rim, dark gap, dashed gold ring */
  display: block; width: min(100%, 170px); aspect-ratio: 1; padding: 6px; border-radius: 50%;
  background: linear-gradient(160deg, var(--yellow), var(--gold) 40%, #b86e00 72%, var(--gold));
  box-shadow: 0 0 0 4px #3a0700, 0 0 0 7px var(--gold), 0 12px 22px rgba(0,0,0,0.5);
  outline: 2px dashed rgba(252,166,0,0.6); outline-offset: 11px; transition: transform 0.35s ease;
}
.arch-frame img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
/* temples we have no real photo of yet: gold-leaf drawings on lacquer, like temple wall paintings */
.arch-art { width: 100%; height: 100%; display: block; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #9c1400, #5e0b00 75%); }
.arch:hover .arch-frame, .arch:focus-visible .arch-frame { transform: translateY(-6px); }
.arch:focus-visible { outline: none; }
.arch-name {
  margin-top: 26px; padding: 5px 12px; font-family: var(--slab); font-size: 16px; line-height: 1.15; color: var(--deep);
  background: linear-gradient(180deg, var(--yellow), var(--gold)); box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--gold);
}
.arch-hook { margin-top: 10px; font-size: 14px; line-height: 1.4; color: rgba(255,246,227,0.85); }
.arch-far { margin-top: 6px; font-family: var(--type); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); }

/* ─── 7. TEMPLE RULES ─── */
.rules { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 104px); background: radial-gradient(rgba(107,63,34,0.18) 1px, transparent 1.4px) 0 0 / 6px 6px, var(--sand); }
.notices { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); padding-inline: var(--gutter); max-width: 1240px; margin-inline: auto; }
.notice {
  position: relative; padding: 44px clamp(22px, 3vw, 40px) 36px;
  background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(173,21,0,0.12) 31px 32px), var(--paper);
  background-position: 0 14px;
  box-shadow: 0 16px 26px -14px rgba(27,17,11,0.45); transform: rotate(-0.6deg);
}
.notice-b { transform: rotate(0.6deg); }
.notice::before { /* pin */
  content: ''; position: absolute; top: 14px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff6b5a, var(--sign-red) 60%); box-shadow: 0 2px 3px rgba(0,0,0,0.4);
}
.notice h3 { font-family: var(--type); font-weight: 700; font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sign-red); border-bottom: 3px double var(--ink); padding-bottom: 10px; margin-bottom: 18px; }
.notice ol { counter-reset: r; display: grid; gap: 14px; }
.notice li { counter-increment: r; position: relative; padding-left: 46px; font-size: 15px; line-height: 1.6; }
.notice li::before { content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: -2px; font-family: var(--slab); font-size: 22px; color: var(--sign-red); }
.notice li b { color: var(--ink); }
.stamp-note {
  margin-top: 22px; border: 3px solid var(--sign-red); color: var(--sign-red); padding: 12px 14px;
  font-family: var(--type); font-weight: 700; font-size: 14px; transform: rotate(-1.2deg);
}

/* ─── 8. GUESTBOOK ─── */
.guestbook {
  background: radial-gradient(rgba(173,21,0,0.14) 1px, transparent 1.5px) 0 0 / 7px 7px, var(--plaster);
  padding: clamp(56px, 8vw, 104px) var(--gutter);
  border-block: 12px solid var(--wood-dk);
}
.gb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.gb-head .label { color: var(--wood-dk); }
.gb-score { background: var(--paper); padding: 14px 22px; display: grid; justify-items: center; box-shadow: 0 12px 20px -10px rgba(0,0,0,0.5); transform: rotate(2deg); }
.gb-score b { font-family: var(--slab); font-weight: 400; font-size: 52px; line-height: 1; color: var(--sign-red); }
.gb-score span { color: var(--marigold); font-size: 20px; letter-spacing: 3px; }
.gb-score small { font-family: var(--type); font-size: 12px; font-weight: 700; }
.postcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.postcard {
  position: relative; padding: 10px;
  background: repeating-linear-gradient(135deg, var(--red) 0 14px, var(--paper) 14px 24px, var(--pink) 24px 38px, var(--paper) 38px 48px);
  box-shadow: 0 14px 22px -12px rgba(0,0,0,0.5);
  transition: transform 0.3s;
}
.postcard:nth-child(odd) { transform: rotate(-1.4deg); }
.postcard:nth-child(even) { transform: rotate(1.2deg); }
.postcard:hover { transform: rotate(0) translateY(-4px); }
.postcard blockquote, .postcard figcaption { background: var(--paper); }
.postcard blockquote { padding: 26px 82px 14px 22px; font-size: 15px; line-height: 1.6; min-height: 190px; }
.postcard blockquote small { display: block; margin-top: 8px; font-size: 13px; color: rgba(27,17,11,0.6); }
.postcard figcaption { padding: 0 22px 18px; font-family: var(--type); font-weight: 700; font-size: 13px; color: var(--wood); border-top: 1px dashed rgba(27,17,11,0.25); padding-top: 10px; }
.pc-stamp {
  position: absolute; top: 22px; right: 22px; width: 54px; height: 62px;
  display: grid; place-items: center; background: var(--yellow); color: var(--sign-red);
  font-family: var(--slab); font-size: 20px;
  border: 4px dotted var(--paper); outline: 1px solid rgba(27,17,11,0.25); transform: rotate(6deg);
}

/* ─── 9. FAQ ─── */
.faq { padding: clamp(56px, 8vw, 104px) var(--gutter); display: grid; grid-template-columns: 0.75fr 1.4fr; gap: clamp(28px, 5vw, 72px); max-width: 1240px; margin-inline: auto; }
.faq .sec-head { text-align: left; justify-items: start; padding-inline: 0; margin-bottom: 24px; }
.faq-side { align-self: stretch; display: flex; flex-direction: column; margin-bottom: calc(clamp(56px, 8vw, 104px) * -1); }
/* the real street sign from our corner (Suthat Soi 2), drawn from a photo */
/* the sign's pole: the curved top is in the drawing, the straight part stretches down to the curb.
   --w is the drawing's width; the pole sits 136–164 of its 620 units */
.faq-post { --w: 300px; flex: 1; display: flex; flex-direction: column; margin-top: 8px; filter: drop-shadow(4px 10px 10px rgba(27,17,11,0.3)); }
.faq-sign { width: var(--w); height: auto; display: block; }
.faq-pole {
  flex: 1; width: calc(var(--w) * 28 / 620); margin-left: calc(var(--w) * 136 / 620); margin-top: -1px;
  background: linear-gradient(90deg, #3d4248 0 21%, #5a6067 21% 46%, #3d4248 46%);
}
.faq-list { padding-inline: 0; }
.faq-list details { border-bottom: 2px solid var(--ink); }
.faq-list details:first-child { border-top: 2px solid var(--ink); }
.faq-list summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font-family: var(--slab); font-size: clamp(19px, 2vw, 24px); line-height: 1.25; transition: color 0.2s; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--type); font-weight: 700; font-size: 28px; color: var(--sign-red); transition: transform 0.3s; }
.faq-list details[open] summary { color: var(--sign-red); }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { padding: 0 0 24px; font-size: 16px; color: rgba(27,17,11,0.8); max-width: 72ch; }

/* ─── 10. BOOKING ─── */
.booking {
  background: var(--planks); position: relative;
  padding: clamp(56px, 8vw, 104px) var(--gutter);
  display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start;
}
.booking::before { content: ''; position: absolute; inset: 0; background: var(--noise); pointer-events: none; }
.appt, .visit { position: relative; }
.appt {
  background: var(--paper) var(--noise); padding: clamp(24px, 4vw, 44px);
  outline: 2px dashed rgba(173,21,0,0.55); outline-offset: -14px;
  box-shadow: 0 26px 40px -16px rgba(0,0,0,0.6);
}
.appt-top { display: flex; align-items: center; gap: 16px; border-bottom: 3px double var(--ink); padding-bottom: 16px; margin-bottom: 14px; }
.appt-top img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.appt-kicker { font-family: var(--type); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; font-size: 12px; color: var(--wood); }
.appt-title { font-family: var(--slab); font-weight: 400; color: var(--sign-red); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.05; }
.appt-no { margin-left: auto; font-family: var(--type); font-weight: 700; color: var(--sign-red); border: 2px solid var(--sign-red); padding: 4px 10px; transform: rotate(4deg); white-space: nowrap; }
.appt-copy { font-size: 15px; color: rgba(27,17,11,0.75); margin-bottom: 18px; }
.appt-form { display: grid; gap: 16px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld { display: grid; gap: 4px; }
.fld > span { font-family: var(--type); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wood-dk); }
.fld small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.fld input, .fld select, .fld textarea {
  font: inherit; font-size: 16px; width: 100%; color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--ink); padding: 8px 2px;
  transition: border-color 0.2s, background 0.2s;
}
.fld textarea { resize: vertical; min-height: 96px; background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(27,17,11,0.18) 31px 32px); line-height: 32px; padding-top: 0; }
.fld select { background: var(--paper); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--sign-red); background-color: rgba(255,229,0,0.12); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--sign-red); flex-shrink: 0; }
.btn-submit-text { pointer-events: none; }
#booking-submit-btn:disabled { opacity: 0.7; cursor: wait; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.booking-status:empty { display: none; }
.booking-status { border: 2px solid var(--ink); background: var(--paper); padding: 14px 16px; font-size: 14px; }
.booking-status.error { border-color: var(--sign-red); color: var(--sign-red); }
.booking-status .success-header { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.booking-status .success-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--sign-red); color: var(--yellow); display: grid; place-items: center; font-weight: 900; flex-shrink: 0; }
.booking-status .success-title { font-family: var(--slab); font-weight: 400; color: var(--sign-red); font-size: 20px; }
.booking-status .detail-row { font-size: 13px; padding: 3px 0; }
.booking-status .wa-action-title { font-weight: 800; margin-top: 10px; }
.btn-status-wa { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; background: #25d366; color: #fff; padding: 10px 16px; font-weight: 800; border: 2px solid var(--ink); }

.visit { background: var(--plaster) var(--noise); padding: clamp(24px, 3.4vw, 40px); box-shadow: 0 26px 40px -16px rgba(0,0,0,0.6); }
.visit dl { margin: 18px 0; border-top: 2px solid var(--ink); }
.visit dl div { display: grid; grid-template-columns: 100px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(27,17,11,0.25); }
.visit dt { font-family: var(--type); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wood); padding-top: 2px; }
.visit dd { font-weight: 600; }
.visit dd a { text-decoration: underline; text-underline-offset: 3px; }
.map-frame { border: 10px solid var(--wood-dk); aspect-ratio: 4 / 3; background: var(--paper); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.visit-photo { margin-top: 18px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 8px solid var(--paper); box-shadow: 0 6px 12px rgba(0,0,0,0.2); }

/* ─── FOOTER ─── */
.foot { background: var(--deep); color: var(--paper); text-align: center; padding: 48px var(--gutter) 28px; display: grid; justify-items: center; gap: 10px; }
.foot-logo { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--gold); object-fit: cover; }
.foot-name { font-family: var(--slab); font-size: clamp(30px, 5vw, 56px); color: var(--pink); text-transform: uppercase; line-height: 1.05; }
.foot-sub { font-family: var(--type); font-size: 14px; opacity: 0.8; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 12px; font-family: var(--type); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.foot-links a:hover { color: var(--yellow); }
.foot-copy { font-size: 12px; opacity: 0.55; margin-top: 10px; }

/* ─── LIGHTBOX ─── */
.studio-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 16px; }
.studio-lightbox.active { display: flex; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(27,17,11,0.92); }
.lightbox-container { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 1100px; }
.lightbox-content { flex: 1; background: var(--paper); padding: 12px; }
#lightbox-img { width: 100%; max-height: 72vh; object-fit: contain; background: var(--ink); transition: opacity 0.2s; cursor: pointer; }
.lightbox-caption-bar { display: flex; justify-content: space-between; gap: 16px; padding: 12px 4px 2px; align-items: center; }
.lightbox-caption-bar h3 { font-family: var(--slab); font-weight: 400; color: var(--sign-red); font-size: 20px; }
.lightbox-caption-bar p { font-size: 13px; opacity: 0.7; }
#lightbox-counter { font-family: var(--type); font-weight: 700; white-space: nowrap; }
.lightbox-close { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; background: var(--yellow); color: var(--ink); font-weight: 900; font-size: 18px; }
.lightbox-nav { width: 48px; height: 48px; background: var(--yellow); color: var(--ink); font-size: 20px; font-weight: 900; flex-shrink: 0; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1180px) {
  .deck-name { font-size: 14px; padding: 5px 8px; max-width: 100%; }
  .deck-note { font-size: 11px; }
  .bar-nav { display: none; }
  .bar-book { margin-left: auto; }
  .bar-burger { display: flex; margin-left: 0; }
  .bar-nav.open {
    display: flex; flex-direction: column; position: fixed; top: var(--bar-h); left: 0; right: 0;
    background: var(--red); border-bottom: 2px solid var(--yellow); padding: 12px var(--gutter) 22px;
    max-height: calc(100vh - var(--bar-h)); overflow-y: auto;
  }
  .bar-nav.open a { font-size: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,250,240,0.12); }
  .bar-nav.open .bar-nav-book { display: block; color: var(--yellow); }
  .shopfront { grid-template-columns: 1fr 1.2fr; }
  .shutter-l { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; padding: 18px; }
  .frames { max-height: 2000px; }
  .tickets { grid-template-columns: repeat(2, 1fr); }
  .room { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: 220px; }
  .spot-a { grid-column: span 2; grid-row: auto; }
  .spot-b { grid-row: auto; }
  .spot-c, .spot-d { grid-column: auto; }
  .spot-e, .spot-f { grid-column: auto; }
  .spot-f { grid-column: span 2; } /* last photo runs full width, like the first, so it never sits alone */
  .postcards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .rack { overflow-x: auto; } /* phones swipe along the rack */
  .decks, .rack::before { min-width: 1000px; }
  .deck { flex: 0 0 140px; }
  .bar-book { display: none; }
  .bar-burger { margin-left: auto; }
  .bar-brand span { font-size: 17px; }
  .shopfront { grid-template-columns: 1fr; }
  .doorway { min-height: 320px; }
  /* phones: words and buttons, then the crew photo, then a small hours sign */
  .shutter-r { order: -1; align-items: center; text-align: center; }
  .shutter-l { order: 1; flex-direction: row; flex-wrap: wrap; gap: 14px; padding: 16px; }
  .tag { align-self: stretch; }
  .front-copy { margin-inline: auto; }
  .front-ctas { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 460px; }
  .front-ctas .btn { justify-content: center; text-align: center; padding-inline: 10px; }
  .sign-no { display: none; }
  .notices, .booking, .beach-top { grid-template-columns: 1fr; }
  .beach { background: repeating-linear-gradient(170deg, transparent 0 46px, rgba(250,230,183,0.07) 46px 48px), linear-gradient(180deg, var(--red) 0%, #b81e05 55%, #c4361a 80%, var(--sand) 80.2%); }
  .shore { --foam: 74%; --sea-h: 130px; }
  .sun { width: 84px; height: 42px; }
  .row { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .faq-side { position: static; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .faq-side { flex-direction: row; margin-bottom: 0; }
  .faq-post { --w: 150px; flex: 0 0 auto; margin-top: 0; }
  .faq-pole { flex: 0 0 26px; }
  .sticker-round { width: 84px; height: 84px; font-size: 12px; }
}

@media (max-width: 560px) {
  .arch { flex-basis: 150px; }
  .tag { font-size: 11px; letter-spacing: 0.1em; }
  .front-ctas { grid-template-columns: 1fr; }
  .plaque { min-width: 0; padding: 12px 14px; }
  .plaque-th { font-size: 18px; }
  .plaque-time { font-size: 20px; }
  .shutter-note { font-size: 12px; }
  .flags span:nth-child(n+15) { display: none; }
  .flags { --sag: 10px; --dips: 1; }
  .flags-wall { --dips: 2; }
  .frames { --gap: 8px; columns: 2; max-height: 1600px; }
  .pic { --fw: 9px; }
  .pic.wood .pic-in, .pic.gold .pic-in, .pic.black .pic-in { border-width: 5px; }
  .room { grid-auto-rows: 170px; gap: 10px; }
  .spot { border-width: 5px; }
  .boards { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 16px 4px 8px; scrollbar-width: none; }
  .boards { align-items: flex-end; padding-top: 40px; gap: 26px; }
  .board-tag { white-space: normal; max-width: 120px; line-height: 1.4; }
  .lg-board dl div { grid-template-columns: 1fr; gap: 2px; }
  .tickets, .postcards { grid-template-columns: 1fr; }
  .postcard blockquote { min-height: 0; padding-right: 76px; }
  .appt-no { display: none; }
  .visit dl div { grid-template-columns: 1fr; gap: 2px; }
  /* phones: the X stays pinned to the screen corner, and the box scrolls instead of spilling off the top */
  .studio-lightbox { align-items: flex-start; overflow-y: auto; padding-top: calc(env(safe-area-inset-top, 0px) + 64px); }
  .lightbox-close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; z-index: 3; width: 46px; height: 46px; box-shadow: 0 4px 10px rgba(0,0,0,0.45); }
  #lightbox-img, .studio-lightbox #g-img { max-height: 58vh; }
  /* phones: no arrows over the photo; swipe instead, with a hint that fades out each time a photo opens */
  .lightbox-nav { display: none; }
  .lightbox-content { position: relative; }
  .lightbox-content::after {
    content: '\2190  tap or swipe  \2192'; position: absolute; top: 28px; left: 50%; translate: -50% 0; pointer-events: none;
    padding: 6px 14px; border-radius: 999px; background: rgba(27,17,11,0.75); color: var(--paper);
    font-family: var(--type); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; white-space: nowrap;
    opacity: 0; animation: swipe-hint 2.6s ease 0.3s;
  }
}

@keyframes swipe-hint {
  0% { opacity: 0; transform: translateX(0); }
  15%, 75% { opacity: 1; }
  35% { transform: translateX(-10px); }
  55% { transform: translateX(10px); }
  100% { opacity: 0; transform: translateX(0); }
}

/* off-screen sections stop animating, so nothing runs where nobody can see it */
.is-off, .is-off::before, .is-off::after,
.is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}