/* The house style for knolling.com and disassembled.com.
   The same file sits in both sites. If you change it in one, copy it to
   the other, so the two keep looking like one site with two tabs. */
:root{
  --ink:#111; --paper:#fff; --grey:#e6e6e6;
  --link:#0000ee; --seen:#551a8b;
  --yellow:#ffd23f;
  --mono:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:Helvetica,Arial,sans-serif;
  /* Body text is STIX Two at 22px on a 33px line, for a look like the body text on
     Wirecutter. STIX Two has small letters, so 22px reads like 20px in most fonts.
     Times stands in until it loads. Headings are Anton. */
  --body:"STIX Two Text","Times New Roman",Times,Georgia,serif;
  --head:Anton,Impact,"Arial Narrow",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:22px/1.5 var(--body)}
.wrap{max-width:900px;margin:0 auto;padding:0 20px}
a{color:var(--link)}
a:visited{color:var(--seen)}
a:hover{background:var(--yellow);color:var(--ink)}
img{max-width:100%;height:auto}

/* The tabs. Both sites show the same two tabs, in the same order.
   The tab for the site you are on is open. The logos are the tabs. */
.tabbar{border-bottom:2px solid var(--ink);padding-top:12px}
.tabs{display:flex;align-items:flex-end;gap:6px;margin-bottom:-2px}
.tab{display:block;padding:8px 8px;border:2px solid var(--ink);background:var(--grey)}
.tab:hover{background:var(--paper)}
.tab.on,.tab.on:hover{background:var(--paper);border-bottom:0;padding-top:12px;padding-bottom:10px}
/* The logos shrink together on small screens so both tabs always fit. */
.wm{display:block;width:auto;height:min(26px,calc((100vw - 90px) / 18.91))}
.tab:not(.on) .wm{opacity:.5}
.tab:not(.on):hover .wm{opacity:1}

/* The knolling logo knolls itself when you point at it. Each part carries its
   resting place in --b and its knolled place in --k. See the README. */
.wm .p{transform:var(--b);transition:transform .65s cubic-bezier(.3,1.1,.4,1);transition-delay:calc(var(--i) * 16ms)}
.tab:hover .wm .p,.tab:focus-visible .wm .p,.wm.knolled .p{transform:var(--k)}
@media (prefers-reduced-motion:reduce){.wm .p{transition:none}}

h1,h2,h3,h4{font-family:var(--head);font-weight:400;text-transform:uppercase;text-wrap:balance}
h1{font-size:clamp(40px,10.8vw,96px);line-height:1.02;letter-spacing:.005em;margin:28px 0 8px}
.sub{font-size:22px;font-weight:700;line-height:1.3;margin:0 0 16px}
h2{font-size:32px;line-height:1.1;letter-spacing:.02em;margin:52px 0 10px}
h3{font-size:26px;line-height:1.15;letter-spacing:.02em;margin:32px 0 6px}
h4{font-size:22px;line-height:1.2;letter-spacing:.02em;margin:26px 0 6px}
p,ul,ol{margin:0 0 16px;max-width:32em}
li{margin-bottom:6px}
figure{margin:20px 0;max-width:32em}
figure img{display:block;width:100%}
figcaption{font-size:18px;line-height:1.45;margin-top:8px}
.plain{list-style:none;padding:0}
/* One big number, set like a heading. */
.big{font-family:var(--head);font-size:64px;line-height:1;text-transform:uppercase;margin:0 0 8px}
footer{margin-top:64px;border-top:2px solid var(--ink);padding:16px 0 44px;font-size:17px}
footer p{margin:0 0 4px;max-width:none}

@media (min-width:600px){
  .tabbar{padding-top:16px}
  .tab{padding:11px 16px}
  .tab.on,.tab.on:hover{padding-top:15px;padding-bottom:13px}
}