/* 12-column magazine chaos. No two modules share a column start. */

.chaos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(0.6rem, 1.2vw, 1.15rem);
  row-gap: var(--space-5);
  width: min(var(--page), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  align-items: start;
}

.hero-figure,
.void {
  align-self: stretch;
}

.module-figure,
.product-figure {
  align-self: start;
}


.band {
  padding-block: var(--space-7);
  position: relative;
}

.band-raised {
  background: var(--surface-raised);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 22px,
    color-mix(in srgb, var(--brand-primary) 16%, transparent) 22px 23px
  );
}

.band-sunken {
  background-color: var(--surface-sunken);
  background-image: var(--stripe-field);
}

.band-bleed {
  /* Section is already full width of the viewport. Avoid 100vw, which includes the scrollbar and shifts the page. */
}

.hero {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}

.hero-title {
  position: relative;
  z-index: 2;
  background: var(--surface-base);
  padding: 0.15em 0.8rem 0.15em 0;
  font-size: clamp(2.15rem, 4.4vw, 4.15rem);
  line-height: 0.98;
}

.hero-title::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.7rem;
  background-image: var(--stripe-button);
}

.hero-figure {
  margin: 0;
  z-index: 1;
}

.hero .frame {
  min-height: clamp(18rem, 62vh, 40rem);
}

.lede {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
}

.prose p,
.module-copy p,
.closer,
.connector p {
  margin: 0 0 var(--space-4);
  max-width: 40rem;
}

.byline {
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

.mappa {
  overflow: hidden;
  padding-bottom: var(--space-8);
}

.mappa .chaos {
  position: relative;
  z-index: 1;
}

.protocol-index {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  grid-column: 1 / -1;
}

.protocol-index a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 9.5rem;
  padding: var(--space-4);
  text-decoration: none;
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.protocol-index a:hover {
  transform: translateY(-3px);
  background-image: var(--stripe);
  background-color: var(--surface-raised);
}

.protocol-index .idx {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
}

.protocol-index .name {
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.void {
  display: none;
  background-image: var(--stripe-button);
  min-height: 100%;
}

.module-copy .num {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

.connector {
  padding-block: var(--space-8) var(--space-6);
}

.connector p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 22ch;
  margin: 0;
}

.specs {
  margin: var(--space-5) 0 0;
  padding: 0;
}

.specs div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--border-strong);
}

.specs dt {
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.specs dd {
  margin: 0;
}

.voices blockquote {
  margin: 0;
}

.voice-lead p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-4);
}

.voice-stack {
  display: grid;
  gap: var(--space-5);
  align-content: end;
}

.voice-sub {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-strong);
  background-image: var(--stripe);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: top left;
}

.voice-sub p {
  margin: 0 0 var(--space-3);
}

.who {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  font-style: normal;
}

.cta-band {
  background-color: var(--brand-primary);
  background-image: var(--stripe-on-primary);
  color: var(--text-on-primary);
  padding-block: var(--space-9);
}

.cta-band h2 {
  font-size: var(--text-h1);
  max-width: 12ch;
}

.cta-side {
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: var(--text-sm);
  font-weight: 500;
  justify-self: end;
  align-self: stretch;
}

.site-footer {
  background: var(--surface-inverse);
  color: var(--text-inverse);
  padding: var(--space-8) 0 var(--space-7);
  background-image: var(--stripe-inverse);
}

.footer-word {
  margin: 0;
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 11vw, 8.5rem);
  line-height: 0.78;
  letter-spacing: -0.045em;
  color: color-mix(in srgb, var(--surface-base) 88%, var(--text-inverse));
}

.footer-statement {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-inverse);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--text-inverse);
  text-decoration: none;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.footer-links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--brand-primary);
  text-underline-offset: 0.22em;
}

.footer-legal p,
.footer-disclosures p {
  color: var(--text-inverse-dim);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
  max-width: none;
}

