/* tom rudolf — portfolio */
/* Fonts are served from this site itself (no Google Fonts request — GDPR). */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/eb-garamond-latin-400italic.woff2') format('woff2');
}

:root { --paper: #f5f4f0; --ink: #1c1b19; --mut: #8a8880; --hair: #e3e1da; }
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'EB Garamond', Georgia, 'Times New Roman', serif; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--mut); }
img { max-width: 100%; }

html:not(.de):not(.da) .l-de, html:not(.de):not(.da) .l-da { display: none; }
html.de .l-en, html.de .l-da { display: none; }
html.da .l-en, html.da .l-de { display: none; }

.site-nav { position: fixed; top: 0; left: 0; bottom: 0; width: 148px; padding: 56px 0 48px 40px; display: flex; flex-direction: column; gap: 40px; z-index: 30; }
.site-nav .brand { font-size: 15px; letter-spacing: 0.06em; }
.site-nav .links { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; letter-spacing: 0.04em; }
.site-nav .links a { color: var(--mut); }
.site-nav .links a.active { color: var(--ink); }
.site-nav .links a:hover { color: var(--ink); }
.lang-switch { margin-top: auto; display: flex; gap: 12px; }
.lang-switch button { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; letter-spacing: 0.06em; color: var(--mut); cursor: pointer; }
.lang-switch button:hover, .lang-switch button.active { color: var(--ink); }

.lightbox { position: fixed; inset: 0; z-index: 40; margin: 0; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.lightbox img { max-width: 84vw; max-height: 82vh; display: block; cursor: pointer; }
.lightbox figcaption { font-size: 12.5px; color: var(--mut); letter-spacing: 0.05em; }

/* Small screens. The desktop art direction lives in inline styles on each
   page, so these overrides need !important to win over them. */
@media (max-width: 860px) {
  .site-nav { position: static; width: auto; padding: 28px 20px 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 24px; row-gap: 12px; }
  .site-nav .links { flex-direction: row; column-gap: 18px; flex-wrap: wrap; }
  .lang-switch { margin: 0 0 0 auto; align-self: baseline; }
  main { margin-left: 0 !important; max-width: none !important; padding: 48px 20px 80px !important; }
  main .row { flex-direction: column !important; }
  main figure { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  main .grid { grid-template-columns: 1fr !important; row-gap: 72px !important; }
  main .grid a { margin: 0 !important; }
  main .grid img { width: 100% !important; }
  .about-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
  .lightbox img { max-width: 92vw; }
}