:root {
  --ink: #0e2140;
  --ink-2: #060d1a;
  --panel: #0f1f3a;
  --panel-2: #142a4d;
  /* LEGACY NAMES, BRASS VALUES. The site's accent moved from cyan to brass; these three keep
     their old names because blog article markup references them directly and renaming them here
     would silently un-style every post. The values are the same brass family index.html and
     booking.html use: light on the dark ground, deep as a fill under dark text. */
  --cyan: #D6BC86;
  --cyan-soft: #EBD9B2;
  --cyan-deep: #A8762E;
  --steel: #9fb0c7;
  --steel-dim: #6c7c94;
  --line: rgba(214, 188, 134, 0.14);
  --green: #3ecb7e;
  --font-display: 'Oswald', 'Bahnschrift', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* WORDS THAT DO NOT FIT THEIR BOX.
   Not one file on this site set overflow-wrap or word-break -- 15 pages, both shared
   stylesheets, zero occurrences -- so any unbroken run longer than its container pushed
   straight out of it: a long email address in the order summary, a customer's street on one
   line, a discount code, a package name on a narrow card. That is the "words and sentences do
   not fit in boxes" report.

   break-word, not anywhere: it only breaks a word that CANNOT otherwise fit, so normal text is
   untouched and nothing re-flows. The property is inherited, so declaring it on body covers
   every element on the page, and any component that genuinely wants a word to overflow can
   still override it locally. */
body { overflow-wrap: break-word; }
body { margin: 0; font-family: var(--font-body); color: #eaf2fb; background: var(--ink-2); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--cyan-deep); color: #06121f; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 8px; border: 2px solid var(--ink-2); }
* { scrollbar-color: var(--panel-2) var(--ink-2); scrollbar-width: thin; }

/* Two frames, deliberately different. .wrap is the reading column for long-form pages (blog
   posts, area pages) — widened 900px -> 1020px so the fact strips, package cards and photos
   in these pages get real room, while the running prose below keeps its own ch-based measure
   and never stretches with it. .wrap--wide is the site frame and tracks --site-max from
   site-chrome.css, so widening the site is one edit there, not 26. */
.wrap { max-width: var(--read-max, 1020px); margin: 0 auto; padding-left: clamp(20px, 5vw, 56px); padding-right: clamp(20px, 5vw, 56px); }
.wrap--wide { max-width: var(--site-max, 1400px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: 13.5px; padding: 14px 26px;
  border: 2px solid transparent; border-radius: 999px; cursor: pointer; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
/* GO. Note the token names in this file are still --cyan/--cyan-soft/--cyan-deep and still hold
   BRASS, because blog article markup references those names directly. The booking button no longer
   reads from them at all, which is the one honest way to leave that legacy naming alone. */
.btn-primary { background: #0C7242; color: #fff; border-color: #3FAE77; box-shadow: 0 0 0 3px rgba(12, 114, 66, 0.18); }
.btn-primary:hover, .btn-primary:focus-visible {
  background: #095B34; transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(12, 114, 66, 0.26), 0 12px 26px -8px rgba(4, 10, 20, 0.6);
}

.page-hero { text-align: center; padding: clamp(40px, 6vw, 64px) 0 clamp(24px, 4vw, 36px); border-bottom: 1px solid var(--line); }
.page-hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px; color: var(--cyan); margin: 0 0 14px; }
.page-hero h1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 4vw, 42px); margin: 0 0 14px; line-height: 1.15; }
.page-hero p { color: var(--steel); font-size: 17px; max-width: 66ch; margin: 0 auto; line-height: 1.6; }
.page-hero .meta { color: var(--steel-dim); font-size: 13px; margin-top: 14px; }

article.post { padding: clamp(36px, 5vw, 56px) 0; }
article.post h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 2.6vw, 26px); margin: 40px 0 14px; color: #eaf2fb; }
article.post h2:first-child { margin-top: 0; }
article.post h3 { font-size: 18px; font-weight: 700; margin: 28px 0 10px; color: #eaf2fb; }
/* Held at 72ch deliberately while .wrap widened around it. Measured, 72ch of this face and
   size is already about 79 characters a line — at the top of what reads comfortably — so
   there was nothing to spend the extra container width on here. This cap is the whole reason
   .wrap could be widened at all: the paragraphs do not follow the container, so the new width
   goes to the fact strips, package cards and photos that actually wanted it. */
article.post p { color: var(--steel); font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; max-width: 72ch; }
article.post ul, article.post ol { color: var(--steel); font-size: 16.5px; line-height: 1.7; margin: 0 0 18px; padding-left: 22px; max-width: 72ch; }
article.post li { margin-bottom: 8px; }
article.post li strong { color: #eaf2fb; }
article.post strong { color: #eaf2fb; }
article.post blockquote { margin: 28px 0; padding: 18px 24px; border-left: 3px solid var(--cyan); background: var(--panel); color: #eaf2fb; font-size: 17px; line-height: 1.6; font-style: normal; }
/* The lede needs a measure of its own. At 19px it inherited the body's 72ch and ran about ten
   characters longer per line than the copy underneath it — invisible while the column capped
   it at 900px, obvious once .wrap went to 1020px. 66ch lands it back at the line length it
   actually had before. */
article.post .lede { font-size: 19px; color: #eaf2fb; line-height: 1.6; max-width: 66ch; }

.post-cta {
  margin-top: 44px; background: var(--panel); border: 1px solid var(--cyan-deep); border-radius: 14px;
  padding: clamp(28px, 4vw, 40px); text-align: center;
}
.post-cta h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 20px; margin: 0 0 10px; }
.post-cta p { color: var(--steel); margin: 0 0 20px; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; padding: clamp(32px, 5vw, 48px) 0; }
.blog-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color 160ms ease, transform 160ms ease; }
.blog-card:hover { border-color: var(--cyan-deep); transform: translateY(-3px); }
.blog-card-photo { aspect-ratio: 16/10; overflow: hidden; }
.blog-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.blog-card-tag { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan-soft); }
.blog-card h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
.blog-card p { margin: 0; color: var(--steel); font-size: 14px; line-height: 1.55; flex-grow: 1; }
.blog-card-read { font-size: 12.5px; font-weight: 700; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 6px; }

.area-quick-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); margin: 32px 0; }
.area-fact { background: var(--panel); padding: 20px; text-align: center; }
.area-fact .num { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--cyan); display: block; margin-bottom: 4px; }
.area-fact .label { font-size: 11.5px; color: var(--steel); text-transform: uppercase; letter-spacing: 0.05em; }

.area-pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 28px 0; }
.area-pkg-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.area-pkg-card h4 { margin: 0 0 6px; font-size: 15.5px; font-weight: 800; }
.area-pkg-card .price { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--cyan-soft); font-variant-numeric: tabular-nums; }

.area-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.area-links a { font-size: 13.5px; font-weight: 700; color: #eaf2fb; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; text-decoration: none; }
.area-links a:hover { border-color: var(--cyan-deep); }

@media (max-width: 560px) {
  .gift-checklist, .area-quick-facts { grid-template-columns: 1fr 1fr; }
}