/* ==========================================================================
   SINAR BUANA LOGISTIK — GLOBAL DESIGN SYSTEM
   "High-End Industrial Logistic" / Digital Instrument
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & document
   3.  Global grain (SVG turbulence)
   4.  Typography
   5.  Layout primitives
   6.  Buttons & micro-interactions
   7.  Reveal choreography (pre-GSAP state)
   8.  Accessibility
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* — Core palette (strict, from the design brief) --------------------- */
  --ocean: #14375E;
  --ocean-700: #0F2C4D;
  --ocean-800: #0B243F;
  --ocean-900: #081A30;
  --ocean-400: #3A6491;
  --ocean-300: #7BA3C9;
  --ocean-100: #CFE0F0;

  --clay: #E4703A;
  --clay-600: #C85A28;
  --clay-400: #F0905F;
  /* Darkened clay — 4.8:1 on cream, for small accent text on LIGHT ground.
     Never use this on a dark surface; use --clay-400 there instead. */
  --clay-ink: #AE4C1E;
  /* Fills that carry cream text. #E4703A measures 2.99:1 with cream and
     #C85A28 4.03:1; this step reaches 4.8:1 and stays inside the clay ramp.
     The bright --clay stays for strokes, dots and text on dark ground. */
  --clay-fill: #B84F20;
  --clay-fill-hover: #A64719;

  --cream: #f2f0e9;
  --cream-50: #faf9f5;
  --cream-200: #e6e2d6;
  --cream-300: #d8d3c3;

  --charcoal: #1a1a1a;
  --charcoal-800: #232323;
  --charcoal-700: #2e2e2e;

  /* — Authentic SBL brand mark (from the company profile cover) --------- */
  --brand-gold: #f09830;
  --brand-gold-600: #e0871c;
  --brand-navy: #23375c;
  --brand-navy-deep: #1a2843;

  /* — Semantic aliases -------------------------------------------------- */
  --bg: var(--cream);
  --ink: var(--charcoal);
  --ink-muted: rgba(26, 26, 26, 0.62);
  /* 0.66, not 0.38: micro-labels, ids and meta lines are text, and they sit on
     cream. 0.66 clears 4.5:1 on every light surface here; 0.38 measured 2.4:1. */
  --ink-faint: rgba(26, 26, 26, 0.66);
  --rule: rgba(26, 26, 26, 0.12);
  --rule-strong: rgba(26, 26, 26, 0.22);

  --surface: var(--cream-50);
  --surface-glass: rgba(255, 255, 255, 0.6);
  --surface-sunken: rgba(26, 26, 26, 0.035);

  --on-dark: var(--cream);
  --on-dark-muted: rgba(242, 240, 233, 0.74);
  /* 0.72 for the same reason, on charcoal and on the mid-blue card surfaces. */
  --on-dark-faint: rgba(242, 240, 233, 0.72);
  --rule-dark: rgba(242, 240, 233, 0.16);

  /* — Radii system ------------------------------------------------------ */
  --r-xs: 0.5rem;
  --r-sm: 0.875rem;
  --r-md: 1.25rem;
  --r-lg: 1.75rem;
  --r-xl: 2rem;
  --r-2xl: 2.5rem;
  --r-3xl: 3rem;
  --r-pill: 999px;

  /* — Spacing scale (fluid) --------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;
  --s-11: 6.5rem;
  --s-12: 8rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 84rem;
  --maxw-narrow: 62rem;

  /* — Type families ----------------------------------------------------- */
  --ff-display: "Plus Jakarta Sans", "Outfit", system-ui, -apple-system, sans-serif;
  --ff-body: "Plus Jakarta Sans", "Outfit", system-ui, -apple-system, sans-serif;
  --ff-drama: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* — Fluid type scale -------------------------------------------------- */
  --t-display: clamp(3.25rem, 11.5vw, 12.5rem);
  --t-h1: clamp(2.5rem, 6.3vw, 5.5rem);
  --t-h2: clamp(2rem, 4.4vw, 3.75rem);
  --t-h3: clamp(1.35rem, 2.3vw, 2rem);
  --t-h4: clamp(1.1rem, 1.5vw, 1.35rem);
  --t-body-lg: clamp(1rem, 1.25vw, 1.1875rem);
  --t-body: clamp(0.9375rem, 1.05vw, 1.0625rem);
  --t-small: 0.875rem;
  --t-micro: 0.6875rem;
  --t-nano: 0.625rem;

  /* — Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.24s;
  --t-base: 0.42s;
  --t-slow: 0.8s;

  /* — Elevation --------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(26, 26, 26, 0.05), 0 4px 14px rgba(26, 26, 26, 0.05);
  --sh-md: 0 2px 6px rgba(26, 26, 26, 0.06), 0 14px 40px rgba(26, 26, 26, 0.09);
  --sh-lg: 0 4px 12px rgba(26, 26, 26, 0.07), 0 30px 70px rgba(26, 26, 26, 0.14);
  --sh-glass: 0 8px 32px rgba(26, 26, 26, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* — Chrome ------------------------------------------------------------ */
  --nav-h: 4.25rem;
  --nav-top: 1.25rem;
  --z-nav: 900;
  --z-grain: 9999;
}

