/* Tokens: Desktop-first baseline (=1440px) */
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* Chrome ligature fix */

  /* Colors and Spacing */
  --bg: hsl(0, 0%, 97%);
  --text: #000000;
  --muted: #a3a3a3;
  --card: #eaeaea;
  --accent: #00d64c;
  --gutter: 20px;
  --pad-x: 20px;
  --pad-top: 16px;
  --pad-bottom: 8px;
  --radius: 0px;
  --radius-card: 2px;
  --cursor-size: 16px;
  --cursor-color: var(--accent);
  --left-column-width: calc(2 * ((100% - (7*var(--gutter)) - (2*var(--pad-x))) / 8) + var(--gutter));

  /* Line-heights */
  --lh-global: 1.5;
  --lh-project: 1.5;

  /* Font-size baseline */
  --fs-body: 0.875rem;

  /* Brand and Bio */
  --fs-brand: 1.25rem;
  --fs-bio: 0.85rem;
  --brand-size: var(--fs-brand);
  --brand-lh: var(--lh-global);
  --bio-lh: var(--lh-global);

  /* Left navigation */
  --fs-nav-link: 1.25rem;

  /* Landing / Work overview */
  --fs-home-filter: 1.2rem;
  --fs-home-card-title: 1.25rem;
  --fs-home-card-description: 1.0rem;
  --fs-home-hover-label: 1.15rem;
  --hover-label-color: #fff;
  --hover-label-bg: rgba(21,21,28,0.9);
  --hover-label-pad-y: 4px;
  --hover-label-pad-x: 8px;
  --hover-label-radius: 6px;

  /* Project detail pages */
  --fs-project-title: 1.8rem;


  /* Contact page */
  --fs-contact-left-text: 2.0rem;
  --fs-contact-left-mail: 2.0rem;
  --fs-contact-form-label: 1.5rem;
  --fs-contact-form-input: 1.5rem;
  --fs-contact-submit: 1.5rem;
  --fs-contact-status: 0.95rem;
  
  /* Project detail typography */
  --fs-project-subtitle: 1.1rem;
  --fs-project-info: 1.1rem;
  --fs-project-chapter-headline: 1.0rem;
  --fs-project-chapter-body: 1.0rem;
  --fs-project-comment: 1.0rem;

  /* Left column spacing */
  --gap-left-bio-links: 70px;
  --gap-left-links-filter: 560px;

  /* Typography - Simplified system */
  --fw-regular: 420;
  --fw-heavy: 550;
  --fw-light: 380;

  /* New size tokens */
  /* Home */
  --fs-home-link: var(--fs-nav-link);
  --fs-home-brand: var(--fs-brand);
  --fs-home-bio: var(--fs-bio);
  --fs-home-project-title: var(--fs-home-card-title);
  --fs-home-project-tag: 0.85rem;
  --fs-home-project-hover: var(--fs-home-project-title);
  /* About */
  --fs-about-statement: var(--fs-about-intro);
  --fs-about-info: var(--fs-about-section);
  --fs-about-small-title: var(--fs-about-label);
  /* Contact */
  --fs-contact-big: var(--fs-contact-left-text);
  --fs-contact-form: var(--fs-contact-form-input);
  --fs-contact-links: var(--fs-contact-left-mail);

  /* Weight mappings: default all to Regular */
  --fw-body: var(--fw-regular);
  --fw-brand: var(--fw-regular);
  --fw-bio: var(--fw-regular);
  --fw-nav-link: var(--fw-regular);
  --fw-home-filter: var(--fw-regular);
  --fw-home-card-title: var(--fw-regular);
  --fw-home-hover-label: var(--fw-regular);
  --fw-project-title: var(--fw-heavy);
  --fw-about-intro: var(--fw-regular);
  --fw-about-section: var(--fw-regular);
  --fw-about-label: var(--fw-regular);
  --fw-about-heart: var(--fw-regular);
  --fw-about-download-link: var(--fw-regular);
  --fw-contact-left-text: var(--fw-regular);
  --fw-contact-left-mail: var(--fw-regular);
  --fw-contact-form-label: var(--fw-regular);
  --fw-contact-form-input: var(--fw-regular);
  --fw-contact-submit: var(--fw-regular);
  --fw-contact-status: var(--fw-regular);

}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

/* Baseline */
* { box-sizing: border-box; }
html, body { height: 100%; }

body[data-page='project'] img { border-radius: 8px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-body); /* zentral steuerbar */
  line-height: var(--lh-global);
  font-weight: var(--fw-body);
  font-optical-sizing: auto;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; color: var(--accent); }

::selection {
  background: var(--accent);
  color: #fff;
}

/* Smooth content swaps and right-column placement */
#content-root { grid-column: 1 / -1; opacity: 1; transition: opacity .5s cubic-bezier(0.4, 0, 0.2, 1); }
#content-root.is-fading { opacity: 0.15; }
#content-root[data-page='about']::after,
#content-root[data-page='privacy']::after,
#content-root[data-page='imprint']::after {
  content: "";
  display: block;
  height: 100px;
}

/* Page Grid (8 Spalten) */
.page {
  display: grid;
  grid-template-columns: 1fr; /* mobile first */
  column-gap: var(--gutter);
  row-gap: var(--gutter);
  width: 100%;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
  margin: 0 auto;
  position: relative;
}
/* Remove top padding on project detail pages so the hero can hug the viewport edge */
body[data-page='project'] .page { padding-top: 0; }

/* Header (fixiert, Spalte 1?2) */
.site-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr; /* nur Brand */
  align-items: center;
  position: static; /* mobile: flow layout */
  left: auto;
  top: auto;
  width: auto;
  z-index: 60;
}
.brand {
  grid-column: 1;
  font-weight: var(--fw-brand);
  font-size: var(--brand-size);
  line-height: var(--brand-lh);
  letter-spacing: -0.01em;
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  transition: color .2s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: 1rem;
}
.brand:hover,
.brand:focus-visible { color: var(--accent); text-decoration: none; }
.brand.is-muted { color: var(--muted); }
.brand:focus-visible { outline: none; }
/* nav im Header ausgeblendet (About entfernt) */
.nav { display: none; }

/* Linksspalte: Bio (gleich gro? wie Brand) ? Links (100px) ? Filter (100px) */
.left-stack {
  grid-column: 1 / -1;
  position: relative; /* create stacking context for overlays */
  left: auto;
  /* Direkt unter "Franz Lorek" – mobile fließt im Dokument */
  padding-top: 0;
  top: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  z-index: 55;
}

