/* Zaytin — design system
   "Modern Anatolian Hospitality": cream, limestone, olive; Iznik blue used
   rarely. Cormorant Garamond for display, Manrope for labels and UI. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-italic-400.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-italic-500.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --cream: #f7f3ed;
  --cream-2: #f0e9dd;
  --limestone: #e6ddd0;
  --olive: #66704b;
  --olive-deep: #4c5437;
  --charcoal: #262626;
  --ink-soft: #55504a;
  --iznik: #0d6e8c;
  --terracotta: #9e5335; /* deepened from #b6603c for text contrast on cream */
  --copper: #a46a3a;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --header-h: 4.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

html {
  scroll-behavior: smooth;
}

body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(102, 112, 75, .25); }

img { max-width: 100%; }

a { color: var(--olive-deep); }

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

.wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- shared bits ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 1.1rem;
}

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95em 1.8em;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn-solid {
  background: var(--olive);
  color: var(--cream);
}
.btn-solid:hover { background: var(--olive-deep); }
.btn-outline {
  border-color: var(--olive);
  color: var(--olive-deep);
  background: transparent;
}
.btn-outline:hover { background: var(--olive); color: var(--cream); border-color: var(--olive); }
.btn-ghost {
  border-color: rgba(247, 243, 237, .65);
  color: var(--cream);
  background: rgba(30, 28, 24, .22);
}
.btn-ghost:hover { background: rgba(30, 28, 24, .42); border-color: var(--cream); }

.text-link {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--olive-deep);
  border-bottom: 1px solid var(--limestone);
  padding-bottom: .2em;
  transition: border-color .2s;
}
.text-link:hover { border-bottom-color: var(--olive); }

.orn-divider {
  display: block;
  width: 15rem;
  max-width: 60%;
  height: 1.5rem;
  margin: 1.6rem auto;
  color: var(--iznik);
}
.orn-divider line, .orn-divider path {
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  fill: none;
}
.orn-divider .fill { fill: currentColor; stroke: none; }

.orn-sprig { width: 2.2rem; height: 2.2rem; }
.orn-sprig .stroke { stroke: var(--olive); stroke-width: 2.4; stroke-linecap: round; }
.orn-sprig .fill { fill: var(--olive); }
.orn-sprig .fill-soft { fill: #7c8a57; }
.orn-sprig .fill-deep { fill: #3a3b30; }

.open-now {
  display: block; /* plain line under the heading, aligned with the rows */
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--olive-deep);
  margin: .3rem 0 .9rem;
  /* hidden by visibility (not display) so its space is reserved and the
     message fading in never shifts layout */
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s ease;
}
.open-now.on { visibility: visible; opacity: 1; }
.open-now.closed { color: var(--terracotta); }
.site-footer .open-now { color: var(--cream); }
.site-footer .open-now.closed { color: #f0c9b4; }

.hours-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: .9rem;
}
.hours-table td {
  padding: .45rem 0;
  border-bottom: 1px solid rgba(102, 112, 75, .18);
}
.hours-table td:first-child { padding-right: 1.2rem; }
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table td:last-child { text-align: right; white-space: nowrap; }

/* ---------- header ---------- */

/* staging banner: loud on purpose, so nobody mistakes zaytins.com for the
   real site. Sticky so it stays in view while scrolling. The height is
   fixed (and the text kept to one line, trimmed on narrow screens via
   .sb-more) so the home page's overlaid header can offset by exactly
   --staging-h instead of being covered. */
:root { --staging-h: 2.1rem; }
.staging-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--staging-h);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  background: var(--terracotta);
  color: var(--cream);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 0 1rem;
}
@media (max-width: 480px) {
  .staging-banner .sb-more { display: none; }
}
/* the home header floats over the hero at top 0; when the banner is
   present it starts below it instead of underneath it */
body.home:has(.staging-banner) .site-header { top: var(--staging-h); }

.site-header {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: .9rem clamp(1.25rem, 4vw, 2.5rem);
  z-index: 20;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: .24em;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}
.wm-tag {
  display: block;
  font-family: var(--sans);
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-top: .35rem;
  opacity: .72;
}
.site-nav {
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
}
.site-nav a {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: .85;
  padding: .3em 0;
  border-bottom: 1px solid transparent;
  transition: opacity .2s, border-color .2s;
}
.site-nav a:hover { opacity: 1; border-bottom-color: currentColor; }
.site-header .btn { padding: .65em 1.2em; font-size: .72rem; }
/* the language toggle: quiet pill naming the other language */
.lang-toggle {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: inherit;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .4em .75em;
  opacity: .65;
}
.lang-toggle:hover { opacity: 1; }

