/* As Seen on TV — the wing's shared stylesheet (index and coming-soon).
   Palette, fonts, grain and chrome come from /css/tokens.css. The shelf and
   card rules follow /labs/index.html so the wing reads as part of the lab. */
body{background:var(--bark);color:var(--parchment);font-family:var(--serif);
  font-weight:360;font-size:17px;line-height:1.58;overflow-x:hidden}
.wrap{max-width:980px;margin:0 auto;padding:56px 28px 90px;position:relative;z-index:2}
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--brass)}
.eyebrow{margin-top:34px}
h1{font-style:italic;font-variation-settings:'opsz' 144;font-weight:380;
  font-size:clamp(46px,8.5vw,104px);line-height:.98;letter-spacing:-.015em;
  margin:26px 0 14px;text-align:center}
h1 em{color:var(--ember);font-style:italic}
.dek{text-align:center;color:var(--parchment-dim);font-style:italic;max-width:680px;margin:0 auto 8px;font-size:19px}
.dateline{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);text-align:center;margin-top:16px}
.dateline a{color:var(--brass)}
.dateline a:hover{color:var(--ember)}

/* how verdicts work */
.how{margin-top:64px}
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.kind{border:1px solid var(--line);border-radius:10px;padding:18px 18px 16px;
  background:linear-gradient(180deg,var(--panel),var(--bark-2))}
.kind .chip{display:inline-block}
.kind p{color:var(--parchment-dim);font-size:14.5px;font-style:italic;margin-top:10px;line-height:1.5}
.rules{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 34px;list-style:none}
.rules li{color:var(--parchment-dim);font-size:15.5px;border-left:2px solid var(--line);padding-left:12px}
.rules li b{color:var(--parchment);font-weight:500}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pipeline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-label,var(--faint))}
.pipeline span{border:1px solid var(--line);border-radius:4px;padding:4px 9px;color:var(--parchment-dim)}
.pipeline i{font-style:normal;color:var(--brass)}
.fair{margin-top:26px;border-left:3px solid var(--slate);background:var(--bark-2);padding:14px 18px;
  color:var(--parchment-dim);font-size:15px}
.fair b{color:var(--parchment);font-weight:500}

/* shelves and cards — the /labs/ index's own rules */
.shelf{margin-top:84px}
.shelf-head{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:12px}
.shelf-head h2{font-style:italic;font-weight:420;font-size:30px;letter-spacing:-.01em}
.shelf-head .shelf-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.shelf-sub{color:var(--parchment-dim);font-style:italic;margin-top:10px;font-size:16px}
.bench{display:block;margin-top:26px;border-top:1px solid var(--line)}
.card{border-bottom:1px solid var(--line);padding:30px 0 28px;position:relative;display:grid;
  grid-template-columns:minmax(190px,.58fr) minmax(300px,1.42fr);gap:9px 34px;transition:border-color .25s ease}
.card:hover{border-color:var(--brass)}
.card>.chip,.card>h3,.card>.tags{grid-column:1}
.card>.chip{grid-row:1}
.card>h3{grid-row:2}
.card>.tags{grid-row:3 / span 3;align-content:start}
.card>.story,.card>.ep-claim,.card>.ep-verdict,.card>.detail,.card>.doors{grid-column:2}
.chip{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  padding:4px 9px;border-radius:4px;border:1px solid;align-self:flex-start;justify-self:start}
.chip.live{color:var(--moss);border-color:rgba(138,168,107,.45);background:rgba(138,168,107,.08)}
.chip.demo{color:var(--gold);border-color:rgba(217,164,65,.45);background:rgba(217,164,65,.08)}
.chip.research{color:var(--slate);border-color:rgba(143,163,173,.45);background:rgba(143,163,173,.08)}
.chip.resting{color:var(--ash);border-color:rgba(111,101,87,.5);background:rgba(111,101,87,.1)}
.chip.verdict{color:var(--ember);border-color:rgba(232,131,58,.5);background:rgba(232,131,58,.08)}
.card h3{font-style:italic;font-weight:430;font-size:24px;line-height:1.1}
.card h3 a{color:var(--parchment);text-decoration:none}
.card h3 a:hover{color:var(--ember)}
.card .story{color:var(--parchment-dim);font-size:15.5px}
.card .story b,.card .ep-claim b{color:var(--parchment);font-weight:500}
.card .ep-claim{color:var(--parchment-dim);font-size:15px}
.ep-src{display:block;margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--faint);font-style:normal}
.ep-src a{color:var(--brass)}
.ep-src a:hover{color:var(--ember)}
.card .ep-verdict{color:var(--parchment);font-size:16px}
.card .ep-verdict .chip{margin-right:8px;vertical-align:2px}
.card .detail{font-size:13.5px;font-style:italic;color:var(--faint);border-left:2px solid var(--line);padding-left:12px}
.card .detail b{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);font-weight:500;margin-right:4px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--faint);
  border:1px solid var(--line);border-radius:4px;padding:3px 8px;height:max-content}
.doors{display:flex;flex-wrap:wrap;gap:14px;border-top:1px solid var(--line);padding-top:13px}
.doors a{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--brass);text-decoration:none}
.doors a:hover{color:var(--ember)}
.idea-list{list-style:none;margin-top:22px;display:grid;gap:10px}
.idea-list li{color:var(--parchment-dim);font-size:15.5px;border-left:2px solid var(--line);padding-left:12px}
.idea-list li b{color:var(--parchment);font-weight:500}
.closing{margin-top:90px;text-align:center}
.closing p{font-style:italic;color:var(--parchment-dim);max-width:600px;margin:0 auto}
.closing a{color:var(--brass)}
.closing a:hover{color:var(--ember)}
code{font-family:var(--mono);font-size:.86em;color:var(--gold);background:rgba(217,164,65,.08);padding:1px 5px;border-radius:3px}
@media (max-width:760px){.kinds{grid-template-columns:1fr}.rules{grid-template-columns:1fr}}
@media (max-width:560px){
  .wrap{padding:40px 18px 70px}
  .shelf{margin-top:60px}
  .card{grid-template-columns:1fr;gap:11px;padding:24px 0}
  .card>*{grid-column:1!important;grid-row:auto!important}
}

/* coming soon */
.card>.ep-tools{grid-column:2}
.card .ep-tools{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ink-label,var(--faint))}
.card .ep-tools b{color:var(--brass);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:10px;margin-right:4px}
.ep-when{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin:0 6px 0 4px;white-space:nowrap}
.idea-list li a,.shelf-sub a{color:var(--brass)}
.idea-list li a:hover,.shelf-sub a:hover{color:var(--ember)}
.workshop{list-style:none;margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 34px}
.workshop li{color:var(--parchment-dim);font-size:15.5px;border-left:2px solid var(--line);padding-left:12px}
.workshop li b{color:var(--parchment);font-weight:500}
.workshop-src{margin-top:14px;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.workshop-src a{color:var(--brass)}
@media (max-width:760px){.workshop{grid-template-columns:1fr}}