/* poemranker stylesheet -- GENERATED by design/deploy/build_stylesheet.py; edit the mocks, not this. */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..600&display=swap");

/* ------------------------------------------------------------------
   poemranker -- static reader preview (rollout plan, step 1 / phase 0)

   The poem is the hero. The site's identity arrives two ways: a bold
   masthead at rest (wordmark, tagline, the 0-10 scale drawn as a
   Worst-to-Best ribbon) that RECEDES to a hairline as you scroll into
   the sheet, and the first VOTE, which unfolds what the crowd did --
   the vote-distribution graph over the same ribbon, the mean, the
   weighted score, the rank -- and a welcome.

   Class contract (survives the TS/Node rewrite): site-header, site-nav,
   type-filter, poem-card, vote-scale, site-footer.

   Tokens: complete light palette on bare :root; dark under the two
   guards (system preference, explicit data-theme). The field is the
   live site's periwinkle; the sheet is warm press-white so it sits ON
   the field as paper; Best is bright blue, Worst is slate; the 0-10
   scale runs purple at 0, neutral grey at 5, green at 10. Purple, the
   scale's own c0, is also the site's voice: the second half of the
   wordmark, the form name in the running head, the vote count, the
   selection colour, the theme toggle's hover.

   Type: two serifs and nothing else. Fraunces is the display face,
   with its optical size pinned per use (144 on the title, 48 on the
   wordmark, 24 on the vote heading, 18 on the tiles and numbers, 12 on
   a key) so the sheet reads as set, not typed; Newsreader is the text
   face, and at .875rem it is also the voice of every hint, note and
   label.
   ------------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* the field and the footer band */
  --bg:           #CBDEFF;
  --band:         #BDD3FA;
  --band-line:    #9DB1D9;
  --field-ink:    #111A2E;
  --field-ink-2:  #3E4A62;
  --field-mute:   #5B6779;
  --field-line:   #A4B4D6;

  /* the sheet: warm press-white, warm ink, warm hairlines */
  --paper:        #FBF8F1;
  --sheet:        #FBF8F1;   /* alias: the about page's card ground */
  --ink:          #1E1B18;
  --ink-2:        #4C4742;
  --ink-3:        #6F6962;
  --rule:         #DDD9D1;   /* hairlines on the paper */
  --rule-2:       #C4BFB5;   /* control edges on the paper */

  /* the site's own voice */
  --purple:       #660099;
  --purple-2:     #4E0076;
  --on-purple:    #FFFFFF;
  --on-scale:     #1E1B18;   /* ink on a lit tile */

  /* Best is bright blue, Worst is slate */
  --best:         #2158E3;
  --best-fill:    #4D8BFF;
  --on-best:      #0B1430;
  --worst:        #566173;
  --worst-fill:   #8B97A8;
  --bar:          #8B97A8;

  /* Links and the pole dots (agreed: deep blue, Best blue, Worst slate). To go
     back to the textured sheet, flip these three lines only: --accent-link to
     #227777 (dark #7FD4CF), --pole-best-dot to var(--c10), --pole-worst-dot to var(--c0). */
  --accent-link:    #1D4ED8;
  --pole-best-dot:  var(--best-fill);
  --pole-worst-dot: var(--worst-fill);

  /* the 0-10 scale: purple at 0, neutral grey at 5, green at 10 */
  --c0:  #660099;
  --c1:  #7E2DA7;
  --c2:  #975AB5;
  --c3:  #AF86C4;
  --c4:  #C8B3D2;
  --c5:  #E0E0E0;
  --c6:  #C8E6D2;
  --c7:  #AFECC4;
  --c8:  #97F3B5;
  --c9:  #7EF9A7;
  --c10: #66FF99;

  --shadow: 0 1px 0 rgb(27 36 64 / .08), 0 2px 6px -2px rgb(27 36 64 / .12), 0 28px 64px -28px rgb(27 36 64 / .38);
  --head-shadow: 0 1px 0 var(--field-line), 0 12px 28px -20px rgb(17 26 46 / .35);

  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --text:    "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --t-xs:    .75rem;
  --t-s:     .875rem;
  --t-m:     1rem;
  --t-b:     1.0625rem;
  --t-l:     1.25rem;
  --t-poem:  clamp(1.1875rem, 1.05rem + .55vw, 1.375rem);
  --t-title: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  --t-mark:  clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  --t-nav:   .8125rem;
  --track:   .09em;

  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --pad:    clamp(1.25rem, .5rem + 3.6vw, 4rem);
  --radius: 4px;
  --deckle: 10px;
  --ease:   cubic-bezier(.2, .7, .2, 1);
  --dur:        150ms;
  --dur-head:   380ms;
  --dur-reveal: 360ms;

  --head-h:     3.25rem;
  --head-delta: 0px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:           #0E1628;
    --band:         #0A1120;
    --band-line:    #243450;
    --field-ink:    #E6ECF5;
    --field-ink-2:  #B7C1D1;
    --field-mute:   #8C99AE;
    --field-line:   #2E3D5C;
    --paper:        #2A2622;
    --sheet:        #2A2622;   /* alias: the about page's card ground */
    --ink:          #EFEAE1;
    --ink-2:        #C8C1B6;
    --ink-3:        #9B948B;
    --rule:         #3E3934;
    --rule-2:       #544E46;
    --purple:       #C4A0FF;
    --purple-2:     #D8C2FF;
    --on-purple:    #0E1628;
    --on-scale:     #14130F;
    --best:         #6A9DFF;
    --best-fill:    #4D8BFF;
    --on-best:      #0B1430;
    --worst:        #B7C1D1;
    --worst-fill:   #8B97A8;
    --bar:          #6F7E96;
    --accent-link:    #9DBDFF;
    --pole-best-dot:  var(--best-fill);
    --pole-worst-dot: var(--worst-fill);
    /* the purple end lifts a step so the tile edges and the ribbon read on the dark grounds */
    --c0:  #9340D1;
    --c1:  #9C4FD6;
    --c2:  #AF74DF;
    --c3:  #C299E7;
    --c4:  #D4BEEE;
    --shadow: 0 1px 0 rgb(0 0 0 / .4), 0 2px 6px -2px rgb(0 0 0 / .4), 0 30px 70px -26px rgb(0 0 0 / .75);
    --head-shadow: 0 1px 0 var(--field-line), 0 12px 28px -20px rgb(0 0 0 / .8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:           #0E1628;
  --band:         #0A1120;
  --band-line:    #243450;
  --field-ink:    #E6ECF5;
  --field-ink-2:  #B7C1D1;
  --field-mute:   #8C99AE;
  --field-line:   #2E3D5C;
  --paper:        #2A2622;
  --sheet:        #2A2622;   /* alias: the about page's card ground */
  --ink:          #EFEAE1;
  --ink-2:        #C8C1B6;
  --ink-3:        #9B948B;
  --rule:         #3E3934;
  --rule-2:       #544E46;
  --purple:       #C4A0FF;
  --purple-2:     #D8C2FF;
  --on-purple:    #0E1628;
  --on-scale:     #14130F;
  --best:         #6A9DFF;
  --best-fill:    #4D8BFF;
  --on-best:      #0B1430;
  --worst:        #B7C1D1;
  --worst-fill:   #8B97A8;
  --bar:          #6F7E96;
  --accent-link:    #9DBDFF;
  --pole-best-dot:  var(--best-fill);
  --pole-worst-dot: var(--worst-fill);
  --c0:  #9340D1;
  --c1:  #9C4FD6;
  --c2:  #AF74DF;
  --c3:  #C299E7;
  --c4:  #D4BEEE;
  --shadow: 0 1px 0 rgb(0 0 0 / .4), 0 2px 6px -2px rgb(0 0 0 / .4), 0 30px 70px -26px rgb(0 0 0 / .75);
  --head-shadow: 0 1px 0 var(--field-line), 0 12px 28px -20px rgb(0 0 0 / .8);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + .75rem);
}
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--field-ink);
  font-family: var(--text);
  font-size: var(--t-b);
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--accent-link); outline-offset: 2px; border-radius: 2px; }
button { font: inherit; color: inherit; }
::selection { background: var(--purple); color: var(--on-purple); }
.num { font-variant-numeric: tabular-nums; }

/* the site's label voice: the text face in small tracked capitals */
.caps {
  font-family: var(--text); font-weight: 500; line-height: 1.2;
  letter-spacing: var(--track); text-transform: uppercase;
}

/* a key, named quietly: the display face at a small size in a hairline box */
kbd {
  display: inline-block; vertical-align: baseline;
  font-family: var(--display); font-weight: 500; font-style: normal;
  font-size: .8em; line-height: 1;
  font-variation-settings: "opsz" 12, "SOFT" 0, "WONK" 0;
  font-variant-numeric: tabular-nums;
  min-width: 1.7em; padding: .2em .35em .25em; text-align: center;
  border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 3px;
  color: var(--ink-2); background: transparent;
}
.key-hint { display: none; }
@media (min-width: 48em) and (hover: hover) { .key-hint { display: inline; } }

.no-anim .site-header, .no-anim .site-header *, .no-anim .stage { transition: none !important; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  background: var(--best); color: #FFFFFF;
  padding: .55rem .8rem; border-radius: var(--radius); text-decoration: none;
  font-size: var(--t-s);
}
.skip:focus { top: 1rem; }

.sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1.5rem; pointer-events: none; }

/* ------------------------------------------------------------------ the ribbon
   The 0-10 scale drawn small: eleven flat steps, purple through grey to
   green, with the poles named at the ends. It is the site's signature --
   under the wordmark at rest, and again in the vote panel, where the
   crowd's mean is marked on it.
   ------------------------------------------------------------------ */
.axis { font-size: var(--t-xs); }
.axis .num { font-weight: 600; letter-spacing: .04em; }
.axis-inline { display: flex; align-items: center; gap: var(--s3); width: 100%; max-width: 24rem; }
.axis-inline .pole { flex: 0 0 auto; white-space: nowrap; }
.ribbon {
  display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 2px;
  height: 8px; flex: 1 1 0%; min-width: 0; max-width: 14rem;
}
.ribbon > span { display: block; min-width: 0; background: var(--tint, var(--c5)); transform-origin: bottom; }
.ribbon > span:first-child { border-radius: 2px 0 0 2px; }
.ribbon > span:last-child  { border-radius: 0 2px 2px 0; }
.pole::before {
  content: ""; display: inline-block;
  width: .5em; height: .5em; border-radius: 50%;
  margin-right: .5em; vertical-align: .1em;
  background: var(--dot, currentColor);
}
.pole-after::before { content: none; }
.pole-after::after {
  content: ""; display: inline-block;
  width: .5em; height: .5em; border-radius: 50%;
  margin-left: .5em; vertical-align: .1em;
  background: var(--dot, currentColor);
}
.pole-best  { --dot: var(--pole-best-dot); }
.pole-worst { --dot: var(--pole-worst-dot); }

/* ------------------------------------------------------------------ masthead
   At rest: the identity moment. The wordmark large on the flat field
   with the poem nav beside it; beneath, the tagline and the ribbon,
   with the utility links (members here now, chat, alms, log in, join)
   at the right. Once the page has scrolled past a marker at the top the
   body carries "is-stuck": the wordmark shrinks to a running-head size,
   the other rows fold shut, and a hairline appears. The stage takes on
   exactly the height the masthead gives up, so the poem never moves.

   Geometry: the wordmark's column is content-sized ("auto") so it can
   never be squeezed under the nav; the nav and utility rows share the
   flexible column and wrap inside it if they must; the theme toggle
   holds a third, content-sized column at the right. Below 60em the nav
   takes its own row under a hairline and the toggle moves up to the
   corner beside the utility links.
   ------------------------------------------------------------------ */