.footer-legal a,
.footer-disclosures a {
  color: var(--text-inverse);
}

.footer-legal strong,
.footer-disclosures strong {
  color: var(--text-inverse);
  font-weight: 500;
}

.footer-disclosures {
  border-top: 1px solid color-mix(in srgb, var(--text-inverse) 25%, transparent);
  padding-top: var(--space-4);
}

.footer-copy {
  grid-column: 1 / -1;
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-inverse-dim);
}

/* Legal + contact: spec sheet, headings in a narrow rail */
.legal-hero {
  padding-top: var(--space-7);
  padding-bottom: var(--space-5);
}

.legal-body {
  padding-bottom: var(--space-8);
}

.legal-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  width: min(var(--page), calc(100% - 2 * var(--gutter)));
  margin: 0 auto var(--space-6);
  padding-top: var(--space-4);
  background-image: var(--stripe-button);
  background-repeat: no-repeat;
  background-size: 4.5rem 7px;
  background-position: left top;
}

.legal-section h2 {
  font-size: var(--text-h3);
}

.legal-section p,
.legal-section li {
  font-size: var(--text-body);
  max-width: 42rem;
}

.legal-section ul {
  margin: 0;
  padding-left: 1.1rem;
}

.legal-section li + li {
  margin-top: var(--space-2);
}

