/* ==========================================================================
   Lyra Kitchen — home page only
   ========================================================================== */

/* chapter rail */
.chapters{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:50;display:grid;gap:18px}
.chapters a{width:10px;height:10px;border:1px solid var(--gold);transform:rotate(45deg);display:block;transition:.3s;position:relative}
.chapters a.on{background:var(--gold)}
.chapters a span{position:absolute;right:22px;top:50%;transform:translateY(-50%) rotate(-45deg);transform-origin:right center;font-family:var(--head);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:.3s;color:var(--gold-lit)}
.chapters a:hover span,.chapters a:focus-visible span{opacity:1}
@media(max-width:900px){.chapters{display:none}}

/* hero — the doorway.
   A wall of the restaurant's own photographs, laid like the black tesserae
   in the medallion and kept quiet; in the middle of it a gold mosaic arch
   with the room moving behind it. One thing, said big. */
.hero{
  --frame:clamp(24px,2.2vw,44px);
  height:100svh;min-height:640px;text-align:center;
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--tessera);color:var(--chalk);
}
/* the wall sits inside the gold frame, not under it: the frame is the
   edge of the picture, so nothing may spill past it */
.hero-mosaic{position:absolute;inset:var(--frame);overflow:hidden;background:var(--tessera);z-index:0}
/* the wall is laid by assets/js/hero-wall.js: crooked pieces cut from
   the photographs with clip-path, black grout between them */
.hero-wall{position:absolute;inset:0;background:var(--tessera) url(../img/tessera.svg) repeat;background-size:230px}
.hero-wall[data-laid]{background-image:none;background-color:#0c0b0a}
.tess{position:absolute;overflow:hidden;background:#101010;transform-origin:center;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
/* the opening flight: long, eased, and nothing is hoverable until it lands */
.hero-wall.intro{pointer-events:none}
.hero-wall.intro .tess{transition:transform 1.1s cubic-bezier(.2,.75,.15,1),opacity .7s ease}
/* a stone catches light in the middle and falls off at its edges */
.tess::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 70% at 45% 40%,rgba(255,255,255,.07),rgba(255,255,255,0) 60%,rgba(0,0,0,.42) 100%);
}
.tess img{
  width:100%;height:100%;object-fit:cover;display:block;user-select:none;
  filter:grayscale(1) brightness(.36) contrast(1.04);
  transition:filter .55s ease;
}
/* each piece cut to its own value of grey, all held low so the wall stays a wall */
.tess.d1 img{filter:grayscale(1) brightness(.17) contrast(1.16)}
.tess.d2 img{filter:grayscale(1) brightness(.26) contrast(1.1)}
.tess.d3 img{filter:grayscale(1) brightness(.36) contrast(1.04)}
.tess.d4 img{filter:grayscale(1) brightness(.47) contrast(.98)}
.tess.d5 img{filter:grayscale(1) brightness(.6) contrast(.92)}
.tess.d6 img{filter:grayscale(.82) sepia(.3) brightness(.32) contrast(1.08)}
.tess:hover{z-index:2;transform:scale(1.18)}
.tess:hover img{filter:none!important}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 52% at 50% 46%,rgba(7,7,7,.8) 0%,rgba(7,7,7,.55) 55%,rgba(7,7,7,.3) 100%),
    linear-gradient(180deg,rgba(7,7,7,.7) 0%,rgba(7,7,7,.12) 22%,rgba(7,7,7,.14) 60%,rgba(7,7,7,.86) 100%);
}

