/* Source cards on the article page (3 Nov 2026). Loaded after the polish
   files.

   In source mode the rail of repeated sentences goes. The article sits in
   the middle of the window, and hovering a sourced sentence shows one
   small card in the gutter beside it. A plate carries the source's logo,
   its name and what it is; under it are the title of the piece, its
   authors, its date and the way out to it. The sentence itself is never
   repeated. Below 1280px there is no gutter, and a tap on a sentence opens
   the same card as a bottom sheet. js/source-cards.js builds the card from
   the page's own record (#refs).

   The plate takes the source's own colour, sampled from its logo. A
   contributor's card is about the person, on a plate of solid contributor
   blue, the colour that marks their sentences in the text. */

html[data-polish]{
  --sh-bg:#FFFFFF;
  --sh-line:rgba(40,30,20,.10);
  --sh-ink:var(--ink);
  --sh-ink-2:var(--ink-2);
  --sh-ink-3:var(--ink-3);
  --sh-soft:rgba(40,30,20,.045);
  --sh-soft-2:rgba(40,30,20,.08);
  --sh-stage:#F8F5F6;
  --sh-mix:12%;
  --sh-tile:#FFFFFF;
  --sh-tile-ring:rgba(19,16,17,.08);
  --sh-num:var(--accent-ink);
  --sh-ring:var(--accent);
  --sh-deep:#4E041E;
  --sh-on:#FFF7E9;
  --sh-person:#2E5F82;
  --sh-person-ink:#FFF7E9;
  --sh-person-text:#2E5F82;
  --sh-person-mix:9%;
  --sh-enter:cubic-bezier(.22,1,.36,1);
  --sh-exit:cubic-bezier(.85,0,1,1);
  --sh-move:cubic-bezier(.66,0,.34,1);
  --sh-spring:cubic-bezier(.16,1,.3,1);
  --sh-press:cubic-bezier(0,0,.17,1);
  --sh-w:264px;
}
html[data-polish][data-theme="dark"]{
  --sh-bg:#1D1915;--sh-line:rgba(255,236,210,.08);--sh-soft:rgba(255,236,210,.05);
  --sh-soft-2:rgba(255,236,210,.09);--sh-stage:rgba(255,236,210,.045);--sh-mix:18%;
  --sh-tile:#F4F0E8;--sh-tile-ring:rgba(255,236,210,.10);--sh-person:#2A5677;--sh-person-text:#85B8DA;--sh-person-mix:26%}
@media (prefers-color-scheme:dark){
  html[data-polish]:not([data-theme="light"]){
    --sh-bg:#1D1915;--sh-line:rgba(255,236,210,.08);--sh-soft:rgba(255,236,210,.05);
    --sh-soft-2:rgba(255,236,210,.09);--sh-stage:rgba(255,236,210,.045);--sh-mix:18%;
    --sh-tile:#F4F0E8;--sh-tile-ring:rgba(255,236,210,.10);--sh-person:#2A5677;--sh-person-text:#85B8DA;--sh-person-mix:26%}
}

/* ── the page: no rail of repeated sentences, the story centred ──────── */
/* The story sits in the middle of the window at every width, in source
   mode and in reading mode alike, so the switch never moves it. */
@media (min-width:721px){
  html[data-polish] .artgrid > .clrail{display:none}
  html[data-polish] .artgrid{grid-template-columns:minmax(0,1fr)}
  /* on tablets back to top takes the window's right edge; the text keeps
     clear of it on both sides */
  html[data-polish] .artgrid > .art,
  html[data-polish] .artgrid.pl-reading > .art{justify-self:center;left:auto;
    width:min(790px,calc(100% - 88px));max-width:none}
}
/* A sentence's stacked contributor faces fan out to the right on hover
   (the site's own popover, hidden until then). Near the window's edge it
   would widen the page, so nothing in the story scrolls it sideways. Above
   1280px the card sits outside this box, and the gutters are wide enough. */
@media (max-width:1279px){
  html[data-polish] .wrap:has(> .artgrid){overflow-x:clip}
}
@media (min-width:1081px){
  /* The card needs 264px beside the text, 32px from it and 24px from the
     window's edge. From 1478px the column is the site's 790px and the card
     sits 56px from it. Below that the gap closes to 32px, then the column
     narrows, to 640px at 1280px. Under 1280px there is no room for a card
     beside a centred column, so a click opens it as a dialog, as on a
     tablet, and the column stays at 640px. */
  html[data-polish] .artgrid{position:relative}
  html[data-polish] .artgrid > .art,
  html[data-polish] .artgrid.pl-reading > .art{width:clamp(640px,calc(100vw - 640px),790px)}
  /* back to top sits in the gutter, between the text and the card, where
     the gap is the full 56px; otherwise at the window's right edge */
  html[data-polish][data-sh-arrow]:not(:has(.art.plain, .artgrid.pl-reading)) .totop.article{
    left:var(--sh-arrow-x);right:auto}
  /* in reading mode it takes the window's right edge, as on the live page;
     the bottom left belongs to "Know something?" */
  html[data-polish][data-sh-arrow]:has(.art.plain, .artgrid.pl-reading) .totop.article{
    left:auto;right:16px}
}

/* Only the sentence whose card is showing is lit. The page also lights the
   sentence nearest the reading line, which made sense beside a rail that
   followed the reader; without a card beside it, that mark says nothing. */
html[data-polish] .art:not(.plain) .cl.lit:not(.sh-on):not(:hover){
  background-color:transparent;box-shadow:none;text-decoration-color:var(--pb-rule)}
html[data-polish] .art:not(.plain) .cl.contribution.lit:not(.sh-on):not(:hover){
  background-color:transparent;text-decoration-color:var(--pb-rule-c)}
html[data-polish] .art:not(.plain) .cl.sh-on{
  background-color:var(--pb-lit);
  box-shadow:2px 0 0 var(--pb-lit),-2px 0 0 var(--pb-lit);
  text-decoration-color:var(--accent)}
html[data-polish] .art:not(.plain) .cl.contribution.sh-on{
  background-color:var(--pb-lit-c);box-shadow:2px 0 0 var(--pb-lit-c),-2px 0 0 var(--pb-lit-c)}

/* ── the card in the gutter ──────────────────────────────────────────── */
.sh-card{position:absolute;z-index:6;top:0;left:0;width:var(--sh-w);
  visibility:hidden;pointer-events:none;will-change:transform}
.sh-card.is-on{visibility:visible;pointer-events:auto}
.sh-card.is-glide{transition:transform var(--d-4) var(--sh-move)}
/* no gutter, no card: it never takes up room on a narrower page */
@media (max-width:1279px){.sh-card{display:none}}
.sh-box{position:relative;display:flow-root;background:var(--sh-bg);border-radius:6px;
  opacity:0;color:var(--sh-ink);font-family:var(--sans)}
/* the hairline is drawn over the plate, so the plate never covers it */
.sh-box::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--sh-line);pointer-events:none}

