/*
Theme Name: Gridless
Theme URI: https://github.com/MuthonduMaina/gridless-website
Author: Gridless
Description: A responsive WordPress theme for the Gridless public website.
Version: 1.1.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: gridless
*/

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

.gridless-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  vertical-align: -0.18em;
}

.admin-bar .masthead {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .masthead {
    top: 46px;
  }
}

:root {
  --ink: #111514;
  --paper: #f1eee5;
  --paper-2: #e7e5dc;
  --soft: #cad7d0;
  --green: #4ba484;
  --green-bright: #4ba484;
  --forest: #123e2a;
  --line: rgba(17, 21, 20, 0.18);
  --muted: #65706b;
  --display: "Open Sans", Arial, sans-serif;
  --mono: "Open Sans", Arial, sans-serif;
  --serif: "Open Sans", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}

p {
  font-size: 16px;
}

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

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

button,
input {
  font: inherit;
}

::selection {
  background: var(--green-bright);
  color: #07130c;
}

.site {
  --site-paper: #0c100e;
  --site-ink: #f2efe5;
  --site-line: rgba(242, 239, 229, 0.2);
  --muted: #9da9a2;
  min-height: 100vh;
  overflow: hidden;
  background: var(--site-paper);
  color: var(--site-ink);
  transition: background 250ms ease, color 250ms ease;
}

.site:has(.mode-input:checked) {
  --site-paper: var(--paper);
  --site-ink: var(--ink);
  --site-line: var(--line);
  --muted: #65706b;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  transform: translateY(-150%);
  background: var(--green-bright);
  color: #07130c;
}

.skip-link:focus {
  transform: translateY(0);
}

.mode-input {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}

.masthead {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  display: grid;
  width: 100%;
  height: 82px;
  grid-template-columns: 210px 1fr auto;
  align-items: center;
  padding: 0 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 16, 14, 0.88);
  backdrop-filter: blur(14px);
  transform: translateY(0);
  transition: transform 280ms ease;
  will-change: transform;
}

.masthead-hidden {
  transform: translateY(-100%);
}

.site:has(.mode-input:checked) .masthead {
  border-color: rgba(17, 21, 20, 0.18);
  background: rgba(241, 238, 229, 0.88);
}

.brand {
  display: inline-flex;
  width: 132px;
  transition: opacity 180ms ease;
}

.brand:hover,
.brand:focus-visible {
  opacity: 0.68;
}

.brand img {
  width: 100%;
  height: auto;
}

.brand-day {
  display: none;
}

.site:has(.mode-input:checked) .brand-night {
  display: none;
}

.site:has(.mode-input:checked) .brand-day {
  display: block;
}

.primary-nav-shell {
  display: flex;
  min-width: 0;
  justify-content: center;
}

.primary-nav-toggle {
  display: none;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--site-ink);
  cursor: pointer;
}

.primary-nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  margin: 5px 0;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.primary-nav-toggle.is-open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.primary-nav-toggle.is-open span:nth-child(2) { opacity:0; }
.primary-nav-toggle.is-open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

.masthead nav {
  --nav-gap: clamp(20px, 3vw, 46px);
  display: flex;
  justify-content: center;
  gap: var(--nav-gap);
}

.masthead nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.masthead nav a,
.mode-switch,
.reserve-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.masthead nav a {
  position: relative;
  padding: 8px 0;
}

.masthead nav > a.gridless-nav-editorial-start::before,
.masthead nav li.gridless-nav-editorial-start > a::before {
  position: absolute;
  right: calc(100% + var(--nav-gap));
  transform: translateX(50%);
  color: var(--muted);
  content: "|";
}

.masthead nav > a.gridless-nav-editorial-start,
.masthead nav li.gridless-nav-editorial-start {
  margin-left: var(--nav-gap);
}

.masthead nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: var(--green);
  content: "";
  transition: transform 180ms ease;
}

.masthead nav a:hover::after,
.masthead nav a:focus-visible::after,
.masthead nav a[aria-current="page"]::after,
.masthead nav .current-menu-item > a::after,
.masthead nav .current-menu-parent > a::after,
.masthead nav .current_page_parent > a::after,
.masthead nav .current_page_item > a::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.mode-switch {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 7px;
}

.mode-switch svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  stroke-width: 1.75;
}

.mode-switch b {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.mode-switch i {
  position: relative;
  width: 34px;
  height: 17px;
  border: 1px solid currentColor;
  border-radius: 30px;
}

.mode-switch i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  content: "";
  transition: transform 220ms ease;
}

.mode-input:checked ~ .masthead .mode-switch i::after {
  transform: translateX(17px);
}

.reserve-link {
  --button-cut: 14px;
  padding: 13px 16px;
  background: var(--green-bright);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--button-cut) 100%,
    0 calc(100% - var(--button-cut))
  );
  color: #07130c;
  transition: background 180ms ease, color 180ms ease;
}

.site:has(.mode-input:checked) .reserve-link {
  background: var(--ink);
  color: var(--paper);
}

.reserve-link:hover,
.reserve-link:focus-visible {
  background: #fff;
  color: #07130c;
}

.site:has(.mode-input:checked) .reserve-link:hover,
.site:has(.mode-input:checked) .reserve-link:focus-visible {
  background: var(--green);
  color: #07130c;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  grid-template-columns: 45% 55%;
  padding-top: 82px;
  background: var(--site-paper);
}

.hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0.08;
  background: url("assets/images/topography-pattern.png") center / cover no-repeat;
  filter: invert(1);
  content: "";
  pointer-events: none;
}

.site:has(.mode-input:checked) .hero::before {
  filter: none;
}

.hero-copy {
  position: relative;
  z-index: 3;
  display: flex;
  max-width: 980px;
  flex-direction: column;
  justify-content: center;
  padding: 30px 0 30px max(48px, calc((100vw - 1500px) / 2));
}

.eyebrow {
  margin: 0 0 28px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 860px;
  min-height: 1.62em;
  margin: 0;
  font-size: clamp(66px, 7vw, 138px);
  font-weight: 700;
  letter-spacing: -0.075em;
  line-height: 0.81;
}

.hero h1 em,
.thesis h2 em,
.nodes-title h2 em,
.field-head h2 em,
.contact h2 em {
  color: var(--green);
  font-family: var(--serif);
  font-weight: 400;
}

.hero-title-highlight {
  position: relative;
  display: inline-block;
}

.hero-title-space {
  visibility: hidden;
}

.hero-title-typing {
  position: absolute;
  inset: 0 auto auto 0;
  white-space: nowrap;
}

.hero-title-period {
  display: inline-block;
  animation: hero-period-blink 550ms ease-in-out 4;
}

@keyframes hero-period-blink {
  50% {
    opacity: 0;
  }
}

.hero-deck {
  max-width: 620px;
  margin: 42px 0 0;
  font-size: clamp(18px, 1.45vw, 23px);
}

.hero-ctas {
  display: flex;
  margin-top: 34px;
  gap: 18px;
}

.button {
  --button-cut: 14px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 0 18px;
  border: 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--button-cut) 100%,
    0 calc(100% - var(--button-cut))
  );
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.button-solid {
  background: var(--site-ink);
  color: var(--site-paper);
}

.button-ghost {
  background: var(--site-ink);
}

.button-ghost::before {
  position: absolute;
  z-index: -1;
  inset: 1px;
  background: var(--site-paper);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(var(--button-cut) - 1px) 100%,
    0 calc(100% - var(--button-cut) + 1px)
  );
  content: "";
}

.button-solid:hover,
.button-solid:focus-visible {
  border-color: var(--green);
  background: var(--green);
  color: #07130c;
}

.button-ghost:hover,
.button-ghost:focus-visible {
  background: var(--green);
  color: var(--green);
}

.button svg,
.contact-path svg {
  flex: 0 0 auto;
}

.hero-media {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - 82px);
  overflow: hidden;
  background: url("assets/images/hero-field.jpg") center/cover;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    clamp(0px, calc(36.397svh - 29.846px), 100%) 100%
  );
}

.hero-media::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--green);
  content: "";
  mix-blend-mode: color;
  opacity: 0.3;
  pointer-events: none;
}

.hero-media::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 20, 15, 0.32), transparent 38%),
    linear-gradient(0deg, rgba(9, 16, 12, 0.65), transparent 45%);
  content: "";
}

.hero-media video {
  width: 100%;
  height: 100%;
  filter: grayscale(0.35) saturate(0.72) contrast(1.12);
  object-fit: cover;
  object-position: center calc(50% + var(--parallax-y, 0px));
  will-change: object-position;
}

.media-scan {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0.24;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(255, 255, 255, 0.13) 4px
  );
  pointer-events: none;
}

