/* Mediabande — styles
   One file, no build step. Tokens first, then sections in page order. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 850;
  font-stretch: 62% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodoni-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --black: #000;
  --paper: #eeeae2;
  --ash: #8f8a81;
  --graphite: #5c5852;
  --pen: #2e46f0;
  --pen-light: #8c9bff;

  --sans: "Archivo", "Arial Narrow", Arial, sans-serif;
  --serif: "Bodoni Moda", Didot, "Times New Roman", serif;

  --gutter: clamp(1rem, 4vw, 3rem);
  --space: clamp(5rem, 13vw, 11rem);

  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-lead: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-h2: clamp(2.25rem, 1.4rem + 4.2vw, 5rem);
  --fs-statement: clamp(3.4rem, 13.5vw, 13.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-stretch: 100%;
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
img, svg { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--pen-light); outline-offset: 4px; }
.paper :focus-visible { outline-color: var(--pen); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--paper); color: var(--black); padding: .6rem 1rem; text-decoration: none;
}
.skip:focus { top: .75rem; }

/* Shared type roles
   statement = the Bande answering (condensed caps)
   voice     = a person speaking (serif italic) */
.statement {
  font-size: var(--fs-statement);
  font-stretch: 62%;
  font-weight: 850;
  line-height: .84;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.voice { font-family: var(--serif); font-style: italic; font-weight: 400; }
.lead { font-size: var(--fs-lead); line-height: 1.35; font-stretch: 90%; }
.dim { color: var(--ash); }

section { padding: var(--space) var(--gutter); position: relative; }
.paper { background: var(--paper); color: var(--black); }

.section-head {
  display: grid; gap: 1rem 3rem; margin-bottom: clamp(3rem, 7vw, 6rem);
}
.section-head h2 {
  font-size: var(--fs-h2); font-stretch: 70%; font-weight: 800; line-height: .95;
}
.section-head p { max-width: 36ch; color: var(--ash); font-size: var(--fs-lead); line-height: 1.35; }
@media (min-width: 900px) {
  .section-head { grid-template-columns: 1fr 1fr; align-items: end; }
}

/* ---------- Bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: 1rem var(--gutter);
  color: var(--paper);
  mix-blend-mode: difference;
}
.wordmark {
  font-stretch: 62%; font-weight: 850; font-size: 1.35rem; letter-spacing: .03em;
  text-transform: uppercase; text-decoration: none; line-height: 1;
}
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 1.75rem; }
.nav a, .bar-cta, .menu-toggle { font-size: var(--fs-small); text-decoration: none; }
.nav a:hover, .bar-cta:hover { text-decoration: underline; text-underline-offset: .3em; }
.bar-cta { font-weight: 700; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.bar-cta:hover { text-decoration: none; }
.nav-call, .menu-toggle { display: none; }

@media (max-width: 899px) {
  .nav, .bar-cta { display: none; }
  .menu-toggle { display: block; margin-left: auto; font-weight: 700; padding: .5rem 0; }
  .bar.is-open { mix-blend-mode: normal; }
  .bar.is-open .nav {
    display: flex; position: fixed; inset: 0; z-index: -1;
    background: var(--black); padding: 6rem var(--gutter) 2rem; align-items: flex-end;
  }
  .bar.is-open .nav ul { flex-direction: column; gap: .25rem; }
  .bar.is-open .nav a {
    font-size: clamp(2.5rem, 13vw, 5rem); font-stretch: 62%; font-weight: 800;
    text-transform: uppercase; line-height: 1;
  }
  .bar.is-open .nav-call { display: block; margin-top: 1.5rem; }
  .bar.is-open .nav-call a { color: var(--pen-light); }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 7rem; padding-bottom: clamp(1.5rem, 4vw, 3rem);
}
.hero-ask {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.35rem, 1rem + 1.9vw, 2.6rem); line-height: 1.2;
  max-width: 28ch; min-height: 2.4em;
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
}
.hero-ask q { quotes: "\201C" "\201D"; transition: opacity .45s ease; }
.hero-ask q.is-out { opacity: 0; }
.hero-title {
  font-size: clamp(4.5rem, min(24.5vw, 37vh), 26rem);
  font-size: clamp(4.5rem, min(24.5vw, 37svh), 26rem);
  font-stretch: 62%; font-weight: 850; line-height: .8; letter-spacing: -.01em;
  text-transform: uppercase;
  margin-left: -.04em;
}
.hero-title .line { display: block; }
.hero-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem;
  margin-top: clamp(1.5rem, 4vw, 3rem); color: var(--ash);
}
.hero-foot p { max-width: 46ch; }
.hero-next { color: var(--paper); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--pen-light); padding-bottom: 2px; }
.hero-next:hover { color: var(--pen-light); }

/* ---------- Idea ---------- */
.idea-text {
  font-size: clamp(1.75rem, 1rem + 3.6vw, 4.25rem);
  font-stretch: 80%; font-weight: 600; line-height: 1.08; letter-spacing: -.01em;
  max-width: 21ch;
}
.idea-text .dim { display: block; margin-top: .6em; }
@media (min-width: 900px) { .idea-text { max-width: 24ch; margin-left: 16.66%; } }

/* ---------- Problem ---------- */
.problem-title {
  font-size: var(--fs-h2); font-stretch: 75%; font-weight: 800; line-height: .98;
  max-width: 16ch; margin-bottom: clamp(3rem, 7vw, 6rem);
}
.chart li {
  font-size: clamp(2.1rem, 8.5vw, 7.5rem);
  font-stretch: 62%; font-weight: 750; line-height: 1.02; text-transform: uppercase;
}
.chart span { position: relative; display: inline-block; transition: color .5s ease .25s; }
.chart span::after {
  content: ""; position: absolute; left: -3%; right: -3%; top: 42%; height: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C70 8 140 15 210 10 S340 12 397 7' fill='none' stroke='%232e46f0' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(0 0 0 0);
  transform: rotate(-1.2deg);
}
.chart li:nth-child(even) span::after { transform: rotate(1deg); top: 46%; }
.chart li:nth-child(3n) span::after { transform: rotate(-2deg); }
/* Without JS everything is already struck. With JS the strike draws in on scroll. */
.chart span { color: var(--graphite); }
.js .chart span { color: var(--black); }
.js .chart span::after { clip-path: inset(0 100% 0 0); transition: clip-path .55s cubic-bezier(.6,.05,.3,1); }
.js .chart li.is-struck span { color: var(--graphite); }
.js .chart li.is-struck span::after { clip-path: inset(0 0 0 0); }

.problem-rest {
  margin-top: clamp(3rem, 7vw, 6rem);
  font-size: clamp(1.75rem, 1rem + 3.4vw, 4rem);
  font-stretch: 80%; font-weight: 750; line-height: 1.05; max-width: 20ch;
}
.problem-rest .voice { display: block; font-weight: 400; color: var(--graphite); font-size: .6em; margin-bottom: .4em; }

/* ---------- Bande ---------- */
.bande-cols { display: grid; gap: 3rem; margin-top: clamp(3rem, 7vw, 6rem); }
.bande-story { display: grid; gap: 1.25rem; max-width: 34em; }
.bande-story p:not(.lead) { color: var(--ash); max-width: 52ch; }
.truths li {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.25rem);
  font-stretch: 75%; font-weight: 700; line-height: 1.15;
}
.truths li + li { margin-top: .35em; }
.truths li:last-child { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--pen-light); }
.bande-coda {
  margin-top: clamp(3rem, 7vw, 6rem);
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2.5rem); line-height: 1.2; color: var(--ash); max-width: 26ch;
}
@media (min-width: 900px) {
  .bande-cols { grid-template-columns: 1.1fr 1fr; gap: 6rem; }
  .bande-coda { margin-left: 50%; }
}

