/* =========
   Base
   ========= */
:root{
  --crimson:#A51C30;
  --text:#333;
  --muted:#666;
  --maxw:1000px;
}

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

body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  color:var(--text);
  line-height:1.65;
  background:#fff;
}

/* =========
   Header / Nav
   ========= */
header{
  background:#fff;
  border-bottom:1px solid #f2f2f2;           /* subtle divider like before */
}
header .inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 24px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
header nav a{
  color:var(--crimson);
  text-decoration:none;
  margin-left:24px;
  font-weight:500;
}
header nav a:hover{ text-decoration:underline }

/* =========
   Layout
   ========= */
.container{
  max-width:var(--maxw);
  margin:32px auto;
  padding:0 24px;                             /* side gutters */
  display:flex;
  gap:48px;                                   /* space between columns */
}

/* Sidebar (left column) — lock it */
.sidebar{
  flex: 0 0 230px;   /* basis */
  min-width: 230px;  /* lock lower bound */
  max-width: 230px;  /* lock upper bound */
  box-sizing: border-box;
}

.sidebar img {
  display: block;
  width: 100%;
  height: auto;      /* keep aspect ratio */
  max-width: 100%;   /* never overflow the column */
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  margin-bottom: 14px;
}

.sidebar .bold { font-weight: 700; }
.sidebar p { margin: 0; }
.sidebar .dept { color: var(--crimson); }

.contact-info{ margin-top:20px }
.contact-info a{
  display:block; color:var(--crimson); text-decoration:none; margin:0px 0;}
.contact-info a:hover{ text-decoration:underline }

/* Content (right column) */
.content{
  flex:1;
  min-width:0;
}

/* Headings / typography */
.page-title, .content h1:first-child{
  margin:0 0 12px;
  font-size:20px;                             /* bolder, like your screenshots */
  line-height:1.2;
  letter-spacing:-0.2px;
}
.content h2{ margin:28px 0 10px; font-size:26px }
.content p{ margin:14px 0 }

/* Links inside content */
.content a{
  color:var(--crimson); text-decoration:none;
}
.content a:hover{ text-decoration:underline }

/* Lists (media page) */
.content ul{ margin:14px 0 0 1.1rem }
.content li{ margin:8px 0 }

/* Optional: number lists even when written as bullets */
/* Uncomment if you want bullets to appear numbered on Media page */
/*
.content ul{ list-style:decimal; }
*/

/* Images inside content */
.content img{
  max-width:100%; height:auto; display:block; margin:16px auto;
}

<details style="display:inline-block; margin-left:1em;">
  <summary>Links</summary>
  <ul style="list-style:none; padding-left:0; margin:0.25rem 0 0.5rem;">
    <li style="margin:0.25rem 0;">
      <a href="https://tidsskrift.dk/politica/article/view/153270">Journal page</a>
    </li>
    <li style="margin:0.25rem 0;">
      <a href="https://politica.dk/fileadmin/politica/Dokumenter/early_view/hvidkjaer_larsen.pdf">PDF</a>
    </li>
    <li style="margin:0.25rem 0;">
      <a href="https://www.kl.dk/momentum/arkiv/2025/9-flere-graanende-kommunalpolitikere-men-holdningerne-flugter-langt-hen-ad-vejen-stadig-med-vaelgernes">Media coverage: Momentum</a>
    </li>
  </ul>
</details>


/* =========
   Responsive
   ========= */
@media (max-width: 900px){
  .container{ gap:32px }
  .page-title, .content h1:first-child{ font-size:36px }
}
@media (max-width: 768px){
  header .inner{ justify-content:center }
  header nav a{ margin-left:16px }
  .container{
    flex-direction:column;
    margin:20px auto;
    gap:20px;
  }
  .sidebar{ flex:none; width:100%; text-align:center }
  .sidebar img{ max-width:180px; margin:0 auto 14px }
}

/* =========
   Footer
   ========= */

.site-footer{
  max-width: var(--maxw);
  margin: 40px auto;
  padding: 10px 24px 0;
  color: #666;
  font-size: 14px;
  border-top: 1px solid #eee;
  text-align: center;
}