/* Manifest — a dock slip with dotted leaders to a count. */
:root {
  --ink: #241c14; --paper: #f6efe3; --paper-2: #ebe0cc; --stamp: #9a2d1f;
  --carbon: #3d3428; --bad: #8e2418; --good: #2f5a2a;
  --disp: "Cardo", Georgia, serif;
  --ui: "Familjen Grotesk", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 17px; line-height: 1.55; }
a { color: var(--stamp); }
.mf-skip { position: absolute; left: -999px; }
.mf-skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 3; }
.mf-rule { max-width: 920px; margin: 0 auto; padding: 0 18px; }
.mf-mast { border-bottom: 8px solid var(--stamp); background: #faf4ea; }
.mf-brand { font-family: var(--disp); font-size: 1.7rem; color: var(--ink); text-decoration: none; display: block; padding-top: 16px; }
.mf-where { margin: 0; font-size: 0.85rem; letter-spacing: 0.04em; }
.mf-nav { display: flex; gap: 16px; padding: 10px 0 14px; }
.mf-nav a { color: var(--ink); }
.mf-flap { display: none; float: right; margin-top: 16px; font: inherit; background: var(--stamp); color: #fff; border: 0; padding: 8px 12px; }
.mf-list { display: none; background: #e5d6b8; padding: 8px 18px 14px; }
.mf-list[hidden] { display: none; }
.mf-list a { display: block; padding: 8px 0; color: var(--ink); }
h1, h2, h3 { font-family: var(--disp); line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 4vw, 2.45rem); }
.mf-block { padding: 36px 0; border-bottom: 1px solid #d4c6ad; }
.mf-slip { list-style: none; margin: 16px 0; padding: 0; border-top: 2px solid var(--ink); }
.mf-slip li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--carbon); }
.mf-n { font-family: var(--disp); font-weight: 700; width: 1.4em; }
.mf-what { flex: 0 1 auto; }
.mf-lead { flex: 1; border-bottom: 2px dotted var(--carbon); min-width: 24px; }
.mf-qty { font-family: var(--disp); font-weight: 700; font-size: 1.2rem; }
.mf-aside { background: #fff; border-left: 6px solid var(--stamp); padding: 14px 16px; }
.mf-prices { width: 100%; border-collapse: collapse; }
.mf-prices th, .mf-prices td { text-align: left; padding: 8px 10px; border-bottom: 1px dashed #d4c6ad; }
.mf-form { background: #fff; padding: 18px; border: 1px solid var(--ink); }
.mf-f { margin-bottom: 12px; }
.mf-l { display: block; font-weight: 600; }
.mf-in { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--ink); }
.mf-tick { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 0.88rem; margin: 10px 0; }
.mf-btn { background: var(--stamp); color: #fff; border: 0; font: inherit; font-weight: 600; padding: 12px 16px; cursor: pointer; width: 100%; }
.mf-stamp { font-weight: 600; }
.mf-stamp.is-bad { color: var(--bad); }
.mf-stamp.is-good { color: var(--good); }
.mf-packed { background: #e5d6b8; padding: 16px; border-top: 4px solid var(--stamp); }
.mf-packed h3 { margin-top: 0; }
.mf-foot { background: #241c14; color: #efe6d4; padding: 28px 0; font-size: 0.9rem; }
.mf-foot a { color: #fff; }
.mf-pair { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; }
@media (max-width: 800px) {
  .mf-nav { display: none; }
  .mf-flap { display: inline-block; }
  .mf-list { display: block; }
  .mf-list[hidden] { display: none; }
  .mf-pair { grid-template-columns: 1fr; }
}
