* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button, a { cursor: pointer; }
.site { background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; overflow-x: clip; }
.header { align-items: center; background: var(--surface); display: flex; gap: 2rem; justify-content: space-between; padding: 1.4rem clamp(1.25rem, 5vw, 5rem); position: sticky; top: 0; z-index: 5; }
.brand { align-items: center; color: var(--primary); display: flex; flex: 0 1 auto; font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 700; gap: .7rem; min-width: 0; text-decoration: none; }
.brand img { flex: 0 0 auto; max-height: 42px; max-width: min(120px, 30vw); }
.brand span, h1, h2, h3, .contact a { overflow-wrap: anywhere; }
nav { display: flex; flex-wrap: wrap; gap: .7rem clamp(.8rem, 2.5vw, 2.2rem); justify-content: flex-end; min-width: 0; }
nav a { color: var(--primary); font-size: .85rem; text-decoration: none; white-space: nowrap; }
nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35rem; }
.hero { background: var(--surface); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); min-height: 76vh; padding: clamp(4rem, 9vw, 9rem) clamp(1.25rem, 8vw, 8rem); }
.hero > * { min-width: 0; }
.hero h1 { font-size: clamp(3.5rem, 9vw, 8.5rem); max-width: 9ch; }
.lead { font-size: 1.1rem; line-height: 1.7; max-width: 34rem; }
.hero-art { align-items: center; background: var(--accent); border-radius: 50% 50% 4rem 4rem; display: flex; justify-content: center; margin-left: clamp(1.5rem, 4vw, 3rem); min-height: 28rem; min-width: 0; overflow: hidden; }
.hero-art.image { border-radius: 0 50% 4rem 4rem; }
.hero-art img { height: 100%; min-height: inherit; object-fit: cover; width: 100%; }
.hero-art span { color: var(--on-primary); font-size: clamp(2rem, 5vw, 4.5rem); font-style: italic; transform: rotate(-8deg); }
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--font); font-weight: 400; line-height: .98; margin: .5rem 0 1.5rem; }
h2, .page-section > h1, .not-found h1, .legal-page > h1 { font-size: clamp(2.7rem, 7vw, 6.5rem); }
h3 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
.button { align-items: center; background: var(--primary); color: var(--on-primary); display: inline-flex; gap: 1.5rem; justify-content: space-between; margin-top: 1.2rem; max-width: 100%; min-height: 48px; overflow-wrap: anywhere; padding: 1rem 1.3rem; text-decoration: none; }
.button.dark { margin-top: 0; }
.visit, .page-section, .contact, .not-found, .legal-page { padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 8vw, 8rem); }
.visit { background: var(--primary); color: var(--on-primary); display: grid; gap: clamp(3rem, 8vw, 8rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.visit address { font-style: normal; line-height: 1.7; }
.visit a { color: inherit; }
.hours { min-width: 0; padding-top: 1rem; }
.hours div { border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 0; }
.hours strong { font-weight: 400; text-align: right; }
.weekly-hours { border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); grid-column: 1 / -1; min-width: 0; padding-top: clamp(2rem, 5vw, 4rem); }
.page-section { background: var(--bg); min-height: 55vh; scroll-margin-top: 6rem; }
.page-section.tint { background: var(--highlight); }
.blocks { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 3rem; }
.block { border-top: 1px solid currentColor; min-width: 0; padding-top: 1.5rem; }
.block ul { list-style: none; margin: 0; padding: 0; }
.block li { border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); font-size: 1.1rem; overflow-wrap: anywhere; padding: 1rem 0; }
.body-copy { line-height: 1.8; min-width: 0; overflow-x: auto; overflow-wrap: anywhere; }
.body-copy img, .body-copy video, .body-copy iframe { height: auto; max-width: 100%; }
.body-copy figure { margin-inline: 0; }
.body-copy blockquote { border-left: 3px solid currentColor; margin-left: 0; padding-left: 1rem; }
.pdf-block { grid-column: 1 / -1; justify-self: center; max-width: 68rem; width: 100%; }
.pdf-viewer { background: #e8e8e8; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); height: clamp(30rem, 74svh, 52rem); margin-bottom: 1rem; width: 100%; }
.pdf-viewer object { border: 0; height: 100%; width: 100%; }
.pdf-block > a { color: inherit; display: inline-block; overflow-wrap: anywhere; }
.image-block figure { margin: 0; }
.image-block img { display: block; height: auto; max-height: 680px; object-fit: cover; width: 100%; }
.image-block figcaption { font-size: .85rem; margin-top: .75rem; opacity: .75; }
.feature-block { grid-column: 1 / -1; }
.page-empty { border: 1px dashed currentColor; padding: 1rem; }
.empty-public { line-height: 1.6; opacity: .78; }
.contact { background: var(--accent); color: var(--on-primary); scroll-margin-top: 6rem; }
.contact div { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.contact a { color: inherit; font-size: clamp(1.4rem, 3vw, 2.5rem); line-height: 1.2; max-width: 100%; }
.temporary-banner { align-items: center; background: var(--primary); color: var(--on-primary); display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: center; padding: .8rem clamp(1rem, 5vw, 4rem); text-align: center; }
.temporary-banner.important, .temporary-banner.closure { background: var(--accent); }
.temporary-banner.event { background: var(--highlight); color: var(--text); }
.temporary-banner a { color: inherit; font-weight: 700; overflow-wrap: anywhere; }
footer { align-items: center; background: var(--primary); color: var(--on-primary); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding: 2rem clamp(1.25rem, 8vw, 8rem); }
footer a { color: inherit; }
footer span { text-align: center; }
.not-found { min-height: 60vh; }
.not-found a { color: inherit; }
.preline { overflow-wrap: anywhere; white-space: pre-line; }
.structured-menu > header, .structured-menu > section, .daily, .weekly, .smart-hours, .events, .rooms { margin-bottom: 2.5rem; }
.structured-menu h3, .daily h3, .weekly h3, .smart-hours h3, .events h3, .rooms h3 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 400; line-height: 1.05; margin: .5rem 0 1.5rem; overflow-wrap: anywhere; }
.structured-menu h4, .weekly h4, .events h4, .rooms h4 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: .5rem 0; overflow-wrap: anywhere; }
.structured-menu article { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); min-width: 0; padding: 1.2rem 0; }
.structured-menu article.has-image { grid-template-columns: 110px minmax(0, 1fr); }
.structured-menu article img { height: 90px; object-fit: cover; width: 110px; }
.dish-title { align-items: baseline; display: flex; gap: 1rem; justify-content: space-between; }
.dish-title > * { min-width: 0; overflow-wrap: anywhere; }
.dish-title span { flex: 0 0 auto; text-align: right; }
.badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: .55rem 0; }
.badges span { border: 1px solid currentColor; border-radius: 2rem; font-size: .72rem; padding: .2rem .5rem; }
.feature-action { color: inherit; display: inline-block; font-weight: 700; margin-top: 1rem; overflow-wrap: anywhere; }
.weekly { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.weekly > h3 { grid-column: 1 / -1; }
.weekly article { border-top: 1px solid currentColor; min-width: 0; padding-top: 1rem; }
.weekly article > strong, .weekly article > time { display: block; margin: .35rem 0; }
.smart-hours article { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); display: grid; gap: .8rem; grid-template-columns: minmax(100px, 120px) minmax(0, 1fr) minmax(0, 1fr); padding: .8rem; }
.smart-hours article.today { background: color-mix(in srgb, currentColor 8%, transparent); }
.smart-hours article div { display: flex; flex-direction: column; min-width: 0; }
.smart-hours time { font-size: .9rem; overflow-wrap: anywhere; }
.smart-hours em { opacity: .7; }
.today-label { display: none; font-size: .65rem; font-weight: 400; margin-top: .25rem; text-transform: uppercase; }
.today .today-label { display: block; }
.events article, .rooms article { border-top: 1px solid currentColor; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); min-width: 0; padding: 1.5rem 0; }
.events article.has-image, .rooms article.has-image { grid-template-columns: minmax(130px, 260px) minmax(0, 1fr); }
.events img, .rooms img { height: 180px; object-fit: cover; width: 100%; }
.events time { display: block; font-size: .9rem; line-height: 1.5; }
.event-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1rem; }
.event-meta span, .event-meta strong { border-left: 2px solid currentColor; padding-left: .55rem; }
.event-menu { border-block: 1px solid color-mix(in srgb, currentColor 20%, transparent); margin-top: 1.25rem; padding: .8rem 0; }
.event-menu summary { cursor: pointer; font-weight: 700; }
.event-menu h5 { font-size: 1rem; margin: 1rem 0 .4rem; }
.event-menu-dish { border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); display: flex; gap: 1rem; justify-content: space-between; margin: 0; padding: .45rem 0; }
.room-gallery { display: grid; gap: .4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.room-gallery.single { grid-template-columns: minmax(0, 1fr); }
.rooms .room-gallery img { height: 110px; }
.rooms .room-gallery.single img { height: 180px; }
.rooms small { display: block; margin-top: .7rem; }
.room-type { font-size: .8rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 1rem; opacity: .75; text-transform: uppercase; }
.booking { max-width: 880px; min-width: 0; scroll-margin-top: 8rem; }
.booking-action { border: 1px solid currentColor; color: inherit; display: block; margin-top: 1rem; overflow-wrap: anywhere; padding: 1rem; text-decoration: none; }
.booking form { margin-top: 2rem; min-width: 0; }
.required-note { font-size: .8rem; margin-bottom: 1.5rem; opacity: .8; }
.required-note span, .booking abbr { color: #9b2f22; text-decoration: none; }
.booking-grid { display: grid; gap: 0 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking label { display: flex; flex-direction: column; font-size: .8rem; font-weight: 700; gap: .4rem; margin: 1rem 0; min-width: 0; }
.booking input:not([type="checkbox"]), .booking select, .booking textarea { background: #fff; border: 1px solid #8d928f; border-radius: 0; color: #17201d; display: block; font: inherit; font-size: 1rem; min-height: 48px; min-width: 0; padding: .7rem; width: 100%; }
.booking textarea { min-height: 110px; resize: vertical; }
.booking .wide { grid-column: 1 / -1; }
.field-help { font-size: .82rem; line-height: 1.5; margin: -.2rem 0 .5rem; opacity: .76; }
.booking .accept { align-items: flex-start; flex-direction: row; font-size: .9rem; line-height: 1.45; }
.booking .accept input { flex: 0 0 auto; height: 20px; margin: 0; width: 20px; }
.booking aside { border-left: 3px solid var(--accent); line-height: 1.6; margin: 1rem 0; padding: 1rem; }
.booking button { background: var(--primary); border: 0; color: var(--on-primary); font: inherit; font-weight: 700; min-height: 48px; padding: .8rem 1.2rem; }
.booking button:disabled { cursor: wait; opacity: .65; }
.booking-result { line-height: 1.5; margin-top: 1.5rem; }
.booking-result.success, .booking-result.error { padding: 1rem; }
.booking-result.success { background: #dbead8; color: #173f35; }
.booking-result.error { background: #f4dfd7; color: #702218; }
.legal-page { margin: 0 auto; max-width: 1100px; }
.legal-page article { border-top: 1px solid currentColor; display: grid; gap: 1rem 3rem; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); padding: 2rem 0; }
.legal-page article h2 { grid-row: 1 / span 4; }
.legal-page article > *:not(h2) { grid-column: 2; margin-block: 0; }
.legal-page address, .legal-page p { font-style: normal; line-height: 1.7; overflow-wrap: anywhere; }
.legal-page a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent, #c95039); outline-offset: 3px; }
[hidden] { display: none !important; }
@media (max-width: 900px) { .header { align-items: stretch; flex-direction: column; gap: 1rem; } nav { flex-wrap: nowrap; justify-content: flex-start; margin-inline: -.25rem; overflow-x: auto; padding: .25rem .25rem .6rem; scrollbar-width: thin; } .page-section, .contact { scroll-margin-top: 9rem; } }
@media (max-width: 760px) { .hero, .visit { grid-template-columns: minmax(0, 1fr); } .hero { min-height: auto; } .hero h1 { font-size: clamp(3rem, 16vw, 5rem); } .hero-art { margin: 3rem 0 0; min-height: 18rem; } footer { align-items: flex-start; flex-direction: column; } footer span { text-align: left; } }
@media (max-width: 700px) { .booking-grid { grid-template-columns: minmax(0, 1fr); } .booking .wide { grid-column: auto; } .booking button { width: 100%; } }
@media (max-width: 640px) { .legal-page article { display: block; } .legal-page article h2 { margin-bottom: 1.5rem; } }
@media (max-width: 620px) { .smart-hours article, .events article.has-image, .rooms article.has-image, .structured-menu article.has-image { grid-template-columns: minmax(0, 1fr); } .events img, .structured-menu article img { height: min(65vw, 240px); width: 100%; } .rooms .room-gallery img, .rooms .room-gallery.single img { height: min(42vw, 190px); } .dish-title { align-items: flex-start; flex-direction: column; gap: .35rem; } .dish-title span { text-align: left; } }
@media (max-width: 420px) { .button { width: 100%; } }