body[data-page='home'] .left-stack,
body[data-page='contact'] .left-stack {
  min-height: calc(100vh - (var(--pad-top) + var(--pad-bottom) + (var(--brand-size) * var(--brand-lh))));
  padding-bottom: calc(var(--pad-bottom) + 32px);
}

body[data-page='home'] .filters {
  margin-top: auto;
}

body[data-page='contact'] .contact-left-message {
  margin-top: auto;
}

.brand-bio { position: relative; z-index: 1; font-size: var(--fs-bio); font-weight: var(--fw-bio); line-height: var(--bio-lh); margin: 0 0 40vh 0; color: var(--accent); }
/* Initiale Position: 56px unter dem Brand auf der Startseite */
/* Abstand zur Linkliste wird über .left-stack padding-top geregelt */
body[data-page='home'] .brand-bio {
  margin-top: 12vh;
  margin-bottom: 0;
}
body[data-page='contact'] .brand-bio { margin-bottom: auto; }
.side-links { display: flex; flex-direction: column; gap: 6px; }
.side-links a {
  color: var(--text);
  text-decoration: none;
  font-weight: var(--fw-nav-link);
  font-size: var(--fs-home-link);
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  position: relative;
  padding-left: 0;
  transition: color .2s cubic-bezier(0.4, 0, 0.2, 1), padding-left .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.side-links a::before { content: none; }
.side-links a:hover,
.side-links a:focus-visible { padding-left: 0; }
.side-links a:hover::before,
.side-links a:focus-visible::before { opacity: 0; }
/* Links immer schwarz */
.side-links a.is-active { color: var(--text); }
.side-links a:hover,
.side-links a:focus-visible { color: var(--accent); text-decoration: none; }

/* Side links: fixed placement only on wide screens (see desktop media query) */
.side-links {
  position: static;
  left: auto;
  top: auto;
  z-index: auto;
}

/* Platz freihalten unter den fixierten Links (mobil/Desktop) */
.left-stack { padding-top: calc((var(--fs-nav-link) * var(--lh-global) * 2) + 6px + 54px); padding-bottom: calc(var(--pad-bottom) + 32px); }

/* Unsichtbarer Abstandhalter: Hält auf About die Links exakt auf Startseiten-Höhe */
.brand-bio--spacer { visibility: hidden; pointer-events: none; }

/* Filter unter der Bio */
.filters { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.filters .filter {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: var(--fw-home-filter);
  line-height: 1.2;
  font-size: var(--fs-home-link);
  display: inline-flex;
  gap: 0px;
  align-items: baseline;
  transition: color .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.filters .filter:hover,
.filters .filter:focus-visible {
  color: var(--accent);
}
.filters .filter.is-active {
  color: #000;
}
.filters .filter .filter-count {
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
}


 
/* spezifischer Abstand Links ? Filter (?berschreibt das generische gap) */
.left-stack .filters { margin-top: 0; }


/* Karten-Ausblendung beim Filtern */
.card.is-hidden { display: none; }
/* About-Link unter Bio entf?llt in dieser Variante */

/* Mail-CTA (unten links unter der Bio) */
/* Work-Grid (Spalte 3?8) */
.work-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr; /* mobile: single column */
  column-gap: var(--gutter);
  row-gap: calc(var(--gutter) * 2);
  
}

/* Revert overlays: let the bio flow naturally (disable filter fade/box) */
.filters { z-index: auto; background: transparent; }
.filters::before, .filters::after { content: none !important; display: none !important; }
.filters > * { z-index: auto; }

/* About page */
.about-left {
  grid-column: 1 / -1;
  position: static;
  left: auto;
  bottom: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  z-index: 55;
}
.about-portrait {
  margin: 0;
  position: relative;
  overflow: hidden;
}

.about-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.portrait-paintable {
  position: relative;
}

.portrait-paintable .portrait-paint-layer {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
}

.portrait-paintable .portrait-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
  touch-action: none;
  image-rendering: pixelated;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='7' y='7' width='10' height='10' fill='%23000'/%3E%3C/svg%3E") 12 12, crosshair;
}

.portrait-paintable .portrait-clear {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  font-size: 26px;
  line-height: 1;
  font-family: inherit;
  color: var(--accent);
  background: transparent;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  user-select: none;
  touch-action: manipulation;
}

.portrait-paintable .portrait-clear:hover,
.portrait-paintable .portrait-clear:focus-visible {
  transform: translateY(-2px);
}

.portrait-paintable .portrait-clear:focus-visible {
  outline: 2px solid rgba(65,201,120,0.45);
  outline-offset: 2px;
}

.portrait-paintable .portrait-clear:active {
  transform: translateY(0);
}
.about-main { grid-column: 1 / -1; display: grid; gap: 0; grid-template-columns: 1fr; padding-bottom: 150px; }
.about-main > * { grid-column: 1 / -1; }
.about-intro { margin: 0; }
.about-intro .lead {
  font-size: 1.35rem;
  line-height: var(--lh-about-intro);
  font-weight: var(--fw-about-intro);
  margin: 0;
}
.about-intro .lead + .lead { margin-top: calc(var(--gutter) * 0.75); }
.about-project .media-text {
  font-size: 1.35rem;
  line-height: var(--lh-project);
}
.about-project .media-text p {
  font-size: 1.35rem;
  line-height: var(--lh-project);
}
.about-divider {
  width: 100%;
  height: 1px;
  background: #d0d0d0;
  margin: 62px 0 0px;
}
.about-project .project-chapter {
  margin-top: -28px;
}
.spacer-200 {
  height: 200px;
}
.about-project .media-3.media-text,
.about-project .media-3.media-text p,
.about-project .media-3.media-text li {
  font-size: 1.1rem;
  line-height: var(--lh-project);
}
.about-project .media-3.media-text .chapter-title {
  font-size: 1.1rem;
  font-weight: var(--fw-regular);
  margin-bottom: 0.35em;
}
.about-project .media-3.media-text ul {
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
}
.about-project .project-chapter .media-text,
.about-project .project-chapter .media-text p,
.about-project .project-chapter .chapter-title {
  font-size: 1.1rem !important;
  line-height: var(--lh-project);
  font-weight: var(--fw-regular);
}
.about-project .project-chapter .chapter-list {
  margin: 0;
  padding-left: 1.3em;
  list-style: none;
}
.about-project .project-chapter .chapter-list li {
  margin-bottom: 0.35em;
  position: relative;
}
.about-project .project-chapter .chapter-list li::before {
  content: "\EE71";
  font-family: "Inter", "Inter var", sans-serif;
  position: absolute;
  left: -1.4em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  line-height: 1;
}
.about-project .project-chapter .chapter-list--downloads {
  list-style: none;
  padding-left: 0;
}
.about-project .project-chapter .chapter-list--downloads li {
  padding-left: 0;
  margin-left: 0;
}
.about-project .project-chapter .chapter-list--downloads li::before {
  display: none;
}
.about-project .project-chapter .chapter-download {
  color: var(--text);
  text-decoration: none;
  position: relative;
  padding-left: 0;
  transition: color .2s cubic-bezier(0.4, 0, 0.2, 1), padding-left .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.about-project .project-chapter .chapter-download::before {
  content: '\2192';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-0.4em, -50%);
  opacity: 0;
  transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1), transform .2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: inherit;
  font-weight: inherit;
}
.about-project .project-chapter .chapter-download:hover,
.about-project .project-chapter .chapter-download:focus-visible {
  color: var(--accent);
  padding-left: 1.1em;
}
.about-project .project-chapter .chapter-download:hover::before,
.about-project .project-chapter .chapter-download:focus-visible::before {
  opacity: 1;
  transform: translate(0, -50%);
}

