/* Beit Beirut homepage: "Through the arch, to the table" */

section[id] { scroll-margin-top: var(--hdr-h); }

/* ---------- A. arrival ---------- */
.hero { position: relative; background: var(--olive); color: var(--ivory); padding-top: calc(var(--hdr-h) + clamp(20px, 4vh, 48px)); overflow: clip; }
.hero-in { display: grid; gap: clamp(40px, 6vw, 56px); }
.hero-copy { position: relative; z-index: 2; }
.hero-logo { display: none; color: var(--gold); width: clamp(150px, 13vw, 200px); height: auto; margin-bottom: clamp(24px, 4vh, 44px); }
.hero-eyebrow { color: var(--ivory); margin-bottom: 1.1rem; }
.hero-eyebrow::before { background: var(--gold); opacity: 1; }
.hero-t { font: 500 clamp(2.4rem, 1.2rem + 5.8vw, 6.3rem)/.98 var(--f-display); letter-spacing: -.02em; }
[dir="rtl"] .hero-t { font: 700 clamp(2.7rem, 1.6rem + 4.4vw, 5.4rem)/1.32 var(--f-ar); letter-spacing: 0; }
.ln { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
[dir="rtl"] .ln { padding-bottom: .16em; margin-bottom: -.16em; }
.ln-in { display: block; }
.hero-lede { margin-top: clamp(18px, 2.6vh, 28px); max-width: 30em; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--ivory); text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(24px, 3.4vh, 36px); }
.hero-meta { display: flex; align-items: center; gap: 1rem; margin-top: clamp(24px, 4vh, 44px); font-size: .95rem; color: var(--ivory); }
.hero-meta .rule { width: 56px; height: 1px; background: var(--gold); transform-origin: 0 50%; }
[dir="rtl"] .hero-meta .rule { transform-origin: 100% 50%; }

