/* Hero. Struktur: fuldbredde header, tekst i venstre spalte, foto i egen
 * spalte, CTA under teksten. Fotoet står ikke bag teksten, så det mørke
 * overlay fra briefet er ikke nødvendigt her. */
.topbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);width:100%;background:var(--ink-0);border-bottom:1px solid var(--border-soft);padding:var(--space-4) max(var(--space-6), calc((100% - var(--content-max)) / 2))}
.wordmark{display:flex;flex-direction:column;gap:2px;color:var(--ink-900);font-size:var(--text-sm);font-weight:var(--weight-bold);letter-spacing:.22em;text-transform:uppercase;line-height:1}
.wordmark small{font-size:10px;font-weight:var(--weight-regular);letter-spacing:.14em;color:var(--text-muted)}
.nav{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0}
.nav li{white-space:nowrap}
.nav a{color:var(--text-on-light);font-size:var(--text-sm);text-decoration:none}
.nav a:hover{color:var(--cta-on-light)}
.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;border:1px solid var(--border-strong);border-radius:var(--radius);background:transparent;color:var(--ink-900);font-size:20px;cursor:pointer}
.hero{position:relative;background:var(--surface-light);color:var(--text-on-light);padding-bottom:var(--space-16)}
.hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34%);gap:var(--space-12);align-items:center;max-width:var(--content-max);margin:0 auto;padding:var(--space-24) var(--space-6)}
.hero__text{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start}
.hero h1{margin:0;max-width:22ch;font-family:var(--font-heading);font-size:var(--text-display);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:-.015em;text-wrap:pretty}
.hero__lead{margin:0;font-size:var(--text-base);line-height:var(--leading-body);max-width:var(--measure);color:var(--text-on-light)}
.hero__sub{margin:0;font-size:var(--text-h3);font-weight:var(--weight-medium);color:var(--sun-700)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.hero__photo{position:relative;aspect-ratio:4/5;border-radius:var(--radius);background:repeating-linear-gradient(135deg,#EDE7DC 0 14px,#E2DACB 14px 28px)}
.hero__photo::after{content:attr(data-label);position:absolute;right:16px;bottom:16px;font:400 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:#4E574F}
/* Heroens brødtekst er syv afsnit. Første afsnit står i heroen; de øvrige
 * seks ligger i en fortsættelsesblok lige under, sat i to spalter på desktop.
 * Teksten er ikke forkortet — opdelingen er ren layout. */
.herotext{background:var(--surface-light);color:var(--text-on-light);border-top:1px solid var(--border-soft)}
.herotext__inner{max-width:var(--content-max);margin:0 auto;padding:var(--space-12) var(--space-4)}
.herotext__cols{columns:1;column-gap:var(--space-16)}
.herotext p{margin:0 0 var(--space-6);font-size:var(--text-base);line-height:var(--leading-body);max-width:var(--measure);break-inside:avoid}
.herotext p:last-child{margin-bottom:0}
.designnote{margin:var(--space-8) 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.5;color:#4E574F;max-width:var(--measure)}
/* Manglende kildetekst markeres, den skrives ikke. Se indholdsreglen i briefet. */
.todo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5;letter-spacing:.02em;padding:var(--space-4);border:1px dashed var(--border-strong);border-radius:12px;color:#4E574F;background:rgba(255,255,255,.5)}
@media (min-width:768px){
  .herotext__inner{padding:var(--space-16) var(--space-6)}
  .herotext__cols{columns:2}
}
/* Navigationen foldes sammen under 1120px, resten af layoutet først under
 * 768px. Se kommentaren i components/chrome/chrome.css. */
@media (max-width:1119px){
  .nav{display:none}
  .burger{display:inline-flex}
}
@media (max-width:767px){
  .topbar{padding:var(--space-3) var(--space-4)}
  .hero__inner{grid-template-columns:1fr;gap:var(--space-8);padding:var(--space-12) var(--space-4)}
  .hero__photo{order:-1;aspect-ratio:16/9}
  .hero__cta .btn{width:100%}
}