/* The reading list uses the site's mission column, type, and quiet rules. */
.papers-page :where(h2,h3,p,ol){margin:0}
.papers-heading h1 span{color:var(--accent)}
/* Standalone links are the site's: 16px mono caps in the accent, carrying the
   drawn angle arrow, as /crops "Why this matters" and the careers page's
   "Explore the challenges" are. The arrow is drawn rather than typed because
   the Latin-1 Plex Mono subset has no U+2197 -- a typed one falls back to a
   system face at a fraction of the caps. */
.papers-standalone-link{
  font-family:var(--mono);font-size:16px;font-weight:400;
  letter-spacing:.02em;line-height:1.5;text-transform:uppercase;
}
.papers-page .papers-standalone-link a{color:var(--accent);text-decoration:none;transition:opacity .25s ease}
.papers-page .papers-standalone-link a:hover{opacity:.7}
.papers-page .link-arrow{
  display:inline-block;width:.7em;height:.7em;margin-left:.45em;vertical-align:baseline;
  fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:square;
}
.papers-intro-link{margin-top:26px!important}
.papers-page svg{display:inline-block;width:.68em;height:.68em;margin-left:.5em;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:square;vertical-align:baseline}
.papers-page a:focus-visible,.papers-page button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}

/* The fields as tiles, on the programme pages' goal cards: same hairline,
   18px corner, raised panel and mono eyebrow. Two up on the column, one on a
   phone. Picking one is what loads its papers underneath, so the pressed tile
   has to stay legible as the thing that is open. */
.papers-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin-top:48px}
.papers-fields[hidden],.papers-group[hidden]{display:none}
.field-tile{
  appearance:none;display:flex;flex-direction:column;align-items:flex-start;
  min-height:148px;padding:clamp(22px,2vw,28px);
  border:1px solid var(--line);border-radius:18px;
  background:rgba(255,255,255,.035);
  text-align:left;cursor:pointer;
  transition:background .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);
}
.field-tile .ft-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);margin-bottom:clamp(12px,1.5vh,18px);
  transition:color .3s cubic-bezier(.4,0,.2,1);
}
.field-tile .ft-t{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(19px,1.45vw,23px);line-height:1.22;letter-spacing:-.015em;
  color:var(--ink);margin-top:auto;
}
.field-tile:hover{background:rgba(255,255,255,.06)}
.field-tile[aria-pressed="true"]{background:rgba(255,255,255,.06);border-color:rgba(70,165,166,.45)}
.field-tile[aria-pressed="true"] .ft-n{color:var(--accent)}
.papers-count{margin-top:20px!important;color:var(--mut);font:12px/1.6 var(--mono)}
.papers-collection{display:grid;gap:64px;margin-top:46px}
.papers-group h2{font-size:clamp(23px,3vw,29px);font-weight:300;line-height:1.2;letter-spacing:-.02em;margin-bottom:22px}
.paper-list{padding:0;list-style:none}
.paper-list>li{padding:26px 0 30px;border-top:1px solid var(--line)}
.paper-citation{color:var(--mut);font:11px/1.8 var(--mono);letter-spacing:.01em}
.paper-list h3{margin-top:10px;font-size:21px;font-weight:400;line-height:1.35;letter-spacing:-.012em}
.papers-page .paper-list h3 a{color:var(--ink);text-decoration:none;transition:color .18s ease}
.papers-page .paper-list h3 a:hover{opacity:1;color:var(--accent)}
.paper-list h3 svg{color:var(--accent)}
.paper-note{margin-top:13px!important;color:var(--dim);font-size:16px;line-height:1.65}
.papers-next{margin-top:54px;padding-top:28px;border-top:1px solid var(--line)}
.papers-next p{font-size:var(--fs-body);line-height:1.6}
.papers-next>.papers-standalone-link{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:24px}

@media(max-width:520px){
  .papers-fields{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .field-tile{min-height:0}
  .papers-collection{gap:46px;margin-top:34px}
  .paper-list h3{font-size:20px}
}