.hero-inner{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-inner a,.hero-inner button{pointer-events:auto}

/* ---- the mark ----------------------------------------------------------
   The medallion, set into the wall at the size of a doorway. */
/* small and dead centre, so the rings it sits in stay in view */
.hero{--mark:clamp(150px,16vw,18rem)}
.mark{position:absolute;left:50%;top:50%;translate:-50% -50%;width:var(--mark);opacity:0;animation:rise 1.3s 2.15s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rise{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.mark img{width:100%;height:auto;border-radius:50%;filter:drop-shadow(0 18px 40px rgba(0,0,0,.75))}
.mark::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:112%;height:112%;border:1px solid rgba(200,160,42,.35);border-radius:50%;pointer-events:none}
/* the ring variant: no disc, the wall shows through the lettering */
.hero.ring .mark img{border-radius:0;filter:drop-shadow(0 6px 22px rgba(0,0,0,.9))}
.hero.ring .mark::after{content:none}
.hero.ring .hero-scrim{
  background:
    radial-gradient(circle calc(var(--mark) * .62) at 50% 50%,rgba(7,7,7,.78) 0%,rgba(7,7,7,.55) 70%,rgba(7,7,7,0) 100%),
    radial-gradient(ellipse 60% 60% at 50% 50%,rgba(7,7,7,.3) 0%,rgba(7,7,7,.42) 60%,rgba(7,7,7,.6) 100%),
    linear-gradient(180deg,rgba(7,7,7,.66) 0%,rgba(7,7,7,.1) 20%,rgba(7,7,7,.1) 64%,rgba(7,7,7,.82) 100%);
}

/* the name, under the mark */
.hero-copy{position:absolute;left:0;right:0;top:calc(50% + var(--mark) / 2 + 1.4rem);padding:0 1.25rem;text-align:center}

.hero .frame{position:absolute;inset:var(--frame);border:1px solid rgba(200,160,42,.4);pointer-events:none;z-index:2;
  outline:1px solid rgba(200,160,42,.2);outline-offset:.4rem}
.hero .frame::before,.hero .frame::after,.hero .frame i::before,.hero .frame i::after{content:"";position:absolute;width:1.6rem;height:1.6rem;border:1px solid var(--gold)}
.hero .frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.hero .frame::after{top:-1px;right:-1px;border-left:0;border-bottom:0}
.hero .frame i::before{bottom:-1px;left:-1px;border-right:0;border-top:0}
.hero .frame i::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* the name, carved into the lower third of the doorway */
.hero .script{color:var(--gold);font-size:clamp(1.3rem,2.4vw,1.85rem);opacity:0;animation:fade 1.1s 2.9s forwards;text-shadow:0 2px 16px rgba(0,0,0,.85)}
.hero .type{font-size:clamp(.95rem,1.25vw,1.1rem);font-style:italic;color:rgba(236,228,212,.86);min-height:2.9em;margin:8px 0 14px;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.hero .type::after{content:"|";animation:blink 1s infinite;color:var(--gold)}
.hero .type.still::after{content:none}
@keyframes blink{50%{opacity:0}}
@keyframes fade{to{opacity:1}}
.hero .cta{opacity:0;animation:fade 1s 3.7s forwards;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.hero .cta .btn{padding:1em 2.3em;font-size:.72rem;letter-spacing:.22em}
.link-quiet{font-family:var(--head);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(236,228,212,.8);border-bottom:1px solid rgba(200,160,42,.45);padding-bottom:3px;transition:.3s}
.link-quiet:hover{color:var(--gold);border-color:var(--gold)}

/* the chapter rail waits until the doorway has scrolled past */
.chapters{opacity:0;pointer-events:none;transition:opacity .5s}
body.past-hero .chapters{opacity:1;pointer-events:auto}

@media(max-width:640px){
  .hero{min-height:600px}
  .hero{--frame:12px}
  .hero{--mark:min(44vw,180px)}
  .hero-copy{top:calc(50% + var(--mark) / 2 + 14px);padding:0 14px}
  .hero .script{font-size:clamp(1.05rem,5vw,1.3rem)}
  .hero .type{font-size:.95rem;min-height:3.2em;margin:6px 0 12px}
  .hero .cta{gap:10px}
}

/* the kitchen: a short note, three shorter ones, then what guests write.
   Under it, the cocktail and the lamb shank at a table in the room. */
.story{position:relative;background:var(--ink)}
.story{--ground:url(../img/ground/story.webp);--ground-op:.38;--ground-at:64% 50%}
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem;margin-top:3.6rem}
.note{border-top:1px solid rgba(200,160,42,.3);padding-top:1.2rem}
.note h3{font-size:.82rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lit);margin-bottom:.7rem}
.note p{color:rgba(236,226,204,.74)}
@media(max-width:800px){
  .notes{grid-template-columns:1fr;gap:1.9rem;margin-top:2.4rem}
}

/* the menu as a book you turn */
.menu{background:var(--ink-2);color:var(--paper)}
/* the same black mosaic the menu is printed on, from scripts/make-menu-pages.py */
.menu{--ground:url(../img/ground/menu.webp);--ground-op:.75;--ground-at:50% 50%}
.menu h2 em{font-style:normal;color:var(--gold)}
/* The book carries the whole menu, a line a dish, in leaves that turn.
   Every size inside a page is in em of the page's own width, so a page
   holds the same number of lines whatever the screen. */
.book{--bw:min(58rem,94vw);--pw:calc(var(--bw)/2);width:var(--bw);aspect-ratio:1.5;margin:3.75rem auto 1.9rem;position:relative;perspective:2600px}
/* the shadow the book throws on the bar, and the thickness of the leaves */
.book::before{content:"";position:absolute;left:3%;right:3%;bottom:-6%;height:12%;z-index:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),rgba(0,0,0,0) 70%)}
.book::after{content:"";position:absolute;left:50%;top:1.5%;bottom:1.5%;width:50%;z-index:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,rgba(23,19,16,.35) 1px 3px);
  transform:translateX(100%) scaleX(.012);transform-origin:left center;opacity:.9}
