/* ==========================================================================
   Jøvika Lodge — design system v2
   A field journal from the Arctic threshold: cinematic navy nights,
   warm paper by day, copper the color of the hearth. Brand colors
   (copper #bc7748, navy #1c3c5f) sampled directly from the lodge's own
   hand-painted sign. Display: Cormorant Garamond · Body: Manrope ·
   Utility: Space Mono.
   ========================================================================== */

:root {
  --ink: #060b0f;
  --ink-2: #0a161e;
  --ink-3: #112029;
  --line-dark: rgba(242, 236, 224, 0.11);

  --paper: #ded5bd;
  --paper-2: #cfc3a4;
  --line-light: rgba(15, 20, 24, 0.14);

  --text-on-ink: #f0eadd;
  --text-on-ink-soft: #a9b4b7;
  --text-on-paper: #10161b;
  --text-on-paper-soft: #4a5355;

  --copper: #bc7748;
  --copper-hi: #dc9c6c;
  --copper-lo: #8f5a34;
  --copper-dark: #6f4322;
  --navy: #1c3c5f;
  --aurora: #5fbfa0;

  --accepted: #4f7a5e;
  --declined: #a5453a;
  --pending: #bc7748;
  --error-text: #8f3a30;

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, Consolas, monospace;

  --container: 1240px;
  --edge: 3px;
  --section-pad: clamp(72px, 11vw, 148px);
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.gsap-scroll-lock { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-on-paper);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; margin: 0; line-height: 1.08; letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--copper-lo); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.section { padding: var(--section-pad) 0; position: relative; }
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-dark);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; display: inline-block; }
.on-ink .eyebrow, .hero .eyebrow, .page-hero .eyebrow { color: var(--copper-hi); }
.on-ink :focus-visible { outline-color: var(--copper); }

/* film-grain texture, used sparingly on ink sections for tactile depth */
.grain { position: relative; }
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.on-ink { background: var(--ink); color: var(--text-on-ink-soft); }
.on-ink h2, .on-ink h3, .on-ink h4 { color: var(--text-on-ink); }

/* ==========================================================================
   Stories section — night sky: drifting aurora curtains + a starfield.
   Ambient CSS-keyframe motion is the primary movement (real aurora doesn't
   chase a cursor); mouse position drives only a small secondary parallax
   on the whole group. Desktop only, reduced-motion safe. See main.js.
   ========================================================================== */
