.brand-logo {
  width: 36px;
  height: 36px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
}

.brand-footer .brand-logo {
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

/* Opening panel: single-column composition at every viewport width. */
.hero {
  min-height: auto;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(36px, 6vw, 64px);
}

.hero-copy {
  max-width: 980px;
}

/* Abstract hero field: visual texture without repeating the Commons emblem. */
.hero-field {
  position: relative;
  width: 100%;
  min-height: 480px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(rgba(17,21,18,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,21,18,.045) 1px, transparent 1px),
    radial-gradient(circle at 72% 24%, rgba(184,255,90,.68) 0 8%, rgba(184,255,90,.12) 8.5% 21%, transparent 21.5%),
    radial-gradient(circle at 27% 73%, rgba(17,21,18,.12) 0 2%, transparent 2.4%),
    linear-gradient(145deg, #f5f3eb 0%, #e5e8dd 52%, #d9dfcf 100%);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
}

.hero-field::before {
  content: "";
  position: absolute;
  inset: 10% 12%;
  border: 1px solid rgba(17,21,18,.24);
  border-radius: 50%;
  transform: rotate(-13deg);
}

.hero-field::after {
  content: "";
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  left: 14%;
  top: 21%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,13,12,.98) 0 11%, rgba(10,13,12,.12) 11.5% 32%, transparent 32.5%);
  box-shadow: 0 0 0 1px rgba(17,21,18,.18);
}

.hero-field-orbit {
  position: absolute;
  border: 1px solid rgba(17,21,18,.28);
  border-radius: 50%;
}

.hero-field-orbit-a {
  width: 73%;
  aspect-ratio: 1.55;
  left: 12%;
  top: 26%;
  transform: rotate(22deg);
}

.hero-field-orbit-b {
  width: 56%;
  aspect-ratio: 1;
  right: -10%;
  bottom: -8%;
  border-color: rgba(17,21,18,.16);
}

.hero-field-node {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 7px rgba(255,255,255,.55);
}

.hero-field-node-a { left: 17%; top: 38%; }
.hero-field-node-b { right: 18%; top: 52%; background: var(--signal-dark); }
.hero-field-node-c { left: 43%; bottom: 14%; }

.hero-field-vector {
  position: absolute;
  width: 54%;
  height: 18px;
  left: 28%;
  top: 51%;
  border-radius: 999px;
  background: var(--ink);
  transform: rotate(-39deg);
  transform-origin: left center;
}

.hero-field-vector::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 42px;
  height: 42px;
  border-top: 18px solid var(--ink);
  border-right: 18px solid var(--ink);
  transform: translateY(-50%) rotate(45deg);
}

.hero-field-caption {
  position: absolute;
  right: 24px;
  bottom: 20px;
  color: rgba(17,21,18,.58);
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Exergism framework: one visual column paired with the three conceptual modules. */
.framework-composition {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: 12px;
}

.framework-field {
  position: relative;
  min-height: 696px;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(246,245,239,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,245,239,.065) 1px, transparent 1px),
    radial-gradient(circle at 68% 28%, rgba(184,255,90,.96) 0 6%, rgba(184,255,90,.14) 6.5% 18%, transparent 18.5%),
    radial-gradient(circle at 28% 75%, rgba(246,245,239,.18) 0 3%, transparent 3.5%),
    linear-gradient(155deg, #111713 0%, #0a0d0c 68%, #1d2817 100%);
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.framework-field::before {
  content: "";
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  left: -19%;
  top: 12%;
  border: 1px solid rgba(246,245,239,.22);
  border-radius: 50%;
  box-shadow:
    0 0 0 54px rgba(246,245,239,.018),
    0 0 0 108px rgba(246,245,239,.012);
}

.framework-field::after {
  content: "";
  position: absolute;
  width: 64%;
  height: 2px;
  right: -5%;
  bottom: 26%;
  background: var(--signal);
  transform: rotate(-32deg);
  transform-origin: right center;
  box-shadow: 0 0 28px rgba(184,255,90,.36);
}

.framework-field-label {
  position: absolute;
  left: 24px;
  bottom: 22px;
  z-index: 2;
  color: #aeb8b0;
  font-size: .7rem;
  font-weight: 760;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.framework-ring {
  position: absolute;
  border: 1px solid rgba(246,245,239,.24);
  border-radius: 50%;
}

.framework-ring-a {
  width: 52%;
  aspect-ratio: 1;
  right: 8%;
  top: 31%;
}

.framework-ring-b {
  width: 28%;
  aspect-ratio: 1;
  right: 20%;
  top: 43%;
  border-color: rgba(184,255,90,.58);
}

.framework-axis {
  position: absolute;
  background: rgba(246,245,239,.28);
}

.framework-axis-a {
  width: 1px;
  height: 74%;
  left: 44%;
  top: 13%;
}

.framework-axis-b {
  width: 76%;
  height: 1px;
  left: 12%;
  top: 57%;
}

.framework-pulse {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--light);
  box-shadow: 0 0 0 8px rgba(246,245,239,.08);
}

.framework-pulse-a { left: 42.7%; top: 55.8%; }
.framework-pulse-b { right: 14%; top: 23%; background: var(--signal); }

.framework-feature-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.framework-feature-grid .feature-card {
  min-height: 224px;
}

.project-card-featured {
  position: relative;
  overflow: hidden;
}

.project-symbol {
  position: absolute;
  right: clamp(24px, 4vw, 44px);
  top: 70px;
  width: clamp(105px, 15vw, 190px);
  height: clamp(105px, 15vw, 190px);
  object-fit: contain;
  border-radius: 28px;
  background: rgba(255,255,255,.92);
  opacity: .96;
}

.project-card-featured h3,
.project-card-featured p,
.project-card-featured > a {
  max-width: calc(100% - 230px);
}

.identifier-domain {
  width: fit-content;
  margin: 0 0 28px !important;
  padding: 10px 14px;
  border: 1px solid rgba(17,21,18,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.34);
  font-size: .9rem;
}

.identifier-domain code {
  font-size: 1em;
  font-weight: 700;
}

.identity-principle {
  max-width: 650px;
  margin-top: 30px !important;
  padding-top: 25px;
  border-top: 1px solid rgba(17,21,18,.18);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
  line-height: 1.16;
  letter-spacing: -.025em;
}

@media (max-width: 960px) {
  .hero-field { max-width: none; min-height: 420px; }
  .framework-composition { grid-template-columns: 1fr; }
  .framework-field { min-height: 460px; }
  .framework-feature-grid .feature-card { min-height: 235px; }
  .project-symbol { position: static; width: 100px; height: 100px; margin: 34px 0 26px; }
  .project-card-featured h3,
  .project-card-featured p,
  .project-card-featured > a { max-width: 100%; }
}

@media (max-width: 720px) {
  .brand-logo { width: 32px; height: 32px; }
  .hero-field { min-height: 340px; }
  .hero-field-caption { right: 18px; bottom: 14px; }
  .hero-field-vector { height: 13px; }
  .hero-field-vector::after { width: 32px; height: 32px; border-top-width: 13px; border-right-width: 13px; }
  .framework-field { min-height: 360px; }
  .framework-field-label { left: 18px; bottom: 16px; }
}