/* HyperPrior, the hybrid build: the working papers, and the typographic register the positions page and the
   manual share with them. On the site's own white (--paper), on the same frame and 12 columns as every page:
   head | content at 1–4 | 5–12. The pages are generated by tools/build.py from content/site.json; they share
   shell.css (tokens, header, legal dialog), site.css and pages.css (the footer and the chrome nameplate).

   /papers/ is a card catalogue: each paper an index card on the desk, its research area's glyph on the tab, its
   number, programme and abstract typed on the ruled lines, a record of four fields (version, date, the main claim's
   stated confidence, the date it will be revisited) waiting for their stamp, and the rod hole at the foot.
   /papers/<slug>/ carries the same record and a citation slip, a strip of thermal paper with the plain citation
   and the BibTeX, copied with the Cite key (papers/cite.js). */

.pp {
  position: relative; display: block; outline: none;
  padding: calc(var(--bar-h) + var(--space-block)) var(--frame) var(--space-section);
  background: var(--paper);
}
/* the page ends in the footer's silver, on the shared ramp */
.pp::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fade-pp); pointer-events: none;
  background: var(--silver); -webkit-mask-image: var(--ramp); mask-image: var(--ramp);
}
.pp-in { position: relative; z-index: 1; }
.pp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.pp-grid > :first-child { grid-column: 1 / span 4; }
.pp-grid > :nth-child(2) { grid-column: 5 / span 8; }
.pp-arrow { width: 0.95em; height: 0.68em; flex: none; overflow: visible; }

/* ------------------------------------------------------------------ the head every page in this register shares */
.pp-title { max-width: none; margin-left: -0.04em; font-family: var(--display); font-size: var(--d6); line-height: var(--d6-lh); letter-spacing: var(--d6-ls); }
.pp-lede-row { margin-top: var(--space-head); align-items: baseline; }
.pp-lede { max-width: 19em; font-family: var(--display); font-size: var(--d3); line-height: var(--d3-lh); letter-spacing: var(--d3-ls); text-wrap: pretty; }

/* ------------------------------------------------------------------ /papers/: the card catalogue
   Two columns of cards at a desk's slight angles, the second column set half a card lower; one column on a
   phone. The whole card opens the paper (the title's link covers it); the title nudges under the pointer. */
.cat-list {
  --card: #fdfcf7;                 /* card stock */
  --card-rule: rgba(64, 104, 150, 0.15);   /* the faint blue rules */
  --card-head: rgba(166, 60, 48, 0.55);    /* the head rule, printed red */
  --card-pitch: 28px;              /* the rules' pitch; the abstract is typed on it */
  margin-top: var(--space-block); padding-top: 34px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gap) * 2); row-gap: 76px;
  padding-bottom: var(--s5);
}
/* the room for the second column's half-card drop, only when the last card is in that column (with an odd count the
   last card is on the left, and the drop is already inside the grid) */