.site-header {
  position: relative; z-index: 10;
  width: 100%;
  background: var(--bg);
  padding-block: var(--s5) var(--s4);
  box-shadow: none;
  transition: padding var(--dur-head) var(--ease), box-shadow var(--dur-head) var(--ease);
}
.mast-in {
  width: 100%; max-width: calc(64rem + 2 * var(--gutter)); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "mark  nav   nav"
    "ident util  theme";
  align-items: center;
  column-gap: var(--s6); row-gap: var(--s3);
  transition: row-gap var(--dur-head) var(--ease);
}
/* the wordmark: "poem" in ink, "ranker" in the site's purple, one weight, upright */
.wordmark {
  font-family: var(--display);
  font-size: 1.5rem; font-weight: 600; line-height: 1;
  font-variation-settings: "opsz" 48, "SOFT" 0, "WONK" 0;
  letter-spacing: -.01em; white-space: nowrap;
  color: var(--field-ink); text-decoration: none;
}
.wordmark em, .wordmark .rk { font-style: normal; font-weight: 600; color: var(--purple); transition: color var(--dur) var(--ease); }
.wordmark:hover em, .wordmark:hover .rk { color: var(--purple-2); }
.site-header .wordmark {
  grid-area: mark; justify-self: start; align-self: center;
  font-size: var(--t-mark);
  letter-spacing: -.02em;
  transition: font-size var(--dur-head) var(--ease), letter-spacing var(--dur-head) var(--ease);
}

.nav-row {
  grid-area: nav; justify-self: end; align-self: center;
  min-width: 0; max-width: 100%;
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-head) var(--ease),
              opacity var(--dur-head) var(--ease),
              visibility 0s linear 0s;
}
.site-nav {
  min-height: 0; overflow: hidden;
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline;
  gap: var(--s1) var(--s5);
  margin-inline: -4px; padding: 4px;
  font-size: var(--t-nav);
}
.site-nav a {
  display: inline-block; padding: var(--s2) 2px; margin-inline: -2px;
  color: var(--field-ink); text-decoration: none; white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--best); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; }
.site-nav a:active { color: var(--accent-link); }
.site-nav a:focus-visible { outline-offset: 0; }
.site-nav a[aria-current="page"] { color: var(--best); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; text-decoration-color: var(--best-fill); }

.ident {
  grid-area: ident; align-self: start;
  min-width: 0;
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-head) var(--ease),
              opacity var(--dur-head) var(--ease),
              visibility 0s linear 0s;
}
.ident-in {
  min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
}
.tagline {
  margin: 0;
  font-size: var(--t-m); font-style: italic; line-height: 1.4;
  color: var(--field-ink-2);
}
.ident .axis { color: var(--field-ink-2); padding-bottom: 2px; }

.util-row {
  grid-area: util; justify-self: end; align-self: start;
  min-width: 0; max-width: 100%;
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-head) var(--ease),
              opacity var(--dur-head) var(--ease),
              visibility 0s linear 0s;
}
.util {
  min-height: 0; overflow: hidden;
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: var(--s1) var(--s4);
  margin: -4px; padding: 4px;
  font-size: .6875rem;
}
.util a { color: var(--field-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur) var(--ease); }
.util a:hover, .util a:focus-visible { color: var(--best); text-decoration: underline; text-underline-offset: .4em; }
.util .count { color: var(--field-mute); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.util .alms { color: var(--best); }
.util .join {
  padding: .4rem .8rem .38rem; border-radius: 999px;
  background: var(--best-fill); color: var(--on-best); font-weight: 600;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.util .join:hover, .util .join:focus-visible { background: var(--best); color: #FFFFFF; text-decoration: none; }

/* the theme toggle: a small round button with a half-circle, at the end
   of the utility row. It is its own grid item so it survives the
   recede: when the masthead sticks it shrinks a step and slides up into
   the running-head bar beside the wordmark. */
.theme {
  --toggle-d: 2rem;
  grid-area: theme; justify-self: end; align-self: start;
  width: var(--toggle-d); height: var(--toggle-d); border-radius: 50%;
  margin: -.2rem 0 0; padding: 0;
  border: 1px solid var(--field-line); background: transparent;
  display: inline-grid; place-items: center; cursor: pointer;
  color: var(--field-ink-2);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              width var(--dur-head) var(--ease), height var(--dur-head) var(--ease), margin var(--dur-head) var(--ease);
}
.theme:hover, .theme:focus-visible { color: var(--purple); border-color: var(--purple); }
.theme:active { background: var(--band); }
.theme svg { display: block; width: .875rem; height: .875rem; }

@media (max-width: 60em) {
  .mast-in {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "mark  util  theme"
      "ident ident ident"
      "nav   nav   nav";
    column-gap: var(--s4); row-gap: var(--s2);
  }
  .util-row { align-self: center; }
  .theme { align-self: center; margin-top: 0; }
  .util .u-chat, .util .alms { display: none; }
  .nav-row { justify-self: stretch; max-width: none; }
  .site-nav {
    justify-content: flex-start;
    gap: 0 var(--s4);
    padding: var(--s2) 4px 4px;
    border-top: 1px solid var(--field-line);
    transition: padding var(--dur-head) var(--ease), border-top-width var(--dur-head) var(--ease);
  }
}
@media (max-width: 30em) {
  .util .u-users, .util .u-login { display: none; }
}

@media (min-height: 34em) {
  .site-header { position: sticky; top: 0; }
  body.is-stuck .site-header { padding-block: var(--s2); box-shadow: var(--head-shadow); }
  body.is-stuck .mast-in { row-gap: 0; }
  body.is-stuck .site-header .wordmark { font-size: 1.25rem; letter-spacing: -.01em; }
  body.is-stuck .ident,
  body.is-stuck .nav-row,
  body.is-stuck .util-row { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition-delay: 0s, 0s, var(--dur-head); }
  body.is-stuck .stage { padding-top: calc(var(--s3) + var(--head-delta)); }
  body.is-stuck .theme { --toggle-d: 1.5rem; }
}
/* on the wide layout the toggle sits in the folding second row; when the
   masthead sticks it rides up on a negative margin so it centres on the
   1.25rem wordmark (half the mark plus half the toggle) */
@media (min-width: 60.0625em) and (min-height: 34em) {
  body.is-stuck .theme { margin-top: calc(-.625rem - var(--toggle-d) / 2); }
}
@media (max-width: 60em) and (min-height: 34em) {
  body.is-stuck .site-nav { padding-top: 0; padding-bottom: 0; border-top-width: 0; }
}

/* ------------------------------------------------------------------ stage */
.stage {
  flex: 1 0 auto;
  width: 100%; max-width: calc(48rem + 2 * var(--gutter)); margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--s4) 0;
  transition: padding-top var(--dur-head) var(--ease);
}

/* the reader's own bar: which page this is, and the persistent type
   filter that scopes Random, Best, Worst and Recent alike */
.stage-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "lede filter"
    "lede note";
  align-items: center;
  column-gap: var(--s5); row-gap: var(--s1);
  margin: 0 0 calc(var(--s4) + var(--deckle));
}
.lede { grid-area: lede; margin: 0; font-size: .9375rem; font-style: italic; color: var(--field-mute); }
.lede b { font-style: normal; font-weight: 600; font-size: var(--t-xs); color: var(--field-ink); margin-right: .55rem; }
.type-filter {
  grid-area: filter; justify-self: end;
  display: inline-flex; align-items: center; gap: .6rem; margin: 0;
  color: var(--field-ink-2);
}
.type-filter label { white-space: nowrap; font-style: italic; font-size: var(--t-m); }
.type-filter .sel { position: relative; display: inline-block; }
.type-filter select {
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: .42rem 1.9rem .42rem .9rem;
  font-family: var(--text); font-size: .9375rem; font-weight: 500; line-height: 1.2;
  color: var(--field-ink); background: var(--paper);
  border: 1px solid var(--field-line); border-radius: 999px;
  box-shadow: 0 1px 2px rgb(17 26 46 / .08);
  cursor: pointer; max-width: 14rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.type-filter select:hover { border-color: var(--best); }
.type-filter select:focus-visible { outline: none; border-color: var(--best); box-shadow: 0 0 0 3px rgb(77 139 255 / .3); }
.type-filter .sel::after {
  content: "\25BE"; position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--best); font-size: .8rem; line-height: 1;
}
/* the note wraps under the control it explains; contain keeps it from
   widening the column (and squeezing the lede) */
.filter-note {
  grid-area: note; justify-self: stretch; text-align: right;
  contain: inline-size; min-width: 0;
  margin: 0;
  font-size: .8125rem; line-height: 1.4; color: var(--field-mute);
}
.filter-note b { font-weight: 600; color: var(--field-ink-2); }
@media (max-width: 40em) {
  .stage-bar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lede" "filter" "note"; row-gap: var(--s2); }
  .type-filter { justify-self: start; }
  /* the note keeps "stretch": with contain: inline-size, a start-aligned note has no width of its own */
  .type-filter, .filter-note { text-align: left; }
}

/* ------------------------------------------------------------------ the sheet
   One poem on warm press-white, torn from a larger sheet: the top edge
   is deckled and the corners there are square, only the foot is
   rounded. A running head over a double rule, the title, the poet, a
   short rule, then the verse with a full line of air between stanzas.
   ------------------------------------------------------------------ */
.poem-card {
  position: relative;
  background: var(--paper);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad) var(--pad) 0;
  color: var(--ink);
  scroll-margin-top: calc(var(--head-h) + .75rem + var(--deckle));
}
.poem-card::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--deckle);
  background: var(--paper);
  clip-path: polygon(0% 100%, 0.0% 67%, 1.7% 54%, 3.3% 39%, 5.0% 54%, 6.7% 42%, 8.3% 31%, 10.0% 31%, 11.7% 22%, 13.3% 59%, 15.0% 36%, 16.7% 37%, 18.3% 37%, 20.0% 43%, 21.7% 71%, 23.3% 45%, 25.0% 49%, 26.7% 55%, 28.3% 44%, 30.0% 40%, 31.7% 71%, 33.3% 53%, 35.0% 47%, 36.7% 70%, 38.3% 88%, 40.0% 72%, 41.7% 93%, 43.3% 70%, 45.0% 78%, 46.7% 94%, 48.3% 57%, 50.0% 37%, 51.7% 38%, 53.3% 60%, 55.0% 84%, 56.7% 80%, 58.3% 93%, 60.0% 84%, 61.7% 74%, 63.3% 93%, 65.0% 81%, 66.7% 64%, 68.3% 71%, 70.0% 63%, 71.7% 56%, 73.3% 38%, 75.0% 50%, 76.7% 63%, 78.3% 57%, 80.0% 34%, 81.7% 43%, 83.3% 68%, 85.0% 69%, 86.7% 63%, 88.3% 72%, 90.0% 50%, 91.7% 76%, 93.3% 71%, 95.0% 47%, 96.7% 31%, 98.3% 40%, 100.0% 33%, 100% 100%);
  pointer-events: none;
}

.running {
  margin: 0 0 var(--s7);
  padding-bottom: var(--s3);
  border-bottom: 3px double var(--rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s4);
  font-size: var(--t-xs); letter-spacing: .12em;
  color: var(--ink-3);
  transition: opacity var(--dur) var(--ease);
}
.running .form { color: var(--purple); font-weight: 600; }
.running .no { letter-spacing: .08em; }

.page {
  width: fit-content;
  max-width: 100%;
  min-width: min(100%, 22rem);
  margin-inline: auto;
  transition: opacity var(--dur) var(--ease);
}
.poem-head { margin: 0 0 2.25rem; }
.title {
  margin: 0 0 var(--s3);
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-size: var(--t-title);
  line-height: 1.1; letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--ink);
  scroll-margin-top: calc(var(--head-h) + 1rem);
}
.title:focus, .title:focus-visible { outline: none; }
.byline { margin: 0 0 var(--s1); font-size: var(--t-b); color: var(--ink-2); }
.byline .by { font-style: italic; color: var(--ink-3); }
.author { color: var(--accent-link); font-weight: 500; text-decoration: none; transition: color var(--dur) var(--ease); }
.author:hover, .author:focus-visible { text-decoration: underline; }
.meta { margin: 0; font-size: var(--t-s); color: var(--ink-3); }
.meta a { color: var(--accent-link); text-decoration: none; }
.meta a:hover, .meta a:focus-visible { text-decoration: underline; }

.dinkus {
  width: 2.25rem; height: 1px; margin: 0 0 2.25rem;
  border: 0; background: var(--rule-2);
}

