/* ─── FONTS ─── */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-garamond-vf-latin.woff2') format('woff2');
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-garamond-italic-vf-latin.woff2') format('woff2');
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

/* ─── TOKENS ─── */
:root {
  --cream:      #F6F0E6;
  --cream-soft: #F0E8DA;
  --sand:       #EAE0D0;
  --clay:       #373E02;
  --clay-deep:  #242801;
  --clay-light: #A9B36B;
  --sage:       #6E7A5A;
  --sage-light: #A8B496;
  --sage-pale:  #E8EDE4;
  --ink:        #4a3a31;
  --ink-deep:   #372B24;
  --ink-soft:   #6e5f52;
  --ink-muted:  #9a8d80;
  --white:      #FFFDF9;
  --line:       rgba(74, 58, 49, .12);
  --line-light: rgba(74, 58, 49, .06);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --nav-height: 72px;
  --section-gap: clamp(4rem, 8vw, 8rem);
  --content-width: 1200px;
  --content-narrow: 800px;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ─── TYPOGRAPHY ─── */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

.dk-eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.dk-body-large {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ─── LAYOUT ─── */
.dk-container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.dk-container-narrow {
  max-width: var(--content-narrow);
}

/* Phones keep a fixed 30px gutter so text never runs to the screen edge. */
@media (max-width: 768px) {
  .dk-container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* Vertical longhand only. The shorthand reset the side padding to zero on every
   element that carries both dk-section and dk-container, so their text ran to
   the screen edge on phones. */
.dk-section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

/* ─── NAV ─── */
.dk-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 100;
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}

.dk-nav.dk-nav-scrolled {
  background: rgba(246, 240, 230, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line);
}

.dk-nav:not(.dk-nav-scrolled) .dk-nav-logo {
  color: var(--white);
}

.dk-nav:not(.dk-nav-scrolled) .dk-nav-links a {
  color: rgba(255, 255, 255, .8);
}

.dk-nav:not(.dk-nav-scrolled) .dk-nav-links a:hover,
.dk-nav:not(.dk-nav-scrolled) .dk-nav-links a.active {
  color: var(--white);
}

.dk-nav:not(.dk-nav-scrolled) .dk-nav-links a.active::after {
  background: var(--white);
}

.dk-nav:not(.dk-nav-scrolled) .dk-hamburger span {
  background: var(--white);
}

.dk-nav-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dk-nav-logo {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: color .3s;
}

.dk-nav-logo span {
  font-style: italic;
}

.dk-nav-logo-img {
  height: 32px;
  width: auto;
  transition: filter .3s;
}

.dk-nav:not(.dk-nav-scrolled) .dk-nav-logo-img {
  filter: brightness(0) invert(1);
}

/* Hero pages paint the nav white. With the cream overlay open that white
   disappears, so the menu-open state pulls the logo and bars back to ink. */
.dk-nav.dk-menu-open .dk-hamburger span { background: var(--ink); }
.dk-nav.dk-menu-open .dk-nav-logo { color: var(--ink); }
.dk-nav.dk-menu-open .dk-nav-logo-img { filter: none; }

.dk-nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.dk-nav-links a {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  transition: color .2s;
  position: relative;
}

.dk-nav-links a:hover,
.dk-nav-links a.active {
  color: var(--ink);
}

.dk-nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--clay);
}

.dk-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  background: var(--clay);
  color: var(--white) !important;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background .2s, transform .15s;
}

.dk-nav-cta:hover {
  background: var(--clay-deep);
  transform: translateY(-1px);
}

/* ─── LANGUAGE SWITCH ─── */
/* Shows the language you are on; clicking goes to the other one. A small solid
   pill in tree brown, so it reads as a utility next to the olive Book Now
   button rather than competing with it, and carries its own background so it
   needs no hero or menu-open variants. */
.dk-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 0.42rem 0.7rem;
  background: var(--ink);
  border-radius: 100px;
  color: var(--white) !important;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  transition: background .2s, transform .15s;
}

.dk-lang:hover,
.dk-lang:focus-visible {
  background: var(--ink-deep);
  transform: translateY(-1px);
}

/* The menu sets its links in 1.8rem serif; the switch is a control, not a
   destination, so it keeps its own size. */
.dk-mobile-menu .dk-lang { font-size: 0.8rem; }

/* ─── MOBILE NAV ─── */
.dk-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  z-index: 110;
}

.dk-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s, opacity .3s, background .3s;
}