.hero-arch { position: relative; justify-self: center; width: min(82vw, 400px); padding-top: 17%; margin-top: 8px; }
.arch { position: relative; aspect-ratio: 720 / 1000; border-radius: var(--radius-arch); overflow: hidden; background: var(--sky); isolation: isolate; }
.arch-img, .arch-img img { width: 100%; height: 100%; }
.arch-img img { object-fit: cover; object-position: 50% 40%; transform-origin: 50% 70%; }
.arch-lines { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 720 / 1000; overflow: visible; pointer-events: none; }
.arch-lines path { fill: none; stroke: var(--gold); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.arc-text { position: absolute; top: 0; left: 0; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.arc-text text { font: 600 64px var(--f-display); letter-spacing: .42em; fill: var(--gold); }

@media (min-width: 1100px) {
  .hero { min-height: max(100svh, 720px); padding-top: var(--hdr-h); display: flex; flex-direction: column; }
  .hero-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; flex: 1 0 auto; }
  .hero-copy { grid-column: 1 / span 6; align-self: center; padding-block: 6vh 8vh; }
  .hero-logo { display: block; }
  .hero-arch { grid-column: 7 / span 6; align-self: end; margin-top: 0; width: min(36vw, 560px, calc((100svh - var(--hdr-h) - 48px) / 1.56)); }
}

/* entrance: composed at first paint, then the arch opens and the type settles */
html.js .hero .arch { animation: archOpen var(--t-hero) var(--ease) 60ms both; }
html.js .hero .arch-img img { animation: settle 1300ms var(--ease) 60ms both; }
html.js .hero .arch-lines path { stroke-dasharray: 1; animation: draw 1100ms var(--ease-io) 180ms both; }
html.js .hero .arch-lines path + path { animation-delay: 300ms; }
html.js .hero .arc-text { animation: fade 900ms var(--ease) 420ms both; }
html.js .hero .ln-in { animation: lineUp 760ms var(--ease) both; animation-delay: calc(40ms + var(--i) * 80ms); }
html.js .hero-lede { animation: rise 640ms var(--ease) 260ms both; }
html.js .hero-cta { animation: rise 640ms var(--ease) 330ms both; }
html.js .hero-meta { animation: fade 640ms var(--ease) 480ms both; }
html.js .hero-meta .rule { animation: grow 700ms var(--ease) 520ms both; }
@keyframes archOpen { from { clip-path: inset(9% 9% 0 9% round 999px 999px 0 0); } to { clip-path: inset(0 round 999px 999px 0 0); } }
@keyframes settle { from { transform: scale(1.04); } to { transform: none; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes lineUp { from { transform: translateY(.32em); } to { transform: none; } }
@keyframes grow { from { transform: scaleX(0); } }

/* ---------- B. the house ---------- */
.house { position: relative; padding-block: clamp(88px, 11vw, 168px); background: var(--ivory); }
.house-in { display: grid; gap: clamp(56px, 8vw, 96px); }
.facts { display: grid; margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding-block: .95rem; border-bottom: 1px solid var(--rule); }
.facts dt { font: 500 .8125rem/1.6 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--olive-ink); padding-top: .15em; }
[dir="rtl"] .facts dt { font: 700 1.05rem/1.6 var(--f-ar); letter-spacing: 0; }
.house-art { position: relative; }
.house-detail { width: 100%; }
.house-detail figcaption { text-align: end; }
.house-detail img, .house-room img { width: 100%; height: auto; }
.house-detail picture { box-shadow: 0 0 0 1px var(--rule); }
figcaption { margin-top: .7rem; font-size: .875rem; color: var(--olive-ink); }
[dir="rtl"] figcaption { font-size: 1rem; }
.house-room { position: relative; z-index: 1; width: 46%; margin-top: -24%; }
.house-detail figcaption { max-width: 50%; margin-inline-start: auto; }
.house-room picture { border: 8px solid var(--ivory); box-shadow: 0 24px 50px -28px rgb(31 40 26 / .55); background: var(--ivory); }
.house-room img { aspect-ratio: 360 / 520; object-fit: cover; object-position: 50% 30%; }
.house-branch { position: absolute; top: -9%; inset-inline-start: 4%; width: 22%; color: var(--olive); transform: rotate(-12deg); pointer-events: none; }
[dir="rtl"] .house-branch { transform: scaleX(-1) rotate(-12deg); }
@media (min-width: 1100px) {
  .house-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .house-copy { grid-column: 1 / span 5; }
  .house-art { grid-column: 7 / span 6; padding-bottom: 12%; }
  .house-detail { width: 76%; margin-inline-start: auto; }
  .house-detail figcaption { max-width: none; }
  .house-room { position: absolute; inset-inline-start: 0; bottom: 0; width: 40%; margin: 0; }
}

/* ---------- C. the table ---------- */
.table { background: var(--paper); padding-block: clamp(88px, 11vw, 160px); overflow: clip; }
.table-head { max-width: 40rem; }
.board { position: relative; margin-top: clamp(40px, 6vw, 72px); }
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.plate { aspect-ratio: 1; }
.plate-a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  width: 100%; height: 100%; border-radius: 50%; padding: 14%; text-decoration: none; color: var(--olive-deep);
  background: radial-gradient(circle at 50% 42%, #fffdf8 0 56%, var(--ivory) 70%);
  box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 22px 40px -26px rgb(31 40 26 / .45), 0 2px 6px -2px rgb(31 40 26 / .12);
  transition: transform var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}
.plate-a::before, .plate-a::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.plate-a::before { inset: 7%; border: 1px solid rgb(104 119 60 / .4); }
.plate-a::after { inset: 9.5%; border: 1px solid rgb(226 180 99 / .7); }
.plate-k { font: 500 .6875rem/1.3 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--olive-ink); }
[dir="rtl"] .plate-k { font: 700 .85rem/1.3 var(--f-ar); }
.plate-n { margin-top: .35em; font: 600 clamp(1.15rem, .9rem + 1vw, 1.75rem)/1.05 var(--f-display); text-wrap: balance; }
.plate-n:lang(ar) { font: 700 clamp(1.15rem, .95rem + .9vw, 1.6rem)/1.35 var(--f-ar); }
.plate-alt { margin-top: .25em; font-size: clamp(.95rem, .85rem + .4vw, 1.2rem); line-height: 1.3; color: var(--olive-ink); }
.plate-alt:lang(en) { font: 500 .95rem/1.3 var(--f-display); letter-spacing: .02em; }
[dir="rtl"] .plate-p, [dir="rtl"] .pv-p { font-weight: 600; font-size: 1.12rem; }
.plate-p { margin-top: .45em; font: 500 1rem/1 var(--f-text); font-variant-numeric: tabular-nums lining-nums; padding: .3em .7em; border-radius: 999px; border: 1px solid var(--rule); }
.plate-more { display: none; }
.plate-a:hover, .plate-a:focus-visible { transform: translateY(-4px) scale(1.025); box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 32px 50px -26px rgb(31 40 26 / .5), 0 2px 6px -2px rgb(31 40 26 / .12); }
.plate-a:focus-visible { outline-offset: 6px; border-radius: 50%; }
.board-sprig, .glass { display: none; }
.table-all { margin-top: clamp(32px, 4vw, 48px); }

@media (min-width: 640px) { .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1100px) {
  .table-in { position: relative; }
  .board {
    height: clamp(640px, 50vw, 760px); margin-top: 48px; border-radius: 28px;
    background:
      repeating-linear-gradient(0deg, rgb(40 50 31 / .028) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(90deg, rgb(40 50 31 / .022) 0 1px, transparent 1px 5px),
      var(--sand);
    box-shadow: inset 0 0 0 10px var(--paper), inset 0 0 0 11px rgb(104 119 60 / .35), inset 0 0 0 16px var(--sand), inset 0 0 0 17px rgb(104 119 60 / .25);
  }
  .plates { display: block; position: absolute; inset: 0; }
  .plate { position: absolute; width: var(--w); aspect-ratio: 1; left: var(--x); top: var(--y); }
  [dir="rtl"] .plate { left: auto; right: var(--x); }
  .plate--s { --w: clamp(190px, 15vw, 220px); }
  .plate--m { --w: clamp(220px, 17vw, 250px); }
  .plate--l { --w: clamp(250px, 20vw, 290px); }
  .plate--xl { --w: clamp(300px, 25vw, 350px); }
  .plate--n1 { --x: 5%; --y: 8%; }
  .plate--n2 { --x: 24%; --y: 46%; }
  .plate--n3 { --x: 4%; --y: 58%; }
  .plate--n4 { --x: 44%; --y: 6%; }
  .plate--n5 { --x: 70%; --y: 30%; }
  .plate--n6 { --x: 48%; --y: 58%; }
  .plate-more { display: inline-flex; align-items: center; gap: .35em; position: absolute; bottom: 15%; font: 500 .8125rem/1 var(--f-text); color: var(--olive-ink); opacity: 0; transform: translateY(4px); transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); }
  [dir="rtl"] .plate-more { font: 700 .95rem/1 var(--f-ar); }
  .plate-more .i { width: 1em; height: 1em; }
  .plate-a:hover .plate-more, .plate-a:focus-visible .plate-more { opacity: 1; transform: none; }
  .plate-a:hover .plate-p, .plate-a:focus-visible .plate-p { opacity: 0; }
  .plate-p { transition: opacity var(--t-fast); }
  .board-sprig { display: block; position: absolute; color: var(--olive); pointer-events: none; }
  .board-sprig--a { width: 112px; left: 28%; top: 4%; transform: rotate(52deg); opacity: .9; }
  .board-sprig--b { width: 58px; right: 5%; bottom: 6%; transform: rotate(-28deg); opacity: .9; }
  [dir="rtl"] .board-sprig--a { left: auto; right: 31%; }
  [dir="rtl"] .board-sprig--b { right: auto; left: 5%; }
  .glass { display: block; position: absolute; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(104 119 60 / .35), inset 0 0 0 7px rgb(255 255 255 / .35), inset 0 0 0 8px rgb(226 180 99 / .55); pointer-events: none; }
  .glass--a { width: 84px; height: 84px; left: 88%; top: 6%; }
  .glass--b { width: 68px; height: 68px; left: 25%; top: 84%; }
  [dir="rtl"] .glass--a { left: auto; right: 88%; }
  [dir="rtl"] .glass--b { left: auto; right: 25%; }
}
@media (hover: none) { .plate-a:hover { transform: none; } }

/* ---------- D. statement ---------- */
.statement { position: relative; background: var(--paper); padding-block: 0 clamp(64px, 10vw, 120px); }
.st-stick { position: relative; width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }
.st-frame { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-arch); overflow: hidden; background: var(--sky); }
.st-img, .st-img img { width: 100%; height: 100%; }
.st-img img { object-fit: cover; object-position: 50% 100%; }
.st-t { position: absolute; inset-inline: 0; bottom: 7%; text-align: center; color: var(--olive-deep); font: 500 clamp(2.5rem, 1rem + 7.4vw, 9.5rem)/.94 var(--f-display); letter-spacing: -.025em; padding-inline: 6%; }
[dir="rtl"] .st-t { font: 700 clamp(2.3rem, 1rem + 6vw, 7.6rem)/1.35 var(--f-ar); letter-spacing: 0; }
@media (min-width: 760px) { .st-frame { aspect-ratio: 1.24; } }
html.js .st-t .ln-in { transition: transform 900ms var(--ease), opacity 700ms var(--ease); transition-delay: calc(var(--i) * 90ms); }
html.js .statement:not(.is-on) .st-t .ln-in { transform: translateY(105%); opacity: 0; }

