/* ============================================================
   KINN STUDIO — samlet stylesheet
   Alle sider linker hertil. Ret her, så slår det igennem overalt.

   INDHOLD
   1. Font
   2. Variabler
   3. Grundstil
   4. Header
   5. Footer
   6. Fælles elementer (placeholders, billedbånd, tilbage-link)
   7. Forside (index.html)
   8. Work (work.html)
   9. Lab (lab.html)
  10. About + Studio — fælles masthead
  11. About (about.html)
  12. Studio (studio.html)
  13. Case (cases/*.html)
  14. Journal (journal/*.html)
  15. Responsivt
   ============================================================ */


/* ---------- 1. Font ---------------------------------------- */
/* Marist Variable — samme skrifttype som forlægget, fra Cargos type-CDN */
@font-face {
  font-display: block;
  font-family: "Marist Variable";
  src: url("https://type.cargo.site/files/CargoMaristVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 350 900;
}
@font-face {
  font-display: block;
  font-family: "Marist Variable";
  src: url("https://type.cargo.site/files/CargoMaristItalicVariable.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 350 900;
}


/* ---------- 2. Variabler ----------------------------------- */
:root {
  --bg: rgb(249, 249, 244);
  --ink: #624C73;                        /* al tekst */
  --ink-soft: rgba(98, 76, 115, 0.62);   /* dæmpet tekst — samme farve, lavere styrke */
  --pad: 21px;            /* sidemargen */
  --gap: 41px;            /* mellemrum i forsidens grid */
  --rule: 1px solid rgba(0, 0, 0, 0.14);
  --radius: 3px;          /* afrunding på billeder */
}


/* ---------- 3. Grundstil ----------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Marist Variable", "Times New Roman", serif;
  font-weight: 350;
  font-variant-numeric: oldstyle-nums;   /* minuskeltal som i forlægget */
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

figure { margin: 0; }


/* ---------- 4. Header -------------------------------------- */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: baseline;
  padding: 11px var(--pad);
  font-size: 24px;
  line-height: 28px;
  text-transform: lowercase;
  z-index: 10;
  background: var(--bg);
}
header .logo {
  flex: 0 0 auto;
  text-transform: uppercase;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.3px;   /* hvileværdi; near.js åbner den op mod 0.8px, når markøren nærmer sig */
}
/* Menuen centreres på siden — uafhængigt af logoets og contact-linkets bredde */
header nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
header .contact { flex: 0 0 auto; margin-left: auto; }

/* Sider med fullsize-billede i toppen: hvid menu hen over billedet,
   som skifter til mørk, når man scroller forbi (klassen sættes af JS) */
header.over-hero {
  background: transparent;
  color: #fff;
  transition: color 0.3s ease;
}
header.over-hero.scrolled { color: var(--ink); }

/* Sprogvælger: to links til samme side på det andet sprog (engelsk i roden, dansk i
   da/). Skrives af lav-seo.py ud fra sideparrene, så den altid matcher hreflang.
   Det aktuelle sprog er markeret med aria-current */
header .lang { flex: 0 0 auto; margin-left: 28px; }
header .lang a { opacity: 0.55; }
header .lang a:hover { opacity: 1; }
header .lang a[aria-current] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}


/* ---------- 5. Footer -------------------------------------- */
footer {
  padding: 120px var(--pad) 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 16px;
  line-height: 18px;
  text-transform: lowercase;
}
footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  text-transform: uppercase;
}
footer .footer-mark { height: 34px; width: auto; }
.footer-right {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 40px;
  margin-left: auto;
}
/* Privatliv og tilgængelighed: samme dæmpede streg som resten af footeren */
.legal a { display: inline-block; line-height: 24px; }   /* trykflade på mindst 24 px (WCAG 2.5.8) */
.legal a + a::before { content: ", "; }
.contact-fine .legal { margin-right: 32px; }


/* ---------- 6. Fælles elementer ---------------------------- */
/* Work: listen over alle udstillinger nederst på siden (lav-cv.py + work-cv.txt).
   Samme hoved som lab-siden (.section-head), rækker som journalen: år i etiketspalten,
   titel, sted og vores rolle. Rollen står dæmpet, så det er tydeligt, når det kun var en del */
.cv { padding: 120px var(--pad) 0; }
.cv-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1.4fr) minmax(0, 1fr);   /* rollen er skjult indtil videre, se .cv-role */
  column-gap: 40px;
  align-items: baseline;
  padding: 14px 0;
  border-top: var(--rule);
  font-size: 16px;
  line-height: 24px;
}
.cv-row:last-child { border-bottom: var(--rule); }
.cv-year { font-variant-numeric: oldstyle-nums; color: var(--ink-soft); }
.cv-title a { text-decoration: none; }
.cv-title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cv-role { display: none; color: var(--ink-soft); }   /* rollen (hele udstillingen eller en del) ligger i work-cv.txt; slet display:none og giv .cv-row en fjerde kolonne, når den skal vises */
@media (max-width: 800px) {
  .cv { padding-top: 80px; }
  .cv-row { grid-template-columns: 60px 1fr; row-gap: 2px; }
  .cv-year { grid-row: 1 / 3; }
}

/* Oplæsning: lille lyd-knap ved de længere tekster (read.js sætter den ind
   ved elementer med data-read, lyden ligger i audio/ og laves med ./tts.py) */
