

.info{padding-bottom:var(--s5)}
.info section{padding:var(--s4) 0; border-top:1px solid var(--p600)}
.info section:first-child{border-top:0; padding-top:var(--s3)}
.info p{margin:0 0 var(--s2); font:400 16px/1.6 var(--sans);
   color:var(--p200); max-width:68ch}
.info p:last-child{margin-bottom:0}
.info a{color:var(--p050)}
.info a:hover{color:var(--sky)}
.info a.primary-action{color:var(--p900)}

 
.intro{display:flex; align-items:center; justify-content:space-between;
   gap:var(--s4); flex-wrap:wrap}
.intro .txt{flex:1 1 460px}
.intro h1{font:500 28px/1.2 var(--sans); letter-spacing:-.015em;
   color:var(--p050); margin:0 0 var(--s2)}
.intro .lead{font:400 20px/1.5 var(--sans); color:var(--p200)}
.intro .lead b{font-weight:400; color:var(--ochre)}
.intro .act{flex:0 0 auto}

 
.original .player{width:100%; height:152px; border:0; border-radius:12px;
   display:block; background:var(--p800)}
.original .caption{margin-top:var(--s2); font:400 13px/1.5 var(--mono);
   color:var(--p400)}

 
.steps{list-style:none; margin:0; padding:0; counter-reset:step;
   display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s4)}
.steps li{counter-increment:step}
.steps li::before{content:counter(step); display:block;
   font:400 13px/1 var(--mono); color:var(--ochre); margin-bottom:var(--s2)}
.steps h2{font:500 18px/1.3 var(--sans); color:var(--p050);
   margin:0 0 var(--s1)}
.steps .example{font:400 14px/1.5 var(--mono); color:var(--p400);
   margin-bottom:var(--s1)}

 
.facts{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s4)}

 
.again{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.again p{margin:0; font:400 20px/1.5 var(--sans); color:var(--p050)}

@media (max-width:820px){
  .info section{padding:var(--s3) 0}
  .intro h1{font-size:24px}
  .intro .lead{font-size:17px}
  .steps, .facts{grid-template-columns:1fr; gap:var(--s3)}
}

 
.info .plain{list-style:none; margin:0; padding:0; max-width:68ch}
.info .plain li{margin:0 0 var(--s2); font:400 16px/1.6 var(--sans);
   color:var(--p200)}
.info .plain li:last-child{margin-bottom:0}
.info b{font-weight:500; color:var(--p050)}
.info .links{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3);
   font:400 13px/1.5 var(--mono)}


.info .jarre{margin-top:var(--s2)}
.info .jarre .links{max-width:none; margin:0 0 var(--s1);
   display:grid; grid-template-columns:8ch 1fr; gap:var(--s2)}
.info .jarre .lbl{color:var(--p400)}
.info .jarre .grp{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3)}

 
.info form.report{max-width:68ch; display:flex; flex-direction:column;
   gap:var(--s1)}
.info form.report label{font:400 12px/1.4 var(--mono); color:var(--p200);
   margin-top:var(--s2)}
.info form.report label:first-child{margin-top:0}
.info form.report .opt{color:var(--p400)}
.info form.report input, .info form.report select,
.info form.report textarea{background:var(--p700);
   border:1px solid var(--p600); border-radius:2px; padding:10px 12px;
   color:var(--p050); font:400 15px/1.4 var(--sans); width:100%}
.info form.report .send{align-self:flex-start; margin-top:var(--s3);
   background:var(--p050); color:var(--p900); border:0; border-radius:2px;
   font:600 15px/1 var(--sans); padding:14px 26px; cursor:pointer}
.info form.report .send[disabled]{opacity:.45; cursor:default}
.info form.report .said{margin:var(--s1) 0 0; color:var(--p050)}
 
.info p.sub{padding-left:var(--s3)}
.info p.modified{color:var(--p400); font-size:13px}