.about-section {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 2fr;
  column-gap: var(--gutter);
  row-gap: 8px;
  margin-top: 150px;
  padding-top: 50px;
  border-top: 1.1px solid rgba(0,0,0,0.6);
}
.about-section h3 { font-size: var(--fs-about-small-title);
  line-height: var(--lh-about-section);
  color: var(--muted);
  font-weight: var(--fw-about-label);
  align-self: start;
}
.about-section .body { font-size: var(--fs-about-info);
  line-height: var(--lh-about-section);
  font-weight: var(--fw-about-section);
  align-self: start;
}
.about-section .body p { margin: 0; }
.about-section .body ul { list-style: none; padding-left: 0; margin: 0; }
.about-section .body ul li { position: relative; margin: 0.2em 0; padding-left: 0.5em; }
.about-section .body ul li::before { content: '*'; position: absolute; left: 0; font-weight: var(--fw-regular); }
.about-section.about-section--values {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  row-gap: 12px;
}
.about-section--values .values-label {
  grid-column: 1 / 2;
  margin: 0;
  font-size: var(--fs-about-label);
  line-height: var(--lh-about-section);
  font-weight: var(--fw-about-label);
  color: var(--muted);
  align-self: start;
}
.about-section--values .values-text {
  grid-column: 2 / 7;
}
.about-section--values .values-text p { font-size: var(--fs-about-statement);
  line-height: var(--lh-about-intro);
  font-weight: var(--fw-regular);
}

.about-section.about-section--downloads {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.about-section.about-section--downloads h3 {
  grid-column: 1 / 2;
}
.about-section.about-section--downloads .body {
  grid-column: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-section.about-section--downloads .downloads-heart {
  grid-column: 4 / 5;
  font-size: var(--fs-about-heart);
  font-weight: var(--fw-about-heart);
  color: var(--muted);
  align-self: start;
}
.about-section.about-section--downloads .facts {
  grid-column: 5 / 7;
  align-self: start;
}
.download-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--text);
  text-decoration: none;
  font-weight: var(--fw-about-download-link);
  font-size: var(--fs-about-download-link);
  transition: color .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.download-link::before {
  content: '\2198';
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.download-link:hover,

.card { display: grid; gap: 4px; text-decoration: none; position: relative; opacity: 1; transition: opacity .5s cubic-bezier(0.4, 0, 0.2, 1); }

.thumb {
  background: var(--card);
  aspect-ratio: 1 / 1; /* quadratisch */
  overflow: hidden;
    position: relative;
  isolation: isolate; /* begrenzt mix-blend-mode auf das Thumbnail */
  /* hauchzarte Kontur nur um das Bild */

  border-radius: var(--radius-card);

}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .18s cubic-bezier(0.4, 0, 0.2, 1); will-change: filter; }
.card h3 { margin: 0; font-size: var(--fs-home-project-title); font-weight: var(--fw-home-card-title); line-height: var(--lh-global); position: relative; padding-left: 0; transition: color .2s cubic-bezier(0.4, 0, 0.2, 1), padding-left .2s cubic-bezier(0.4, 0, 0.2, 1); }
.card h3::before {
  content: '\2192';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-0.4em, -50%);
  opacity: 0;
  transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1), transform .2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: inherit;
  font-weight: inherit;
}
.card p  { margin: -6px 0 calc(var(--gutter) * 1.6); color: var(--muted); font-size: var(--fs-home-card-description); line-height: var(--lh-global); }
.card .tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 calc(var(--gutter) * 1.6); }
.card .tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 5px;
  font-size: var(--fs-home-project-tag);
  font-weight: var(--fw-light);
  line-height: 1.2;
  color: var(--text);
  border: 0;
  background: hsl(0, 0%, 94%);
  border-radius: 4px;
}
.card:hover h3, .card:focus-visible h3 { padding-left: 1.1em; }

.card.is-entering { opacity: 0; }
.card.is-exiting  { opacity: 0; pointer-events: none; }
.card:hover h3::before, .card:focus-visible h3::before { opacity: 1; transform: translate(0, -50%); }

/* Hover-/Fokus-Effekt: Akzentfarbe am Rand, kein Schatten */
@media (prefers-reduced-motion: reduce) {
  .thumb, .thumb img { transition: none !important; }
}

/* Platzhalter-Karte: nicht klickbar, dezent */

/* Buttons/Rollen ? Akzent beim Hover */
button:hover, [role="button"]:hover { color: var(--accent); }

/* Projektseite */
.project { grid-column: 1 / -1; display: grid; gap: 24px; --lh-global: var(--lh-project); }
.project-head h1 { margin: 0; font-size: var(--fs-project-title); letter-spacing: -0.01em; line-height: var(--lh-global); font-weight: var(--fw-project-title); }
.project-head .meta { color: var(--muted); margin: 6px 0 0; }
.project-hero .hero-media { background: var(--card); border-radius: var(--radius); aspect-ratio: 16/9; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
/* Project pages: no rounded corners on images */
body[data-page='project'] .project-hero .hero-media { border-radius: 0; }
.project-body { max-width: 72ch; }
.project-nav {
  position: static;
  left: auto;
  bottom: auto;
  width: auto;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--gutter);
  column-gap: 0;
  z-index: 56;
}

