/* =============================================================================
   J'BEZ — BASE
   Reset, document defaults, typography, and accessibility primitives.
   Mobile first throughout. No component styles live here.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header offset for in page anchors. */
  scroll-padding-top: calc(var(--header-h) + var(--space-m));
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[role='list'], ol[role='list'] { list-style: none; }

/* Stray horizontal overflow is clipped at the page level: iOS Safari
   otherwise grows the layout viewport to fit the widest element, which
   lays the whole page out wider than the screen and cuts the right edge
   off everything (the owner's hero recordings). clip keeps position
   sticky working, unlike hidden, which stays only as the old-Safari
   fallback. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

body {
  min-height: 100svh;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step-body);
  font-weight: var(--weight-normal);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* The page itself never scrolls sideways. Wide children scroll inside
     their own container instead. */
  overflow-x: hidden;
}

/* -----------------------------------------------------------------------------
   TYPOGRAPHY
   Headlines in the display face, sentence case, tracking tightened slightly.
   Brand book section 04. Never a serif, never a script, never a third face.
   ----------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
  color: var(--text);
}

h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); font-weight: var(--weight-normal); }
h4 { font-size: var(--step-body); font-weight: var(--weight-medium); }

p { text-wrap: pretty; }
p + p { margin-top: var(--space-s); }

/* The one moment per page that carries the brand. */
.display {
  font-family: var(--font-display);
  font-size: var(--step-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.lede {
  font-size: var(--step-lede);
  line-height: var(--leading-lede);
  color: var(--text-muted);
  max-width: var(--measure);
}

.small { font-size: var(--step-small); }

/* Small structural details use the text face, uppercase, tracked to .15em.
   This is what gives the brand a tailored feel without a third typeface. */
.label {
  display: block;
  font-family: var(--font-text);
  font-size: var(--step-label);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mood-label);
}
.label--muted   { color: var(--text-faint); }
.label--inverse { color: rgba(241, 231, 214, 0.72); }

.muted { color: var(--text-muted); }

/* -----------------------------------------------------------------------------
   LINKS
   Deep Blue owns interaction. It appears on links, buttons, and booking
   actions, and nowhere decorative. Brand book section 03, hard rules.
   ----------------------------------------------------------------------------- */

a {
  color: var(--action);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dur-fast) var(--ease),
              text-decoration-color var(--dur-fast) var(--ease);
}
a:hover { color: var(--action-hover); }

/* On Jet Black grounds Deep Blue fails contrast, so the interaction colour
   steps up to Heritage Cream. It is still the one colour that means action. */
.on-dark a { color: var(--link-inverse); }
.on-dark a:hover { color: var(--off-white); }

/* -----------------------------------------------------------------------------
   MEDIA
   ----------------------------------------------------------------------------- */

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
img, video { height: auto; }

img {
  /* Styles the alt text if an image ever fails to load. No background here:
     the logo lockups are transparent SVGs and a background would put them on
     a visible box. Photography containers reserve their own ground instead. */
  font-style: italic;
}

/* -----------------------------------------------------------------------------
   FORMS
   ----------------------------------------------------------------------------- */

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

/* -----------------------------------------------------------------------------
   ACCESSIBILITY
   ----------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.on-dark :focus-visible { outline-color: var(--focus-inverse); }

/* Remove the default outline only where focus-visible is supported and
   already handled above. */
:focus:not(:focus-visible) { outline: none; }

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

.skip-link {
  position: absolute;
  top: 0; left: var(--gutter);
  z-index: calc(var(--z-notice) + 1);
  transform: translateY(-120%);
  padding: var(--space-xs) var(--space-m);
  background: var(--action);
  color: var(--action-text);
  text-decoration: none;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--action-text); }

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

/* -----------------------------------------------------------------------------
   LAYOUT PRIMITIVES
   ----------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--mood-section-y); }
.section--tight { padding-block: var(--section-y-tight); }

/* Jet Black band. Used sparingly, for impact only. Brand book section 03. */
.on-dark {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--text-inverse); }
.on-dark .lede, .on-dark .muted { color: var(--text-inverse-muted); }

/* Heritage Cream.

   The brand book is explicit: Heritage Cream and Off White must not be used as
   large adjacent blocks, because the near match reads as a printing error
   rather than a deliberate choice.

   On this site that rule is kept by never using cream as a full bleed section
   ground at all. It appears only on contained surfaces, which are read as
   objects sitting on the canvas rather than as a competing field: review
   cards, the table of contents on the legal pages, the callout blocks, and the
   ground reserved behind photography while it loads.

   The build lint fails if a section ground of cream is ever reintroduced next
   to an Off White one. */
.on-soft {
  background: var(--surface-soft);
  border-block: 1px solid var(--rule);
}

.rule {
  border: 0;
  border-top: 1px solid var(--mood-rule);
  margin: 0;
}
.on-dark .rule { border-top-color: var(--rule-inverse); }

/* Anything genuinely wide scrolls inside itself, never the page. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.stack > * + * { margin-top: var(--space-m); }
.stack-s > * + * { margin-top: var(--space-2xs); }
.stack-l > * + * { margin-top: var(--space-l); }

@media print {
  .site-header, .site-footer, .book-bar, .cookie-notice { display: none !important; }
  body { background: #fff; color: #000; }
}