/* --------------------------------------------------------------------------
   2. RESET & DOCUMENT
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* An author `display` rule beats the UA rule behind [hidden], so anything
   that is styled with display and toggled from script needs this to hide. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor offset so the floating island never covers a section title */
  scroll-padding-top: calc(var(--nav-h) + var(--nav-top) * 2 + 0.5rem);
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: var(--clay);
  color: var(--cream-50);
}

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Scrollbar — thin, industrial */
@media (pointer: fine) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--cream-200);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--ocean-300);
    border: 3px solid var(--cream-200);
    border-radius: var(--r-pill);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--ocean);
  }
}

/* --------------------------------------------------------------------------
   3. GLOBAL GRAIN — SVG turbulence at 0.05, kills flat digital gradients
   -------------------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  will-change: transform;
}

/* On dark sections the multiply blend would vanish — the lighten pass
   keeps the grain legible over charcoal. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  mix-blend-mode: screen;
  background-image: inherit;
  background-size: inherit;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.display {
  font-family: var(--ff-display);
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.05em;
}

/* The drama voice — serif italic reserved for industrial concepts */
.drama {
  font-family: var(--ff-drama);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.drama-strong {
  font-family: var(--ff-drama);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* Clinical telemetry voice */
.mono {
  font-family: var(--ff-mono);
  font-weight: 400;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: 0.01em;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

/* Eyebrow label — the small caps marker above every section */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clay-ink);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

.eyebrow--bare::before {
  display: none;
}

.on-dark .eyebrow,
.eyebrow--light {
  color: var(--clay-400);
}

.eyebrow--ocean {
  color: var(--ocean-400);
}

.lede {
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.on-dark .lede,
.lede--light {
  color: var(--on-dark-muted);
}

.measure {
  max-width: 62ch;
}

/* Section headings */
.section-title {
  font-size: var(--t-h2);
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.section-title .drama {
  font-size: 1.06em;
}

/* Rhythm between a section eyebrow and the heading that follows it. The
   eyebrow is inline-flex, so a margin on the heading would not collapse
   through — set the gap explicitly instead. */
.eyebrow + .section-title,
.eyebrow + .philosophy__statement,
.eyebrow + [data-split] {
  margin-top: 1.25rem;
}

/* Split lines need descender room while the mask is tight. */
.section-title .line-mask,
.philosophy__statement .line-mask,
.hero__title .line-mask {
  padding-bottom: 0.1em;
}

.text-clay {
  color: var(--clay);
}
.text-clay-ink {
  color: var(--clay-ink);
}
.text-ocean {
  color: var(--ocean);
}
.text-gold {
  color: var(--brand-gold);
}
.on-dark {
  color: var(--on-dark);
}

/* --------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow {
  max-width: var(--maxw-narrow);
}

.section {
  position: relative;
  padding-block: clamp(5rem, 11vh, 9.5rem);
}

/* Any anchor target must clear the floating island. */
[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--nav-top) * 2 + 0.75rem);
}

.section--flush {
  padding-block: 0;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.section-head__aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  justify-self: end;
  max-width: 30rem;
}

@media (max-width: 62rem) {
  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .section-head__aside {
    justify-self: start;
  }
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack-2 > * + * {
  margin-top: var(--s-2);
}
.stack-3 > * + * {
  margin-top: var(--s-3);
}
.stack-4 > * + * {
  margin-top: var(--s-4);
}
.stack-5 > * + * {
  margin-top: var(--s-5);
}
.stack-6 > * + * {
  margin-top: var(--s-6);
}

/* Hairline rules */
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
}

.rule--dark {
  background: var(--rule-dark);
}

/* The signature container radius */
.panel {
  border-radius: var(--r-2xl);
  background: var(--surface);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.panel--dark {
  background: var(--charcoal);
  border-color: var(--rule-dark);
  color: var(--on-dark);
}

.panel--ocean {
  background: var(--ocean);
  border-color: transparent;
  color: var(--on-dark);
}

/* --------------------------------------------------------------------------
   6. BUTTONS & MICRO-INTERACTIONS
   Magnetic feel via overflow-hidden + sliding background layer.
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--clay-fill);
  --btn-fg: var(--cream-50);
  --btn-slide: var(--charcoal);
  /* The label colour once the sliding layer has covered the button. Each
     variant sets it to something that contrasts with ITS slide: a cream
     slide under cream text paints nothing at all. */
  --btn-slide-fg: var(--cream-50);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ff-display);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid transparent;
  transition:
    transform var(--t-base) var(--ease-spring),
    box-shadow var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
  will-change: transform;
}

/* Sliding colour layer */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-slide);
  transform: translateY(101%);
  transition: transform var(--t-base) var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateY(0);
}