/* Project info in left header (project pages) */
body[data-page='project'] .project-info { display: grid; gap: 16px; margin-top: calc(var(--gutter) * 4); width: 100%; }
/* On smaller screens keep left info column within two base columns */
@media (max-width: 1439px) {
  body[data-page='project'] .project-info { max-width: min(100%, var(--left-column-width)); }
}
/* Remove left-side info tables on all project pages */
/* Show left-side info table on project pages */
/* previously hidden during prototype; now enabled */
/* Ensure project title uses a controllable regular weight */
body[data-page='project'] { --fw-project-title: 400; }
body[data-page='project'] .project-info .pi-title { margin: 0; font-size: calc(var(--fs-project-title)); font-weight: var(--fw-project-title); letter-spacing: -0.01em; line-height: 1.2; }
body[data-page='project'] .project-info .pi-subtitle { margin: 0; color: var(--muted); }
/* Small label and divider above the project title */
/* Hide legacy label and divider by default on project pages */
body[data-page='project'] .project-info .pi-label { display: none !important; }
body[data-page='project'] .project-info .pi-divider { display: none !important; }
/* Bring subtitle closer to title */
body[data-page='project'] .project-info .pi-title + .pi-subtitle { margin-top: -8px; }

/* Two-column table with separators */
body[data-page='project'] .project-info .pi-table { display: grid; gap: 0; margin-top: 0; width: 100%; }
body[data-page='project'] .project-info .pi-table.pi-table--spaced { margin-top: calc(var(--gutter) * 3); }
body[data-page='project'] .project-info .pi-row,
body[data-page='project'] .site-header .project-info .pi-row {
  display: grid !important;
  grid-template-columns: clamp(100px, 22%, 180px) 1fr;
  column-gap: 18px;
  align-items: start;
  /* Shift divider ~6px upwards: more top, less bottom padding */
  padding: 22px 0 10px 0;
  border-bottom: 1px solid #d0d0d0;
}
/* Optional spacer row for visual separation */
/* Spacer without divider (no line above Client) */
body[data-page='project'] .project-info .pi-row--spacer { padding: 22px 0; border-bottom: none; }
/* Bottom navigation inside the table */
body[data-page='project'] .project-info .pi-row--nav {
  grid-template-columns: 1fr;
  row-gap: 12px;
  align-items: start;
  padding: 22px 0 0;
  border-bottom: none !important; /* ensure no divider below nav */
}
body[data-page='project'] .project-info .pi-row--nav .pi-val {
  text-align: left !important;
}
body[data-page='project'] .project-info .pi-nav { display: inline-flex; flex-direction: row; align-items: baseline; gap: 8px; color: var(--text) !important; text-decoration: none; }
body[data-page='project'] .project-info .pi-nav:hover { color: var(--accent); }
body[data-page='project'] .project-info .pi-nav .pi-nav-arrow { font-size: 1.0rem; line-height: 1; display: inline-block; transform: none; }
body[data-page='project'] .project-info .pi-nav--prev { align-items: baseline; }
body[data-page='project'] .project-info .pi-nav--next { align-items: baseline; }
body[data-page='project'] .project-info .pi-nav .pi-nav-label { font-size: 1.0rem; }
/* Next: label above arrow (text, then arrow) */
body[data-page='project'] .project-info .pi-nav--next .pi-nav-label { order: 1; }
body[data-page='project'] .project-info .pi-nav--next .pi-nav-arrow { order: 2; }

/* Desktop: fix entire project-info column; keep table 20px from viewport bottom */
@media (min-width: 1440px) {
  body[data-page='project'] .project-info {
    position: fixed;
    left: var(--pad-x);
    bottom: 60px;
    width: var(--left-column-width);
    margin-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  body[data-page='project'] .project-info .pi-table { width: 100%; margin-top: 0px; }
}
/* Divider nur unter jeder Zeile (wie im Screenshot) */
body[data-page='project'] .project-info .pi-key { color: var(--muted); }
/* Normalize value weight across all project pages to match SHIFT Happens */
body[data-page='project'] .project-info .pi-val { font-weight: var(--fw-regular) !important; }
/* Hide legacy right-column head on redesigned project pages */
body[data-page='project'] .project-head { display: none !important; }

@media (min-width: 1440px) {
  body[data-page='project'] .project-info { margin-top: calc(var(--gutter) * 9); }
  body[data-page='project'] .project-info .pi-title { font-size: calc(var(--fs-project-title)); }
  body[data-page='project'] .project-info .pi-row { grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); }
}

/* Project: hero header within media grid */
body.project-shift-happens .project-media .project-hero-header { display: contents; }
body.project-shift-happens .project-media .phi-title {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-self: start;
  grid-column: 1 / -1;
}
body.project-shift-happens .project-media .phi-description {
  display: grid;
  gap: 18px;
  margin-top: 0;
  align-self: start;
  grid-column: 1 / -1;
}
body.project-shift-happens .project-media .phi-description p { margin: 0; font-size: var(--fs-project-info); line-height: var(--lh-project); }
body.project-shift-happens .project-media .phi-description p + p { margin-top: 1em; }
body.project-shift-happens .project-media .phi-description p:first-child { margin-top: 0; }
body.project-shift-happens .phi-title .pi-title { margin: 0; font-size: calc(var(--fs-project-title)); font-weight: var(--fw-project-title); letter-spacing: -0.01em; line-height: 1.2; }
body.project-shift-happens .phi-title .pi-subtitle { margin: 0; color: var(--text); font-size: var(--fs-project-subtitle); font-weight: var(--fw-regular); }
body.project-shift-happens .project-media .media-text.media-start-3 { margin: -8px 0 30px 0; }
@media (min-width: 1440px) {
  body.project-shift-happens .project-media .phi-title { grid-column: 1 / span 3; }
  body.project-shift-happens .project-media .phi-description { grid-column: 4 / span 3; }
  body.project-shift-happens .project-media .media-start-3 { grid-column: 1 / span 3; }
}
.project-nav .thumb { display: block; }