.cat-list:has(> .cat-item:nth-child(even):last-child) { padding-bottom: 150px; }
.cat-item { position: relative; --rot: -0.5deg; }
.cat-item:nth-child(2) { --rot: 0.6deg; }
.cat-item:nth-child(3) { --rot: 0.35deg; }
.cat-item:nth-child(4) { --rot: -0.4deg; }
.cat-item:nth-child(5) { --rot: -0.2deg; }
.cat-item:nth-child(even) { top: 150px; }
.cat-card {
  position: relative; display: flex; flex-direction: column; min-height: 100%;
  padding: 26px 34px 58px; border-radius: 3px;
  color: var(--ink);
  background:
    linear-gradient(180deg, transparent 0 62px, var(--card-head) 62px 63px, transparent 63px 66px, var(--card-head) 66px 67px, transparent 67px),
    var(--card);
  box-shadow: 0 0 0 0.5px rgba(10, 11, 12, 0.12), 0 1px 1px rgba(10, 11, 12, 0.06), 0 18px 30px -18px rgba(12, 22, 32, 0.32), 0 2px 6px -2px rgba(12, 22, 32, 0.12);
  rotate: var(--rot); transform-origin: 50% 0;
  transition: translate var(--t-move) var(--ease), rotate var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease);
}
/* the tab, one of five cuts along the top edge, with the area's glyph and number */
.tab {
  position: absolute; bottom: 100%; left: calc(6% + var(--i, 0) * 16%);
  display: flex; align-items: baseline; gap: 8px; padding: 6px 14px 4px; border-radius: 6px 6px 0 0;
  background: var(--card); box-shadow: 0 -0.5px 0 0.5px rgba(10, 11, 12, 0.1), 0 -6px 10px -8px rgba(12, 22, 32, 0.25);
}
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 4px; background: var(--card); }
.tab-g { font-family: var(--display); font-size: 25px; line-height: 1; color: var(--ink); }
.tab-n { font-family: var(--text); font-size: 13.5px; line-height: 1; color: var(--quiet); font-variant-numeric: tabular-nums; }
.cat-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); max-width: none; font-size: var(--fs-meta); line-height: 1.3; }
.cat-no { color: var(--graphite); }
.cat-area { font-style: italic; color: var(--quiet); text-align: right; }
.cat-area-g { font-style: normal; font-family: var(--display); margin-right: 2px; color: var(--ink); }
.cat-t {
  margin-top: 34px; max-width: 14em;
  font-family: var(--display); font-size: var(--d3); line-height: 1.05; letter-spacing: var(--d3-ls); text-wrap: balance;
}
.cat-t a { color: inherit; text-decoration: none; }
.cat-t a::after { content: ""; position: absolute; inset: -34px 0 0; z-index: 2; }
.cat-t-in { display: inline-block; transition: translate var(--t-move) var(--ease); }
.cat-t a:focus-visible { outline: none; }
.cat-card:has(.cat-t a:focus-visible) { outline: var(--ring); outline-offset: 6px; }
/* the typed lines sit on the card's blue rules (each line carries its own rule, so they always agree) */
.cat-prog, .cat-abs {
  font-size: var(--fs-meta); line-height: var(--card-pitch); color: var(--graphite);
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--card-pitch) - 1px), var(--card-rule) calc(var(--card-pitch) - 1px) var(--card-pitch));
  margin-inline: -34px; padding-inline: 34px;
}
.cat-prog { margin-top: 14px; }
.cat-prog .num { margin-right: 6px; }
.cat-prog, .cat-abs { max-width: none; }
.cat-abs { text-wrap: pretty; }
.cat-status { margin-top: 18px; }
/* the rod hole, punched at the foot */
.cat-hole {
  position: absolute; left: 50%; bottom: 18px; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 1px 2px rgba(10, 11, 12, 0.28), 0 0.5px 0 rgba(255, 255, 255, 0.9);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cat-card:hover { translate: 0 -5px; rotate: 0deg; box-shadow: 0 0 0 0.5px rgba(10, 11, 12, 0.14), 0 1px 1px rgba(10, 11, 12, 0.06), 0 30px 44px -22px rgba(12, 22, 32, 0.38), 0 4px 10px -4px rgba(12, 22, 32, 0.14); }
  .cat-card:hover .cat-t-in { translate: var(--nudge) 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .cat-card:has(.cat-t a:focus-visible) { translate: 0 -5px; rotate: 0deg; }
}

/* the record: four fields, ruled, typed in when the paper is out (the catalogue card's and the paper's) */
.rec, .prec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 18px; }
.rec { margin-top: 22px; }
.rec dt, .prec dt { font-size: var(--fs-meta); line-height: 1.2; }
.rec-v, .prec-v {
  min-height: 26px; margin: 4px 0 0; padding-bottom: 2px; border-bottom: 1px solid rgba(10, 11, 12, 0.32);
  font-size: var(--fs-meta); line-height: 24px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.rec-v.is-blank, .prec-v.is-blank { color: var(--quiet); }
/* the paper's record stands on the byline's columns, so its four cells start where Authors, Research, Programme and
   Status do */
.prec { margin-top: var(--s5); column-gap: var(--gap); }

/* ------------------------------------------------------------------ /papers/<slug>/ */
/* chrome: colour only */
.paper-back { font-size: var(--fs-ui); line-height: var(--lh-line); }
.paper-back a { display: inline-flex; align-items: center; gap: var(--s2); color: var(--quiet); text-decoration: none; }
.paper-back a:hover, .paper-back a:focus-visible { color: var(--ink); }
.paper-kind { margin-top: var(--space-head); display: flex; align-items: baseline; gap: 10px; }
.paper-kind .num { font-style: normal; }
.paper-glyph { font-family: var(--display); font-style: normal; font-size: 30px; line-height: 0.8; color: var(--ink); margin-right: 6px; }
.paper-title {
  margin-top: var(--s3); margin-left: -0.035em; max-width: 12.5em;
  font-family: var(--display); font-size: var(--d6); line-height: var(--d6-lh); letter-spacing: var(--d6-ls); text-wrap: balance;
}

/* the byline, as a journal sets it: authors, research area, programme, status */
.byline {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s4);
  margin-top: var(--space-head); padding: var(--s4) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair);
}
.byline--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.byline dd { margin: var(--s1) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.by-no { display: inline-block; min-width: 3em; }
.by-aff { display: block; }
.by-area { color: inherit; text-decoration: none; }
.by-area:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.by-g { font-family: var(--display); margin-right: 8px; }

.paper-sec { margin-top: var(--space-block); align-items: start; }
.paper-h { padding-top: 0.12em; font-family: var(--display); font-size: var(--d2); line-height: var(--d2-lh); letter-spacing: var(--d2-ls); }
.abs { max-width: 20em; font-family: var(--display); font-size: var(--d3); line-height: var(--d3-lh); letter-spacing: var(--d3-ls); text-wrap: pretty; hanging-punctuation: first; }
.paper-pending {
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--hair);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--graphite);
}