/* the plate: the source's mark, its name and what it is */
.sh-plate{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 14px;
  border-radius:6px 6px 0 0;background:var(--sh-stage)}
.sh-plate.has-c{background:color-mix(in srgb,var(--sh-c) var(--sh-mix),var(--sh-bg))}
.sh-plate.has-c .sh-logo.has-img{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sh-c) 26%,transparent)}
.sh-id{flex:1;min-width:0}
.sh-name{margin:0;font:400 17px/1.2 var(--disp);letter-spacing:-.01em;color:var(--sh-ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.sh-kind{margin:3px 0 0;font-size:12.5px;line-height:1.3;color:var(--sh-ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the mark: a logo on a white tile, a headshot for a person, cream
   initials on maroon when there is neither */
.sh-logo,.sh-face{position:relative;flex:none;display:grid;place-items:center;overflow:hidden;
  background:var(--sh-deep);color:var(--sh-on);font-weight:600;letter-spacing:.02em}
.sh-logo{border-radius:6px}
.sh-face{border-radius:50%}
.sh-logo--lg,.sh-face--lg{width:44px;height:44px;font-size:14px}
.sh-logo--sm,.sh-face--sm{width:24px;height:24px;font-size:9.5px}
.sh-logo--sm{border-radius:5px}
.sh-logo.has-img{background:var(--sh-tile);box-shadow:inset 0 0 0 1px var(--sh-tile-ring)}
.sh-logo.has-img > span,.sh-face.has-img > span{visibility:hidden}
.sh-logo img{position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;object-fit:contain}
/* a logo is never drawn bigger than half its pixels, so a small one stays sharp */
.sh-logo.is-small img{width:22px;height:22px;margin:-11px 0 0 -11px}
.sh-logo.is-tiny img{width:16px;height:16px;margin:-8px 0 0 -8px}
.sh-logo--sm img,.sh-logo--sm.is-small img{width:16px;height:16px;margin:-8px 0 0 -8px}
.sh-logo--sm.is-tiny img{width:14px;height:14px;margin:-7px 0 0 -7px}
.sh-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.sh-face.has-img::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--sh-tile-ring)}

/* ── a contributor: a person who added to the story ──────────────────── */
/* Their card is about them. The plate is solid contributor blue, the
   colour that marks their sentences in the text: portrait and number on
   top, then the name (a link to their page), then their role and
   institution. Their part in this story takes one line under it, and
   "See profile" ends the card. Initials sit on that blue wherever a
   contributor shows. */
.sh-face{background:var(--sh-person);color:var(--sh-person-ink)}
.sh-plate.is-person{display:grid;grid-template-columns:1fr auto;align-items:start;gap:14px 12px;
  padding:16px 12px 18px 16px;background:var(--sh-person)}
.sh-plate.is-person > .sh-face{grid-area:1 / 1}
.sh-plate.is-person > .sh-n{grid-area:1 / 2}
.sh-plate.is-person > .sh-id{grid-area:2 / 1 / 3 / 3}
.sh-plate.is-person .sh-face--lg{width:52px;height:52px;font-size:17px;
  background:var(--sh-person-ink);color:var(--sh-person);box-shadow:0 0 0 2px var(--sh-person-ink)}
.sh-plate.is-person .sh-face.has-img::after{box-shadow:none}
.sh-plate.is-person .sh-name{display:block;width:max-content;max-width:100%;font-size:22px;line-height:1.15;color:var(--sh-person-ink);
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;
  transition:text-decoration-color var(--d-2) var(--sh-enter)}
.sh-plate.is-person a.sh-name:hover{text-decoration-color:rgba(255,247,233,.6)}
.sh-plate.is-person .sh-name:focus-visible{outline:none;border-radius:3px;
  box-shadow:0 0 0 2px var(--sh-person),0 0 0 4px var(--sh-person-ink)}
.sh-plate.is-person .sh-kind{margin-top:4px;font-size:13px;line-height:1.4;color:rgba(255,247,233,.78);
  white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.sh-plate.is-person .sh-n{margin:-2px -4px 0 0;color:rgba(255,247,233,.86)}
.sh-plate.is-person .sh-n:hover{background:rgba(255,247,233,.14)}
.sh-plate.is-person .sh-n:focus-visible{box-shadow:0 0 0 2px var(--sh-person),0 0 0 4px var(--sh-person-ink)}
/* their part in this story: a label under the name, not a second
   headline, and the detail under it */
.sh-src.is-person .sh-body{padding-top:14px}
.sh-src.is-person .sh-title{font:600 13.5px/1.35 var(--sans);letter-spacing:0}
.sh-src.is-person .sh-by{white-space:normal;color:var(--sh-ink-3)}
/* the way to their page */
.sh-profile{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;margin:14px 16px 16px;
  border-radius:6px;background:color-mix(in srgb,var(--sh-person) var(--sh-person-mix),var(--sh-bg));color:var(--sh-person-text);
  font:600 13px/1 var(--sans);text-decoration:none;
  transition:background-color var(--d-2) var(--sh-enter),transform var(--d-1) var(--sh-press)}
.sh-profile svg{transition:transform var(--d-2) var(--sh-enter)}
.sh-profile:hover{background:color-mix(in srgb,var(--sh-person) calc(var(--sh-person-mix) + 6%),var(--sh-bg))}
.sh-profile:hover svg{transform:translate(1px,-1px)}
.sh-profile:active{transform:scale(.97)}
.sh-profile:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sh-bg),0 0 0 4.5px var(--sh-ring)}

/* the reference number: the same figure as the sentence's marker; it opens
   that reference in the record */
.sh-n{align-self:flex-start;flex:none;position:relative;display:grid;place-items:center;
  min-width:24px;height:24px;margin:-4px -4px 0 0;padding:0 6px;border:0;border-radius:999px;
  background:transparent;color:var(--sh-num);font:600 12.5px/1 var(--sans);font-variant-numeric:tabular-nums;
  cursor:pointer;transition:background-color var(--d-2) var(--sh-enter)}
.sh-n:hover{background:var(--sh-soft-2)}
.sh-n:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sh-bg),0 0 0 4.5px var(--sh-ring)}
.sh-n::after{content:attr(data-tip);position:absolute;right:0;bottom:calc(100% + 8px);z-index:2;
  width:max-content;max-width:200px;padding:6px 8px;border-radius:5px;background:var(--ink);color:var(--page);
  font:500 12px/1.4 var(--sans);white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(2px);
  transition:opacity var(--d-1) var(--sh-exit),transform var(--d-1) var(--sh-exit)}