/* ---------- Territories ---------- */
.terr button {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: clamp(3rem, 12.5vw, 12rem);
  font-stretch: 62%; font-weight: 850; line-height: .92; text-transform: uppercase;
  padding: .02em 0;
  transition: color .25s ease;
}
.terr button::after {
  content: "+"; font-stretch: 100%; font-weight: 400; font-size: max(.3em, 1.6rem); line-height: 1;
  transition: transform .3s ease; flex: none;
}
.terr button[aria-expanded="true"]::after { transform: rotate(45deg); }
@media (hover: hover) {
  .terr-list:hover .terr button { color: var(--graphite); }
  .terr-list:hover .terr button:hover,
  .terr-list .terr button[aria-expanded="true"] { color: var(--paper); }
}
.terr-body { padding: .75rem 0 2rem; }
.terr-body p { font-size: var(--fs-lead); line-height: 1.35; max-width: 34ch; color: var(--paper); }
@media (min-width: 900px) { .terr-body p { margin-left: 50%; } }
.terr-more p {
  font-size: clamp(1.75rem, 1rem + 3.2vw, 4rem); line-height: 1.1; color: var(--pen-light);
  margin-top: .5em; max-width: 22ch;
}
.human {
  display: grid; gap: 2rem; margin-top: var(--space);
}
.human-big {
  font-size: clamp(2.6rem, 8vw, 7.5rem); font-stretch: 62%; font-weight: 850;
  line-height: .88; text-transform: uppercase;
}
.human-copy { color: var(--ash); max-width: 38ch; font-size: var(--fs-lead); line-height: 1.35; }
@media (min-width: 900px) {
  .human { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 5rem; }
}

