/* ==========================================================================
   The Sleeping Giant — shared layer + featured-episode block
   --------------------------------------------------------------------------
   Ported 10 Sep 2026 from design/documentary/common.css + block-1.css.
   Tokens lifted from the live blocks so the page and the block sit on the
   site's own surfaces and type. One accent. Tinted neutrals. Loaded on the
   home page (block), the About page (include) and the Documentary template.
   ========================================================================== */
:root {
  /* Surfaces: the site's dark masthead family and its warm paper. */
  --doc-dark:        #07090D;
  --doc-dark-2:      #0E1117;
  --doc-dark-3:      #151920;
  --doc-paper:       #F4F2EC;
  --doc-paper-2:     #ECEAE3;
  --doc-paper-3:     #E4E1D9;

  --doc-ink-on-dark:  #ECEAE3;
  --doc-dim-on-dark:  rgba(236, 234, 227, 0.66);
  --doc-faint-on-dark:rgba(236, 234, 227, 0.42);
  --doc-rule-on-dark: rgba(236, 234, 227, 0.16);

  --doc-ink-on-paper:  #1C1A17;
  --doc-dim-on-paper:  rgba(28, 26, 23, 0.66);
  --doc-faint-on-paper:rgba(28, 26, 23, 0.42);
  --doc-rule-on-paper: rgba(28, 26, 23, 0.16);

  /* The one accent. Flag red is on the plates only, as the flag. */
  --doc-accent: #C42800;

  --doc-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --doc-disp: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  --doc-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Page frame: the live layout.css numbers (1400 outer, gutters included). */
  --doc-page-max: 1400px;
  --doc-gutter: 56px;

  --doc-ease: cubic-bezier(0.33, 1, 0.68, 1);   /* ease-out-cubic, the site's */
  --doc-ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 1180px) { :root { --doc-gutter: 40px; } }
@media (max-width: 1080px) { :root { --doc-gutter: 28px; } }
@media (max-width: 760px)  { :root { --doc-gutter: 20px; } }

.p1 *, .p1 *::before, .p1 *::after, .b1 *, .b1 *::before, .b1 *::after, .dm *, .dm *::before, .dm *::after { box-sizing: border-box; }
.p1 img, .p1 video, .b1 img, .b1 video { display: block; max-width: 100%; }
.p1 button, .b1 button, .dm button { font: inherit; }

/* Surface themes. A section declares one; children read the tokens. */
[data-surface="dark"] {
  --s-bg: var(--doc-dark);
  --s-bg-2: var(--doc-dark-2);
  --s-bg-3: var(--doc-dark-3);
  --s-ink: var(--doc-ink-on-dark);
  --s-dim: var(--doc-dim-on-dark);
  --s-faint: var(--doc-faint-on-dark);
  --s-rule: var(--doc-rule-on-dark);
  --s-btn-bg: var(--doc-paper);
  --s-btn-ink: var(--doc-ink-on-paper);
  background: var(--s-bg);
  color: var(--s-ink);
  color-scheme: dark;
}
[data-surface="paper"] {
  --s-bg: var(--doc-paper);
  --s-bg-2: var(--doc-paper-2);
  --s-bg-3: var(--doc-paper-3);
  --s-ink: var(--doc-ink-on-paper);
  --s-dim: var(--doc-dim-on-paper);
  --s-faint: var(--doc-faint-on-paper);
  --s-rule: var(--doc-rule-on-paper);
  --s-btn-bg: var(--doc-ink-on-paper);
  --s-btn-ink: var(--doc-paper);
  background: var(--s-bg);
  color: var(--s-ink);
  color-scheme: light;
}

.doc-inner {
  max-width: var(--doc-page-max);
  margin: 0 auto;
  padding-left: var(--doc-gutter);
  padding-right: var(--doc-gutter);
}

/* ---- Type register ---------------------------------------------------- */
.doc-mono {
  font-family: var(--doc-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-faint);
  font-variant-numeric: tabular-nums;
}
.doc-mono--dim { color: var(--s-dim); }
.doc-mono--ink { color: var(--s-ink); }

/* Section topbar: hairline with a mono label left and right. */
.doc-topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--s-rule);
}

.doc-h {
  margin: 0;
  font-family: var(--doc-disp);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--s-ink);
}
.doc-p {
  margin: 0;
  font-family: var(--doc-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--s-dim);
  max-width: 62ch;
}
.doc-p--lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--s-ink);
  max-width: 56ch;
}

/* Series wordmark: display face, light, with a mono line beneath. The plates
   carry the heavy stacked THE / SLEEPING / GIANT already; the page's own
   mark stays quiet so the two never compete. */
