

:root{
  --canvas:#FAF9F5; --surface:#FFFFFF; --ink:#1D2228;
  --text-secondary:#4A4F55; --text-tertiary:#8A8F96; --text-quaternary:#B9BDC3;
  --border:#E7E4DD; --border-strong:#D8D4CB;
  --paper:#FAF9F5;
  /* Tomrum-tokens: den eneste plads tegningernes farver bor. Vaerdier taget uaendret fra
     registret; i repoet bindes de til tokens.css. Et moerkt tema saetter kun disse seks. */
  --tomrum-haand:#5F5E5A;             /* pen, blaekpunkt, ghost (ved 0,15) */
  --tomrum-haand-let:#9FA4AB;         /* detaljer */
  --tomrum-haand-fin:#C4C8CD;         /* fineste streger */
  --tomrum-fyld:#FFFFFF;              /* motivets fyld */
  --tomrum-hul:var(--canvas);         /* huller hvor feltet under ses */
  --tomrum-skygge:rgba(29,34,40,0.16);/* skyggen, --ink ved 16 % */
  --r-controls:8px; --r-pill:9999px; --r-surface:13px;
  --ease-out:cubic-bezier(.25,.46,.45,.94);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:"Satoshi","Inter",system-ui,-apple-system,sans-serif;background:var(--canvas);
  color:var(--ink);font-size:13px;line-height:1.5;cursor:default;
  padding:48px clamp(20px,5vw,72px) 96px}
.masthead{max-width:1180px;margin:0 auto 32px}
.masthead h1{font-size:22px;font-weight:600;letter-spacing:-0.01em}
.masthead p{font-size:13px;color:var(--text-secondary);max-width:74ch;margin-top:6px}
.kap{max-width:1180px;margin:34px auto 12px;display:flex;align-items:baseline;gap:12px}
.kap h2{font-size:13px;font-weight:600}
.kap .rule{flex:1;height:1px;background:var(--border)}
.kap span{font-size:11px;color:var(--text-tertiary)}
.scene{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px}
.eksponat{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-surface);padding:18px;display:flex;flex-direction:column}
.eksponat header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;gap:10px}
.eksponat header h2{font-size:12.5px;font-weight:600}
.eksponat header span{font-size:10.5px;color:var(--text-tertiary);white-space:nowrap}
.tomrum{position:relative;flex:1;min-height:262px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;border:1px solid var(--border);
  border-radius:var(--r-controls);background:var(--canvas);padding:26px 18px}
.tomrum figure{width:150px}
.tomrum figure svg{display:block;width:100%;height:auto;overflow:visible}
.tomrum p{font-size:12.5px;color:var(--text-tertiary);text-align:center;max-width:30ch;text-wrap:pretty}
.tomrum .handling{display:inline-flex;align-items:center;gap:7px;height:26px;
  padding:0 4px 0 12px;border:1px solid var(--border-strong);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink);font-size:12px;font-weight:500;
  transition:border-color 160ms var(--ease-out)}
.tomrum .handling:is(:hover, [data-hover]){border-color:var(--tomrum-haand-let)}
.tomrum .handling kbd{font:inherit;font-size:11px;color:var(--text-tertiary);
  border:1px solid var(--border);border-radius:4px;min-width:18px;height:18px;
  padding:0 4px;display:inline-flex;align-items:center;justify-content:center;background:var(--canvas)}
.replay{position:absolute;top:10px;right:10px;height:24px;padding:0 11px;
  border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--surface);
  color:var(--text-secondary);font:inherit;font-size:11px;font-weight:500}
.replay:is(:hover, [data-hover]){border-color:var(--tomrum-haand-let)}
.fodnote{max-width:1180px;margin:40px auto 0;font-size:12px;color:var(--text-tertiary);max-width:82ch}