.poem {
  max-width: 50ch;
  font-size: var(--t-poem);
  line-height: 1.6;
  color: var(--ink);
  hanging-punctuation: first;
}
.stanza { margin: 0 0 1.6em; }
.stanza:last-child { margin-bottom: 0; }
.line { display: block; padding-left: 1.5em; text-indent: -1.5em; text-wrap: pretty; }

.poem-card.is-swapping .running,
.poem-card.is-swapping .page { opacity: 0; }

/* ------------------------------------------------------------------ the scale
   Docked to the foot of the sheet: on a long poem it stays at the bottom
   of the viewport while you read. Eleven hairline tiles, each with its
   stop on the ramp as a bottom edge; Worst and Best name the poles.
   Before the first vote the panel says only "Rate it".
   ------------------------------------------------------------------ */
.vote-scale {
  z-index: 2;
  margin: var(--s8) calc(-1 * var(--pad)) 0;
  padding: var(--s4) var(--pad) clamp(1.125rem, var(--pad) * .6, 2rem);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-radius: 0 0 var(--radius) var(--radius);
}
.vote-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4);
  margin-bottom: var(--s3);
}
.vote-h {
  margin: 0;
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "opsz" 24, "SOFT" 0, "WONK" 0;
  font-size: var(--t-l); line-height: 1.2; color: var(--ink);
}
.peek { margin-left: .3em; opacity: 0; transition: opacity var(--dur) var(--ease); }
.vote-scale.peeking .peek { opacity: 1; }
.peek-a { font-style: italic; font-weight: 400; color: var(--ink-3); }
.peek-n { font-weight: 600; color: var(--purple); }
.vote-hint { margin: 0; font-size: var(--t-s); color: var(--ink-3); }

.scale {
  display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: var(--s1);
  margin: 0; padding: 0;
}
.scale button {
  appearance: none; -webkit-appearance: none;
  margin: 0; padding: 0 0 2px; min-width: 0; min-height: 2.75rem;
  border: 1px solid var(--rule-2); border-radius: 3px;
  background: transparent; color: var(--ink);
  font-family: var(--display); font-weight: 500; font-size: var(--t-b);
  font-variation-settings: "opsz" 18, "SOFT" 0, "WONK" 0;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  --tint: var(--c5);
  border-bottom: 3px solid var(--tint);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.scale button:hover,
.scale button:focus-visible { background: var(--tint); color: var(--on-tint, var(--on-scale)); border-color: var(--tint); }
.scale button:focus-visible { outline-offset: 3px; }
.scale button:active { transform: translateY(1px); }
.scale button[aria-pressed="true"] {
  background: var(--tint); color: var(--on-tint, var(--on-scale)); border-color: var(--tint);
  outline: 2px solid var(--best); outline-offset: 2px;
}
.vote-scale.voted .scale button:not([aria-pressed="true"]):not(:hover):not(:focus-visible) { opacity: .55; }

.poles {
  display: flex; justify-content: space-between; gap: var(--s4);
  margin-top: var(--s2);
  font-size: .6875rem;
  color: var(--ink-3);
}
.poles .pole-worst { color: var(--worst); }
.poles .pole-best  { color: var(--best); }

@media (max-width: 26em) {
  .vote-scale { padding-inline: var(--s3); }
  .scale, .dist, .reveal .ribbon { gap: 2px; }
  .scale button { font-size: var(--t-m); min-height: 3rem; }
}

/* ------------------------------------------------------------------ the reveal
   Folded shut until you vote. Then it opens: the vote-distribution graph
   (one bar per step, your own vote in the Best blue), the ribbon beneath
   it with the crowd's mean marked, the mean, the weighted score and the
   rank -- and, the first time only, a welcome. The site introduces
   itself once you have done the thing.
   ------------------------------------------------------------------ */
.reveal {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-reveal) var(--ease);
}
.reveal-in { min-height: 0; overflow: hidden; }
.vote-scale.voted .reveal { grid-template-rows: 1fr; }

.dist {
  display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: var(--s1);
  align-items: end;
  height: 4.5rem; padding-top: 1.25rem; margin-top: var(--s4);
}
.dist .bar {
  position: relative; min-width: 0;
  height: max(2px, calc(var(--h, 0) * 100%));
  background: var(--bar); border-radius: 2px 2px 0 0;
  transform-origin: bottom;
}
.dist .bar.is-you { background: var(--best-fill); }
.dist .bar.is-you::after {
  content: "you"; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  padding-bottom: 3px; white-space: nowrap;
  font-family: var(--text); font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--best);
}
.reveal .ribbon {
  position: relative; max-width: none; flex: none;
  height: 10px; gap: var(--s1); margin-top: var(--s1);
}
.crowd-tick {
  position: absolute; left: var(--x, 50%); top: -4px; bottom: -4px;
  width: 2px; margin-left: -1px; border-radius: 1px;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--paper);
  transition: left var(--dur) var(--ease);
}
.crowd { position: relative; height: 1.5rem; --x: 50%; --lw: 5rem; }
.crowd-label {
  position: absolute; top: .35rem;
  left: clamp(0px, calc(var(--x) - var(--lw) / 2), calc(100% - var(--lw)));
  white-space: nowrap; line-height: 1.1;
  font-size: var(--t-s); color: var(--ink-2);
  transition: left var(--dur) var(--ease);
}
.crowd-label b {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  font-variation-settings: "opsz" 18, "SOFT" 0, "WONK" 0;
  color: var(--purple); font-variant-numeric: tabular-nums;
}

.vote-stats {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4);
  margin: var(--s2) 0 0;
  font-size: var(--t-s); color: var(--ink-3);
}
.vote-stats b {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  font-variation-settings: "opsz" 18, "SOFT" 0, "WONK" 0;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.vote-stats a { color: var(--accent-link); text-decoration: none; margin-left: auto; }
.vote-stats a:hover, .vote-stats a:focus-visible { text-decoration: underline; }

.welcome {
  margin: var(--s4) 0 0;
  font-size: var(--t-m); font-style: italic; line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.wm-inline {
  font-family: var(--display); font-style: normal; font-weight: 600;
  font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0;
  letter-spacing: -.01em; color: var(--ink);
}
.wm-inline em { font-style: normal; font-weight: 600; color: var(--purple); }

/* the first vote's choreography: the panel opens, the bars rise left to
   right, the ribbon paints in, the crowd's marker lands, the numbers
   arrive, and the welcome comes last */
@keyframes bar-in  { from { transform: scaleY(0); } to { transform: none; } }
@keyframes seg-in  { from { opacity: 0; transform: scaleY(.25); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vote-scale.is-revealing .dist .bar {
  animation: bar-in 320ms var(--ease) both;
  animation-delay: calc(200ms + var(--i, 0) * 28ms);
}
.vote-scale.is-revealing .ribbon > span {
  animation: seg-in 260ms var(--ease) both;
  animation-delay: calc(300ms + var(--i, 0) * 26ms);
}
.vote-scale.is-revealing .crowd-tick,
.vote-scale.is-revealing .crowd-label { animation: rise-in 300ms var(--ease) both; animation-delay: 700ms; }
.vote-scale.is-revealing .vote-stats { animation: rise-in 300ms var(--ease) both; animation-delay: 820ms; }
.vote-scale.is-revealing .welcome { animation: rise-in 420ms var(--ease) both; animation-delay: 1040ms; }

.vote-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2) var(--s4); margin-top: var(--s4);
}
.status { margin: 0; font-size: var(--t-m); color: var(--ink-2); flex: 1 1 14rem; }
.status .num {
  font-family: var(--display); font-weight: 600; font-size: 1.125em;
  font-variation-settings: "opsz" 18, "SOFT" 0, "WONK" 0;
  color: var(--purple);
}
.status .dim { color: var(--ink-3); }
.status .s-short { display: none; }
.next-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); }
/* squared to the tiles' radius so the panel's controls read as one set */
.next {
  appearance: none; -webkit-appearance: none;
  display: inline-block;
  padding: .55rem 1rem; border-radius: 3px;
  border: 1px solid var(--rule-2); background: transparent; color: var(--ink);
  font-size: .9375rem; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.next:hover, .next:focus-visible { border-color: var(--best); color: var(--best); }
.next:active { transform: translateY(1px); }
.next kbd { margin-left: .6em; color: inherit; border-color: currentColor; opacity: .7; }
.vote-scale.voted .next { background: var(--best-fill); color: var(--on-best); border-color: var(--best-fill); font-weight: 600; }
.vote-scale.voted .next:hover, .vote-scale.voted .next:focus-visible { background: var(--best); color: #FFFFFF; border-color: var(--best); }
.upnext { margin: 0; font-size: var(--t-s); color: var(--ink-3); text-align: right; }

@media (max-width: 30em) {
  .vote-scale { padding-top: var(--s3); }
  .vote-head { margin-bottom: var(--s2); }
  .vote-hint { display: none; }
  .welcome { font-size: var(--t-s); }
  .vote-stats a { margin-left: 0; }
  .vote-foot { flex-wrap: nowrap; gap: var(--s3); margin-top: var(--s3); }
  .status { flex: 1 1 auto; min-width: 0; font-size: var(--t-s); }
  .status .s-long { display: none; }
  .status .s-short { display: inline; }
  .next-wrap { flex: 0 0 auto; }
  .next { padding: .5rem .8rem; font-size: var(--t-s); }
  .upnext { display: none; }
}

/* per-poem actions, on the field under the sheet */
.poem-actions {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5);
  margin: var(--s4) 0 0; padding: 0; list-style: none;
  font-size: var(--t-s); font-weight: 500;
}
.poem-actions a { color: var(--field-ink-2); text-decoration: none; transition: color var(--dur) var(--ease); }
.poem-actions a:hover, .poem-actions a:focus-visible { color: var(--best); text-decoration: underline; }
.poem-actions .report a { color: var(--field-mute); }

/* ------------------------------------------------------------------ footer
   A band a half-step deeper than the field, opened by a rule and set to
   the masthead's measure: the site's name and its numbers, two short
   columns of links, then a base line on its own hairline.
   ------------------------------------------------------------------ */
.site-footer {
  margin-top: var(--s8);
  background: var(--band);
  border-top: 1px solid var(--band-line);
  color: var(--field-ink-2);
  font-size: var(--t-s);
}
.foot-in, .foot-base, .foot-rule {
  width: 100%; max-width: calc(64rem + 2 * var(--gutter)); margin-inline: auto;
  padding-inline: var(--gutter);
}
.foot-in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s6);
  padding-block: var(--s6);
}
.foot-brand { grid-column: 1 / -1; }
.foot-brand .wordmark { display: inline-block; font-size: 1.375rem; }
.foot-brand .tag { margin: var(--s2) 0 0; font-style: italic; color: var(--field-mute); }
.foot-brand .stats { margin: var(--s3) 0 0; color: var(--field-ink-2); }
.foot-brand .stats .num { color: var(--field-ink); font-weight: 500; }
.foot-h {
  margin: 0 0 var(--s2);
  font-size: var(--t-nav);
  color: var(--field-mute);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: .9375rem; line-height: 1.9; }
.site-footer ul a { color: var(--field-ink-2); text-decoration: none; transition: color var(--dur) var(--ease); }
.site-footer ul a:hover, .site-footer ul a:focus-visible { color: var(--best); text-decoration: underline; }
.site-footer ul .alms { color: var(--best); }
.site-footer ul .pole::before { vertical-align: .02em; }
.foot-rule hr { margin: 0; border: 0; border-top: 1px solid var(--band-line); }
.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5);
  padding-block: var(--s4) var(--s5);
  font-size: .8125rem; color: var(--field-mute);
}
.foot-base p { margin: 0; }
.foot-base .note { max-width: 40rem; }
@media (min-width: 40em) {
  .foot-in { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); padding-block: var(--s7) var(--s6); }
  .foot-brand { grid-column: auto; }
}

/* the recede and the reveal degrade to instant state changes */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ chrome extras
   Bits the live header carries that the static mock did not: the search
   field in the utility row, the logged-in name, the session message.
   ------------------------------------------------------------------ */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.util .u-users { white-space: nowrap; }