.doc-wordmark { display: inline-flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.doc-wordmark__k {
  font-family: var(--doc-disp);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--s-ink);
}
.doc-wordmark__m {
  font-family: var(--doc-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s-faint);
}

/* ---- Controls ---------------------------------------------------------- */
/* Primary play control: the site's primary button register (the Milano-red
   square-cornered block of "Read story" and "Corporate presentation"), with a
   small play mark instead of the arrow. The one place the accent is used. */
.doc-play {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 24px 15px 20px;
  border: 1px solid var(--doc-accent);
  border-radius: 0;
  background: var(--doc-accent);
  color: var(--doc-paper);
  font-family: var(--doc-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.doc-play__sq {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
  flex: none;
}
.doc-play:hover, .doc-play:focus-visible { background: var(--s-btn-bg); color: var(--s-btn-ink); border-color: var(--s-btn-bg); outline: none; }
.doc-play:focus-visible { box-shadow: 0 0 0 2px var(--s-bg), 0 0 0 4px var(--doc-accent); }
/* No video ID yet: the same control, hollow and quiet. Stays in the tab
   order so it is announced, but does nothing. */
.doc-play[aria-disabled="true"] {
  background: transparent;
  color: var(--s-dim);
  border-color: var(--s-rule);
  cursor: default;
}
.doc-play[aria-disabled="true"]:hover { background: transparent; color: var(--s-dim); border-color: var(--s-rule); }

/* Small play mark for compact rows: the accent square alone, with a label. */
.doc-play--sm { padding: 10px 14px 10px 12px; font-size: 11px; gap: 10px; }

/* Text link with the site's ↗ (investor-sections .is__cta register). */
.doc-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--s-ink);
  font-family: var(--doc-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--s-ink);
  text-decoration: none;
  transition: gap 240ms var(--doc-ease), border-color 200ms ease;
}
.doc-link::after { content: '\2197'; color: var(--doc-accent); transition: transform 240ms var(--doc-ease); }
.doc-link:hover { gap: 14px; border-color: var(--doc-accent); }
.doc-link:hover::after { transform: translate(2px, -2px); }
.doc-link--quiet { border-bottom-color: var(--s-rule); color: var(--s-dim); font-size: 11px; }
/* The quiet link is printed hidden while an episode has no ID; the flex display above must not override that. */
.doc-link[hidden] { display: none; }

/* Episode plate: 16:9, no rounding (Swiss; the site does not lean on it). */
.doc-plate {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--s-bg-3);
}
.doc-plate img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Player modal --------------------------------------------------- */
/* Built by common.js on first use. Dark, full-bleed, the frame centred at
   16:9. Nothing from YouTube loads until a play control is pressed. */
.dm {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 9, 13, 0.94);
  color: var(--doc-ink-on-dark);
  opacity: 0;
  transition: opacity 320ms var(--doc-ease);
}
.dm[hidden] { display: none; }
.dm.is-open { opacity: 1; }
.dm__box {
  width: min(1200px, 100%);
  transform: translateY(12px);
  transition: transform 420ms var(--doc-ease-quint);
}
.dm.is-open .dm__box { transform: translateY(0); }
.dm__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--doc-rule-on-dark);
  margin-bottom: 14px;
}
.dm__meta {
  font-family: var(--doc-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--doc-dim-on-dark);
}
.dm__actions { display: flex; align-items: baseline; gap: 28px; }
.dm__yt {
  font-family: var(--doc-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--doc-dim-on-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--doc-rule-on-dark);
  padding-bottom: 3px;
}
.dm__yt::after { content: ' \2197'; color: var(--doc-accent); }
.dm__yt:hover { color: var(--doc-ink-on-dark); border-color: var(--doc-ink-on-dark); }
.dm__close {
  appearance: none;
  border: 0;
  background: none;
  padding: 0 0 3px;
  color: var(--doc-ink-on-dark);
  font-family: var(--doc-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid var(--doc-ink-on-dark);
}
.dm__close:focus-visible { outline: 2px solid var(--doc-accent); outline-offset: 4px; }
.dm__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--doc-dark-2);
}
.dm__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.dm-lock { overflow: hidden; }
@media (max-width: 760px) {
  .dm { padding: 16px; align-items: center; }
  .dm__bar { flex-direction: column; gap: 10px; }
  .dm__actions { justify-content: space-between; width: 100%; }
}


/* On the About page the block sits after the feature-scroll panel and before
   Our Story (dark). Pure white (client, 10 Sep 2026) so it separates from the
   warm panel above; ink stays the panel's. */