body.home .site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  color: var(--cream);
}
body.home .site-header .btn-outline {
  border-color: rgba(247, 243, 237, .55);
  color: var(--cream);
}
body.home .site-header .btn-outline:hover {
  background: rgba(247, 243, 237, .14);
  border-color: var(--cream);
}

body.inner .site-header {
  position: sticky;
  top: 0;
  background: rgba(247, 243, 237, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--limestone);
  color: var(--charcoal);
}

/* ---------- hero (home) ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--charcoal);
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(30, 28, 24, .38) 0%, rgba(30, 28, 24, .16) 45%, rgba(30, 28, 24, .04) 75%),
              linear-gradient(to top, rgba(30, 28, 24, .3) 0%, rgba(30, 28, 24, 0) 26%),
              linear-gradient(to bottom, rgba(30, 28, 24, .3) 0%, rgba(30, 28, 24, 0) 18%);
}
body.home .site-header { text-shadow: 0 1px 14px rgba(30, 28, 24, .55); }
body.home .site-header .btn { text-shadow: none; }
.hero .eyebrow { text-shadow: 0 1px 12px rgba(30, 28, 24, .5); }
.hero-content {
  position: relative;
  padding: 0 clamp(1.5rem, 7vw, 6rem);
  color: var(--cream);
  max-width: 60rem;
}
.hero .eyebrow { color: rgba(247, 243, 237, .85); }
.hero-title {
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  letter-spacing: .01em;
  line-height: 1.02;
  text-shadow: 0 2px 30px rgba(30, 28, 24, .35);
}
.hero-title em { font-style: italic; font-weight: 400; }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.2rem;
}
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  color: rgba(247, 243, 237, .85);
  padding: .5rem;
  animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* ---------- story ---------- */

.story { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.story-photo { margin: 0; }
.arch {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 108' preserveAspectRatio='none'%3E%3Cpath d='M0 108 V34 Q0 8 50 0 Q100 8 100 34 V108 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 108' preserveAspectRatio='none'%3E%3Cpath d='M0 108 V34 Q0 8 50 0 Q100 8 100 34 V108 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.story-text h2 { font-size: clamp(2.1rem, 4vw, 3.1rem); margin-bottom: 1.4rem; }
.story-text p { font-size: 1.22rem; color: var(--ink-soft); margin: 0 0 1.1rem; }
.story-text .story-known { color: var(--charcoal); font-size: 1.25rem; }
.story-text .orn-divider { margin: 1.8rem 0 0; }

/* ---------- signatures ---------- */

.signatures { padding: 0 0 clamp(4rem, 9vw, 7rem); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.2rem;
}
.section-head h2 { font-size: clamp(2.1rem, 4vw, 3.1rem); }
.sig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.sig-card {
  display: block;
  text-decoration: none;
  color: var(--charcoal);
  background: #fff;
  border: 1px solid var(--limestone);
  border-radius: 6px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.sig-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(38, 38, 38, .13);
}
.sig-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .5s;
}
.sig-card:hover img { transform: scale(1.045); }
.sig-body { padding: 1.1rem 1.2rem 1.3rem; text-align: center; }
.sig-body h3 { font-size: 1.35rem; font-weight: 600; }
.sig-body p {
  margin: .3rem 0 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.45;
}

/* ---------- wide banner ---------- */

.banner {
  position: relative;
  height: clamp(16rem, 42vh, 24rem);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-scrim {
  position: absolute;
  inset: 0;
  background: rgba(30, 28, 24, .38);
}
.banner-line {
  position: relative;
  margin: 0;
  padding: 0 1.5rem;
  text-align: center;
  color: var(--cream);
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  font-style: italic;
  font-weight: 500;
  text-shadow: 0 2px 24px rgba(30, 28, 24, .5);
}

/* ---------- home gallery strip ---------- */

.home-gallery { padding: clamp(4rem, 9vw, 7rem) 0; }
.hg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 15rem;
  gap: 1rem;
}
.hg-grid a {
  display: block;
  overflow: hidden;
  border-radius: 6px;
}
.hg-grid .hg-tall { grid-row: span 2; }
.hg-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s;
}
.hg-grid a:hover img { transform: scale(1.05); }

/* ---------- visit ---------- */

/* dark register: the visit band closes the page in warm charcoal,
   one step deeper than the olive footer */
