:root {
  --ink: #1c1c1c;
  --teal: #2d7f87;
  --quote: #5783a7;
  --bg: #fafafa;
  --pad: clamp(16px, 4vw, 52px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
body.page-white { background: #fff; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; }
h1, h2 { font-weight: 400; margin: 0; line-height: 1.1; }

/* Haus */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--pad);
}
.wordmark { font-size: 27px; text-decoration: none; letter-spacing: -.005em; }
.nav { display: flex; gap: 26px; font-size: 14px; }
.nav a { text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 1px; }

main { padding: 0 var(--pad); }

/* Forsíða: myndir í óreglulegri uppröðun eins og áður */
.gallery { padding: 40px 0 clamp(48px, 7vw, 90px); }
.g-row { display: flex; align-items: flex-start; margin-bottom: 4%; }
.g-row:last-child { margin-bottom: 0; }
.gallery figure { margin: 0; cursor: zoom-in; overflow: hidden; }
.gallery figure img { transition: transform 1.2s var(--ease), opacity .4s; }
.gallery figure:hover img { opacity: .92; }
.gallery figure.ml-auto { margin-left: auto; }

/* Um mig / Hafa samband */
.page { padding: clamp(32px, 6vw, 92px) 0 clamp(56px, 8vw, 110px); }
.page h1 { font-size: clamp(44px, 5.6vw, 73px); letter-spacing: -.01em; margin-bottom: clamp(24px, 3vw, 40px); }
.page-grid { display: grid; grid-template-columns: 40.5fr 13.8fr 28.5fr 17.2fr; align-items: start; }
.page-text { grid-column: 1; }
.page-photo { grid-column: 3; }
.page-text p { margin: 0 0 .95em; }
.page-text p a { text-decoration: none; border-bottom: 1px solid currentColor; }
.page-text h2 { color: var(--teal); font-size: clamp(30px, 2.9vw, 38px); margin: 1.9em 0 .9em; }
.page-text blockquote { margin: 0 0 .8em; color: var(--quote); max-width: 92%; }

/* Fótur */
.site-footer { background: #fff; padding: clamp(40px, 5vw, 64px) var(--pad) clamp(56px, 7vw, 90px); }
.site-footer h2 { font-size: clamp(30px, 3.2vw, 42px); margin-bottom: 26px; }
.site-footer p { margin: 0; font-size: 16px; line-height: 1.4; }
.site-footer a { text-decoration: none; border-bottom: 1px solid currentColor; }
a[href^="tel:"], a[href^="mailto:"] { white-space: nowrap; }

/* Hreyfing */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.load-in { animation: loadIn 1s var(--ease) both; }
.load-in.d1 { animation-delay: .12s; }
.load-in.d2 { animation-delay: .24s; }
@keyframes loadIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Ljósakassi */
.lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 56px 16px; background: rgba(250, 250, 250, .97); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { width: auto; max-width: 100%; max-height: 100%; opacity: 0; transition: opacity .45s var(--ease); }
.lightbox img.is-loaded { opacity: 1; }
.lightbox button { position: absolute; background: none; border: 0; color: var(--ink); cursor: pointer; font: 300 34px/1 "Roboto", sans-serif; padding: 12px 16px; opacity: .6; transition: opacity .3s; }
.lightbox button:hover { opacity: 1; }
.lb-close { top: 10px; right: 10px; }
.lb-prev { left: 6px; top: 50%; translate: 0 -50%; }
.lb-next { right: 6px; top: 50%; translate: 0 -50%; }

/* Sími */
@media (max-width: 767px) {
  .gallery { padding-top: 16px; }
  .g-row { display: block; margin: 0; }
  .gallery figure { width: 100% !important; margin: 0 0 16px !important; }
  .page-grid { display: block; }
  .page-photo { margin: 8px 0 0; }
  .site-header { padding-top: 20px; padding-bottom: 20px; }
  .wordmark { font-size: 23px; }
  .nav { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}