.stories-section { overflow: hidden; }
.stories-section > .container { position: relative; z-index: 1; }
.stories-glow-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.stories-stars { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.stories-glow-layer.is-active .stories-stars { opacity: 1; }
.star-layer { position: absolute; top: 0; left: 0; width: 1px; height: 1px; background: transparent; }
.star-layer-1 { box-shadow: 443px 205px rgba(255,255,255,0.83), 308px 311px rgba(255,255,255,0.82), 1736px 389px rgba(255,255,255,0.40), 1113px 95px rgba(255,255,255,0.50), 1590px 10px rgba(255,255,255,0.43), 1456px 24px rgba(255,255,255,0.79), 1252px 107px rgba(255,255,255,0.58), 1385px 162px rgba(255,255,255,0.56), 453px 392px rgba(255,255,255,0.80), 191px 204px rgba(255,255,255,0.51), 956px 278px rgba(255,255,255,0.75), 1522px 229px rgba(255,255,255,0.62), 1163px 47px rgba(255,255,255,0.37), 981px 102px rgba(255,255,255,0.79), 55px 42px rgba(255,255,255,0.38), 761px 36px rgba(255,255,255,0.65), 680px 155px rgba(255,255,255,0.65), 1035px 26px rgba(255,255,255,0.52), 49px 418px rgba(255,255,255,0.45), 1029px 420px rgba(255,255,255,0.81), 137px 461px rgba(255,255,255,0.64), 267px 303px rgba(255,255,255,0.79), 834px 237px rgba(255,255,255,0.58), 1376px 210px rgba(255,255,255,0.51), 1177px 335px rgba(255,255,255,0.76), 1667px 468px rgba(255,255,255,0.38), 1611px 283px rgba(255,255,255,0.44), 323px 90px rgba(255,255,255,0.51), 1231px 195px rgba(255,255,255,0.36), 581px 229px rgba(255,255,255,0.52), 1678px 347px rgba(255,255,255,0.79), 33px 218px rgba(255,255,255,0.46), 1106px 132px rgba(255,255,255,0.48), 716px 216px rgba(255,255,255,0.83), 753px 162px rgba(255,255,255,0.72), 1190px 197px rgba(255,255,255,0.74), 103px 295px rgba(255,255,255,0.45), 608px 424px rgba(255,255,255,0.56), 969px 405px rgba(255,255,255,0.79), 1036px 356px rgba(255,255,255,0.77), 1548px 246px rgba(255,255,255,0.81), 344px 62px rgba(255,255,255,0.47), 11px 220px rgba(255,255,255,0.42), 589px 147px rgba(255,255,255,0.57), 924px 12px rgba(255,255,255,0.69), 1488px 156px rgba(255,255,255,0.77), 1695px 120px rgba(255,255,255,0.52), 390px 12px rgba(255,255,255,0.53), 654px 219px rgba(255,255,255,0.71), 413px 134px rgba(255,255,255,0.62), 870px 194px rgba(255,255,255,0.82), 235px 508px rgba(255,255,255,0.68), 484px 48px rgba(255,255,255,0.75), 1677px 248px rgba(255,255,255,0.64), 8px 496px rgba(255,255,255,0.59), 1077px 54px rgba(255,255,255,0.55), 1784px 92px rgba(255,255,255,0.56), 644px 128px rgba(255,255,255,0.47), 1476px 473px rgba(255,255,255,0.56), 495px 211px rgba(255,255,255,0.78); animation: twinkle-a 5s ease-in-out infinite; }
.star-layer-2 { box-shadow: 299px 211px 1px rgba(255,250,240,0.52), 126px 45px 1px rgba(255,250,240,0.53), 1738px 361px 1px rgba(255,250,240,0.71), 1447px 499px 1px rgba(255,250,240,0.87), 883px 510px 1px rgba(255,250,240,0.71), 72px 334px 1px rgba(255,250,240,0.80), 678px 228px 1px rgba(255,250,240,0.63), 1121px 475px 1px rgba(255,250,240,0.70), 277px 148px 1px rgba(255,250,240,0.70), 1089px 278px 1px rgba(255,250,240,0.57), 1009px 268px 1px rgba(255,250,240,0.83), 664px 63px 1px rgba(255,250,240,0.85), 237px 30px 1px rgba(255,250,240,0.80), 912px 442px 1px rgba(255,250,240,0.82), 780px 380px 1px rgba(255,250,240,0.73), 1263px 222px 1px rgba(255,250,240,0.71), 1243px 378px 1px rgba(255,250,240,0.66), 593px 498px 1px rgba(255,250,240,0.67), 282px 505px 1px rgba(255,250,240,0.78), 1378px 22px 1px rgba(255,250,240,0.86), 504px 54px 1px rgba(255,250,240,0.84), 490px 250px 1px rgba(255,250,240,0.81), 545px 157px 1px rgba(255,250,240,0.89), 942px 286px 1px rgba(255,250,240,0.82); animation: twinkle-b 7s ease-in-out infinite 1.4s; }
@keyframes twinkle-a { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.35; } }
@keyframes twinkle-b { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.25; } }

.aurora-follow { position: absolute; inset: -18% -10%; transition: transform 0.4s ease-out; will-change: transform; }
.aurora-ribbon { position: absolute; border-radius: 50%; mix-blend-mode: screen; opacity: 0; transition: opacity 1.6s ease; }
.stories-glow-layer.is-active .aurora-ribbon { opacity: var(--r-op, 1); }
.ribbon-a {
  top: 4%; left: -12%; width: 85%; height: 40%; filter: blur(65px); transform: rotate(-9deg);
  background: radial-gradient(ellipse at 45% 50%, rgba(95,191,160,0.6) 0%, rgba(95,191,160,0.25) 40%, transparent 72%);
  --r-op: 0.55; animation: driftA 21s ease-in-out infinite alternate;
}
.ribbon-b {
  top: 24%; left: 22%; width: 82%; height: 44%; filter: blur(80px); transform: rotate(-4deg);
  background: radial-gradient(ellipse at 55% 50%, rgba(75,175,155,0.5) 0%, rgba(75,175,155,0.2) 45%, transparent 70%);
  --r-op: 0.4; animation: driftB 26s ease-in-out infinite alternate;
}
.ribbon-c {
  top: 0%; left: 38%; width: 68%; height: 34%; filter: blur(60px); transform: rotate(-13deg);
  background: radial-gradient(ellipse at 50% 50%, rgba(142,120,222,0.45) 0%, rgba(142,120,222,0.15) 45%, transparent 72%);
  --r-op: 0.32; animation: driftC 29s ease-in-out infinite alternate;
}
.ribbon-warm {
  bottom: -18%; left: 8%; width: 74%; height: 32%; filter: blur(85px);
  background: radial-gradient(ellipse at 50% 60%, rgba(188,119,72,0.35) 0%, transparent 72%);
  --r-op: 0.22; animation: driftWarm 24s ease-in-out infinite alternate;
}
@keyframes driftA {
  0% { transform: translate(-3%, -2%) rotate(-9deg) scaleY(1); }
  50% { transform: translate(5%, 4%) rotate(-5deg) scaleY(1.22); }
  100% { transform: translate(-2%, 5%) rotate(-11deg) scaleY(0.9); }
}
@keyframes driftB {
  0% { transform: translate(3%, 2%) rotate(-4deg) scaleY(1); }
  50% { transform: translate(-5%, -3%) rotate(-8deg) scaleY(1.18); }
  100% { transform: translate(2%, -3%) rotate(-1deg) scaleY(0.88); }
}
@keyframes driftC {
  0% { transform: translate(-4%, 3%) rotate(-13deg) scaleY(1); }
  50% { transform: translate(4%, -4%) rotate(-17deg) scaleY(1.15); }
  100% { transform: translate(-3%, -2%) rotate(-10deg) scaleY(0.93); }
}
@keyframes driftWarm {
  0% { transform: translate(-2%, 0) scaleX(1); }
  50% { transform: translate(3%, -1%) scaleX(1.12); }
  100% { transform: translate(-1%, 1%) scaleX(0.94); }
}
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .stories-glow-layer { display: none; }
}

.rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent 0%, var(--line-light) 20%, var(--line-light) 80%, transparent 100%); }
.rule-ink { background: linear-gradient(90deg, transparent 0%, var(--line-dark) 20%, var(--line-dark) 80%, transparent 100%); }

/* signature coordinate mark */
.coord {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.07em; color: var(--text-on-ink-soft);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.coord b { color: var(--copper-hi); font-weight: 700; }
.coord::before { content: "◆"; font-size: 8px; color: var(--copper); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 15px 26px; border-radius: var(--edge); border: 1px solid transparent;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
  cursor: pointer;
}
.btn-copper { background: var(--copper); color: #1a0f07; }
.btn-copper:hover { background: var(--copper-hi); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(188,119,72,0.32); }
.btn-line-ink { border-color: var(--line-dark); color: var(--text-on-ink); }
.btn-line-ink:hover { border-color: var(--copper); color: var(--copper-hi); transform: translateY(-2px); }
.btn-line-paper { border-color: var(--line-light); color: var(--text-on-paper); }
.btn-line-paper:hover { border-color: var(--copper); color: var(--copper-lo); transform: translateY(-2px); }
.btn-small { padding: 10px 18px; font-size: 11px; }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ==========================================================================
   Header
   ========================================================================== */
.masthead { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.masthead-bar {
  background: linear-gradient(180deg, rgba(4,9,13,0.42), rgba(4,9,13,0.22));
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  border-bottom: 1px solid rgba(240,234,221,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 30px rgba(0,0,0,0.1);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead-bar { background: rgba(4,9,13,0.9); }
}
/* backdrop-filter makes .masthead-bar a containing block for fixed-position
   descendants (spec behavior), which traps the full-screen mobile nav inside
   the header's own small height instead of the viewport. Both things that set
   gsap-scroll-lock (mobile nav, lightbox) already cover the header with an
   opaque full-screen panel, so dropping the blur here is invisible. */
.gsap-scroll-lock .masthead-bar { backdrop-filter: none; -webkit-backdrop-filter: none; }
.masthead.scrolled .masthead-bar {
  background: linear-gradient(180deg, rgba(4,9,13,0.94), rgba(4,9,13,0.86));
  border-color: rgba(240,234,221,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 44px rgba(0,0,0,0.4);
}
.masthead-row { display: flex; align-items: center; justify-content: space-between; height: 92px; transition: height 0.4s ease; }
.masthead.scrolled .masthead-row { height: 72px; }
.brand-mark { display: flex; align-items: center; }
.brand-mark img { height: 46px; width: auto; transition: height 0.4s ease; }
.masthead.scrolled .brand-mark img { height: 36px; }

.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-on-ink-soft); padding: 6px 0; border-bottom: 1px solid transparent; position: relative;
  transition: color 0.2s ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--copper-hi); }
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 1px; background: var(--copper);
  transition: right 0.3s cubic-bezier(.2,.8,.2,1);
}
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }
.main-nav .btn { margin-left: 4px; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-dark); color: var(--text-on-ink);
  border-radius: var(--edge); width: 46px; height: 46px; position: relative;
}
.nav-toggle .bar { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; transition: transform 0.25s ease, opacity 0.25s ease; }
.nav-toggle .bar:nth-child(1) { top: 16px; }
.nav-toggle .bar:nth-child(2) { top: 22px; }
.nav-toggle .bar:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .main-nav {
    position: fixed; inset: 0; top: 0; background: var(--ink); flex-direction: column; justify-content: center;
    align-items: flex-start; gap: 0; padding: 0 clamp(24px, 8vw, 60px);
    opacity: 0; visibility: hidden; transform: translateY(-14px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .main-nav.open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s; }
  .main-nav a { width: 100%; padding: 20px 0; border-bottom: 1px solid var(--line-dark); font-size: 15px; }
  .main-nav .btn { margin: 24px 0 0; }
  .nav-toggle { display: inline-flex; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav, .masthead-bar, .masthead-row, .brand-mark img, .nav-toggle .bar { transition: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; color: var(--text-on-ink); background: #060d13; overflow: hidden; }
.hero-media { position: absolute; top: -12%; left: 0; right: 0; height: 124%; will-change: transform; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.58; }
.hero-media video.will-play { opacity: 0; transition: opacity 1.2s ease; }
.hero-media video.will-play.is-ready { opacity: 0.58; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,13,19,0.42) 0%, rgba(6,13,19,0.28) 40%, rgba(6,13,19,0.96) 100%); }
.hero-top { position: relative; z-index: 2; padding-top: 132px; }
.hero-body { position: relative; z-index: 2; padding-bottom: 68px; }
.hero-kicker { display: block; margin-bottom: 20px; }
.hero-title { font-size: clamp(46px, 8.4vw, 108px); max-width: 17ch; line-height: 1.24; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.hero-title em { font-style: italic; color: var(--copper-hi); }
.hero-lede { max-width: 44ch; color: var(--text-on-ink-soft); font-size: 18px; margin-top: 26px; }
.hero-bar { margin-top: 46px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.hero-price { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-on-ink-soft); }
.hero-price b { color: var(--text-on-ink); font-size: 21px; font-weight: 700; display: block; margin-top: 4px; }

.scroll-cue {
  position: absolute; z-index: 2; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-on-ink-soft);
}
.scroll-cue .wire { width: 1px; height: 38px; background: linear-gradient(180deg, var(--copper-hi), transparent); position: relative; overflow: hidden; }
.scroll-cue .wire::after { content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--copper-hi); animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue .wire::after { animation: none; display: none; } }
/* The price/button row wraps to two lines on narrow screens, which grows tall
   enough to collide with this fixed-to-bottom element — swipe-to-scroll is
   already the expected gesture on touch devices, so just drop the hint there. */