.visit {
  background: #29271f;
  color: var(--cream);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}
.visit .eyebrow { color: rgba(247, 243, 237, .72); }
.visit-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.visit h2 { font-size: clamp(2.1rem, 4vw, 3.1rem); margin-bottom: 1.2rem; }
.visit-addr { font-size: 1.25rem; line-height: 1.9; margin: 0; }
.visit-addr a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(247, 243, 237, .3); }
.visit-addr a:hover { border-bottom-color: var(--cream); }
.visit-hours h3 {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(247, 243, 237, .65);
  margin-bottom: 1rem;
}
.visit .hours-table td { border-bottom-color: rgba(247, 243, 237, .18); }
.visit .open-now { color: var(--cream); }
.visit .open-now.closed { color: #f0c9b4; }
.visit-services { color: rgba(247, 243, 237, .72); }
.visit .btn-solid {
  background: var(--cream);
  color: var(--charcoal);
}
.visit .btn-solid:hover { background: #fff; }
.visit .btn-outline {
  border-color: rgba(247, 243, 237, .55);
  color: var(--cream);
}
.visit .btn-outline:hover {
  background: rgba(247, 243, 237, .14);
  border-color: var(--cream);
}
.site-footer { border-top: 1px solid rgba(247, 243, 237, .16); }
.visit-services {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink-soft);
  margin: 1rem 0 0;
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--olive-deep);
  color: var(--cream);
  padding: clamp(3rem, 7vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem) 2rem;
}
.foot-grid {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.site-footer a { color: var(--cream); }
.foot-brand .wordmark { font-size: 1.5rem; }
.foot-meaning { opacity: .75; margin: 1rem 0 .8rem; font-size: 1.05rem; }
.foot-ig {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--sans);
  font-size: .82rem;
  text-decoration: none;
  opacity: .9;
}
.foot-ig:hover { opacity: 1; text-decoration: underline; }
.foot-col h3 {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 1rem;
}
.foot-col p { margin: 0 0 1rem; font-size: 1.08rem; line-height: 1.75; }
.foot-col a { text-decoration: none; }
.foot-col a:hover { text-decoration: underline; }
.foot-links a { display: block; margin-bottom: .55rem; font-size: 1.08rem; }
.site-footer .hours-table { font-size: .82rem; }
.site-footer .hours-table td { border-bottom-color: rgba(247, 243, 237, .18); }
.foot-base {
  max-width: 72rem;
  margin: 2.8rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(247, 243, 237, .18);
  text-align: center;
}
.foot-base .orn-sprig .stroke { stroke: var(--cream); opacity: .8; }
.foot-base .orn-sprig .fill { fill: var(--cream); opacity: .8; }
.foot-base .orn-sprig .fill-soft { fill: #b9c39a; }
.foot-base .orn-sprig .fill-deep { fill: #2e3322; }
.foot-base p {
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .1em;
  opacity: .6;
  margin: .8rem 0 0;
}

/* ---------- inner pages ---------- */

.page-head {
  text-align: center;
  padding: clamp(2.8rem, 7vw, 4.5rem) 0 clamp(1.8rem, 4vw, 2.8rem);
}
.page-head h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); }
.page-head .avail {
  font-style: italic;
  font-size: 1.2rem;
  color: var(--olive);
  margin: .6rem 0 0;
}

/* gallery */
.gallery-grid {
  columns: 3;
  column-gap: 1.2rem;
  padding-bottom: 3rem;
}
.gallery-grid figure {
  margin: 0 0 1.2rem;
  break-inside: avoid;
}
.gallery-grid img {
  display: block;
  width: 100%;
  border-radius: 6px;
  transition: transform .3s;
}
.gallery-grid a:hover img { transform: scale(1.015); }
.gallery-grid figcaption {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
  padding: .5rem .2rem 0;
}
.gallery-more {
  text-align: center;
  font-size: 1.15rem;
  padding-bottom: 4rem;
}

/* events */
.events-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.events-photo { margin: 0; }
.events-text p { font-size: 1.22rem; color: var(--ink-soft); margin: 0 0 1.1rem; }
.occasions {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem 1.5rem;
}
.occasions li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--charcoal);
}
.occasions svg { color: var(--olive); flex: none; }

/* occasions strip */
.occ-strip { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.occ-title { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 2.2rem; }
.occ-grid { grid-template-columns: repeat(4, 1fr); }
.occ-card { margin: 0; cursor: default; }
.occ-closing {
  text-align: center;
  font-size: 1.3rem;
  margin: 2.5rem 0 0;
}
.occ-closing a { color: var(--olive-deep); text-decoration: none; border-bottom: 1px solid var(--limestone); }
.occ-closing a:hover { border-bottom-color: var(--olive); }
@media (max-width: 56rem) { .occ-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .occ-grid { grid-template-columns: 1fr; } }

/* contact */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.contact-card {
  background: #fff;
  border: 1px solid var(--limestone);
  border-radius: 8px;
  padding: 1.6rem 1.5rem 1.7rem;
}
.contact-card h3 {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1rem;
}
.contact-card p { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.8; }
.contact-card a { text-decoration: none; }
.contact-card p a:hover { text-decoration: underline; }
.contact-phone { font-size: 1.3rem; }
.contact-banner { padding: 2.5rem 0 4rem; }
.contact-banner img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 7;
  object-fit: cover;
  border-radius: 8px;
}

/* reserve */
.page-banner { margin: 0 0 clamp(2rem, 5vw, 3.2rem); }
.page-banner img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 7;
  object-fit: cover;
  border-radius: 8px;
}
.reserve-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.res-intro { font-size: 1.18rem; color: var(--ink-soft); margin: 0 0 1rem; }
.res-form .field { margin-bottom: 1.1rem; }
.field-row { display: flex; gap: 1rem; }
.field-row .field { flex: 1; min-width: 0; }
.res-form label {
  display: block;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .45rem;
}
.res-form label .opt {
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: none;
  opacity: .75;
}
.res-form input, .res-form select, .res-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--charcoal);
  background: #fff;
  border: 1px solid var(--limestone);
  border-radius: 6px;
  padding: .68rem .85rem;
  transition: border-color .2s;
}
.res-form input:focus, .res-form select:focus, .res-form textarea:focus {
  border-color: var(--olive);
}
.res-form textarea { resize: vertical; min-height: 5.5rem; }
.res-form ::placeholder { color: rgba(85, 80, 74, .5); }
/* honeypot: present in the dom, invisible to humans */
.hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}
.res-error {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--terracotta);
  background: rgba(158, 83, 53, .08);
  border: 1px solid rgba(158, 83, 53, .35);
  border-radius: 6px;
  padding: .7rem .9rem;
  margin: 0 0 1.1rem;
}
.res-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.res-note {
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.res-rail {
  background: #fff;
  border: 1px solid var(--limestone);
  border-radius: 8px;
  padding: 1.7rem 1.6rem 1.8rem;
}
.rail-title {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1.1rem;
}
.rail-points { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.rail-points li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: .7rem;
}
.rail-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--olive);
  opacity: .55;
}
.rail-call { display: block; text-align: center; margin-bottom: 1.7rem; }
.rail-hours h3 {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: .6rem;
}
.rail-hours .hours-table td { border-bottom-color: var(--cream-2); }

/* reservation sent */
.sent-card {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
  padding: clamp(3.5rem, 9vw, 6rem) 0;
}
.sent-card .orn-sprig { width: 3rem; height: 3rem; margin-bottom: 1.2rem; }
.sent-card h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 1rem; }
.sent-card p { font-size: 1.2rem; color: var(--ink-soft); margin: 0 0 1rem; }
.sent-card .hero-ctas { justify-content: center; margin-top: 1.8rem; }
.sent-back { margin-top: 2.4rem; }
.sent-details {
  max-width: 26rem;
  margin: 1.9rem auto 0;
  text-align: left;
  border-top: 1px solid var(--limestone);
}
.sent-details div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: .55rem .2rem;
  border-bottom: 1px solid var(--limestone);
}
.sent-details dt {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--olive);
  flex: 0 0 7.5rem; /* uniform label column: values share one left edge */
}
.sent-details dd { margin: 0; font-size: 1.12rem; flex: 1; text-align: left; }

/* staff login */
.login-card {
  max-width: 26rem;
  margin: 0 auto;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
.login-again { font-size: 1rem; margin: 1.2rem 0 0; }

/* admin */
.admin-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 2.2rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--limestone);
}
.admin-bar p { margin: 0; color: var(--ink-soft); }
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: inherit;
}
.admin-section { margin-bottom: 2.6rem; }
.admin-section .rail-title { margin-bottom: 1rem; }
.admin-links { display: flex; gap: 2rem; margin: 0; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--limestone);
}
.admin-table th {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--olive);
  text-align: left;
  padding: .7rem .4rem .5rem;
  border-bottom: 1px solid var(--limestone);
}
.admin-table td {
  padding: .65rem .4rem;
  border-bottom: 1px solid var(--limestone);
  font-size: 1.08rem;
}
.admin-table th:nth-child(4), .admin-table td:nth-child(4) { text-align: right; }
/* snug action/date/time/party columns; the name takes the rest */
.admin-table th:nth-child(-n+4), .admin-table td:nth-child(-n+4) {
  width: 1%;
  white-space: nowrap;
  padding-right: 1.6rem;
}
.admin-table tbody tr { transition: background .15s; cursor: pointer; }
.admin-table tbody tr:hover { background: var(--cream-2); }
.admin-table .row-link { color: inherit; text-decoration: none; }
/* no stretched-link ::after overlay here: position:relative on a table row
   does not establish a containing block in webkit (every iphone browser),
   so the overlay escaped its row and swallowed taps meant for the
   "show deleted" toggle. whole-row clicks are delegated in site.js instead. */
.admin-empty { color: var(--ink-soft); }
/* change-request form: same field language as the reservation form */
.cr-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--charcoal);
  background: #fff;
  border: 1px solid var(--limestone);
  border-radius: 6px;
  padding: .68rem .85rem;
  resize: vertical;
  min-height: 5.5rem;
  transition: border-color .2s;
}
.cr-form textarea:focus { border-color: var(--olive); outline: none; }
.cr-form ::placeholder { color: rgba(85, 80, 74, .5); }
.cr-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem 1.5rem;
  margin-top: .9rem;
}
.cr-note {
  font-style: italic;
  font-size: .95rem;
  color: var(--ink-soft);
  margin: 0;
}
.cr-sent { color: var(--olive); margin: 0 0 .9rem; }
.cr-error {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--terracotta);
  background: rgba(158, 83, 53, .08);
  border: 1px solid rgba(158, 83, 53, .35);
  border-radius: 6px;
  padding: .7rem .9rem;
  margin: .8rem 0 0;
}
.admin-list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}
.admin-list-head .rail-title { margin: 0; }
.admin-head-links { display: flex; gap: 1.4rem; }
/* the past archive drops the action column, so name is col 4: undo the
   base table's snug/right-align there and right-align the party col */
.past-table th:nth-child(4), .past-table td:nth-child(4) {
  text-align: left;
  width: auto;
  white-space: normal;
  padding-right: .4rem;
}
.past-table th:nth-child(3), .past-table td:nth-child(3) { text-align: right; }
.admin-pager {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  margin-top: 1.2rem;
  color: var(--ink-soft);
  font-size: 1rem;
}
.row-action form { margin: 0; }
.icon-btn {
  background: none;
  border: 0;
  padding: .15rem;
  cursor: pointer;
  display: inline-flex;
  vertical-align: middle;
  opacity: .6;
  transition: opacity .15s, transform .15s;
}
.icon-btn:hover { opacity: 1; transform: scale(1.12); }
.icon-btn svg { display: block; }
.icon-btn.trash { color: var(--terracotta); }
/* unlabeled right-edge tag marking developer test reservations: quiet small
   caps in the same iznik teal as the detail page's testing banner */
.admin-table .test-tag {
  text-align: right;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--iznik);
  opacity: .85;
}
/* restore is a labeled pill, not a bare glyph: on the deleted view it is the
   point of the page, so it must read as an action, not an ornament */
.restore-btn {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .42rem .85rem;
  border: 1px solid var(--olive);
  border-radius: 999px;
  background: transparent;
  color: var(--olive-deep);
  font: inherit;
  font-size: .92rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.restore-btn:hover { background: var(--olive); color: var(--cream); }
.restore-btn svg { display: block; }
.admin-detail { max-width: 34rem; margin: 0 auto; padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.admin-detail .sent-details { max-width: none; margin-top: 0; }
.admin-detail dd a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--limestone);
}
.admin-detail dd a:hover { border-bottom-color: var(--olive); }
.admin-detail .sent-back { text-align: center; }
/* the guest's history sits below the delete/restore action, same table
   language as the listing, minus the action and name columns */
.admin-past { margin-top: 2.6rem; text-align: left; }
.admin-past .rail-title { margin-bottom: 1rem; }

/* staff link in the footer baseline */
.foot-staff { color: inherit; opacity: .55; text-decoration: none; }
.foot-staff:hover { opacity: 1; text-decoration: underline; }


