/* Litir sóttir úr myndinni: dökkblá peysa (blek), rafgulur bolli, ljósblá skyrta */
  :root {
    --paper: #fbf8ef;
    --dot: #e7e0cd;
    --ink: #1f2b45;
    --ink-soft: #5b6478;
    --amber: #a8681c;
    --photo-frame: #ffffff;
    --stain: #8a5a2b;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: "Literata", Georgia, serif;
    font-size: 18px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--ink); text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  a:hover { color: var(--amber); }
  a:focus-visible, button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

  .hand { font-style: italic; color: var(--amber); font-weight: 400; line-height: 1.3; }

  main { max-width: 680px; margin: 0 auto; padding: 0 24px; }

  /* Haus: mynd límd inn eins og í minnisbók */
  .hero { padding: 56px 0 48px; display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: center; }
  .snap { position: relative; }
  .snap img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; }

  h1 { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: clamp(34px, 4.6vw, 46px); line-height: 1.12; letter-spacing: -0.01em; }
  .hi { margin-top: 14px; font-size: 22px; }

  .intro { font-size: 20px; padding-bottom: 24px; }

  /* Færslur */
  section { margin-top: 56px; }
  h2 { font-family: "Young Serif", Georgia, serif; font-weight: 400; color: var(--amber); font-size: 22px; line-height: 1.3; margin-bottom: 8px; }

  .entries { list-style: none; }
  .entries li { padding: 18px 0; border-bottom: 1px solid var(--dot); }
  .entries li:last-child { border-bottom: 0; }
  .entries strong { display: block; font-weight: 600; font-size: 19px; }
  .entries span { display: block; color: var(--ink-soft); margin-top: 4px; }

  .about p { color: var(--ink-soft); }

  /* Kaffiboðið */
  .coffee { margin-top: 72px; padding: 32px 0 16px; }
  .coffee .hand { font-family: "Young Serif", Georgia, serif; font-style: normal; font-size: 28px; }
  .coffee p + p { margin-top: 10px; font-size: 19px; }

  /* Kaffiblettir: hringir eftir bolla, aldrei yfir texta */
  main { position: relative; }
  .stain { position: absolute; pointer-events: none; color: var(--stain); z-index: 0; }
  .stain img { display: block; width: 100%; height: 100%; }
  .hero, section, .intro, footer { position: relative; z-index: 1; }
  .snap { z-index: 2; }
  html, body { overflow-x: clip; }
  body { position: relative; }
  .stain-1 { width: 300px; height: 300px; top: -110px; right: -90px; opacity: .85; }
  .stain-2 { width: 230px; height: 230px; right: -150px; top: 620px; opacity: .7; }
  .stain-3 { width: 150px; height: 150px; right: -170px; top: -10px; opacity: .8; }

  footer {
    margin-top: 72px; padding: 20px 0 48px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    font-size: 14px; color: var(--ink-soft);
  }

  @media (max-width: 640px) {
    main { padding: 0 20px; }
    .hero { grid-template-columns: 1fr; gap: 36px; padding: 56px 0 32px; }
    .snap { width: min(220px, 64vw); }
    .intro { font-size: 18px; }
    .coffee .hand { font-size: 24px; }
    .stain-1 { width: 170px; height: 170px; top: -70px; right: -60px; }
    .stain-2 { display: none; }
    .stain-3 { width: 96px; height: 96px; right: -22px; top: 0; }
  }

  /* Skrif */
  .writing ol { list-style: none; }
  .writing li { padding: 16px 0; border-bottom: 1px solid var(--dot); }
  .writing li:last-child { border-bottom: 0; }
  .writing a.post { display: block; text-decoration: none; }
  .writing a.post strong { display: block; font-weight: 600; font-size: 19px; }
  .writing a.post:hover strong { color: var(--amber); }
  .writing time { display: block; font-size: 15px; color: var(--ink-soft); margin-top: 2px; }
  .more { margin-top: 14px; font-size: 16px; }

  /* Valmynd efst á öllum síðum */
  .topbar { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 32px 0 0; font-size: 16px; position: relative; z-index: 2; }
  .topbar a { text-decoration: none; color: var(--ink-soft); }
  .topbar a:hover, .topbar a[aria-current="page"] { color: var(--amber); }
  .topbar .home { font-family: "Young Serif", Georgia, serif; color: var(--ink); font-size: 18px; }
  .topbar ul { display: flex; gap: 24px; list-style: none; }

  /* Bloggfærsla */
  .post-head { padding: 48px 0 8px; position: relative; z-index: 1; }
  .post-head h1 { font-size: clamp(32px, 4.6vw, 44px); }
  .post-head time { display: block; margin-top: 12px; color: var(--ink-soft); font-size: 16px; }
  .prose { position: relative; z-index: 1; margin-top: 32px; }
  .prose p { margin-top: 1.1em; }
  .prose h2 { margin-top: 1.8em; }
  .prose blockquote { margin: 1.4em 0; padding-left: 20px; border-left: 2px solid var(--amber); color: var(--ink-soft); font-style: italic; }
  .prose ul, .prose ol { margin: 1em 0 0 1.2em; }
  .signoff { margin-top: 56px; color: var(--ink-soft); position: relative; z-index: 1; }

  /* Uppruni eldri greina */
  .writing .src { display: block; font-size: 14px; color: var(--ink-soft); font-style: italic; }
  .post-head .origin { margin-top: 10px; font-size: 16px; font-style: italic; color: var(--amber); }
  .read-original { margin-top: 1.6em; font-weight: 600; }

  /* Fullur texti greina */
  .post-head .origin a { color: inherit; }
  .prose .lede { font-size: 20px; font-style: italic; color: var(--ink-soft); }
  .prose figure { margin: 2em 0; }
  .prose figure img { display: block; width: 100%; height: auto; border-radius: 2px; }
  .prose figcaption { margin-top: 8px; font-size: 15px; font-style: italic; color: var(--ink-soft); }
  .prose blockquote p { margin-top: 0; }
  .prose li + li { margin-top: .4em; }
  .prose a { word-break: break-word; }

  /* Til baka úr grein */
  .post-head .back { margin-bottom: 20px; font-size: 16px; }
  .post-head .back a { text-decoration: none; color: var(--ink-soft); }
  .post-head .back a:hover { color: var(--amber); }