.page{position:absolute;top:0;width:50%;height:100%;left:50%;z-index:1;transform-style:preserve-3d;transform-origin:left center;transform:rotateY(0)}
.page .f,.page .b{position:absolute;inset:0;background:#ecebe9 url(../img/menu/paper.webp) center/cover;color:var(--ink);padding:1.7em 1.6em 1.6em;font-size:calc(var(--pw)/29);backface-visibility:hidden;overflow:hidden;box-shadow:inset 0 0 40px rgba(23,19,16,.08)}
.page .f::before,.page .b::before{content:"";position:absolute;inset:.7em;border:1px solid rgba(200,160,42,.55);pointer-events:none}
.page .f{border-left:1px solid rgba(23,19,16,.15)}
.page .b{transform:rotateY(180deg);border-right:1px solid rgba(23,19,16,.15)}
/* the light on a leaf as it turns: the spine side goes into shadow */
.page .f::after,.page .b::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s}
.page .f::after{background:linear-gradient(90deg,rgba(23,19,16,.55),rgba(23,19,16,.08) 40%,rgba(23,19,16,0))}
.page .b::after{background:linear-gradient(270deg,rgba(23,19,16,.55),rgba(23,19,16,.08) 40%,rgba(23,19,16,0))}
.page.flipped{transform:rotateY(-180deg)}
/* a leaf turns in 2s on one gentle ease, lifting only a little off the
   spine at the midpoint, and the shade on it comes and goes softly */