@media (max-width: 700px) { .scroll-cue { display: none; } }

/* ==========================================================================
   Editorial intro / pillars
   ========================================================================== */
.intro-split { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px, 6vw, 96px); align-items: end; }
@media (max-width: 900px) { .intro-split { grid-template-columns: 1fr; } }
.intro-split .visual { position: relative; }
.intro-split .visual img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.intro-split .visual .frame-num {
  position: absolute; bottom: -18px; left: -18px; background: var(--paper); border: 1px solid var(--line-light);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; padding: 8px 14px; color: var(--copper-dark);
}
.intro-split h2 { font-size: clamp(32px, 4.4vw, 52px); margin: 18px 0 26px; }
.intro-split .lede { font-size: 19px; color: var(--text-on-paper); max-width: 46ch; }
.intro-split p.support { color: var(--text-on-paper-soft); max-width: 46ch; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-light); margin-top: 72px; border-top: 1px solid var(--line-light); }
@media (max-width: 780px) { .pillars { grid-template-columns: 1fr; } }
.pillar { background: var(--paper); padding: 40px 34px; }
.pillar .icon { width: 34px; height: 34px; color: var(--copper); margin-bottom: 20px; }
.pillar .icon i { font-size: 30px; }
.pillar-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--copper-dark); }
.pillar h3 { font-size: 27px; margin: 12px 0 10px; }
.pillar p { color: var(--text-on-paper-soft); font-size: 15.5px; }

