/*
Theme Name: Al Reem
Theme URI: https://alreemrestaurant.com
Author: Al Reem
Description: Halal Mediterranean restaurant, Porto. Self-contained theme: menu rendered from data/menu.json.
Version: 1.0.5
Requires PHP: 7.4
Text Domain: alreem
*/

/* ------------------------------------------------------------------
   AL REEM — Direction A, "warm daylight".
   Cream is the page. The photographs sit on it without card, border or
   shadow: they were shot on a pale cream ground, so they are painted in
   multiply blend and the paper itself becomes their background.

   Every word of all four pages is real markup in the served file, in
   English. JavaScript does one thing only: it shows one page and hides
   the others. The menu's diet filter is CSS.
   ------------------------------------------------------------------ */

:root{
  /* the four brand colours, read from the live stylesheet */
  --cream:#FFECCA;   /* the page */
  --olive:#6D6E4A;   /* headings — 4.55:1 on cream */
  --tan:#A07850;     /* ornament and large type only — 3.42:1 on cream */
  --brown:#614931;   /* body text — 7.22:1 on cream */

  /* derived steps: tan and brown let down onto the cream itself, hairlines only */
  --rule:rgba(160,120,80,.34);   /* ≈ #E1D0AE over cream — 1.15:1, decorative hairline */
  --rule-2:rgba(97,73,49,.42);   /* ≈ #C3AE8C over cream — 1.55:1, section hairline */
  --rule-3:rgba(97,73,49,.70);   /* ≈ #937C5F over cream — 2.60:1, heavy hairline */

  --display:"Fraunces","Times New Roman",Georgia,serif;
  --sans:"Karla","Helvetica Neue",Arial,sans-serif;

  /* one strict scale, with big jumps between the levels */
  --f-label:.6875rem;
  --f-sm:.8125rem;
  --f-body:1rem;
  --f-lead:clamp(1.0625rem,.95rem + .5vw,1.3125rem);
  --f-dish:1.125rem;
  --f-h3:clamp(1.1875rem,1.05rem + .55vw,1.5rem);
  --f-h2:clamp(1.85rem,1.35rem + 2.2vw,3rem);
  --f-h1:clamp(2.3rem,1.5rem + 3.6vw,4.5rem);
  /* measured: Gloock sets at about .41em average, so the longest hero line
     — "Halal Mediterranean", 19 characters — fills the measure at 8.6vw at
     every width and still clears 400px. */
  --f-hero:clamp(2.4rem,8.6vw,7.25rem);

  --gutter:clamp(1rem,5vw,4.5rem);
  --measure:34em;

  /* the three fixed strips: header, menu section bar, phone action bar.
     Header and bar are given a height so that scroll margins and the
     sticky offsets can be computed without measuring. */
  --hdr-h:3.25rem;
  --bar-h:2.75rem;
  --act-h:3.5rem;
  scroll-behavior:smooth;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--cream);
  color:var(--brown);
  font:400 var(--f-body)/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;   /* clip, so the sticky header keeps working */
}

img{max-width:100%}
[hidden]{display:none!important}

h1,h2,h3{font-family:var(--display);font-weight:400;font-style:normal;margin:0;color:var(--olive)}
p{margin:0}
a{color:inherit}

.wrap{width:100%;max-width:72rem;margin-inline:auto;padding-inline:var(--gutter)}

/* --- skip link ---------------------------------------------------- */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--cream);color:var(--brown);border:1px solid var(--rule-3);font-size:var(--f-sm);text-decoration:none}
.skip:focus{position:fixed;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:50;
  width:auto;height:auto;clip-path:none;padding:.6rem 1rem}

