/* =============================================================================
   site.css — extensions to Kit A for this sitemap: About Us and Investors
   dropdowns, a drawer that takes over at 1024 px (the nav labels are longer
   than the kit's), portrait cards, the presentation viewer and release bodies.
   Tokens only; no raw colours.
   ============================================================================= */

/* ---------------------------------------------------------- nav dropdowns */
.nav__item { position: relative; }
.nav__link svg { display: inline-block; width: 12px; height: 12px; margin-left: 6px; vertical-align: -1px; color: var(--color-text-muted); }
.nav__link.is-current { color: var(--color-text-strong); border-bottom-color: var(--color-accent); }
.nav__menu { display: none; position: absolute; top: 100%; left: -16px; min-width: 240px; list-style: none; margin: 0; padding: var(--space-2) 0; background: var(--color-bg-elev); border: var(--rule) solid var(--color-border); z-index: var(--z-nav); max-width: none; }
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { display: block; }
.nav__menu li { margin: 0; }
.nav__menu a { display: block; padding: 10px var(--space-4); color: var(--color-text); font-size: 15px; white-space: nowrap; }
.nav__menu a:hover { color: var(--color-text-strong); background: var(--color-surface-2); text-decoration: none; }
.nav__menu a[aria-current="page"] { color: var(--color-text-strong); box-shadow: inset var(--rule-strong) 0 0 var(--color-accent); }