.btn:hover {
  transform: scale(1.035) translateY(-1px);
  box-shadow: var(--sh-md);
  color: var(--btn-slide-fg);
}

.btn:active {
  transform: scale(0.985);
  transition-duration: 0.09s;
}

.btn__icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform var(--t-base) var(--ease-spring);
}

.btn:hover .btn__icon {
  transform: translateX(3px);
}

/* Variants */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-slide: var(--ocean);
  border-color: var(--rule-strong);
}

.btn--ghost:hover {
  color: var(--cream-50);
  border-color: var(--ocean);
}

.btn--dark {
  --btn-bg: var(--charcoal);
  --btn-fg: var(--cream-50);
  --btn-slide: var(--clay-fill);
}

.btn--ocean {
  --btn-bg: var(--ocean);
  --btn-fg: var(--cream-50);
  --btn-slide: var(--clay-fill);
}

.btn--clay {
  /* cream on --clay measured 2.99:1; the fill step carries it at 4.8:1 */
  --btn-bg: var(--clay-fill);
  --btn-fg: var(--cream-50);
  --btn-slide: var(--ocean);
}

.btn--onocean {
  --btn-bg: var(--clay-fill);
  --btn-fg: var(--cream-50);
  --btn-slide: var(--cream-50);
  --btn-slide-fg: var(--ocean);
}

/* Transparent at rest over a photograph, filled with light on hover — the
   label has to invert with the slide or it disappears into it. */
.btn--inverse {
  --btn-bg: transparent;
  --btn-fg: var(--cream-50);
  --btn-slide: var(--cream-50);
  --btn-slide-fg: var(--ocean);
  border-color: rgba(242, 240, 233, 0.28);
}

.btn--light {
  --btn-bg: var(--cream-50);
  --btn-fg: var(--charcoal);
  --btn-slide: var(--clay-fill);
}

.btn--lg {
  padding: 1.15rem 2.1rem;
  font-size: var(--t-body);
}

.btn--block {
  width: 100%;
}

/* Text link with animated rule */
.link-rule {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  padding-bottom: 0.15rem;
}

.link-rule::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform var(--t-base) var(--ease-out);
}

.link-rule:hover::after {
  transform-origin: left;
  transform: scaleX(0);
  animation: link-rule-in var(--t-base) var(--ease-out) forwards;
}

@keyframes link-rule-in {
  from {
    transform-origin: right;
    transform: scaleX(0);
  }
  to {
    transform-origin: left;
    transform: scaleX(1);
  }
}

/* Small tags / chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.chip--ocean {
  background: rgba(20, 55, 94, 0.07);
  border-color: rgba(20, 55, 94, 0.18);
  color: var(--ocean);
}

.chip--clay {
  /* 0.06 keeps clay-ink above 4.5:1 on the tinted ground; 0.09 measured 4.38 */
  background: rgba(228, 112, 58, 0.06);
  border-color: rgba(228, 112, 58, 0.24);
  color: var(--clay-ink);
}

.on-dark .chip,
.chip--dark {
  border-color: var(--rule-dark);
  color: var(--on-dark-muted);
}

/* Status badges */
.badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--rule-dark);
  font-family: var(--ff-mono);
  font-size: var(--t-nano);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.badge__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #e4703a;
  flex: none;
  box-shadow: 0 0 0 0 rgba(228, 112, 58, 0.65);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(228, 112, 58, 0.6);
  }
  70% {
    box-shadow: 0 0 0 0.55rem rgba(228, 112, 58, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(228, 112, 58, 0);
  }
}

