/* Web fonts, self-hosted. Same faces used by the rest of the site. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/barlow-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/barlow-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/barlow-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/opensans-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Passo Leggero — home, blog index and editorial articles.
   Loaded together with policy.css, which supplies the base tokens,
   masthead, navigation and footer. */

main{padding:0 0 56px}
img{max-width:100%;display:block;height:auto}
figure{margin:0}
/* Navigation in the masthead — used by the pages added in this batch. */
.masthead .wrap{flex-wrap:wrap}
.sitenav{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px 21px;
  font-size:15.5px;font-weight:600}
.sitenav a{color:var(--ink);text-decoration:none}
.sitenav a:hover{color:var(--btn)}
.sitenav a[aria-current="page"]{color:var(--btn)}

.pagehead{padding:40px 0 8px}
.pagehead h1{max-width:18ch}
.kicker{
  font-family:"Open Sans",Barlow,sans-serif;font-weight:800;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--btn);margin:0 0 12px;
}
.pagehead .standfirst{font-size:20px;line-height:1.55;color:var(--muted);
  max-width:62ch;margin-bottom:0}

.rule{border:0;border-top:3px solid var(--btn);
  max-width:calc(var(--wide) - 44px);margin:26px auto 0}

/* ---- home: featured article ---- */
.featured{background:var(--card);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);margin-top:34px}
.featured .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:46px;
  align-items:center;padding-top:44px;padding-bottom:44px}
.featured h2{font-size:30px;margin-bottom:.45em}
.featured h2 a{color:var(--ink);text-decoration:none}
.featured h2 a:hover{color:var(--btn)}
.featured .meta{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.featured img{border-radius:6px}
.badge{display:inline-block;background:var(--amber);color:#141414;
  font-family:"Open Sans",Barlow,sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;
  border-radius:4px;margin-bottom:12px}

/* ---- article cards ---- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;
  list-style:none;padding:0;margin:0}
.cards li{margin:0}
.card{background:var(--card);border:1px solid var(--rule);border-radius:8px;
  overflow:hidden;height:100%;display:flex;flex-direction:column}
.card .tile{
  background:var(--band);border-bottom:1px solid var(--rule);
  padding:22px;font-family:"Open Sans",Barlow,sans-serif;font-weight:800;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--btn);
}
.card .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:20px;margin-bottom:.4em}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--btn)}
.card .meta{color:var(--muted);font-size:14px;margin-bottom:10px}
.card p.dek{font-size:16px;margin-bottom:0}
.more{font-weight:600;font-size:15.5px}
.card .more{margin:auto 0 0;padding-top:16px}
.allposts{margin:26px 0 0}

.section{padding:46px 0}
.section.onwhite{background:var(--card);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.section > .wrap > h2:first-child,
.section > .col > h2:first-child{margin-top:0}

/* ---- about strip on the home page ---- */
.aboutstrip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:46px}
.aboutstrip h2{margin-top:0}
.aboutstrip ul{margin:0;padding-left:20px}

/* ---- editorial article body ---- */
.article{padding:36px 0 60px}
.article .byline{color:var(--muted);font-size:15px;margin:0 0 26px;
  padding-bottom:18px;border-bottom:3px solid var(--btn)}
.article .standfirst{font-size:20px;line-height:1.55}
.article figure{margin:0 0 24px}
.article figcaption{font-size:14px;color:var(--muted);padding-top:8px}
.article img{border-radius:6px}
.claim{margin:0 0 1.3em;padding-left:19px;border-left:2px solid var(--btn)}
.claim b{display:block;margin:0 0 8px;font-family:"Open Sans",Barlow,sans-serif;
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--btn)}
.claim p{margin:0;font-size:19px;line-height:1.45;font-style:italic}
.refs{font-size:15px;margin-top:2em}
.refs ol{padding-left:22px;margin:0}
.refs li{margin-bottom:7px}
.related{border-top:1px solid var(--rule);margin-top:2.4em;padding-top:22px}
.related h3{margin-top:0}
.related ul{margin:0;padding-left:20px}

@media(max-width:820px){
  .sitenav{margin-left:0;width:100%;gap:7px 16px;font-size:15px;padding-top:4px}
  .featured .wrap{grid-template-columns:1fr;gap:24px}
  .featured h2{font-size:25px}
  .cards{grid-template-columns:1fr;gap:20px}
  .aboutstrip .wrap{grid-template-columns:1fr;gap:26px}
  .pagehead{padding-top:28px}
  .pagehead .standfirst{font-size:18px}
  .article .standfirst{font-size:18px}
  .claim p{font-size:18px}
}