/* the citation slip: thermal paper, torn at both ends, about 44 columns; the Cite key beside it */
.cite-body { display: flex; align-items: flex-end; gap: var(--s5); flex-wrap: wrap; }
.slip-wrap { width: min(100%, 31.5em); filter: drop-shadow(0 1px 0.5px rgba(12, 22, 32, 0.16)) drop-shadow(0 12px 16px rgba(12, 22, 32, 0.12)); }
.slip {
  --tooth: 7px;
  position: relative; padding: 30px 26px 32px;
  font-family: var(--text); font-size: 15px; line-height: 1.5; color: #1d1f22;
  background: linear-gradient(180deg, #fbfbf7, #f5f5f0);
  -webkit-mask:
    conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 50% 0 / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - 2 * var(--tooth)) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 50% 100% / calc(var(--tooth) * 2) var(--tooth) repeat-x;
  mask:
    conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 50% 0 / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) 0 var(--tooth) / 100% calc(100% - 2 * var(--tooth)) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 50% 100% / calc(var(--tooth) * 2) var(--tooth) repeat-x;
}
.slip-head { display: flex; justify-content: space-between; gap: var(--s3); max-width: none; padding-bottom: 12px; border-bottom: 1px dashed rgba(29, 31, 34, 0.45); letter-spacing: 0.02em; }
.slip-plain { max-width: none; padding: 14px 0; border-bottom: 1px dashed rgba(29, 31, 34, 0.45); overflow-wrap: anywhere; }
.slip-bib {
  margin: 14px 0 0; font-family: var(--text); font-size: 14px; line-height: 1.5; color: #2a2d31;
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
}
.slip ::selection { background: rgba(11, 107, 102, 0.24); color: inherit; }
.cite-act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding-bottom: 10px; }
.cite-key { min-width: 112px; }
.cite-key.is-copied { filter: brightness(1.12) saturate(1.1); }
.cite-status { min-height: 1.4em; }
html:not(.js) .cite-act { display: none; }

.refs { counter-reset: ref; max-width: 46em; }
.refs li {
  counter-increment: ref; position: relative; padding-left: 3em;
  font-size: var(--fs-ui); line-height: var(--lh-line); color: var(--graphite); overflow-wrap: break-word; text-wrap: pretty;
}
.refs li + li { margin-top: var(--s2); }
.refs li::before { content: "[" counter(ref) "]"; position: absolute; left: 0; color: var(--quiet); }
.refs cite { font-style: italic; color: var(--ink); }