.sh-n:hover::after,.sh-n:focus-visible::after{opacity:1;transform:none;
  transition:opacity var(--d-2) var(--sh-enter) 420ms,transform var(--d-2) var(--sh-enter) 420ms}

/* the piece: its title, who wrote it, and a warning if it carries one */
.sh-body{padding:14px 16px 0}
.sh-title{margin:0;font:300 15px/1.38 var(--disp);letter-spacing:-.004em;color:var(--sh-ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-wrap:pretty}
.sh-by,.sh-state{margin:6px 0 0;font-size:12.5px;line-height:1.4;color:var(--sh-ink-2)}
.sh-by{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the date on the left, the way out on the right */
.sh-foot{display:flex;align-items:center;gap:12px;padding:12px 16px 14px;font-size:12.5px;line-height:1.3}
.sh-date{min-width:0;color:var(--sh-ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-go{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-weight:600;
  color:var(--sh-ink-2);text-decoration:none;transition:color var(--d-2) var(--sh-enter)}
.sh-go svg{transition:transform var(--d-2) var(--sh-enter)}
.sh-go:hover{color:var(--sh-ink)}
.sh-go:hover svg{transform:translate(1px,-1px)}
.sh-go:focus-visible{outline:none;border-radius:4px;box-shadow:0 0 0 2px var(--sh-bg),0 0 0 4.5px var(--sh-ring)}
.sh-note{flex:none;margin-left:auto;color:var(--sh-ink-3)}
.sh-body:last-child{padding-bottom:16px}

/* the sentence's other sources, one row each; a row takes the lead */
.sh-more{padding:4px 6px 6px;box-shadow:inset 0 1px 0 var(--sh-line)}
.sh-row{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:6px;
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:background-color var(--d-2) var(--sh-enter)}
.sh-row:hover{background:var(--sh-soft)}
.sh-row:active{transform:scale(.99)}
.sh-row:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sh-bg),0 0 0 4.5px var(--sh-ring)}
.sh-rowt{flex:1;min-width:0;font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-rowt b{font-weight:600;color:var(--sh-ink)}
.sh-rowt span{color:var(--sh-ink-3)}
.sh-rown{flex:none;min-width:16px;text-align:right;font:600 12.5px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--sh-num)}

/* ── the record: contributors first, as cards ───────────────────────── */
/* Under All the contributors lead, two cards to a row (one on a phone),
   then the sources as the page lists them. A card is the hover card's
   person, settled: the contributor blue with portrait, name, role and
   institution; their part in the story; three facts, labels above values;
   their part of the history and their page. */
html[data-polish] .reflist.shr-grid > .refitem.shr-person:not([hidden]){display:block;
  margin:var(--s6) 0 0;padding:0;border-top:0}
html[data-polish] .reflist.shr-grid > .refitem.shr-person + .refitem:not(.shr-person){border-top:0;margin-top:var(--s2)}
@media (min-width:600px){
  html[data-polish] .reflist.shr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--s4);align-items:stretch}
  /* cards side by side share a height: plates line up, and so do the
     buttons along the bottom */
  html[data-polish] .shr-plate{min-height:96px}
  html[data-polish] .reflist.shr-grid > .refitem{grid-column:1 / -1}
  html[data-polish] .reflist.shr-grid > .refitem.shr-person{grid-column:auto}
}
html[data-polish] .refitem.shr-person > .refn,
html[data-polish] .refitem.shr-person > .refb{display:none}
/* a jump from the text lights a ring around the card */
html[data-polish] .refitem.shr-person::before{inset:-6px;border-radius:11px}

.shr-card{position:relative;overflow:hidden;display:flex;flex-direction:column;height:100%;
  background:var(--sh-bg);border-radius:6px;color:var(--sh-ink);font-family:var(--sans)}
.shr-card::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--sh-line);pointer-events:none}
.shr-plate{box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:16px;background:var(--sh-person)}
.shr-plate .sh-face--lg{width:52px;height:52px;font-size:17px;
  background:var(--sh-person-ink);color:var(--sh-person);box-shadow:0 0 0 2px var(--sh-person-ink)}
.shr-plate .sh-face.has-img::after{box-shadow:none}
.shr-id{flex:1;min-width:0}
html[data-polish] .shr-card .shr-name{display:block;width:max-content;max-width:100%;
  font:400 20px/1.2 var(--disp);letter-spacing:-.01em;color:var(--sh-person-ink);overflow-wrap:anywhere;
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;
  transition:text-decoration-color var(--d-2) var(--sh-enter)}
html[data-polish] .shr-card a.shr-name:hover{text-decoration-color:rgba(255,247,233,.6)}
html[data-polish] .shr-card .shr-name:focus-visible{outline:none;border-radius:3px;
  box-shadow:0 0 0 2px var(--sh-person),0 0 0 4px var(--sh-person-ink)}
.shr-kind{margin-top:4px;font-size:13px;line-height:1.4;color:rgba(255,247,233,.78);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.shr-n{align-self:flex-start;flex:none;font:600 12.5px/1 var(--sans);font-variant-numeric:tabular-nums;
  color:rgba(255,247,233,.72)}
.shr-body{flex:1;display:flex;flex-direction:column;padding:16px}
.shr-part{margin:0 0 14px;font:400 17px/1.3 var(--disp);letter-spacing:-.006em;color:var(--sh-ink)}
html[data-polish] .shr-card .shr-facts{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0}
html[data-polish] .shr-card .shr-facts dt{margin:0;font-size:12px;line-height:1.4;color:var(--sh-ink-3)}
html[data-polish] .shr-card .shr-facts dd{margin:2px 0 0;font-size:14px;line-height:1.35;font-weight:500;
  color:var(--sh-ink);font-variant-numeric:tabular-nums}
.shr-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px}
html[data-polish] .shr-card .shr-added{font-size:13px;font-weight:600;line-height:1.3;color:var(--sh-ink-2);
  text-decoration:none;transition:color var(--d-2) var(--sh-enter)}
html[data-polish] .shr-card .shr-added:hover{color:var(--sh-ink)}
html[data-polish] .shr-card .shr-added:focus-visible{outline:none;border-radius:4px;
  box-shadow:0 0 0 2px var(--sh-bg),0 0 0 4.5px var(--sh-ring)}
html[data-polish] .shr-card .shr-profile{flex:none;height:34px;margin:0 0 0 auto;padding:0 14px}

/* ── the sheet, below 1280px ─────────────────────────────────────────── */
.sh-modal{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:var(--sh-ink)}
.sh-modal::backdrop{background:transparent}
html.sh-locked{overflow:hidden}
.sh-scrim{position:absolute;inset:0;background:rgba(19,16,17,.42);opacity:0;touch-action:none}
.sh-sheet{position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:min(560px,100%);
  max-height:min(calc(100% - 48px),640px);overflow:auto;overscroll-behavior:contain;
  background:var(--sh-bg);border-radius:6px 6px 0 0;
  padding-bottom:env(safe-area-inset-bottom);color:var(--sh-ink);font-family:var(--sans);outline:none}
/* the sheet takes focus when it opens; the site's ring is for its controls */
.sh-sheet:focus-visible{box-shadow:none}
.sh-sheet .sh-plate{gap:14px;padding:20px 62px 20px 20px}
.sh-sheet .sh-logo--lg,.sh-sheet .sh-face--lg{width:52px;height:52px;font-size:16px}
.sh-sheet .sh-name{font-size:20px}
.sh-sheet .sh-kind{font-size:13px}
.sh-sheet .sh-body{padding:18px 20px 0}
.sh-sheet .sh-title{font-size:17px;-webkit-line-clamp:5}
.sh-sheet .sh-by,.sh-sheet .sh-state,.sh-sheet .sh-foot{font-size:13px}
.sh-sheet .sh-foot{padding:16px 20px 20px}
.sh-sheet .sh-body:last-child{padding-bottom:20px}
.sh-sheet .sh-more{padding:6px 10px 12px}
.sh-sheet .sh-n{margin:0}
/* the lead's number joins the close button on its row, at its height */
.sh-sheet .sh-plate > .sh-n{position:absolute;top:18px;right:58px;min-width:30px;height:34px;margin:0;border-radius:6px}
.sh-sheet .sh-plate:not(.is-person){padding-right:96px}
/* a contributor's name leads the sheet */
.sh-sheet .sh-plate.is-person .sh-name{font-size:28px;line-height:1.12;letter-spacing:-.015em}
.sh-sheet .sh-plate.is-person .sh-kind{margin-top:6px;font-size:14px}
.sh-sheet .sh-src.is-person .sh-title{font-size:15px}
/* in the sheet the tooltip opens below, inside the sheet */
.sh-sheet .sh-n::after{bottom:auto;top:calc(100% + 8px);transform:translateY(-2px)}
.sh-x{position:absolute;top:18px;right:16px;z-index:1;display:grid;place-items:center;width:34px;height:34px;
  border:0;border-radius:6px;background:var(--sh-soft-2);color:var(--sh-ink-2);cursor:pointer;
  transition:color var(--d-2) var(--sh-enter)}
.sh-x:hover{color:var(--sh-ink)}
.sh-x:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sh-bg),0 0 0 4.5px var(--sh-ring)}
/* the handle says the sheet can be pulled down; it and the plate take
   the drag, so the browser doesn't scroll the page under the finger */
.sh-grab{position:absolute;z-index:1;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;
  border-radius:2px;background:rgba(40,30,20,.22);pointer-events:none}
.sh-sheet:has(> .sh-src.is-person) > .sh-grab{background:rgba(255,247,233,.5)}
html[data-theme="dark"] .sh-grab{background:rgba(255,236,210,.28)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .sh-grab{background:rgba(255,236,210,.28)}}
.sh-sheet .sh-plate{touch-action:none}
/* a thumb-sized way to their page on the sheet */
.sh-sheet .sh-profile{height:44px;margin:16px 20px 20px;font-size:14px}
/* on a contributor's sheet the close button sits on blue */
.sh-sheet:has(> .sh-src.is-person) > .sh-x{
  background:rgba(255,247,233,.14);color:var(--sh-person-ink)}
@media (max-width:420px){
  .sh-sheet .sh-plate{padding:16px 58px 16px 16px}
  .sh-sheet .sh-body{padding:16px 16px 0}
  .sh-sheet .sh-foot{padding:14px 16px 16px}
  .sh-sheet .sh-more{padding:4px 6px 10px}
}

@media (prefers-reduced-motion:reduce){
  .sh-card.is-glide{transition:none}
  .sh-go svg,.sh-profile svg,.sh-row,.sh-profile{transition:none}
}