body.project-shift-happens .branding-note { display: grid; gap: 12px; }
body.project-shift-happens .branding-note__title { margin: 0; color: var(--text); font-size: var(--fs-project-chapter-headline); font-weight: var(--fw-regular); letter-spacing: 0.01em; }
body.project-shift-happens .branding-note__body { margin: 0; font-size: var(--fs-project-chapter-body); line-height: var(--lh-project); color: var(--text); }
body.project-shift-happens .workshop-note { display: grid; gap: 12px; }
body.project-shift-happens .workshop-note__title { margin: 0; color: var(--text); font-size: var(--fs-project-chapter-headline); font-weight: var(--fw-regular); letter-spacing: 0.01em; }
body.project-shift-happens .workshop-note__body { margin: 0; font-size: var(--fs-project-chapter-body); line-height: var(--lh-project); color: var(--text); }
body.project-shift-happens .method-note { display: grid; gap: 12px; }
body.project-shift-happens .method-note__title { margin: 0; color: var(--text); font-size: var(--fs-project-chapter-headline); font-weight: var(--fw-regular); letter-spacing: 0.01em; }
body.project-shift-happens .method-note__body { margin: 0; font-size: var(--fs-project-chapter-body); line-height: var(--lh-project); color: var(--text); }
body.project-shift-happens .artifacts-note { display: grid; gap: 12px; }
body.project-shift-happens .artifacts-note__title { margin: 0; color: var(--text); font-size: var(--fs-project-chapter-headline); font-weight: var(--fw-regular); letter-spacing: 0.01em; }
body.project-shift-happens .artifacts-note__body { margin: 0; font-size: var(--fs-project-chapter-body); line-height: var(--lh-project); color: var(--text); }

/* Project template variant mirrors SHIFT Happens layout */
body.project-template .project-hero-header { display: contents; }
body.project-template .phi-title { display: flex; flex-direction: column; gap: 6px; margin: 0; }
body.project-template .phi-description { display: grid; gap: 18px; margin: 0; }
body.project-template .phi-col { display: block; }
@media (min-width: 1440px) {
  body.project-template .project-media .phi-title { grid-column: 1 / span 3; align-self: start; }
  body.project-template .project-media .phi-description {
    grid-column: 4 / span 3;
    grid-template-columns: 1fr;
    gap: 24px;
    align-self: start;
  }
}
body.project-template .phi-title { align-self: start; }
body.project-template .phi-description { align-self: start; }
body.project-template .phi-description p { margin: 0; font-size: var(--fs-project-info); line-height: var(--lh-project); }
body.project-template .phi-description p + p { margin-top: 1em; }
body.project-template .phi-description p:first-child { margin-top: 0; }
body.project-template .phi-title .pi-title { margin: 0; font-size: calc(var(--fs-project-title)); font-weight: var(--fw-project-title); letter-spacing: -0.01em; line-height: 1.2; }
body.project-template .phi-title .pi-subtitle { margin: 0; color: var(--text); font-size: var(--fs-project-subtitle); font-weight: var(--fw-regular); }
body.project-template .chapter-block { display: grid; gap: 12px; }
body.project-template .chapter-title { margin: 0; color: var(--text); font-size: var(--fs-project-chapter-headline); font-weight: var(--fw-regular); letter-spacing: 0.01em; }

body.project-template .branding-note { display: grid; gap: 12px; }
body.project-template .branding-note__title { margin: 0; color: var(--text); font-size: var(--fs-project-chapter-headline); font-weight: var(--fw-regular); letter-spacing: 0.01em; }
body.project-template .branding-note__body { margin: 0; font-size: var(--fs-project-chapter-body); line-height: var(--lh-project); color: var(--text); }
body.project-template .workshop-note { display: grid; gap: 12px; }
body.project-template .workshop-note__title { margin: 0; color: var(--text); font-size: var(--fs-project-chapter-headline); font-weight: var(--fw-regular); letter-spacing: 0.01em; }
body.project-template .workshop-note__body { margin: 0; font-size: var(--fs-project-chapter-body); line-height: var(--lh-project); color: var(--text); }
body.project-template .method-note { display: grid; gap: 12px; }
body.project-template .method-note__title { margin: 0; color: var(--text); font-size: var(--fs-project-chapter-headline); font-weight: var(--fw-regular); letter-spacing: 0.01em; }
body.project-template .method-note__body { margin: 0; font-size: var(--fs-project-chapter-body); line-height: var(--lh-project); color: var(--text); }
body.project-template .artifacts-note { display: grid; gap: 12px; }
body.project-template .artifacts-note__title { margin: 0; color: var(--text); font-size: 1.0rem; font-weight: var(--fw-regular); letter-spacing: 0.01em; }
body.project-template .artifacts-note__body { margin: 0; font-size: 1.0rem; line-height: var(--lh-project); color: var(--text); }
body.project-template .project-comment p { font-size: var(--fs-project-comment); line-height: var(--lh-project); }

/* Hover-Labels auf Projekt-Nav-Thumbs */
.project-nav .thumb::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #000; /* black text */
  font-size: var(--fs-home-hover-label);
  font-weight: var(--fw-home-hover-label);
  line-height: 1.1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .18s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  content: '';
  background: #fff; /* white box */
  padding: var(--hover-label-pad-y) var(--hover-label-pad-x);
  border-radius: 0; /* rectangular, no rounding */
}
.project-nav .thumb:hover::after,
.project-nav .thumb:focus-visible::after { opacity: 1; }
.project-nav .thumb--prev::after { content: 'Vorheriges'; }
.project-nav .thumb--next::after { content: 'N\00e4chstes'; }

.site-footer {
  grid-column: 1 / span 2;
  color: var(--muted);
  position: fixed;
  left: var(--pad-x);
  bottom: var(--pad-bottom);
  z-index: 90;
}

/* Dev-Grid Overlay (Ctrl/Cmd + G) */
body.debug .page::before {
  content: "";
  position: fixed;
  left: var(--pad-x);
  right: var(--pad-x);
  top: var(--pad-top);
  bottom: var(--pad-bottom);
  background: repeating-linear-gradient(
    to right,
    rgba(255,0,200,0.18), rgba(255,0,200,0.18) calc((100% - 7*var(--gutter)) / 8),
    transparent calc((100% - 7*var(--gutter)) / 8), transparent calc((100% - 7*var(--gutter)) / 8 + var(--gutter))
  );
  z-index: 1000;
}

/* Responsive */





/* Hover-/Fokus-Effekt: Akzent-Kontur, kein Blur */
.work-grid .thumb { position: relative; }