.activity-teaser {
  display: flex; align-items: center; gap: clamp(28px, 4vw, 48px); flex-wrap: wrap;
  margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line-light);
}
.activity-teaser-item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-on-paper-soft); transition: color 0.2s ease;
}
.activity-teaser-item .icon { font-size: 20px; color: var(--copper); transition: color 0.2s ease; }
.activity-teaser-item:hover { color: var(--text-on-paper); }
.activity-teaser-item:hover .icon { color: var(--copper-hi); }
.activity-teaser-more {
  margin-left: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--copper-dark); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease;
}
.activity-teaser-more:hover { color: var(--copper); }
@media (max-width: 560px) { .activity-teaser-more { margin-left: 0; width: 100%; } }

/* ==========================================================================
   Editorial accommodation rows
   ========================================================================== */
.stay-rows { display: flex; flex-direction: column; margin-top: 60px; }
.stay-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; padding: clamp(40px, 6vw, 68px) 0; border-top: 1px solid var(--line-light); }
.stay-row:last-child { border-bottom: 1px solid var(--line-light); }
.stay-row:nth-child(even) .stay-visual { order: 2; }
@media (max-width: 860px) { .stay-row { grid-template-columns: 1fr; } .stay-row:nth-child(even) .stay-visual { order: 0; } }
.stay-visual { position: relative; overflow: hidden; }
.stay-visual img { width: 100%; aspect-ratio: 5/4; object-fit: cover; transition: transform 0.9s cubic-bezier(.2,.8,.2,1); }
.stay-row:hover .stay-visual img { transform: scale(1.045); }
.stay-index { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--copper-lo); }
.stay-copy h3 { font-size: clamp(28px, 3.6vw, 42px); margin: 12px 0 14px; }
.stay-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-on-paper-soft); margin-bottom: 16px; }
.stay-copy p.desc { color: var(--text-on-paper-soft); font-size: 16.5px; max-width: 46ch; }
.stay-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-light); max-width: 46ch; }
.stay-price-row .price { font-family: var(--font-mono); font-size: 15px; }
.stay-price-row .price b { font-size: 22px; display: block; color: var(--text-on-paper); }

/* dark-context overrides: lets these editorial components sit on an .on-ink section too */
.on-ink .stay-row, .on-ink .stay-price-row { border-color: var(--line-dark); }
.on-ink .stay-index { color: var(--copper-hi); }
.on-ink .stay-meta { color: var(--text-on-ink-soft); }
.on-ink .stay-copy p.desc { color: var(--text-on-ink-soft); }
.on-ink .stay-price-row .price b { color: var(--text-on-ink); }
.on-ink .contact-item .label { color: var(--text-on-ink-soft); }
.on-ink .btn-line-paper { border-color: var(--line-dark); color: var(--text-on-ink); }
.on-ink .btn-line-paper:hover { border-color: var(--copper); color: var(--copper-hi); }

/* ==========================================================================
   Seasons — a normal horizontal gallery (no scroll-jacking / no pinning).
   The section is exactly one screen tall; scrolling sideways happens inside
   the strip only, so it never extends how far you have to scroll the page.
   ========================================================================== */
.seasons-wrap { background: var(--ink); }
.seasons-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.seasons-nav { display: flex; gap: 10px; flex-shrink: 0; }
.seasons-nav button {
  width: 44px; height: 44px; border-radius: var(--edge); border: 1px solid var(--line-dark);
  background: none; color: var(--text-on-ink); font-size: 16px; transition: border-color 0.2s ease, color 0.2s ease;
}
.seasons-nav button:hover:not(:disabled) { border-color: var(--copper); color: var(--copper-hi); }
.seasons-nav button:disabled { opacity: 0.3; cursor: not-allowed; }

.seasons-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.seasons-track::-webkit-scrollbar { display: none; }
.season-panel {
  position: relative; flex-shrink: 0; scroll-snap-align: start; overflow: hidden;
  width: min(520px, 78vw); aspect-ratio: 4/5; border-radius: var(--edge);
}
.season-panel .panel-media { position: absolute; inset: 0; }
.season-panel .panel-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.62; }
.season-panel .panel-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,13,19,0.15) 0%, rgba(6,13,19,0.5) 55%, rgba(6,13,19,0.92) 100%); }
.season-panel .panel-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(20px, 3vw, 32px); }
.season-num { font-family: var(--font-mono); font-size: 12px; color: var(--copper-hi); letter-spacing: 0.08em; }
.season-panel h3 { color: var(--text-on-ink); font-size: clamp(24px, 2.4vw, 32px); margin: 10px 0 10px; }
.season-panel p { color: var(--text-on-ink-soft); font-size: 15px; max-width: 40ch; }
.season-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--copper-hi); margin-top: 16px; display: inline-block; border: 1px solid var(--line-dark); padding: 6px 13px; }

