/* Page-specific sections: home, prices, booking, gallery, legal. */

/* label/value lists on paper notes (hours, address, booking rules) */
.facts { margin: 0; display: grid; gap: 14px; }
.facts dt { font: 700 .78rem/1 "Nunito", sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--note-text); opacity: .7; margin-bottom: 5px; }
.facts dd { margin: 0; font-size: 1.05rem; }
.facts dd a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.facts .hrs { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-variant-numeric: tabular-nums; }
.section-more { margin-top: 30px; }
.sub-head { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); margin: 8px 0 20px; }

/* ---------- ① info: storefront polaroid + taped note ---------- */
.hero { padding-block: 40px 24px; }
.hero-grid { display: grid; align-items: start; }
.hero-photo { transform: rotate(-1.6deg); animation: settle .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes settle { from { transform: rotate(-5deg) translateY(-8px); } to { transform: rotate(-1.6deg) translateY(0); } }
.hero-note { z-index: 4; margin: 18px 8px 0; transform: rotate(1.4deg); }
.hero-note .scrap-in { display: grid; gap: 14px; }
.eyebrow { justify-self: start; font-size: inherit; }
.interior { display: grid; gap: 34px; margin-top: 48px; align-items: start; }
@media (min-width: 760px) { .interior { grid-template-columns: 1.4fr 1fr; gap: 40px; } }
@media (min-width: 880px) {
  .hero { padding-block: 56px 40px; }
  .hero-grid { grid-template-columns: 1.55fr 1fr; }
  .hero-note { margin: 150px 0 0 -70px; }
}

/* ---------- ② price cases ---------- */
.cases { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cases { align-items: start; }
.polaroid .case-cap { display: grid; gap: 2px; justify-items: start; }
.case-total { font-size: 1.6rem; }

/* ---------- ④ gallery preview ---------- */
.works { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 30px; }
.works .ph { aspect-ratio: 1; }

/* ---------- ⑤ map ---------- */
.find-grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 880px) { .find-grid { grid-template-columns: .8fr 1.2fr; gap: 48px; } }
.info { transform: rotate(-.8deg); }
.info .scrap-in { display: grid; gap: 16px; }
.map-frame { position: relative; background: var(--surface); padding: 12px; box-shadow: 0 14px 34px var(--shadow); transform: rotate(.8deg); display: block; text-decoration: none; }
.map-wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--map-paper); }
.map-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-cap { padding: 12px 4px 2px; font-size: 1.35rem; color: var(--surface-text); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.map-cap small { font: 600 .8rem/1 "Nunito", sans-serif; color: var(--surface-muted); letter-spacing: .06em; text-transform: uppercase; }
.m-paper { fill: var(--map-paper); } .m-block { fill: var(--map-block); } .m-park { fill: var(--map-park); }
.m-edge { stroke: var(--map-street-edge); fill: none; } .m-street { stroke: var(--map-street); fill: none; }
.m-ink { fill: var(--map-ink); }
.m-pin { fill: var(--accent-pink); stroke: var(--chip-edge); }
.m-dot { fill: var(--chip-edge); }
.m-label { fill: var(--note-yellow); stroke: var(--chip-edge); }
.m-label-text { fill: var(--note-text); }

/* ---------- prices ---------- */
.price-grid { display: grid; gap: 40px 34px; }
@media (min-width: 760px) { .price-grid { grid-template-columns: 1fr 1fr; } }
.price-card { display: grid; gap: 18px; align-content: start; }
.receipt { margin: 4px 0 0; display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.receipt div { display: flex; align-items: baseline; gap: 8px; }
.receipt div::before { content: ""; order: 1; flex: 1; border-bottom: 2px dotted var(--note-text); opacity: .35; }
.receipt dd { order: 2; margin: 0; font-weight: 700; }
.receipt-total { margin-top: 6px; padding-top: 8px; border-top: 2px dashed var(--note-text); font-size: 1.2rem; }
.price-card .scrap-in { display: grid; gap: 10px; }
.bead-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bead-table th, .bead-table td { text-align: left; padding: 8px 4px; border-bottom: 1px dashed var(--note-text); }
.bead-table td:last-child, .bead-table th:last-child { text-align: right; }

/* ---------- booking ---------- */
.booking-grid { display: grid; gap: 40px; }
@media (min-width: 880px) { .booking-grid { grid-template-columns: 1fr 1fr; } }
.booking-grid .scrap-in { display: grid; gap: 14px; align-content: start; height: 100%; }
.booking-grid .scrap { height: 100%; }
.booking-grid .with-balloons .scrap-in { padding-top: 70px; }
.balloons { position: absolute; z-index: 2; width: 72px; height: auto; pointer-events: none; right: 10px; top: -14px; transform: rotate(8deg); }
.balloons .string { fill: none; stroke: var(--note-text); stroke-width: 1.5; stroke-linecap: round; opacity: .6; }
.balloons .shine { fill: var(--tape-stripe); }
.f-pink { fill: var(--accent-pink); } .f-blue { fill: var(--accent-blue); } .f-yellow { fill: var(--accent-yellow); }

/* ---------- gallery ---------- */
.carousel { position: relative; }
.track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 520px); gap: 28px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 24px 8px 30px; scrollbar-width: thin;
}
.track > li { scroll-snap-align: center; list-style: none; }
.track .ph { aspect-ratio: 4 / 5; }
.carousel-nav { display: flex; justify-content: center; gap: 12px; }
.carousel-nav .btn { min-width: 50px; padding: 10px 16px; }
.videos { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.videos video { width: 100%; display: block; border-radius: 3px; background: var(--photo-bg); }

/* ---------- legal ---------- */
.legal { max-width: 46em; }
.legal h2 { font-family: "Fredoka", "Nunito", sans-serif; font-size: 1.35rem; margin: 30px 0 8px; }
.legal p, .legal ul { margin: 0 0 12px; }
.legal-note { margin-bottom: 20px; font-style: italic; opacity: .8; }
.legal > h2:first-of-type, .legal-note + h2 { margin-top: 0; }

/* legal popup: a taped note that scrolls inside the viewport */
.legal-dialog { padding: 0; border: 0; background: none; color: inherit; overflow: visible;
  width: min(640px, calc(100% - 32px)); max-height: none; }
.legal-dialog::backdrop { background: var(--backdrop); }
.legal-dialog .scrap-in { max-height: min(80dvh, 760px); overflow-y: auto; overscroll-behavior: contain; padding-top: 34px; }
.legal-dialog h2.display { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); margin-bottom: 18px; padding-right: 40px; }
.legal-dialog .legal h2 { font-size: 1.15rem; margin-top: 22px; }
.dialog-close { position: absolute; z-index: 4; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px;
  border: 2px solid var(--note-text); border-radius: 50%; background: var(--surface); color: var(--note-text); cursor: pointer; }
.dialog-close svg { width: 20px; height: 20px; }
.dialog-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
html:has(.legal-dialog[open]) { overflow: hidden; }

@media (max-width: 479px) {
  .hero-photo { transform: rotate(-1deg); }
  @keyframes settle { from { transform: rotate(-3deg) translateY(-6px); } to { transform: rotate(-1deg) translateY(0); } }
  .price-card h2.display { font-size: 1.6rem; }
.bead-intro { margin: 10px 0 18px; }