.media-label {
  position: absolute;
  z-index: 3;
  top: 30px;
  right: 28px;
  left: 16%;
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: white;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.signal {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 20px;
  display: flex;
  width: 68px;
  height: 42px;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
}

.signal span {
  width: 5px;
  height: 22%;
  background: var(--green-bright);
  animation: signal 2.5s ease-in-out infinite alternate;
}

.signal span:nth-child(2) {
  height: 48%;
  animation-delay: -0.9s;
}

.signal span:nth-child(3) {
  height: 30%;
  animation-delay: -1.6s;
}

.signal span:nth-child(4) {
  height: 72%;
  animation-delay: -0.2s;
}

.signal span:nth-child(5) {
  height: 58%;
  animation-delay: -1.2s;
}

.signal span:nth-child(6) {
  height: 100%;
  animation-delay: -0.4s;
}

.signal span:nth-child(7) {
  height: 44%;
  animation-delay: -2s;
}

.signal span:nth-child(8) {
  height: 67%;
  animation-delay: -1.3s;
}

@keyframes signal {
  to {
    height: 12%;
    opacity: 0.45;
  }
}

.proof-strip {
  display: grid;
  border-top: 1px solid var(--site-line);
  border-bottom: 1px solid var(--site-line);
  grid-template-columns: repeat(4, 1fr);
}

.proof-strip > div {
  display: grid;
  min-height: 160px;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  border-right: 1px solid var(--site-line);
}

.proof-strip > div:last-child {
  border-right: 0;
}

.proof-strip strong {
  font-family: var(--serif);
  font-size: clamp(48px, 4.5vw, 76px);
  font-weight: 700;
  letter-spacing: -0.06em;
  opacity: 0.6;
}

.count-up {
  position: relative;
  display: inline-block;
}

.count-up-space {
  visibility: hidden;
}

.count-up-value {
  position: absolute;
  inset: 0 auto auto 0;
  white-space: nowrap;
}

.proof-strip > div > span {
  max-width: 150px;
  color: var(--site-ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.45;
  opacity: 1;
  text-transform: uppercase;
}

.section-pad {
  padding: 110px max(32px, calc((100vw - 1500px) / 2));
}

.section-kicker {
  --kicker-fill: var(--site-paper);
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 82px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-kicker span {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  border: 1px solid currentColor;
  place-items: center;
}

.section-kicker span::before {
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 9px;
  height: 9px;
  background: var(--kicker-fill);
  content: "";
}

.section-kicker span::after {
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 11.32px;
  height: 1px;
  transform: rotate(45deg);
  transform-origin: left center;
  background: currentColor;
  content: "";
}

.section-kicker p {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

.section-kicker p::after {
  width: min(360px, 30vw);
  height: 1px;
  background: currentColor;
  content: "";
}

.section-kicker.light {
  --kicker-fill: var(--site-paper);
  color: var(--green-bright);
}

.thesis-lead {
  display: block;
}

.thesis-lead > p {
  margin: 0 0 22px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  text-transform: uppercase;
}

.thesis h2,
.nodes-title h2,
.field-head h2,
.contact h2 {
  margin: 0;
  font-size: clamp(58px, 6vw, 118px);
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 0.91;
}

.thesis-grid {
  display: grid;
  margin-top: 90px;
  grid-template-columns: 1.15fr 1fr;
  column-gap: 10vw;
  align-items: center;
}

.drop-copy {
  max-width: 620px;
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.025em;
}

.thesis-quote {
  position: absolute;
  z-index: 1;
  top: 14%;
  left: 50%;
  display: flex;
  gap: 14px;
  width: calc(100% - 12vw);
  max-width: 830px;
  margin: 0;
  padding: 60px;
  transform: translateX(-50%);
  border-top: 0;
  background: var(--green);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    40px 100%,
    0 calc(100% - 40px)
  );
  font-weight: 300;
}

.thesis-quote > svg {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: #0c100e;
}

.thesis-quote > .quote-icon {
  flex: 0 0 auto;
  color: #0c100e;
  font-size: 44px;
  line-height: 1;
}

.quote-icon .gridless-icon { width: 1em; height: 1em; }
.article-link .gridless-icon { width: 16px; height: 16px; }
.contact-path > .gridless-icon { justify-self: end; }
.footer-column .gridless-icon { width: 18px; height: 18px; }
.footer-top .gridless-icon { width: 22px; height: 22px; }
.download-card > .gridless-icon,
.document-list > a > .gridless-icon { width: 24px; height: 24px; }

.thesis-quote > span {
  position: static;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

blockquote {
  position: relative;
  margin: 0;
  padding: 28px 0 0 42px;
  border-top: 1px solid var(--site-line);
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 34px);
  font-style: italic;
  line-height: 1.25;
}

blockquote > span {
  position: absolute;
  top: 26px;
  left: 0;
  color: var(--green);
  font-size: 52px;
  line-height: 1;
}

.field-figure {
  position: relative;
  margin: 110px 0 0;
}

.field-figure img,
.node-image img,
.field-image img,
.manifesto-image {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    60px 100%,
    0 calc(100% - 60px)
  );
}

.field-figure img {
  width: 100%;
  height: min(68vw, 780px);
  filter: grayscale(1);
  object-fit: cover;
  object-position: center calc(50% + var(--parallax-y, 0px));
  transition: filter 1200ms ease;
  will-change: object-position;
}

.field-figure img.is-in-view {
  filter: grayscale(0);
}

.field-figure figcaption {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  padding: 14px 0;
  font-family: var(--mono);
  font-size: 10px;
  text-align: right;
  text-transform: uppercase;
}

.dispatch {
  background: var(--site-paper);
  color: var(--site-ink);
}

.dispatch-head {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 8vw;
  align-items: center;
}

.dispatch-head h2,
.swarm h2,
.manifesto h2 {
  margin: 0;
  font-size: clamp(64px, 6vw, 148px);
  font-weight: 700;
  letter-spacing: -0.07em;
  line-height: 0.83;
}

.dispatch-head p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.4;
}

.dispatch-console {
  position: relative;
  margin-top: 95px;
  border: 1px solid var(--site-line);
}

.dispatch-console::before {
  position: absolute;
  z-index: 2;
  bottom: -2px;
  left: -2px;
  width: 30px;
  height: 30px;
  background: var(--site-paper);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  content: "";
  pointer-events: none;
}

.dispatch-console::after {
  position: absolute;
  z-index: 3;
  bottom: 27px;
  left: -1px;
  width: 40px;
  height: 1px;
  transform: rotate(45deg);
  transform-origin: left center;
  background: var(--site-line);
  content: "";
  pointer-events: none;
}

.console-topline,
.console-footer {
  display: grid;
  min-height: 52px;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--site-line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.console-topline span:nth-child(2) {
  text-align: center;
}

.console-topline span:last-child {
  text-align: right;
}

.live-dot::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 14px var(--green-bright);
  content: "";
}

.dispatch-bars {
  padding: 28px 18px;
}

.dispatch-row {
  display: grid;
  min-height: 104px;
  grid-template-columns: 58px minmax(190px, 0.6fr) minmax(200px, 1.4fr) 70px;
  align-items: center;
  border-bottom: 1px solid var(--site-line);
}

.dispatch-row:last-child {
  border-bottom: 0;
}

.dispatch-index,
.dispatch-value {
  color: var(--green-bright);
  font-family: var(--mono);
  font-size: 14px;
}

.dispatch-name {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dispatch-name strong {
  font-size: 35px;
  font-weight: 700;
  opacity: 0.55;
}

.dispatch-name small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}

.bar-track {
  height: 6px;
  border: 0;
  background: color-mix(in srgb, var(--site-ink) 10%, transparent);
}

.bar-track i {
  display: block;
  width: var(--bar-width);
  height: 100%;
  transform-origin: left;
  background: var(--green-bright);
  animation: load 4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite alternate;
}

@keyframes load {
  0% {
    transform: scaleX(0.78);
    opacity: 0.55;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.dispatch-value {
  text-align: right;
}

.console-footer {
  display: flex;
  min-height: auto;
  justify-content: flex-end;
  margin-top: 18px;
  padding: 0;
  border: 0;
}

.console-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.console-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.nodes-title,
.field-head {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 8vw;
  align-items: end;
}

.field-head {
  align-items: center;
}

.nodes-title > p,
.field-head > p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.45;
}

.node {
  display: grid;
  margin-top: 100px;
  grid-template-columns: 1.4fr 0.6fr;
}

.node-offnet {
  grid-template-columns: 0.6fr 1.4fr;
}

.node-image {
  position: relative;
  min-height: 660px;
  overflow: hidden;
}

.node-image img {
  width: 100%;
  height: 100%;
  filter: grayscale(1);
  object-fit: cover;
  object-position: center calc(50% + var(--parallax-y, 0px));
  transition: filter 1200ms ease;
  will-change: object-position;
}

.node-image img.is-in-view {
  filter: grayscale(0);
}

.node-image > span {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 9px 11px;
  background: var(--green-bright);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    8px 100%,
    0 calc(100% - 8px)
  );
  color: #08110c;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.node-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px;
  background: var(--site-paper);
}

.node-spec {
  color: var(--green);
  font-family: var(--mono);
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.node-copy h3 {
  margin: 18px 0 22px;
  font-size: clamp(44px, 5vw, 78px);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.node-copy > p {
  margin: 0;
  font-size: 19px;
  line-height: 1.4;
}

.node-copy ul {
  margin: 36px 0 0;
  padding: 0;
  border-top: 1px solid var(--site-line);
  list-style: none;
}

.node-copy li {
  padding: 12px 0;
  border-bottom: 1px solid var(--site-line);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.swarm {
  position: relative;
  min-height: 980px;
  overflow: hidden;
  color: var(--site-ink);
}

.swarm-grid {
  position: absolute;
  inset: 0;
  opacity: 0.38;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

.swarm-grid::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(41, 225, 120, 0.15) 1px, transparent 1.25px),
    radial-gradient(circle, rgba(41, 225, 120, 0.15) 1px, transparent 1.25px);
  background-size: 86px 7px, 7px 86px;
  content: "";
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 18%,
    #000 82%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 18%,
    #000 82%,
    transparent
  );
  pointer-events: none;
}

.swarm-grid i {
  position: absolute;
  width: 10px;
  height: 9px;
  background: var(--green-bright);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  box-shadow: 0 0 20px var(--green-bright);
  transform: translate3d(var(--hex-x, 0), var(--hex-y, 0), 0);
  will-change: transform;
}

.swarm-grid i:nth-child(3n) {
  width: 14px;
  height: 12px;
}

.swarm-grid i:nth-child(4n) {
  width: 7px;
  height: 6px;
}

.swarm-grid i:nth-child(5n) {
  width: 18px;
  height: 16px;
}

.swarm-grid i:nth-child(1) { left: 8%; top: 22%; }
.swarm-grid i:nth-child(2) { left: 16%; top: 70%; }
.swarm-grid i:nth-child(3) { left: 24%; top: 43%; }
.swarm-grid i:nth-child(4) { left: 31%; top: 82%; }
.swarm-grid i:nth-child(5) { left: 38%; top: 18%; }
.swarm-grid i:nth-child(6) { left: 43%; top: 57%; }
.swarm-grid i:nth-child(7) { left: 49%; top: 76%; }
.swarm-grid i:nth-child(8) { left: 55%; top: 29%; }
.swarm-grid i:nth-child(9) { left: 61%; top: 64%; }
.swarm-grid i:nth-child(10) { left: 67%; top: 14%; }
.swarm-grid i:nth-child(11) { left: 72%; top: 49%; }
.swarm-grid i:nth-child(12) { left: 79%; top: 78%; }
.swarm-grid i:nth-child(13) { left: 86%; top: 27%; }
.swarm-grid i:nth-child(14) { left: 92%; top: 59%; }
.swarm-grid i:nth-child(15) { left: 12%; top: 89%; }
.swarm-grid i:nth-child(16) { left: 27%; top: 28%; }
.swarm-grid i:nth-child(17) { left: 53%; top: 90%; }
.swarm-grid i:nth-child(18) { left: 76%; top: 38%; }
.swarm-grid i:nth-child(19) { left: 89%; top: 90%; }
.swarm-grid i:nth-child(20) { left: 5%; top: 48%; }

.swarm .section-kicker,
.swarm-copy,
.comparison {
  position: relative;
  z-index: 2;
}

.swarm-copy {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  column-gap: 8vw;
  row-gap: 14px;
  align-items: center;
}

.swarm-copy h2 {
  grid-column: 1;
  grid-row: 2;
}

.swarm-copy .crossout {
  grid-column: 1;
  grid-row: 1;
}

.swarm-copy > p:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.crossout {
  display: inline-block;
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 36px;
  font-style: italic;
  text-decoration: line-through;
  text-decoration-color: var(--green-bright);
  text-decoration-thickness: 2px;
}

.swarm h2 {
  color: var(--site-ink);
}

.swarm-copy > p:last-child {
  margin: 0 0 15px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.45;
}

.comparison {
  display: grid;
  margin-top: 140px;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--site-line);
}

.comparison > div {
  min-height: 210px;
  padding: 28px;
  border-right: 1px solid var(--site-line);
}

.comparison > div:last-child {
  border-right: 0;
}

.comparison span {
  color: var(--green-bright);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.comparison strong {
  display: block;
  margin: 35px 0 0;
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 700;
}

.comparison p {
  max-width: 260px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.field-notes {
  display: grid;
  margin-top: 100px;
  grid-template-columns: 1fr 1.15fr 0.85fr;
  gap: 18px;
}

.field-notes article:nth-child(2) {
  margin-top: 100px;
}

.field-notes article:nth-child(3) {
  margin-top: 36px;
}

.field-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.field-image img {
  width: 100%;
  height: 100%;
  filter: grayscale(1);
  object-fit: cover;
  object-position: center calc(50% + var(--parallax-y, 0px));
  transition: filter 1200ms ease;
  will-change: object-position;
}

.field-image img.is-in-view {
  filter: grayscale(0);
}

.field-image span {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  width: 56px;
  height: 56px;
  background: var(--green-bright);
  color: #07130c;
  font-family: var(--mono);
  font-size: 11px;
  place-items: center;
}

.field-notes article > p:first-of-type {
  margin: 18px 0 8px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-align: right;
  text-transform: uppercase;
}

.field-notes h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
}

.field-notes article > p:last-child {
  max-width: 380px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.manifesto {
  display: grid;
  min-height: 780px;
  grid-template-columns: 1fr 1fr;
  background: var(--site-paper);
  color: var(--site-ink);
}

.manifesto-image {
  background:
    linear-gradient(90deg, transparent 65%, var(--site-paper)),
    linear-gradient(0deg, rgba(12, 16, 14, 0.18), rgba(12, 16, 14, 0.08)),
    url("assets/images/hydro-site.jpg") center calc(50% + var(--parallax-y, 0px))/cover;
  will-change: background-position;
}

.manifesto-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px max(44px, calc((100vw - 1500px) / 2)) 80px 8vw;
}

.manifesto h2 {
  max-width: 720px;
  font-size: clamp(66px, 6vw, 126px);
}

.manifesto-copy > p:last-child {
  max-width: 600px;
  margin: 42px 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 28px;
  font-style: italic;
  line-height: 1.35;
}

.contact {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 8vw;
  align-items: center;
}

.contact h2 {
  font-size: clamp(58px, 6vw, 108px);
}

.contact-paths {
  border-top: 1px solid var(--site-line);
}

.contact-path {
  display: grid;
  min-height: 145px;
  grid-template-columns: 42px 1fr 32px;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--site-line);
  transition: padding 200ms ease, background 200ms ease;
}

.contact-path:hover,
.contact-path:focus-visible {
  padding: 20px 18px;
  background: var(--green-bright);
  color: #07130c;
}

.contact-path > span {
  font-family: var(--mono);
  font-size: 10px;
}

.contact-path strong {
  display: block;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
}

.contact-path p {
  max-width: 370px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.contact-path:hover p,
.contact-path:focus-visible p {
  color: #173424;
}

.site-footer {
  padding: 90px max(32px, calc((100vw - 1500px) / 2)) 0;
  border-top: 1px solid var(--site-line);
  background: var(--site-paper);
}

.footer-main {
  display: grid;
  min-height: 250px;
  grid-template-columns: minmax(300px, 1.35fr) minmax(180px, 0.65fr) minmax(220px, 0.7fr);
  gap: 7vw;
}

.footer-brand {
  align-self: start;
}

.footer-mark {
  width: 180px;
}

.footer-brand p {
  margin: 34px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.footer-column {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 15px;
  font-size: 14px;
}

.footer-column strong {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
}

.footer-column a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  transition: color 180ms ease;
}

.footer-column a svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke-width: 1.75;
}

.footer-column a:hover,
.footer-column a:focus-visible {
  color: var(--green);
}

.footer-bottom {
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--site-line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
}

.footer-top {
  display: grid;
  width: 56px;
  height: 56px;
  background: var(--green);
  color: #07130c;
  place-items: center;
  transition: background 180ms ease, color 180ms ease;
}

.footer-top:hover,
.footer-top:focus-visible {
  background: var(--site-ink);
  color: var(--site-paper);
}

@media (max-width: 1100px) {
  .masthead {
    grid-template-columns: 150px 1fr auto;
  }

  .masthead nav {
    --nav-gap: 18px;
  }

  .hero {
    min-height: 100svh;
    grid-template-columns: 45% 55%;
  }

  .hero-copy {
    padding-right: 0;
  }

  .hero-media {
    min-height: calc(100svh - 82px);
  }

  .proof-strip > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .thesis-lead,
  .dispatch-head,
  .nodes-title,
  .field-head,
  .swarm-copy {
    grid-template-columns: 1fr;
  }

  .dispatch-head p,
  .nodes-title > p,
  .field-head > p {
    margin-top: 30px;
  }

  .node,
  .node-offnet {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .node-image {
    min-height: 560px;
  }

  .node-copy {
    padding: 36px;
  }

  .swarm-copy h2,
  .swarm-copy .crossout,
  .swarm-copy > p:last-child {
    grid-column: 1;
    grid-row: auto;
  }

  .manifesto {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

@media (max-width: 760px) {
  .masthead {
    position: fixed;
    height: 70px;
    grid-template-columns: 1fr auto auto;
    padding: 0 18px;
  }

  .primary-nav-toggle {
    display: block;
  }

  .masthead .primary-nav-shell nav {
    position:absolute;
    top:70px;
    right:0;
    left:0;
    display:flex;
    overflow:hidden;
    max-height:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0 20px;
    border-bottom:1px solid transparent;
    background:var(--site-paper);
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px);
    transition:max-height 260ms ease,padding 260ms ease,opacity 180ms ease,transform 180ms ease;
  }

  .masthead .primary-nav-shell nav.is-open {
    max-height:420px;
    padding:14px 20px 22px;
    border-bottom-color:var(--site-line);
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }

  .masthead .primary-nav-shell nav ul {
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }

  .masthead .primary-nav-shell nav a {
    display:block;
    padding:16px 0;
    border-bottom:1px solid var(--site-line);
  }

  .masthead nav > a:nth-child(4),
  .masthead nav li:nth-child(4) {
    margin-left:0;
  }

  .masthead nav > a:nth-child(4)::before,
  .masthead nav li:nth-child(4) > a::before {
    display:none;
  }

  .brand {
    width: 118px;
  }

  .header-actions {
    gap: 10px;
  }

  .reserve-link {
    padding: 11px;
    font-size: 9px;
  }

  .mode-switch {
    display: none;
  }

  .hero {
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    padding-top: 70px;
  }

  .hero-copy {
    min-height: 620px;
    justify-content: flex-end;
    padding: 88px 20px 52px;
  }

  .hero h1 {
    font-size: clamp(54px, 18.5vw, 80px);
  }

  .hero-deck {
    margin-top: 30px;
    font-size: 17px;
  }

  .hero-ctas {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    justify-content: space-between;
  }

  .hero-media {
    min-height: 360px;
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
  }

  .signal {
    display: none;
  }

  .proof-strip {
    grid-template-columns: 1fr 1fr;
  }

  .proof-strip > div {
    min-height: 130px;
    padding: 20px;
    border-bottom: 1px solid var(--site-line);
  }

  .proof-strip > div:nth-child(2) {
    border-right: 0;
  }

  .proof-strip strong {
    font-size: 48px;
  }

  .section-pad {
    padding: 76px 20px;
  }

  .section-kicker {
    margin-bottom: 48px;
  }

  .thesis h2,
  .nodes-title h2,
  .field-head h2,
  .contact h2 {
    font-size: clamp(52px, 16vw, 76px);
  }

  .thesis-grid {
    margin-top: 60px;
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .drop-copy {
    font-size: 20px;
  }

  .field-figure {
    margin-top: 70px;
  }

  .thesis-quote {
    top: 8%;
    width: calc(100% - 32px);
    padding: 28px;
  }

  .field-figure img {
    height: 70vh;
  }

  .field-figure figcaption {
    gap: 20px;
  }

  .dispatch-head h2,
  .swarm h2,
  .manifesto h2 {
    font-size: clamp(58px, 18vw, 88px);
  }

  .dispatch-console {
    margin-top: 55px;
  }

  .console-topline {
    grid-template-columns: 1fr auto;
  }

  .console-topline span:nth-child(2) {
    display: none;
  }

  .dispatch-row {
    min-height: 126px;
    grid-template-columns: 34px 1fr 48px;
    gap: 8px;
  }

  .bar-track {
    grid-column: 2 / 4;
    height: 6px;
  }

  .dispatch-value {
    grid-column: 3;
    grid-row: 1;
  }

  .console-footer {
    display: flex;
    padding: 0;
  }

  .console-footer p {
    margin-top: 0;
    line-height: 1.5;
  }

  .node,
  .node-offnet {
    display: flex;
    margin-top: 65px;
    flex-direction: column;
  }

  .node-offnet .node-copy {
    order: 2;
  }

  .node-image {
    min-height: 440px;
  }

  .node-copy {
    padding: 35px 22px;
  }

  .swarm {
    min-height: 1040px;
  }

  .swarm-copy {
    display: block;
  }

  .crossout {
    margin-bottom: 48px;
  }

  .swarm-copy > p:last-child {
    margin-top: 48px;
  }

  .comparison {
    margin-top: 80px;
    grid-template-columns: 1fr;
  }

  .comparison > div {
    min-height: 180px;
    border-right: 0;
    border-bottom: 1px solid var(--site-line);
  }

  .field-notes {
    grid-template-columns: 1fr;
  }

  .field-notes article:nth-child(2),
  .field-notes article:nth-child(3) {
    margin-top: 30px;
  }

  .field-image {
    aspect-ratio: 5 / 6;
  }

  .manifesto {
    min-height: 980px;
    grid-template-columns: 1fr;
  }

  .manifesto-image {
    min-height: 430px;
    background:
      linear-gradient(0deg, var(--site-paper), transparent 45%),
      url("assets/images/hydro-site.jpg") center/cover;
  }

  .manifesto-copy {
    padding: 20px 20px 78px;
  }

  .manifesto-copy > p:last-child {
    font-size: 23px;
  }

  .contact {
    grid-template-columns: 1fr;
  }

  .contact-paths {
    margin-top: 42px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    padding: 60px 20px 0;
  }

  .footer-main {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .hero-media video {
    display: none;
  }
}

/* News, articles and media */
.editorial-site { overflow: clip; }
.editorial-hero { padding-top: 190px; padding-bottom: 9vw; }
.editorial-heading { display:grid; margin-top:8vw; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); align-items:end; gap:clamp(40px,8vw,150px); }
.editorial-heading h1 { max-width:1050px; margin:0; font-size:clamp(58px,7vw,138px); font-weight:700; letter-spacing:-.075em; line-height:.9; }
.editorial-heading h1 em,.asset-section-head h2 em,.homepage-news-head h2 em { color:var(--green); font-weight:400; }
.editorial-heading>p { max-width:500px; margin:0; color:var(--muted); font-size:clamp(17px,1.35vw,23px); line-height:1.55; }
.news-feature { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr); gap:clamp(35px,6vw,110px); align-items:center; border-top:1px solid var(--site-line); }
.image-reveal { display:block; overflow:hidden; clip-path:polygon(0 0,100% 0,100% 100%,60px 100%,0 calc(100% - 60px)); }
.image-reveal img { width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter 650ms ease,transform 650ms ease; }
.image-reveal:hover img,.image-reveal:focus-visible img,.image-reveal img.is-in-view { filter:grayscale(0); transform:scale(1.015); }
.news-feature-image { aspect-ratio:16/10; }
.article-meta,.download-card>div>span,.document-list div>span { color:var(--green); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.news-feature-copy h2 { margin:24px 0; font-size:clamp(45px,5.1vw,92px); letter-spacing:-.065em; line-height:.94; }
.news-feature-copy>p:not(.article-meta),.article-card>p:not(.article-meta) { color:var(--muted); line-height:1.55; }
.article-link { display:inline-flex; margin-top:18px; align-items:center; gap:9px; color:var(--green); font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.news-index,.homepage-news,.asset-section { border-top:1px solid var(--site-line); }
.news-first-section { padding-top:190px; border-top:0; }
.news-page-header { display:grid; margin-bottom:clamp(48px,6vw,90px); grid-template-columns:minmax(0,.7fr) minmax(300px,1.3fr); align-items:end; gap:clamp(35px,7vw,130px); }
.news-page-header h1 { margin:0; font-size:clamp(64px,8vw,150px); font-weight:700; letter-spacing:-.075em; line-height:.9; }
.media-page-header { align-items:center; }
.media-page-header h1 { font-size:clamp(58px,7vw,132px); }
.media-page-header p { margin-bottom:0; }
.news-page-header p { max-width:560px; margin:0 0 12px auto; color:var(--muted); font-size:clamp(17px,1.35vw,23px); line-height:1.55; }
.media-first-section { padding-top:190px; border-top:0; }
.filter-row { display:flex; overflow-x:auto; gap:10px; padding-bottom:44px; }
.filter-row a,.filter-row span { flex:0 0 auto; padding:10px 16px; border:1px solid var(--site-line); font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.filter-row span:first-child { border-color:var(--green); background:var(--green); color:#0c100e; }
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3.5vw,64px); }
.article-card { padding-bottom:50px; border-bottom:1px solid var(--site-line); }
.article-card-image { min-height:240px; aspect-ratio:4/3; margin-bottom:28px; background:rgba(75,164,132,.08); }
.article-card h3 { margin:14px 0 18px; font-size:clamp(27px,2.25vw,43px); font-weight:700; letter-spacing:-.05em; line-height:1.02; }
.archive-pagination { display:flex; justify-content:center; gap:8px; margin-top:65px; }
.archive-pagination .page-numbers { padding:11px 15px; border:1px solid var(--site-line); }
.archive-pagination .current { border-color:var(--green); background:var(--green); color:#0c100e; }
.homepage-news-head { display:flex; margin:6vw 0 60px; align-items:end; justify-content:space-between; gap:30px; }
.homepage-news-head h2 { margin:0; font-size:6vw; letter-spacing:-.065em; line-height:.92; }
.asset-section-head { display:grid; margin-bottom:60px; grid-template-columns:.45fr 1.55fr; align-items:start; }
.asset-section-head h2 { margin:0; font-size:6vw; letter-spacing:-.065em; line-height:.95; }
.asset-section-head-single h2 { grid-column:2; }
.download-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.logo-gallery { display:grid; margin-bottom:22px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.logo-gallery figure { margin:0; padding:34px; border:1px solid var(--site-line); background:#f1eee5; }
.logo-gallery img { width:100%; height:90px; object-fit:contain; }
.logo-gallery figcaption { margin-top:24px; color:#65706b; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-align:right; text-transform:uppercase; }
.download-card { --download-fill:var(--site-paper); position:relative; isolation:isolate; display:grid; min-height:190px; grid-template-columns:auto 1fr auto; align-items:start; gap:24px; padding:38px; border:0; background:var(--site-line); clip-path:polygon(0 0,100% 0,100% 100%,28px 100%,0 calc(100% - 28px)); transition:background 180ms ease; }
.download-card::before { position:absolute; z-index:-1; inset:1px; background:var(--download-fill); clip-path:polygon(0 0,100% 0,100% 100%,27px 100%,0 calc(100% - 27px)); content:""; transition:background 180ms ease; }
.download-card:hover,.download-card:focus-visible { --download-fill:color-mix(in srgb,var(--green) 8%,var(--site-paper)); background:var(--green); }
.download-card>.asset-icon { color:var(--green); font-size:32px; line-height:1; }
.download-card strong { display:block; margin-top:24px; font-size:clamp(27px,2.5vw,46px); letter-spacing:-.045em; line-height:1; }
.download-card p { margin:18px 0 0; color:var(--muted); }
.media-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 22px; }
.media-gallery figure { margin:0; }
.media-gallery .image-reveal { aspect-ratio:16/10; }
.media-gallery figcaption { display:flex; justify-content:space-between; padding-top:14px; color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.documents-section { display:grid; padding-top:70px; border-top:0; grid-template-columns:.8fr 1.2fr; gap:clamp(45px,8vw,150px); }
.documents-section .asset-section-head { display:block; margin:0; }
.documents-section .asset-section-head h2 { margin-top:40px; }
.document-list { border-top:1px solid var(--site-line); }
.document-list a { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; padding:30px 0; border-bottom:1px solid var(--site-line); }
.document-list strong { display:block; margin-top:8px; font-size:clamp(19px,1.6vw,28px); }
.media-closing-image { width:calc(100% - 12vw); max-height:760px; aspect-ratio:16/8; margin:0 auto 8vw; }
.article-page { max-width:1500px; margin:0 auto; padding-top:180px; }
.article-header { max-width:1100px; margin:0 auto 70px; text-align:center; }
.article-header h1 { margin:25px 0; font-size:clamp(52px,7vw,120px); letter-spacing:-.07em; line-height:.92; }
.article-byline { color:var(--muted); }
.article-hero-image { max-height:800px; aspect-ratio:16/9; margin:0 auto 80px; }
.article-content { max-width:820px; margin:0 auto; font-size:19px; line-height:1.75; }
.article-content p { font-size:inherit; }
.article-content h2,.article-content h3 { margin:2em 0 .7em; font-weight:700; letter-spacing:-.04em; }
.article-content h2 { font-size:clamp(34px,4vw,60px); }
.article-content h3 { font-size:clamp(26px,2.5vw,38px); }
.article-content img { width:100%; height:auto; margin:45px 0; }
.article-content figure { max-width:100%; margin:45px 0; }
.article-content figcaption { margin-top:-30px; color:var(--muted); font-family:var(--mono); font-size:12px; text-align:right; }
.article-content ul,.article-content ol { margin:1.5em 0; padding-left:1.4em; }
.article-content li { margin:.5em 0; }
.article-content iframe,.article-content video { width:100%; max-width:100%; aspect-ratio:16/9; height:auto; }
.article-content table { display:block; overflow-x:auto; width:100%; border-collapse:collapse; }
.article-content th,.article-content td { padding:14px; border:1px solid var(--site-line); text-align:left; }
.article-content pre { overflow-x:auto; padding:24px; background:rgba(75,164,132,.08); }
.article-content a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.article-content blockquote { margin:60px 0; padding:35px 0 35px 35px; border-top:0; border-left:4px solid var(--green); color:var(--green); font-size:clamp(24px,3vw,42px); }
.article-footer,.post-navigation,.comments-area { max-width:820px; margin:70px auto 0; padding-top:30px; border-top:1px solid var(--site-line); }
.comment-list { margin:35px 0; padding:0; list-style:none; }
.comment-list .comment { margin-top:22px; padding:24px; border:1px solid var(--site-line); }
.comment-list .children { list-style:none; }
.comment-form label { display:block; margin-bottom:8px; font-family:var(--mono); font-size:11px; text-transform:uppercase; }
.comment-form input,.comment-form textarea { width:100%; padding:14px; border:1px solid var(--site-line); border-radius:0; background:transparent; color:var(--site-ink); }
.comment-form .submit { width:auto; padding:14px 20px; border-color:var(--green); background:var(--green); color:#0c100e; cursor:pointer; }
.post-navigation { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.post-navigation>div:last-child { text-align:right; }

@media (max-width:900px) {
  .editorial-heading,.news-feature,.news-page-header,.documents-section { grid-template-columns:1fr; }
  .editorial-heading>p { margin-top:20px; }
  .news-page-header p { margin:0; }
  .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .asset-section-head { grid-template-columns:1fr; gap:28px; }
  .asset-section-head h2 { font-size:10vw; }
  .asset-section-head-single h2 { grid-column:1; }
}
@media (max-width:620px) {
  .editorial-hero,.article-page { padding-top:130px; }
  .media-first-section,.news-first-section { padding-top:130px; }
  .editorial-heading h1 { font-size:14vw; }
  .article-grid,.download-grid,.media-gallery,.logo-gallery { grid-template-columns:1fr; }
  .download-card { grid-template-columns:auto 1fr; padding:26px; }
  .homepage-news-head { align-items:start; flex-direction:column; }
  .homepage-news-head h2 { font-size:14vw; }
  .post-navigation { grid-template-columns:1fr; }
  .post-navigation>div:last-child { text-align:left; }
}