/* the showpiece (desktop, motion allowed): a small arch opens to the whole street */
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  html.js .statement.is-live { height: 260vh; padding: 0; }
  html.js .statement.is-live .st-stick { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; }
  html.js .statement.is-live .st-frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; will-change: clip-path; }
  html.js .statement.is-live .st-img { will-change: transform; }
  html.js .statement.is-live .st-t { bottom: 8vh; }
}

/* ---------- E. evening ---------- */
.evening { background: var(--olive-deep); color: var(--ivory); padding-block: clamp(88px, 11vw, 168px); }
.evening .h2 { color: var(--ivory); }
.evening .body { color: rgb(254 249 239 / .86); }
.evening-in { display: grid; gap: clamp(56px, 7vw, 88px); }
.ev-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(40px, 5vw, 64px); max-width: 520px; }
.ev-ph img { width: 100%; aspect-ratio: 360 / 560; object-fit: cover; }
.ev-ph--b { margin-top: 56px; }
.evening figcaption { color: rgb(254 249 239 / .72); }
.dl + .dl { margin-top: clamp(40px, 5vw, 56px); }
.dl-h { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; font: 500 .8125rem/1.3 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); padding-bottom: .9rem; border-bottom: 1px solid var(--rule-ivory); }
[dir="rtl"] .dl-h { font: 700 1.1rem/1.3 var(--f-ar); letter-spacing: 0; }
.dl li a { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "n c a" "alt c a"; align-items: center; column-gap: 1rem; padding-block: .8rem; border-bottom: 1px solid var(--rule-ivory); text-decoration: none; }
.dl-n { grid-area: n; font: 500 clamp(1.4rem, 1.1rem + .9vw, 1.85rem)/1.15 var(--f-display); transition: translate var(--t-ui) var(--ease); }
[dir="rtl"] .dl-n { font: 700 1.5rem/1.4 var(--f-ar); }
.dl-alt { grid-area: alt; font-size: 1.05rem; color: rgb(254 249 239 / .64); line-height: 1.35; }
.dl-alt:lang(en) { font: 500 1rem/1.35 var(--f-display); }
.dl-c { grid-area: c; font-size: .875rem; color: rgb(254 249 239 / .7); white-space: nowrap; }
.dl li .i { grid-area: a; color: var(--gold); transition: translate var(--t-ui) var(--ease); }
.dl li a:hover .dl-n { translate: 6px 0; }
.dl li a:hover .i { translate: 4px 0; }
[dir="rtl"] .dl li a:hover .dl-n { translate: -6px 0; }
[dir="rtl"] .dl li a:hover .i { translate: -4px 0; }
.dl--bar ul { columns: 1; }
.oud { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 36px); border: 1px solid rgb(226 180 99 / .45); border-radius: 4px; }
.oud-t { font: italic 500 2rem/1.1 var(--f-display); color: var(--gold); }
[dir="rtl"] .oud-t { font: 700 1.8rem/1.4 var(--f-ar); }
.oud p { margin-top: .7rem; color: rgb(254 249 239 / .86); max-width: 32em; }
.oud .link { margin-top: .6rem; }
@media (min-width: 760px) { .dl--bar ul { columns: 2; column-gap: 2rem; } .dl--bar li { break-inside: avoid; } }
@media (min-width: 1100px) {
  .evening-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .ev-copy { grid-column: 1 / span 5; }
  .ev-lists { grid-column: 7 / span 6; padding-top: 8px; }
  .dl--bar ul { columns: 2; }
}