.page{--turn:2s;--ease:cubic-bezier(.4,.1,.25,1)}
.page.turn-f{animation:turnF var(--turn) var(--ease) both}
.page.turn-b{animation:turnB var(--turn) var(--ease) both}
.page.turn-f .f::after,.page.turn-b .b::after{animation:lit var(--turn) ease-in-out both}
.page.turn-f .b::after,.page.turn-b .f::after{animation:lit var(--turn) ease-in-out reverse both}
@keyframes turnF{0%{transform:rotateY(0) translateZ(0)}50%{transform:rotateY(-90deg) translateZ(1.2em)}100%{transform:rotateY(-180deg) translateZ(0)}}
@keyframes turnB{0%{transform:rotateY(-180deg) translateZ(0)}50%{transform:rotateY(-90deg) translateZ(1.2em)}100%{transform:rotateY(0) translateZ(0)}}
@keyframes lit{0%{opacity:0}50%{opacity:.6}100%{opacity:0}}
/* the pages at rest keep a little shade at the spine, as a bound book does */
.page .f{box-shadow:inset 24px 0 36px -24px rgba(23,19,16,.35)}
.page .b{box-shadow:inset -24px 0 36px -24px rgba(23,19,16,.35)}
.pg h3{font-family:var(--head);font-size:1.05em;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-align:center;color:var(--gold-ink);margin:.6em 0 .1em}
.pg h3:first-child{margin-top:0}
.pg .script{text-align:center;display:block;font-family:var(--script);font-size:1.45em;line-height:1;margin-bottom:.55em;color:var(--gold-ink)}
.pg h4{font-family:var(--head);font-size:.68em;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:.9em 0 .5em}
.pg ul{list-style:none;display:grid;gap:.34em}
.pg li{display:flex;justify-content:space-between;gap:.7em;align-items:baseline;font-size:.84em;line-height:1.2}
.pg li span{display:flex;align-items:baseline;flex:1;gap:.5em;min-width:0}
.pg li span::after{content:"";flex:1;border-bottom:1px dotted rgba(23,19,16,.4);margin-bottom:.3em;min-width:1.5em}
.pg li b{font-family:var(--head);font-weight:600;color:var(--gold-ink);font-size:.86em;white-space:nowrap}
.pg .num{position:absolute;bottom:.75em;font-family:var(--head);font-size:.55em;letter-spacing:.3em;color:var(--muted)}
.page .f .num{right:1.6em}
.page .b .num{left:1.6em}
.pg .fin{height:100%;display:grid;place-content:center;justify-items:center;gap:.6em;text-align:center}
.pg .fin img{width:4.5em;height:4.5em;opacity:.85}
.pg .fin .script{margin:0}
.pg .fin small{font-family:var(--head);font-size:.55em;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.cover{position:absolute;left:0;top:0;width:50%;height:100%;z-index:1;background:var(--ink-2) url(../img/menu/cover.webp) center/cover;border:1px solid rgba(200,160,42,.45);box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
/* the hero's line under the ring on the cover, in the same hand */
.cover .script{position:absolute;left:0;right:0;top:55.5%;text-align:center;font-family:var(--script);font-size:calc(var(--pw)/17);line-height:1;color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.ctrls{display:flex;justify-content:center;gap:14px;font-family:var(--head);font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;flex-wrap:wrap}
.ctrls button{background:none;border:1px solid var(--gold);color:var(--paper);padding:12px 26px;cursor:pointer;font-family:inherit;letter-spacing:inherit;transition:.3s}
.ctrls button:hover{background:var(--gold);color:var(--ink-2)}
.ctrls button[disabled]{opacity:.35;cursor:default}
.ctrls button[disabled]:hover{background:none;color:var(--paper)}
.ctrls a.full{display:inline-block;border:1px solid rgba(200,160,42,.55);color:var(--gold-lit);padding:12px 26px;transition:.3s}
.ctrls a.full:hover{background:var(--gold);color:var(--ink-2)}
@media(max-width:700px){
  /* on a phone the leaves lie side by side and are swiped through */
  .book{--pw:84vw;width:auto;aspect-ratio:auto;perspective:none;display:flex;gap:4vw;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 8vw 1.2rem;margin:2.4rem -4vw 1rem;scrollbar-width:none}
  .book::-webkit-scrollbar{display:none}
  .book::before,.book::after,.cover{display:none}
  .page{display:contents}
  .page .f,.page .b{position:relative;inset:auto;flex:0 0 var(--pw);height:calc(var(--pw)*1.34);transform:none;border:0;scroll-snap-align:center;box-shadow:0 18px 40px rgba(0,0,0,.5)}
  .page .f::after,.page .b::after{display:none}
  .ctrls button:not(.full){display:none}
}
}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1.9rem;margin-top:3.75rem}
.orn-frame{position:relative;padding:14px;border:1px solid rgba(112,85,12,.55)}
.orn-frame::before{content:"";position:absolute;inset:5px;border:1px solid rgba(112,85,12,.4);pointer-events:none;transition:.5s}
.orn-frame:hover::before{inset:-6px}
.orn-frame .im{aspect-ratio:3/4;overflow:hidden;background:linear-gradient(160deg,#c9b58f,#6d6252)}
.orn-frame img{width:100%;height:100%;object-fit:cover;filter:sepia(.45) contrast(1.05);transition:1s}
.orn-frame:hover img{filter:none;transform:scale(1.04)}
.orn-frame figcaption{text-align:center;font-style:italic;color:var(--muted);margin-top:12px}
@media(max-width:800px){.gal{grid-template-columns:1fr}}

/* what's on */
.whats{background:var(--ink-2);padding:7rem 0;--ground:url(../img/ground/whats.webp);--ground-op:.42;--ground-at:86% 50%}
/* What's On: three arches, a still of the room in each, the day and the
   event written beneath. Same arch as Around the Table, laid three across. */
.events{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,18rem));justify-content:center;gap:clamp(1.4rem,3vw,2.8rem);margin:3.6rem auto 0;max-width:62rem}
.event{display:flex;flex-direction:column;gap:.7rem;text-align:center;align-items:center}
.event .arch{width:100%;margin:0 0 1rem}
.event .arch img,.event .arch video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s}
.event:hover .arch img,.event:hover .arch video{transform:scale(1.04)}
.event .when{font-family:var(--head);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lit)}
.event h3{font-size:1.5rem;font-weight:500}
.event p{color:rgba(236,226,204,.82);flex:1;max-width:19rem}
.event a{font-family:var(--head);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-lit);border-bottom:1px solid rgba(200,160,42,.5);padding-bottom:3px;transition:.3s}
.event a:hover{color:var(--gold-hi);border-color:var(--gold-hi)}
@media(max-width:800px){
  .events{grid-template-columns:minmax(0,18rem);margin-top:2.4rem}
  .whats{padding:5rem 0}
}

/* whatsapp under the telephone */
.visit .wa{display:inline-flex;align-items:center;gap:8px;margin-top:8px;color:var(--gold-lit);font-family:var(--head);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(200,160,42,.5);padding-bottom:2px}
.visit .wa:hover{color:var(--gold-hi)}
.visit .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* guest quotes, closing the kitchen chapter */
.quotes{text-align:center;margin-top:5.5rem}
.qwrap{position:relative;height:220px;max-width:760px;margin:28px auto 0}
.q{position:absolute;inset:0;opacity:0;transition:1.2s;display:grid;place-content:center;gap:16px}
.q.on{opacity:1}
.q p{font-size:clamp(1.3rem,2.6vw,1.9rem);font-style:italic;line-height:1.5}
.q cite{font-family:var(--head);font-style:normal;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lit)}

/* visit — the glass set down on the black top */
.visit{background:var(--ink);--ground:url(../img/ground/visit.webp);--ground-op:.4;--ground-at:26% 50%}
.visit .grid{display:grid;grid-template-columns:1fr 1fr;gap:3.75rem;margin-top:3.75rem;align-items:start}
.visit h3{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lit);margin-bottom:10px}
.visit .block{margin-bottom:30px}
.visit .hours{display:grid;grid-template-columns:auto 1fr;gap:4px 30px}
/* the card and the menu book are the only paper left on the page, so
   they keep --gold-ink and --muted; nothing outside them may. */
.visit .card{border:1px solid rgba(200,160,42,.45);padding:2.5rem;background:var(--paper-2);color:var(--ink);position:relative}
.visit .card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(112,85,12,.35);pointer-events:none}
.visit form{display:grid;gap:18px}
.visit input,.visit select{width:100%;background:none;border:0;border-bottom:1px solid rgba(23,19,16,.3);padding:10px 0;font-family:var(--body);font-size:1.05rem;color:var(--ink);outline:0}
.visit input:focus{border-color:var(--gold-ink)}
.visit .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:800px){.visit .grid{grid-template-columns:1fr}}

/* around the table — a glass and the little brass lamp, late on */
#gallery{background:var(--ink);--ground:url(../img/ground/gallery.webp);--ground-op:.42;--ground-at:50% 50%}
/* the one gold button that stands on the dark, not on the card */
#gallery .btn.gold{border-color:var(--gold);color:var(--gold)}
#gallery .btn.gold::after{border-color:rgba(200,160,42,.4)}
#gallery .btn.gold:hover{background:var(--gold);color:var(--tessera)}
#gallery .btn.gold:hover::after{border-color:rgba(7,7,7,.4)}

/* The sections that carry a photograph under them. A picture may lie under
   a section, never over it, and nothing may lie over the picture: the dot
   texture stops at the edge of these sections, so each one paints its own
   flat colour rather than letting the body's grid show through the frame.
   The frame itself is left as shot - no tint, barely any blur - and only
   the fade at its edges is baked in by scripts/make-section-grounds.py.
   Nothing here runs a filter: a filter on a layer at z-index:-1 makes
   Chrome paint that layer over the words. */
.story,.menu,#gallery,.visit,.whats{position:relative;isolation:isolate}
/* Four sections carry a photograph, and each stands a full screen
   tall so the frame has room to show. The grounds are landscape frames cut
   to the section's own shape; --ground-at is the subject, so when a phone
   narrows the section into a column the crop keeps the glass. */
.story,.menu,#gallery,.visit,.whats{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.story::before,.menu::before,#gallery::before,.visit::before,.whats::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--ground);
  background-position:var(--ground-at,center);background-size:cover;background-repeat:no-repeat;
  opacity:var(--ground-op,.32);
}
/* The landscape frames carry white marble, and marble under cream type
   fails 4.5:1. A shade lies over the middle of the frame, where the words
   stand, and thins out toward the edges so the picture still reads there. */
.story::after,.menu::after,#gallery::after,.visit::after,.whats::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(11,10,9,var(--shade,.6)),rgba(11,10,9,0) 100%);
}
/* Narrow screens zoom the ground hard. Each ground is cut to the shape its
   section is laid in on the desktop, and a phone turns that section into a
   tall column, so background-size:cover scales the picture up and whatever
   bright part of it lands under the words lands there several times
   larger. The picture is held back there rather than recut, since the type
   has to clear 4.5:1 over it either way. */
@media(max-width:900px){
  .story,.menu,#gallery,.visit,.whats{--ground-op:.3}
}

/* the footer stays flat: no tesserae, no photograph */
footer.stone::before{display:none}

/* Around the Table: arches for vertical clips.
   Each arch is a 9:16 box whose top is a half circle. The half circle's
   radius is half the width, which is 28.125% of the height at 9:16; the
   horizontal radii pair up to exactly 100% or the browser scales every
   radius down and the arch flattens into a rectangle. A thin gold line
   follows the same curve a few pixels outside. */
.arches{
  --gap:clamp(14px,2vw,1.75rem);
  list-style:none;margin:3.4rem auto 0;max-width:62rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
}
.arch{
  position:relative;aspect-ratio:9/16;
  border-radius:50% 50% 0 0 / 28.125% 28.125% 0 0;
  overflow:hidden;background:#0c0b0a;
}
.arch video{width:100%;height:100%;object-fit:cover;display:block}
.arch::after{
  content:"";position:absolute;inset:6px;pointer-events:none;
  border:1px solid rgba(200,160,42,.55);border-bottom:0;
  border-radius:50% 50% 0 0 / 28.125% 28.125% 0 0;
}
.arches-cta{text-align:center;margin-top:2.6rem}
/* A phone shows the arches as a row to swipe, one and a half at a time,
   so the clips keep their height instead of shrinking to stamps. */
@media(max-width:800px){
  .arches{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;
    overflow-x:auto;scroll-snap-type:x mandatory;margin-top:2.4rem;
    padding-bottom:.6rem;scrollbar-width:none;
  }
  .arches::-webkit-scrollbar{display:none}
  .arch{scroll-snap-align:center}
}

/* reservation form */
.visit label{display:block;font-family:var(--head);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.visit label input,.visit label select{margin-top:2px}
.visit select{font-family:var(--body);font-size:1.05rem}
.visit label[hidden]{display:none}
.visit .form-note{min-height:1.6em;margin-top:2px;font-style:italic;color:var(--gold-ink)}
.visit .form-note[data-state="error"]{color:#8c2f16}