/* Home: hover-image overlay support */
.work-grid .thumb img.thumb-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.work-grid .thumb img:not(.thumb-hover) { position: relative; z-index: 0; }
.work-grid .card:hover .thumb img.thumb-hover,
.work-grid .card:focus-visible .thumb img.thumb-hover { opacity: 1; }

/* Hover-Label an Cursor-Position */
  .work-grid .hover-label {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    font-size: var(--fs-home-hover-label);
    font-weight: var(--fw-home-hover-label);
    color: #15151c;
    user-select: none;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    background: #fff;
    padding: var(--hover-label-pad-y) var(--hover-label-pad-x);
    border-radius: var(--hover-label-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: opacity .12s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
  }
.work-grid .hover-label.is-visible { opacity: 1; }

  @media (pointer: fine) {
    .work-grid .card .thumb,
    .work-grid .card .thumb * {
      cursor: none !important;
    }
  }

/* Hover-Label Kontrast-Varianten */
/* SVG-Pfeil vor Links, Strichst?rke via Variable */




/* Kontaktseite */
  .contact-page .left-stack {
    align-items: flex-start;
    gap: var(--gap-left-bio-links);
  }

  .contact-left-message {
    width: 100%;
    max-width: none;
  }

  .contact-social-links {
    margin-top: auto;
    padding-bottom: var(--pad-bottom);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 1.25rem;
    font-weight: var(--fw-contact-left-mail);
  }

  .contact-social-links a {
    display: inline-flex;
    color: var(--text);
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-thickness: 1.25px;
    text-underline-offset: 4px;
  }

  .contact-social-links a:hover,
  .contact-social-links a:focus-visible {
    color: var(--accent);
  }

  .contact-tagline {
    position: fixed;
    right: var(--pad-x);
    bottom: calc(var(--pad-bottom) + 0px);
    font-size: 1.0rem;
    color: var(--text);
    pointer-events: none;
    z-index: 95;
  }

  .contact-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    padding: 0;
    margin: 0 auto 0;
    text-align: left;
  }

  .contact-hero h1 {
    margin: 0;
    font-size: clamp(2.0rem, 6vw, 2.0rem);
    line-height: 1.2;
    font-weight: var(--fw-regular);
    max-width: 920px;
  }

  .contact-hero-mail {
    font-size: clamp(2.0rem, 3vw, 2.0rem);
    font-weight: var(--fw-regular);
    color: var(--accent);
    text-decoration: none;
  }

  .contact-hero-mail:hover,
  .contact-hero-mail:focus-visible {
    color: var(--text);
  }

.contact-left-message p {
  margin: 0;
  font-size: var(--fs-contact-big);
  font-weight: var(--fw-contact-left-text);
  line-height: 1.35;
}

.contact-left-mail {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  font-size: var(--fs-contact-links);
  font-weight: var(--fw-contact-left-mail);
  letter-spacing: -0.01em;
  transition: color .2s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-left-mail:hover,
.contact-left-mail:focus-visible {
  color: var(--accent);
  outline: none;
}

.contact-root {
  padding-bottom: 220px;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: calc(var(--gutter) * 1.4);
  max-width: 100%;
  align-self: flex-start;
}

.contact-row {
  display: contents;
}

.contact-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.contact-field--name { grid-column: 1 / span 3; }
.contact-field--email { grid-column: 2 / span 3; }
.contact-field--message { grid-column: 1 / span 4; }

.contact-field label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(0);
  transform-origin: left top;
  font-size: var(--fs-contact-form);
  font-weight: var(--fw-contact-form-label);
  color: var(--text);
  pointer-events: none;
  transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), font-size .2s cubic-bezier(0.4, 0, 0.2, 1), color .2s cubic-bezier(0.4, 0, 0.2, 1), opacity .2s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-field input,
.contact-field textarea {
  border: none;
  border-bottom: 1.5px solid rgba(21,21,28,0.35);
  background: transparent;
  padding: 28px 0 12px;
  font-size: var(--fs-contact-form);
  font-weight: var(--fw-contact-form-input);
  color: var(--text);
  line-height: var(--lh-global);
  transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1), color .2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.contact-field textarea {
  padding-top: 32px;
  min-height: 220px;
  resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(21,21,28,0.45);
}

.contact-field--float label {
  transform: translateY(-14px);
  font-size: calc(var(--fs-contact-form-label) * 0.7);
  color: var(--muted);
}