/* ------------------------------------------ drawer takes over at 1024 px */
@media (max-width: 1024px) {
  .nav__list { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__logo { height: 40px; }
  .nav__drawer { display: block; position: fixed; inset: 0; background: var(--color-bg); z-index: var(--z-drawer); padding: var(--space-8) var(--margin); overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
  .nav__drawer.is-open { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out); }
  .nav__drawer ul { list-style: none; padding: 0; margin: var(--space-6) 0; max-width: none; }
  .nav__drawer li { border-top: var(--rule) solid var(--color-border); margin: 0; }
  .nav__drawer a { display: block; padding: 18px 0; font-family: var(--font-head); font-size: 28px; color: var(--color-text-strong); letter-spacing: -.01em; }
  .nav__drawer a[aria-current="page"] { color: var(--color-accent-text); }
  .nav__drawer .nav__close { position: absolute; top: var(--space-4); right: var(--margin); }
  .nav__drawer .nav__sub { margin: 0 0 var(--space-4); }
  .nav__drawer .nav__sub li { border-top: 0; }
  .nav__drawer .nav__sub a { padding: 8px 0 8px var(--space-5); font-family: var(--font-body); font-size: 18px; color: var(--color-text); letter-spacing: 0; }
}
@media (max-width: 720px) { .nav__logo { height: 34px; } }

/* ------------------------------------------------------- hero, home figure */
.hero__fig { margin: 0; }
.newsstrip .h4 { margin: 0; }
.hero--project .fig--framed .fig__img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------------------------------------------------------- portrait cards */
.card--person { display: flex; flex-direction: column; }
.card--person .fig { overflow: hidden; }
.card--person .fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.card--person .card__summary { flex: 1; }
.card--person .accordion { margin-top: var(--space-4); }
.card--person .accordion__btn { padding: 14px 0 0; font-family: var(--font-data); font-size: 12px; letter-spacing: var(--ls-ticker); text-transform: uppercase; }
.card--person .accordion__item { border-bottom: 0; }
.card--person .accordion__panel { padding: var(--space-3) 0 0; }
.card--person .accordion__panel p { color: var(--color-text); max-width: none; }
.card--person .accordion__panel p + p { margin-top: .8em; }

/* ------------------------------------------------------- highlight list */
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); list-style: none; padding: 0; margin: 0; max-width: none; }
.highlights li { margin: 0; padding: var(--space-5); border: var(--rule) solid var(--color-border); background: var(--color-surface); }
.highlights svg { width: 28px; height: 28px; color: var(--color-accent-text); margin-bottom: var(--space-4); }
.highlights h3 { font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: 0; font-weight: var(--fw-medium); margin-bottom: var(--space-2); }
.highlights p { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0; }
@media (max-width: 1024px) { .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .highlights { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- news listing */
.year-group + .year-group { margin-top: var(--space-8); }
.year-group > h2 { font-family: var(--font-data); font-size: var(--fs-h6); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); font-weight: var(--fw-medium); padding-bottom: var(--space-3); border-bottom: var(--rule) solid var(--color-border); margin-bottom: var(--space-5); }
.card h3.h4 { text-transform: none; }

/* --------------------------------------------------------- release page */
.release__masthead { font-family: var(--font-data); font-size: var(--fs-caption); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.release__dateline { font-family: var(--font-data); font-size: var(--fs-caption); letter-spacing: var(--ls-ticker); color: var(--color-text-muted); padding-bottom: var(--space-5); border-bottom: var(--rule) solid var(--color-border); margin-bottom: var(--space-6); }
.release .prose { max-width: none; overflow-wrap: anywhere; }
.release .prose p, .release .prose ul, .release .prose ol { max-width: var(--measure); }
.release .prose figure { margin: var(--space-6) 0; }
.release .prose figure img { width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.release .prose sup { font-size: .7em; line-height: 0; }
.release .prose table { font-size: var(--fs-small); display: block; overflow-x: auto; }

/* --------------------------------------------------- presentation viewer */
.viewer__main { background: var(--color-surface); border: var(--rule) solid var(--color-border); }
.viewer__main img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.viewer__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.viewer__count { font-family: var(--font-data); font-size: var(--fs-caption); letter-spacing: var(--ls-ticker); color: var(--color-text-muted); }
.viewer__thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); list-style: none; padding: 0; margin: var(--space-5) 0 0; max-width: none; }
.viewer__thumbs li { margin: 0; }
.viewer__thumbs button { display: block; width: 100%; border: var(--rule) solid var(--color-border); opacity: .55; transition: opacity var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.viewer__thumbs button:hover { opacity: 1; }
.viewer__thumbs button[aria-current="true"] { opacity: 1; border-color: var(--color-accent); }
@media (max-width: 720px) { .viewer__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- contact */
.contact-card address { font-style: normal; font-family: var(--font-head); font-size: var(--fs-h4); line-height: 1.3; color: var(--color-text-strong); margin-bottom: var(--space-5); }
.contact-card .mono { display: block; font-size: 18px; margin-bottom: var(--space-2); }
textarea { min-height: 160px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 720px) { .field-row { grid-template-columns: 1fr; } }
[data-status] { margin-top: var(--space-5); }
/* Subscribe spam trap: off-screen for people, filled in by bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Floating subscribe box: stays on screen while scrolling. Bottom-right panel on wide screens, a full-width bar
   along the bottom on narrow ones. site.js unhides it, collapses it to the tab, and moves it aside (.is-away)
   while the subscribe band or footer is on screen. Sits above the sticky nav, below the mobile drawer. */
.subbox { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: calc(var(--z-nav) + 5); width: 368px; max-width: calc(100vw - 2 * var(--space-4)); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear 0s; }
.subbox[hidden] { display: none; }
.subbox:not(.is-open) { width: auto; }
.subbox.is-away { opacity: 0; transform: translateY(24px); visibility: hidden; pointer-events: none; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
.subbox__tab { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.subbox__panel { display: none; background: var(--color-bg-elev); border: var(--rule) solid var(--color-border-strong); border-top: var(--rule-strong) solid var(--color-accent); padding: var(--space-5); box-shadow: 0 16px 48px rgba(0, 0, 0, .55); }
.subbox.is-open .subbox__panel { display: block; }
.subbox.is-open .subbox__tab { display: none; }
.subbox__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.subbox__min { display: grid; place-items: center; width: 36px; height: 36px; margin: -8px -10px 0 0; padding: 0; background: none; border: var(--rule) solid transparent; border-radius: var(--radius-1); color: var(--color-text-muted); cursor: pointer; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.subbox__min:hover { color: var(--color-text-strong); border-color: var(--color-border-strong); }
.subbox__title { margin: var(--space-2) 0 var(--space-4); }
.subbox .field { margin-bottom: var(--space-4); }
.subbox .check { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.subbox form p { margin: 0; }
.subbox [data-status] { margin-top: var(--space-3); }
@media (max-width: 719px) {
  .subbox, .subbox:not(.is-open) { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); width: auto; max-width: none; }
  .subbox__tab { width: 100%; }
  .subbox__panel { max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .subbox, .subbox.is-away { transition: none; } }
@media print { .subbox { display: none !important; } }

/* Home page, 20 Oct 2026: corporate hero, project cards, news heading row */
.hero__fig figcaption { padding-top: var(--space-3); font-size: var(--fs-caption); color: var(--color-text-muted); }
.card--project { display: flex; flex-direction: column; }
.card--project .fig { aspect-ratio: 16/9; overflow: hidden; }
.card--project .fig img { width: 100%; height: 100%; object-fit: cover; }
.card--project > p:not(.cluster) { flex: 1; }
.card--project .cluster { margin-top: var(--space-4); }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.project-band .section-head { margin-bottom: 0; }
.release .prose .release__note { color: var(--color-text-muted); font-size: var(--fs-small); font-style: italic; }
.release .prose td:nth-child(-n+5), .release .prose th:nth-child(-n+5) { white-space: nowrap; }