:root{
  --maxWidth: 1500px;

  --cardMargin: 1rem;
  --captionColWidth: 48px;

  --bodyColor: #151a1e;
  --textColor: #ffffff;

  --hoverColor: #ffffff;
  --imgHoverColor: #FF00FF;
  --highlightColor: #4b2cd4;

  --defaultSpacing: 200px;
  --smallSpacing: 120px;
  --xsmallSpacing: 80px;
  --largeSpacing: 300px;

  --breakMedium: 1200px;
  --breakSmall: 600px;
}

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;700;900&display=swap");

*{ box-sizing:border-box; }

html{ font-size:100%; }

body{
  margin:0;
  padding:0;
  background: var(--bodyColor);
  color: var(--textColor);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  font-weight:300;
  line-height:1.75;
}

a{ color:inherit;}

/* ===== Header / Nav ===== */
.siteHeader{
  /* ingen egen padding — vi styrer alt via .siteHeaderInner */
  margin: 2.5rem auto 0 auto;
}

.siteHeaderInner{
  max-width: var(--maxWidth);
  margin: 0 auto;

  /* Desktop: captions er synlige -> video starter efter caption-kolonne + card-margin */
  /* padding-left: calc(var(--captionColWidth) + var(--cardMargin)); */
  padding-left: var(--cardMargin);
  padding-right: var(--cardMargin);

  display: flex;
  align-items: flex-start;          /* top-align burger med titel */
  justify-content: space-between;
  gap: 1.5rem;
}