.ab .b1[data-surface="paper"] {
  --s-bg: #FFFFFF;
  --s-bg-2: #F4F2EC;
  --s-bg-3: #ECEAE3;
  --s-ink: #1C1A17;
  --s-dim: rgba(28, 26, 23, 0.62);
  --s-faint: rgba(28, 26, 23, 0.40);
  --s-rule: rgba(28, 26, 23, 0.16);
  --s-btn-bg: #1C1A17;
  --s-btn-ink: #F4F2EC;
}

/* ---- Motion gate + a11y helper ------------------------------------------- */
/* ---- Motion gates ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .p1 *, .p1 *::before, .p1 *::after, .b1 *, .b1 *::before, .b1 *::after, .dm, .dm * { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---- Block: the featured episode ------------------------------------------ */

.b1 { padding: 88px 0 96px; }
.b1__wordmark { gap: 12px; }
/* The series name is the block's section heading: the site's section-heading
   scale (feature-gallery .fg__title), not the page wordmark size. */
.b1__wordmark .doc-wordmark__k { font-size: clamp(28px, 3vw, 44px); line-height: 1.04; letter-spacing: -0.025em; }
/* Home: the neighbouring section heading is the news strip's (news-insights.css), one step larger. */
.b1[data-surface="dark"] .b1__wordmark .doc-wordmark__k { font-size: clamp(40px, 4.6vw, 64px); }
.ab .b1[data-surface="paper"] .b1__wordmark .doc-wordmark__k { font-size: clamp(28px, 3vw, 44px); }

.b1__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  padding-top: 40px;
  align-items: start;
}

/* Feature */
.b1__plate { margin: 0; outline: 1px solid var(--s-rule); outline-offset: -1px; }
.b1__plate img { transition: opacity 380ms var(--doc-ease); }
.b1__feature.is-swapping .b1__plate img { opacity: 0; }
.b1__feature-text { padding-top: 22px; }
.b1__feature-text [data-b1-title], .b1__feature-text [data-b1-line] { transition: opacity 320ms var(--doc-ease), transform 400ms var(--doc-ease-quint); }
.b1__feature.is-swapping [data-b1-title], .b1__feature.is-swapping [data-b1-line] { opacity: 0; transform: translateY(6px); }
.b1__h { font-size: clamp(26px, 2.6vw, 36px); }
.b1__line { margin-top: 10px; font-size: 15px; }
.b1__actions { display: flex; align-items: center; gap: 22px; margin-top: 22px; }

/* Rail */
.b1__side { display: flex; flex-direction: column; }
/* No top rule: the topbar's hairline sits 40 px above and would double it. */
.b1__rail { list-style: none; margin: 0; padding: 0; }
.b1__row { border-bottom: 1px solid var(--s-rule); }
.b1__row-btn {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  width: 100%;
  padding: 14px 0;
  border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.b1__thumb { outline: 1px solid transparent; outline-offset: -1px; transition: transform 240ms var(--doc-ease); }
.b1__thumb img { opacity: 0.78; transition: opacity 240ms ease; }
.b1__row-btn:hover .b1__thumb { transform: translateY(-2px); }
.b1__row-btn:hover .b1__thumb img, .b1__row.is-current .b1__thumb img { opacity: 1; }
.b1__row.is-current .b1__thumb { outline-color: var(--doc-accent); }
.b1__row.is-current .b1__row-text .doc-mono { color: var(--doc-accent); }
.b1__row-btn:focus-visible { outline: none; }
.b1__row-btn:focus-visible .b1__row-text .doc-mono { color: var(--doc-accent); }
.b1__row-text { display: flex; align-items: baseline; gap: 14px; }
.b1__row-t { font-family: var(--doc-sans); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--s-ink); }
.b1__go { align-self: flex-start; margin-top: 28px; }

/* Phones: wordmark, feature, then the rail as rows, then the link. */
@media (max-width: 760px) {
  .b1 { padding: 56px 0 64px; }
  .doc-topbar > .doc-mono { white-space: nowrap; }
  .b1 .doc-topbar > .doc-mono:last-child { display: none; }
  .b1 .doc-topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .b1__wordmark .doc-wordmark__m { display: none; }
  .b1__grid { grid-template-columns: 1fr; gap: 24px; padding-top: 22px; }
  .b1__plate { margin: 0 calc(-1 * var(--doc-gutter)); }
  .b1__feature-text { padding-top: 16px; }
  .b1__h { font-size: 24px; }
  .b1__actions { flex-wrap: wrap; gap: 16px; margin-top: 16px; }
  .b1__rail { border-top: 1px solid var(--s-rule); }   /* stacked: the rail needs its own top edge */
  .b1__row-btn { grid-template-columns: 88px minmax(0, 1fr); padding: 10px 0; }
  .b1__row-t { font-size: 14px; }
  .b1__go { margin-top: 22px; }
}