/* 404 */
.notfound {
  text-align: center;
  padding: clamp(4rem, 10vw, 7rem) 1.5rem;
}
.notfound .orn-sprig { width: 3rem; height: 3rem; margin-bottom: 1.2rem; }
.notfound h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 1rem; }
.notfound p { font-size: 1.2rem; color: var(--ink-soft); margin: 0; }
.notfound .hero-ctas { justify-content: center; }

/* ---------- menu pages ---------- */

.menu-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem 1.6rem;
  padding: 1.1rem 1rem .9rem;
  border-bottom: 1px solid var(--limestone);
}
.menu-tabs a {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--olive);
  padding: .35em 0;
  border-bottom: 2px solid transparent;
}
.menu-tabs a.active { color: var(--charcoal); border-bottom-color: var(--iznik); }

.chip-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 15;
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  padding: .6rem 1rem;
  background: rgba(247, 243, 237, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--limestone);
  scrollbar-width: none;
}
.chip-nav::-webkit-scrollbar { display: none; }
.chip-nav a {
  flex: none;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--olive-deep);
  border: 1px solid var(--limestone);
  border-radius: 999px;
  padding: .4em .95em;
  transition: background .2s, color .2s, border-color .2s;
}
.chip-nav a:hover { border-color: var(--olive); }
.chip-nav a.active {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--cream);
}

.menu-page { max-width: 46rem; padding-bottom: 4rem; }
.menu-page .page-head { padding-bottom: 1rem; }
.menu-page .menu-section:first-of-type h2 { margin-top: 1rem; }
.menu-section { scroll-margin-top: calc(var(--header-h) + 3.6rem); }
.section-band {
  display: block;
  width: 100%;
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 1.4rem;
  box-shadow: 0 2px 12px rgba(38, 38, 38, .13);
}
.menu-section h2 {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--olive);
  border-bottom: 1px solid var(--limestone);
  padding-bottom: .5rem;
  margin: 2.8rem 0 1.4rem;
}
.menu-section .note {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--olive);
  margin: 0 0 1rem;
}
.item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 0 0 1.3rem;
}
.item-body { flex: 1; min-width: 0; }
.thumb {
  flex: none;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--limestone);
  box-shadow: 0 1px 4px rgba(38, 38, 38, .16);
  transition: transform .25s;
}
.thumb:hover { transform: scale(1.06); }
.item .row {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.item .name { font-size: 1.22rem; font-weight: 600; }
.item .leader {
  flex: 1;
  border-bottom: 1px dotted var(--limestone);
  transform: translateY(-.25rem);
}
.item .price { font-size: 1.15rem; font-weight: 600; white-space: nowrap; color: var(--copper); }
.item .desc {
  margin: .12rem 0 0;
  font-style: italic;
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.45;
}
.item .note {
  margin: .15rem 0 0;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--olive);
}
.addons {
  margin: 1.2rem 0 0;
  font-size: 1.05rem;
}
.addons b {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive);
}

.combo-img {
  display: block;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto 1rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(38, 38, 38, .14);
}
.combo-main .combo-img { max-width: none; margin-bottom: .9rem; }
.combo-group { margin: 1.2rem 0; text-align: center; }
.combo-group .g-name {
  font-family: var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .85rem;
  font-weight: 600;
}
.combo-group .g-note { font-style: italic; color: var(--olive); font-size: 1rem; }
.combo-group ul { list-style: none; padding: 0; margin: .5rem 0 0; font-size: 1.15rem; }
.combo-mains {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1.5rem;
}
.combo-main {
  flex: 1 1 16rem;
  max-width: 20rem;
  background: #fff;
  border: 1px solid var(--limestone);
  border-radius: 8px;
  padding: 1.1rem 1.3rem 1.3rem;
  text-align: center;
}
.combo-main h3 { margin: 0; font-size: 1.3rem; font-weight: 600; }
.combo-main .price { display: block; margin-top: .15rem; color: var(--copper); }
.combo-main ul { list-style: none; padding: 0; margin: .7rem 0 0; }
.menu-notes {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--limestone);
  font-family: var(--sans);
  font-size: .82rem;
  color: #6b6b6b;
}

/* menu landing cards */
.menu-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.8rem;
  padding-bottom: 4rem;
}
.menu-card {
  display: block;
  text-decoration: none;
  color: var(--charcoal);
  background: #fff;
  border: 1px solid var(--limestone);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.menu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(38, 38, 38, .13);
}
.menu-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s;
}
.menu-card:hover img { transform: scale(1.04); }
.menu-card-body { padding: 1.2rem 1.2rem 1.4rem; text-align: center; }
.menu-card-body h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.menu-card-body .avail {
  margin: .35rem 0 0;
  font-style: italic;
  color: var(--olive);
  font-size: 1.08rem;
}

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(30, 28, 24, .9);
  opacity: 0;
  transition: opacity .22s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; }
.lightbox figure {
  margin: 0;
  max-width: 92vw;
  text-align: center;
}
.lightbox img {
  display: block;
  max-width: 92vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .25s ease;
}
.lightbox img.loaded { opacity: 1; }
.lightbox figcaption {
  color: var(--cream);
  font-style: italic;
  font-size: 1.3rem;
  margin-top: 1rem;
}
.lightbox-close {
  position: absolute;
  top: .9rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: rgba(247, 243, 237, .12);
  border: 1px solid rgba(247, 243, 237, .3);
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  transition: background .2s;
}
.lightbox-close:hover { background: rgba(247, 243, 237, .25); }
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: none;
  place-items: center;
  background: rgba(247, 243, 237, .12);
  border: 1px solid rgba(247, 243, 237, .3);
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  transition: background .2s;
}
.lightbox.has-nav .lb-nav { display: grid; }
.lb-nav:hover { background: rgba(247, 243, 237, .25); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }

/* ---------- responsive ---------- */

@media (max-width: 56rem) {
  .story-grid, .events-grid, .visit-grid { grid-template-columns: 1fr; }
  .reserve-grid { grid-template-columns: 1fr; }
  .story-photo { max-width: 26rem; margin: 0 auto; }
  .sig-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { columns: 2; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 46rem) {
  .page-banner img { aspect-ratio: 16 / 9; }
  .field-row { flex-direction: column; gap: 0; }
  .res-actions { flex-direction: column; align-items: stretch; text-align: center; gap: 1rem; }
}

@media (max-width: 46rem) {
  .site-header {
    flex-wrap: wrap;
    gap: .6rem 1rem;
    padding: .8rem 1.25rem;
  }
  .site-nav {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 1.3rem;
  }
  .site-nav a { font-size: .74rem; }
  .site-header .btn-call { margin-left: auto; }
  .wordmark { font-size: 1.15rem; }
  body.inner .site-header { position: static; }
  .chip-nav { top: 0; }
  .hero-img { object-position: 62% 50%; }
  .hero-scrim {
    background: linear-gradient(100deg, rgba(30, 28, 24, .48) 0%, rgba(30, 28, 24, .26) 55%, rgba(30, 28, 24, .12) 100%),
                linear-gradient(to top, rgba(30, 28, 24, .38) 0%, rgba(30, 28, 24, 0) 32%);
  }
  .hero-content { padding-top: 6rem; }
  .hg-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 11rem; }
  .foot-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .section-head { flex-direction: column; align-items: flex-start; gap: .8rem; }
}

/* portrait phones get the tall hero: center it, and lift the text block
   into the calm upper band so the CTAs stay clear of the food */
@media (max-width: 46rem) and (orientation: portrait) {
  .hero { align-items: flex-start; }
  .hero-img { object-position: 50% 50%; }
  .hero-content { padding-top: clamp(9rem, 24vh, 16rem); }
}

/* very short viewports (phones held landscape): shrink the hero type so
   the block fits between header and bottom edge */
@media (max-height: 30rem) {
  .hero-content { padding-top: 5rem; }
  .hero-title { font-size: clamp(2rem, 11vh, 3rem); }
  .hero .eyebrow { margin-bottom: .5rem; }
  .hero-ctas { margin-top: 1.1rem; }
  .hero-scroll { display: none; }
}

@media (max-width: 30rem) {
  .sig-grid { grid-template-columns: 1fr; }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-scroll { animation: none; }
}

/* ---- ops pages (/version, /healthz) ---- */
.ops-sub {
  margin: 0.9rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
  text-align: center;
}
.ops-hero {
  display: block;
  width: 100%;
  aspect-ratio: 2.75 / 1;
  object-fit: cover;
  border-radius: 12px;
  margin: 2.2rem 0;
  box-shadow: 0 2px 14px rgba(38, 38, 38, .12);
}
.ops-rows {
  max-width: 40rem;
  margin: 0 auto;
}
.ops-row {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--limestone);
}
.ops-row dt {
  flex: 0 0 8rem;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
}
.ops-row dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem;
  color: var(--charcoal);
  overflow-wrap: anywhere;
}
/* deployments: snug number/time/version columns, the change text takes the
   rest; the running commit is tinted olive, with a small badge */
.deploy-table th:nth-child(4), .deploy-table td:nth-child(4) {
  width: auto;
  white-space: normal;
  text-align: left;
  padding-right: .4rem;
}
.deploy-table td:nth-child(3) {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92rem;
}
.deploy-table .deploy-num { color: var(--ink-soft); font-size: .95rem; }
tr.deploy-current td { background: rgba(102, 112, 75, .14); }
#deploy-log .admin-pager { margin-bottom: 0; }
/* prev/next walking on detail pages; the deployment nav sits right under
   the page head, so it pulls up against the head's own padding */
.deploy-nav, .detail-nav { justify-content: center; margin: 2.2rem 0 2.6rem; }
.deploy-nav { margin-top: -0.8rem; }
.deploy-now {
  float: right;
  margin-left: 1rem;
  padding: .22rem .65rem;
  border-radius: 20px;
  background: var(--terracotta);
  color: var(--cream);
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* the same pill inline in the detail page's eyebrow */
.deploy-now-inline {
  float: none;
  margin-left: .7rem;
  vertical-align: .12em;
}
/* the deep-dive page's full commit message, on the same column as the
   metadata rows so the page reads as one aligned block */
.deploy-msg {
  max-width: 40rem;
  margin: 2rem auto 0;
  padding: 1.1rem 1.3rem;
  background: var(--cream-2);
  border: 1px solid var(--limestone);
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* sized so a git-conventional 72-column line fits without rewrapping */
  font-size: .84rem;
  line-height: 1.6;
  color: var(--charcoal);
}
/* warn/fail rows get a highlight bar + strong color to draw the eye */
.ops-row.warn, .ops-row.fail {
  padding-inline: .7rem;
  margin-inline: -.7rem;
  border-radius: 8px;
}
.ops-row.warn { background: rgba(164, 106, 58, .12); }
.ops-row.warn dt { color: var(--copper); }
.ops-row.warn dd { color: #8a5426; font-weight: 600; }
.ops-row.fail { background: rgba(158, 83, 53, .14); }
.ops-row.fail dt { color: var(--terracotta); }
.ops-row.fail dd { color: #97231c; font-weight: 600; }
.ops-formats {
  margin: 2rem auto 0;
  max-width: 40rem;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink-soft);
  text-align: center;
}
.ops-formats a { color: var(--olive); }
.ops-formats code { font-size: .78rem; }
/* the ops pages end on link rows; give every last element air above the
   footer boundary, once, from the page itself */
main.ops { padding-bottom: 2.4rem; }
.boh-links { margin: 1.1rem auto 0; }
/* the simulate pages' "email me this as a test" button */
.ops-testmail { margin: 1.6rem auto 0; text-align: center; }
.ops-testmail-sent {
  margin-left: .8rem;
  color: var(--olive);
  font-family: var(--sans);
  font-size: .85rem;
}
.ops-banner {
  max-width: 46rem;
  margin: 1.6rem auto 0;
  padding: .8rem 1.2rem;
  border: 1px solid var(--terracotta);
  border-radius: 8px;
  background: rgba(158, 83, 53, .07);
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--terracotta);
  text-align: center;
}
.ops-banner a { color: var(--terracotta); }
.ops-preview {
  margin: 2rem auto 0;
  max-width: 40rem;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--ink-soft);
  text-align: center;
}
.ops-preview .btn {
  margin-left: .5rem;
  padding: .35em 1.1em;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* deleted-reservation banner on the admin detail page */
.admin-deleted {
  margin: 0 0 1.8rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--terracotta);
  border-radius: 8px;
  background: rgba(158, 83, 53, .07);
  text-align: center;
}
.admin-deleted p {
  margin: 0 0 .9rem;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--terracotta);
}
.admin-del {
  margin-top: 2.4rem;
  text-align: center;
}
.admin-del .btn-del {
  color: var(--terracotta);
  border-color: var(--terracotta);
}
.admin-del .btn-del:hover {
  background: rgba(158, 83, 53, .08);
}
.admin-del p {
  margin: .7rem 0 0;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink-soft);
}
.admin-testnote {
  margin: 0 0 1.8rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--iznik);
  border-radius: 8px;
  background: rgba(13, 110, 140, .06);
  text-align: center;
}
.admin-testnote p {
  margin: 0;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--iznik);
}