.contact-field--focus label {
  color: var(--accent);
}
.contact-actions {
  display: flex;
  justify-content: flex-end;
  align-self: end;
  grid-column: 4 / span 1;
  margin-top: 0;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: none;
  background: none;
  font-size: var(--fs-contact-form);
  font-weight: var(--fw-contact-submit);
  color: var(--text);
  padding: 0;
  cursor: pointer;
  transition: color .2s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-submit:hover,
.contact-submit:focus-visible {
  color: var(--accent);
  outline: none;
}

contact-submit[disabled] {
  opacity: 0.4;
  cursor: progress;
}

.contact-submit-arrow {
  font-family: 'Inter', sans-serif;
  font-variation-settings: inherit;
  font-feature-settings: inherit;
  display: inline-flex;
  align-items: center;
}

.contact-submit-arrow.is-hidden {
  opacity: 0;
}

.contact-privacy {
  grid-column: 1 / span 4;
  max-width: 48ch;
  color: var(--muted);
  margin: 0;
}

.contact-status {
  grid-column: 1 / span 4;
  min-height: 1em;
  font-size: var(--fs-contact-status);
  font-weight: var(--fw-contact-status);
  margin: 0;
}

.contact-status.is-success { color: var(--accent); }
.contact-status.is-error { color: #d04848; }

.contact-honey {
  position: absolute;
  left: -9999px;
  opacity: 0;
}
.contact-fixed-links {
  position: fixed;
  top: calc(var(--pad-top) + (var(--brand-size) * var(--brand-lh)));
  right: var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  text-align: right;
  z-index: 70;
}

.contact-fixed-links a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4em;
  font-size: var(--fs-nav-link);
  font-weight: var(--fw-nav-link);
  color: var(--muted);
  text-decoration: none;
  transition: color .2s cubic-bezier(0.4, 0, 0.2, 1), transform .2s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-fixed-links a::before {
  content: '\2197';
  font-size: inherit;
}

.contact-fixed-links a:hover,
.contact-fixed-links a:focus-visible {
  color: var(--accent);
  transform: translateX(4px);
  outline: none;
}




/* TYPOGRAPHY: Mobile overrides (=640px) */
@media (max-width: 640px) {
  
  /* Weight mappings: default all to Regular */





.side-links a:focus-visible { outline: none; color: var(--accent); }





}
/* Desktop breakpoint — 1440px and up */
@media (min-width: 1440px) {

  #content-root { grid-column: 3 / 9; }

  .page {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    row-gap: calc(var(--gutter) * 2);
  }

  .site-header {
    grid-column: 1 / span 2;
    position: fixed;
    left: var(--pad-x);
    top: var(--pad-top);
    width: var(--left-column-width);
    z-index: 80;
  }

  .left-stack {
    grid-column: 1 / span 2;
    position: relative;
    gap: var(--gap-left-bio-links);
    padding-top: calc((var(--fs-nav-link) * var(--lh-global) * 2) + 6px + 54px);
    padding-bottom: calc(var(--pad-bottom) + 32px);
  }

  .work-grid {
    grid-column: 3 / 9;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: calc(var(--gutter) * 2);
    margin-top: calc((16pt * 1.2) + -22px);
  }

  .about-left {
    grid-column: 1 / span 2;
    position: static;
    left: auto;
    bottom: auto;
    width: auto;
    justify-content: flex-start;
  }

  .about-main { grid-column: 3 / 9; grid-template-columns: repeat(6, minmax(0, 1fr)); padding-bottom: 300px; }
  .about-main > * { grid-column: 1 / 7; }

  .project { grid-column: 3 / 9; }
  .project-nav {
    position: fixed;
    left: var(--pad-x);
    /* JS sets --project-nav-top to keep 100px gap below info */
    top: var(--project-nav-top, auto);
    bottom: var(--project-nav-bottom, var(--pad-bottom));
    width: var(--left-column-width);
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gutter);
    row-gap: 0;
    z-index: 90;
  }

  .side-links {
    position: fixed;
    left: var(--pad-x);
    top: calc(var(--pad-top) + (var(--brand-size) * var(--brand-lh)) + 28px);
    width: var(--left-column-width);
    z-index: 70;
  }
  /* Fix bio under the links on desktop so it never scrolls away */
  .brand-bio:not(.brand-bio--spacer) {
    position: fixed;
    left: var(--pad-x);
    top: calc(var(--pad-top) + (var(--brand-size) * var(--brand-lh)) + 28px + var(--gap-left-bio-links));
    width: var(--left-column-width);
    margin: 0;
    z-index: 60;
  }

  .left-stack .side-links { order: 1; }
  .left-stack .brand-bio { order: 2; }
  .left-stack .brand-bio--spacer { order: 2; }
  .left-stack .filters { order: 3; }

  /* Contact: place social links at the bottom of the left column */
  body[data-page='contact'] .contact-social-links {
    position: fixed;
    left: var(--pad-x);
    bottom: calc(var(--pad-bottom) + 32px);
    width: var(--left-column-width);
    margin-top: 0;
  }

  .filters {
    position: fixed;
    left: var(--pad-x);
    bottom: calc(var(--pad-bottom) + 32px);
    width: var(--left-column-width);
    z-index: 70;
  }

}
/* Project page: keep side-links inside header flow and clickable */
@media (min-width: 1440px) {
  body[data-page='project'] .side-links {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    z-index: 10;
    margin-top: 28px;
  }
}

body[data-page='home'] #content-root::after {
  content: "";
  display: block;
  height: 24px;
}


/* === Overrides: ensure white box and fade always cover bio === */
.left-stack { position: relative !important; }
.brand-bio { position: relative; z-index: 1; }
 

/* About: fix portrait bottom-left */
body[data-page='about'] .about-left {
  position: fixed;
  left: var(--pad-x);
  bottom: calc(var(--pad-bottom) + 28px);
  width: var(--left-column-width);
  z-index: 65;
}