.read {
  display: flex;                   /* egen linje under teksten, også inde i en <p> */
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 14px;
  padding: 0;
  border: 1px solid rgba(98, 76, 115, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.read svg { width: 15px; height: 15px; display: block; }
.read:hover, .read.playing { color: var(--ink); border-color: var(--ink); }
.masthead .lead .read { margin-top: 18px; }
.alt-step .read { margin-top: 10px; }

/* Placeholder-flader — udskift med rigtige billeder */
.ph { display: block; width: 100%; border-radius: var(--radius); }
.ph-a { aspect-ratio: 4 / 5; background: linear-gradient(160deg, #d9d5c9, #b8b2a2); }
.ph-b { aspect-ratio: 3 / 2; background: linear-gradient(200deg, #cfd2cd, #9aa09a); }
.ph-c { aspect-ratio: 1 / 1; background: linear-gradient(150deg, #dcd8cf, #aba491); }
.ph-d { aspect-ratio: 4 / 5; background: linear-gradient(190deg, #cdc8bb, #948d7d); }
.ph-person { aspect-ratio: 2 / 3; background: linear-gradient(170deg, #d9d5c9, #a8a294); }

/* Gradient-pladsholdere i grids (forside + work) */
.placeholder { display: block; }
.p1 { background: linear-gradient(160deg, #d9d5c9, #b8b2a2); }
.p2 { background: linear-gradient(200deg, #cfd2cd, #9aa09a); }
.p3 { background: linear-gradient(140deg, #e2ddd2, #c4baa6); }
.p4 { background: linear-gradient(180deg, #c9c2b4, #8f8878); }
.p5 { background: linear-gradient(150deg, #dcd8cf, #aba491); }
.p6 { background: linear-gradient(210deg, #d4d0c6, #a8a294); }
.p7 { background: linear-gradient(170deg, #e0dbd1, #beb5a3); }
.p8 { background: linear-gradient(190deg, #cdc8bb, #948d7d); }

/* Billedbånd (about + studio) */
.band {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 60px var(--pad) 80px;
}
.band img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* Tilbage-link (case + journal) */
.back-link {
  display: block;
  text-align: center;
  padding: 40px 0 60px;
  font-size: 24px;
  text-transform: lowercase;
}

/* Afsluttende udsagn (about + studio). Teksten står centreret på siden som
   mastheadets lead, mens sektionen selv er fuld bredde, så skillelinjen
   flugter med de øvrige streger på siden. */
.closing {
  padding: 120px var(--pad) 40px;
}
.closing.ruled { border-top: var(--rule); }
.closing p {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  font-size: 32px;
  line-height: 40px;
}
.closing a {
  white-space: nowrap;   /* CTA'en må ikke knække midt over, når teksten centreres */
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}


/* ---------- 7. Forside ------------------------------------- */
.brand { text-transform: uppercase; }

/* Fullsize billede med crossfade mellem slides */
.hero-image {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.hero-image > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-image > img.active { opacity: 1; }
/* Forsidefilm: stumt loop, plakat indtil den er klar. Overlayet (::after) lægger
   ét jævnt sort lag over hele filmen, ingen gradient i toppen, så menuen står
   med kontrast også på lyse klip. Skru på 0.55 for mere eller mindre mørke */
.hero-image video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
/* Korn oven på det mørke lag: et SVG-støjmønster (feTurbulence) som baggrund,
   lagt direkte over billedet, så det læses som mat filmkorn. Laget er større end feltet og flyttes i hop hvert 1/12 sekund,
   så kornet lever som på film. Skru på opacity for mere eller mindre korn; den
   sidste feColorMatrix strammer kontrasten i støjen, så kornet står tydeligt. */
.hero-image::before {
  content: "";
  position: absolute;
  inset: -30%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feColorMatrix type='matrix' values='2.4 0 0 0 -0.7  0 2.4 0 0 -0.7  0 0 2.4 0 -0.7  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 260px 260px;
  opacity: 0.09;
  mix-blend-mode: normal;   /* overlay/soft-light drukner i de mørke flader */
  z-index: 1;
  pointer-events: none;
  animation: korn 1s steps(1) infinite;
}
@keyframes korn {
  0%   { transform: translate(0, 0); }
  8%   { transform: translate(-3%, 2%); }
  17%  { transform: translate(2%, -4%); }
  25%  { transform: translate(-5%, -1%); }
  33%  { transform: translate(4%, 3%); }
  42%  { transform: translate(-2%, 5%); }
  50%  { transform: translate(5%, -3%); }
  58%  { transform: translate(-4%, -5%); }
  67%  { transform: translate(1%, 4%); }
  75%  { transform: translate(-1%, -2%); }
  83%  { transform: translate(3%, 1%); }
  92%  { transform: translate(-3%, -3%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-image::before { animation: none; }
}
/* Tekst midt over forsidefilmen, i sidens serif, hvid, over overlay og korn */
.hero-text {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  text-align: center;
  color: #fff;
  pointer-events: none;
}
/* Selve linjen fanger musen, så liquid-effekten kan slå til; feltet omkring gør ikke */
.hero-text .line { display: inline-block; pointer-events: auto; cursor: default; }
.hero-text .line {
  font-size: clamp(18px, 1.9vw, 28px);
  line-height: 1.3;
  font-weight: 350;
  text-transform: lowercase;
  letter-spacing: 0.2px;
}
.hero-text .line em { font-style: italic; }
.hero-text .sub {
  margin-top: 18px;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.4;
  font-style: italic;
  opacity: 0.85;
}

/* Den galopperende, bevingede hest midt over filmen: images/horse-galop.webp,
   samme animerede webp som på workshoppens slutslide (43 billeder, looper af sig
   selv), nedskaleret fra workshop/billeder/hest-galop.webp. Hvid gennem
   #white-recolor (inline SVG i index.html); slår filtret fejl, står den i sin
   oprindelige sorte. Spejlvendt, så den løber mod højre som på slidet. */
.hero-horse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 220px;
  aspect-ratio: 1672 / 1419;   /* webp'ens eget format */
  z-index: 2;
  pointer-events: none;
}
.hero-horse img {
  display: block;
  height: 100%;
  width: auto;
  filter: url("#white-recolor");
  transform: scaleX(-1);
}

/* Intro med hest-mærket */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 160px 0;
}
.hero .mark {
  position: relative;
  display: block;
  height: 76px;
  aspect-ratio: 568.71 / 814.03;
  margin-bottom: 44px;
  opacity: 0.88;
}
.hero .mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Ikonet er ét samlet path, så vingen "klippes fri" som eget lag og roterer fra vingeroden */
.mark-body { clip-path: polygon(0 0, 52% 0, 52% 29.5%, 100% 29.5%, 100% 100%, 0 100%); }
.mark-wing {
  clip-path: polygon(52% 0, 100% 0, 100% 29.5%, 52% 29.5%);
  transform-origin: 64% 29%;
  animation: flap 3.6s ease-in-out infinite;
}
@keyframes flap {
  0%, 55%, 100% { transform: rotate(0deg); }
  62% { transform: rotate(-11deg); }
  70% { transform: rotate(2deg); }
  78% { transform: rotate(-9deg); }
  86% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mark-wing { animation: none; }
}
.hero p {
  max-width: 1150px;
  padding: 0 var(--pad);
  font-size: 32px;
  line-height: 38px;
  text-align: center;
}
.hero .name {
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.hero em { font-style: italic; }

/* Selected work */
.work-header {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 0 var(--pad) 10px;
  text-transform: lowercase;
}
.work-header h2 {
  font-size: 32px;
  line-height: 38px;
  font-weight: 350;
  text-transform: uppercase;
}
.work-header a { font-size: 24px; line-height: 28px; }

/* Projektgrid — skiftevis stort og lille billede */
.grid { padding: 0 var(--pad); }
.grid .row {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
  margin-bottom: 42px;
}
.grid .row .large { width: 57%; }
.grid .row .small { width: calc(43% - var(--gap)); }
.grid .row.flip { flex-direction: row-reverse; }

.grid figure a { display: block; }
.grid figure a:hover { text-decoration: none; }
.grid .frame {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #e8e6dd;
}
.grid .large .frame,
.grid .small .frame { aspect-ratio: 3 / 4; }
.grid .frame img, .grid .frame .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
/* Hover skifter til billede nr. 2 i stedet for understregning */
.grid .frame .hover-img { opacity: 0; transition: opacity 0.25s ease; }
.grid figure a:hover .frame .hover-img { opacity: 1; }

.grid figcaption {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0.1px;
}
.grid figcaption .cap-title {
  text-transform: lowercase;
  font-variant-caps: small-caps;
}
.grid figcaption .cap-address { font-style: italic; }

/* Proof under introen: én sætning, etiket i små kapitæler, navnene linker */
.hero .proof-now {
  margin-top: 48px;
  font-size: 20px;
  line-height: 30px;
}
.hero .proof-now .label {
  color: var(--ink-soft);
  text-transform: lowercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.2px;
}
.hero .proof-now a:hover { text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Proof-strip mellem griddet og journalen: Søfarers anmeldelser på én linje
   mellem to hårfine streger. Skråstregerne sættes af CSS, så de forsvinder,
   når linjen brydes på mobil */
.proof-strip {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 24px var(--pad) 0;
  padding: 26px 0 24px;
  border-top: var(--rule);
  border-bottom: var(--rule);
  font-size: 20px;
  line-height: 28px;
  text-align: center;
}
.proof-strip .title {
  text-transform: lowercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.2px;
  margin-right: 28px;
}
.proof-strip .item + .item::before {
  content: "/";
  color: var(--ink-soft);
  margin: 0 16px;
}
.proof-strip .stars { letter-spacing: 2px; }
.proof-strip .label {
  color: var(--ink-soft);
  text-transform: lowercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.2px;
}

/* Journal */
.journal { padding: 160px var(--pad) 0; position: relative; }
/* Ikonet ligger som et lag oven på stregen — den lyse baggrund bag ikonet
   afbryder linjen, så den ikke skærer gennem tegningen */
.journal-mark {
  position: absolute;
  top: 234px;
  right: 13%;
  width: 95px;
  padding: 14px 18px;
  box-sizing: content-box;
  background: var(--bg);
  pointer-events: none;
  z-index: 2;   /* over stregerne, som selv ligger i lag 1 */
}
.journal-mark img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  animation: journal-sway 9s ease-in-out infinite alternate;
}
@keyframes journal-sway {
  from { transform: rotate(-6deg); }
  to   { transform: rotate(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .journal-mark img { animation: none; transform: rotate(-4deg); }
}
.journal h2, .journal .entry { position: relative; z-index: 1; }
.journal h2 {
  font-size: 32px;
  line-height: 38px;
  font-weight: 350;
  text-transform: lowercase;
  margin-bottom: 34px;
}
.journal .entry {
  display: flex;
  gap: 40px;
  align-items: baseline;
  padding: 18px 0;
  border-top: var(--rule);
}
.journal .entry:last-child { border-bottom: var(--rule); }
.journal .date {
  flex: 0 0 130px;
  font-size: 16px;
  letter-spacing: 0.1px;
  color: var(--ink-soft);
}
.journal .entry p { flex: 1; min-width: 0; font-size: 20px; line-height: 27px; }   /* min-width: 0, ellers skubber lange ord pilen ud over kanten på mobil */
/* Ikonet ligger nu oven på entry-rækkerne, og dets baggrund er uigennemsigtig.
   Teksten skal derfor stoppe før det, ellers forsvinder ord bag tegningen, når
   linjerne bliver lange på mellemstore skærme. Reserverer ikonets zone:
   13% svarer til dets right-værdi, de 80px til dets bredde plus luft. */
@media (min-width: 801px) {
  .journal .entry p { padding-right: calc(13% + 80px); }
}
.journal a.entry { display: flex; }
.journal a.entry:hover { text-decoration: none; }
.journal .arrow {
  flex: 0 0 auto;
  align-self: center;
  font-size: 20px;
  transition: transform 0.2s ease;
}
.journal a.entry:hover .arrow { transform: translateX(6px); }


/* ---------- 8. Work --------------------------------------- */
.archive {
  padding: 200px var(--pad) 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(45px, 3.4vw, 65px);
  row-gap: 70px;
  align-items: start;
}
.archive figure a { display: block; }
.archive figure a:hover { text-decoration: none; }
/* Alle billeder ens: 4:5 som originalens arkiv */
.archive img, .archive .placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.archive .frame { position: relative; display: block; }
.archive .frame .hover-img {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.archive figure a:hover .hover-img { opacity: 1; }
.archive figcaption {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0.1px;
}
.archive .cap-title {
  text-transform: lowercase;
  font-variant-caps: small-caps;
}
.archive .cap-address { font-style: italic; }


/* ---------- 9. Lab ---------------------------------------- */
/* Arkiv-grid: alle elementer har SAMME bredde, mens højden følger
   billedets eget format. Rækkerne flugter i toppen, så underkanten
   bliver den levende linje. Tæt vandret, luftigt lodret.
   Nye filer føjes bare til — ingen komposition pr. billede. */
.feed {
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* altid højst 6 kolonner */
  column-gap: 12px;
  row-gap: 64px;
  align-items: start;
  padding: 180px var(--pad) 0;
}
.feed .tile {
  display: flex;
  flex-direction: column;
  gap: 8px;   /* titlen står over billedet */
}
.feed .tile img, .feed .tile video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.feed figcaption {
  font-size: 13px;
  line-height: 17px;
  letter-spacing: 0.1px;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  display: none;   /* titlerne er skjult indtil videre; slet linjen for at vise dem igen */
}
.feed .tile img, .feed .tile video { cursor: zoom-in; }
.feed .tile:hover img, .feed .tile:hover video { opacity: 0.92; }

/* Egne projekter — studiets egne værktøjer, over feedet. Én række i fuld bredde
   pr. projekt, som journalen på forsiden: navn, én linje, domæne. Ligger uden for
   LAB-markørerne, så process-lab.sh ikke rører den. */
.own { padding: 180px var(--pad) 0; }
/* Fælles hoved for lab-sidens to blokke (egne projekter + opslagstavlen):
   etiket i den faste 200px-spalte, indledningen i samme spalte som rækkernes
   beskrivelser nedenfor, så alt flugter lodret */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 40px;
  padding-bottom: 44px;
}
/* Blokoverskrift, ikke etiket: større og i almindelige små bogstaver, altså
   uden de små kapitæler, som about/studio bruger i samme spalte */
.section-head .label {
  flex: 0 0 200px;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0.1px;
  text-transform: lowercase;
}
.section-head p {
  flex: 1;
  /* Rummer den længste sætning i egne projekter (813px) på én linje, så den
     indledning bliver to linjer på store skærme, én pr. sætning */
  max-width: 860px;
  font-size: 20px;
  line-height: 30px;
}
/* Feedets overskrift er én linje i fuld bredde, ikke etiket plus tekst som
   egne projekter. Datolinjen står over for den, højrestillet på samme grundlinje,
   så den ikke koster højde. Hovedet bærer afstanden ned til billederne, som
   derfor nulstilles */
.feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
  padding: 110px var(--pad) 44px;
}
/* "last updated" — en puls, ikke en animation man ser på. Prikken slår langsomt,
   som et tegn på at tavlen stadig lever, og linjen toner op første gang den ses.
   .armed sættes af JS, så linjen står synlig, hvis scriptet ikke kører */
.last-updated {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 17px;
  letter-spacing: 0.1px;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  color: var(--ink-soft);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.last-updated.armed { opacity: 0; transform: translateY(6px); }
.last-updated.armed.in { opacity: 1; transform: none; }
.last-updated .dot {
  position: relative;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.5;
}
/* Ringen udgår fra prikken og forsvinder — den ligger i et pseudoelement, så
   selve prikken bliver stående, hvis animationen slås fra */
.last-updated .dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: 0;
}
.last-updated.in .dot::after { animation: lab-pulse 3.6s ease-out 1s infinite; }
@keyframes lab-pulse {
  0%        { transform: scale(1);   opacity: 0.45; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}
/* Bevægelsen stopper, linjen og prikken bliver stående */
@media (prefers-reduced-motion: reduce) {
  .last-updated { transition: none; }
  .last-updated.armed { opacity: 1; transform: none; }
  .last-updated.in .dot::after { animation: none; }
}

.feed-head h1, .feed-head h2 {
  max-width: 1000px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 350;
  letter-spacing: 0.1px;
  text-transform: lowercase;
}
.feed-head + .feed { padding-top: 0; }
.own-item {
  display: flex;
  align-items: baseline;
  gap: 40px;
  padding: 18px 0;
  border-top: var(--rule);
}
.own-item:last-child { border-bottom: var(--rule); }
.own-item:hover { text-decoration: none; }
.own-name {
  flex: 0 0 200px;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.2px;
  font-size: 18px;
}
/* Mindre end indledningen: rækkerne er en liste, ikke brødtekst */
.own-item p { flex: 1; font-size: 17px; line-height: 24px; }
.own-url {
  flex: 0 0 auto;
  font-size: 15px;
  letter-spacing: 0.1px;
  color: var(--ink-soft);
}
.own .arrow {
  flex: 0 0 auto;
  font-size: 20px;
  transition: transform 0.2s ease;
}
.own-item:hover .arrow { transform: translateX(6px); }

/* Plus-markør: følger musen hen over fliserne og folder sig ud fra et kryds.
   Hvide streger i difference-blend står lyse på mørke fotos og mørke på baggrunden. */
body.has-plus .feed .tile img,
body.has-plus .feed .tile video { cursor: none; }
.plus-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  translate: -100px -100px;
  transform: scale(0.4) rotate(-45deg);
  transition: opacity 0.18s ease, transform 0.34s cubic-bezier(0.2, 0.9, 0.2, 1);
  mix-blend-mode: difference;
}
.plus-cursor::before,
.plus-cursor::after {
  content: "";
  position: absolute;
  background: #fff;
}
.plus-cursor::before { left: 50%; top: 0; width: 1.5px; height: 100%; margin-left: -0.75px; }
.plus-cursor::after { top: 50%; left: 0; height: 1.5px; width: 100%; margin-top: -0.75px; }
.plus-cursor.on { opacity: 1; transform: scale(1) rotate(0deg); }
/* Minus i lightboxen: den lodrette streg klapper sammen om midten */
.plus-cursor::before { transition: height 0.28s cubic-bezier(0.2, 0.9, 0.2, 1), top 0.28s cubic-bezier(0.2, 0.9, 0.2, 1); }
.plus-cursor.minus::before { height: 0; top: 50%; }
.plus-cursor.minus { z-index: 30; }   /* over lightboxen (z 20) */
body.has-plus .lightbox { cursor: none; }

/* Lightbox — klik på en flise for at se den stor */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  padding: 40px;
  background: rgba(249, 249, 244, 0.97);
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img, .lightbox video {
  display: block;
  max-width: 88vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
}
.lightbox .lb-caption {
  font-size: 13px;
  letter-spacing: 0.1px;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  display: none;   /* følger fliserne: titlerne er skjult indtil videre */
}


/* ---------- 10. About + Studio: masthead ------------------- */
/* Ens yderkolonner = midterkolonnen står præcis centreret på siden */
.masthead {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 810px) minmax(200px, 1fr);
  gap: 60px;
  align-items: start;
  padding: 190px var(--pad) 120px;
}
.page-title {
  font-size: clamp(34px, 5vw, 70px);
  line-height: 1.06;
  font-weight: 350;
  text-transform: lowercase;
}
.masthead .lead {
  font-size: 32px;
  line-height: 40px;
  text-align: center;
}
.masthead .lead em { font-style: italic; }
/* Sidespalten strækkes til rækkens højde, som sættes af lead-teksten (tegningen
   ligger absolut og tæller derfor ikke med). Så kan hesten centreres lodret om
   netop teksten — også når tegningen er højere end den — mens titlen bliver
   liggende i toppen. */
.masthead .side {
  position: relative;
  align-self: stretch;
}

/* Etiket-kolonne i alle redaktionelle rækker (about + studio + lab) */
.chapter .label,
.people .label,
.intro .label,
.process .label {
  flex: 0 0 200px;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.1px;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  color: var(--ink);
}


/* ---------- 11. About ------------------------------------- */
.chapter {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 44px var(--pad) 52px;
  border-top: var(--rule);
}
.chapter .body { flex: 1 1 460px; max-width: 760px; }
.chapter .media { flex: 1 1 260px; max-width: 440px; margin-left: auto; }
.chapter .body p { font-size: 20px; line-height: 30px; }
.chapter .body p + p { margin-top: 20px; }
.chapter .body em { font-style: italic; }

/* Founders — de to portrætter tæt sammen, med ultrakort resumé og
   read more-link til hver sin bio-side (eva.html / jeppe.html) */
.people {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 44px var(--pad) 60px;
  border-top: var(--rule);
}
.people .portraits { flex: 1; display: flex; gap: 40px; }
.people figure { flex: 1 1 0; max-width: 340px; }
.people img, .people .ph { display: block; width: 100%; border-radius: var(--radius); }
.people img { aspect-ratio: 2 / 3; object-fit: cover; }
.people figcaption {
  padding-top: 12px;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.1px;
  color: var(--ink);
}
.people .name { display: block; text-transform: lowercase; font-variant-caps: small-caps; }
.people .role { display: block; font-style: italic; }
.people .mini { margin-top: 8px; font-size: 16px; line-height: 24px; }
/* Cool people: samme opsætning som founders, tre mindre portrætter. Flora er en
   stregtegning i --ink (mask) på en let tonet flade, så den står som de andre */
.people.crew figure { max-width: 220px; }
.people .drawing {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  background: rgba(98, 76, 115, 0.07);
  position: relative;
  overflow: hidden;
}
.people .drawing i {
  position: absolute;
  inset: var(--inset, 14% 12%);   /* tegningens luft i rammen, kan sættes pr. portræt */
  background: var(--ink);
  -webkit-mask: var(--pic) center / contain no-repeat;   /* stien sættes inline på span.drawing */
  mask: var(--pic) center / contain no-repeat;
}
.people#founders { scroll-margin-top: 60px; }   /* "Back to about" fra bio-siderne lander her, under menuen */
.people .read-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 16px;
  text-transform: lowercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Bio-siderne (eva.html / jeppe.html): kapitel-layout med portræt i
   mediaspalten og kompetenceliste med stille tankestreger i margenen */
.chapter .media img, .chapter .media .ph { display: block; width: 100%; border-radius: var(--radius); }
.bio-full ul { list-style: none; margin-top: 20px; }
.bio-full ul + p { margin-top: 20px; }
.bio-full li { font-size: 20px; line-height: 30px; padding-left: 22px; position: relative; }
.bio-full li + li { margin-top: 10px; }
.bio-full li::before { content: "–"; position: absolute; left: 0; }

/* Privatliv og tilgængelighed (privacy.html, accessibility.html og da/): kapitler som
   bio-siderne. Links i brødteksten er understreget, så de kan ses uden farveforskel */
.legal-page .body ul { list-style: none; margin-top: 20px; }
.legal-page .body ul + p { margin-top: 20px; }
.legal-page .body li { font-size: 20px; line-height: 30px; padding-left: 22px; position: relative; }
.legal-page .body li + li { margin-top: 10px; }
.legal-page .body li::before { content: "–"; position: absolute; left: 0; }
.legal-page .body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-page .body .updated { margin-top: 40px; font-size: 16px; line-height: 24px; color: var(--ink-soft); }
.legal a[aria-current] { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }


/* ---------- 12. Studio ------------------------------------ */
/* Hesten er en webp-stregtegning i næsten sort på gennemsigtig bund. For at få
   den i tekstfarven bruges tegningen som maske for en flade i --ink i stedet
   for at vise billedet direkte — derfor et tomt element med fast kvadratformat
   (filen er 440×440). Uden maske-understøttelse vises intet, frem for en
   massiv firkant. */
/* Hesten er en bitmap (webp) i næsten sort på gennemsigtig bund. Den farves om
   til tekstfarven med SVG-filtret #ink-recolor, der er defineret i studio.html.
   Bevidst valgt frem for en CSS-maske: slår filtret fejl, står tegningen bare i
   sin oprindelige sorte — den kan ikke forsvinde. */
.masthead .horse {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  filter: url("#ink-recolor");
}
/* Holder filtrets farve i sync med resten af sitet (reserve står i studio.html) */
#ink-recolor feFlood { flood-color: var(--ink); }

.intro {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 44px var(--pad) 100px;
  border-top: var(--rule);
}
.intro .body { flex: 1 1 460px; max-width: 760px; }
.intro .body p { font-size: 20px; line-height: 30px; }
.intro .body p + p { margin-top: 20px; }
.intro .media, .process .media { flex: 1 1 260px; max-width: 440px; margin-left: auto; }
.intro .media img, .process .media img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

.services-head {
  padding: 0 var(--pad) 34px;
  font-size: 32px;
  line-height: 38px;
  font-weight: 350;
  text-transform: uppercase;
}
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  column-gap: 80px;
  padding: 0 var(--pad);
}
.service {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 22px 0 24px;
  border-top: var(--rule);
}
.service .no {
  flex: 0 0 34px;
  font-size: 14px;
  letter-spacing: 0.1px;
  color: var(--ink-soft);
}
.service .text { flex: 1; }
/* Serviceikoner: hesten i tolv situationer, tegnet i Sketch (KINN.sketch, siden
   "Hjemmeside") og eksporteret som SVG til images/services/. Farves med --ink via
   CSS-mask, så SVG-filerne kan blive rene (fill: currentColor). */
.service .icon {
  flex: 0 0 88px;
  height: 70px;
  align-self: flex-start;
  margin-top: 2px;
  background: var(--ink);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
.service h3 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 350;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.2px;
}
.service p {
  font-size: 16px;
  line-height: 23px;
  color: var(--ink);
  padding-top: 4px;
}

.process {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 110px var(--pad) 40px;
  margin-top: 60px;
  border-top: var(--rule);
}
.process .body { flex: 1 1 460px; max-width: 760px; }
.process .body p { font-size: 20px; line-height: 30px; }
.process .body p + p { margin-top: 20px; }

/* Studio-siden har billedbånd tættere på indholdet */
.band.tight { padding: 80px var(--pad) 0; }


/* ---------- 12b. Contact ----------------------------------- */
/* Oplysninger øverst til højre, mærket nede til venstre, småt nederst til højre */
/* Siden fylder præcis ét skærmbillede — aldrig scroll */
.contact-page {
  position: relative;   /* ankerpunkt for den flyvende konvolut */
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 40px;
  row-gap: 0;          /* mellemrummet klares af 1fr-rækken */
  padding: max(150px, 19vh) var(--pad) 40px;
}
/* To højrestillede spalter: adresser og mennesker — yderste flugter med "contact" */
.contact-details {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  gap: 64px;
  font-size: 24px;
  line-height: 34px;
  text-align: right;
}
/* Freelance-opfordring i venstre spalte, ud for kontaktoplysningerne */
.contact-freelance {
  grid-column: 1;
  grid-row: 1;
  max-width: 560px;
  font-size: 24px;
  line-height: 34px;
}
.contact-freelance .invite { font-size: 32px; line-height: 40px; margin-bottom: 34px; }   /* invitationen til museer, over freelance-afsnittet, i lead-størrelsen */
.contact-freelance .who {
  display: block;
  margin-bottom: 6px;
}

.contact-col p + p { margin-top: 34px; }
.contact-col p + p.social { margin-top: 72px; }   /* ekstra luft ned til sociale links */
.contact-details a:hover { text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Kontakt-ikonet nede til venstre. SVG'en er inline i contact.html, fordi den er
   eksporteret med separate paths (#Horse, #Phone, #Winge) — så kan hver del
   animere om sit eget led i stedet for at blive klippet ud af en firkant. */
.contact-mark {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  display: block;
  width: clamp(170px, 31vh, 310px);   /* skrumper på lave skærme, så alt kan være der */
  height: auto;
  overflow: visible;
}
/* transform-box: fill-box gør, at origin regnes ud fra delens egen omkreds */
.contact-mark #Winge,
.contact-mark #Phone {
  transform-box: fill-box;
}
/* Vingen drejer om midten af den flade, hvor den rører kroppen (målt: x 464–608,
   y 196–253 i SVG'ens koordinater = 24% 92% af vingens egen omkreds).
   Samlingen er 144px bred, så selv små vinkler åbner en sprække i enderne —
   derfor er udslaget holdt nede. */
.contact-mark #Winge {
  transform-origin: 24% 92%;
  animation: wing-flutter 8s ease-in-out infinite;
}
/* Telefonen ryster om sin fod */
.contact-mark #Phone {
  transform-origin: 45% 96%;
  animation: phone-ring 8s ease-in-out infinite;
}
/* Telefonen ringer i starten af cyklussen */
@keyframes phone-ring {
  0%, 15%, 100% { transform: rotate(0deg); }
  2%  { transform: rotate(-2.6deg); }
  4%  { transform: rotate(2.4deg); }
  6%  { transform: rotate(-2deg); }
  8%  { transform: rotate(1.6deg); }
  10% { transform: rotate(-1.1deg); }
  12% { transform: rotate(0.5deg); }
}
/* Vingen flakker midtvejs — små udslag, så samlingen ikke åbner sig */
@keyframes wing-flutter {
  0%, 46%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-4.5deg); }
  54% { transform: rotate(1.2deg); }
  58% { transform: rotate(-3.2deg); }
  62% { transform: rotate(0.8deg); }
  66% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-mark #Winge, .contact-mark #Phone { animation: none; }
}

/* Flyvende konvolut. SVG'en er inline (Heste/Envelope.svg) med vingerne som
   separate paths, så de kan baske om deres eget led. Konvolutten krydser
   sidens tomme midterbånd i to højder, med pauser ude i kulissen —
   z-index -1 lægger den bag teksten, så den aldrig dækker noget. */
.contact-envelope {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: clamp(90px, 10vw, 150px);
  color: var(--ink);
  pointer-events: none;
  animation: env-fly 36s linear infinite;
  /* Banens tre flyvehøjder. Scriptet i contact.html måler tekstblokkene og
     overskriver dem, så konvolutten holder sig i det frie rum uanset
     skærmstørrelse — uden JS gælder disse defaults (passer bredt desktop). */
  --env-y-in: 48vh;     /* indflyvning til venstre: under freelance-teksten, over hesten */
  --env-y-peak: 24vh;   /* toppen af korridoren mellem blokkene */
  --env-y-low: 64vh;    /* det lave bånd under begge blokke */
}
.contact-envelope svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  animation: env-bob 1.7s ease-in-out infinite alternate;  /* duver mens den flyver */
}
.contact-envelope #Wing-left,
.contact-envelope #Wing-right {
  transform-box: fill-box;
}
/* Vingerne drejer om den flade, hvor de rører konvolutten (venstre vinge sidder
   fast i sin højre kant, højre vinge i sin venstre) — små udslag, så samlingen
   ikke åbner sig. Basketakten er hurtig oven på den langsomme flyvebane. */
.contact-envelope #Wing-left {
  transform-origin: 97% 55%;
  animation: env-flap-left 0.85s ease-in-out infinite;
}
.contact-envelope #Wing-right {
  transform-origin: 3% 72%;
  animation: env-flap-right 0.85s ease-in-out infinite;
}
/* Banen: to gennemflyvninger uden om tekstblokkene (no-go-zoner). Første
   passage stiger op gennem korridoren mellem blokkene (kun når scriptet har
   målt, at den findes — ellers er --env-y-peak lig --env-y-low, og turen
   bliver en flad passage under alt) og dykker ned igen før højre spalte.
   Anden passage bliver i det lave bånd. De tætte keyframe-par (53/53.01 og
   99/99.01) teleporterer konvolutten tilbage til venstre, mens den er ude
   af billedet. */
@keyframes env-fly {
  0%     { transform: translate(-30vw, var(--env-y-in)) rotate(6deg); }
  6%     { transform: translate(-30vw, var(--env-y-in)) rotate(6deg); }
  12%    { transform: translate(2vw, calc(var(--env-y-in) + 8px)) rotate(-4deg); }
  20%    { transform: translate(26vw, var(--env-y-in)) rotate(3deg); }
  26%    { transform: translate(38vw, calc(var(--env-y-in) - 6px)) rotate(-3deg); }
  33%    { transform: translate(45vw, var(--env-y-peak)) rotate(-5deg); }
  38%    { transform: translate(52vw, var(--env-y-peak)) rotate(2deg); }
  44%    { transform: translate(55vw, calc((var(--env-y-peak) + var(--env-y-low)) / 2)) rotate(-3deg); }
  48%    { transform: translate(57vw, var(--env-y-low)) rotate(4deg); }
  53%    { transform: translate(112vw, calc(var(--env-y-low) + 6px)) rotate(8deg); }
  53.01% { transform: translate(-30vw, calc(var(--env-y-in) + 10px)) rotate(6deg); }
  62%    { transform: translate(-30vw, calc(var(--env-y-in) + 10px)) rotate(6deg); }
  70%    { transform: translate(4vw, var(--env-y-in)) rotate(-4deg); }
  78%    { transform: translate(30vw, calc(var(--env-y-low) + 6px)) rotate(4deg); }
  86%    { transform: translate(52vw, calc(var(--env-y-low) + 16px)) rotate(-3deg); }
  93%    { transform: translate(74vw, var(--env-y-low)) rotate(3deg); }
  99%    { transform: translate(112vw, calc(var(--env-y-low) + 8px)) rotate(6deg); }
  99.01% { transform: translate(-30vw, var(--env-y-in)) rotate(6deg); }
  100%   { transform: translate(-30vw, var(--env-y-in)) rotate(6deg); }
}
@keyframes env-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}
@keyframes env-flap-left {
  0%, 100% { transform: rotate(7deg); }
  50%      { transform: rotate(-11deg); }
}
@keyframes env-flap-right {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(11deg); }
}
@media (prefers-reduced-motion: reduce) {
  /* Brevet holder stille i stedet for at forsvinde — samme princip som sitets
     øvrige tegninger. Uden animationen har elementet ingen transform og ville
     lande i øverste venstre hjørne, så det parkeres eksplicit i det frie bånd,
     som scriptet har målt sig frem til. */
  .contact-envelope,
  .contact-envelope svg,
  .contact-envelope #Wing-left,
  .contact-envelope #Wing-right { animation: none; }
  .contact-envelope { transform: translate(var(--env-park-x, 46vw), var(--env-park-y, var(--env-y-low))) rotate(-3deg); }
}

.contact-fine {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: end;
  text-align: right;
  text-transform: lowercase;
  font-size: 16px;
  line-height: 24px;
  font-variant-numeric: oldstyle-nums;
}

@media (max-width: 800px) {
  /* På mobil får siden lov at være højere end skærmen igen */
  .contact-page {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    padding-top: 130px;
    gap: 60px;
  }
  .contact-details {
    grid-column: 1;
    flex-direction: column;
    gap: 34px;
    font-size: 20px;
    line-height: 30px;
  }
  .contact-freelance { grid-column: 1; grid-row: 2; max-width: none; font-size: 20px; line-height: 30px; }
  .contact-freelance .invite { font-size: 24px; line-height: 32px; }
  .contact-envelope { display: none; }  /* siden må scrolle her, så banen ville give vandret scroll */
  .contact-mark { grid-column: 1; grid-row: 3; width: 130px; align-self: start; }
  .contact-fine { grid-column: 1; grid-row: 4; justify-self: start; text-align: left; }
  .contact-page { grid-template-rows: auto auto auto auto; }
}


/* ---------- 13. Case -------------------------------------- */
.case-hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.case-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(rgba(0, 0, 0, 0.35), transparent);
  z-index: 1;
  pointer-events: none;
}
.case-hero img, .case-hero video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Lydknap nederst til højre i hero'en, samme snit som "play" på filmene.
   Ligger over overlayet (::after har ingen z-index) */
.case-hero .hero-sound {
  position: absolute;
  right: var(--pad);
  bottom: var(--pad);
  z-index: 2;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--bg);
  font: inherit;
  font-size: 24px;
  line-height: 30px;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.2px;
  cursor: pointer;
}
.case-hero .hero-sound:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Tilvalg: .case-hero.dim lægger ét jævnt sort lag over hele hero'en og slår
   gradienten i toppen fra, så mørket er ens fra kant til kant. Styrken sættes i
   --dim på selve elementet, fx style="--dim: 0.6". */
.case-hero.dim::before { display: none; }
.case-hero.dim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--dim, 0.5));
  pointer-events: none;
}

.case-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 160px var(--pad);
  text-align: center;
}
.case-title {
  font-size: 32px;
  line-height: 38px;
  font-weight: 350;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.2px;
}
.case-venue { font-style: italic; font-size: 24px; line-height: 30px; margin-top: 6px; }
.case-year { font-size: 20px; margin-top: 4px; }
.case-text { max-width: 1150px; font-size: 32px; line-height: 38px; margin-top: 72px; }
.case-text em { font-style: italic; }

.case-facts {
  display: flex;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
  padding: 0 var(--pad) 120px;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.1px;
}
.case-facts .label {
  display: block;
  color: var(--ink-soft);
  text-transform: lowercase;
  font-variant-caps: small-caps;
}

/* Som originalen: forskudte par, lille + stort billede, centreret mod hinanden */
.case-images { padding: 0 var(--pad) 42px; }
.case-images .pair {
  display: flex;
  gap: 6.6%;
  align-items: center;
  margin-bottom: 83px;
}
.case-images .pair .small { width: 37.8%; }
.case-images .pair .large { width: 55.6%; }
.case-images .pair img { display: block; width: 100%; height: auto; }
.case-images .pair.single .large { width: 100%; }   /* ét billede i fuld bredde */
.case-images .pair.even .half { width: 46.7%; }     /* to lige brede, ubeskårne (samme 6.6 % mellemrum) */

/* Vores rolle: fast blok under fakta på alle cases. Etiket i små kapitæler, én linje
   med skråstreger, og en valgfri sætning under (.note) */
.case-role {
  padding: 0 var(--pad) 120px;
  margin-top: -64px;   /* samme afstand til fakta som fakta har indbyrdes */
  text-align: center;
  font-size: 20px;
  line-height: 28px;
}
.case-role .label {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.1px;
  color: var(--ink-soft);
  text-transform: lowercase;
  font-variant-caps: small-caps;
}
.case-role .note { margin-top: 6px; font-style: italic; }

/* Anmeldelser: avis i små kapitæler over stjerner/hjerter, samme tone som fakta */
.case-reviews {
  display: flex;
  justify-content: center;
  gap: 28px 64px;
  flex-wrap: wrap;
  padding: 0 var(--pad) 120px;
  margin-top: -56px;   /* tættere på fakta-rækken end på billederne */
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.1px;
  text-align: center;
}
.case-reviews .label {
  display: block;
  color: var(--ink-soft);
  text-transform: lowercase;
  font-variant-caps: small-caps;
}
.case-reviews .stars { letter-spacing: 2px; }
.case-reviews .stars .empty { color: var(--ink-soft); opacity: 0.45; }   /* ikke-givne stjerner */
.case-reviews .quote { font-style: italic; }

/* Udstillingsfilm: plakat med "play", browserens knapper først efter klik */
.case-film { padding: 0 var(--pad) 90px; }
.case-film .film-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.case-film video { display: block; width: 100%; height: auto; }
.case-film .film-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: var(--pad);
  background: transparent;
  color: var(--bg);
  font: inherit;
  font-size: 24px;
  line-height: 30px;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.2px;
  text-align: left;
  display: flex;
  align-items: flex-end;   /* mærkatet står i nederste venstre hjørne, ikke over ansigtet */
  cursor: pointer;
  transition: opacity 0.25s ease;
}
.case-film .film-play:hover { text-decoration: underline; text-underline-offset: 3px; }
.case-film.playing .film-play { opacity: 0; pointer-events: none; }
.case-film figcaption {
  padding-top: 12px;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.1px;
}
.case-film .credit { display: block; color: var(--ink-soft); }

/* Skuespillerskærme: tre stående film side om side, hver med plakat og "play"
   som .case-film. Intet indlæses (preload=none), før der klikkes. */
.case-films { padding: 0 var(--pad) 120px; }
.case-films .films-text {
  max-width: 640px;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 42px;
}
.case-films .films {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
}
/* Alle skuespillerskærme: 7 kolonner x 2 rækker af stående stillbilleder under de tre film */
.case-films .cast-text {
  max-width: 600px;
  margin: 90px auto 0;
  text-align: center;
  font-size: 18px;
  line-height: 27px;
}
.case-films .cast {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
  margin-top: 34px;
}
.case-films .cast img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius); }
.case-films .film-frame, .case-bts .film-frame, .case-behind .film-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.case-films video, .case-bts video, .case-behind video { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-films .film-play, .case-bts .film-play, .case-behind .film-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: var(--pad);
  background: transparent;
  color: var(--bg);
  font: inherit;
  font-size: 24px;
  line-height: 30px;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.2px;
  text-align: left;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  transition: opacity 0.25s ease;
}
.case-films .film-play:hover, .case-bts .film-play:hover, .case-behind .film-play:hover { text-decoration: underline; text-underline-offset: 3px; }
.case-films .film.playing .film-play, .case-bts .film.playing .film-play, .case-behind .film.playing .film-play { opacity: 0; pointer-events: none; }
.case-films figcaption, .case-bts figcaption, .case-behind figcaption {
  padding-top: 12px;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.1px;
}
.case-films .name, .case-bts .name, .case-behind .name { display: block; text-transform: lowercase; font-variant-caps: small-caps; }
.case-films .where, .case-bts .where { display: block; font-style: italic; color: var(--ink-soft); }

/* Variation: billeder i grupper pr. installation, ubeskårne i eget format.
   Hver gruppe har titel + tekst i to spalter (som mastheadets 37.8/55.6) og
   derunder et 2-spaltet grid; ved ulige antal fylder det første hele bredden. */
.case-groups { padding: 0 var(--pad) 42px; }
.case-groups .group { margin-bottom: 140px; }
.case-groups .group-head {
  display: flex;
  gap: 6.6%;
  align-items: flex-start;
  margin-bottom: 42px;
}
.case-groups .group-head h2 {
  width: 37.8%;
  flex: none;
  font-size: 32px;
  line-height: 38px;
  font-weight: 350;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.2px;
}
.case-groups .group-text { max-width: 640px; font-size: 20px; line-height: 30px; }
.case-groups .group-text p + p { margin-top: 18px; }
.case-groups .group-text .meta { color: var(--ink-soft); font-size: 16px; line-height: 22px; }
.case-groups .group-text em { font-style: italic; }
.case-groups .group-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.case-groups .group-images figure.full { grid-column: 1 / -1; }
.case-groups .group-images img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
/* .wide: to billeder i samme række tvinges til 16:9, så de står lige høje */
.case-groups .group-images figure.wide img { aspect-ratio: 16 / 9; object-fit: cover; }
/* .square: bredt + stående i samme række mødes i 1:1 */
.case-groups .group-images figure.square img { aspect-ratio: 1 / 1; object-fit: cover; }

/* Tegn Amok: få billeder, så siden bærer på typografi og udstillingens eget greb.
   .case-numbers: udstillingen i tal, store minuskeltal med etiket under.
   .case-line: udstillingens gule linje i eget farve, som billederne "hænger" fra;
   rækkerne flugter i toppen mod linjen, bundkanten er fri som på en snor. */
.case-numbers {
  display: flex;
  justify-content: center;
  gap: 40px 72px;
  flex-wrap: wrap;
  padding: 0 var(--pad) 140px;
  margin-top: -48px;
  text-align: center;
}
.case-numbers .num {
  display: block;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  font-weight: 350;
  font-variant-numeric: oldstyle-nums;
  letter-spacing: 0.2px;
}
.case-numbers .label {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink-soft);
  text-transform: lowercase;
  font-variant-caps: small-caps;
}
.case-line { padding: 0 var(--pad) 120px; }
.case-line .line-text {
  max-width: 640px;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 42px;
}
.case-line .hang {
  --linje: #b0b800;   /* aflæst fra billederne af udstillingens tape-linje */
  border-top: 4px solid var(--linje);
  padding-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.case-line .hang.four { grid-template-columns: repeat(4, 1fr); }
.case-line .hang img, .case-line .hang video { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.case-line .hang figure a { display: block; }
.case-line .hang figure a:hover { text-decoration: none; }
.case-line .hang figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }
.case-line .hang figcaption {
  padding-top: 10px;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink-soft);
  text-transform: lowercase;
  font-variant-caps: small-caps;
}

/* Citat fra museet, centreret som intro-teksten, og en liste af opslag bygget
   som journalens rækker (dato | én linje | pil) */
.case-quote {
  display: flex;
  justify-content: center;
  padding: 0 var(--pad) 120px;
  text-align: center;
}
.case-quote blockquote { max-width: 900px; margin: 0; }
.case-quote p { font-size: 32px; line-height: 38px; font-style: italic; }
.case-quote cite {
  display: block;
  margin-top: 22px;
  font-style: normal;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink-soft);
  text-transform: lowercase;
  font-variant-caps: small-caps;
}
.case-posts { padding: 0 var(--pad) 120px; }
.case-posts .posts-head {
  font-size: 16px;
  line-height: 22px;
  color: var(--ink-soft);
  text-transform: lowercase;
  font-variant-caps: small-caps;
  margin-bottom: 8px;
}
.case-posts ul { list-style: none; margin: 0; padding: 0; }
.case-posts li a {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 16px 0;
  border-top: var(--rule);
  font-size: 20px;
  line-height: 28px;
}
.case-posts li:last-child a { border-bottom: var(--rule); }
.case-posts li a:hover { text-decoration: none; }
.case-posts li a:hover .what { text-decoration: underline; text-underline-offset: 3px; }
.case-posts .date { color: var(--ink-soft); font-size: 16px; font-variant-numeric: oldstyle-nums tabular-nums; }
.case-posts .arrow { color: var(--ink-soft); }

/* Bag kulisserne: kvadratisk film (samme play-greb som skærmene) med tekst ved
   siden af, derunder et tæt grid af procesbilleder, alle i 2:3. */
.case-bts { padding: 0 var(--pad) 120px; }
.case-bts .bts-top {
  display: flex;
  gap: 6.6%;
  align-items: center;
  margin-bottom: 64px;
}
.case-bts .bts-top .film { width: 37.8%; flex: none; }
.case-bts .film-frame { aspect-ratio: 1 / 1; }
/* Teaseren ligger oven på den rigtige film og looper stumt; ved klik skjules den */
.case-bts video.teaser {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.case-bts .film.playing video.teaser { display: none; }
.case-bts .film-play { z-index: 2; }
.case-bts .bts-text {
  max-width: 640px;
  font-size: 20px;
  line-height: 30px;
}
.case-bts .bts-title {
  font-size: 32px;
  line-height: 38px;
  font-weight: 350;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.2px;
  margin-bottom: 22px;
}
.case-bts .bts-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 12px;
  row-gap: 12px;
  align-items: stretch;
}
/* Stående fliser i 2:3 sætter rækkehøjden; de brede (.wide) spænder over to
   kolonner og strækkes til samme højde, beskåret mod midten. */
.case-bts .bts-grid figure { min-width: 0; }
.case-bts .bts-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.case-bts .bts-grid figure.wide { grid-column: span 2; }
.case-bts .bts-grid figure.wide img { aspect-ratio: auto; height: 100%; }

/* Bag om udstillingen: overskrift, intro og to film i 16:9 side om side, hver
   med titel, tekst og kreditering. Samme play-greb som skærmene. */
.case-behind { padding: 0 var(--pad) 120px; }
.case-behind .behind-title {
  font-size: 32px;
  line-height: 38px;
  font-weight: 350;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.2px;
  margin-bottom: 22px;
}
.case-behind .behind-text {
  max-width: 640px;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 42px;
}
.case-behind .films {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  align-items: start;
}
.case-behind .film-frame { aspect-ratio: 16 / 9; }
.case-behind .film-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-behind .film-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.case-behind figcaption p { margin: 6px 0 8px; font-size: 16px; line-height: 22px; }
.case-behind figcaption .credit { display: block; color: var(--ink-soft); }

/* Krediteringer under billederne: samme opsætning som fakta-rækken,
   etiket over navn, én eller flere blokke centreret */
.case-credit {
  display: flex;
  justify-content: center;
  gap: 28px 64px;
  flex-wrap: wrap;
  padding: 0 var(--pad) 42px;
  text-align: center;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.1px;
}
.case-credit .label {
  display: block;
  color: var(--ink-soft);
  text-transform: lowercase;
  font-variant-caps: small-caps;
}


/* ---------- 14. Journal ----------------------------------- */
.post {
  max-width: 720px;
  margin: 0 auto;
  padding: 220px var(--pad) 80px;
}
.post .date {
  display: block;
  font-size: 16px;
  letter-spacing: 0.1px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.post h1 {
  font-size: 32px;
  line-height: 38px;
  font-weight: 350;
  text-transform: lowercase;
  margin-bottom: 36px;
}
.post p { font-size: 20px; line-height: 30px; margin-bottom: 22px; }
.post .post-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 36px 0;
}
.post .post-figure { margin: 36px 0; }
.post .post-figure .post-image { margin: 0; }
.post .post-figure figcaption {
  padding-top: 10px;
  font-size: 16px;
  line-height: 22px;
  color: var(--ink-soft);
}


/* ---------- 15. Responsivt -------------------------------- */

/* Mellemstore skærme: sidekolonner falder fra */
@media (max-width: 1180px) {
  .masthead { gap: 40px; }
  .masthead .horse { width: 170px; }
  /* Bio-sidernes portræt (.bio-chapter) er indhold, ikke pynt — det bliver */
  .chapter:not(.bio-chapter) .media, .intro .media, .process .media { display: none; }
  .feed { grid-template-columns: repeat(4, 1fr); }
  /* Overskriften kræver ~1080px for at stå på én linje ved siden af datoen.
     Under det lægger datoen sig over den igen (column-reverse, fordi h2 står
     først i markuppen), så overskriften får hele bredden */
  .feed-head { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
}

/* Proof-strippen stables, før linjen ellers ville knække med en løs skråstreg */
@media (max-width: 1000px) {
  .proof-strip { flex-direction: column; align-items: center; gap: 4px; }
  .proof-strip .title { margin: 0 0 6px; }
  .proof-strip .item + .item::before { content: none; }
}

/* Mobil */
@media (max-width: 800px) {
  header { font-size: 18px; line-height: 22px; flex-wrap: wrap; }
  header nav { position: static; transform: none; flex: 1; }
  /* Mastheadet falder til én spalte her (se .studio-page og .about-page), så hesten
     skal tilbage i flowet samtidig. Bliver den absolut, lægger den sig oven i
     lead-teksten i vinduer mellem 600 og 800 px */
  .masthead .side { position: static; }
  .masthead .horse {
    position: static;
    translate: none;
    width: 170px;
    margin-inline: auto;
  }
}

/* Små telefoner (iPhone mini og lignende): logo og contact på første linje, menuen
   på sin egen linje under, venstrestillet som teksten. Ingen menuknap, alt er synligt */
@media (max-width: 600px) {
  header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    row-gap: 4px;
    padding: 12px var(--pad) 10px;
    font-size: 18px;
    line-height: 24px;
  }
  header .logo { grid-row: 1; grid-column: 1; font-size: 16px; }
  header .contact { grid-row: 1; grid-column: 2; margin-left: 0; justify-self: end; }
  header nav { grid-row: 2; grid-column: 1; position: static; transform: none; text-align: left; flex: none; }
  header .lang { grid-row: 2; grid-column: 2; margin-left: 0; justify-self: end; }

  /* Forside */
  .hero p { font-size: 24px; line-height: 30px; }
  .hero .proof-now { margin-top: 36px; font-size: 18px; line-height: 27px; }
  .proof-strip { font-size: 18px; line-height: 26px; }
  .grid .row, .grid .row.flip { flex-direction: column; gap: 32px; margin-bottom: 32px; }
  .grid .row .large, .grid .row .small { width: 100%; }
  .work-header { flex-wrap: wrap; padding-bottom: 32px; }
  .journal-mark { width: 92px; top: 92px; right: 6%; }
  .journal .entry { gap: 16px; }

  /* Work */
  .archive {
    padding-top: 120px;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 21px;
    row-gap: 40px;
  }

  /* Lab */
  .feed {
    padding-top: 120px;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 10px;
    row-gap: 40px;
  }
  /* Mobil: navn og tekst under hinanden, domænet klarer linket, pilen ryger ud */
  .own { padding-top: 120px; }
  /* Etiketten arver flex-basis 200px fra den fælles regel. I en kolonne er det
     en HØJDE, ikke en bredde, så den skal nulstilles her */
  .section-head { flex-direction: column; gap: 14px; padding-bottom: 32px; }
  .section-head .label { flex: none; }
  .section-head p { font-size: 18px; line-height: 27px; }
  .feed-head { padding-top: 70px; }
  .own-item { flex-wrap: wrap; gap: 4px 16px; }
  .own-name { flex: 0 0 100%; }
  .own-item p { flex: 0 0 100%; font-size: 16px; line-height: 23px; }
  /* Linjeskiftet i indledningen er sat til brede skærme, mobil brydes af sig selv */
  .own-head br { display: none; }
  .own .arrow { display: none; }

  /* About + Studio */
  .masthead { grid-template-columns: 1fr; gap: 24px; padding: 130px var(--pad) 70px; }
  .masthead .lead, .closing p { font-size: 24px; line-height: 32px; }
  /* Hesten er sin egen række fra 800px (se blokken ovenfor), her bliver den mindre */
  .masthead .horse { width: 160px; }
  .chapter, .people, .intro, .process { flex-direction: column; gap: 14px; }
  .chapter .label, .people .label, .intro .label, .process .label { flex: none; }
  .chapter .body p { font-size: 18px; line-height: 27px; }
  .people .portraits { flex-wrap: wrap; gap: 24px; }
  .people.crew figure { flex: 1 1 140px; max-width: 200px; }
  .bio-full li, .legal-page .body li { font-size: 18px; line-height: 27px; }
  .bio-chapter .media { margin-left: 0; max-width: 340px; }  /* portræt under teksten på mobil */
  .services { grid-template-columns: 1fr; column-gap: 0; }
  .band { flex-direction: column; }
  .band figure { width: 100% !important; margin-left: 0 !important; }

  /* Case */
  .case-text { font-size: 24px; line-height: 30px; }
  .service .icon { flex-basis: 56px; height: 44px; }
  .case-films .cast { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }
  .case-films .cast-text { margin-top: 60px; font-size: 17px; line-height: 26px; }
  .case-images .pair { flex-direction: column; gap: 32px; margin-bottom: 32px; }
  .case-images .pair .small, .case-images .pair .large, .case-images .pair.even .half { width: 100%; }
  .case-facts { gap: 32px; }
  .hero-horse { height: 140px; }
  .hero-text .sub { margin-top: 12px; }
  .case-reviews { gap: 32px; margin-top: -24px; padding-bottom: 64px; }
  .case-role { margin-top: -32px; padding-bottom: 64px; font-size: 18px; line-height: 26px; }
  .case-film { padding-bottom: 64px; }
  .case-film .film-play { font-size: 20px; }
  .case-hero .hero-sound { font-size: 20px; }
  .case-groups .group { margin-bottom: 80px; }
  .case-groups .group-head { flex-direction: column; gap: 16px; margin-bottom: 24px; }
  .case-groups .group-head h2 { width: auto; }
  .case-groups .group-text { font-size: 18px; line-height: 27px; }
  .case-groups .group-images { grid-template-columns: 1fr; gap: 16px; }
  .case-numbers { gap: 28px 40px; padding-bottom: 80px; margin-top: -24px; }
  .case-quote { padding-bottom: 64px; }
  .case-quote p { font-size: 24px; line-height: 30px; }
  .case-posts { padding-bottom: 64px; }
  .case-posts li a { grid-template-columns: 1fr auto; font-size: 18px; line-height: 26px; }
  .case-posts .date { grid-column: 1 / -1; }
  .case-line { padding-bottom: 64px; }
  .case-line .line-text { font-size: 18px; line-height: 27px; margin-bottom: 24px; }
  .case-line .hang, .case-line .hang.four { grid-template-columns: 1fr; gap: 16px; }
  .case-bts { padding-bottom: 64px; }
  .case-bts .bts-top { flex-direction: column; align-items: stretch; gap: 32px; margin-bottom: 32px; }
  .case-bts .bts-top .film { width: 100%; }
  .case-bts .bts-text { font-size: 18px; line-height: 27px; }
  .case-bts .bts-grid { grid-template-columns: repeat(2, 1fr); }
  .case-behind { padding-bottom: 64px; }
  .case-behind .films { grid-template-columns: 1fr; gap: 32px; }
  .case-behind .behind-text { font-size: 18px; line-height: 27px; margin-bottom: 24px; }
  .case-films { padding-bottom: 64px; }
  .case-films .films { grid-template-columns: 1fr; gap: 32px; }
  .case-films .films-text { font-size: 18px; line-height: 27px; }

  /* Journal */
  .post { padding-top: 160px; }
  .post h1 { font-size: 26px; line-height: 32px; }
}

/* Smal mobil */
@media (max-width: 560px) {
  .feed { grid-template-columns: repeat(2, 1fr); }
}

/* Skjult overskrift: usynlig, men læses af skærmlæsere og søgemaskiner.
   Bruges til h1 på sider uden synlig hovedoverskrift (work, contact). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 16. Studio: tekstopsætning ------------------- */
/* Opsætning af studio.html (fra 03.09.2026; den tidligere opsætning ligger i arkiv/studio-2026-09-03.html).
   Grundidé: manchet og tekst flugter på samme venstrekant, teksten i én spalte på 600 px (ca. 70 tegn), afsnit og linjer på
   samme 30 px-rytme, procesteksten som fire nummererede felter på servicelistens grid,
   og billederne som brede bånd mellem afsnittene i stedet for små felter ved teksten. */
/* Fælles venstrekant: en label-spalte (--col) + 40 px luft. Manchetten i toppen og
   teksten under "How we work" begynder begge efter den, så de flugter. */
.studio-page { --col: 300px; }   /* label-spaltens bredde; teksten begynder efter den + 40 px */
.studio-page .masthead {
  grid-template-columns: var(--col) minmax(0, 810px) minmax(200px, 1fr);
  gap: 40px;
}
.studio-page .masthead .lead { text-align: left; text-wrap: pretty; }

.alt-block {
  display: grid;
  grid-template-columns: var(--col) minmax(0, 600px);
  column-gap: 40px;
  margin: 0 var(--pad);            /* stregen følger indholdets bredde, ikke vinduets */
  padding: 44px 0 90px;
  border-top: var(--rule);
}
.alt-block .label {
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.1px;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  color: var(--ink);
  padding-top: 6px;
}
.alt-block .body p {
  font-size: 20px;
  line-height: 30px;
  text-wrap: pretty;
}
.alt-block .body p + p { margin-top: 30px; }

.alt-band { padding: 0 var(--pad); }
.alt-band img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}
.alt-band + .services-head { padding-top: 110px; }

/* Processen: samme opsætning som "How we work" (label i sidespalten, streg i
   indholdets bredde), og teksten som fire nummererede felter i to spalter fra samme
   venstrekant. 18/28 giver ca. 55 tegn pr. linje. */
.alt-process {
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr);
  column-gap: 40px;
  margin: 60px var(--pad) 0;
  padding: 44px 0 40px;
  border-top: var(--rule);
}
.alt-process .label {
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0.1px;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  color: var(--ink);
  padding-top: 6px;
}
.alt-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-auto-flow: column;          /* læses nedad: 01 og 02 til venstre, 03 og 04 til højre */
  column-gap: 60px;
}
.alt-step {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 0 0 40px;
}
.alt-step .no { flex: 0 0 34px; font-size: 14px; letter-spacing: 0.1px; color: var(--ink-soft); }
.alt-step p { flex: 1; font-size: 18px; line-height: 28px; text-wrap: pretty; }
.alt-process + .alt-band { padding-top: 30px; }
.alt-band + .closing { padding-top: 100px; }

@media (max-width: 800px) {
  .studio-page .masthead { grid-template-columns: 1fr; gap: 24px; }
  .alt-block { grid-template-columns: 1fr; row-gap: 14px; padding: 34px 0 60px; }
  .alt-block .body p { font-size: 18px; line-height: 28px; }
  .alt-block .body p + p { margin-top: 28px; }
  .alt-band img { aspect-ratio: 4 / 3; }
  .alt-band + .services-head { padding-top: 70px; }
  .alt-process { grid-template-columns: 1fr; row-gap: 14px; margin-top: 40px; padding: 34px 0 20px; }
  .alt-steps { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .alt-step p { font-size: 17px; line-height: 26px; }
}

/* ---------- 17. About: tekstopsætning -------------------- */
/* Opsætning af about.html (fra 03.09.2026; den tidligere ligger i arkiv/about-2026-09-03.html).
   Samme regler som studio.html:
   label-spalte (--col) + 40 px luft som fælles venstrekant for manchet, tekst og
   portrætter; tekst i 600 px; streger i indholdets bredde; billeder som brede bånd.
   Genbruger .alt-block og .alt-band fra style.css (sektion 16). */
.about-page { --col: 300px; }
.about-page .masthead {
  grid-template-columns: var(--col) minmax(0, 810px) minmax(200px, 1fr);
  gap: 40px;
}
.about-page .masthead .lead { text-align: left; text-wrap: pretty; }
.about-page .alt-block { padding-bottom: 60px; }
.about-page .alt-block:last-of-type { padding-bottom: 90px; }
.about-page .alt-band + .alt-block { margin-top: 90px; }
.about-page .alt-block .body em { font-style: italic; }

/* Founders på samme grid: label i sidespalten, portrætterne fra venstrekanten */
.about-page .people {
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr);
  column-gap: 40px;
  margin: 0 var(--pad);
  padding: 44px 0 90px;
  border-top: var(--rule);
}
.about-page .people .label { flex: none; }

/* Afslutningen: stregen i indholdets bredde */
.about-page .closing.ruled { margin: 0 var(--pad); padding-left: 0; padding-right: 0; }

@media (max-width: 800px) {
  .about-page .masthead { grid-template-columns: 1fr; gap: 24px; }
  .about-page .people { grid-template-columns: 1fr; row-gap: 14px; padding: 34px 0 60px; }
  .about-page .alt-band + .alt-block { margin-top: 50px; }
}