.badge__dot--clay {
  background: var(--clay);
  animation-name: pulse-ring-clay;
}

@keyframes pulse-ring-clay {
  0% {
    box-shadow: 0 0 0 0 rgba(228, 112, 58, 0.6);
  }
  70% {
    box-shadow: 0 0 0 0.55rem rgba(228, 112, 58, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(228, 112, 58, 0);
  }
}

/* --------------------------------------------------------------------------
   7. REVEAL CHOREOGRAPHY
   Elements start hidden only when JS is driving them; the `.js` class on
   <html> is the contract, so a JS failure leaves a fully readable page.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  will-change: transform, opacity;
}

.js .reveal-up {
  opacity: 0;
  transform: translateY(1.75rem);
}

.js .reveal-line {
  opacity: 0;
  transform: translateY(0.9em);
}

/* Split-text lines produced by JS */
.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.line-inner {
  display: block;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   8. ACCESSIBILITY
   -------------------------------------------------------------------------- */
.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 10000;
  padding: 0.85rem 1.4rem;
  border-radius: var(--r-pill);
  background: var(--charcoal);
  color: var(--cream-50);
  font-weight: 600;
  transition: top var(--t-fast) var(--ease-out);
}

.skip-link:focus {
  top: 1rem;
}

@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;
  }

  .js .reveal,
  .js .reveal-up,
  .js .reveal-line {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media print {
  .grain,
  .site-nav,
  .hero__scroll {
    display: none !important;
  }
  .js .reveal,
  .js .reveal-up,
  .js .reveal-line {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   COMPANY MARK
   The supplied raster logo is the mark. The original drawn monogram stays
   behind it and is revealed only when the image cannot load, so a missing
   file never leaves an empty box. --mark-size is the height; the width
   follows the logo's 64:46 ratio.
   ========================================================================== */
.brand-mark {
  --mark-size: 2.5rem;
  display: inline-flex;
  align-items: center;
  flex: none;
}

.brand-mark__img {
  display: block;
  /* The image sets the size; any plate padding is added around it. */
  height: var(--mark-size, 2.5rem);
  width: auto;
}

/* Specific enough to beat the reset's svg:not(:root){width:100%}. */
.brand-mark .brand-mark__fallback {
  display: none;
  width: var(--mark-size, 2.5rem);
  height: var(--mark-size, 2.5rem);
}

.brand-mark.is-broken .brand-mark__img { display: none; }
.brand-mark.is-broken .brand-mark__fallback { display: block; }

/*
 * On dark ground the mark sits on a light plate. The logo's wordmark is navy;
 * against the hero photograph, the charcoal footer or the ocean console it
 * would otherwise read as a floating yellow diamond. The plate restores the
 * rounded-square silhouette the drawn monogram used to have.
 */
.site-nav:not(.is-stuck) .brand-mark,
.site-nav.is-drawered .brand-mark,
.nav-drawer .brand-mark,
.footer-brand__mark .brand-mark {
  padding: calc(var(--mark-size, 2.5rem) * 0.14);
  background: var(--cream-50);
  border-radius: 0.8rem;
}

/* The drawn monogram is its own plate; it needs no frame. These selectors
   repeat the plate selectors so they outrank them. */
.site-nav:not(.is-stuck) .brand-mark.is-broken,
.site-nav.is-drawered .brand-mark.is-broken,
.nav-drawer .brand-mark.is-broken,
.footer-brand__mark .brand-mark.is-broken {
  padding: 0;
  background: transparent;
}

/* ==========================================================================
   BODY COPY BLOCKS
   Body copy is written as HTML (see App\Support\RichText), so these wrappers
   can hold their own paragraphs, lists and links. They used to hold one run
   of text, which is why the reset's zero margins were enough.
   ========================================================================== */
.lede > * + *,
.hero__note > * + *,
.manifesto__note > * + * {
  margin-top: 0.75em;
}

.lede ul,
.lede ol,
.hero__note ul,
.hero__note ol,
.manifesto__note ul,
.manifesto__note ol {
  padding-left: 1.15em;
}

.lede ul,
.hero__note ul,
.manifesto__note ul { list-style: disc; }

.lede ol,
.hero__note ol,
.manifesto__note ol { list-style: decimal; }

.lede li + li,
.hero__note li + li,
.manifesto__note li + li { margin-top: 0.3em; }

.lede a,
.hero__note a,
.manifesto__note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.lede strong,
.lede b,
.hero__note strong,
.hero__note b,
.manifesto__note strong,
.manifesto__note b { font-weight: 700; }