/* Project detail: grayscale preview thumbs on hover */
.project-nav .thumb img {
  transition: filter .2s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-nav .thumb:hover img,
.project-nav .thumb:focus-visible img {
  filter: grayscale(100%) brightness(0.85);
}














/* Project media grid (6/4/3/2 columns) */
.project-media {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr; /* mobile first */
  margin-top: 0;
  justify-items: stretch; /* ensure grid items fill their tracks */
}
body[data-page='project'] { --radius: 8px; }
.project-media figure { margin: 0; width: 100%; }
body[data-page='project'] .project-media figure { border-radius: 8px; overflow: hidden; }
.project-media > .media-2,
.project-media > .media-3,
.project-media > .media-4,
.project-media > .media-6 { width: 100%; }
.project-media img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
body.project-placeholder .project-media figure {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  display: block;
  min-height: auto;
}

body.project-placeholder .project-media figure img {
  border-radius: 0 !important;
}

body[data-page='project'] .project-media img { border-radius: 8px !important; }
/* Text blocks aligned with media */
.project-media .media-text p { margin: 0; font-size: var(--fs-project-chapter-body); line-height: var(--lh-project); }
.project-media .media-text p + p { margin-top: 16px; }
.about-project .project-media .media-text,
.about-project .project-media .media-text p,
.about-project .media-2.media-text,
.about-project .media-2.media-text p,
.about-project .media-3.media-text,
.about-project .media-3.media-text p {
  font-size: 1.5rem;
  line-height: var(--lh-project);
}
.about-project .media-2.media-text .chapter-title



.about-project .media-3.media-text .chapter-title {
  font-size: 1.0rem;
  line-height: var(--lh-project);
  font-weight: var(--fw-regular);
  color: var(--muted);
  margin-bottom: 1.2em;
}
.project-media .media-text.media-start-3 p { font-size: var(--fs-project-comment); }
/* Split two-paragraph text into two grid columns on desktop */
.project-media .media-text--split { display: contents; }
@media (min-width: 1440px) {
  .project-media .media-text--split p { margin-top: 0; margin-bottom: 0; }
  .project-media .media-text--split p + p { margin-top: 0; }
  /* Map to internal project-media columns: first -> 3-4 (page 5-6), second -> 5-6 (page 7-8) */
  .project-media .media-text--split p:first-child { grid-column: 3 / span 2; align-self: start; }
  .project-media .media-text--split p:last-child { grid-column: 5 / span 2; align-self: start; }
}
/* Footnotes/captions below media */
.project-media figcaption { margin-top: 15px; color: var(--text); font-size: 0.95rem; line-height: var(--lh-project); margin-bottom: 30px; }
/* Grid-spanning text notes (no image) */
.project-media .media-note { color: var(--text); font-size: 0.95rem; line-height: var(--lh-project); align-self: start; margin-top: -15px; margin-bottom: 30px; }
/* Project 01: round corners for 3-up images */
body[data-page='project'] .project-media img[src*="projects/project-01/3-1.webp"],
body[data-page='project'] .project-media img[src*="projects/project-01/3-2.webp"],
body[data-page='project'] .project-media img[src*="projects/project-01/3-3.webp"] {
  border-radius: 10px !important;
}
body[data-page='project'] .project-media figure.media-2:has(img[src*="projects/project-01/3-1.webp"]),
body[data-page='project'] .project-media figure.media-2:has(img[src*="projects/project-01/3-2.webp"]),
body[data-page='project'] .project-media figure.media-2:has(img[src*="projects/project-01/3-3.webp"]) {
  border-radius: 10px !important;
  overflow: hidden;
}
body.project-02 .project-media img[src*="projects/project-02/12.webp"],
body.project-02 .project-media img[src*="projects/project-02/13.webp"],
body.project-02 .project-media img[src*="projects/project-02/14.webp"],
body.project-02 .project-media img[src*="projects/project-02/15.webp"],
body.project-02 .project-media img[src*="projects/project-02/16.webp"],
body.project-02 .project-media img[src*="projects/project-02/17.webp"] {
  border-radius: 14px;
}
/* Utility: rounded container for reliable clipping */
.project-media figure.round-10 { border-radius: 14px; overflow: hidden; }
/* Ensure project hero image hugs the top edge */
body[data-page='project'] .project-media > .media-6:first-child { margin-top: 0; }
body.has-lightbox { overflow: hidden; }

.lightbox-trigger {
  display: block;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: zoom-in;
  width: 100%;
  border-radius: var(--radius);
}
.lightbox-trigger img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.lightbox-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

.image-lightbox[hidden] { display: none; }
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  border: none;
}
.image-lightbox__content {
  position: relative;
  max-width: min(1600px, 98vw);
  max-height: 98vh;
  margin: 0;
}
.image-lightbox__content img {
  display: block;
  max-width: 100%;
  max-height: 98vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.55);
}
.image-lightbox__close {
  position: absolute;
  top: -16px;
  right: -16px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
}
.image-lightbox__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Reusable two-column text block for project pages */
.project-2col { display: grid; gap: 30px; margin: 0 0 50px 0; }
.project-2col .col { display: block; }
.project-2col p { margin: 0 0 1em 0; font-weight: var(--fw-regular); font-size: 1.0rem; line-height: var(--lh-project); }
@media (min-width: 1440px) {
  /* Align to rightmost 4 of the 6 project columns (= page cols 5–8) */
  .project-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project .project-2col { grid-column: 3 / span 4; }
}

@media (min-width: 1440px) {
  /* Project media grid spans (desktop 6-col system) */
  .project-media { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .project-media .media-6 { grid-column: 1 / -1; }
  .project-media .media-4 { grid-column: span 4; }
  .project-media .media-3 { grid-column: span 3; }
  .project-media .media-2 { grid-column: span 2; }
  .project-media .media-1 { grid-column: span 1; }
  /* Position helper: place an item into rightmost 3 media columns (page cols 6-8) */
  .project-media .media-right-3 { grid-column: 4 / span 3; }
  .project-media .media-right-4 { grid-column: 3 / span 4; }
  .project-media .media-right-4-left { grid-column: 3 / span 2; }
  .project-media .media-right-2 { grid-column: 5 / span 2; }

  .legal-project .project-media {
    grid-template-columns: 1fr;
  }
  .legal-project .project-media > * {
    grid-column: 1 / -1;
  }
}

/* Right-side info table inside media grid (matches left table look) */
.project-media .pi-table,
.project-hero-header .pi-table { display: grid; gap: 0; margin-top: 0; width: 100%; }
.project-media .pi-row,
.project-hero-header .pi-row { display: grid; grid-template-columns: clamp(100px, 22%, 180px) 1fr; column-gap: 18px; align-items: start; padding: 22px 0 10px 0; border-bottom: 1px solid #d0d0d0; }
.project-media .pi-table .pi-row:last-child,
.project-hero-header .pi-table .pi-row:last-child { border-bottom: none; }
.project-media .pi-key,
.project-hero-header .pi-key { color: var(--muted); }
.project-media .pi-val,
.project-hero-header .pi-val { font-weight: var(--fw-regular); }
.project-media .pi-download,
.project-hero-header .pi-download {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 0.875rem;
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.15s ease;
}
.project-media .pi-download:hover,
.project-media .pi-download:focus-visible,
.project-hero-header .pi-download:hover,
.project-hero-header .pi-download:focus-visible {
  color: var(--accent);
}
.project-media .pi-download span:first-child,
.project-hero-header .pi-download span:first-child { font-size: 1.2rem; line-height: 1; }

/* Next project teaser at end of content (crops to first 500px) */
.project-media .next-teaser { position: relative; display: block; height: 400px; overflow: hidden; background: var(--card); }
.project-media .next-teaser img {
  width: 100%;
  height: auto;
  display: block;
  filter: blur(12px);
  transition: filter 0.35s ease;
}
.project-media .next-teaser:hover img,
.project-media .next-teaser:focus-visible img {
  filter: blur(0);
}
  .project-media .next-teaser:hover { cursor: none; }
  @media (pointer: fine) {
    .project-media .next-teaser,
    .project-media .next-teaser * {
      cursor: none !important;
    }
  }
/* Cursor-follow label inside next teaser */
  .project-media .next-teaser .hover-label {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    font-size: var(--fs-home-hover-label);
    font-weight: var(--fw-home-hover-label);
    color: #15151c;
    user-select: none;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    background: #fff;
    padding: var(--hover-label-pad-y) var(--hover-label-pad-x);
    border-radius: var(--hover-label-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: opacity .12s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
  }
.project-media .next-teaser .hover-label.is-visible { opacity: 1; }
/* Spacer utility: 250px whitespace between blocks */
.project-media .spacer-500 { height: 100px; }
.project-media .spacer-100 { height: 100px; }





/* Placeholder project cleanup */
body.project-placeholder img { border-radius: 0 !important; border: none !important; }
body.project-placeholder .project-media figure { border-radius: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; }
body.project-placeholder .project-media .next-teaser { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }