:root{
  --kalk:#f5f4ef; --kalk-2:#ecebe4; --hor:#e2dcd0; --hor-2:#cfc6b6;
  --gustav:#7d949b; --gustav-d:#4e666e; --gustav-dd:#3a4d53;
  --rosa:#c49c98; --rosa-d:#9a6f6b; --tin:#8e8a80;
  --ink:#2c3336; --muted:#5d6264;
  --display:Didot,"Bodoni 72","Bodoni MT","Hoefler Text","Big Caslon",Georgia,serif;
  --body:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",Georgia,serif;
  --w:70rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kalk);color:var(--ink);font:1.08rem/1.72 var(--body)}
a{color:var(--gustav-d);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--rosa-d)}
:focus-visible{outline:2px solid var(--rosa-d);outline-offset:3px}
img,svg{max-width:100%}
.skip{position:absolute;left:-999px;top:0;background:var(--gustav-d);color:#fff;padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem}

/* header */
.top{background:var(--kalk);border-bottom:1px solid var(--hor-2);box-shadow:0 3px 0 var(--kalk),0 4px 0 var(--hor-2)}
.top-inner{max-width:var(--w);margin:0 auto;padding:1.1rem 1.25rem .9rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.8rem;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
.mark{color:var(--gustav-d);display:flex}
.brand-name{display:block;font:italic 400 2.1rem/1 var(--display);letter-spacing:.01em}
.brand small{display:block;font:italic .92rem/1.3 var(--body);color:var(--muted);margin-top:.25rem}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1rem .2rem}
.nav li{position:relative}
.nav a,.nav .lbl{display:block;padding:.35rem .6rem;color:var(--ink);text-decoration:none;font:1rem/1.2 var(--body);border-bottom:2px solid transparent}
.nav a:hover{color:var(--gustav-d);border-bottom-color:var(--hor-2)}
.nav a[aria-current],.nav .trail>a{color:var(--gustav-d);border-bottom-color:var(--gustav)}
.nav li ul{display:none;position:absolute;left:0;top:100%;background:var(--kalk);border:1px solid var(--hor-2);min-width:13rem;flex-direction:column;padding:.3rem;z-index:20}
.nav li:hover>ul,.nav li:focus-within>ul{display:flex}
.navtoggle{position:absolute;opacity:0;pointer-events:none}
.navbtn{display:none;cursor:pointer;font:1rem var(--body);border:1px solid var(--hor-2);padding:.35rem .8rem;border-radius:2rem;background:#fff}
.navtoggle:focus-visible+.navbtn{outline:2px solid var(--rosa-d);outline-offset:3px}
@media (max-width:900px){
  .top-inner{align-items:center}
  .navbtn{display:inline-block}
  .nav{width:100%}
  .nav>ul{display:none;flex-direction:column;margin-top:.6rem;border-top:1px solid var(--hor-2)}
  .navtoggle:checked~ul{display:flex}
  .nav a{padding:.6rem .2rem;border-bottom:1px solid var(--hor)}
  .nav li ul{display:flex;position:static;border:0;padding-left:1rem}
}

/* the painted panel: the one bold element */
.panel{position:relative;background:var(--kalk-2);padding:clamp(1.6rem,4vw,3rem);border:1px solid var(--hor-2);box-shadow:inset 0 0 0 10px var(--kalk-2),inset 0 0 0 11px var(--hor-2),inset 0 0 0 14px var(--kalk-2),inset 0 0 0 15px var(--hor-2)}
.panel::before{content:"";position:absolute;inset:0;background:url(chips.svg) 0 0/100% 100% no-repeat;pointer-events:none;opacity:.9}
.panel>*{position:relative}

/* hero */
.hero{background:var(--gustav);padding:clamp(1rem,3vw,2.2rem) 1.25rem}
.hero .panel{max-width:var(--w);margin:0 auto;padding:clamp(2.4rem,7vw,5.5rem) clamp(1.6rem,6vw,5rem);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2rem;align-items:center}
.kicker{font:italic 1.05rem/1.4 var(--body);color:var(--gustav-d);margin:0}
.hero h1{font:400 clamp(2.5rem,6.2vw,4.8rem)/1.02 var(--display);margin:.6rem 0 1.1rem;color:var(--ink);letter-spacing:-.01em;max-width:15ch}
.hero .lede{font-size:1.18rem;max-width:36rem;color:var(--muted);margin:0}
.hero-cta{margin:1.8rem 0 0;display:flex;gap:.7rem 1.4rem;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;background:var(--gustav-d);color:#fff;font:1.02rem/1 var(--body);padding:.85rem 1.4rem;text-decoration:none;border-radius:2rem}
.btn:hover{background:var(--gustav-dd);color:#fff}
.textlink{font-style:italic}
.hero-chair{color:var(--gustav-d);justify-self:center;width:min(100%,250px);opacity:.9}
@media (max-width:760px){.hero .panel{grid-template-columns:1fr}.hero-chair{display:none}}

/* page head */
.pagehead{background:var(--gustav);padding:clamp(.8rem,2.4vw,1.6rem) 1.25rem}
.pagehead .panel{max-width:52rem;margin:0 auto}
.pagehead h1{font:400 clamp(2rem,4.6vw,3.2rem)/1.08 var(--display);margin:.5rem 0 .6rem;letter-spacing:-.005em}
.pagehead .lede{font-size:1.12rem;color:var(--muted);margin:.4rem 0 0;max-width:40rem}
.crumbs{font:italic .95rem var(--body);color:var(--muted)}
.crumbs a{color:var(--gustav-d);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{margin:0 .35rem;color:var(--tin)}
.meta{font:.95rem var(--body);color:var(--muted);margin:.2rem 0;display:flex;flex-wrap:wrap;gap:.2rem .9rem;align-items:center}
.meta a{color:var(--gustav-d);text-decoration:none}
.meta a:hover{text-decoration:underline}
.swatch{display:inline-block;width:.8em;height:.8em;border-radius:50% 45% 55% 48%;background:var(--tin);vertical-align:-.05em;margin-right:.4em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sw-moebelmaling{background:var(--gustav)}
.sw-stil-og-indretning{background:var(--rosa)}
.sw-upcycling{background:#a7a27a}
.sw-vintage-fund{background:#b59a6a}

/* content */
.content{max-width:42rem;margin:3rem auto 3.5rem;padding:0 1.25rem}
.content>p:first-child{font-size:1.2rem;line-height:1.65}
.content h2{font:400 2rem/1.15 var(--display);color:var(--ink);margin:2.8rem 0 .8rem}
.content h2::after{content:"";display:block;width:3.2rem;height:2px;background:var(--rosa);margin-top:.6rem;border-radius:2px}
.content h3{font:italic 600 1.28rem/1.3 var(--body);color:var(--gustav-dd);margin:1.9rem 0 .4rem}
.content ul,.content ol{padding-left:1.3rem}
.content li{margin:.35rem 0}
.content li::marker{color:var(--gustav)}
.content blockquote{margin:1.8rem 0;padding:1.1rem 1.4rem;background:var(--kalk-2);border-left:3px solid var(--rosa);font-style:italic}
.content blockquote p{margin:.3rem 0}
.content table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.97rem}
.content th,.content td{padding:.6rem .7rem;border-bottom:1px solid var(--hor-2);text-align:left;vertical-align:top}
.content th{font-weight:600;background:var(--hor);color:var(--ink)}
.content hr{border:0;height:1px;background:var(--hor-2);margin:2.4rem 0}
@media (max-width:640px){.content table{display:block;overflow-x:auto;font-size:.92rem}.content th,.content td{min-width:7.5rem}}
.tags{margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--hor-2);font-size:.95rem;color:var(--muted)}
.tags a,.tags span.t{display:inline-block;margin:.15rem .2rem;padding:.12rem .7rem;border:1px solid var(--hor-2);border-radius:2rem;text-decoration:none;color:var(--gustav-dd);background:#fff}
.tags a:hover{border-color:var(--gustav)}
.home-content{margin-top:3.4rem}

/* cards: small panels */
.band{padding:3rem 1.25rem 1rem;background:var(--hor)}
.band-inner{max-width:var(--w);margin:0 auto}
.section-title{font:400 2rem/1.1 var(--display);margin:0 0 1.4rem;color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(18rem,100%),1fr));gap:1.4rem}
.card{background:var(--kalk);border:1px solid var(--hor-2);box-shadow:inset 0 0 0 6px var(--kalk),inset 0 0 0 7px var(--hor);padding:1.5rem 1.5rem 1.6rem;display:flex;flex-direction:column}
.card .cat{font:italic .95rem var(--body);color:var(--muted);margin:0 0 .5rem}
.card h3{font:400 1.45rem/1.2 var(--display);margin:0 0 .6rem}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--gustav-d);text-decoration:underline;text-decoration-thickness:1px}
.card p.desc{margin:0;color:var(--muted);font-size:.98rem;line-height:1.6}
.all{margin:1.6rem 0 1rem;font-style:italic}

/* list */
.chips{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem}
.chips a{display:flex;align-items:center;padding:.3rem .85rem;border:1px solid var(--hor-2);background:#fff;color:var(--ink);text-decoration:none;font-size:.95rem;border-radius:2rem}
.chips a:hover{border-color:var(--gustav)}
.chips a[aria-current]{background:var(--gustav-d);border-color:var(--gustav-d);color:#fff}
.list-wrap{max-width:46rem;margin:2.6rem auto 3.5rem;padding:0 1.25rem}
.rows{display:flex;flex-direction:column}
.row{padding:1.5rem 0;border-bottom:1px solid var(--hor-2)}
.row:first-child{padding-top:0}
.row h2{font:400 1.7rem/1.18 var(--display);margin:.2rem 0 .4rem}
.row h2 a{color:var(--ink);text-decoration:none}
.row h2 a:hover{color:var(--gustav-d);text-decoration:underline;text-decoration-thickness:1px}
.row p{margin:.3rem 0 0;color:var(--muted)}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:1.8rem;font-style:italic}
.big404{font:400 clamp(4rem,12vw,7rem)/1 var(--display);color:var(--gustav);margin:0}

/* footer */
.foot{background:var(--gustav-dd);color:#dfe5e6;margin-top:0}
.foot-inner{max-width:var(--w);margin:0 auto;padding:2.8rem 1.25rem 1.4rem;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
@media (max-width:760px){.foot-inner{grid-template-columns:1fr}}
.foot-name{font:italic 400 1.7rem/1.1 var(--display);color:#fff;margin:0 0 .5rem}
.foot-h{font:italic 1.05rem var(--body);color:#c9d4d6;margin:0 0 .5rem;border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:.3rem}
.footlinks{list-style:none;margin:0;padding:0}
.footlinks li{margin:.3rem 0}
.foot a{color:#fff;text-decoration:none}
.foot a:hover{text-decoration:underline}
.copy{max-width:var(--w);margin:0 auto;padding:1.1rem 1.25rem 1.8rem;font-size:.92rem;color:#c3cdcf;border-top:1px solid rgba(255,255,255,.15)}
@media print{.top,.foot,.band,.hero-chair{display:none}.panel::before{display:none}}