/* ---------- F. menu invitation ---------- */
.invite { background: var(--ivory); padding-block: clamp(88px, 11vw, 168px); overflow: clip; }
.invite-in { position: relative; display: grid; gap: clamp(48px, 6vw, 72px); }
.invite-head { text-align: center; max-width: 34rem; margin-inline: auto; margin-bottom: clamp(36px, 5vw, 56px); }
.invite-head .h2 { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.6rem); }
.invite-head .eyebrow { justify-content: center; }
.invite-head .eyebrow::after { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .7; }
.invite-head .body { margin-inline: auto; }
.invite-ph { display: none; }
.frame { position: relative; width: min(100%, 760px); margin-inline: auto; border: 1.5px solid var(--olive); border-radius: var(--radius-arch); padding: 9px; }
.frame::before { content: ""; position: absolute; inset: 9px; border: 1.5px solid var(--olive); border-radius: inherit; pointer-events: none; }
.frame-in { position: relative; padding: clamp(64px, 12vw, 120px) clamp(18px, 6vw, 72px) clamp(32px, 5vw, 56px); }
.frame-branch, .frame-branch-2 { position: absolute; color: var(--olive); stroke: var(--ivory); stroke-width: 5px; paint-order: stroke fill; overflow: visible; pointer-events: none; z-index: 2; }
.frame-branch { width: clamp(96px, 20vw, 170px); top: -4%; inset-inline-start: -6%; }
.frame-branch-2 { width: clamp(48px, 9vw, 86px); bottom: -3%; inset-inline-end: -4%; }
[dir="rtl"] .frame-branch, [dir="rtl"] .frame-branch-2 { transform: scaleX(-1); }
.pv-cat + .pv-cat { margin-top: clamp(32px, 4vw, 44px); }
.pv-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .2rem .8rem; text-align: center; font: 500 clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem)/1.1 var(--f-display); color: var(--olive); margin-bottom: .9rem; }
[dir="rtl"] .pv-h { font: 700 1.9rem/1.4 var(--f-ar); }
.pv-alt { font-size: .7em; color: var(--olive-ink); }
.pv-alt:lang(en) { font-family: var(--f-display); }
.pv-list a { display: flex; align-items: baseline; gap: .6rem; min-height: 44px; padding-block: .45rem; text-decoration: none; }
.pv-n { font-weight: 500; }
.pv-dots { flex: 1; border-bottom: 1px dotted rgb(40 50 31 / .4); transform: translateY(-.3em); }
.pv-p { font-variant-numeric: tabular-nums lining-nums; font-family: var(--f-text); }
.pv-list a:hover .pv-n { text-decoration: underline; }
.frame-note { margin-top: clamp(28px, 4vw, 40px); padding-top: 1rem; border-top: 1px solid var(--rule); text-align: center; font-size: .95rem; color: var(--olive-ink); }
.frame-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.6rem; margin-top: 1.6rem; }
@media (min-width: 1100px) {
  .invite-ph { display: block; position: absolute; inset-inline-start: 0; bottom: 6%; width: 220px; }
  .invite-ph img { width: 100%; aspect-ratio: 360 / 520; object-fit: cover; }
}

