/* Generated by pipeline/build-kaffe-sider.mjs. Do not edit here: public-site/ is rebuilt. */
:root {
  --paper: #faf7f2; --paper-2: #fffdfa; --ink: #221d1a; --muted: #6b615a;
  --line: #ece4d8; --accent: #a8451e;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #17140f; --paper-2: #201c17; --ink: #f2ece2; --muted: #a99f94;
          --line: #332c24; --accent: #e08a5e; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans);
       line-height: 1.55; -webkit-text-size-adjust: 100%; }
.top { max-width: 640px; margin: 0 auto; padding: 20px 20px 0; }
.mark { font-family: var(--serif); font-size: 17px; color: var(--muted); text-decoration: none;
        letter-spacing: -.01em; }
.mark:hover { color: var(--accent); }
main { max-width: 640px; margin: 0 auto; padding: 24px 20px 72px; }
h1 { font-family: var(--serif); font-size: clamp(25px, 5.4vw, 33px); font-weight: 600;
     letter-spacing: -.015em; margin: 0 0 6px; }
h2 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 34px 0 10px; }
.risteri { margin: 0 0 14px; font-size: 16px; }
.risteri a { color: var(--accent); text-decoration: none; }
.risteri a:hover { text-decoration: underline; }
.noter { margin: 0 0 18px; font-size: 17px; color: var(--ink); }
.foto { margin: 0 0 20px; }
/* Capped by HEIGHT, not width, and measured on the live page at 375 px before the cap was
   added: the mirrored photos are portrait (400x600), so max-width:100% rendered them 503 px
   tall, which is 62 % of a phone screen and put the bag ladder, the one thing this page has
   that exists nowhere else, below the fold. 320 px keeps the packaging recognisable and
   moves the kilo prices onto the first screen. The width/height attributes stay on the tag
   so the browser still reserves the right box before the image loads. */
.foto img { max-width: 100%; max-height: 320px; width: auto; height: auto;
            border-radius: 3px; display: block; }
.fakta { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0;
         font-size: 15px; }
.fakta dt { color: var(--muted); }
.fakta dd { margin: 0; }
.poser { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.poser li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
            padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 15px; }
.p-str { min-width: 62px; color: var(--muted); }
.p-pris { min-width: 76px; }
.p-kg { font-weight: 600; }
.p-bedst { font-size: 12.5px; color: var(--accent); }
.poser li.bedst { background: var(--paper-2); }
.rang { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.ingen-kg { margin: 0; font-size: 15px; color: var(--muted); }
.handling { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.handling a { display: inline-block; padding: 9px 15px; border-radius: 3px; font-size: 15px;
              text-decoration: none; border: 1px solid var(--line); }
.koeb { background: var(--accent); border-color: var(--accent); color: #fffdfa; }
.blandt { color: var(--ink); background: var(--paper-2); }
.handling a:hover { border-color: var(--accent); }
.naboer ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.naboer li { padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 15px;
             display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline; }
.naboer a { color: var(--accent); text-decoration: none; }
.naboer a:hover { text-decoration: underline; }
.n-risteri, .n-kg { color: var(--muted); font-size: 13.5px; }
.n-kg { margin-left: auto; }
.kolofon { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line);
           font-size: 13.5px; color: var(--muted); }
.kolofon a { color: var(--muted); }