.dk-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.dk-hamburger.open span:nth-child(2) { opacity: 0; }
.dk-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Below the nav, not above it. At z-index 105 the overlay covered the nav, and
   because .dk-nav is its own stacking context the hamburger's z-index 110 could
   not climb out of it, so the close X was buried under the cream. */
.dk-mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 95;
  padding-top: var(--nav-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.dk-mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.dk-mobile-menu a {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--ink);
}

@media (max-width: 768px) {
  .dk-nav-links { display: none; }
  .dk-hamburger { display: flex; }
}

/* ─── HERO ─── */
.dk-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* A real <img>, not a background: image search can see it, and the preload
   scanner finds it in the raw HTML instead of waiting for the stylesheet.
   124% tall and pulled up 12% so there is image to spare at both ends; the
   script slides it with translate3d, which stays on the compositor. Height is
   stated rather than left to top/bottom insets, because a replaced element
   with height:auto takes its intrinsic height and ignores the bottom inset. */
.dk-hero-bg {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  filter: brightness(.55);
  will-change: transform;
}

.dk-hero-content {
  position: relative;
  z-index: 2;
  color: var(--white);
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  max-width: 800px;
}

.dk-hero h1 {
  margin-bottom: 1rem;
  text-shadow: 0 2px 30px rgba(0,0,0,.3);
}

.dk-hero-sub {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-style: italic;
  opacity: .9;
  margin-bottom: 2.5rem;
}

.dk-hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--white);
  opacity: .7;
  animation: dk-bounce 2s infinite;
  font-size: 1.5rem;
  cursor: pointer;
}

@keyframes dk-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ─── BUTTONS ─── */
.dk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: all .25s;
}

.dk-btn-primary {
  background: var(--clay);
  color: var(--white);
}
.dk-btn-primary:hover {
  background: var(--clay-deep);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(55, 62, 2, .3);
}

.dk-btn-outline {
  border: 1px solid var(--ink);
  color: var(--ink);
}
.dk-btn-outline:hover {
  background: var(--ink);
  color: var(--cream);
}

.dk-btn-white {
  background: var(--white);
  color: var(--ink);
}
.dk-btn-white:hover {
  background: var(--cream);
  transform: translateY(-2px);
}

/* ─── PHILOSOPHY / TEXT SECTIONS ─── */
.dk-philosophy {
  text-align: center;
}

.dk-philosophy h2 {
  margin-bottom: 1.5rem;
}

.dk-philosophy p {
  max-width: 600px;
  margin: 0 auto;
}

/* ─── JOURNEY STEPS (inspired by restingkoala's 3-step) ─── */
.dk-journey {
  background: var(--sand);
}

.dk-journey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  text-align: center;
}

.dk-journey-step-number {
  font-family: var(--serif);
  font-size: 3.5rem;
  color: var(--clay);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.dk-journey-step h3 {
  margin-bottom: 0.75rem;
}

.dk-journey-step p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .dk-journey-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ─── LOCATION CARDS ─── */
.dk-locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.dk-location-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .3s;
}

.dk-location-card:hover {
  transform: translateY(-4px);
}

.dk-location-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.dk-location-card:hover .dk-location-card-bg {
  transform: scale(1.03);
}

.dk-location-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30,22,15,.75) 0%, transparent 60%);
}

.dk-location-card-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  color: var(--white);
}

.dk-location-card-content .dk-eyebrow {
  color: var(--clay-light);
  margin-bottom: 0.5rem;
}

.dk-location-card-content h3 {
  margin-bottom: 0.25rem;
}

.dk-location-card-content p {
  font-size: 0.9rem;
  opacity: .85;
  margin-bottom: 1rem;
}

.dk-location-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 2px;
  transition: border-color .2s;
}

.dk-location-card-link:hover {
  border-color: var(--white);
}