/* ---------- G. visit ---------- */
.visit { background: var(--paper); padding-block: clamp(88px, 11vw, 160px); }
.visit-in { display: grid; gap: clamp(48px, 6vw, 72px); }
.vinfo { margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--rule); }
.vinfo div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--rule); }
.vinfo dt { font: 500 .8125rem/1.7 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--olive-ink); }
[dir="rtl"] .vinfo dt { font: 700 1.05rem/1.7 var(--f-ar); letter-spacing: 0; }
.vinfo dd { display: flex; flex-direction: column; gap: .2rem; }
.vinfo dd a { font-weight: 500; font-size: 1.2rem; min-height: 32px; }
.vinfo small { font-size: .9rem; color: var(--olive-ink); }
.v-alt { color: var(--olive-ink); }
.vact { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(28px, 3vw, 36px); }
@media (max-width: 520px) { .vact li, .vact .btn { width: 100%; } }
.map { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--sand); box-shadow: inset 0 0 0 1px var(--rule); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 24px; text-align: center;
  background: radial-gradient(circle at 50% 40%, rgb(254 249 239 / .8), transparent 70%), repeating-linear-gradient(35deg, transparent 0 38px, rgb(104 119 60 / .08) 38px 39px), repeating-linear-gradient(-55deg, transparent 0 54px, rgb(104 119 60 / .07) 54px 55px), var(--sand); }
.map-cedar { width: 42px; height: 42px; color: var(--olive); }
.map-addr { font: 500 1.35rem/1.25 var(--f-display); max-width: 22ch; }
[dir="rtl"] .map-addr { font: 700 1.3rem/1.5 var(--f-ar); }
.map-ph small { color: var(--olive-ink); }
.map-fallback { display: none; }
html:not(.js) .map-ph .btn { display: none; }
html:not(.js) .map-fallback { display: inline-flex; min-height: 44px; align-items: center; }
@media (min-width: 1100px) {
  .visit-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .visit-copy { grid-column: 1 / span 5; }
  .map { grid-column: 7 / span 6; aspect-ratio: 5 / 4; }
}

/* ---------- 404 ---------- */
.page-404 { background: var(--olive); color: var(--ivory); }
.nf { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px var(--gutter); gap: 1rem; }
.nf .h2 { color: var(--ivory); margin-top: 1.5rem; }
.nf-logo { width: 180px; color: var(--gold); }
.nf .body { margin-inline: auto; }
.nf-act { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  html.js .statement:not(.is-on) .st-t .ln-in { transform: none; opacity: 1; }
}
@media print {
  .hero, .statement, .board-sprig, .glass, .map { break-inside: avoid; }
  .hero { background: #fff; color: #000; }
}