/* GENERATED from brand/tokens.json by build/css.py. Never hand-edit a colour. */
:root{
  --lin:#FAF6EF;              /* the cloth. Page ground */
  --lin-2:#F2ECE1;              /* insets, table stripes, quiet panels */
  --lin-3:#E5DDCE;              /* pressed edges and the ground behind a hem */
  --rod:#D01030;              /* the red thread. Accent word, the door, the stitched titles */
  --blaa:#305090;              /* the blue thread. The second colour of every band */
  --rod-dyb:#B50018;              /* red text on cloth, and hover */
  --blaa-dyb:#163471;              /* links, the sampler's deeper blue */
  --blaek:#121A2A;              /* body text */
  --blaek-mute:#5C6472;              /* secondary text, captions, labels */
  --traad:#D5CEC2;              /* hairlines, table rules, field underlines */
  --on-rod:#FDFAF4;              /* text on the red thread */
  --on-blaa:#F9FAFC;              /* text on the blue thread */
  --on-blaek:#F6F1E9;              /* text on the ink ground */
  --on-blaek-mute:#AFB1B5;              /* secondary text on the ink ground */

  /* what each thread does on the page */
  --linen:var(--lin);
  --linen-2:var(--lin-2);
  --linen-3:var(--lin-3);
  --ink:var(--blaek);
  --ink-2:var(--blaek-mute);
  --rule:var(--traad);
  --red:var(--rod);
  --red-ink:var(--rod-dyb);
  --blue:var(--blaa);
  --blue-ink:var(--blaa-dyb);
  --on-red:var(--on-rod);
  --on-blue:var(--on-blaa);
  --on-ink:var(--on-blaek);
  --on-ink-2:var(--on-blaek-mute);

  --wrap:1260px;
  --gut:40px;
  --read:66ch;
  --rhythm:56px;

  --fd:'Fraunces',Georgia,'Times New Roman',serif;
  --fb:'Karla',-apple-system,'Segoe UI',system-ui,sans-serif;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--linen);color:var(--ink);font:400 1.02rem/1.62 var(--fb);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--fd);font-weight:400;margin:0;line-height:1.06;
  letter-spacing:-.012em;font-variation-settings:"SOFT" 30,"opsz" 72;text-wrap:balance}