@media (max-width: 768px) {
  .dk-locations-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* ─── MARQUEE ─── */
.dk-marquee {
  overflow: hidden;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.dk-marquee-track {
  display: flex;
  gap: 3rem;
  animation: dk-scroll-marquee 25s linear infinite;
  width: max-content;
}

.dk-marquee-track span {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-style: italic;
  color: var(--ink-muted);
  white-space: nowrap;
}

.dk-marquee-track span::after {
  content: '·';
  margin-left: 3rem;
  color: var(--clay);
}

@keyframes dk-scroll-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .dk-marquee-track { animation: none; }
}

/* ─── CTA BAND ─── */
.dk-cta-band {
  background: var(--ink);
  color: var(--white);
  text-align: center;
}

.dk-cta-band h2 {
  margin-bottom: 0.75rem;
}

/* Olive on the dark band is one dark on another, so the buttons carry the light
   tint here and the dark text instead. */
.dk-cta-band .dk-btn-primary {
  background: var(--clay-light);
  color: var(--ink);
}

.dk-cta-band .dk-btn-primary:hover {
  background: var(--white);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

.dk-cta-band p {
  color: rgba(255,255,255,.7);
  margin-bottom: 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── FOOTER ─── */
.dk-footer {
  background: var(--ink);
  color: rgba(255,255,255,.7);
  padding: 4rem 0 2rem;
}

.dk-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

.dk-footer-brand {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 1rem;
}

.dk-footer h4 {
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.dk-footer a {
  color: rgba(255,255,255,.6);
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.5rem;
  transition: color .2s;
}

.dk-footer a:hover { color: var(--white); }

.dk-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .dk-footer-grid { grid-template-columns: 1fr 1fr; }

  /* On a phone the copyright and the credit will not sit on one line without
     wrapping mid sentence, so the credit takes its own line deliberately. */
  .dk-footer-credit { display: block; }

  .dk-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
@media (max-width: 480px) {
  .dk-footer-grid { grid-template-columns: 1fr; }
}

/* ─── MENU TABS ─── */
.dk-menu-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.5rem;
}

.dk-menu-tab {
  padding: 0.75rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s, border-color .2s;
  cursor: pointer;
}

.dk-menu-tab:hover { color: var(--ink); }
.dk-menu-tab[aria-selected="true"] {
  color: var(--clay);
  border-bottom-color: var(--clay);
}

/* Five tabs do not fit a phone. Scroll the row rather than let it widen the
   page, which pushed every other element out of the viewport. */
@media (max-width: 768px) {
  .dk-menu-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .dk-menu-tabs::-webkit-scrollbar {
    display: none;
  }

  .dk-menu-tab {
    flex: 0 0 auto;
    padding: 0.75rem 1rem;
  }
}

.dk-menu-panel {
  display: none;
}

.dk-menu-panel.active {
  display: block;
}

/* ─── MAP ─── */
.dk-map {
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}

.dk-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  filter: grayscale(.35) contrast(.95);
}

@media (max-width: 768px) {
  .dk-map iframe {
    height: 300px;
  }
}

/* ─── MENU ITEMS ─── */
.dk-menu-category {
  margin-bottom: 3rem;
}

.dk-menu-category h3 {
  margin-bottom: 0.25rem;
}

.dk-menu-category-desc {
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.dk-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-light);
  gap: 1rem;
}

.dk-menu-item-info {
  flex: 1;
}

.dk-menu-item-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
}

.dk-menu-item-desc {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-top: 0.15rem;
  font-style: italic;
}

.dk-menu-item-prices {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
  text-align: right;
}

.dk-menu-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}

.dk-menu-price-duration {
  font-size: 0.7rem;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.dk-menu-price-amount {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sage);
}

/* ─── PACKAGES ─── */
.dk-package-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line-light);
}

.dk-package-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.dk-package-name {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
}

.dk-package-price {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--sage);
}

.dk-package-desc {
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 0.2rem;
}

/* ─── LOCATION PAGE HERO ─── */
.dk-location-hero {
  position: relative;
  height: 60vh;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.dk-location-hero .dk-hero-bg {
  filter: brightness(.5);
}

.dk-location-hero-content {
  position: relative;
  z-index: 2;
  color: var(--white);
  padding: 3rem clamp(1.25rem, 4vw, 3rem);
  max-width: var(--content-width);
  margin: 0 auto;
  width: 100%;
}

.dk-location-hero-content .dk-eyebrow {
  color: var(--clay-light);
  margin-bottom: 0.5rem;
}

.dk-location-hero-content p {
  max-width: 500px;
  opacity: .9;
  font-size: 1.05rem;
  margin-top: 0.5rem;
}

/* ─── INFO GRID ─── */
.dk-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.dk-info-card {
  padding: 2rem 1.5rem;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(74, 58, 49, .05), 0 8px 24px -12px rgba(74, 58, 49, .16);
  transition: transform .25s ease, box-shadow .25s ease;
}

.dk-info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(74, 58, 49, .06), 0 16px 32px -14px rgba(74, 58, 49, .22);
}

.dk-info-card .dk-eyebrow {
  color: var(--sage);
  margin-bottom: 0.7rem;
}