/* ---------- How ---------- */
.how-title {
  font-size: var(--fs-h2); font-stretch: 70%; font-weight: 800; line-height: .98;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
.how-title .voice { font-weight: 400; color: var(--graphite); }
.steps { display: grid; gap: 2.5rem; counter-reset: step; }
.steps li { counter-increment: step; max-width: 30ch; color: var(--graphite); font-size: 1.125rem; }
.steps li::before {
  content: counter(step); display: block;
  font-size: clamp(4rem, 9vw, 8rem); font-stretch: 62%; font-weight: 850; line-height: .9;
  color: var(--pen); margin-bottom: .75rem;
}
.steps strong { display: block; color: var(--black); font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem); font-stretch: 80%; line-height: 1.15; margin-bottom: .35rem; }
.how-model { margin-top: clamp(3rem, 7vw, 6rem); max-width: 40ch; color: var(--graphite); font-size: var(--fs-lead); line-height: 1.35; }
.how-motto { margin-top: 1.5rem; color: var(--black); font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); line-height: 1.05; }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; gap: 3rem 2rem; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Work ---------- */
.cases { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .cases { grid-template-columns: repeat(3, 1fr); } }
.case { padding: 1.5rem; border: 1px dashed var(--graphite); }
.case-flag { color: var(--pen-light); font-size: var(--fs-small); margin-bottom: 1.5rem; }
.case h3 { font-size: 1.75rem; font-stretch: 70%; font-weight: 800; line-height: 1.05; margin-bottom: 1.25rem; }
.case dt { font-size: var(--fs-small); color: var(--ash); margin-top: 1rem; }
.case dd { color: var(--paper); }
html[data-drafts="hide"] [data-placeholder] { display: none; }

/* ---------- Interim ---------- */
.interim .statement { font-size: clamp(3rem, 10.5vw, 10.5rem); max-width: 9ch; }
.interim-copy { display: grid; gap: 1.25rem; margin-top: clamp(2.5rem, 6vw, 5rem); max-width: 36em; }
.interim-copy p:not(.lead) { color: var(--ash); max-width: 52ch; }
@media (min-width: 900px) { .interim-copy { margin-left: 50%; } }

/* ---------- Who ---------- */
.who-head { display: grid; gap: 1.5rem; margin-bottom: clamp(3rem, 7vw, 5rem); }
.who-head h2 { font-size: var(--fs-statement); font-stretch: 62%; font-weight: 850; line-height: .84; text-transform: uppercase; }
.who-answer { font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem); line-height: 1.15; max-width: 24ch; }
.who-note { color: var(--graphite); max-width: 44ch; }
@media (min-width: 900px) {
  .who-head { grid-template-columns: 1fr 1fr; align-items: end; column-gap: 4rem; }
  .who-head h2 { grid-column: 1 / -1; }
}
.book { border-top: 1px solid rgba(0,0,0,.28); }
.book li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,.28);
}
.book-role { font-size: clamp(1.1rem, .9rem + 1.2vw, 2rem); font-stretch: 75%; font-weight: 650; line-height: 1.15; }
.redact {
  position: relative; display: block; height: 1.6rem; width: 78%;
  background: var(--black); cursor: help;
}
.redact.r2 { width: 62%; } .redact.r3 { width: 86%; } .redact.r4 { width: 54%; }
.redact.r5 { width: 70%; } .redact.r6 { width: 92%; }
.redact::after {
  content: "Ask us."; position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--paper);
  opacity: 0; transition: opacity .2s ease;
}
:lang(de) .redact::after { content: "Fragt uns."; }
.redact:hover::after,.redact:focus-visible::after { opacity: 1; }
.book-draft .book-role { color: var(--pen); font-size: var(--fs-small); font-stretch: 100%; font-weight: 400; }
@media (min-width: 900px) { .book li { grid-template-columns: 1fr 1fr; gap: 4rem; padding: 1.25rem 0; } }

/* ---------- Call ---------- */
main.call { padding: 6rem var(--gutter) var(--space); }
.call { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; }
.call-title .line { display: block; }
.call-title .line:first-child {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 3.5vw, 4.5rem); line-height: 1.1; margin-bottom: .3em;
}
.call-title .line:last-child {
  font-size: clamp(3.2rem, 12vw, 12.5rem); font-stretch: 62%; font-weight: 850; line-height: .84;
  text-transform: uppercase; max-width: 14ch;
}
.call-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem;
  margin-top: clamp(2.5rem, 6vw, 5rem);
}
.call-foot p { color: var(--ash); max-width: 30ch; }
.call-mail {
  font-size: clamp(1.4rem, 1rem + 3vw, 4.25rem); font-stretch: 75%; font-weight: 800; line-height: 1.1;
  text-decoration: none; border-bottom: .08em solid var(--pen-light); overflow-wrap: anywhere;
  transition: color .2s ease;
}
.call-mail:hover { color: var(--pen-light); }

/* ---------- Footer ---------- */
.foot {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
  padding: 1.5rem var(--gutter) 2rem; color: var(--ash); font-size: var(--fs-small);
}
.foot a { text-underline-offset: .25em; }
.foot a:hover { color: var(--paper); }

/* ---------- Legal page ---------- */
.legal { padding: 8rem var(--gutter) var(--space); max-width: 46rem; }
.legal h1 { font-size: var(--fs-h2); font-stretch: 70%; font-weight: 800; line-height: .95; margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.35rem; font-stretch: 80%; margin: 2.5rem 0 .75rem; }
.legal p { color: var(--ash); max-width: 62ch; }
.legal p + p { margin-top: .75rem; }
.legal .placeholder { color: var(--pen-light); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}