.util .u-users .count { text-decoration: none; }
.util .u-me { color: var(--field-ink); font-weight: 600; }
.util .site-search { display: inline-flex; margin: 0; }
.util .site-search input {
  width: 6.5rem; margin: 0; padding: .3rem .7rem;
  font-family: var(--text); font-size: .8125rem; line-height: 1.2;
  color: var(--field-ink); background: var(--paper);
  border: 1px solid var(--field-line); border-radius: 999px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.util .site-search input::placeholder { color: var(--field-mute); font-style: italic; }
.util .site-search input:focus-visible { outline: none; border-color: var(--best); box-shadow: 0 0 0 3px rgb(77 139 255 / .3); }
@media (max-width: 84em) { .util .u-help, .util .u-suggest { display: none; } }
@media (max-width: 60em) { .util .site-search { display: none; } }
/* phones: the mock hid "Log in" under 30em, which left a guest with only JOIN and no way to sign in; keep Log in / Log out (and the member's name), drop About instead */
@media (max-width: 30em) {
  .util .u-users, .util .u-about { display: none; }
  .util .u-login, .util .u-me { display: inline-block; }
}
.stage--about { max-width: none; padding: 0; }
/* a stage bar with a note but no filter control: let the note flow full width under the lede */
.stage-bar:not(:has(.type-filter)) .filter-note { grid-area: auto; grid-column: 1 / -1; contain: none; text-align: left; justify-self: start; }
.stage-bar:not(:has(.type-filter)) .sort-bar { grid-area: auto; grid-column: 1 / -1; justify-self: start; }
.stage--table { max-width: calc(64rem + 2 * var(--gutter)); }
.trace { margin: var(--s4) 0 0; padding: var(--s3); overflow-x: auto; font-size: .75rem; line-height: 1.4; background: color-mix(in srgb, var(--field-line) 14%, transparent); border-radius: 3px; }
.jump { margin: 0 0 var(--s5); padding-bottom: var(--s4); border-bottom: 3px double var(--rule-2); font-family: var(--text); font-size: var(--t-s); display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.jump a { color: var(--accent-link); text-decoration: none; }
.jump a:hover { text-decoration: underline; }
.glossary dd p { margin: 0 0 .6em; }
.form-narrow { max-width: 30rem; }
.form-card .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.form-card .field.is-error label { color: #B3261E; }
.search-row { display: flex; gap: var(--s3); align-items: center; }
.search-row input { flex: 1; }
.search-types { display: flex; flex-wrap: wrap; gap: .2rem var(--s5); margin-top: var(--s3); }
.search-types .check { margin: 0; }
.pager--inline { margin-top: var(--s4); padding: 0; }
@media (max-width: 40em) { .form-card .two-up { grid-template-columns: 1fr; } }
.hint-link { font-family: var(--text); font-size: var(--t-s); color: var(--accent-link); margin-left: .5em; }
.site-message {
  margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
  background: var(--paper); color: var(--ink);
  border-left: 3px solid var(--best-fill); border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow); font-size: var(--t-m);
}

/* ------------------------------------------------------------------ reader extras
   What the live reader needs beyond the static mock: the poem body as
   preformatted text (the DB stores newlines, not stanza markup), the
   monospace variant for concrete / space-laid-out poems, the reveal strip
   for the poem you just ranked, the comment box, and link-shaped buttons.
   ------------------------------------------------------------------ */
.poem-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.poem--mono {
  font-family: "Iosevka", "JetBrains Mono", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: calc(var(--t-poem) * .86); line-height: 1.5; max-width: none;
  white-space: pre; overflow-x: auto; hanging-punctuation: none;
}
.running .form { text-decoration: none; }
.running .form:hover, .running .form:focus-visible { text-decoration: underline; text-underline-offset: .3em; }
.byline .author a { color: var(--accent-link); font-weight: 500; text-decoration: none; }
.byline .author a:hover, .byline .author a:focus-visible { text-decoration: underline; }
.wanker { margin: 0 0 var(--s4); font-size: var(--t-s); color: var(--ink-3); }
.plagiarised { margin: 0; padding: var(--s4); border: 1px solid var(--rule-2); border-radius: var(--radius); color: var(--ink-2); font-style: italic; }
.drained { margin: 0; font-size: var(--t-l); font-style: italic; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
a.next { text-decoration: none; }
.next-sm { padding: .3rem .7rem; font-size: var(--t-xs); margin-left: .35em; }
.comment-box { margin-top: var(--s4); font-family: var(--text); font-size: var(--t-s); color: var(--ink-2); }
.comment-box summary { cursor: pointer; color: var(--accent-link); font-style: italic; }
.comment-box textarea {
  display: block; width: 100%; margin: var(--s2) 0 var(--s2); padding: var(--s3);
  font-family: var(--text); font-size: var(--t-m); line-height: 1.5; color: var(--ink);
  background: transparent; border: 1px solid var(--rule-2); border-radius: 3px;
}
.comment-box textarea:focus-visible { outline: none; border-color: var(--best); box-shadow: 0 0 0 3px rgb(77 139 255 / .3); }
.comment-hint { margin: 0; color: var(--ink-3); }
.reveal-strip {
  position: relative;
  margin: 0 0 calc(var(--s5) + var(--deckle));
  padding: var(--s4) var(--pad) var(--s5);
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.reveal-lede { margin: 0; font-size: var(--t-b); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.reveal-lede a { color: var(--accent-link); text-decoration: none; }
.reveal-lede a:hover, .reveal-lede a:focus-visible { text-decoration: underline; }
.reveal-lede .by { font-style: italic; color: var(--ink-3); }
.reveal-lede .num { font-family: var(--display); font-weight: 600; font-size: 1.125em; color: var(--purple); font-variation-settings: "opsz" 18; }
.reveal-lede .num.you { color: var(--best); }
.reveal-lede .dim { color: var(--ink-3); }
.reveal-strip .dist { height: 3.5rem; }
.reveal-strip .ribbon { position: relative; max-width: none; flex: none; height: 10px; gap: var(--s1); margin-top: var(--s1); }
.reveal-strip .vote-stats { margin-top: var(--s3); }
@media (max-width: 30em) {
  .reveal-strip { padding-inline: var(--s4); }
  .reveal-strip .vote-stats a { margin-left: 0; }
}

/* ------------------------------------------------------------------ the dock
   The vote panel used to be position:sticky AND to condense itself while
   stuck, which meant it changed height in the flow at the very moment it
   stopped being stuck: the page grew by the height of the parts that came
   back, everything below jumped, and a pixel of scroll either way flipped
   it again. That was the jank.

   Now the panel rests at the foot of the sheet and never changes size.
   While it is off screen, site.js slides up this bar with the numbers and
   Send. It is position:fixed, so showing or hiding it cannot move a line
   of the page, and an IntersectionObserver on the panel decides, which
   cannot oscillate the way a height comparison can. No JavaScript means no
   bar -- the panel at the foot is the whole interface, as it always was.
   ------------------------------------------------------------------ */
.vote-form { display: contents; }
.vote-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--paper); color: var(--ink);
  border-top: 1px solid var(--rule-2);
  box-shadow: 0 -10px 28px -18px rgb(17 26 46 / .45);
  transform: translateY(105%);
  transition: transform .22s var(--ease);
  will-change: transform;
}
.vote-dock.is-up { transform: translateY(0); }
.vote-dock-in {
  width: 100%; max-width: calc(48rem + 2 * var(--gutter)); margin-inline: auto;
  padding: var(--s2) var(--gutter) max(var(--s2), env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; column-gap: var(--s4);
}
.vote-dock-label {
  font-family: var(--display); font-weight: 500; font-size: var(--t-m); line-height: 1.2;
  font-variation-settings: "opsz" 24, "SOFT" 0, "WONK" 0;
  color: var(--ink); white-space: nowrap;
}
.vote-dock .dock-scale { gap: var(--s1); }
.vote-dock .dock-scale button { min-height: 2.5rem; }
.vote-dock-go { white-space: nowrap; }
.vote-dock-go.is-idle {
  background: transparent; border-color: var(--rule-2); color: var(--ink-3);
  font-weight: 500; cursor: default;
}
@media (max-width: 34em) {
  .vote-dock-in { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); }
  .vote-dock-label { display: none; }
  .vote-dock .dock-scale button { min-height: 2.75rem; font-size: var(--t-m); }
}
@media (prefers-reduced-motion: reduce) { .vote-dock { transition: none; } }

/* ------------------------------------------------------------------ the lists
   Best / Worst / Recent: ranked rows on a sheet. Rank in the display
   face, the title, a meta line (poet, form, comments...), and the score
   with a meter tinted by its step on the ramp.
   ------------------------------------------------------------------ */
.lede .pole::before { vertical-align: .05em; }
.lede .rss { margin-left: .5em; font-style: normal; font-family: var(--text); font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-link); text-decoration: none; }
.lede .rss:hover { text-decoration: underline; }
.list-card {
  margin: 0; padding: var(--s2) var(--pad) var(--s3);
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
  list-style: none;
}
.list-empty { margin: 0; padding: var(--s5) 0; font-size: var(--t-l); font-style: italic; color: var(--ink-2); text-align: center; }
.poem-list .row {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: .25rem var(--s4); align-items: center;
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
}
.poem-list .row:first-child { border-top: 0; }
.poem-list .rank {
  font-family: var(--display); font-weight: 500; font-size: 1.6rem; line-height: 1;
  font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0;
  color: var(--ink-3); text-align: right; letter-spacing: -.02em;
}
.poem-list--best .rank { color: var(--best); }
.poem-list--worst .rank { color: var(--worst); }
/* ranks run 1..5+ digits (the Worst list sits around 13,000): the column widens and the numeral shrinks so titles never collide */
.poem-list.rank-w4 .row { grid-template-columns: 3.4rem minmax(0, 1fr) auto; }
.poem-list.rank-w5 .row, .poem-list.rank-w6 .row { grid-template-columns: 4.1rem minmax(0, 1fr) auto; }
.poem-list.rank-w4 .rank { font-size: 1.2rem; letter-spacing: 0; }
.poem-list.rank-w5 .rank, .poem-list.rank-w6 .rank { font-size: 1.05rem; letter-spacing: 0; font-variation-settings: "opsz" 18, "SOFT" 0, "WONK" 0; }
.poem-list .rank { overflow-wrap: normal; white-space: nowrap; }
.poem-list .row-main { min-width: 0; }
.poem-list .row-title {
  font-family: var(--display); font-weight: 500; font-size: 1.35rem; line-height: 1.2;
  font-variation-settings: "opsz" 24, "SOFT" 0, "WONK" 0;
  color: var(--ink); text-decoration: none; text-wrap: balance;
}
.poem-list .row-title:hover, .poem-list .row-title:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; color: var(--accent-link); }
.poem-list .row-meta {
  margin-top: .3rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem;
  font-family: var(--text); font-size: .78rem; font-style: italic; line-height: 1.4;
  color: color-mix(in srgb, var(--ink-3) 82%, var(--paper));
}
.poem-list .row-author a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-style: normal; font-size: .85rem; }
.poem-list .row-author a:hover { color: var(--accent-link); text-decoration: underline; }
.poem-list .tag {
  display: inline-block; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; font-style: normal;
  padding: 0; border-radius: 0; background: none; color: inherit; line-height: 1.5;
}
.poem-list .row-meta a { color: inherit; }
.poem-list .row-meta a:hover { color: var(--accent-link); }
.poem-list .row { padding: var(--s4) 0; }
.poem-list .mine { color: var(--best); font-style: normal; }
.poem-list .mine .num { font-family: var(--display); font-weight: 600; font-size: 1.05em; }
.poem-list .row-score { text-align: right; min-width: 4.4rem; }
.poem-list .score {
  display: block;
  font-family: var(--display); font-weight: 500; font-size: 1.45rem; line-height: 1;
  font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0;
  color: var(--ink); letter-spacing: -.02em;
}
.poem-list .meter {
  display: block; position: relative; height: 5px; border-radius: 3px; margin-top: .35rem;
  background: var(--rule); overflow: hidden;
}
.poem-list .meter i { position: absolute; inset: 0 auto 0 0; width: calc(var(--s) * 10%); background: var(--fill, var(--best-fill)); }
.poem-list .votes { display: block; margin-top: .3rem; font-family: var(--text); font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.poem-list .votes.unranked { font-style: italic; }
.pager {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s4);
  margin: var(--s5) 0 0; padding: 0 var(--s2);
  font-family: var(--text); font-size: var(--t-s);
}
.pager span:nth-child(2) { text-align: center; }
.pager span:nth-child(3) { text-align: right; }
.pager a { color: var(--field-ink-2); text-decoration: none; }
.pager a:hover, .pager a:focus-visible { color: var(--best); text-decoration: underline; text-underline-offset: .3em; }
@media (max-width: 30em) {
  .list-card { padding-inline: var(--s4); }
  .poem-list .row { grid-template-columns: 2rem minmax(0, 1fr); }
  .poem-list.rank-w4 .row { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .poem-list.rank-w5 .row, .poem-list.rank-w6 .row { grid-template-columns: 3.1rem minmax(0, 1fr); }
  .poem-list .row-score { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
  .poem-list .score { font-size: 1.15rem; }
  .poem-list .meter { width: 6rem; margin-top: 0; align-self: center; }
  .poem-list .votes { margin-top: 0; }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager span:nth-child(2) { grid-column: 1 / -1; order: 3; }
}

/* ------------------------------------------------------------------ member pages
   The profile card (who they are, the facts, votes-cast / comments-left
   by form, favorites), then their poems as the ranked list with a sort
   bar. Favorites uses the same list with authors and a remove link.
   ------------------------------------------------------------------ */
.stage--profile { max-width: calc(64rem + 2 * var(--gutter)); }
.stage-bar--tight { margin-top: var(--s6); margin-bottom: var(--s4); }
.profile-poems, #members, .anchor { scroll-margin-top: calc(var(--head-h) + 1rem); }
.admin-note a, .admin-link { color: var(--purple); font-weight: 600; text-decoration: none; }
.admin-note a:hover, .admin-link:hover { text-decoration: underline; }
.profile-card {
  padding: var(--pad); background: var(--paper); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.profile-head { margin: 0 0 var(--s5); padding-bottom: var(--s4); border-bottom: 3px double var(--rule-2); }
.profile-name {
  margin: 0 0 var(--s2);
  font-family: var(--display); font-weight: 500; font-size: var(--t-title); line-height: 1.1; letter-spacing: -.012em;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  color: var(--ink); overflow-wrap: anywhere;
}
.profile-name .active { font-family: var(--text); font-size: var(--t-xs); font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--best); vertical-align: middle; white-space: nowrap; }
.profile-meta { margin: 0; font-family: var(--text); font-size: var(--t-s); color: var(--ink-3); }
.facts { margin: 0; display: grid; gap: var(--s3) var(--s5); }
.facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s2) var(--s4); align-items: baseline; padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-family: var(--text); font-weight: 500; font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 0; font-size: var(--t-m); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.facts dd a { color: var(--accent-link); }
.facts .none { font-style: italic; color: var(--ink-3); }
.facts .flags { display: block; margin-top: .2rem; font-family: var(--text); font-size: var(--t-xs); color: var(--ink-3); }
.facts .about-text { white-space: pre-wrap; }
.lastn { margin: 0; padding: 0; list-style: none; }
.lastn li { display: flex; flex-wrap: wrap; gap: 0 var(--s3); align-items: baseline; }
.lastn a { color: var(--accent-link); text-decoration: none; }
.lastn a:hover { text-decoration: underline; }
.lastn .when { font-family: var(--text); font-size: var(--t-xs); color: var(--ink-3); }
.histories { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s5); margin-top: var(--s6); padding-top: var(--s5); border-top: 3px double var(--rule-2); }
.history h2 { margin: 0 0 var(--s3); font-size: var(--t-xs); color: var(--ink-3); display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; }
.history h2 a { color: var(--accent-link); text-decoration: none; text-transform: none; letter-spacing: 0; font-weight: 400; white-space: nowrap; }
.history h2 a:hover { text-decoration: underline; }
.history .none { margin: 0; font-style: italic; color: var(--ink-3); font-size: var(--t-s); }
.history-n { margin: 0; font-size: var(--t-m); color: var(--ink-2); }
.history-n .num { font-family: var(--display); font-weight: 600; font-size: 1.4em; color: var(--ink); }
.history-table { width: 100%; border-collapse: collapse; font-family: var(--text); font-size: var(--t-s); }
.history-table th, .history-table td { padding: .3rem .4rem; text-align: right; border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.history-table th:first-child, .history-table td:first-child { text-align: left; }
.history-table thead th { border-top: 0; border-bottom: 1px solid var(--rule-2); font-weight: 500; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.history-table tbody th { font-weight: 400; color: var(--ink-2); }
.history-table tfoot th, .history-table tfoot td { border-top: 2px solid var(--rule-2); font-weight: 600; color: var(--ink); }
.sort-bar { grid-area: filter; justify-self: end; margin: 0; font-family: var(--text); font-size: var(--t-xs); color: var(--field-mute); display: flex; flex-wrap: wrap; gap: .2rem .7rem; }
.sort-bar a { color: var(--field-ink-2); text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid transparent; }
.sort-bar a:hover { color: var(--best); }
.sort-bar a[aria-current="true"] { color: var(--best); border-bottom-color: var(--best-fill); }
.list-totals { margin: var(--s4) 0 0; padding: 0 var(--s2); font-family: var(--text); font-size: var(--t-s); color: var(--field-ink-2); text-wrap: pretty; }
.list-totals .num { font-family: var(--display); font-weight: 600; font-size: 1.1em; color: var(--field-ink); }
.poem-list .row.is-plagiarised .row-title { color: var(--ink-3); text-decoration: line-through; }
.poem-list .tag-warn { background: #F3D6D3; color: #7A1F17; }
.poem-list .unfav { color: var(--worst); text-decoration: none; }
.poem-list .unfav:hover { color: #B3261E; text-decoration: underline; }
@media (max-width: 40em) {
  .sort-bar { justify-self: start; }
  .facts > div { grid-template-columns: 1fr; gap: .1rem; }
  .profile-card { padding: var(--s4); }
}

/* ------------------------------------------------------------------ generic sheets
   The rest of the site is built from a few pieces: a sheet with prose
   (.card.prose-card), a sheet with a form (.form-card), a sheet with a
   data table (.table-card), a small notice, and the shared comment
   thread styling (.forests, from the details page).
   ------------------------------------------------------------------ */
.card {
  padding: var(--pad); background: var(--paper); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card + .card, .card + .list-card, .list-card + .card { margin-top: var(--s5); }
.card h2 { margin: var(--s5) 0 var(--s3); font-family: var(--display); font-weight: 500; font-size: var(--t-l); line-height: 1.2; font-variation-settings: "opsz" 24, "SOFT" 0, "WONK" 0; }
.card h2:first-child { margin-top: 0; }
.prose-card { font-size: var(--t-b); line-height: 1.55; }
.prose-card p { margin: 0 0 1em; text-wrap: pretty; }
.prose-card p:last-child { margin-bottom: 0; }
.prose-card a { color: var(--accent-link); }
.prose-card .sig { text-align: right; font-style: italic; color: var(--ink-2); }
.prose-card dl { margin: 0; }
.prose-card dt { margin: var(--s5) 0 var(--s2); font-family: var(--display); font-weight: 500; font-size: var(--t-l); line-height: 1.25; font-variation-settings: "opsz" 24, "SOFT" 0, "WONK" 0; }
.prose-card dt:first-child { margin-top: 0; }
.prose-card dd { margin: 0 0 var(--s3); }
.prose-card dd ul { margin: .4em 0 0; padding-left: 1.2em; }
.prose-card blockquote { margin: 0 0 1em; padding-left: 1rem; border-left: 2px solid var(--rule-2); font-style: italic; color: var(--ink-2); }
.prose-card .cite { display: block; margin-top: .3em; font-style: normal; font-size: var(--t-s); color: var(--ink-3); }
.notice { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-left: 3px solid var(--best-fill); background: var(--paper); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow); font-size: var(--t-m); }
.notice.warn { border-left-color: #B3261E; }
.notice p { margin: 0; }
.notice p + p { margin-top: .4em; }
#errors {
  margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
  border: 1px solid #B3261E; border-left-width: 3px; border-radius: 3px;
  background: color-mix(in srgb, #B3261E 7%, var(--paper));
  font-family: var(--text); font-size: var(--t-s);
}
#errors dt { font-weight: 600; text-transform: capitalize; color: #7A1F17; }
#errors dd { margin: 0 0 .4em; color: var(--ink); }
#errors dd:last-child { margin-bottom: 0; }
.form-card .field { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s2) var(--s4); align-items: baseline; padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.form-card .field:first-of-type { border-top: 0; padding-top: 0; }
.form-card .field.stack { grid-template-columns: 1fr; }
.form-card label, .form-card .field > .lbl { font-family: var(--text); font-weight: 500; font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.form-card .hint { font-family: var(--text); font-size: var(--t-xs); color: var(--ink-3); margin: .25rem 0 0; }
.form-card input[type="text"], .form-card input[type="password"], .form-card input[type="email"], .form-card input[type="url"], .form-card textarea, .form-card select {
  width: 100%; margin: 0; padding: .5rem .7rem;
  font-family: var(--text); font-size: var(--t-m); line-height: 1.4; color: var(--ink);
  background: transparent; border: 1px solid var(--rule-2); border-radius: 3px;
}
.form-card select { width: auto; appearance: none; -webkit-appearance: none; padding-right: 1.8rem; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%231D4ED8'/%3E%3C/svg%3E") no-repeat right .7rem center; }
.form-card textarea { min-height: 12rem; resize: vertical; }
.form-card textarea.poem-input { font-family: "Iosevka", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; font-size: var(--t-m); white-space: pre; overflow-wrap: normal; overflow-x: auto; min-height: 18rem; }
.form-card input:focus-visible, .form-card textarea:focus-visible, .form-card select:focus-visible { outline: none; border-color: var(--best); box-shadow: 0 0 0 3px rgb(77 139 255 / .3); }
.form-card input[type="checkbox"] { width: auto; margin: 0 .5rem 0 0; vertical-align: -.1em; }
.form-card .check { font-family: var(--text); font-size: var(--t-m); text-transform: none; letter-spacing: 0; color: var(--ink); display: block; margin: .25rem 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 3px double var(--rule-2); }
.form-actions .spacer { flex: 1; }
.btn {
  appearance: none; -webkit-appearance: none; display: inline-block;
  padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--rule-2);
  background: transparent; color: var(--ink);
  font-family: var(--text); font-size: var(--t-s); font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover, .btn:focus-visible { border-color: var(--best); color: var(--best); }
.btn-primary { background: var(--best-fill); color: var(--on-best); border-color: var(--best-fill); font-weight: 600; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--best); color: #FFFFFF; border-color: var(--best); }
.btn-danger:hover, .btn-danger:focus-visible { border-color: #B3261E; color: #B3261E; }
.table-card { padding-inline: var(--s3); overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-family: var(--text); font-size: var(--t-s); }
.data-table th, .data-table td { padding: .5rem .6rem; text-align: left; border-top: 1px solid var(--rule); vertical-align: baseline; }
.data-table th.n, .data-table td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table th.c, .data-table td.c { text-align: center; }
.data-table thead th { border-top: 0; border-bottom: 1px solid var(--rule-2); font-weight: 500; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.data-table thead th a { color: inherit; text-decoration: none; }
.data-table thead th a:hover { color: var(--best); }
.data-table thead th[aria-sort] a { color: var(--best); border-bottom: 1px solid var(--best-fill); }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--field-line) 18%, transparent); }
.data-table a { color: var(--accent-link); text-decoration: none; }
.data-table a:hover { text-decoration: underline; }
.data-table .dim { color: var(--ink-3); }
.data-table .old { color: var(--ink-3); text-decoration: line-through; }
.data-table tr.divider td { padding-top: var(--s4); font-style: italic; color: var(--ink-3); border-top: 3px double var(--rule-2); }
.preview-note { margin: 0 0 var(--s3); font-family: var(--text); font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--field-mute); text-align: center; }
.parent-quote { margin: 0 0 var(--s5); padding: var(--s3) var(--s4); border-left: 2px solid var(--rule-2); background: color-mix(in srgb, var(--field-line) 12%, transparent); border-radius: 0 3px 3px 0; }
.parent-quote .who { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); margin: 0 0 .3rem; font-family: var(--text); font-size: var(--t-xs); color: var(--ink-3); }
.parent-quote .who a { color: var(--accent-link); text-decoration: none; }
.parent-quote .text { margin: 0; font-size: var(--t-m); line-height: 1.5; overflow-wrap: anywhere; }
.captcha { margin-top: var(--s3); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s4); margin: var(--s4) 0 0; }
.shop-grid a img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-2); border-radius: 3px; }
.tipjar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s4); }
@media (max-width: 40em) {
  .form-card .field { grid-template-columns: 1fr; gap: .2rem; }
  .card { padding: var(--s4); }
}