/* the pager: rows. Previous on 1–4, Next on 5–12; titles nudge, arrows a little further, both the way they point */
.pager { margin-top: var(--space-block); padding-top: var(--s4); border-top: 1px solid var(--hair); align-items: start; }
.pager-cell { position: relative; display: flex; flex-direction: column; gap: var(--s2); color: var(--ink); text-decoration: none; }
/* the focus ring takes in the room the title and arrow nudge into, so on focus they never cross it */
.pager-cell:focus-visible { outline: none; }
.pager-cell:focus-visible::after {
  content: ""; position: absolute; pointer-events: none;
  inset: calc(-1 * var(--ring-offset)) calc(-1 * (var(--ring-offset) + var(--nudge)));
  outline: var(--ring);
}
.pager-next { align-items: flex-end; text-align: right; justify-self: end; }
.pager-k { display: inline-flex; align-items: center; gap: var(--s2); }
.pager-t { max-width: 13em; font-family: var(--display); font-size: var(--d2); line-height: var(--d2-lh); letter-spacing: var(--d2-ls); transition: translate var(--t-move) var(--ease); }
.pager-cell .pp-arrow { transition: translate var(--t-move) var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pager-prev:hover .pager-t { translate: calc(-1 * var(--nudge)) 0; }
  .pager-next:hover .pager-t { translate: var(--nudge) 0; }
  .pager-prev:hover .pp-arrow { translate: calc(-1 * var(--nudge-arrow)) 0; }
  .pager-next:hover .pp-arrow { translate: var(--nudge-arrow) 0; }
}
/* focus moves them exactly as the pointer does */
@media (prefers-reduced-motion: no-preference) {
  .pager-prev:focus-visible .pager-t { translate: calc(-1 * var(--nudge)) 0; }
  .pager-next:focus-visible .pager-t { translate: var(--nudge) 0; }
  .pager-prev:focus-visible .pp-arrow { translate: calc(-1 * var(--nudge-arrow)) 0; }
  .pager-next:focus-visible .pp-arrow { translate: var(--nudge-arrow) 0; }
}

/* ------------------------------------------------------------------ a small laptop: the catalogue's cards keep their room */
@media (max-width: 1100px) {
  .cat-list { column-gap: var(--gap); }
  .cat-card { padding-inline: 26px; }
  .cat-prog, .cat-abs { margin-inline: -26px; padding-inline: 26px; }
  .byline--4, .prec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ phone: one column inside the gutter */
@media (max-width: 820px) {
  .pp-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-grid > :first-child, .pp-grid > :nth-child(2) { grid-column: 1 / -1; }
  .pp-lede-row { row-gap: var(--s4); }
  .pp-by { order: 2; }
  .cat-list, .cat-list:has(> .cat-item:nth-child(even):last-child) { grid-template-columns: minmax(0, 1fr); row-gap: 64px; padding-bottom: var(--s5); }
  .cat-item:nth-child(even) { top: 0; }
  .cat-item { --rot: 0deg !important; }
  .cat-card { rotate: var(--rot); }
  .byline, .prec { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }
  .byline:not(.byline--4) .by-cell:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .paper-sec { row-gap: var(--s3); }
  .pager { padding-top: 0; row-gap: 0; }
  .pager-cell { padding: var(--s4) 0; }
  .pager-cell + .pager-cell { border-top: 1px solid var(--hair); }
  .pager-cell:empty { display: none; }
  .pager-next { align-items: flex-start; text-align: left; justify-self: stretch; }
  .pager-cell:empty + .pager-cell { border-top: 0; }
}
@media (max-width: 600px) {
  .cat-card { padding: 22px 20px 54px; }
  .cat-prog, .cat-abs { margin-inline: -20px; padding-inline: 20px; }
  .tab { left: calc(4% + var(--i, 0) * 15%); padding-inline: 11px; }
  .rec, .prec { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .byline--4 { grid-template-columns: minmax(0, 1fr); }
  .slip { padding-inline: 18px; font-size: 14.5px; }
  .slip-bib { font-size: 12.5px; }
}