/* philipp-koellinger.com — one stylesheet for all pages. Layout reference: v2-notes/screenshots/e2-v3-mockup.html */
:root { --ink: #1a1a1a; --grey: #5a5a5a; --link: #3b3b3b; --dots: #8a8a8a; --max: 960px; }
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font-family: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; }
a { color: var(--link); text-decoration: underline; text-decoration-color: #b5b5b5; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.site { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* header: portrait left, name right, dotted rule below */
.head { display: grid; grid-template-columns: 230px 1fr; align-items: end; gap: 20px; padding: 22px 0 14px; border-bottom: 2px dotted var(--dots); }
.head img { width: 130px; height: 111px; object-fit: cover; display: block; margin-left: 40px; }
.head .name { font-size: 30px; font-weight: 300; color: var(--grey); letter-spacing: .01em; padding-bottom: 6px; margin: 0; line-height: 1.2; }

/* navigation column + content column */
.cols { display: grid; grid-template-columns: 180px 1fr; gap: 0; }
.nav { padding: 18px 0 0; border-right: 2px dotted var(--dots); }
.nav a, .nav b { display: block; padding: 5px 12px; color: var(--ink); text-decoration: none; font-size: 15px; }
.nav b { font-weight: 600; }
.nav a:hover { text-decoration: underline; }
.main { padding: 18px 0 40px 28px; }
.main p { margin: 0 0 13px; max-width: 68ch; }
.main ul { margin: 0 0 13px; padding-left: 22px; max-width: 68ch; }
.main li { margin: 0 0 5px; }
h2 { font-size: 16px; font-weight: 600; margin: 28px 0 12px; }
h2:first-child { margin-top: 0; }

/* home page hero */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.intro img { width: 100%; height: auto; display: block; }
.lead { font-size: 19px; line-height: 1.4; margin: 0 0 15px; max-width: 32ch; }
.links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 15px; }

/* publication entries: one paragraph per entry */
.pub { margin: 0 0 13px; }
.pub b { font-weight: 600; }
.pub a { overflow-wrap: anywhere; } /* long DOI link text must wrap on narrow phones */

/* two-column rows: date | text (CV page) */
.cv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 16px; margin: 0 0 8px; max-width: 72ch; }
.cv .d { color: var(--grey); font-variant-numeric: tabular-nums; }

/* figure on the Claims page */
figure { margin: 0 0 16px; max-width: 520px; }
figure img { width: 100%; height: auto; display: block; }
figcaption { font-size: 14px; color: var(--grey); margin-top: 6px; }

/* bottom line */
.bottom { margin-top: 26px; padding-top: 14px; border-top: 1px dotted var(--dots); display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.bottom .foot { color: var(--grey); font-size: 14px; margin-left: auto; }

@media print {
  .nav, .bottom, .links { display: none; }
  .cols { grid-template-columns: 1fr; }
  .main { padding: 12px 0 0; }
  .head { border-bottom: 1px solid #000; }
  a { color: inherit; text-decoration: none; }
  .pub a[href^="https://doi.org/"]::after { content: ""; } /* DOI text is already printed */
}

@media (max-width: 720px) {
  .head { grid-template-columns: 110px 1fr; padding: 14px 0 10px; }
  .head img { width: 92px; height: 92px; margin-left: 0; }
  .head .name { font-size: 22px; }
  .cols { grid-template-columns: minmax(0, 1fr); } /* minmax(0,…) so a long word cannot widen the page */
  .nav { border-right: 0; border-bottom: 2px dotted var(--dots); display: flex; flex-wrap: wrap; gap: 0 6px; padding: 8px 0; }
  .nav a, .nav b { padding: 6px 8px; }
  .main { padding: 18px 0 40px; }
  .intro { grid-template-columns: 1fr; }
  .intro img { max-width: 260px; }
  .cv { grid-template-columns: 1fr; gap: 0; }
  .cv .d { margin-top: 8px; }
  .bottom .foot { margin-left: 0; width: 100%; }
}