/* ------------------------------------------------------------------ receded masthead
   Once stuck, the masthead keeps the poem nav (from 60em up) and the
   wordmark grows a context tail: "poemranker :: Title by author",
   "poemranker :: nentwined". One line, one wordmark. At rest the tail is
   hidden (the stage bar carries that information there).
   ------------------------------------------------------------------ */
.mark-cell { grid-area: mark; min-width: 0; display: flex; align-items: baseline; gap: .55em; }
.site-header .mark-cell .wordmark { grid-area: auto; flex: none; }
.context { display: none; min-width: 0; font-family: var(--text); font-size: var(--t-s); line-height: 1.3; color: var(--field-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: clamp(10rem, 24vw, 22rem); }
.context .ctx-sep { margin: 0 .45em 0 0; color: var(--field-mute); }
.context i { color: var(--field-mute); }
@media (min-height: 34em) {
  body.is-stuck .context { display: inline-block; }
}
@media (min-width: 60em) and (min-height: 34em) {
  body.is-stuck .mast-in { grid-template-areas: "mark  nav   theme" "ident util  util"; }
  body.is-stuck .theme { align-self: center; margin-top: 0; }
  body.is-stuck .nav-row { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
  body.is-stuck .site-nav { font-size: .75rem; gap: var(--s1) var(--s4); }
  body.is-stuck .site-nav a { padding-block: .3rem; }
}
@media (max-width: 60em) and (min-height: 34em) {
  body.is-stuck .mast-in { grid-template-areas: "mark  util  theme" "ident ident ident" "nav   nav   nav"; }
  body.is-stuck .context { max-width: none; }
  body.is-stuck .mark-cell { flex-wrap: wrap; row-gap: 0; }
}

/* ------------------------------------------------------------------ pick, then send */
.vote-go-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s3); margin-top: var(--s3); }
.vote-go-note { font-family: var(--text); font-size: var(--t-xs); font-style: italic; color: var(--ink-3); }
.vote-scale.has-pick .scale button[aria-pressed="true"] { background: var(--tint); color: var(--on-tint, #161A24); border-color: var(--tint); outline: 2px solid var(--best); outline-offset: 2px; }
.add-comment { margin-top: var(--s5); }
.comments-login { margin: var(--s4) 0 0; font-style: italic; color: var(--field-mute); }
.comments-login a { color: var(--accent-link); }

/* ------------------------------------------------------------------ list meta columns
   The metadata under a title lines up row to row: each list kind fixes
   its columns (from 52em up), so the eye can run down comments, last
   vote, last comment, or the poet. Below that it flows.
   ------------------------------------------------------------------ */
@media (min-width: 52em) {
  .poem-list .row-meta { display: grid; align-items: baseline; column-gap: var(--s4); }
  .poem-list .row-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .poem-list--best .row-meta, .poem-list--worst .row-meta, .poem-list--search .row-meta { grid-template-columns: minmax(7rem, 1.2fr) 6.5rem 6.5rem auto; }
  .poem-list--recent .row-meta { grid-template-columns: minmax(7rem, 1.2fr) 6.5rem 6.5rem 6.5rem 5rem auto; }
  .poem-list--user .row-meta { grid-template-columns: 6.5rem 6.5rem 11.5rem 11rem auto; }
  .poem-list--favs .row-meta { grid-template-columns: minmax(7rem, 1fr) 6.5rem 6.5rem 11.5rem 11rem auto; }
  .poem-list .row-meta .m-mine, .poem-list .row-meta .m-unfav { justify-self: end; }
}

/* ------------------------------------------------------------------ details page
   The scale with the crowd's numbers already open, the owner's tools,
   the favorites line and the comment threads (nested by reply depth).
   ------------------------------------------------------------------ */
.vote-scale.is-open .reveal { grid-template-rows: 1fr; }
.vote-scale.is-open .dist { margin-top: var(--s3); }
.owner-tools {
  margin: var(--s5) 0 0; padding: var(--s4) var(--pad);
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.owner-lede { margin: 0 0 var(--s2); font-size: var(--t-m); font-style: italic; color: var(--ink-2); }
.owner-lede b { font-style: normal; font-size: var(--t-xs); color: var(--ink); margin-right: .55rem; }
.owner-tools .poem-actions { margin: 0 0 var(--s3); }
.owner-tools .poem-actions a { color: var(--accent-link); }
.owner-tools .warn { font-weight: 400; color: var(--ink-3); }
.self-comment { margin: 0; }
.self-comment .comment-box { margin-top: 0; }
.poem-actions .admin a { color: var(--purple); font-weight: 600; }
.favs-note { margin: var(--s4) 0 0; font-size: var(--t-s); font-style: italic; color: var(--field-ink-2); }
.favs-note a { color: var(--accent-link); text-decoration: none; }
.favs-note a:hover { text-decoration: underline; }
.comments { margin-top: var(--s7); scroll-margin-top: calc(var(--head-h) + 1rem); }
.comments-h {
  margin: 0 0 var(--s4);
  font-family: var(--display); font-weight: 500; font-size: var(--t-l); line-height: 1.2;
  font-variation-settings: "opsz" 24, "SOFT" 0, "WONK" 0;
  color: var(--field-ink);
}
.comments-empty { margin: 0; font-style: italic; color: var(--field-mute); }
.comments-empty a { color: var(--accent-link); }
.forests {
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--s4) var(--pad) var(--s5);
}
.forest.is-reply .comment-text { color: var(--ink-2); }
.c-re .by { font-style: italic; }
.forest + .forest { margin-top: var(--s4); padding-top: var(--s4); border-top: 3px double var(--rule-2); }
.comment { margin: 0; }
.comment .comment { margin-left: clamp(.75rem, 3vw, 1.5rem); padding-left: clamp(.75rem, 2vw, 1rem); border-left: 2px solid var(--rule); }
.comment-header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3);
  margin: var(--s3) 0 var(--s1);
  font-family: var(--text); font-size: var(--t-xs); color: var(--ink-3);
}
.comment-header a { color: var(--accent-link); text-decoration: none; }
.comment-header a:hover, .comment-header a:focus-visible { text-decoration: underline; }
.c-vote { font-family: var(--display); font-weight: 600; color: var(--purple); letter-spacing: .02em; }
.c-who { font-size: var(--t-s); color: var(--ink); }
.c-ip { color: var(--ink-3); }
.c-ip a { color: var(--ink-3); }
.c-re { color: var(--ink-3); }
.c-stamp { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.c-actions { margin-left: auto; white-space: nowrap; }
.c-actions .c-del { margin-left: .5em; color: var(--worst); font-size: 1.1em; line-height: 1; }
.c-actions .c-del:hover { color: #B3261E; text-decoration: none; }
.comment-text {
  margin: 0 0 var(--s3); padding: 0 0 var(--s3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-m); line-height: 1.55; color: var(--ink);
  overflow-wrap: anywhere;
}
.comment:last-child > .comment-text { border-bottom: 0; }
@media (max-width: 30em) {
  .forests { padding-inline: var(--s4); }
  .c-actions { margin-left: 0; }
}

/* ------------------------------------------------------------------ buttons
   kaolin's pick from design/poemranker-buttons.html: B for actions (a
   hairline square around the word; the primary printed solid in ink with
   paper-coloured text, like a letterpress block), A for in-sentence
   actions (no box at all: the word in the label voice over a hairline
   that thickens under the pointer). The blue pill is gone.

   Two contexts, one treatment: on the warm sheet the ink is the sheet's
   ink, on the periwinkle field it is the field's. Everything below is
   driven by those four variables, so a future change is four values.
   ------------------------------------------------------------------ */
.btn, .next, .vote-go, .util .join, .util .u-login {
  --b-line: var(--ink-2);
  --b-ink:  var(--ink);
  --b-fill: var(--ink);
  --b-on:   var(--paper);
  --b-wash: color-mix(in srgb, var(--ink) 6%, transparent);
}
.util .join, .util .u-login, .site-header .btn {
  --b-line: var(--field-ink-2);
  --b-ink:  var(--field-ink);
  --b-fill: var(--field-ink);
  --b-on:   var(--paper);
  --b-wash: color-mix(in srgb, var(--field-ink) 8%, transparent);
}

/* --- the secondary: a rule around the word --- */
.btn, .next {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: .4em;
  padding: .5rem 1rem; border: 1px solid var(--b-line); border-radius: 2px;
  background: transparent; color: var(--b-ink);
  font-family: var(--text); font-size: var(--t-s); font-weight: 500; line-height: 1.2;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover, .btn:focus-visible, .next:hover, .next:focus-visible {
  border-color: var(--b-ink); color: var(--b-ink); background: var(--b-wash);
}
.btn:active, .next:active { transform: translateY(1px); }
.next kbd { margin-left: .5em; color: inherit; border-color: currentColor; opacity: .7; }

/* --- the primary: the word printed solid --- */
.btn-primary, .vote-scale .vote-go {
  background: var(--b-fill); border-color: var(--b-fill); color: var(--b-on); font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus-visible,
.vote-scale .vote-go:hover, .vote-scale .vote-go:focus-visible {
  background: color-mix(in srgb, var(--b-fill) 82%, var(--paper)); border-color: var(--b-fill); color: var(--b-on);
}
.btn-ghost { background: transparent; color: var(--b-ink); border-color: var(--b-line); font-weight: 500; }
.btn-danger:hover, .btn-danger:focus-visible { border-color: #B3261E; color: #B3261E; background: color-mix(in srgb, #B3261E 7%, transparent); }
/* after a vote, Skip stays the quiet one -- Send is the action now */
.vote-scale.voted .next { background: transparent; color: var(--b-ink); border-color: var(--b-line); font-weight: 500; }
.vote-scale.voted .next:hover, .vote-scale.voted .next:focus-visible { border-color: var(--b-ink); background: var(--b-wash); color: var(--b-ink); }

/* --- the masthead pair, at the label's size --- */
.util .u-login, .util .join {
  display: inline-block; padding: .3rem .7rem .28rem; border: 1px solid var(--b-line); border-radius: 2px;
  color: var(--b-ink); text-decoration: none; font-weight: 500;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.util .join { background: var(--b-fill); border-color: var(--b-fill); color: var(--b-on); font-weight: 600; }
.util .u-login:hover, .util .u-login:focus-visible { border-color: var(--b-ink); background: var(--b-wash); color: var(--b-ink); text-decoration: none; }
.util .join:hover, .util .join:focus-visible { background: color-mix(in srgb, var(--b-fill) 82%, var(--paper)); border-color: var(--b-fill); color: var(--b-on); text-decoration: none; }

/* --- A, for an action inside a sentence: the word, and a rule under it --- */
.next-sm, .comment-hint .next, .form-card .next-sm {
  display: inline; padding: .1rem 0 .15rem; margin-left: .15em;
  border: 0; border-radius: 0; background: transparent;
  color: var(--purple); font-family: var(--text); font-weight: 600;
  font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase; line-height: 1.2;
  box-shadow: inset 0 -1px 0 currentColor; cursor: pointer; white-space: nowrap;
}
.next-sm:hover, .next-sm:focus-visible { color: var(--purple-2); box-shadow: inset 0 -2px 0 currentColor; background: transparent; }
.comment-hint { display: inline; }

@media (max-width: 30em) {
  .next { padding: .45rem .75rem; font-size: var(--t-xs); }
}

/* ------------------------------------------------------------------ the vote panel, in order
   kaolin: "the order of things here is confusing ... and should not be
   incentivized to skip". So the panel now reads the way the action runs:
   pick a number, add a comment if you want one, then send -- the Send button
   sits AFTER the comment box, not above it -- and moving on is a quiet link
   at the foot rather than a bordered button competing with Send.
   ------------------------------------------------------------------ */
.vote-scale .comment-box { margin-top: var(--s4); }
.vote-scale .comment-box[open] { margin-bottom: var(--s3); }
.comment-guest { margin: var(--s4) 0 0; font-family: var(--text); font-size: var(--t-s); font-style: italic; color: var(--ink-3); }
.comment-guest a { color: var(--accent-link); }
.vote-go-wrap { margin-top: var(--s3); }
.vote-go-wrap.is-idle .vote-go {
  background: transparent; border-color: var(--b-line); color: var(--ink-3);
  font-weight: 500; cursor: default;
}
.vote-go-wrap.is-idle .vote-go:hover { background: transparent; border-color: var(--b-line); color: var(--ink-3); }
.vote-foot { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.skip-link {
  font-family: var(--text); font-size: var(--t-s); color: var(--ink-3);
  text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.skip-link:hover, .skip-link:focus-visible { color: var(--ink-2); border-bottom-color: var(--rule-2); }
.skip-link kbd { margin-left: .5em; opacity: .6; }
@media (max-width: 40em) {
  .vote-foot { flex-wrap: wrap; }
  .skip-link { font-size: var(--t-xs); }
}

/* ------------------------------------------------------------------ /about/
   The about page's body components come from design/poemranker-about.html.
   Its token names are mapped onto the site tokens here; the section
   rules below are that file's, scoped under .about by build_stylesheet.py.
   ------------------------------------------------------------------ */
.about {
  --paper:      var(--bg);
  --paper-2:    var(--sheet);
  --paper-3:    var(--band);
  --paper-4:    var(--field-line);
  --ink:        var(--field-ink);
  --ink-2:      var(--field-ink-2);
  --ink-3:      var(--field-mute);
  --line:       var(--field-line);
  --line-2:     #8FA3CC;
  --link:       var(--accent-link);
  --focus:      var(--accent-link);
  --best-soft:  #CBDEFF;
  --btn:        var(--best-fill);
  --btn-ink:    var(--on-best);
  --sans:       var(--text);
  --stick:      calc(var(--head-h) + 1.5rem);
  --ramp: linear-gradient(90deg, var(--c0) 0%, var(--c1) 10%, var(--c2) 20%, var(--c3) 30%, var(--c4) 40%, var(--c5) 50%, var(--c6) 60%, var(--c7) 70%, var(--c8) 80%, var(--c9) 90%, var(--c10) 100%);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .about { --line-2: #3C4E73; --best-soft: #22396B; }
}
:root[data-theme="dark"] .about { --line-2: #3C4E73; --best-soft: #22396B; }
.about .wrap { max-width: calc(64rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* the site chrome is 64rem wide (the mock was 76rem): stack the numbers plate sooner */
@media (max-width: 1279px) { .about .plate { grid-template-columns: 1fr; } }
.about .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.about [hidden]{ display:none !important }
.about .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.about .caps{ font-family:var(--text); font-weight:500; letter-spacing:.09em; text-transform:uppercase; line-height:1.2 }
.about .btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.25rem; border-radius:999px;
  border:1px solid transparent; font:inherit; font-weight:600; font-size:.95rem;
  text-decoration:none; cursor:pointer; line-height:1.2; white-space:nowrap;
  transition:background-color .15s, color .15s, border-color .15s, transform .15s;
}
.about .btn:active{ transform:translateY(1px) }
.about .btn-primary{ background:var(--btn); color:var(--btn-ink) }
.about .btn-primary:hover{ background:color-mix(in srgb, var(--btn) 82%, var(--best)) }
.about .btn-ghost{ background:transparent; border-color:var(--line-2); color:var(--ink) }
.about .btn-ghost:hover{ background:var(--paper-3) }
.about .btn-sm{ padding:.5rem .9rem; font-size:.85rem }
.about .eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--best);
}
.about .eyebrow::before{ content:""; width:2rem; height:2px; background:var(--best-fill); border-radius:1px }
.about .eyebrow-sm{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-3); margin:0;
}
.about .hero{ padding-block:clamp(2.75rem, 6vw, 5.5rem) clamp(2rem, 4.5vw, 3.5rem) }
.about .hero-grid{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 5rem); align-items:center;
}
.about .hero-grid > *{ min-width:0 }
.about h1.display{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2.9rem, 1.4rem + 5.6vw, 5.9rem);
  line-height:.96; letter-spacing:-.02em;
  margin:.85rem 0 1.25rem; text-wrap:balance;
  font-variation-settings:"SOFT" 30;
}
.about h1.display em{
  font-style:italic; font-weight:400; color:var(--best);
  font-variation-settings:"SOFT" 60, "WONK" 1;
}
.about .lede{
  font-family:var(--text); font-size:clamp(1.05rem, 1rem + .4vw, 1.28rem);
  line-height:1.5; color:var(--ink-2); max-width:36rem; margin:0 0 1.75rem;
}
.about .cta{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center }
.about .cta .aside{ font-size:.85rem; color:var(--ink-3); margin-left:.25rem }
.about .scale-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.25rem, 3vw, 1.75rem); box-shadow:var(--shadow);
}
.about .ruler{ position:relative; padding-top:3.2rem; margin:.75rem 0 1.25rem }
.about .ruler-mark{
  position:absolute; top:0; left:var(--x); transform:translateX(-50%);
  text-align:center; white-space:nowrap;
}
.about .ruler-mark b{ display:block; font-family:var(--display); font-weight:500; font-size:1.55rem; line-height:1; font-variant-numeric:tabular-nums }
.about .ruler-mark small{ display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-top:.15rem }
.about .ruler-mark::after{ content:""; display:block; width:2px; height:.7rem; background:var(--ink); margin:.25rem auto 0 }
.about .ruler-track{ height:10px; border-radius:5px; background:var(--ramp) }
.about .ruler-ticks{
  display:flex; justify-content:space-between; list-style:none; padding:0;
  margin:.45rem -.6em 0; font-family:var(--display); font-size:.95rem; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.about .ruler-ticks li{ width:1.2em; text-align:center }
.about .ruler-ends{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--text); font-style:italic; font-size:.85rem; color:var(--ink-3); margin-top:.1rem;
}
.about .steps{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.9rem; color:var(--ink-2); counter-reset:step }
.about .steps li{ display:grid; grid-template-columns:1.6rem 1fr; gap:.5rem; align-items:baseline }
.about .steps li::before{
  counter-increment:step; content:counter(step);
  font-family:var(--display); font-size:1.1rem; color:var(--best); font-weight:500; text-align:right;
}
.about .steps b{ color:var(--ink); font-weight:600 }
.about .stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.75rem;
  margin:1.25rem 0 0; padding-top:1rem; border-top:1px solid var(--line);
}
.about .stats div{ display:flex; flex-direction:column; gap:.1rem }
.about .stats dt{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; order:2 }
.about .stats dd{ margin:0; font-family:var(--display); font-size:1.35rem; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.01em }
.about .sec{ padding-bottom:clamp(2.25rem, 4.5vw, 3.75rem); scroll-margin-top:5rem }
.about .sec-body{
  border-top:3px double var(--line-2);
  padding-top:clamp(1.5rem, 3vw, 2.25rem);
  display:grid; grid-template-columns:15rem minmax(0,1fr);
  gap:1.25rem clamp(2rem, 4vw, 3.5rem); align-items:start;
}
.about .sec-head h2{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
  letter-spacing:-.015em; line-height:1.08; margin:0; text-wrap:balance;
}
.about .sec-head p{ margin:.6rem 0 0; color:var(--ink-3); font-size:.85rem; line-height:1.45; max-width:15rem }
.about .sec-main{ min-width:0 }
.about .prose{ font-family:var(--text); font-size:1.0625rem; line-height:1.62; color:var(--ink); max-width:42rem }
.about .prose p{ margin:0 0 1.1em }
.about .prose p:last-child{ margin-bottom:0 }
.about .prose a, .about .dally a, .about .dated dd a{ color:var(--link); text-decoration-thickness:1px; text-underline-offset:.18em }
.about .plate{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1rem, 2.5vw, 2rem);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:2rem clamp(1.5rem, 3vw, 2.75rem); min-width:0;
}
.about .plate-col{ min-width:0 }
.about .block + .block{ margin-top:2rem }
.about .plate h3{
  margin:0 0 .75rem; font-size:.75rem; color:var(--ink);
  display:flex; justify-content:space-between; align-items:baseline; gap:.5rem 1rem; flex-wrap:wrap;
}
.about .plate h3 .since{ font-family:var(--text); font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-3); font-size:.85rem }
.about .plate .note{ margin:0 0 .85rem; font-family:var(--text); font-style:italic; font-size:.85rem; color:var(--ink-3); line-height:1.45; max-width:34rem }
.about .scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.about .styles{ width:100%; border-collapse:collapse; font-size:.9rem }
.about .styles caption{ caption-side:top; text-align:left; font-family:var(--text); font-style:italic; font-size:.85rem; color:var(--ink-3); padding:0 0 .6rem }
.about .styles th, .about .styles td{ padding:.42rem .5rem; text-align:right; font-variant-numeric:tabular-nums; border-top:1px solid var(--line); white-space:nowrap }
.about .styles th:first-child, .about .styles td:first-child{ padding-left:0 }
.about .styles th:last-child, .about .styles td:last-child{ padding-right:0 }
.about .styles thead th{ font-family:var(--sans); font-weight:600; font-size:.66rem; line-height:1.2; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); border-top:0; border-bottom:1px solid var(--line-2); padding-top:0 }
.about .styles tbody tr:first-child > *{ border-top:0 }
.about .styles th[scope="row"], .about .styles thead th:first-child{ text-align:left }
.about .styles tbody th{ font-weight:500; color:var(--ink) }
.about .styles td{ color:var(--ink-2) }
.about .styles tfoot th, .about .styles tfoot td{ border-top:2px solid var(--line-2); font-weight:600; color:var(--ink); padding-top:.6rem }
.about .avg{ display:inline-flex; align-items:center; justify-content:flex-end; gap:.6rem }
.about .avg i{
  position:relative; flex:none; width:4rem; height:5px; border-radius:3px;
  background-image:linear-gradient(0deg, color-mix(in srgb, var(--paper-2) 40%, transparent) 0 100%), var(--ramp);
}
.about .avg i::after{
  content:""; position:absolute; top:-3px; bottom:-3px; left:calc(var(--s) * 10%); width:2px; margin-left:-1px;
  background:var(--ink); border-radius:1px; box-shadow:0 0 0 1.5px var(--paper-2);
}
.about .legend{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; align-items:center; margin:0 0 .6rem; font-size:.78rem; color:var(--ink-2) }
.about .legend span{ display:inline-flex; align-items:center; gap:.45rem }
.about .sw{ display:inline-block; width:1.2rem; height:.7rem; border-radius:2px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent) }
.about .sw-m{ background:var(--ramp) }
.about .sw-a{
  background-image:repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--ink) 32%, transparent) 3px 4px),
                   linear-gradient(0deg, color-mix(in srgb, var(--paper-2) 55%, transparent) 0 100%), var(--ramp);
}
.about .hist{ width:100%; border-collapse:collapse; table-layout:fixed; --max:37523 }
.about .hist .c-score{ width:2.1rem }
.about .hist .c-m{ width:4.6rem }
.about .hist .c-a{ width:5.6rem }
.about .hist th, .about .hist td{ padding:.24rem .45rem; vertical-align:middle }
.about .hist th:first-child, .about .hist td:first-child{ padding-left:0 }
.about .hist th:last-child, .about .hist td:last-child{ padding-right:0 }
.about .hist thead th{ font-family:var(--sans); font-weight:600; font-size:.66rem; line-height:1.2; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:right; border-bottom:1px solid var(--line-2); padding-bottom:.45rem; padding-top:0 }
.about .hist thead th:first-child{ text-align:left }
.about .hist tbody th{ font-family:var(--display); font-weight:500; font-size:1.05rem; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); line-height:1 }
.about .hist td.n{ font-variant-numeric:tabular-nums; text-align:right; font-size:.85rem; color:var(--ink-2) }
.about .hist td.a{ color:var(--ink-3) }
.about .bar{ display:flex; gap:2px; height:14px; width:100% }
.about .bar i{ display:block; height:100%; flex:none; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent) }
.about .bar .m{ width:calc(var(--m) / var(--max) * (100% - 2px)); background:var(--tint); border-radius:2px 0 0 2px }
.about .bar .a{
  width:calc(var(--a) / var(--max) * (100% - 2px)); border-radius:0 2px 2px 0;
  background-color:color-mix(in srgb, var(--tint) 45%, var(--paper-2));
  background-image:repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--ink) 32%, transparent) 3px 4px);
}
.about .viewing{ margin:0 }
.about .viewing > div{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; align-items:baseline; padding:.55rem 0; border-top:1px solid var(--line) }
.about .viewing > div:first-child{ border-top:0; padding-top:0 }
.about .viewing dt{ font-family:var(--text); font-size:.95rem; color:var(--ink-2); line-height:1.4 }
.about .viewing dd{ margin:0; font-family:var(--display); font-weight:500; font-size:1.3rem; font-variant-numeric:tabular-nums; letter-spacing:-.01em; white-space:nowrap }
.about .dally{ margin:0; max-width:44rem; font-family:var(--text) }
.about .dally > div{ padding:1.05rem 0; border-top:1px solid var(--line) }
.about .dally > div:first-child{ border-top:0; padding-top:0 }
.about .dally dt{ font-size:1.0625rem; line-height:1.45; color:var(--ink) }
.about .dally dt a{ font-weight:600 }
.about .dally dd{ margin:.3rem 0 0; font-style:italic; color:var(--ink-2); font-size:1rem; line-height:1.55; max-width:40rem }
.about .dated{ margin:0; max-width:52rem }
.about .dated > div{
  display:grid; grid-template-columns:9rem minmax(0,1fr); gap:.3rem 1.5rem;
  padding:1.05rem 0; border-top:1px solid var(--line); align-items:baseline;
}
.about .dated > div:first-child{ border-top:0; padding-top:0 }
.about .dated dt{
  font-family:var(--text); font-size:.8rem; letter-spacing:.06em; line-height:1.5; color:var(--ink-3);
  font-variant-numeric:tabular-nums; font-variant-caps:all-small-caps;
}
.about .dated dt a{ color:var(--link); text-decoration:none; font-weight:500 }
.about .dated dt a:hover{ text-decoration:underline }
.about .dated dd{ margin:0; font-family:var(--text); font-size:1rem; line-height:1.58; color:var(--ink); max-width:40rem }
.about .dated dd q{ font-style:italic }
.about .intro{ margin:0 0 1.25rem }
@media (min-width:901px){
.about .sec-head{ position:sticky; top:var(--stick) }
}
@media (max-width:1100px){
.about .plate{ grid-template-columns:1fr }
}
@media (max-width:900px){
.about .hero-grid{ grid-template-columns:1fr }
.about .sec-body{ grid-template-columns:1fr; gap:1rem }
.about .sec-head p{ max-width:34rem }
}
@media (max-width:640px){
.about .stats{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:.5rem }
.about .stats dd{ font-size:1.15rem }
.about .plate{ padding:1rem; border-radius:.85rem }
.about .styles{ font-size:.85rem }
.about .styles th, .about .styles td{ padding:.4rem .4rem }
.about .avg i{ display:none }
.about .hist th, .about .hist td{ padding:.24rem .3rem }
.about .hist .c-score{ width:1.8rem }
.about .hist .c-m{ width:3.9rem }
.about .hist .c-a{ width:4.9rem }
.about .hist td.n{ font-size:.8rem }
.about .viewing dd{ font-size:1.15rem }
.about .dated > div{ grid-template-columns:1fr; gap:.2rem }
}
/* ------------------------------------------------------------------ legacy
   Pages not yet converted render their 2003 table markup inside the new
   chrome, on a sheet. These are the old stylesheet's rules, scoped under
   .legacy (source: design/deploy/legacy-stylesheet.css). Delete a rule
   here once the last page that needs it has been converted.
   ------------------------------------------------------------------ */