@media (max-width: 700px) {
  .season-panel { width: 82vw; aspect-ratio: 3/4; }
  .seasons-nav { display: none; }
}

/* ==========================================================================
   Activities manifest
   ========================================================================== */
.manifest { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-dark); border-bottom: 0; border-right: 0; margin-top: 56px; }
@media (max-width: 900px) { .manifest { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .manifest { grid-template-columns: 1fr; } }
.manifest-item { padding: 32px 28px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); transition: background-color 0.3s ease; }
.manifest-item:hover { background: rgba(188,119,72,0.06); }
.manifest-item .icon { font-size: 26px; color: var(--copper); margin-bottom: 18px; display: block; }
.manifest-item h4 { color: var(--text-on-ink); font-size: 17px; font-family: var(--font-body); font-weight: 700; margin: 0 0 8px; }
.manifest-item p { color: var(--text-on-ink-soft); font-size: 14px; margin: 0; }

/* ==========================================================================
   Stories
   ========================================================================== */
.story-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 36px; }
@media (max-width: 1000px) { .story-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .story-list { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 460px) { .story-list { grid-template-columns: 1fr; } }
.story-card { display: block; }
.story-card .story-photo { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 12px; }
.story-card .story-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(.2,.8,.2,1); }
.story-card:hover .story-photo img { transform: scale(1.06); }
.story-date { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--copper); }
.story-card h3 { font-size: 17px; margin: 6px 0 5px; line-height: 1.2; transition: color 0.2s ease; }
.story-card:hover h3 { color: var(--copper-lo); }
.on-ink .story-card:hover h3 { color: var(--copper-hi); }
.story-card p { color: var(--text-on-paper-soft); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.on-ink .story-card p { color: var(--text-on-ink-soft); }
.story-empty { color: var(--text-on-paper-soft); font-style: italic; }
.on-ink .story-empty { color: var(--text-on-ink-soft); }

.story-detail { max-width: 720px; margin: 0 auto; }
.story-detail .story-cover { aspect-ratio: 16/9; overflow: hidden; margin-bottom: 40px; }
.story-detail .story-cover img { width: 100%; height: 100%; object-fit: cover; }
.story-content { font-size: 19px; color: var(--text-on-paper); }
.story-content p { margin: 0 0 1.5em; }
.story-content p:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 68px; float: left; line-height: 0.8; padding: 8px 10px 0 0; color: var(--copper);
}

/* Long-form legal/policy pages (e.g. privacy policy) — same readable prose
   sizing as .story-content, deliberately without its drop-cap opener, which
   only makes sense for narrative articles. */
.legal-content { font-size: 19px; color: var(--text-on-paper); }
.legal-content p { margin: 0 0 1.5em; }
.legal-content address a { color: var(--copper-dark); }
.legal-content address a:hover { color: var(--copper); }