/* Short rule under the label, in place of the box border that used to carry
   the structure. */
.dk-info-card .dk-eyebrow::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--sand);
  margin: 0.7rem auto 0;
}

.dk-info-card p {
  font-family: var(--serif);
  font-size: 1.3rem;
}

@media (max-width: 768px) {
  .dk-info-grid { grid-template-columns: 1fr; }
}

/* ─── FACT LIST ─── */
/* Label plus a short paragraph, two up. Used for the practical detail on the
   Locations and Contact pages, where a card would be too much furniture. */
.dk-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem clamp(2rem, 5vw, 4rem);
  margin-top: 2.5rem;
}

.dk-fact {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.dk-fact h3 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.6rem;
}

.dk-fact p {
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

.dk-fact p + p { margin-top: 0.5rem; }

.dk-facts-three { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .dk-facts-three { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .dk-facts,
  .dk-facts-three { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ─── OILS ─── */
.dk-oils-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: 2.5rem;
}

/* Bingin carries the coconut oil as well. */
.dk-oils-grid.dk-oils-four { grid-template-columns: repeat(4, 1fr); }

.dk-oil-img {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--sand);
}

.dk-oil-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.dk-oil:hover .dk-oil-img img { transform: scale(1.04); }

.dk-oil h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 1rem 0 0.35rem;
}

.dk-oil p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Only the coconut oil carries a surcharge. Sage, like every other price.
   Qualified by p so it beats `.dk-oil p`, which would otherwise win on
   specificity and repaint it in body ink. */
.dk-oil p.dk-oil-price {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sage);
  margin-top: 0.5rem;
}

@media (max-width: 900px) {
  .dk-oils-grid,
  .dk-oils-grid.dk-oils-four { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .dk-oils-grid,
  .dk-oils-grid.dk-oils-four { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ─── SPLIT SECTION ─── */
.dk-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.dk-split-img {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/5;
}

.dk-split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dk-split-text .dk-eyebrow {
  margin-bottom: 0.75rem;
}

.dk-split-text h2 {
  margin-bottom: 1rem;
}

.dk-split-text p {
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.8;
}

.dk-split-text .dk-btn {
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .dk-split { grid-template-columns: 1fr; gap: 2rem; }
}

/* ─── GALLERY ─── */
.dk-gallery {
  padding: var(--section-gap) 0;
}

.dk-gallery-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
}

.dk-gallery-viewport::-webkit-scrollbar {
  display: none;
}

.dk-gallery-viewport.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.dk-gallery-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
}

/* Sized from the height so the row stays level and the aspect ratio picks the
   width. Same geometry the old `width: clamp(220px, 24vw, 340px)` produced. */
.dk-gallery-item {
  position: relative;
  flex: 0 0 auto;
  height: clamp(330px, 36vw, 510px);
  width: auto;
  aspect-ratio: 2/3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sand);
}

/* For the landscape originals, which would lose most of their frame to a
   portrait crop. Twice the width of a standing item. */
.dk-gallery-item-wide {
  aspect-ratio: 4/3;
}

/* Wider than the frame so the image has room to slide within it.
   At rest the overhang is even, so a shift of 0 sits centred. */
.dk-gallery-item img {
  position: absolute;
  top: 0;
  left: -14%;
  width: 128%;
  max-width: none;   /* the global img rule would clamp this back to the frame */
  height: 100%;
  object-fit: cover;
  /* Set per item by the gallery script, from that item's horizontal position. */
  transform: translateX(var(--dk-gallery-shift, 0px));
  will-change: transform;
  pointer-events: none;
  user-select: none;
}

/* Every frame lags by the same distance, so a wide one covers that travel with
   proportionally less overhang. Zooming it less keeps more of the photograph.
   The floor is 11% either side: the lag peaks at half of `inner` (0.22) times
   the narrowest cell, and no cell is narrower than this one. */
.dk-gallery-item-wide img {
  left: -12%;
  width: 124%;
}

@media (max-width: 768px) {
  .dk-gallery-item {
    height: clamp(300px, 87vw, 390px);
  }
  /* 4/3 would run past the edge of a phone, so the wide items go square. */
  .dk-gallery-item-wide {
    aspect-ratio: 1/1;
  }
  .dk-gallery-track {
    gap: 0.75rem;
  }
}


/* ─── ERROR PAGE ─── */
/* Centred, and pushed clear of the fixed nav since there is no hero to sit
   under it. Sized so the block lands near the middle of a phone screen. */
.dk-error {
  min-height: calc(100vh - var(--nav-height));
  padding-top: calc(var(--nav-height) + 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.dk-error .dk-eyebrow {
  color: var(--sage);
  margin-bottom: 1rem;
}

.dk-error h1 { margin-bottom: 1rem; }

.dk-error .dk-body-large {
  max-width: 46ch;
  margin: 0 auto;
}

.dk-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ─── LINK PAGE ─── */
/* socials.laiabali.com. Opened from an Instagram profile, on a phone, almost
   without exception, so it is designed at phone width and merely kept tidy on
   anything larger. One column, large tap targets, no nav and no scroll
   animation to sit through. */
.dk-links-body { background: var(--cream-soft); }

.dk-links {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 18px clamp(3rem, 12vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* ── header ── */
.dk-links-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Full bleed past the page gutter, so the photo reads as a cover rather than
   a card floating at the top. */
.dk-links-cover {
  width: calc(100% + 36px);
  margin: 0 -18px 1.25rem;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0 0 22px 22px;
  background: var(--sand);
}

.dk-links-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lifted over the cover's bottom edge to tie the two together. */
.dk-links-logo {
  width: auto;
  height: 46px;
  margin-top: -2.6rem;
  padding: 0.7rem 1.1rem;
  background: var(--cream-soft);
  border-radius: 14px;
  margin-bottom: 0.85rem;
}

.dk-links-sub {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}

/* ── sections ── */
.dk-links-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dk-links-label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin-bottom: 0.4rem;
}

/* ── list rows: menus and reviews ── */
/* Left aligned with a chevron, so a list of five reads as a menu rather than
   five identical slabs. */
.dk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 54px;
  padding: 0.85rem 1.1rem;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(74, 58, 49, .05), 0 6px 18px -14px rgba(74, 58, 49, .3);
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}

.dk-row em {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-left: 0.5rem;
}

.dk-row::after {
  content: "→";
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--clay-light);
  flex: none;
  transition: transform .18s ease;
}

.dk-row:active { transform: scale(.985); }
.dk-row:hover::after,
.dk-row:focus-visible::after { transform: translateX(3px); }

/* ── location card ── */
.dk-place {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(74, 58, 49, .05), 0 10px 28px -18px rgba(74, 58, 49, .4);
}

/* The map is the pin. Lazy, because three Google embeds on a phone is real
   weight and none of them is above the fold. */
.dk-place-map {
  height: 150px;
  line-height: 0;
  background: var(--sand);
}

.dk-place-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(.3) contrast(.96);
}

.dk-place-body {
  padding: 1.15rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.dk-place-body h3 {
  font-size: 1.5rem;
  line-height: 1.15;
  margin: -0.2rem 0 0;
}

.dk-place-address {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}

/* ── buttons inside a card ── */
.dk-btn-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.75rem 1rem;
  background: var(--clay);
  border: 1px solid var(--clay);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--white);
  transition: background .18s ease, transform .18s ease;
}

.dk-btn-link:active { transform: scale(.985); }
.dk-btn-link:hover,
.dk-btn-link:focus-visible { background: var(--clay-deep); border-color: var(--clay-deep); }

/* Directions is the fallback action, not the one we are asking for. */
.dk-btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
}

.dk-btn-ghost:hover,
.dk-btn-ghost:focus-visible {
  background: var(--cream);
  border-color: var(--line);
  color: var(--ink);
}

/* ── footer ── */
.dk-links-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.dk-links-foot a { color: var(--ink-soft); }
.dk-links-foot a:hover { color: var(--clay); }

@media (prefers-reduced-motion: reduce) {
  .dk-row, .dk-row::after, .dk-btn-link { transition: none; }
}

/* ─── SCROLL REVEAL ─── */
.dk-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.dk-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .dk-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── HAIRLINE RULE ─── */
.dk-rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--section-gap) auto;
  max-width: var(--content-width);
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ─── RESPONSIVE MENU ITEMS ─── */
@media (max-width: 600px) {
  .dk-menu-item {
    flex-direction: column;
    gap: 0.4rem;
  }
  .dk-menu-item-prices {
    justify-content: flex-start;
  }
}

/* ─── LOCATIONS OVERVIEW HERO ─── */
.dk-page-hero {
  padding-top: calc(var(--nav-height) + 4rem);
  padding-bottom: 3rem;
  text-align: center;
}

.dk-page-hero h1 {
  margin-bottom: 0.75rem;
}

.dk-page-hero p {
  max-width: 550px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.05rem;
}