.stage.legacy {
  max-width: calc(64rem + 2 * var(--gutter));
}
.legacy .sheet {
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(1rem, .5rem + 2vw, 2rem);
  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .9375rem; line-height: normal;
  overflow-x: auto;
}
.legacy .sheet a:link, .legacy .sheet a:visited { color: var(--accent-link); }
.legacy .sheet a:hover, .legacy .sheet a:active { color: var(--best); text-decoration: underline; }
.legacy .sheet table { max-width: 100%; }
.legacy .sheet img[src*="spacer_clear"] { max-width: none; }
.legacy .blurb-h { margin: 0 0 var(--s4); font-family: var(--display); font-weight: 500; font-size: var(--t-l); color: var(--field-ink); }
.legacy DT{
	border-bottom: 1px solid black;
	margin-top: 8px;
}
.legacy DD{
	text-align: justify;
}
.legacy PRE{ /* for netscape */
	font-family: Courier New, Courier, monospace;
	white-space: pre;
	font-size: 1.2em;
}
.legacy HR{
	color: #000000;
	border-style: dashed;
}
.legacy HR.solid{
	border-style: solid;
	border-width: 1;
}
.legacy A:link, .legacy A:visited{
	text-decoration: none;
	color: #227777;
	height: 10;
}
.legacy A:hover, .legacy A:active{
	text-decoration: none;
	color: #ccffdd;
	height: 10;
	/*filter:blur(color=#227777);*/
}
.legacy TEXTAREA{
	font-family: Courier New, Courier, monospace;
	line-height: normal;
	font-weight: normal;
	font-size: 1em;
	background: #eeeeff;
}
.legacy INPUT{
	line-height: normal;
	font-weight: normal;
	font-size: 1em;
	vertical-align: middle;
	background: #eeeeff;
}
.legacy INPUT.btn{
	line-height: normal;
	font-weight: normal;
	font-size: 1em;
	vertical-align: bottom;
	background: #cccccc;
}
.legacy INPUT.button{
	line-height: normal;
	font-weight: normal;
	font-size: 1em;
	vertical-align: bottom;
	background: #cccccc;
	color: black;
	background-color:transparent;
	border: 1px solid #000000;
	border-style: solid;
	border-color: black;
}
.legacy INPUT.button:hover{
	line-height: normal;
	font-weight: normal;
	font-size: 1em;
	vertical-align: bottom;
	background: #cccccc;
	color: #333333;
	background-color:transparent;
	border: 1px solid #333333;
	border-style: solid;
	border-color: black;
}
.legacy SELECT{
	line-height: normal;
	font-weight: normal;
	font-size: 1em;
	background: #eeeeff;
	vertical-align: middle;
}
.legacy TH{
	font-weight: bold;
	color : #000000;
	font-size: .9em;
	border-bottom: 1px black solid;
}
.legacy TR{
	vertical-align: top;
}
.legacy TD{
	color : #000000;
	font-size: .8em;
}
.legacy .label{
	font-weight: bold;
	color: #000000;
	font-size: .9em;
}
.legacy .sublabel{
	font-weight: normal;
	color: #000000;
	font-size: .9em;
}
.legacy .header{
	font-size: 1.1em;
	font-weight: bold;
	color : #ccddff;
}
.legacy .headerWhite{
	font-size: .9em;
	color : #333344;
}
.legacy .headerWhite A:link, .legacy .headerWhite A:visited{
	text-decoration: none;
	color:#ffffff;
}
.legacy .headerWhite A:hover, .legacy .headerWhite A:active{
	text-decoration: shadow;
	height: 10;
	/*filter:blur(color=#ffffff);*/
	color:#ccffdd;
	/*color:#99ccbb;*/
	/*color:#447766;*/
	/*color:#558877;*/
	/*color: #006622;*/
}
.legacy .pageHeader{
	font-size: 1em;
	font-weight: bold;
	color: #ccddff;
}
.legacy .subheader{
	font-size: 1em;
	color: #550033;
}
.legacy .headerGrey{
	font-size: .8em;
	color : #000000;
	background: #cccccc;
}
.legacy .headerBrightGrey{
	font-size: 1em;
	color : #000000;
	background: #99ffcc;
}
.legacy .footerGrey{
	font-size: .9em;
	color : #000000;
	background: #cccccc;
}
.legacy .primaryBackground{
	background: #ffffff;
}
.legacy #ad{
	border: solid 1px #888899;
}
.legacy #ad:hover, .legacy #ad:active{
	border: solid 1px #277;
}
.legacy .secondaryBackground{
	background: #888899;
}
.legacy .primaryTableBackground{
	background: #ffffff;
}
.legacy .fadedprimaryTableBackground{
	background: #cccccc;
}
.legacy .primaryTableBorder{
	background: #cecfce;
}
.legacy .secondTableBackground{
	background: #000088;
}
.legacy .thirdTableBackground{
	background: #eeeee6;
}
.legacy .fourthTableBackground{
	background: #ffffff;
}
.legacy .baseFont{
	font-size: 1em;
	line-height: normal;
	font-weight: normal;
	color: #000000;
}
.legacy .primaryFontColor{
	color: #000000;
}
.legacy .nav{
	background: #cecfce;
	color: #333344;
}
.legacy .navSub{
	background: #000088;
	color: #ffffff;
}
.legacy .noNavStyle{
	background: #cecfce;
	color: #000000;
}
.legacy .navBackground{
	background: #cccccc;
}
.legacy .blurb{
	font-size: 1.1em;
	font-weight: bold;
	color : #000000;
}
.legacy .button{
	color : #000000;
	text-align : center;
	font-size: 1em;
	background: #cccccc;
}
.legacy .button A:link, .legacy .button A:visited{
	text-decoration: none;
	color:#3333cc;
}
.legacy .button A:hover, .legacy .button A:active{
	text-decoration: none;
	color:#111100;
}
.legacy .date{
	font-family: Courier New, Courier, monospace;
	color: #000000;
	font-size: .7em;
}
.legacy .headerOther{
	font-size: 1em;
	color : #cccccc;
}
.legacy .submenu{
	font-size: 1em;
	font-weight: bold;
	color: #dddddd;
	background: #447733;
}
.legacy .plagiarised{
	color: #000000;
	font-size: 1.2em;
	background: #ff0000;
        border: solid black 1px;
        font-weight: bold;
        margin: 4px;
        padding: 4px;
}
.legacy .error{
	color: #000000;
	font-size: 1.1em;
	background: #ff0000;
}
.legacy #errors > dd{
	background: red;
}
.legacy #message{
  border: solid 1px blue;
  background: #cca;
  color: #284;
  font-weight: bold;
  text-align: justified;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2em;
  padding-right: 2em;
  padding-top: .5em;
  padding-bottom: .5em;
  margin-top: 1em;
}
.legacy .votesummary{
	font-weight: bold;
	text-align: right;
}
.legacy .forests{ background: white; border: solid 1px black; padding: 10px; margin-top: 5px;}
.legacy .forest{ margin: 0 0px 0 -15px;  }
.legacy .comment{ margin-left: 15px;  }
.legacy .comment-header{ font-size: .9em; }
.legacy .comment-text{ overflow: auto; text-align: justify; border-bottom: solid 1px #888; padding: 5px 25px 20px 5px; margin: 5px 0 10px 0; background: #eee; }
.legacy .stupid, .legacy .stamp{ font-size: .9em; }
.legacy .poem{ white-space: pre; margin: 10px 0 0 20px; font-family: monaco, "lucida console", "courier (mac)", "courier new", courier, monospaced; }