h1{font-size:clamp(2.4rem,4.8vw,4.4rem)}
h2{font-size:clamp(1.55rem,2.6vw,2.3rem)}
h3{font-size:1.3rem}
h4{font-size:1.06rem}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}
.red{color:var(--red-ink)}
.cap{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.center{text-align:center}
.vh{position:absolute;left:-9999px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:var(--on-red);
  padding:11px 16px;z-index:300;text-decoration:none;font-weight:600}
.skip:focus{left:12px;top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------------------------------------------------------------- the hem */
/* The band is written once to /img/hem.svg and drawn here, so it is fetched a
   single time for the whole site instead of twice per page in the markup. It is
   stretched to the viewport, never tiled, so there is no seam to line up.
   The foot is a second file, offset in the motif sequence. It is NOT this one
   turned over: the border carries runes, and an inverted rune reads as the
   opposite of the thing it names. Never put a transform on .hem. */
.hem{height:110px;background:var(--linen) url("/img/hem.svg") center/100% 110px no-repeat}
.hem.foot{background-image:url("/img/hem-foot.svg")}

/* ---------------------------------------------------------------- header */
.top{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:20px 0 18px;border-bottom:1px solid var(--rule)}
.brand{font-family:var(--fd);font-size:1.55rem;text-decoration:none;letter-spacing:-.01em;
  white-space:nowrap}
.brand b{font-weight:400;color:var(--red-ink)}
.nav{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.nav a{text-decoration:none;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--red-ink)}
.top .r{display:flex;gap:16px;align-items:center;font-size:.88rem}
.top .r a{text-decoration:none;white-space:nowrap}
.top .r .wa{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2)}
.top .r .wa:hover{color:var(--ink)}
.top .r .wa svg{width:16px;height:16px}
.mburger{display:none;background:none;border:1px solid var(--ink);color:var(--ink);
  font:600 .74rem/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;
  padding:11px 15px;cursor:pointer}

/* mobile menu: a second cloth */
.mmenu{position:fixed;inset:0;z-index:200;background:var(--linen);overflow:auto;padding:0 0 40px}
.mmenu .mhead{display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);border-bottom:1px solid var(--rule)}
.mclose{background:none;border:1px solid var(--ink);color:var(--ink);font:600 .72rem/1 var(--fb);
  letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
.mlinks{display:grid;padding:8px var(--gut)}
.mlinks a{display:flex;gap:14px;align-items:baseline;padding:15px 0;
  border-bottom:1px solid var(--rule);text-decoration:none;font-family:var(--fd);font-size:1.3rem}
.mlinks a i{font-style:normal;font-size:.72rem;font-family:var(--fb);font-weight:600;color:var(--red-ink)}
.msec{display:flex;flex-wrap:wrap;gap:8px 20px;padding:16px var(--gut)}
.msec a{color:var(--ink-2);font-size:.94rem}
.mcta{display:grid;gap:10px;padding:10px var(--gut)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-block;padding:13px 22px;text-decoration:none;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;border:1px solid var(--red);
  background:var(--red);color:var(--on-red);cursor:pointer;font-family:var(--fb);line-height:1.2}
.btn:hover{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.btn.o{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.o:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.btn.sm{padding:9px 15px;font-size:.7rem}
.go{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---------------------------------------------------------------- the frame */
/* A photograph is held in a counted-stitch frame, the way a sampler is mounted. */
.framed{border:18px solid transparent;border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20class%3D%22%22%20viewBox%3D%220%200%2054%2054%22%20width%3D%2254%22%20height%3D%2254%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20stroke-width%3D%221.56%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%3E%3Cdefs%3E%3Cpath%20id%3D%22kx1%22%20d%3D%22M0.5%200.5L5.5%205.5M5.5%200.5L0.5%205.5%22/%3E%3C/defs%3E%3Cg%20stroke%3D%22%23D01030%22%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%220%22%20y%3D%220%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%220%22%20y%3D%226%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%220%22%20y%3D%2212%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%220%22%20y%3D%2218%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%220%22%20y%3D%2224%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%220%22%20y%3D%2230%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%220%22%20y%3D%2236%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%220%22%20y%3D%2242%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%220%22%20y%3D%2248%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%226%22%20y%3D%220%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%226%22%20y%3D%2248%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2212%22%20y%3D%220%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2212%22%20y%3D%2248%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2218%22%20y%3D%220%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2218%22%20y%3D%2248%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2224%22%20y%3D%220%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2224%22%20y%3D%2248%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2230%22%20y%3D%220%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2230%22%20y%3D%2248%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2236%22%20y%3D%220%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2236%22%20y%3D%2248%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2242%22%20y%3D%220%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2242%22%20y%3D%2248%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2248%22%20y%3D%220%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2248%22%20y%3D%226%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2248%22%20y%3D%2212%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2248%22%20y%3D%2218%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2248%22%20y%3D%2224%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2248%22%20y%3D%2230%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2248%22%20y%3D%2236%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2248%22%20y%3D%2242%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2248%22%20y%3D%2248%22/%3E%3C/g%3E%3Cg%20stroke%3D%22%23305090%22%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%226%22%20y%3D%226%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%226%22%20y%3D%2218%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%226%22%20y%3D%2230%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%226%22%20y%3D%2242%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2218%22%20y%3D%226%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2218%22%20y%3D%2242%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2230%22%20y%3D%226%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2230%22%20y%3D%2242%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2242%22%20y%3D%226%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2242%22%20y%3D%2218%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2242%22%20y%3D%2230%22/%3E%3Cuse%20href%3D%22%23kx1%22%20x%3D%2242%22%20y%3D%2242%22/%3E%3C/g%3E%3C/svg%3E") 18 round;background:var(--linen)}
.framed img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 55%}
.framed.tall img{aspect-ratio:4/5}
.framed.wide img{aspect-ratio:16/9}
.framed.sm{border-width:12px;border-image-slice:12}
figure.framed{margin:0}
figure.framed figcaption{padding:10px 2px 0;font-size:.88rem;color:var(--ink-2);line-height:1.5}

/* ---------------------------------------------------------------- the opening */
/* start, ikke center. En overskrift staar lige over de to spalter, og naar
   fotografiet er hoejere end teksten, skubbede centreringen teksten ned i
   midten og efterlod et hul under overskriften. Teksten begynder oeverst nu,
   hvor laeseren allerede kigger. */
.open{display:grid;grid-template-columns:7fr 5fr;gap:56px;padding:34px 0 40px;
  align-items:start}
.open.flip{grid-template-columns:5fr 7fr}
.open .lead .stx{margin:0 0 18px}
.lead h1{margin:0 0 18px}
.lead .lede{font-size:1.1rem;line-height:1.6;max-width:46ch}
.signed{margin:22px 0 0}
.stx,.rune{max-width:100%;height:auto}

/* a text opening, for pages with no single honest photograph */
.topen{padding:48px 0 34px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.topen h1{margin:14px 0 16px;max-width:20ch}
.topen .lede{font-size:1.12rem;max-width:60ch}
.topen .metas{display:flex;flex-wrap:wrap;gap:0 44px;margin:26px 0 0}
.topen .metas div{padding:10px 0}
.topen .metas .k{display:block;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600}
.topen .metas .v{display:block;font-family:var(--fd);font-size:1.35rem;margin-top:3px}

/* ---------------------------------------------------------------- sections */
.sec{padding:var(--rhythm) 0 0}
.sh{display:grid;gap:13px;margin:0 0 28px;align-items:end}
.sh .mark,.topen .mark{display:flex;align-items:flex-end;gap:15px;flex-wrap:wrap}
.sh .mark svg,.topen .mark svg{flex:none}
.sh .rune{height:34px;width:auto}
.sh h2{max-width:28ch}
.sh .side{font-size:.9rem;color:var(--ink-2);font-style:italic;margin:0}
.srule{height:48px;margin:38px 0 0;background:url("/img/srule.svg") center/100% 48px no-repeat}

/* ---------------------------------------------------------------- the legend */
.kant{margin:44px 0 0;padding:30px 0 0;border-top:1px solid var(--rule)}
.kant .lead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;
  align-items:baseline;margin:0 0 26px}
.kant .lead h3{font-family:var(--fd);font-size:1.5rem;font-weight:400}
.kant .lead p{max-width:62ch;font-size:.94rem;color:var(--ink-2);margin:0}
.kant .row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px}
.kant .r{display:grid;gap:8px;justify-items:start}
.kant .r svg{height:46px;width:auto}
.kant .r .n{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.kant .r .d{font-family:var(--fd);font-size:1.3rem;line-height:1;color:var(--blue-ink)}
.kant .r .l{font-size:.86rem;color:var(--ink-2);line-height:1.5}

/* ---------------------------------------------------------------- cards, the sampler's rows */
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px}
.card{text-decoration:none;display:grid;gap:0;align-content:start}
.card .stx{margin:13px 0 7px}
.card h3{margin:0 0 6px}
.card p{font-size:.94rem;color:var(--ink-2);line-height:1.55;margin:0}
.card .price{font-family:var(--fd);font-size:1.24rem;color:var(--red-ink);margin:9px 0 0}
.card .price small{font-family:var(--fb);font-size:.78rem;color:var(--ink-2);margin-left:6px;font-weight:400}
.card .note{font-size:.82rem;color:var(--ink-2);margin:6px 0 0;letter-spacing:.02em}
.card:hover h3{color:var(--red-ink)}

/* ---------------------------------------------------------------- prose */
.prose{max-width:var(--read)}
.prose p,.prose ul,.prose ol{margin:0 0 1.05em}
.prose h2{margin:1.5em 0 .45em}
.prose h3{margin:1.4em 0 .35em}
.prose a{color:var(--blue-ink)}
/* En knap inde i broedtekst er stadig en knap. .prose a er mere specifik end
   .btn, saa den malede den roede knap med blaa tekst: 2,15:1, som ingen kan
   laese. Fanget af kontrastvagten paa turhubben, ikke af et oeje. */
.prose a.btn{color:var(--on-red)}
.prose a.btn:hover{color:var(--on-blue)}
.prose a.btn.o{color:var(--ink)}
.prose a.btn.o:hover{color:var(--on-ink)}
.prose ul{list-style:none;padding:0}
.prose li{padding:0 0 0 22px;margin:0 0 .5em;position:relative}
/* the bullet is a single cross stitch */
.prose li::before,.tick li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;
  background:linear-gradient(45deg,transparent 40%,var(--red) 40% 60%,transparent 60%),
             linear-gradient(-45deg,transparent 40%,var(--red) 40% 60%,transparent 60%)}
.prose li svg{display:none}
.tick{list-style:none;margin:0;padding:0}
.tick li{padding:8px 0 8px 22px;border-bottom:1px solid var(--rule);position:relative}
.tick li::before{top:16px}

/* ---------------------------------------------------------------- tables */
.tscroll{overflow-x:auto}
.dtable{width:100%;border-collapse:collapse;font-size:.96rem;min-width:520px}
.dtable caption{text-align:left;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600;padding:0 0 11px}
.dtable th{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  text-align:left;padding:9px 18px 9px 0;border-bottom:2px solid var(--blue);color:var(--ink-2)}
.dtable td{padding:12px 18px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.dtable td:first-child{font-weight:600}
.dtable td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.dtable tr.hi td{background:var(--linen-2)}
.note{font-size:.86rem;color:var(--ink-2);margin:11px 0 0}
.facts{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.facts div{padding:13px 18px 15px 0;border-top:2px solid var(--blue)}
.facts .k{display:block;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600}
.facts .v{display:block;font-family:var(--fd);font-size:1.35rem;margin-top:4px}

/* the price list, with a leader */
.takst{width:100%;border-collapse:collapse;margin:20px 0 24px;max-width:520px}
.takst td{padding:10px 0;border-bottom:1px solid var(--rule)}
.takst td:last-child{text-align:right;font-family:var(--fd);font-size:1.16rem;color:var(--red-ink);
  white-space:nowrap}
.takst caption{text-align:left;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600;padding:0 0 9px}

/* the short answer: the sentence the reader came for, held in thread, before the
   argument starts. Red rule above, because that is the colour of a heading here. */
.svar{border-top:2px solid var(--red);border-bottom:1px solid var(--rule);
  padding:18px 0 20px;margin:0 0 30px;max-width:66ch}
.svar h2{font-size:1.06rem;margin:0 0 8px;color:var(--red-ink)}
.svar p{margin:0;font-size:1.09rem;line-height:1.62}
.svar p b{font-weight:600}

/* ---------------------------------------------------------------- faq */
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:17px 0;font-family:var(--fd);font-size:1.18rem;
  display:flex;gap:15px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"\00d7";color:var(--red-ink);font-family:var(--fb);font-weight:700;
  font-size:1rem;line-height:1}
.faq details[open] summary::before{color:var(--blue-ink)}
.faq .a{padding:0 0 18px 30px;color:var(--ink-2);max-width:var(--read)}
.faq .a p{margin:0 0 .7em}

/* ---------------------------------------------------------------- signature */
.sig{display:grid;grid-template-columns:170px 1fr;gap:26px;border-top:1px solid var(--rule);
  padding-top:22px;margin-top:36px}
.sig .who{font-size:.86rem;color:var(--ink-2)}
.sig .who b{display:block;color:var(--ink);font-weight:600;font-size:1rem}
.sig p{font-family:var(--fd);font-style:italic;font-size:1.32rem;line-height:1.45;max-width:52ch}
.byline{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.86rem;color:var(--ink-2);
  padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:0 0 26px}
.byline b{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- crumb, related */
.crumb{display:flex;flex-wrap:wrap;gap:7px;font-size:.76rem;color:var(--ink-2);margin:0 0 4px;
  letter-spacing:.03em}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--red-ink)}
.crumb .sep{opacity:.5}
.rel{display:grid;gap:0}
.rel a{text-decoration:none;padding:14px 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:baseline}
.rel a:first-child{border-top:1px solid var(--rule)}
.rel a .k{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.rel a .t{font-family:var(--fd);font-size:1.14rem}
.rel a:hover .t{color:var(--red-ink)}

/* ---------------------------------------------------------------- gallery */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gal .framed img{aspect-ratio:4/3}

/* the credit. Small, but never hidden and never in a colour that cannot be read. */
.credit{font-size:.74rem;color:var(--ink-2);margin:8px 0 0;line-height:1.5}
.credit a{color:var(--ink-2)}
.credits{border-top:1px solid var(--rule);padding:22px 0 0;margin:34px 0 0}
.credits h3{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  font-weight:600;margin:0 0 12px}
.credits ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.credits li{font-size:.84rem;color:var(--ink-2);line-height:1.55}

/* ---------------------------------------------------------------- the call band */
.band{background:var(--blue);color:var(--on-blue);padding:40px var(--gut);margin:var(--rhythm) 0 0}
.band .in{max-width:var(--wrap);margin:0 auto;display:grid;gap:16px}
.band h2{color:var(--on-blue);max-width:24ch}
.band p{color:var(--on-blue);opacity:.92;max-width:60ch;margin:0}
.band .btn{background:var(--on-blue);border-color:var(--on-blue);color:var(--blue-ink)}
.band .btn:hover{background:var(--red);border-color:var(--red);color:var(--on-red)}
.band .btn.o{background:transparent;color:var(--on-blue);border-color:var(--on-blue)}
.band .btn.o:hover{background:var(--on-blue);color:var(--blue-ink)}

/* ---------------------------------------------------------------- forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.fld{display:flex;flex-direction:column;gap:5px;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.fld i{font-style:italic;text-transform:none;letter-spacing:0;font-weight:400}
.fld input,.fld select,.fld textarea{font:400 1rem/1.5 var(--fb);color:var(--ink);
  background:var(--on-rod);border:1px solid var(--rule);padding:11px 12px;width:100%;border-radius:0}
.fld textarea{min-height:104px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue)}
.fld input:invalid:not(:placeholder-shown){border-color:var(--red)}
.fld.wide,.fbtns,.fmsg,.fnote{grid-column:span 2}
.fbtns{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fnote{font-size:.86rem;color:var(--ink-2);margin:0}
.fmsg{padding:13px 15px;font-size:.94rem;display:none}
.fmsg.ok{display:block;background:var(--blue);color:var(--on-blue)}
.fmsg.err{display:block;background:var(--red);color:var(--on-red)}

/* the total, on the ink ground */
.total{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;padding:18px 22px;
  background:var(--ink);color:var(--on-ink)}
.total .k{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--on-ink-2);font-weight:600}
.total .v{font-family:var(--fd);font-size:1.7rem;color:var(--on-ink)}
.total .dkk{font-size:.78rem;color:var(--on-ink-2)}
.widget{display:grid;gap:18px}
.widget h3{margin:0}
.widget .wsub{color:var(--ink-2);font-size:.95rem;margin:0}
.wstep{display:flex;align-items:center;gap:11px;margin:14px 0 8px;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.wstep .wnum{color:var(--red-ink)}

/* ---------------------------------------------------------------- joins */
/* Small rules that hold the ported widgets and the section head together. Kept
   here rather than scattered so the vocabulary above stays readable. */
.sh .lede{font-size:1.02rem;color:var(--ink-2);max-width:62ch;margin:6px 0 0}
.sh .mark .stx,.topen .mark .stx{height:26px;width:auto}
.open figure.framed{margin:0}
.truth{display:grid;gap:9px;align-content:start}
.truth .n{line-height:0}
.truth .n svg{height:13px;width:auto;max-width:100%}
.truth h3{margin:0}
.truth p{font-size:.95rem;color:var(--ink-2);margin:0;line-height:1.55}
/* the editorial two column: a rail on the left, the reading column on the right,
   so a 66ch column never leaves half a wide viewport empty */
.edgrid{display:grid;grid-template-columns:5fr 7fr;gap:44px;align-items:start}
.edgrid .edrail h2,.edgrid .edrail h3{margin:0 0 12px}
.edgrid .edrail p{color:var(--ink-2)}
.edgrid .edrail .stx{margin:0 0 14px}

/* a sub row inside a form, from the ported widgets */
.frow{display:grid;gap:18px 28px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  grid-column:1 / -1}
.form>h3,.form>p,.form>.wstep,.form>.total,.form>.wisles,.form>.wadds,.form>.hp{grid-column:1 / -1}
.widget .form{margin-top:4px}
.sig .who .stx{height:22px;width:auto;margin:0 0 9px}

/* ---------------------------------------------------------------- footer */
.kolofon{margin-top:60px;padding:28px 0 0;border-top:1px solid var(--rule);display:grid;
  grid-template-columns:2fr repeat(4,1fr);gap:30px;font-size:.94rem}
.kolofon h4{margin:0 0 10px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600;font-family:var(--fb)}
.kolofon a{display:block;text-decoration:none;padding:2px 0}
.kolofon a:hover{color:var(--red-ink)}
.kolofon .fbrand p{max-width:32ch;margin:12px 0 0}
.legal{margin:30px 0 26px;padding-top:14px;border-top:1px solid var(--rule);font-size:.84rem;
  color:var(--ink-2);display:grid;gap:8px}
.legal .net{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.legal .net b{font-weight:600;color:var(--blue-ink);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;margin-right:6px}
.legal a{text-decoration:none}
.legal a:hover{text-decoration:underline}

/* En mailadresse har ingen mellemrum at ombryde ved. I to kolonner på en
   telefon skød den 77 px ud over skærmkanten og gjorde hele dokumentet
   bredere end skærmen. */
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  :root{--gut:26px;--rhythm:46px}
  .nav{display:none}
  .mburger{display:inline-block}
  .top .r .wa span{display:none}
  /* Fra her er sitet i en hånd. Et trykmål skal kunne rammes med en tommel,
     og en etiket skal kunne læses uden at blive holdt op til øjet. Målt med
     build/mobile.py, ikke skønnet. */
  .top .r .wa{min-width:44px;min-height:44px;justify-content:center}
  .mburger{padding:14px 15px;font-size:.78rem}
  .kolofon a{padding:9px 0}
  .cap,.credit,.credits h3,.dtable caption,.dtable th,.facts .k,.kant .r .n,
  .ledger .lpick label,.legal .net b,.mlinks a i,.rel a .k,.topen .metas .k,
  .total .k,.btn.sm,.wstep .wnum{font-size:.75rem}
  /* Brødkrummen er en tekststi og ikke en knaprække. Den bliver ikke 40 px
     høj, men den får luft nok til at en fejlramt tommel ikke lander på den
     næste henvisning. */
  .crumb{gap:10px;line-height:2}
  /* Den porterede transfer-widget er fælles for hele netværket og bliver ikke
     forgrenet. De tre mål rettes her, i vores eget ark, additivt. */
  .sbx-swap,.sbx-clear{min-width:40px;min-height:40px}
  .sbx-tabs button,.sbx-chips button{min-height:44px}
  .sbx-chk{display:inline-flex;align-items:center;min-height:44px}
  .sbx-chk input[type=checkbox]{width:22px;height:22px}
  .four{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .kant .row{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .open,.open.flip,.two{grid-template-columns:1fr;gap:28px}
  .three,.edgrid{grid-template-columns:1fr;gap:28px}
  .sig,.rel a{grid-template-columns:1fr;gap:8px}
  .hem{height:62px;background-size:100% 62px}
  .srule{height:32px;background-size:100% 32px}
  .frow{grid-template-columns:1fr}
}
@media (max-width:600px){
  :root{--gut:22px}
  /* Hovedet: fire ting i rækken fyldte 430 px på en 375 px skærm, og et
     dokument, der er bredere end skærmen, kan skubbes sidelæns hele vejen
     ned. Kontaktknappen står allerede i mobilmenuen under "Skriv til os",
     så den er den, der går. */
  .top .r .btn.sm{display:none}
  .four{grid-template-columns:1fr}
  .kant .row{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .fld.wide,.fbtns,.fmsg,.fnote{grid-column:span 1}
  .kolofon{grid-template-columns:1fr 1fr}
  .band{padding:30px var(--gut)}
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.shot *{transition:none!important;animation:none!important}