/* ==========================================================================
   Gallery + lightbox
   ========================================================================== */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item { aspect-ratio: 1; overflow: hidden; display: block; border: 0; padding: 0; background: none; position: relative; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, opacity 0.3s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after {
  content: "\2295"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; background: rgba(10,20,28,0.28); opacity: 0; transition: opacity 0.25s ease;
}
.gallery-item:hover::after { opacity: 1; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6,13,19,0.96); display: none; align-items: center; justify-content: center; padding: 40px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: fixed; background: none; border: 1px solid var(--line-dark); color: var(--text-on-ink);
  width: 48px; height: 48px; border-radius: var(--edge); display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.lightbox-close { top: 26px; right: 26px; }
.lightbox-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 26px; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { border-color: var(--copper); color: var(--copper-hi); }
@media (max-width: 640px) { .lightbox-prev, .lightbox-next { width: 44px; height: 44px; } .lightbox-close { top: 14px; right: 14px; } }

/* ==========================================================================
   Location / contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 48px; }
@media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; gap: 30px; } }
.contact-item .icon { font-size: 22px; color: var(--copper); margin-bottom: 14px; display: block; }
.contact-item .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-on-paper-soft); }
.contact-item .value { font-family: var(--font-display); font-size: 24px; margin-top: 8px; }
.contact-item .value a:hover { color: var(--copper-lo); }
.on-ink .contact-item .value { color: var(--text-on-ink); }
.on-ink .contact-item .value a:hover { color: var(--copper-hi); }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-paper-soft); margin-bottom: 9px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 15.5px; color: var(--text-on-paper);
  background: #fff; border: 1px solid var(--line-light); border-radius: var(--edge);
  padding: 13px 15px; transition: border-color 0.2s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--copper); }
.field-hint { font-size: 13px; color: var(--text-on-paper-soft); margin-top: 6px; }
.field-error { font-size: 13px; color: var(--error-text); margin-top: 6px; }
.hp-field { position: absolute; left: -9999px; top: -9999px; }

.alert { padding: 16px 20px; border-radius: var(--edge); font-size: 14.5px; margin-bottom: 28px; border: 1px solid transparent; }
.alert-success { background: #eaf1ec; border-color: var(--accepted); color: #2f4b39; }
.alert-error { background: #f7e9e6; border-color: var(--declined); color: #6f2c24; }
.alert-info { background: var(--paper-2); border-color: var(--line-light); color: var(--text-on-paper-soft); }

/* ==========================================================================
   Availability calendar
   ========================================================================== */
.avail-calendar { background: var(--paper-2); border-radius: var(--edge); padding: 24px 24px 20px; margin-top: 10px; }
.avail-header { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 4px; }
.avail-nav { font-family: var(--font-mono); font-size: 14px; width: 34px; height: 34px; border-radius: var(--edge); border: 1px solid var(--line-light); background: #fff; color: var(--text-on-paper); }
.avail-nav:hover:not(:disabled) { border-color: var(--copper); color: var(--copper-lo); }
.avail-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.avail-message { font-size: 13.5px; color: var(--text-on-paper-soft); margin: 6px 0 16px; }
.avail-months { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
@media (max-width: 700px) { .avail-months { grid-template-columns: 1fr; } }
.avail-month-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-on-paper); margin-bottom: 10px; text-align: center; }
.avail-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.avail-weekdays span { text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-on-paper-soft); }
.avail-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.avail-day { aspect-ratio: 1; border: none; background: transparent; border-radius: var(--edge); font-family: var(--font-mono); font-size: 12px; color: var(--text-on-paper); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.avail-day:hover:not(:disabled) { background: rgba(188,119,72,0.18); }
.avail-day.is-past { color: var(--text-on-paper-soft); opacity: 0.35; cursor: default; }
.avail-day.is-booked { color: var(--declined); opacity: 0.55; text-decoration: line-through; cursor: not-allowed; }
.avail-day.is-selected { background: var(--copper); color: #1a0f07; font-weight: 700; }
.avail-day.is-in-range { background: rgba(188,119,72,0.26); }
.avail-day:disabled { pointer-events: none; }
.avail-legend { display: flex; gap: 20px; margin-top: 16px; font-size: 12px; color: var(--text-on-paper-soft); }
.avail-legend span { display: inline-flex; align-items: center; gap: 6px; }
.avail-swatch { width: 11px; height: 11px; border-radius: 2px; background: var(--copper); display: inline-block; }
.avail-swatch.is-booked-swatch { background: none; border: 1px solid var(--declined); }
#calendarSummary { font-family: var(--font-mono); font-size: 13px; color: var(--copper-dark); margin-top: 10px; min-height: 1.4em; }

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */
.page-hero { background: var(--ink); color: var(--text-on-ink); padding: 158px 0 70px; }
.page-hero h1 { font-size: clamp(38px, 5.6vw, 64px); margin-top: 16px; }
.page-hero p { color: var(--text-on-ink-soft); max-width: 60ch; margin-top: 18px; font-size: 17px; }

/* Flash messages sit between the fixed masthead and the page's own hero.
   The masthead is ~92px tall unscrolled, so this needs real clearance —
   without it the alert renders invisibly underneath the header. */
.flash-stack { padding-top: 118px; padding-bottom: 18px; }
.flash-stack + .page-hero { padding-top: 40px; }
.flash-stack + .hero .hero-top { padding-top: 40px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: var(--text-on-ink-soft); padding: 76px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 44px; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.footer-grid h4 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper-hi); margin-bottom: 18px; }
.footer-grid a { display: block; padding: 7px 0; font-size: 14.5px; transition: color 0.2s ease; }
.footer-grid a:hover { color: var(--copper-hi); }
.footer-brand img { height: 50px; width: auto; margin-bottom: 16px; }
.footer-bottom { margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--line-dark); font-size: 12px; font-family: var(--font-mono); color: #5d6a6d; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; }
.footer-bottom a { color: #5d6a6d; transition: color 0.2s ease; }
.footer-bottom a:hover { color: var(--copper-hi); }
.footer-bottom .dot { opacity: 0.5; margin: 0 8px; }

/* ==========================================================================
   Admin (reskinned to match)
   ========================================================================== */
.admin-body { background: #f2efe7; color: var(--text-on-paper); font-family: var(--font-body); min-height: 100vh; }
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
@media (max-width: 800px) { .admin-shell { grid-template-columns: 1fr; } }
.admin-side { background: var(--ink); color: var(--text-on-ink-soft); padding: 30px 22px; }
.admin-side .brand { font-family: var(--font-display); font-size: 21px; color: var(--text-on-ink); margin-bottom: 32px; display: block; }
.admin-side nav a { display: block; padding: 11px 13px; border-radius: var(--edge); font-size: 14px; margin-bottom: 4px; transition: background-color 0.2s ease, color 0.2s ease; }
.admin-side nav a:hover, .admin-side nav a.active { background: var(--ink-2); color: var(--text-on-ink); }
.admin-side .admin-user { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: 13px; }
.admin-main { padding: 42px 46px; max-width: 100%; overflow-x: hidden; }
@media (max-width: 700px) { .admin-main { padding: 26px 18px; } }
.admin-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 34px; flex-wrap: wrap; gap: 16px; }
.admin-header h1 { font-size: 30px; }
.admin-header p { color: var(--text-on-paper-soft); margin-top: 6px; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 40px; }
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-card { background: #fff; border-radius: var(--edge); padding: 24px 26px; border: 1px solid var(--line-light); }
.stat-card .n { font-family: var(--font-display); font-size: 36px; color: var(--navy); }
.stat-card .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-paper-soft); margin-top: 6px; }

.panel { background: #fff; border-radius: var(--edge); border: 1px solid var(--line-light); padding: 30px; margin-bottom: 28px; }
.panel h2 { font-size: 21px; margin-bottom: 18px; }

.tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--line-light); overflow-x: auto; }
.tabs a { padding: 10px 16px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-on-paper-soft); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.active { color: var(--copper-lo); border-color: var(--copper); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14.5px; }
table.data th { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-on-paper-soft); padding: 11px 12px; border-bottom: 1px solid var(--line-light); }
table.data td { padding: 15px 12px; border-bottom: 1px solid var(--paper-2); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }

.pill { display: inline-block; padding: 4px 11px; border-radius: 20px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.pill-pending { background: #f4e2d2; color: var(--copper-lo); }
.pill-accepted { background: #e2ede5; color: var(--accepted); }
.pill-declined { background: #f3e0dd; color: var(--declined); }
.pill-draft { background: #ececec; color: #666; }
.pill-published { background: #e2ede5; color: var(--accepted); }

.booking-message-preview {
  margin-top: 4px; font-size: 12.5px; color: var(--text-on-paper-soft); font-style: italic;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.booking-message-preview i { color: var(--copper); font-style: normal; margin-right: 3px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-admin { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 14px; border-radius: var(--edge); border: 1px solid var(--line-light); background: #fff; color: var(--text-on-paper); }
.btn-admin:hover { border-color: var(--text-on-paper); }
.btn-admin.accept { border-color: var(--accepted); color: var(--accepted); }
.btn-admin.accept:hover { background: var(--accepted); color: #fff; }
.btn-admin.decline { border-color: var(--declined); color: var(--declined); }
.btn-admin.decline:hover { background: var(--declined); color: #fff; }
.btn-admin.ghost { border-color: transparent; color: var(--text-on-paper-soft); }

.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ink); }
.login-box { width: 100%; max-width: 380px; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--edge); padding: 42px; }
.login-box .brand { font-family: var(--font-display); color: var(--text-on-ink); font-size: 25px; margin-bottom: 6px; display: block; }
.login-box p.sub { color: var(--text-on-ink-soft); font-size: 13.5px; margin-bottom: 28px; }
.login-box .field label { color: var(--text-on-ink-soft); }
.login-box .field input { background: var(--ink); border-color: var(--line-dark); color: var(--text-on-ink); }
.login-box .btn { width: 100%; justify-content: center; margin-top: 8px; }

.booking-detail dl { display: grid; grid-template-columns: 140px 1fr; gap: 10px 16px; font-size: 14.5px; }
.booking-detail dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--text-on-paper-soft); }
.booking-detail dd { margin: 0; }

.gallery-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.gallery-admin-item { border: 1px solid var(--line-light); border-radius: var(--edge); overflow: hidden; }
.gallery-admin-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.gallery-admin-meta { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gallery-admin-meta span { font-size: 12.5px; color: var(--text-on-paper-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-admin.btn-small { padding: 5px 10px; font-size: 10.5px; }