/* StrongCalc. Palette taken from the gym floor: iron, chalk, and bumper-plate red, blue, yellow. */
:root{
  --iron:#1b2126; --steel:#56616b; --rule:#cfd6dc; --chalk:#eef1f3; --paper:#ffffff;
  --red:#d3281c; --blue:#1d4fb8; --yellow:#f0b400;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden],.off{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--chalk);color:var(--iron);font:400 17px/1.55 var(--body)}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--iron)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--paper);padding:8px 12px;z-index:9}

/* header */
.top{background:var(--iron);color:#fff}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:700 26px/1 var(--display);letter-spacing:.01em}
.brand:hover{color:#fff}
.brand-bar{display:flex;align-items:center;gap:2px}
.brand-bar i{display:block;width:5px;border-radius:1px}
.brand-bar i:nth-child(1){height:22px;background:var(--red)}
.brand-bar i:nth-child(2){height:18px;background:var(--blue)}
.brand-bar i:nth-child(3){height:13px;background:var(--yellow)}
.top nav{display:flex;gap:4px 18px;flex-wrap:wrap}
.top nav a{color:#c9d1d8;text-decoration:none;font-weight:500;font-size:15px;padding:4px 0;border-bottom:2px solid transparent}
.top nav a:hover{color:#fff}
.top nav a[aria-current]{color:#fff;border-bottom-color:var(--yellow)}

/* type */
h1{font:700 clamp(40px,7vw,64px)/.98 var(--display);margin:0 0 14px;letter-spacing:-.005em}
h2{font:700 30px/1.1 var(--display);margin:44px 0 10px}
.lede{font-size:20px;line-height:1.45;color:var(--steel);max-width:36em;margin:0 0 28px}
.page{padding-top:44px;padding-bottom:72px}
.prose{max-width:66ch}
.prose p,.prose ul{margin:0 0 16px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:6px}

/* home */
.hero{background:var(--paper);border-bottom:1px solid var(--rule);padding:56px 0 0;overflow:hidden}
.hero h1{max-width:11em}
.rack{display:flex;align-items:center;justify-content:center;gap:5px;height:150px;margin-top:20px}
.rack b{display:block;height:12px;flex:1;max-width:520px;background:linear-gradient(#8f99a2,#56616b);border-radius:2px}
.rack i{display:block;width:20px;height:96px;border-radius:4px}
.rack i.big{width:26px;height:138px}
.rack .p{background:var(--red)}.rack .c{background:var(--blue);height:118px}.rack .t{background:var(--yellow);height:78px;width:16px}
.h-list{margin-top:0}
.index{list-style:none;margin:0 0 20px;padding:0;border-top:3px solid var(--iron)}
.index a{display:grid;grid-template-columns:minmax(0,22rem) 1fr;gap:4px 28px;padding:18px 4px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--iron);align-items:baseline}
.index .n{font:700 28px/1.1 var(--display)}
.index .d{color:var(--steel)}
.index a:hover{background:var(--paper)}
.index a:hover .n{color:var(--red)}

/* calculator */
.tool{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0;background:var(--paper);border:1px solid var(--rule);border-top:4px solid var(--iron);margin-bottom:8px}
.form{padding:24px;display:grid;gap:16px;align-content:start}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{display:grid;gap:6px;align-content:start;min-width:0}
.f label,.f .lab,.seg legend{font-weight:600;font-size:15px}
.f small{color:var(--steel);font-size:13.5px;line-height:1.35}
input[type=number],select{width:100%;min-width:0;height:48px;padding:0 12px;font:500 18px var(--body);color:var(--iron);background:#fff;border:1.5px solid #9aa5ae;border-radius:4px}
select{padding-right:8px;font-size:16px}
input:focus,select:focus{border-color:var(--blue);outline:3px solid rgba(29,79,184,.22);outline-offset:0}
.unit{position:relative;display:block}
.unit input{padding-right:44px}
.unit em{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--steel);font-size:15px;pointer-events:none}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0;align-items:center}
.seg legend{padding:0;margin-bottom:6px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:block;padding:9px 14px;border:1.5px solid #9aa5ae;font-weight:500;font-size:15px;cursor:pointer}
.seg label:first-of-type span{border-radius:4px 0 0 4px;border-right:0}
.seg label:last-of-type span{border-radius:0 4px 4px 0}
.seg input:checked+span{background:var(--iron);border-color:var(--iron);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.go{height:54px;border:0;border-radius:4px;background:var(--red);color:#fff;font:700 22px var(--display);letter-spacing:.02em;cursor:pointer}
.go:hover{background:#b11f15}

/* result */
.out{padding:24px;background:var(--chalk);border-left:1px solid var(--rule);display:grid;gap:16px;align-content:start}
.out p{margin:0}
.empty{color:var(--steel)}
.err{color:#a11309;font-weight:600}
.out.has{background:var(--iron);color:#fff}
.big{font-size:19px;color:#c9d1d8}
.big b{display:block;font:700 clamp(54px,9vw,84px)/.95 var(--display);color:#fff}
.tag{font-weight:600;color:var(--yellow)}
.note{font-size:15px;color:#ffd9d5;border-left:3px solid var(--red);padding-left:12px}
.plates{display:flex;gap:4px;height:44px}
.plates i{display:block;border-radius:3px;min-width:6px}
.p{background:var(--red)}.c{background:var(--blue)}.t{background:var(--yellow)}
.dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.trio dt{font-size:14.5px;color:#c9d1d8}
.trio dd{margin:2px 0 0;font:700 34px/1 var(--display)}
.rows{margin:0;border-top:1px solid #3c464e}
.rows div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #3c464e}
.rows dt{color:#c9d1d8;font-size:15.5px}
.rows dd{margin:0;font-weight:600;white-space:nowrap}
.scale{position:relative;padding:10px 0 4px}
.segs{display:flex;gap:3px;height:12px}
.segs i{display:block;background:#4a555e;border-radius:2px}
.segs i:nth-child(3n+1){background:var(--yellow)}.segs i:nth-child(3n+2){background:var(--blue)}.segs i:nth-child(3n){background:var(--red)}
.scale b{position:absolute;top:2px;width:4px;height:28px;margin-left:-2px;background:#fff;border-radius:2px;box-shadow:0 0 0 2px var(--iron)}

/* tables */
table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:16px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--rule)}
thead th{border-bottom:2px solid var(--iron);font-weight:600}
.mini{margin:0;font-size:15.5px}
.mini th,.mini td{border-color:#3c464e;padding:7px 8px}
.mini thead th{border-bottom-color:#8b96a0;color:#c9d1d8}

/* faq and links */
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:14px 0;font-weight:600}
.faq p{margin:0 0 16px}
.more{columns:2;column-gap:32px}
.foot{background:var(--paper);border-top:1px solid var(--rule);color:var(--steel);font-size:15px}
.foot-in{display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px}
.foot p{margin:0}
.foot a{margin-left:16px}
.foot a:first-child{margin-left:0}

@media (max-width:820px){
  .tool{grid-template-columns:1fr}
  .out{border-left:0;border-top:1px solid var(--rule)}
  .index a{grid-template-columns:1fr}
  .rack{height:110px}.rack i{height:70px}.rack i.big{height:100px}.rack .c{height:86px}.rack .t{height:56px}
}
@media (max-width:460px){
  body{font-size:16.5px}
  .form,.out{padding:18px}
  .grid{grid-template-columns:1fr}
  .more{columns:1}
  .top nav{gap:2px 14px}
}