.siteTitle{
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 2.157rem;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.siteTitle a{
  text-decoration: none;
  display: inline-block;
}

.siteNav{
  flex: 0 0 auto;
  white-space: nowrap;
  /* lille finjustering hvis burgeren føles 1px “lav” */
  margin-top: 0.2rem;
}

.siteNavLink{
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: lowercase;
  opacity: 0.95;
}
.siteNavLink:hover{ opacity: 1; }

/* Tablet/mobil: captions skjules -> video starter bare ved card-margin */
@media (max-width: 1200px){
  .siteHeaderInner{
    padding-left: var(--cardMargin);
    padding-right: var(--cardMargin);
  }
}

/* Mobil: lidt mindre titel */
@media (max-width: 600px){
  .siteTitle{ font-size: 1.469rem; }
}

/* ===== Global layout utility classes (from globals.scss) ===== */
.reverseRow{ flex-direction: row-reverse; text-align:right !important; }

.alignItemsStart{ align-items:flex-start; }
.alignItemsCenter{ align-items:center; }
.alignItemsBaseline{ align-items:baseline; }
.alignItemsEnd{ align-items:end; }

.alignSelfStart{ align-self:flex-start; }
.alignSelfCenter{ align-self:center; }
.alignSelfEnd{ align-self:flex-end; }

.justifyItemsStart{ justify-content:flex-start; }
.justifyItemsCenter{ justify-content:center; }
.justifyItemsEnd{ justify-content:flex-end; }

/* Spacing dividers (height only) */
.flexDivider{ width:100%; height: var(--defaultSpacing); }
.flexDivider.small{ height: var(--smallSpacing); }
.flexDivider.Xsmall{ height: var(--xsmallSpacing); }
.flexDivider.large{ height: var(--largeSpacing); }

/* ===== Core layout primitives (from Project.module.scss) ===== */
.grid{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  max-width: var(--maxWidth);
  margin: 3rem auto 0 auto;
  font-size:0; /* matches old: children must define font sizes */
}

.card{
  margin: 1rem;
  flex-basis: 30%;
  color: inherit;
  text-decoration:none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* Card typography (restore from old SCSS) */
.card p{
  margin: 0;
  font-size: 300;
  line-height: 1.5;
}

.card .title{
  margin-top: 0rem;
  margin-bottom: 0.2rem;
  font-size: 2.5rem;
  color: var(--textColor);
  transition: color 0.15s ease;
}

.card .subtitle{
  font-weight: 700;
  margin: 0rem 0 1.38rem;
}

/* sizes */
.card.medium{ flex-basis: 50%; }
.card.large{ flex-basis:65%; }
.card.Xl{ flex-basis:80%; }
.card.full{ flex-basis:92%; }

/* misc helpers */
.marginZero{ margin:0; }
.paddingZero{ padding:0; }
.borderNone{ border:none; }

.fullWidth{ width:100%; }
.paddingRegular{ padding-left: 1.5rem; }
.marginTopZero{ margin-top:0; }

/* ===== Index / ProjectItem bits ===== */
.bordersTopBottom{
  padding: 2rem 0rem;
  border-top: 1px solid var(--textColor);
  border-bottom: 1px solid var(--textColor);
}

.backgroundHover:hover{
  color: var(--hoverColor);
}

.titleHighlight{
  background-color: var(--bodyColor);
}

.arrow{
  font-weight: 200;
  margin-left: 0.75rem;
  font-size: 2.75rem;
}

.year{
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 1rem 0rem 0rem 0rem !important;
}

/* ===== Thumb (replaces Thumb.module.scss) ===== */
.thumb{
  position: relative;
  box-shadow: 0rem 0.5rem 10px rgba(0,0,0,0.42);
}

.thumb:hover span{ cursor: pointer; }

.thumb .imgOverlay{
  display: inline-block;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.thumb:hover .imgOverlay{
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Media should never overflow */
.thumb img,
.thumb video{
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Thumb Caption (replaces ThumbCaption.module.scss) ===== */
.caption{
  font-size: 0.9rem;
  font-weight: 300;
  writing-mode: vertical-rl;
  letter-spacing: 5px;
  max-height: 100ch;
  word-wrap: break-word;
  word-break: break-all;
  cursor: vertical-text;
  padding: 0;
  margin: 1rem 0 !important;
  line-height: 1.1;
}

/* ===== Project Info (replaces ProjectInfo.module.scss) ===== */
.projectInfoCard{
  margin: 0rem 1rem;
  flex-basis: 30%;
  padding: 1.5rem 0rem;
  padding-top: 0rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;

  /* important when next to .grid { font-size:0 } */
  font-size: 1.25rem;
  line-height: 1.5;
}

.projectInfoCard p{
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}

/* Rhythm between paragraphs (you said it's correct now) */
.projectInfoCard p + p{
  margin-top: 1rem;
}

.projectInfoTitle{
  font-size: 3.2rem;
  margin: 0;
  font-weight: 900;
  line-height: 1.3;
}

.projectInfoSubtitle{
  margin: 0rem 0 1.38rem;
  font-weight: 700;
}

.projectInfoYear{
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 1rem 0rem 0rem 0rem !important;
  font-weight: 700;
}

.projectInfoAuthors{
  font-family: "Montserrat", sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

.projectInfoExhibitions{
  margin-top: 1rem;
}

.infoBody{
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}

.projectInfoYear + .projectInfoTitle{
  margin-top: 0;
}

.stickyObject{
  position: sticky;
  top: 1.5rem;
}

/* Prevent global heading margins inside info card (match old behaviour) */
.projectInfoCard h1,
.projectInfoCard h2,
.projectInfoCard h3,
.projectInfoCard h4,
.projectInfoCard h5{
  margin: 0;
  line-height: 1.3;
}

/* ===== Project page layout guards (your FIX rules) ===== */
.projectPage{
  flex-wrap: nowrap;
  align-items: flex-start;
}

/* Media rows should not wrap on desktop (otherwise captions can overlap) */
.card.large > .grid{
  flex-wrap: nowrap;
  align-items: flex-end;
}

/* Caption is a stable “column” */
.card.large > .grid > .caption{
  flex: 0 0 48px;
  max-width: 48px;
  margin: 0 !important;
}

/* Media card takes remaining width, remove margins */
.card.large > .grid > .card.Xl{
  flex: 1 1 auto;
  max-width: 100%;
  margin: 0;
}

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .caption{ display:none; }

  .card, .card.large, .card.Xl, .card.full{ flex-basis:95%; }
  .reverseRow{ text-align:left !important; }

  .projectPage{ flex-wrap: wrap; }

  .projectInfoCard{
    padding-top: 0;
    flex-basis: 95% !important;
    margin: 0;
  }
  .stickyObject{ position: relative; }

  .card.large > .grid{
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .card.large > .grid > .card.Xl{
    margin: 0;
  }
}

@media (max-width: 600px){
  .paddingRegular{ padding-left:0; }

  .grid{
    margin-top:1.3rem;
    margin-bottom:2rem;
    width:100%;
    flex-direction:column;
  }

  .flexDivider, .flexDivider.Xsmall, .flexDivider.small, .flexDivider.large{
    height:5px !important;
  }

  .projectPage {
    margin-top: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .bordersTopBottom{
    padding-top: 1rem;
    /* padding-left: 1rem; */
    /* padding-right: 1rem; */
    border-top: none;
    border-bottom: none;
  }

  .card {
    width: 90vw !important;
  }

  .card{ margin-top: 0; }

  .card .title{
    margin: 0.2rem 0rem 1rem 0rem;
  }

  .card .subtitle{
    font-size: 1.333rem !important;
  }

  .projectInfoTitle{ display:none; }
  .projectInfoSubtitle{ font-size: 1.333rem; }
  .projectInfoYear{ margin: 1rem 0rem 1rem 0rem !important; }
}

/* ===== Index "+" handling ===== */
/* Your generator outputs: <div class="flexDivider ...">+</div>
   You currently want them gone, so hide non-empty dividers.
*/
.flexDivider:not(:empty){
  display: none;
}

/* ===== Contact page bits ===== */
.CV .header{
  font-size: 1.777rem;
  margin: 3rem 0 1.38rem;
  margin-bottom: 0.5rem !important;
  font-weight: 900;
}

.cvEntry{
  font-size: 1.25rem;
  line-height: 1.5;
}

.CV .year{
  margin-top: 1rem !important;
}

/* ===== Burger menu (mobile only, raw HTML) ===== */

.menu{
  position: relative;
}

/* burger button */
.menuButton{
  list-style: none;
  cursor: pointer;
  width: 28px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  user-select: none;
}

/* fjern default marker */
.menuButton::-webkit-details-marker{
  display: none;
}

/* de tre streger */
.menuButton span{
  display: block;
  height: 2px;
  width: 100%;
  background: var(--textColor);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* menu panel */
.menuPanel{
  position: absolute;
  right: 0;
  top: calc(100% + 1rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--bodyColor);
  border: 1px solid var(--textColor);
  z-index: 100;
}

/* lukket state */
.menu:not([open]) .menuPanel{
  display: none;
}

/* --- lille finesse: morph til kryds --- */
.menu[open] .menuButton span:nth-child(1){
  transform: translateY(10px) rotate(45deg);
}
.menu[open] .menuButton span:nth-child(2){
  opacity: 0;
}
.menu[open] .menuButton span:nth-child(3){
  transform: translateY(-10px) rotate(-45deg);
}

@media (max-width: 600px){
  .siteHeaderInner{
    align-items: flex-start;
  }

  /* gør nav’en “sidde oppe” ved titlen */
  .siteNav{
    margin-top: -1.1rem; /* justér: 0 / 0.15 / 0.25 / 0.35 */
  }

  /* gør selve burger-knappen starte øverst */
  .menuButton{
    margin-top: 0;
  }
}

/* ===== Nav visibility: desktop vs mobile ===== */
.siteNavDesktop{
  display: inline-block;
  margin-left: 2rem;
}
.siteNavMobile{ display: none; }

@media (max-width: 600px){
  .siteNavDesktop{ display: none; }
  .siteNavMobile{ display: inline-block; }
}

/* Safety: .grid har font-size:0; sørg for at tekst i cards altid får størrelse */
.card{
  font-size: 1.25rem;
  line-height: 1.5;
}

/* Når index-rækker stacker (tablet/desktop breakpoints), skal tekst altid være venstrealignet */
@media (max-width: 1200px){
  .card{
    text-align: left;
  }

  /* Hvis nogle wrappers stadig har center/row-reverse, neutralisér på små skærme */
  .reverseRow{
    text-align: left !important;
  }
  .justifyItemsCenter{
    justify-content: flex-start;
  }
}

/* Tekst-card som link skal opføre sig som et block-kort */
a.card{
  display: block;
}

.projectInfoYear {
  display: none;
}

.card .year {
  display: none;
}

.CV .year {
  display: inline-block;
}

.card .title {
  font-weight: 200;
  text-decoration: underline;
}

.card .title .arrow {
  display: none;
}

.header {
  margin-bottom: 0.5rem !important;
}

h3.header {
  margin-top: 0 !important;
}