/* --- header ------------------------------------------------------- */
/* one row at every width: the wordmark and three links fit in 288px */
header{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:1px solid var(--rule-2);height:var(--hdr-h)}
.bar{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:1.5rem;height:100%}
.brand{display:flex;align-items:baseline;text-decoration:none;white-space:nowrap}
.brand b{font:400 1.4rem/1 var(--display);color:var(--olive);letter-spacing:.005em}
nav{display:flex;flex-wrap:nowrap;gap:0 1.35rem}
/* the letters stay 11px; the hit area is grown to about 44px with a pseudo-element */
.navlink{display:inline-block;position:relative;text-decoration:none;padding:.25rem 0;
  font:600 var(--f-label)/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--brown);border-bottom:1px solid transparent;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.navlink::before{content:"";position:absolute;inset:-.6rem -.55rem}
.navlink[aria-current="page"]{color:var(--olive);border-bottom-color:var(--tan)}
.navlink:hover{color:var(--olive)}

:focus-visible{outline:2px solid var(--olive);outline-offset:3px}

/* --- phone action bar ---------------------------------------------
   Call and Directions, fixed to the bottom of every page on a phone.
   Both are facts that already exist on the page; nothing is added. */
.act{display:none}
@media (max-width:699px){
  body{padding-bottom:calc(var(--act-h) + env(safe-area-inset-bottom))}
  .act{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;
    background:var(--cream);border-top:1px solid var(--rule-2);padding-bottom:env(safe-area-inset-bottom)}
  .act a{flex:1 1 0;min-height:var(--act-h);display:inline-flex;align-items:center;justify-content:center;
    text-decoration:none;font:600 var(--f-label)/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;
    color:var(--brown)}
  .act a+a{border-left:1px solid var(--rule-2)}
  .act a:hover{color:var(--olive)}
}

/* --- photographs: no card, no border, no shadow --------------------
   Every dish was shot on the same warm paper, measured at about
   rgb(190,175,160). The SVG filter below lifts that paper to white,
   channel by channel, and multiply blend then drops it back onto
   #FFECCA — so the photograph's own background becomes this page and
   the plate is left floating on it. Shadows are held in place by the
   small negative intercept; only the pale ground moves.
   Every plate was also shot small in a very large frame, so the element
   is painted 1.3x and the vignette's radii are divided by the same
   number: in page terms the fade is identical, the food is 30% bigger. */
.ph{display:block;width:100%;height:auto;object-fit:contain;
  aspect-ratio:3/4;}

/* The section thumbnails are small and some of the plates are very pale;
   the full vignette erased them, so they get a much softer one. */
.hero-fig,.side-fig,.ph-box,.rail>li{overflow:clip}

/* --- home ---------------------------------------------------------- */
.eyebrow{font:600 var(--f-label)/1.4 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:var(--olive)}
.hero{padding-block:clamp(2.75rem,7vw,6.5rem) clamp(2rem,4vw,3.5rem)}
.display span{display:block}
.display span+span{color:var(--brown)}
/* the one-line fact strip under a page's h1, and the actions beside it */
.strip{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--rule);
  font:500 var(--f-sm)/1.6 var(--sans);letter-spacing:.02em;color:var(--brown);font-variant-numeric:tabular-nums}
.strip+.links{margin-top:.9rem}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3.5rem);
  margin-top:clamp(1.75rem,4vw,3.25rem);align-items:end}
.hero-lead{font-size:var(--f-lead);line-height:1.62;max-width:30em;color:var(--brown)}
.hero-lead::before{content:"";display:block;width:3.5rem;border-top:1px solid var(--tan);margin-bottom:1.4rem}
.hero-fig{margin:0}
.hero-fig .ph{aspect-ratio:3/4}
.cap{margin-top:.7rem;font-size:var(--f-sm);line-height:1.55;color:var(--brown)}
.cap b{font:400 var(--f-sm) var(--display);letter-spacing:.01em}
@media (min-width:820px){ .hero-grid{grid-template-columns:1.05fr .95fr;gap:4rem} }

section.band{border-top:1px solid var(--rule-2);padding-block:clamp(2.5rem,6vw,5.5rem)}
.band-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem}
.band-head h2{font-size:var(--f-h2);line-height:1.05;letter-spacing:-.015em}
.band-note{font-size:var(--f-sm);max-width:32em;color:var(--brown)}

.rail{list-style:none;display:flex;margin:clamp(1.75rem,4vw,2.75rem) 0 0;padding:0 0 1.5rem;
  gap:clamp(1.15rem,3vw,2.5rem);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--rule-3) transparent}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--rule-3)}
.rail>li{flex:0 0 clamp(158px,42vw,224px);scroll-snap-align:start}
.rail h3{font-family:var(--display);font-size:var(--f-dish);line-height:1.25;
  margin-top:.85rem;color:var(--brown)}
.rail-hint{margin-top:1.25rem;font:600 var(--f-label)/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--brown)}
.rail-hint+.rail{margin-top:.5rem}
/* the rail stops scrolling and sets as rows of three once there is room. */
@media (min-width:700px){
  .rail{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;padding-bottom:0;
    column-gap:clamp(1.5rem,3vw,2.75rem);row-gap:clamp(2rem,4vw,3.25rem)}
  .rail>li{flex:none}
  .rail-hint{display:none}
}
.rail .meta{margin-top:.2rem;font:500 var(--f-sm)/1.5 var(--sans);color:var(--brown);
  font-variant-numeric:tabular-nums}
.rail .d{margin-top:.35rem;font-size:var(--f-sm);line-height:1.55;color:var(--brown)}

.pledge{display:grid;gap:clamp(1.25rem,3vw,2.5rem);grid-template-columns:1fr}
.pledge h2{font-size:var(--f-h2);line-height:1.06;letter-spacing:-.015em;max-width:18ch}
.pledge p{max-width:var(--measure)}
@media (min-width:820px){ .pledge{grid-template-columns:1fr 1fr;align-items:start} }

.links{display:flex;flex-wrap:wrap;gap:.75rem 2.25rem;margin-top:1.75rem}
.tlink{display:inline-block;position:relative;text-decoration:none;padding:.15rem 0;text-align:start;
  font:600 var(--f-label)/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--brown);border-bottom:1px solid var(--tan)}
.tlink::before{content:"";position:absolute;inset:-.7rem -.5rem}
.tlink:hover{color:var(--olive)}
/* an address or map link inside running text */
.maplink{text-decoration:none;border-bottom:1px solid var(--tan)}
.maplink:hover{color:var(--olive)}

/* --- article pages -------------------------------------------------- */
.page-head{padding-block:clamp(2.5rem,6vw,5rem) clamp(1.5rem,3vw,2.5rem)}
.page-head h1{font-size:var(--f-h1);line-height:1.02;letter-spacing:-.022em;max-width:16ch}
.page-head .lead{margin-top:1.5rem;font-size:var(--f-lead);line-height:1.6;max-width:30em}

.prose{max-width:var(--measure)}
.prose p+p{margin-top:1.35rem}
.prose h3{font-size:var(--f-h3);line-height:1.22;letter-spacing:-.01em;margin-top:2.25rem}
.prose h3+p{margin-top:.6rem}
.prose .drop::first-letter{font-family:var(--display);font-size:3.1em;line-height:.82;
  float:left;padding-inline-end:.09em;margin-top:.06em;color:var(--olive)}
.prose strong{font-weight:600}
.prose strong.dn,.dn{font:400 1.0625rem/1.5 var(--display);color:var(--olive);letter-spacing:.004em}
.h2-solo{font-size:var(--f-h2);line-height:1.05;letter-spacing:-.015em;margin-bottom:1.2rem}
.lead-in{font:600 var(--f-body)/1.6 var(--sans);color:var(--olive)}
.jump{display:block;height:0;scroll-margin-top:var(--hdr-h)}
.qa h3,.prose h3{scroll-margin-top:calc(var(--hdr-h) + .75rem)}

.two{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (min-width:900px){ .two{grid-template-columns:1.15fr .85fr} }
.side-fig{margin:0}
.side-fig .ph{aspect-ratio:3/4}

/* --- questions ------------------------------------------------------- */
.qa{border-top:1px solid var(--rule);padding-block:1.25rem;max-width:var(--measure)}
.qa h3{font-size:var(--f-h3);line-height:1.22;letter-spacing:-.01em}
.qa p{margin-top:.45rem}
.qas{margin-top:clamp(1.25rem,3vw,2rem)}

/* --- menu ------------------------------------------------------------ */
/* Show: All · Vegetarian · Vegan. Three radios, no JavaScript: the rows
   are hidden with :has() further down, and every row stays in the HTML. */
.diet{display:flex;flex-wrap:wrap;align-items:center;gap:0 .25rem;margin:1.25rem 0 0;padding:0;border:0;min-width:0}
.diet legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.diet .lbl{font:600 var(--f-label)/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--olive);margin-inline-end:.5rem}
.diet input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.diet label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 .7rem;cursor:pointer;
  font:600 var(--f-label)/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--brown)}
.diet label::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.7rem;border-top:1px solid transparent}
.diet label:hover{color:var(--olive)}
.diet input:checked+label{color:var(--olive)}
.diet input:checked+label::after{border-top-color:var(--tan)}
.diet input:focus-visible+label{outline:2px solid var(--olive);outline-offset:-3px}

.legend{display:flex;flex-wrap:wrap;gap:0 1.35rem;margin-top:.9rem;padding-top:.3rem}
.legend a,.legend span{font-size:var(--f-sm);padding-block:.45rem;text-decoration:none}
.legend a:hover{color:var(--olive)}
.legend b{font:600 var(--f-label) var(--sans);letter-spacing:.1em;color:var(--olive);margin-inline-end:.4rem}
.legend .note{flex:1 0 100%;padding-top:.2rem}

/* The section index sticks under the header for the whole menu page: one
   row, scrolled sideways when it does not fit. */
.menu-bar{position:sticky;top:var(--hdr-h);z-index:19;background:var(--cream);border-bottom:1px solid var(--rule-2)}
.index{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0;margin:0 calc(-1*var(--gutter));padding-inline:calc(var(--gutter) - .7rem);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.index::-webkit-scrollbar{display:none}
.index a{flex:none;display:inline-flex;align-items:center;min-height:var(--bar-h);padding:0 .7rem;position:relative;
  font:600 var(--f-label)/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--brown);text-decoration:none;white-space:nowrap}
.index a::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.7rem;border-top:1px solid transparent}
.index a:hover,.index a:focus-visible{color:var(--olive)}
.index a:hover::after{border-top-color:var(--tan)}

.cat{border-top:1px solid var(--rule-3);padding-block:clamp(2rem,4.5vw,3.5rem);scroll-margin-top:calc(var(--hdr-h) + var(--bar-h) + .75rem)}
.cat-lead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 2rem}
.cat-title{flex:1 1 12rem;min-width:0}
.cat-title h2{font-size:var(--f-h2);line-height:1.05;letter-spacing:-.015em}
.cat-x{display:block;margin-top:.5rem;font:500 var(--f-sm)/1.5 var(--sans);letter-spacing:.02em;
  color:var(--brown);font-variant-numeric:tabular-nums}
.cat-fig{margin:0;flex:0 0 clamp(88px,22vw,196px)}
.cat-fig .ph{aspect-ratio:3/4}
.cat-fig .cap{margin-top:.2rem;font-size:var(--f-label);line-height:1.45}
.cat-fig .cap b{font-size:var(--f-sm)}
.cat-note{margin-top:clamp(1.1rem,2.5vw,1.6rem)}
/* the glossary for a section sits under its list, where the dish names are */
.cat-words{margin-top:clamp(1.5rem,3vw,2.25rem)}
.cat-words .eyebrow+p{margin-top:.5rem}

.dishes{list-style:none;margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding:0}
.dish{padding-block:1.05rem;break-inside:avoid}
.dish+.dish{border-top:1px solid var(--rule)}
/* wide screens read down one column, then the next */
@media (min-width:880px){ .dishes{columns:2;column-gap:clamp(2.5rem,5vw,4.5rem)} }
.dish-top{display:flex;align-items:baseline;gap:.7rem}
.dish-name{font:500 var(--f-dish)/1.3 var(--display);color:var(--brown);letter-spacing:.004em}
.leader{flex:1 1 auto;height:0;border-bottom:1px dotted var(--rule-3);transform:translateY(-.3em)}
.price{font:500 .9375rem/1.4 var(--sans);color:var(--brown);font-variant-numeric:tabular-nums;white-space:nowrap}
.desc{margin-top:.3rem;font-size:var(--f-sm);line-height:1.6;color:var(--brown);max-width:44ch}
/* the four classic mocktails carry the sentence already printed above the list */
#cat-classic-mocktails .desc{display:none}
/* the same glyphs as the legend: diet tag first, in olive; allergens after, in brown */
.tags{margin-top:.25rem;display:flex;flex-wrap:wrap;gap:0 .7rem}
.tags abbr{font:600 var(--f-label)/1 var(--sans);letter-spacing:.1em;color:var(--brown);
  text-decoration:none;border-bottom:0;padding:.35rem 0}
.tags .t-v,.tags .t-vg{color:var(--olive)}

/* the filter: hide food rows that do not carry the tag, then any food
   section left with nothing in it, its index link, and the counts that
   would now be wrong. Drinks are never filtered. */
#page-menu:has(#diet-vg:checked) .food .dish:not(:has(.t-v,.t-vg)),
#page-menu:has(#diet-v:checked) .food .dish:not(:has(.t-v)),
#page-menu:has(#diet-vg:checked) .food:not(:has(.t-v,.t-vg)),
#page-menu:has(#diet-v:checked) .food:not(:has(.t-v)),
#page-menu:has(#diet-v:checked) .index a[href="#cat-main-dishes"],
#page-menu:has(#diet-v:checked) .index a[href="#cat-desserts"],
#page-menu:has(#diet-v:checked) .index a[href="#cat-junior-guests"],
#page-menu:has(:is(#diet-vg,#diet-v):checked) .food .cat-x{display:none}

.drinks-rule{border-top:1px solid var(--rule-3);margin-top:clamp(2rem,4vw,3rem);padding-top:1.15rem}
.drinks-rule p{font:600 var(--f-label)/1.5 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--olive)}
#page-menu .band{scroll-margin-top:calc(var(--hdr-h) + var(--bar-h) + .75rem)}

/* --- visit ------------------------------------------------------------ */
.facts{margin:0;padding:0}
.band.flush{border-top:0;padding-top:0}
.fact{border-top:1px solid var(--rule-2);padding-block:1.15rem;display:grid;grid-template-columns:1fr;gap:.3rem}
@media (min-width:700px){ .fact{grid-template-columns:11rem 1fr;gap:2rem} }
.fact dt{font:600 var(--f-label)/1.7 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--olive)}
.fact dd{margin:0;font-size:var(--f-body);line-height:1.6;max-width:34em}
.fact dd.quiet{font-size:var(--f-sm)}
.fact a{text-decoration:none;border-bottom:1px solid var(--tan)}
.fact a:hover{color:var(--olive)}
.fact a[href^="tel:"],.foot a[href^="tel:"]{display:inline-block;padding-block:.5rem;margin-block:-.5rem}
.addr{display:inline-block;font:400 clamp(1.25rem,2.4vw,1.6rem)/1.35 var(--display);color:var(--brown)}
a.addr{border-bottom:0;text-decoration:none}
a.addr:hover{color:var(--olive)}
.fact .links{margin-top:.9rem}
.social{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.45rem;max-width:var(--measure)}
.social a{text-decoration:none;border-bottom:1px solid var(--tan)}
.social a:hover{color:var(--olive)}

/* --- footer ------------------------------------------------------------ */
footer{border-top:1px solid var(--rule-3);padding-block:clamp(2.25rem,5vw,3.5rem) 3rem;
  margin-top:clamp(2rem,5vw,4rem)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem 3rem;align-items:start}
.foot p{font-size:var(--f-sm);line-height:1.65;max-width:26em}
.foot .mark{font:400 1.25rem/1 var(--display);color:var(--olive)}
.foot a,.fact a{white-space:nowrap}
.foot a{text-decoration:none;border-bottom:1px solid var(--tan)}

@media (prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---- per-dish photograph, matched from the menu data. Uncropped: the photo keeps its
   own 3:4 frame, and because it was shot on cream the frame is invisible on the page. ---- */
.dish.has-thumb{display:grid;grid-template-columns:104px 1fr;gap:0 1rem;align-items:start}
.dish .thumb{display:block;width:104px;height:139px;object-fit:cover;border-radius:6px;box-shadow:0 0 0 1px rgba(97,73,49,.10)}
.dish.has-thumb .dish-top,.dish.has-thumb .desc,.dish.has-thumb .tags{grid-column:2}
@media (max-width:480px){.dish.has-thumb{grid-template-columns:84px 1fr;gap:0 .8rem}.dish .thumb{width:84px;height:112px}}

/* ---- tag icons ---- */
.tags abbr,.legend a{display:inline-flex;align-items:center;gap:.3rem}
.tags abbr::before,.legend a::before{content:"";width:14px;height:14px;flex:none;background-repeat:no-repeat;background-size:14px 14px;background-position:center}
.tags abbr.t-v::before,.legend a.t-v::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236D6E4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13C3 7 7 3 13 3c0 6-4 10-10 10Z'/%3E%3Cpath d='M3 13l6-6'/%3E%3C/svg%3E")}
.tags abbr.t-vg::before,.legend a.t-vg::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236D6E4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14V8'/%3E%3Cpath d='M8 8C8 5 6 4 4 4c0 3 2 4 4 4Z'/%3E%3Cpath d='M8 8c0-3 2-4 4-4 0 3-2 4-4 4Z'/%3E%3C/svg%3E")}
.tags abbr.t-cg::before,.legend a.t-cg::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23614931' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 15V4'/%3E%3Cpath d='M8 5l-3-2M8 5l3-2M8 8l-3-2M8 8l3-2M8 11l-3-2M8 11l3-2'/%3E%3C/svg%3E")}
.tags abbr.t-cn::before,.legend a.t-cn::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23614931' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h8'/%3E%3Cpath d='M4 6c0-3 8-3 8 0'/%3E%3Cpath d='M5 6c0 4 1 6 3 7 2-1 3-3 3-7'/%3E%3C/svg%3E")}
.tags abbr.t-cd::before,.legend a.t-cd::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23614931' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2c3 4 4 6 4 8a4 4 0 0 1-8 0c0-2 1-4 4-8Z'/%3E%3C/svg%3E")}
.tags abbr.t-s::before,.legend a.t-s::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A8402F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 0 1 2 0 3'/%3E%3Cpath d='M12 6c-2 6-6 8-9 7 1-3 4-7 9-7Z'/%3E%3C/svg%3E")}
.legend a b{margin-inline-end:.15rem}

/* ---- tap a thumbnail to see the whole photograph ---- */
.zoom{grid-row:1/span 3;padding:0;border:0;background:none;cursor:zoom-in;border-radius:5px;line-height:0}
.zoom:focus-visible{outline:2px solid var(--brown,#614931);outline-offset:3px}
#photo{border:0;padding:0;background:var(--cream,#FFECCA);border-radius:8px;max-width:min(92vw,720px);width:auto}
#photo::backdrop{background:rgba(28,22,16,.72)}
#photo img{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;border-radius:8px 8px 0 0}
#photo figcaption{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.8rem 1rem 1rem;
  font:600 .9rem/1.3 var(--sans,Karla,sans-serif);color:var(--brown,#614931)}
#photo figcaption span:last-child{color:var(--tan-deep,#7A5730)}
#photo .close{position:absolute;top:.5rem;right:.5rem;width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,236,202,.9);color:var(--brown,#614931);font:600 1.1rem/1 var(--sans,Karla,sans-serif);cursor:pointer}
#photo .close:focus-visible{outline:2px solid var(--brown,#614931);outline-offset:2px}

/* photographs as photographs */
.ph{border-radius:8px;box-shadow:0 0 0 1px rgba(97,73,49,.10)}
#photo img{border-radius:8px 8px 0 0}

/* ---- footer ---- */
.foot h2{font:400 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--olive);margin:0 0 .8rem}
.foot .mark{display:block;margin-bottom:.6rem}
.foot p{margin:0 0 .5rem}
.foot address{font-style:normal;font-size:var(--f-sm);line-height:1.65}
.foot .social{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.foot .social a{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;border-bottom:0;white-space:nowrap}
.foot .social svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--olive);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.foot .social span{border-bottom:1px solid var(--tan)}
.foot .legal{grid-column:1/-1;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--rule-2);
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:var(--f-label);color:var(--olive)}
.foot .legal a{border-bottom:1px solid var(--tan)}
@media (max-width:640px){.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}}
@media (max-width:400px){.foot{grid-template-columns:1fr}}


/* ---- home hero v3: split, photograph to the edge ---- */
.hero3{padding-block:clamp(1.5rem,3.5vw,3rem) clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--rule)}
.hero3-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.hero3-title{font:400 clamp(2.2rem,1.4rem + 3.4vw,4.2rem)/1.05 var(--display);color:var(--olive);letter-spacing:-.012em;margin:.5rem 0 1rem;max-width:14ch;text-wrap:balance}
.hero3-lead{font-size:1.08rem;line-height:1.6;color:var(--brown);max-width:44ch;margin:0 0 1.5rem}
.hero3-cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.btn-p,.btn-s{display:inline-flex;align-items:center;min-height:48px;padding:0 1.35rem;border-radius:6px;font:600 .92rem/1 var(--sans);letter-spacing:.02em;text-decoration:none;border:1px solid transparent;white-space:nowrap}
.btn-p{background:var(--olive);color:var(--cream)}
.btn-p:hover{background:var(--brown)}
.btn-s{color:var(--brown);border-color:var(--rule-2)}
.btn-s:hover{background:rgba(97,73,49,.06);border-color:var(--brown)}
.btn-p:focus-visible,.btn-s:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
.hero3-note{margin:1.2rem 0 0;font:500 var(--f-sm)/1.5 var(--sans);color:var(--brown);opacity:.8}
.hero3-photo{margin:0;position:relative}
.hero3-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;max-height:600px;object-fit:cover;object-position:center;border-radius:10px;box-shadow:0 0 0 1px rgba(97,73,49,.10)}
.hero3-photo figcaption{margin-top:.6rem;font-size:var(--f-sm);color:var(--brown);opacity:.85}

@media (max-width:760px){
  .hero3-in{grid-template-columns:1fr;gap:1.4rem}
  .hero3-photo{order:2}
  .hero3-photo img{aspect-ratio:16/10}
  .hero3-title{max-width:none}
  .hero3-cta a{flex:1 1 auto;justify-content:center}
}

/* ---- logo ---- */
.brand{display:inline-flex;align-items:center;gap:.55rem}
.logo{width:40px;height:40px;display:block}
.logo-foot{width:72px;height:72px;display:block;margin-bottom:.6rem}
@media (max-width:480px){.logo{width:34px;height:34px}}

/* ---- at the table: six photographs of the room in use ---- */
.table-band{padding-block:clamp(2rem,4.5vw,3.5rem) clamp(1rem,2.5vw,1.5rem)}
.tb-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:1.1rem}
.tb-head h2{font:400 clamp(1.5rem,1.1rem + 1.6vw,2.1rem)/1.15 var(--display);color:var(--olive);margin:0}
.tb-head p{margin:0;font-size:var(--f-sm);color:var(--brown);opacity:.85}
.tb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem}
.tb-grid li{margin:0}
.tb-grid img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:8px}
@media (max-width:900px){.tb-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.tb-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}}

/* ---- hours ---- */
table.hours{border-collapse:collapse;margin:.4rem 0 .6rem;font-size:1rem}
table.hours th,table.hours td{text-align:left;padding:.55rem 1.4rem .55rem 0;border-bottom:1px solid var(--rule);font-weight:400}
table.hours th{color:var(--brown);font-weight:600}
table.hours td{color:var(--olive);font-variant-numeric:tabular-nums}
.hours-note{font-size:var(--f-sm);color:var(--brown);opacity:.85}
/* ---- booking ---- */
.book-lead{max-width:52ch}
.bookf{display:grid;gap:.9rem;max-width:620px}
.bookf label{display:grid;gap:.3rem;font:600 var(--f-sm)/1.3 var(--sans);letter-spacing:.04em;color:var(--brown)}
.bookf .opt{font-weight:400;opacity:.7}
.bookf input,.bookf select{font:400 1rem/1.3 var(--sans);color:var(--brown);background:#fff;border:1px solid var(--rule-2);border-radius:6px;padding:.7rem .8rem;min-height:46px;width:100%}
.bookf input:focus-visible,.bookf select:focus-visible{outline:2px solid var(--olive);outline-offset:2px;border-color:var(--olive)}
.bf-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.bf-3{grid-template-columns:1.2fr 1fr 1fr}
.bf-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:.3rem}
.bookf button.btn-p{border:0;cursor:pointer}
.bf-err{margin:0;color:#8E3A22;font:600 var(--f-sm)/1.4 var(--sans)}
.bf-out{margin:.4rem 0 0;padding:.9rem 1rem;background:#fff;border:1px solid var(--rule);border-radius:6px;font-size:var(--f-sm);line-height:1.55;color:var(--brown);white-space:pre-line}
@media (max-width:560px){.bf-row,.bf-3{grid-template-columns:1fr}.bf-actions a,.bf-actions button{flex:1 1 auto;justify-content:center}}

/* ---- analytics consent: one small card, above the phone action bar ---- */
.consent{position:fixed;z-index:30;left:1rem;right:1rem;bottom:calc(var(--act-h) + env(safe-area-inset-bottom) + .75rem);
  background:var(--cream);color:var(--brown);border:1px solid var(--rule-3);border-radius:8px;
  padding:1rem 1.1rem;box-shadow:0 10px 30px rgba(58,43,28,.18);font:400 var(--f-sm)/1.55 var(--sans)}
.consent p{margin:0 0 .85rem}
.consent a{color:var(--olive);border-bottom:1px solid var(--tan);text-decoration:none}
.consent-b{display:flex;gap:.6rem;justify-content:flex-end}
.consent-b .btn-p,.consent-b .btn-s{min-height:42px;padding:0 1.1rem;font-size:.85rem}
@media (min-width:700px){ .consent{left:auto;right:1.25rem;bottom:1.25rem;max-width:22rem} }
@media (prefers-reduced-motion:no-preference){ .consent{animation:consent-in .35s ease-out} }
@keyframes consent-in{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}

/* ---- the privacy page ---- */
.privacy{padding-bottom:clamp(3rem,7vw,6rem)}
.privacy h2{font-size:var(--f-h3);line-height:1.22;letter-spacing:-.01em;margin-top:2.4rem;scroll-margin-top:calc(var(--hdr-h) + .75rem)}
.privacy h2+p{margin-top:.6rem}
.privacy a{color:var(--olive);border-bottom:1px solid var(--tan);text-decoration:none}
.privacy table.cookies{width:100%;font-size:var(--f-sm);margin-top:1rem}
.privacy table.cookies th{font:600 var(--f-label)/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}
.privacy table.cookies td{vertical-align:top}
.privacy code{font:500 .9em/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--olive)}
.privacy .updated{margin-top:2.5rem;font-size:var(--f-sm);color:var(--brown)}
.bf-note{margin:1rem 0 0;font-size:var(--f-sm);line-height:1.5;color:var(--brown)}
.bf-note a{border-bottom:1px solid var(--tan);text-decoration:none}