/* =============================================================================
   ONYX & OYSTER — BASE
   Reset, document defaults, typography, ground themes, accessibility.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
fieldset, legend { margin: 0; padding: 0; }

/* Lists are navigation and structure throughout this design, never bulleted
   prose — the one exception is inside .oo-prose, which is restored below and is
   used only by the <noscript> fallbacks. */
ul, ol { list-style: none; margin: 0; padding: 0; }

.oo-prose ul { list-style: disc; padding-inline-start: 1.25em; }
.oo-prose ol { list-style: decimal; padding-inline-start: 1.4em; }
.oo-prose li { margin-block-start: var(--oo-space-2xs); color: var(--ctx-muted); }

fieldset { border: 0; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; }


/* --- Document ------------------------------------------------------------- */
html {
  /* Anchors land clear of the fixed navigation rather than beneath it. */
  scroll-padding-top: calc(var(--oo-nav-height-scrolled) + var(--oo-space-lg));
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  background-color: var(--oo-onyx);
  color: var(--oo-text-on-dark);
  font-family: var(--oo-font-body);
  font-size: var(--oo-text-body);
  font-weight: 300;
  line-height: var(--oo-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `clip` rather than `hidden`: hidden turns this into a scroll container in
     some engines, which stops position:sticky working for the hero. clip
     suppresses the same overflow without that side effect. */
  overflow-x: clip;
}

/* Set while a modal or the mobile menu is open. */
body.oo-scroll-locked {
  overflow: hidden;
  /* Compensating for the scrollbar keeps the page from shifting sideways. */
  padding-right: var(--oo-scrollbar-width, 0px);
}


/* --- Ground themes --------------------------------------------------------
   Each section declares its ground once. Components read the --ctx-* values
   and therefore work unchanged on any of the four, which is what keeps a
   dark-led page from needing a second set of components for its light bands.
   ------------------------------------------------------------------------- */
.oo-theme-dark {
  --ctx-bg:     var(--oo-onyx);
  --ctx-text:   var(--oo-ivory);
  --ctx-muted:  var(--oo-stone);
  --ctx-rule:   var(--oo-rule-on-dark);
  --ctx-rule-soft: var(--oo-rule-on-dark-soft);
  --ctx-accent: var(--oo-accent-on-dark);
  --ctx-focus:  var(--oo-focus-dark);
  --ctx-invert-bg:   var(--oo-ivory);
  --ctx-invert-text: var(--oo-onyx);
  background-color: var(--ctx-bg);
  color: var(--ctx-text);
}

.oo-theme-ivory {
  --ctx-bg:     var(--oo-ivory);
  --ctx-text:   var(--oo-onyx);
  --ctx-muted:  var(--oo-stone-deep);
  --ctx-rule:   var(--oo-rule-on-light);
  --ctx-rule-soft: var(--oo-rule-on-light-soft);
  --ctx-accent: var(--oo-evergreen);
  --ctx-focus:  var(--oo-focus-light);
  --ctx-invert-bg:   var(--oo-onyx);
  --ctx-invert-text: var(--oo-ivory);
  background-color: var(--ctx-bg);
  color: var(--ctx-text);
}

.oo-theme-pearl {
  --ctx-bg:     var(--oo-oyster);
  --ctx-text:   var(--oo-onyx);
  --ctx-muted:  var(--oo-stone-deep);
  --ctx-rule:   var(--oo-rule-on-light);
  --ctx-rule-soft: var(--oo-rule-on-light-soft);
  --ctx-accent: var(--oo-evergreen);
  --ctx-focus:  var(--oo-focus-light);
  --ctx-invert-bg:   var(--oo-onyx);
  --ctx-invert-text: var(--oo-ivory);
  background-color: var(--ctx-bg);
  color: var(--ctx-text);
}

.oo-theme-evergreen {
  --ctx-bg:     var(--oo-evergreen);
  --ctx-text:   var(--oo-ivory);
  --ctx-muted:  rgba(246, 242, 236, 0.72);
  --ctx-rule:   rgba(246, 242, 236, 0.22);
  --ctx-rule-soft: rgba(246, 242, 236, 0.12);
  --ctx-accent: var(--oo-oyster);
  --ctx-focus:  var(--oo-focus-dark);
  --ctx-invert-bg:   var(--oo-ivory);
  --ctx-invert-text: var(--oo-evergreen);
  /* .oo-btn--primary:hover's default (Evergreen fill) would match this
     ground exactly and disappear — every Evergreen section instead hovers
     to Onyx fill / Oyster text. */
  --ctx-hover-bg:    var(--oo-onyx);
  --ctx-hover-text:  var(--oo-oyster);
  background-color: var(--ctx-bg);
  color: var(--ctx-text);
}


/* --- Typography ------------------------------------------------------------ */
h1, h2, h3, h4,
.oo-display {
  font-family: var(--oo-font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: var(--oo-tracking-tight);
  line-height: var(--oo-leading-snug);
  text-wrap: balance;
}

h1 { font-size: var(--oo-text-h1); line-height: var(--oo-leading-tight); }
h2 { font-size: var(--oo-text-h2); line-height: var(--oo-leading-tight); }
h3 { font-size: var(--oo-text-h3); }
h4 { font-size: var(--oo-text-h4); }

p { text-wrap: pretty; }

strong, b { font-weight: 500; }

/* Small tracked uppercase label. Used for eyebrows, categories and field
   labels — never for running text. */
.oo-eyebrow {
  display: block;
  font-family: var(--oo-font-body);
  font-size: var(--oo-text-label);
  font-weight: 400;
  letter-spacing: var(--oo-tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ctx-muted);
}

/* Standfirst beneath a section heading. */
.oo-lede {
  font-size: var(--oo-text-lead);
  line-height: var(--oo-leading-relaxed);
  color: var(--ctx-muted);
  max-width: 34em;
}

.oo-prose > * + * { margin-top: var(--oo-space-md); }
.oo-prose p {
  max-width: var(--oo-container-text);
  color: var(--ctx-muted);
  line-height: var(--oo-leading-relaxed);
}
.oo-prose--tight p { color: var(--ctx-text); }

/* The wordmark. Always uppercase, always widely tracked. */
.oo-wordmark {
  font-family: var(--oo-font-display);
  font-weight: 400;
  letter-spacing: var(--oo-tracking-wordmark);
  text-transform: uppercase;
  /* Tracking adds space after the final letter; this pulls the optical edge
     back so the mark sits square against whatever follows it. */
  margin-right: calc(var(--oo-tracking-wordmark) * -1);
  white-space: nowrap;
}


/* --- Links ---------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
}

.oo-prose a,
.oo-inline-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: var(--ctx-rule);
  transition: text-decoration-color var(--oo-dur-fast) var(--oo-ease);
}

.oo-prose a:hover,
.oo-inline-link:hover { text-decoration-color: currentColor; }


/* --- Focus ----------------------------------------------------------------
   Visible on every interactive element, on every ground. Removing the ring is
   never an option here; it is restyled instead.
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--oo-focus-width) solid var(--ctx-focus, var(--oo-focus-dark));
  outline-offset: var(--oo-focus-offset);
  border-radius: var(--oo-radius);
}

:focus:not(:focus-visible) { outline: none; }


/* --- Selection ------------------------------------------------------------- */
::selection {
  background-color: var(--oo-evergreen);
  color: var(--oo-ivory);
}


/* --- Skip link ------------------------------------------------------------- */
.oo-skip-link {
  position: fixed;
  top: var(--oo-space-sm);
  left: var(--oo-space-sm);
  z-index: var(--oo-z-skiplink);
  padding: var(--oo-space-xs) var(--oo-space-md);
  background-color: var(--oo-ivory);
  color: var(--oo-onyx);
  font-size: var(--oo-text-label);
  letter-spacing: var(--oo-tracking-button);
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--oo-dur-base) var(--oo-ease);
}
.oo-skip-link:focus { transform: translateY(0); }


/* --- Utilities ------------------------------------------------------------- */
.oo-container {
  width: 100%;
  max-width: var(--oo-container);
  margin-inline: auto;
  padding-inline: var(--oo-gutter);
}
.oo-container--wide { max-width: var(--oo-container-wide); }
.oo-container--text { max-width: calc(var(--oo-container-text) + var(--oo-gutter) * 2); }

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

/* Hairline divider. */
.oo-rule {
  height: var(--oo-hairline);
  border: 0;
  background-color: var(--ctx-rule);
}

/* Screen-reader-only, but focusable when it needs to be. */
.oo-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --- Media ----------------------------------------------------------------
   Every photograph on the site sits in a ratio box and covers it, so any
   replacement file crops predictably regardless of its own dimensions.
   ------------------------------------------------------------------------- */
.oo-media {
  position: relative;
  overflow: hidden;
  background-color: var(--oo-onyx-raised);
}
.oo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;   /* overridden per image from the manifest */
}

.oo-media--3x4  { aspect-ratio: 3 / 4; }
.oo-media--4x3  { aspect-ratio: 4 / 3; }
.oo-media--4x5  { aspect-ratio: 4 / 5; }
.oo-media--5x4  { aspect-ratio: 5 / 4; }
.oo-media--1x1  { aspect-ratio: 1 / 1; }
.oo-media--16x9 { aspect-ratio: 16 / 9; }


/* --- The emblem ------------------------------------------------------------ */
.oo-emblem {
  display: block;
  width: auto;
  height: 1em;
  color: currentColor;
  flex: none;
}
.oo-emblem path { fill: currentColor; }


/* --- Reduced motion --------------------------------------------------------
   Honours the system preference. Motion is removed rather than merely shortened,
   and anything that reveals on scroll is forced to its final state so no content
   can be left invisible.
   ------------------------------------------------------------------------- */
@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;
  }

  .oo-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Print ----------------------------------------------------------------- */
@media print {
  .oo-nav, .oo-hero__finder, .oo-modal, .oo-scroll-cue { display: none !important; }
  body { background: #fff; color: #000; }
}