.updated {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.contact-spec {
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.contact-spec div {
  padding: var(--space-4);
  background: var(--surface-raised);
  background-image: var(--stripe);
  background-repeat: no-repeat;
  background-size: 7px 100%;
  background-position: left top;
  padding-left: var(--space-5);
}

.contact-spec dt {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.contact-spec dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

@media (min-width: 760px) {
  .hero-kicker { grid-column: 1 / 6; grid-row: 1; }
  .hero-title { grid-column: 1 / 8; grid-row: 2; }
  .hero-lede { grid-column: 1 / 7; grid-row: 3; }
  .hero-intro { grid-column: 1 / 6; grid-row: 4; }
  .hero-byline { grid-column: 1 / 6; grid-row: 5; }
  .hero-figure {
    grid-column: 7 / 13;
    grid-row: 2 / 6;
    width: calc(100% + var(--bleed));
    justify-self: start;
  }

  .map-kicker { grid-column: 1 / 4; }
  .map-title { grid-column: 4 / 12; }
  .t1 { grid-column: 1 / 5; }
  .t2 { grid-column: 5 / 9; align-self: end; }
  .t3 { grid-column: 9 / 13; }
  .t4 { grid-column: 2 / 7; }
  .t5 { grid-column: 8 / 13; }
  .t2 a { min-height: 12rem; }

  .tick-a { grid-column: 1 / 3; }
  .tick-b { grid-column: 3 / 6; }
  .tick-c { grid-column: 6 / 8; }
  .tick-d { grid-column: 2 / 4; }
  .tick-e { grid-column: 9 / 12; }

  .module .tick { grid-row: 1; }
  .module .module-figure,
  .module .module-copy,
  .module .void { grid-row: 2; }
  .module-juice .module-copy { grid-row: 3; }

  .module-banane .module-figure { grid-column: 1 / 8; }
  .module-banane .module-copy { grid-column: 8 / 13; }

  .module-eggs .module-copy { grid-column: 2 / 6; }
  .module-eggs .module-figure {
    grid-column: 6 / 13;
    width: calc(100% + var(--bleed));
  }

  .module-juice .module-figure { grid-column: 4 / 13; }
  .module-juice .module-copy { grid-column: 9 / 13; }

  .void { display: block; }
  .module-yoga .module-copy { grid-column: 1 / 5; }
  .module-yoga .void { grid-column: 5 / 9; }
  .module-yoga .module-figure { grid-column: 10 / 13; }

  .module-milk .module-figure { grid-column: 1 / 6; }
  .module-milk .module-copy { grid-column: 7 / 12; }

  .connector-copy { grid-column: 3 / 11; }

  .product-copy { grid-column: 2 / 8; grid-row: 1; position: relative; z-index: 2; background: var(--surface-raised); padding-right: var(--space-5); }
  .product-figure {
    grid-column: 7 / 13;
    grid-row: 1 / 3;
    z-index: 1;
    width: calc(100% + var(--bleed));
  }
  .product-closer { grid-column: 2 / 7; grid-row: 2; position: relative; z-index: 2; background: var(--surface-raised); padding-top: var(--space-4); }

  .voices-kicker { grid-column: 1 / 4; }
  .voices-title { grid-column: 4 / 12; }
  .voice-lead { grid-column: 2 / 8; }
  .voice-stack { grid-column: 9 / 13; }

  .cta-kicker { grid-column: 2 / 6; grid-row: 1; }
  .cta-title { grid-column: 2 / 10; grid-row: 2; }
  .cta-body { grid-column: 2 / 8; grid-row: 3; }
  .cta-action { grid-column: 2 / 8; grid-row: 4; }
  .cta-side { grid-column: 12 / 13; grid-row: 1 / 5; }

  .footer-statement { grid-column: 1 / 7; }
  .footer-links { grid-column: 1 / 8; }
  .footer-legal { grid-column: 1 / 6; }
  .footer-disclosures { grid-column: 7 / 13; }

  .legal-section h2 { grid-column: 1 / 4; }
  .legal-section .legal-copy { grid-column: 5 / 12; }
  .legal-hero h1 { grid-column: 3 / 12; }
  .legal-hero .updated,
  .legal-hero .legal-lead { grid-column: 3 / 10; }

  .contact-spec { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pair-a { grid-column: 1 / 8; }
  .pair-b { grid-column: 8 / 13; }
  .pair-c { grid-column: 1 / 5; }
  .pair-d { grid-column: 5 / 13; }
  .pair-e { grid-column: 1 / 4; }
  .pair-f { grid-column: 4 / 8; }
  .pair-g { grid-column: 8 / 13; }
  .contact-closer { grid-column: 4 / 12; }
}

@media (min-width: 1100px) {
  .hero-title { grid-column: 1 / 8; }
  .hero-lede { grid-column: 1 / 6; }
  .hero-intro { grid-column: 1 / 6; }
  .map-title { grid-column: 5 / 12; }
  .t1 { grid-column: 1 / 4; }
  .t2 { grid-column: 4 / 8; }
  .t3 { grid-column: 8 / 13; }
  .t4 { grid-column: 2 / 6; }
  .t5 { grid-column: 7 / 12; }

  .module-juice .module-copy { grid-column: 9 / 13; }
  .module-yoga .module-copy { grid-column: 1 / 4; }
  .module-yoga .void { grid-column: 5 / 9; }
  .module-milk .module-figure { grid-column: 1 / 7; }
  .module-milk .module-copy { grid-column: 9 / 13; }
  .connector-copy { grid-column: 4 / 11; }
  .voice-stack { grid-column: 10 / 13; }
}

@media (max-width: 759px) {
  .chaos > *,
  .legal-section > * {
    grid-column: 1 / -1;
  }

  .identity {
    flex-direction: column;
    align-items: flex-start;
  }

  .advertorial {
    text-align: left;
    max-width: none;
  }

  .module-eggs .module-copy { margin-left: 10%; }
  .module-yoga .module-copy { margin-right: 14%; }
  .module-juice .frame { margin-right: calc(var(--gutter) * -1); }

  .hero-title {
    background: transparent;
  }

  .cta-side {
    writing-mode: horizontal-tb;
    transform: none;
    justify-self: start;
  }

  .footer-word {
    font-size: clamp(2.35rem, 12.2vw, 4.1rem);
  }

  .contact-spec dd {
    font-size: 1.35rem;
  }

  .protocol-index {
    grid-template-columns: 1fr;
  }
}