@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-black-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-black-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* The site's own fonts, served from the site.
 *
 * They were loaded from Google: no cookies, but every visitor's IP address reached a third party on
 * every page, which is the thing a German court fined a site for in 2022 and which an operator
 * established in France has no reason to risk. Six families, 23 files, three weights, cut to
 * the subsets and weights the stylesheet actually asks for, a browser downloads only the ranges its
 * text needs, so a page in English fetches four of them.
 *
 * Chinese, Japanese and Korean are deliberately not here: a usable Simplified Chinese face is 1.1 MB
 * per weight, and every system that reads those scripts ships a better one than we would send. They
 * fall through to the system stack, which is what the CJK web does.
 *
 * Every weight the stylesheet asks for is a file here, nothing is left for the browser to
 * synthesize. A faux bold is a smear: the renderer thickens strokes it does not understand, and it
 * shows worst exactly where this site uses semibold, on the monospace ticker and the Devanagari
 * chrome. The 600s of IBM Plex Mono and Noto Sans Devanagari are 100 KB across five files, and they
 * are the difference between the weight the design chose and the weight a renderer invents. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/archivo-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/archivo-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-vietnamese-400-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/archivo-vietnamese-600-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-condensed-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-condensed-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-condensed-vietnamese-800-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-vietnamese-400-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-vietnamese-600-normal.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-sans-devanagari-devanagari-400-normal.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:'Noto Sans Devanagari';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/noto-sans-devanagari-devanagari-600-normal.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}

/* Fourteen static pages a language, served as files. A click is a real navigation, the browser fetches
   a document and paints it, and the only thing wrong with that is the white flash between the two.
   This crossfades them: the browser takes a picture of the page leaving and of the page arriving and
   blends them, with no script, no router and no change to the build. A browser that does not know the
   rule ignores it and navigates exactly as before.
   Ninety milliseconds, and nothing is named to fly from one page to the next: an element that crosses
   the screen tells a story, and this site's argument is that nothing moves without a line in the
   journal saying so.
   The reduce query is not optional here. Two blocks below already stop the tape and the sticker for a
   reader who asked for less motion, and a page-wide crossfade is exactly the motion they asked to be
   spared. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.09s;animation-timing-function:ease}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* openfame.app · "everything here has a price stuck on it" (B4). One color: the sticker. Red only for liquidation and no-refund. */
:root{
  /* Corners, in one place. Every radius in this stylesheet is one of these eight tokens multiplied by
     --corner, which is 1 by default. Set `data-corners="square"` on <html>, or flip CORNERS in the
     build, and the whole interface goes square in one declaration, reversibly, with nothing else
     touched. Kept as tokens rather than a global override because `border-radius:0 !important` also
     squares things that are round for a reason: the language globe, the avatars, the pill counters. */
  --corner:1;
  --r-hair:calc(1px * var(--corner));
  --r-xs:calc(4px * var(--corner));
  --r-sm:calc(6px * var(--corner));
  --r-md:calc(8px * var(--corner));
  --r-lg:calc(10px * var(--corner));
  --r-xl:calc(14px * var(--corner));
  --r-2xl:calc(20px * var(--corner));
  --r-pill:calc(999px * var(--corner));
  --paper:#F4F4F1;--ink:#121212;--mute:#6B6B66;--line:#D9D9D3;--sticker:#F25C05;--tape:#E9DDBB;--red:#D62828;--liq-tint:#FFF3EE;--white:#FFFFFF;
  /* What is readable on the orange. It is the ink's value, stated again rather than pointed at: the
     orange is a colour the surface carries and not one the page gives it, so what reads on it is a fact
     about the orange. Measured 5.63:1. The site ran on a dark second register once, where `.sticker`
     followed the ink, turned light on an orange that had stayed light, and measured 2.21:1, the name
     is what stopped that, and it outlives the register. */
  --on-sticker:#121212;
  /* The currency mark, white and stated. Like the colour above it, it must not be derived from the
     paper: a sticker's ground is orange whatever the page does, so a mark that followed the page would
     have gone dark on the dark register and vanished into the price. Measured: 3.33:1 on the orange,
     and 2.59:1 on the lifted orange that register used. That clears the 3:1 a large mark needs · 39
     and 28 pixels on the Throne, and does not clear the 4.5:1 a 16-pixel mark needs on a board row.
     The figure itself stays at 5.63:1, so what is at issue is the symbol and not the amount, and the
     buy control names the full price in its own label for anyone not reading it off the sticker. */
  --on-sticker-mark:#3A1400;   /* the currency mark on the sticker: was white, 3.3:1 on the orange; burnt orange reads as the lighter mark and passes AA (pass 4) */
  --ink-orange:#BF4900;         /* the orange as text on white: the brand orange is 3.3:1 there, this is 5:1 (pass 4) */
  /* The paragraph above the partner strip, and the strip's own two sizes as fractions of it. Change
     this one number, here or in a breakpoint, and the labels and the marks move by exactly the same
     percentage, at every width, because they are not sizes but ratios of it. 11/15 and 12/15 are the
     values the design was drawn at. */
  --lead:15px;--strip-text:.7333;--strip-mark:.8;
  /* The type scale. Seven steps for text, and that is all a page may use. Before this there were
     twenty-three literal sizes, including 12 and 12.5, 13 and 13.5, 15 and 15.5, differences nobody
     can see and everybody pays for the day one of them has to change.
     `--t-field` exists for a reason that is not typographic: iOS zooms the page when a focused input is
     under sixteen pixels, so form controls do not follow the body size.
     The price ladder is deliberately *not* in here. A sticker is one atom scaled by `--s`, because on
     this site the size of a number is what says how much it matters. */
  /* A page reads 30 / 22 / 19 / 17 / 15: title, section, lead, subsection, prose. Two of those steps
     did not exist and the ramp had two collisions in it, an `h2` was set at the lead's 19, so a section
     heading and the paragraph introducing the page were the same size and argued with each other; and
     an `h3` was set at the prose's 15, told apart only by its face and its weight, which is not enough
     for the thing a reader scans for. Named by their role, as `--t-title` and `--t-lead` are: a page
     has a title, then sections, then subsections. */
  /* Seven sizes. There were eleven, and three of them · 10.5, 12 and 13.5, sat inside three pixels of
     each other while carrying seventy-one of the hundred uses on the site: three names for *small*, and
     nothing to say which one a new rule should reach for.
     `--t-mono` went into `--t-small`, because a mono face runs narrower and the half-pixel between them
     was a fiddle nobody could see. `--t-brand` and `--t-hero` went into `--t-title`: a wordmark is a
     title, and the Throne takes its weight from its band and its crown rather than from four pixels.
     And a field is not a step on a scale · 16px is the size below which iOS zooms the page on focus, so
     it is written as that where it is used, with the reason beside it. */
  /* Six. `--t-lead` was 19 and `--t-sub` 17, two names for the one step between prose and a section,
     two pixels apart. And the lead differed from a paragraph by two things at once, its size and its
     colour, so the join between them read as a break rather than as a change of voice. One step, and
     the grey does the distinguishing. */
  /* Pass 1 (29 August 2026): the four text roles are fluid between a phone and a wide screen, the two caption
     roles fixed. Floors are the sizes the nine passes measured; a wide screen gains a pixel of body and a phone
     gives a title four, so a page reads at the same rhythm on both. */
  --t-micro:11px;--t-small:13px;--t-body:clamp(15px,14.6px + .1vw,16px);--t-sub:clamp(17px,16.5px + .15vw,18px);--t-section:clamp(21px,20px + .2vw,22px);--t-title:clamp(26px,24px + .5vw,30px);

  /* The wordmark's height, a dimension of the mark and not a step of the type scale: the inlined relief mark
     is set 26 pixels tall (the lettered variant of the 26 August trial, which set 1em to the same, is gone). */
  --wordmark:26px;
  /* Shadows are physical, never decorative. Three exist: `pop` for what floats above the page (the
     language menu, the sheets), `tape` for what is taped onto it (the masking strips), and the
     sticker's own, which is what makes a sticker read as stuck rather than printed. Nothing else
     casts one, a card, a rail or a table lives in the paper, and paper is flat. */
  --shadow-pop:0 6px 20px rgba(0,0,0,.10);
  --shadow-tape:0 1px 2px rgba(0,0,0,.15);
  /* The edge of a piece of tape: the tape's own tan carried most of the way towards the ink, which is a
     brown on paper. Mixed rather than named, so the two scotch labels cannot be given two different
     browns, and so it follows the tan if the tan is ever changed. */
  --tape-edge:color-mix(in srgb, var(--tape) 62%, var(--ink));
  /* The sticker's relief. Four layers, one light source, above, like the tape strips, and every
     distance derived from `--lift`, which the atom itself computes from its own size. A price at 64
     pixels used to cast the same 1-pixel edge as a price at 22, so the big one read as printed on the
     paper and the small one as stuck to it; now the shadow grows with the number, which is what makes
     a large label look like a large object rather than a large font.
       1. the contact edge, the label's own thickness, hard, no blur;
       2. the cast shadow, soft, twice as far, which is what says it is off the paper;
       3. the lit top edge, inside;
       4. the shaded bottom edge, inside, so the face reads as slightly domed. */
  --shadow-sticker:0 var(--lift,1.5px) 0 rgba(0,0,0,.20),0 calc(var(--lift,1.5px) * 2) calc(var(--lift,1.5px) * 2.5) rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.14);
  /* The sheen is light, not colour: a white-to-shade wash laid over whatever orange is current, so a
     change to the orange needs no second value kept in step with it. */
  --sticker-sheen:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 45%,rgba(0,0,0,.08));
  /* Borders: the width is the role, the colour is the voice. 1px is a hairline, dividers, cards,
     table rows, micro-badges, in --line when it whispers and --ink when it must hold (the table
     header rule). 1.5px is structure and everything interactive, sticker family included: the state
     speaks through colour alone (--line quiet, --ink active or firm, --red alarmed), so nothing
     shifts by half a pixel when it changes state. 2px is a stamp or a red warning. Dashed is a
     placeholder or a countdown, never decoration. The two orange underlines are accents, not
     borders: 2px marks the current page in the chrome, 3px underlines the Throne, the signature.
     A width outside these is a mistake, not a nuance. */
  /* No display face. Archivo Black is a separate family at roughly 900, and setting a title in it meant
   every page had two typefaces in it, one for the title and the marks, one for everything a reader
   actually reads. Archivo at 800 is the same letterforms carried further, so a title is now the loudest
   note of one voice rather than a second voice arriving. Archivo is loaded at 400 and 600 and there is
   no 800 file, so a heading is 600: asking for a weight that is not there makes the browser synthesise
   one, which is a fake bold and looks it. `--head` survives as a name because the CJK and Arabic blocks
   below override it, and there the two were always the same family. */
--head:"Archivo Black","Archivo",system-ui,sans-serif;
--text:"Archivo",system-ui,sans-serif;--digits:"Barlow Condensed",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
}
/* One register, one brand: paper and ink, everywhere. The journal, the protocol page and the tape
   used to run on a second one, dark, dense and monospaced, four variables flipped and everything else
   inheriting, on the reasoning that machinery talking to people who came to look at machinery should
   look like machinery. Two truths were in tension and the wrong one won: the mechanism was elegant, and
   a reader crossing from the rulebook to the protocol page had the site change colour under them for a
   reason that was about us and not about them. A site that keeps one surface says the journal and the
   shop are the same place, which is the claim the whole thing rests on.
   What stays dark stays dark on every page: the tape strip, the Throne's band, the jump remote. Those
   are objects with a colour, not a register, the difference is that they do not change what is around
   them, and they are the same on the rulebook as on the journal. */

html[lang="ar"]{--text:"IBM Plex Sans Arabic","Noto Naskh Arabic",system-ui,sans-serif;--head:"IBM Plex Sans Arabic","Noto Naskh Arabic",system-ui,sans-serif}
/* Chinese, Japanese and Korean take the system's own face. A usable Simplified Chinese web font is
   1.1 MB per weight, and every system that reads these scripts already ships a better one. */
html[lang="zh"]{--text:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;--head:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif}
html[lang="ja"]{--text:"Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;--head:"Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif}
html[lang="ko"]{--text:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;--head:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif}
html[lang="hi"]{--text:"Noto Sans Devanagari",system-ui,sans-serif;--head:"Noto Sans Devanagari",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
/* Three weights, and only three. A browser sets `b` and `strong` to 700, which nothing here asks for
   and nothing here matches, so the site had 400, 600, 800 declared and a fourth arriving by default on
   every bold word that no rule happened to catch. Six selectors were restating 600 on a `b` to hold it
   back; they can stop. Anything that needs to be heavier than bold asks for 800 by name. */
b,strong{font-weight:600}
/* Images are content to look at, not objects to pick up: dragging a logo or a mark out of the page is
   never a feature here, and on the board it fights the click the row exists for. Text selection is a
   feature and keeps its highlighter; the drag rule touches images only. */
img,svg{-webkit-user-drag:none}
.wordmark,.mark,.masking,.tapelabel{user-select:none;-webkit-user-select:none}
.masking{pointer-events:none}
/* The page does not peel. `overscroll-behavior: none` stops the elastic bounce at the top and bottom, the drag that lifts the whole page and shows what is behind it, which on this design means the tape
   bar visibly coming unstuck from the top edge. It also disables pull-to-refresh, which is wanted
   here rather than tolerated: a refresh mid-purchase throws away a 180-second quote and whatever was
   typed into the sheet. */
/* The gutter is always there, whether or not there is anything to scroll. Without it a short page, the Hall before a season ends, a category with three spots, an empty Wall, has no scrollbar and is
   therefore wider than the long page the reader came from, so the whole layout steps sideways by the
   scrollbar's width on every navigation between the two. It is the most visible instability a static
   site can have and it costs one declaration.
   `stable` and not `stable both-edges`: one gutter, on the end side, which is exactly what a page with
   a scrollbar already looks like, reserving on both would cost twice the space to centre content that
   the rest of the web does not centre that way.
   Two things follow from it and both are improvements. The jump control is fixed against a viewport
   that no longer changes width, so it stops shifting between a short page and a long one. And the
   Throne band's `100vw`, which has always been a few pixels wider than the visible viewport and is
   absorbed by the body's `overflow-x: clip`, now overflows by a constant instead of by an amount that
   appeared and vanished with the scrollbar. */
html{background:var(--paper);color:var(--ink);font-family:var(--text);font-size:var(--t-body);line-height:1.45;-webkit-text-size-adjust:100%;color-scheme:light;overscroll-behavior:none;scrollbar-gutter:stable}
/* interaction details: no text drag on controls and labels, no tap flash, no double-tap zoom delay, visible pressed state */
button,.btn,.sticker,.tag,.stamp,.leader,.mine,.badge,.langs a,.langs>summary,header nav a{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:active,.sticker:active,button.close:active,nav.main .x:active{transform:translateY(1px)}
.skip{position:absolute;inset-inline-start:16px;top:-48px;background:var(--ink);color:var(--white);padding:10px 14px;border-radius:var(--r-md);z-index:20;text-decoration:none}
.skip:focus-visible{top:56px}   /* under the sticky tape bar, never behind it (WCAG 2.4.11, pass 4) */
/* Fifty pixels between whatever a page ends on and the rule the footer opens with. It used to be an
   accident: the home ended on the block of three claims, which carried 60 pixels of its own bottom
   margin, and when that block moved to the rulebook the Wall was left touching the line. Spacing that
   belongs to the page and not to its last child cannot be lost by moving that child.
   On the content wrapper rather than on the footer, so it adds to the `margin-top:auto` that pushes the
   footer down on a short page instead of competing with it. */
#content{margin-bottom:48px}
#content:focus,#content:focus-visible{outline:none}
/* Forty pixels is the touch target every link in the chrome keeps, and it is why these are flex boxes
   rather than plain anchors: a minimum height has to have something centring the label inside it.
   `.x` had taken `display` back to `inline-block`, a class beats three type selectors, so the
   minimum still applied and nothing centred against it: the label sat at the top of the line box and
   the slack fell underneath. Measured on the rendered button, thirteen pixels of air above the word
   and twenty-two below, on a control whose sides were symmetric to the pixel. `.x` is a flex box again
   and centres on both axes, so the target and the label agree wherever the class is used, in the
   chrome against this minimum, and on the token page against its own padding. */
header nav a,.langs a{display:inline-flex;align-items:center;min-height:40px;padding:0 4px}

.sheet input,.sheet select,.sheet textarea{font-size:16px}
/* The footer sits at the foot, on a short page as on a long one. `min-height:100vh` on the body only
   guaranteed the *body* was a screen tall, the content stopped where it stopped and the footer stopped
   with it, leaving up to 627 pixels of paper underneath on the Hall with an empty board. A column with
   the wrapper set to grow puts the remainder under the content instead of under the footer. */
body{min-height:100vh;display:flex;flex-direction:column;overflow-x:clip}
body>.wrap{flex:1 0 auto;display:flex;flex-direction:column}
.wrap>footer.bottom{margin-top:auto}
/* `hidden` beats any layout this sheet asks for. The attribute is styled `display:none` by the browser's
   own sheet, which an author rule setting `display` outranks, so the head tick, which then read
   `display:inline-flex`, drew an empty orange sticker beside the wordmark on every page that never
   loads the application, which is every static page, forever. The element was hidden; the stylesheet
   un-hid it. The tick has since moved into the tape bar and sets `display:flex`, which would do exactly
   the same thing without this line. */
[hidden]{display:none!important}
/* Selecting text lays the brand's orange over it, like a highlighter, the same ink on the same orange
   as a price sticker, which is the pairing the site already uses everywhere else. The text colour is
   stated rather than left to the browser: unstated, some browsers keep white, and white on this orange
   is 3.33:1.
   Inside the surfaces that are already orange the pair is inverted, or the highlight would be orange
   on orange and the selection invisible, the one place where a highlighter needs to become a marker. */
::selection{background:var(--sticker);color:var(--on-sticker)}
.sticker ::selection,.sticker::selection,.headtick ::selection,.soon::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none}

/* A link inside a sentence has to be visible as one. Measured before this rule: same colour as the
   text around it, no underline, no weight, no border, nothing at all, at rest or on hover, so the
   only way to find one was to move a mouse over it and watch the cursor. That is below the floor
   WCAG 1.4.1 sets, which asks for something other than colour; here there was not even colour.
   A hairline rather than an underline, because the site is built out of hairlines and because an
   underline through descenders at 15px is heavier than this page wants. It darkens to the ink on hover
   and on keyboard focus, so the same gesture answers both. Chrome, the menu, the footer, the row of
   marks, is exempt: there, everything is a link and nothing else is. */
.page p a:not(.btn):not(.rall),.page li a:not(.btn),.lead a:not(.btn),.help a:not(.btn),.journal a:not(.btn),.why p a:not(.btn){border-bottom:1px solid var(--line);transition:border-color .12s ease}
.page p a:not(.btn):hover,.page li a:not(.btn):hover,.lead a:not(.btn):hover,.help a:not(.btn):hover,.journal a:not(.btn):hover,.why p a:not(.btn):hover,.why p a:not(.btn):focus-visible,.page p a:not(.btn):focus-visible,.page li a:not(.btn):focus-visible,.lead a:not(.btn):focus-visible,.help a:not(.btn):focus-visible{border-bottom-color:var(--ink)}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* The page's measure, named once. Three things have to end on the same edge, the wrapper, the strip
   under the footer's marks, and the ticker hanging off the tape bar, and a number typed three times is
   three numbers that can drift. */
:root{--measure:1040px;--gutter:20px}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}
/* Money is always tabular: columns line up, and a price that updates does not shift the line it
   sits on. Applied to every element that can hold an amount rather than to a class somebody has to
   remember, the class existed and was used nowhere. */
.num,.sticker,.stat b,.row .rank,.mono,.journal time{font-variant-numeric:tabular-nums}
/* Money paid out used to be green. It is ink now: the only colour on this site is the sticker's, and
   a figure whose label already reads *Paid to outsold sellers* was never relying on the green to say
   so, the palette's own note said as much, that it must never be the only signal. Tabular figures
   stay, because a column of amounts that shifts as digits change is a different defect. */
.paid{font-variant-numeric:tabular-nums}
.num{font-family:var(--digits);font-variant-numeric:tabular-nums}
/* The stamp under a governing document's title: which version, when it last changed, which language
   governs. Normal letters in the site's own face, bold, it was mono, upper case and letterspaced,
   which is the tape's register and made a fact about the document read like a label on a machine. */
.mono{font-family:var(--mono);font-size:var(--t-small);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
/* The stamp under a governing document's title: which version, when it last changed, which language
   governs. Normal letters in the site's own face, bold. It wore `.mono`, the tape's register, upper
   case and letterspaced, which made a fact about the document read like a label on a machine, and
   which the token page needs for the figures it prints in that same class. Two registers, two names. */
.docstamp{font-size:var(--t-small);font-weight:600;color:var(--mute)}
/* Two lines that do for every block of text what balancing the copy does for one. `pretty` keeps a
   paragraph from ending on a single orphaned word, which is most of what makes a column of prose look
   ragged next to its neighbour; `balance` splits a short heading into even lines instead of a long one
   and a stub. Both are ignored where unsupported, so they cost nothing and are never load-bearing. */
/* One wrapping rule per family, and the rule does not depend on how long the member is (29 August 2026, evening).
   A browser balances a block of six lines at most and silently leaves a seventh-line block alone, so `balance` on
   paragraphs, leads, list items and help lines made two members of one family wrap by two different rules, a
   five-line answer balanced, its seven-line neighbour not, which reads as chance. So: `balance` only where a block
   is short by construction, headings, eyebrows, the home lead, captions, taglines (ninety characters at most), the
   rail's offer and drop lines, a sheet's amount lines, the sheet's result, and `pretty` on running text of any
   length, which has no line cap, never hurts a short block, and keeps a word from standing alone on a last line.
   Both are ignored where unsupported and never load-bearing. Two lists; a new block joins one of them by nature. */
h1,h2,h3,.eyebrow,.section-head .claim,.homelead,figcaption,.tagline,.row .tagline,.throne .tagline,.post>.tagline,.roffer,.drops,.line,.result p{text-wrap:balance}
p,li,.lead,.help,.figs,.meta,.traffic,.consent{text-wrap:pretty}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* header */
header.top{display:flex;align-items:baseline;justify-content:space-between;padding:24px 0 14px;gap:16px;flex-wrap:wrap}
.diagram{width:100%;height:auto;margin:18px 0 24px;display:block}

/* The category, on every row, and the same chip promoted when the row leads its category. Quiet by
   default, a hairline and the muted ink, the weight of the host name it sits beside, because a
   hundred loud chips is a hundred nothing. The leader keeps the orange it always had: the difference
   between the two states is what the badge is for, and it only reads as a difference if the common
   case is quiet. */
/* Eleven. A label on a board row is not the filter control at the top of the page: the control is
   pressed, the label is read, and a row that carries a title, a description, an owner and a price has
   no room for a chip set at the size of its prose. The two carrying the same words is what made this
   look like an inconsistency, it is the one place where two sizes are the answer, because they are
   two different things doing two different jobs. */
.cat{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);background:none;border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 6px;margin-inline-start:6px;white-space:nowrap;text-decoration:none;border-bottom:1px solid var(--line)}
/* It is a link now, so it says so on hover and takes a focus ring like every other. The underline every
   prose link carries would double the pill's own border, so the border is the underline. */
a.cat:hover,a.cat:focus-visible{color:var(--ink);border-color:var(--ink)}
/* Only what differs from `.cat`: the fill, the border and the ink. It restated the face, the size, the
   tracking and the case as well, so when the base chip moved from 11 to 13 this one stayed behind and
   a row carried the same kind of chip at two sizes. A variant says what varies. */
.cat.leader{color:var(--ink);background:color-mix(in srgb,var(--sticker) 18%,transparent);border:1px solid var(--sticker);border-radius:var(--r-pill);padding:1px 6px;margin-inline-start:6px}
/* One baseline, not one centre. A wordmark, a tagline and a handle on one line are three pieces of type,
   and type sits on a baseline. The inlined mark's drawing runs seven of its thirty units under the baseline
   (the band's three and the air under the p), which `.wordmark`'s negative margin takes back, so the
   letters of *open* sit where the brand line's letters sit, the lettered variant of the 26 August trial
   had needed the same care and is gone. */
.brand{font-family:var(--head);font-size:var(--t-title);letter-spacing:-0.02em;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 0}
.brand a{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}
/* On the brand line, in the place the head tick used to hold: the wordmark says who, the line says
   what, the handle says where.
   The arrow points at the handle, and it did not. Measured on the old drawing: its box was 40 units
   wide and the arrowhead stopped at 32.2, so a fifth of the box was empty air · 4.7 rendered pixels, and the flex gap added five more, which is the ten-pixel drift the eye read as a mark aimed past its
   target. The lower wing of the head reached 27.1 in a box 26 tall and was being clipped as well.
   The drawing now ends where its box ends: the tip lands at 38.6 of 40, which is the stroke's own
   radius from the edge and nothing more, and the box is 20 tall for a drawing that reaches 19.8. The
   gap drops to two, so what stands between the point and the @ is the ink of the cap.
   The rendered size keeps the box's 2:1 exactly, a mismatched ratio would letterbox the drawing and
   put the dead space straight back.
   The vertical is the other half of aiming: the tip sits at 76% of the box's height, so centring the
   box on the line would leave it 3.4 pixels below the middle of the text it points at. The translate
   is that correction and nothing else.
   An arrow has two ends, and the tail was the one nobody had looked at. It began at the very top of
   the box, measured, 12.98 pixels above the baseline against a cap height of 9.86, so it started
   three pixels above the sentence beside it, in white space, and twelve pixels clear of its last
   character: a mark drawn *from* nothing. It leaves at cap height now and four pixels after the full
   stop, so it comes out of the line it belongs to and lands on the handle. Both ends are attached. */
/* Inline rather than a flex row, because a flex row of an image and a word has the image's bottom edge
   for a baseline and the brand line would align to that. As inline content the anchor offers the
   handle's own text baseline, which is the one thing on it worth aligning to.
   The arrow is placed with `vertical-align` for the same reason the translate did it before: its tip
   sits at 76% of its height, so the box has to be raised 1.28 pixels for the point to land on the
   middle of the @ · 13 px of drawing, 9.88 to the tip, 4.4 above the baseline is where the text's
   middle is. */
a.follow{margin-inline-start:4px;font-family:var(--mono);font-size:var(--t-small);color:var(--mute);white-space:nowrap}
a.follow svg{width:26px;height:13px;margin-inline-end:4px;vertical-align:-1.95px}
a.follow .handle{position:relative;top:-3px}
/* Right-to-left, the handle is on the other side of the arrow, so an arrow that kept pointing right
   would point away from it. Mirrored rather than redrawn. */
html[dir="rtl"] a.follow svg{scale:-1 1}
a.follow:hover,a.follow:focus-visible{color:var(--ink)}
/* An image has no baseline, so a browser uses its bottom edge, and this drawing keeps 197 of its
   1034 units below the letters, for the p of *open*. Left alone it would hang the descender space on
   the baseline and lift the word by five pixels. The negative margin gives back exactly that space,
   as the fraction it comes from rather than as a number somebody measured once. */
/* The negative margin is the part of the drawing under the baseline (7 of the viewBox's 30 units: the band's three and the
   air beneath the p), so the brand line beside it sits on the letters' baseline, not under the band. */
.wordmark{height:var(--wordmark);width:auto;display:block;color:var(--ink);margin-bottom:calc(var(--wordmark) * -7 / 30)}
/* The header's wordmark is the outlined relief mark, inlined by the build (`src/brand/wordmark.svg`): no live text,
   so it does not wait for Archivo Black and never sets in a fallback face. Decided 29 August 2026 (evening); the
   CSS logotype of the 26 August trial, which was live text, is gone with its switch. */
.brand small{font-family:var(--text);font-weight:600;font-size:var(--t-small);color:var(--mute);margin-inline-start:10px;letter-spacing:0}
nav.main{display:flex;gap:16px;font-size:var(--t-small);font-weight:600;flex-wrap:wrap;align-items:center}
/* The sign-in control is pushed to the far end of the row rather than trailing the links: it is the
   one thing in the menu that is an action and not a destination, and `auto` on the inline start
   margin puts it there in both directions, right in English, left in Arabic, without a float, a
   position or a width to keep in step. When the row wraps it leads the second line, which is the
   nearest thing to the far end that a wrapped line has.

   `flex: 1 1 100%` on the row itself is what makes that possible: the header is a wrapping flex, so
   the menu was as wide as its own links and an `auto` margin inside it had nothing to push against.
   The basis sends the menu to its own line under the wordmark, where it already sat, and gives it
   the full width to spread across. */
nav.main{flex:1 1 100%}
nav.main #session{margin-inline-start:auto}
/* The mark of *you are here*, wherever the link lives. It was on the menu only, so the six pages
   reachable from the footer alone, the four legal documents, the press kit, the contact page, showed
   a reader nothing at all: the chrome said *you are somewhere on this site* and stopped there. */
nav.main a[aria-current],.flinks a[aria-current]{border-bottom:2px solid var(--sticker)}
/* Except the Hall, which is a stroked chip: a rule under it would sit against the stroke rather than
   under the word. It takes the orange as its own surface instead. */
nav.main a.navhall[aria-current]{border-bottom:0;-webkit-text-stroke-color:var(--sticker)}
/* The one entry in the row that is a prize rather than a document. The word is set in the paper's own
   colour and outlined thickly in the ink, five pixels, drawn under the fill, so the letters keep their
   shapes and gain an edge instead of being eaten from both sides. `paint-order` is what makes that
   difference: without it a stroke this heavy would close the counters of the `a` and the `e`.
   `--paper` and `--ink` rather than white and black, so the pair is named and not stated: on paper the
   two are 244 and 18, white and black to a reader, and they stay a word with an edge whatever those
   two become.
   The stroke needs room it does not ask for: it grows outward from every letter, so the entry carries a
   little more padding than its neighbours or it would touch them.
   Three stars, at three sizes, in the Throne's own hand, the same flat geometry carried as a mask so
   they take the sticker's orange rather than stating a colour, the same watermark treatment, no
   element to read out and no pointer to catch. One mask holds all three, because three pseudo-elements
   is two more than an anchor has; they sit over the end of the row's label, which is where the word the
   prize is named for falls. */
nav.main a.navhall{position:relative;padding:0 10px;color:var(--paper);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
nav.main a.navhall::after{content:"";position:absolute;pointer-events:none;inset-inline-end:-8px;top:-2px;width:44px;height:19px;background:var(--sticker-sheen) var(--sticker);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2044%22%3E%3Cpath%20d%3D%22M14.0%202.0L17.0%209.9L25.4%2010.3L18.8%2015.6L21.1%2023.7L14.0%2019.0L6.9%2023.7L9.2%2015.6L2.6%2010.3L11.0%209.9ZM74.0%201.5L76.1%207.1L82.1%207.4L77.4%2011.1L79.0%2016.9L74.0%2013.6L69.0%2016.9L70.6%2011.1L65.9%207.4L71.9%207.1ZM88.0%2028.0L89.5%2032.0L93.7%2032.1L90.4%2034.8L91.5%2038.9L88.0%2036.5L84.5%2038.9L85.6%2034.8L82.3%2032.1L86.5%2032.0Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2044%22%3E%3Cpath%20d%3D%22M14.0%202.0L17.0%209.9L25.4%2010.3L18.8%2015.6L21.1%2023.7L14.0%2019.0L6.9%2023.7L9.2%2015.6L2.6%2010.3L11.0%209.9ZM74.0%201.5L76.1%207.1L82.1%207.4L77.4%2011.1L79.0%2016.9L74.0%2013.6L69.0%2016.9L70.6%2011.1L65.9%207.4L71.9%207.1ZM88.0%2028.0L89.5%2032.0L93.7%2032.1L90.4%2034.8L91.5%2038.9L88.0%2036.5L84.5%2038.9L85.6%2034.8L82.3%2032.1L86.5%2032.0Z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
/* The primary control, filled rather than outlined, the same ink-on-paper pair `.btn` and the sheet's
   pay button use, named rather than stated so all three move together if either ever does.
   The rule used to be written `nav.main .x`, so the class did its job in the navigation and
   nothing at all anywhere else: the Claim button on the
   token page were `.x` too, and both rendered as bare text. It is stated once, here.
   The padding is the height, and that is the point of writing it this way. 13.5 at a 1.45 line, plus
   nine of padding each side and the border, is 40.58, so the forty-pixel touch target the chrome asks
   of every link is already met and the minimum does nothing. The navigation used to override this to
   six, which made the box 34.58, and the minimum then inflated it back to forty: two rules cancelling
   each other, and a button whose padding no longer described it. Measured on the rendered control,
   5.42 pixels of height that no declaration asked for. The override is gone rather than balanced. */
/* The X mark inside a label: its own height in em, so it follows whatever size the label is set at, and
   `currentColor`, so it follows the label's ink, white on the sign-in button, and whatever a future
   place gives it. The vertical nudge is the difference between a glyph's optical centre and a box's. */
.xmark{width:1em;height:.86em;vertical-align:-.06em;flex:none}
/* A gap rather than a space in the label. The two are anonymous flex items here, and the space that
   ended the text run sat at the end of its own line box, where line-breaking removes it, so the only
   thing separating the word from the mark was the glyph's own side bearing, which this drawing has
   none of. `gap` also works whichever side the mark lands on: the label puts it at the end in English
   and at the head in Japanese and Korean. */
.x{display:inline-flex;align-items:center;justify-content:center;gap:.22em;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:8px 16px;font-weight:600;font-size:var(--t-small);text-align:center}
.langs{position:relative;font-size:var(--t-small)}
/* The same box as every other entry in the row. `nav.main` is a flex line with a 16-pixel gap, and each
   link carries four pixels of padding a side, so the whitespace between two links is 24. This carried
   two, which made the whitespace between the chevron and the next word 22, the trigger sat two pixels
   closer to the navigation than the navigation sits to itself, on the one item that opens something.
   It was written as a control that happened to be first rather than as an entry in the line. */
/* The language control reads as the menu items beside it, because it is one of them: it was grey while
   every other entry in the row was ink, so the one control that opens something looked disabled. The
   globe and the chevron take `currentColor`, so they follow the word rather than being coloured twice. */
.langs>summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;color:var(--ink);padding:0 4px;min-height:40px}
.langs>summary::-webkit-details-marker{display:none}
/* Both marks are drawn to the edges of their own box and both are the height of a capital, which is
   what makes the row line up rather than nearly line up.
   The globe was a 24-unit box holding an 18-unit drawing: three units of nothing on every side, so at
   `width:13` the mark that showed was 9.75 and the box that positioned it was 13. The frame is cut to
   the drawing, the circle is r=9 on centre 12 and the stroke adds one unit outside it, so 2 to 22 on
   both axes, and the size is then stated once, in `em`, as the cap height Archivo declares (0.686).
   The mark and the capitals beside it are now the same height by construction. Cutting the frame also
   changed what a stroke of 1.8 would have rendered as, since the drawing is scaled harder; at 2 in the
   tighter box it comes out where it was.
   The chevron was the character `▾` at `--t-micro`. Archivo has no glyph for it, so every machine drew
   it from a different fallback, at that fallback's size and on that fallback's baseline, which is why
   it sat low here and would have sat somewhere else elsewhere. Drawn as a triangle that touches all
   four sides of a 12 × 7 box, it has no bearings to guess at and no font to lose.
   Vertically, `align-items:center` is enough: with Archivo's 878 ascent, 210 descent and the 1.45 line
   height, the middle of the capitals falls 0.009em above the middle of the line box, a tenth of a
   pixel at this size, which is below the width of the stroke that would show it. */
.langs .globe{width:.686em;height:.686em;flex:none}
.langs .chev{width:.42em;height:.245em;flex:none}
.langs>summary:hover,.langs[open]>summary{color:var(--ink)}
/* Fourteen languages made a panel taller than most of what it covered. It shows seven and scrolls for
   the rest, half, stated as half rather than as a pixel height, so a longer language name or a larger
   type scale moves the cut with it: seven items and the six gaps between them.
   The chrome and the scrolling are two elements on purpose: the panel draws the ground, the border and
   the corner, and the inner box is the only thing that moves. That separation was first needed for a
   fade, which a mask would have dissolved the border along with, the fade is gone and the separation
   is kept, because the scroll still has to clip inside a rounded corner it does not own.
   The bar is what says there is more, and it is the only thing that does. It is in the ink, thin, on no
   track; `overscroll-behavior` stops the page underneath from taking over at either end. */
.langmenu{position:absolute;inset-inline-start:0;top:100%;z-index:30;min-width:170px;padding:6px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-pop)}
.langscroll{--lang-item:calc(var(--t-small) * 1.45 + 10px);display:grid;gap:2px;align-content:start;
  max-height:calc(7 * var(--lang-item) + 6 * 2px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.langscroll::-webkit-scrollbar{width:6px}
.langscroll::-webkit-scrollbar-track{background:transparent}
.langscroll::-webkit-scrollbar-thumb{background:var(--ink);border-radius:3px}
.langmenu a,.langmenu .now{padding:4px 8px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none}
.langmenu a:hover{background:var(--paper)}
/* The language being read is not a destination. It was a link to the page you are already on, a
   control that does nothing, which a reader can only discover by using it, so it is written as a
   `span` rather than as an anchor, and it is grey. Not a link that has been disabled: a thing that was
   never one. `aria-current` still says which it is, and losing the anchor is what makes it unreachable
   by keyboard as well as unclickable, which a `pointer-events` rule would not have done.
   It keeps the box every other row has, the same padding, the same 40-pixel touch height that
   `.langs a` gives the rest, so the list stays one column of identically sized rows.
   The orange arrow that marked the browser's own language is gone with it. */
.langmenu .now{display:inline-flex;align-items:center;min-height:40px;color:var(--mute);cursor:default;user-select:none;-webkit-user-select:none}
.banner{border:1.5px solid var(--red);color:var(--red);padding:8px 12px;border-radius:var(--r-sm);font-size:var(--t-small);margin:8px 0}
.banner.ok{border-color:var(--ink);color:var(--ink)}

/* sticker: the signature */
/* One atom, scaled. A price is the loudest thing on this site and its size is what says how much it
   matters, so the ladder, a rank, a board price, a Throne, is meaning rather than clutter and stays.
   What goes is five independent numbers: everything here derives from `--s`, so a variant sets one. */
.sticker{--s:26px;--lift:calc(var(--s) * .055);display:inline-flex;align-items:baseline;gap:2px;background:var(--sticker-sheen) var(--sticker);color:var(--on-sticker);font-family:var(--digits);font-variant-numeric:tabular-nums;font-weight:800;font-size:var(--s);line-height:1;padding:8px 14px 6px;border-radius:var(--r-lg);box-shadow:var(--shadow-sticker);transform:rotate(-2deg);transition:transform .15s ease,box-shadow .15s ease;white-space:nowrap;direction:ltr}
.sticker .cur{font-size:calc(var(--s) * .615);color:var(--on-sticker-mark)}
/* White on the orange, and the sticker's own voice everywhere else. Three variants do not sit on the
   orange at all, a house spot is paper, a liquidation and a dead price are white, and a white mark
   on those measures 1.03:1 and 1.00:1, which is not faint but absent. `inherit` is exactly right here
   rather than a colour repeated three times: it takes whatever the variant already says, so the mark
   is ink on a house spot, red on a liquidation and mute on a dead price, and a fourth variant would
   arrive correct without touching this rule. */
.sticker.house .cur,.sticker.liq .cur,.sticker.dead .cur{color:inherit}
.sticker:focus-visible{--lift:calc(var(--s) * .1);transform:rotate(0deg) scale(1.05)}
@media (hover:hover){.sticker:hover{--lift:calc(var(--s) * .1);transform:rotate(0deg) scale(1.05)}}
/* The offset is named because a transform is one value: it has to be repeated in the rest state, the
   hover and the press, and three copies of a number are three numbers that can drift apart, the first
   one missed would make the sticker jump thirty pixels the moment a pointer touched it. */
.sticker.big{--s:64px;--slide:-30px;padding:14px 24px 10px;border-radius:var(--r-2xl);transform:translateX(var(--slide)) rotate(-3deg)}
/* The Throne's price answers a pointer the way a row's does: it straightens, grows a twentieth, and its
   shadow deepens. It is the same gesture and it was missing here for a reason worth stating, the base
   `.sticker:hover` and `.sticker.big` weigh the same and `.big` is written later, so it won the
   `transform` on hover as well as at rest, and the one price on the page that is now a control was the
   only one that did not move under the cursor.
   The rules are restated rather than reordered because `.big` carries a `translateX` of its own: a
   transform is one value, so the offset has to be repeated in every state or the sticker snaps back
   thirty pixels the moment a pointer touches it. Same for the press. */
.sticker.big:focus-visible{--lift:calc(var(--s) * .1);transform:translateX(var(--slide)) rotate(0deg) scale(1.05)}
@media (hover:hover){.sticker.big:hover{--lift:calc(var(--s) * .1);transform:translateX(var(--slide)) rotate(0deg) scale(1.05)}}
.sticker.big:active{transform:translateX(var(--slide)) translateY(1px)}
.sticker.dead{background:var(--white);border:1.5px solid var(--line);color:var(--mute);box-shadow:none}
.sticker.liq{background:var(--white);border:2px solid var(--red);color:var(--red)}
/* An empty spot and a falling one are still buttons, and they were the two that read as flat labels:
   both gave up the shadow that makes every other price on the board look pressed on, and the empty one
   sat on `--paper`, the row's own colour, so its border was the only thing separating them. White, and
   lifted like the rest. The dashes are gone from the falling one for the same reason, a dashed edge
   reads as a placeholder, and this is the one price on the board a reader is meant to act on quickly. */
.sticker.house{background:var(--white);border:1.5px solid var(--ink)}
/* A price that does not move: the board's rises and falls, the Throne's only rises, and a day on the
   Wall is five dollars today and five dollars in a year. White like the other three that are not the
   orange one, and written out rather than sharing the house spot's rule, `dead`, `liq` and `house`
   each state their own ground, and two of these four being identical today is not the same as being
   one thing.
   The currency mark keeps the orange where the other three hand it to the ink. It is the one part of
   a sticker that says *price* without saying which price, and on the only figure here that is a tariff
   rather than a quote it is the whole of what needs colouring. */
.sticker.fixed{background:var(--white);border:1.5px solid var(--ink)}
.sticker.fixed .cur{color:var(--ink-orange)}
.row:nth-child(odd) .sticker{transform:rotate(2deg)}
@media (hover:hover){.row:nth-child(odd) .sticker:hover{--lift:calc(var(--s) * .1);transform:rotate(0) scale(1.05)}}
/* The boxed stamp, which is now the Throne's alone: the row's liquidation notice is a line of red on
   the title rather than a label stuck to it. On a white ground, because the banner it sits on is dark
   and a red mark straight onto that ground loses half its contrast. */
.stamp{display:inline-block;background:var(--white);border:2px solid var(--red);color:var(--red);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;padding:2px 6px;transform:rotate(-3deg);white-space:nowrap}
.stamp.ink{border-color:var(--ink);color:var(--ink)}

/* The band the Throne is sunk into. Two rules, and nothing outside them knows it exists, with
   `THRONE_BAND=off` the wrapper is not emitted and these match nothing.
   Full width from inside a 1040 wrapper: negative inline margins pull the box out to the window's
   edges and an equal inline padding puts the content back where it was. The percentages resolve
   against the wrapper's content box, so the two calc terms are exact rather than approximate.
   The band is `--ink` and the card is left alone. Darkening the whole section was the first attempt and
   it was wrong on screen: it darkens the card as well, so a near-black card sat on a slightly darker
   band and the block the band exists to lift went quiet. The contrast wanted here is white on black,
   which means changing the space around the card and nothing in it.
   `100vw` counts the scrollbar and the viewport does not, which is a few pixels of horizontal overflow
   on every desktop, `overflow-x:clip` on the body absorbs it, and `clip` rather than `hidden` because
   hidden would make the body a scroll container and the tape bar would stop sticking.
   The block padding is the band's, not the block's: the masking strip hangs twelve pixels above the
   card, so the band has to start above it or it would be cut in half by its own edge. */
/* The band no longer paints a ground of its own: it is the full-bleed measure the Throne needs and
   nothing else. What the dark used to do, set the Throne apart from the board under it, the banner
   inside it now does on its own, and a second dark box around it only doubled the edge.
   No top padding either: the band opens on what it holds. */
.throneband{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);padding-block:0 24px}
.throneband .throne{margin-block:0}

/* throne */
/* Three columns: what holds the line, what it says, what it costs. The mark was missing entirely, every board row had one and the headline object did not. */
.throne{margin:24px 0 10px;background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r-sm);padding:48px 24px 24px;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center}
/* The headline object gets the largest of the five. */
/* Anchored to the headline rather than centred on the block. With four lines of text beside it, the
   eyebrow, the name, the line its holder wrote, the meta, centring put the mark opposite the gap
   between the name and the line under it, where it read as floating. It starts at the top and drops by
   the eyebrow's own height, so its top edge meets the top of the name. */
/* The season, inside the block and centred under the band. The band names the object and is the block's
   edge; the season is a fact about this run of it, so it belongs on the paper the block is made of, not
   in the band's own line. */
.throne .season{position:absolute;top:38px;inset-inline:0;display:flex;justify-content:center;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
/* The arrow leaves the band's own name and lands on the season it is a season of, the same drawing as
   the strip's and the brand line's, mirrored on its horizontal so it dives out of the line above rather
   than rising off this one. Lifted, because it is drawn coming from somewhere higher than the words it
   points at. */
.throne .seasonarrow{width:26px;height:13px;flex:none;transform:scaleY(-1);position:relative;top:-4px}
/* The Throne's mark is a square filling the height of the card, and the way to get there was to stop
   asking CSS to fit it to the row and let it set the row instead. Stretching it makes its height
   definite and `aspect-ratio` would give the width, except the column it sits in is `auto`: a grid
   sizes columns before rows, from the item's own contribution, the width that was supposed to come
   from the height. The two wait on each other and the browser falls back to the content's width.
   So the mark states 220 and becomes the tallest thing in the card, which makes its height the height
   available by construction rather than by agreement. The `max` is the other half: when the words
   beside it run longer than 220, a long name, or one of the thirteen translations that runs to three
   lines, `ui.js` measures that column into `--tbox` and the mark grows to meet it. Without the script
   the mark is 220 and square, which is the shape asked for; with it, it also follows.
   The letters of the two-letter fallback stay a fixed fraction of the box, whatever it comes to. */
.throne .tlogo{--box:max(100px, var(--tbox,0px));align-self:start}
/* A band across the top of the block rather than a line above a name. It is the only place on the page
   that says which Throne and which season, and set as a muted line inside the text column it read as a
   caption to the holder's name, the name's label rather than the block's title. Black, white, centred
   and stuck to the top edge, it titles the block, which is what it is for.
   Absolutely positioned, so the grid underneath keeps the three columns it had; the block's top padding
   is what makes room for it · 52 against the 22 it keeps everywhere else. */
.throne .eyebrow{position:absolute;top:0;inset-inline:0;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:var(--t-small);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  text-align:center;padding:6px 12px;border-start-start-radius:calc(var(--r-sm) - 1px);border-start-end-radius:calc(var(--r-sm) - 1px)}
/* The name and the line its holder wrote share a row, the way a board row's do: the same orange mark
   between them, the same order, and the same rule drawing that mark, it is written once, for the
   three places that use it.
   One row, and it does not wrap: with the mark beside it at 220 the column is narrow, and a line
   allowed to wrap dropped below the name instead of sitting beside it. Each gives up room before it
   overflows and whichever runs out takes the ellipsis, exactly as on a board row.
   `align-items:baseline`, so the line at body size and the name at hero size sit on one baseline
   rather than one being centred against the other, which is also what the mark's own shift is
   measured against. */
.throne h1{position:relative;display:flex;align-items:baseline;gap:6px;min-width:0;font-family:var(--text);font-weight:600;font-size:var(--t-title);letter-spacing:-0.02em;margin:6px 0 18px;line-height:1.05}
.throne h1>a{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.throne h1 .offer{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--body);font-size:var(--t-body);font-weight:400;letter-spacing:0;color:var(--ink)}
.throne h1 a{border-bottom:3px solid var(--sticker)}
/* The figures end the column, and the bar chart ends the figures. `space-between` rather than a width
   on either: the lines take what they need and the chart keeps its own, which is the rule the partner
   strip already follows and the reason no constant here goes stale when a translation runs long.
   `flex-end` because the chart is read against the last line of figures, not against the first.
   26 above it, the value that separates a heading from what precedes it everywhere else on the site, because the description above belongs to the product and these belong to the seat. */
.throne .meta{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:24px;font-size:var(--t-small);color:var(--mute)}
/* The chart is the seat's week and carries the two figures it is a chart of, exactly as a board row's
   does on a wide board: the chart, then what a day of this place is worth, then what one of its clicks
   costs. Stacked, not side by side, beside the chart the block is whatever the flex row leaves it, and
   at that width *229 clicks per day* broke into three lines. Above them it takes its own measure.
   `flex:none` because a flex item shrinks by default, which is what made the block narrow in the first
   place: it is a figure with a picture over it and it wants exactly the width of the longer of the two.
   The lines to the left of it are the reign's, how long, how contested, how many clicks this holder
   has collected, and the two are kept apart because a sale resets one and never the other. */
.throne .clicks{flex:none}
.throne .meta b{color:var(--ink);font-weight:600}
/* The three objects on this side, price, control, countdown, end on one edge instead of each being
   centred on its own width, which is what made the column read as ragged. `align-items:stretch` gives
   them a common right edge; the sticker keeps its own width because it is inline-flex inside a button. */
/* The countdown holds the bottom of the column. Everything else in it is stacked from the top, the
   price, then the control, and the clock is the one line that belongs to the card rather than to the
   sale: an `auto` top margin pushes it to the foot however tall the banner turns out to be, instead of
   trailing whatever happens to be above it. */
.throne .cta{display:flex;flex-direction:column;align-items:flex-end;align-self:stretch;gap:10px}
/* Two lines hold the bottom now, not one: who is up there and how long the season has left. They are
   the two facts that belong to the card rather than to the sale, so they end it together, one box
   with the `auto` margin the countdown used to carry alone, and no gap inside it, because two lines of
   the same face at the same size already read as one block. */
.throne .cta .foot{margin-top:auto;text-align:end}
/* The caption under the price, and the arrow from one to the other. It says what the figure is, because
   a price on a sticker reads as *what this is worth* everywhere else on the page and here it means
   *what this costs you*, and it links to the rulebook, where the rule that produced the number is.
   The arrow is swung steeply because the two are stacked: it climbs rather than runs.
   Two different kinds of move, and they are written differently on purpose. The gap between the sticker
   and the caption is a `margin`, because it is layout: the column stacks the price, this, and the
   countdown, and a transform here would slide the caption over the line under it while leaving a
   caption-shaped hole where it used to be. The nudge on the words is a `transform`, because it is not
   layout: the column is pinned to its end edge, so anything that changes the group's width moves the
   arrow instead of the words, a margin on the words would have pushed the arrow right rather than
   pulling the words left. A transform is the one move that leaves every other box exactly where it is,
   which is what an optical correction should do. */
.throne .takecap{display:inline-flex;align-items:center;gap:4px;margin-top:18px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;color:var(--mute);text-decoration:none}
.throne .takecap:hover,.throne .takecap:focus-visible{color:var(--ink)}
.throne .takecap>span{transform:translate(-10px, 7px)}
.throne .takearrow{width:22px;height:11px;flex:none;transform:rotate(-58deg);position:relative;top:-6px}
.throne .cta .btn{width:100%}
/* The countdown is a calendar, not an alarm. This sheet's first line reserves red for liquidation and
   no-refund; a season reset is neither, and spending the alarm colour on a routine is how a colour
   stops meaning anything the day something is actually wrong. Measured before the change: eight uses
   of red, six of them alarms, and the two resets, this one and the panel's, the exceptions. */
/* The one clock on the page that runs out on somebody: the seat is held until it reads zero. In the
   house orange and at the weight of the banner's other figures, because a countdown set in the grey the
   page uses for asides was the least visible thing on a banner built around it. */
.throne .reset{font-family:var(--mono);font-size:var(--t-small);font-weight:600;color:var(--ink-orange);text-align:end}
/* The name above it, set the same way and in ink: one is a fact, the other is running out. Written
   out rather than factored with the countdown, a test reads the countdown's weight and colour from
   one declaration, in the banner and in the rail, to hold the two clocks identical. */
.throne .heldby{font-family:var(--mono);font-size:var(--t-small);font-weight:600;color:var(--ink);text-align:end}
.throne .heldby a{color:inherit}
/* Across the corner rather than along the top edge. Tape at two degrees reads as a caption someone laid
   straight; at thirty it reads as tape, put on in a hurry, over the corner, holding the price sticker
   down. It leaves the card on both sides, which is what tape does and what the block allows: nothing
   here clips, so the ends stand proud in the band behind it.
   Placed by its own centre and not by a fixed offset. Pinned to the corner and pulled back by a fixed
   number of pixels, where the strip sits depends on how long its text is, and its text is a sentence
   in fourteen languages, so it would have sat somewhere different in each. The inset is the anchor and
   the translation moves it by a fraction of *itself*, so a longer sentence grows in both directions
   around the same point instead of sliding off it.
   The anchor carries the offset · 60 down and 25 out past the corner, and the translation stays a
   fraction. Mixing pixels into the translation would have put the length-dependence back into the part
   that exists to be independent of it. The offset is logical, so right to left it goes out past the
   other corner without a rule of its own. */
.masking{position:absolute;top:60px;inset-inline-end:0;background:var(--tape);border:1px solid var(--tape-edge);color:var(--ink);font-family:var(--mono);font-size:var(--t-small);letter-spacing:.1em;padding:4px 16px;transform:translate(calc(38% - 50px),-34%) rotate(30deg);box-shadow:var(--shadow-tape);opacity:.96}
/* Right to left, the corner is the other one and the lean goes the other way, or the tape would run off
   the card instead of across it. */
[dir="rtl"] .masking{transform:translate(calc(-38% + 50px),-34%) rotate(-30deg)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);border-radius:var(--r-pill);padding:10px 18px;font-weight:600;font-size:var(--t-small);text-align:center}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn[disabled]{opacity:.5;cursor:default}

/* The Throne's own mark, in the corner of the two places the Throne is drawn. Flat and geometric,
   carried as a mask rather than an image so it takes the sticker's orange instead of stating a colour
   of its own. It is a watermark and behaves like one: a pseudo-element, so there is no element to read
   out and no pointer to catch, and the tilt is the site's own, the lean every sticker and every tape
   strip has, and it stays under a reduced-motion request because a fixed angle is a shape, not
   movement.
   At the top of the start corner, because a crown sits above a head and not under one. The end corner
   is not free and cannot be made free: the masking strip hangs over its top and the large price sticker
   fills the rest. The room at the start is the card's top padding plus the gap above a mark that is
   vertically centred · 53 pixels on a desktop, 46 on a phone, so at 34 high, set 8 from the top, it
   ends at 42 and clears the mark in both. */
/* The crown wears the sticker's own surface: the sheen over the orange, and the two drop shadows that
   lift every price on the page.
   The shadow is a `filter` and not `box-shadow`, and that is forced rather than chosen. A mask clips
   everything the element paints, box-shadow included, so an outer shadow on a masked element is drawn
   and then thrown away, the mark would simply have no shadow. `drop-shadow` reads the alpha the mask
   leaves behind, so the shadow takes the shape of the crown instead of the shape of its box, which is
   what a shadow under a crown should do anyway.
   Two of the four parts of `--shadow-sticker` come across: the tight one and the soft one. The two
   inset parts cannot, there is no inset drop shadow, and they are the edge lighting of a raised
   surface, which a flat mark cut out of a gradient does not have to imitate. `--lift` is stated here
   because the sticker computes it from a font size these marks do not carry. */
.throne h1::before,.rail .rname::before,nav.main a.navhall::after{--lift:1.5px;
  filter:drop-shadow(0 var(--lift) 0 rgba(0,0,0,.20)) drop-shadow(0 calc(var(--lift) * 2) calc(var(--lift) * 2.5) rgba(0,0,0,.16))}
.throne h1::before,.rail .rname::before{content:"";position:absolute;pointer-events:none;background:var(--sticker-sheen) var(--sticker);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2078%22%3E%3Cpath%20d%3D%22M8%2070V22l21%2021L50%2014l21%2029%2021-21v48z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2078%22%3E%3Cpath%20d%3D%22M8%2070V22l21%2021L50%2014l21%2029%2021-21v48z%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
/* On the head it crowns, not in the corner of the room. It used to sit at the card's top start corner,
   which was the only free corner and had nothing to do with the name, and once the mark beside it grew
   to 220 the crown was floating over a black square. Hung off the heading itself, it needs no
   arithmetic: it moves when the name moves, in any of the fourteen languages, at any mark size. */
.throne h1::before{width:44px;height:34px;inset-inline-start:-6px;top:-30px;transform:rotate(-12deg)}
.rail{position:relative}
/* On the name it crowns, as on the banner, a quarter smaller: 33 by 26, its foot four pixels above the letters. It sat
   in the panel's corner and landed on the mark once the head led on the host (29 August 2026). */
.rail .rname{position:relative}
.rail .rname::before{width:33px;height:26px;inset-inline-start:-4px;top:-22px;transform:rotate(-12deg)}

/* board */
/* The three objects wear one title. The Throne's is a black band across the top of its block, centred,
   in the paper's white, in the mono at its own tracking, and the Board's and the Wall's were a display
   heading on the paper, so the page named its three objects in two voices. They are one band each now,
   and the difference between the three is what they say rather than how they are set.
   The band is the whole line, so the figure that used to sit beside it, the total paid to outsold
   sellers, the Wall's price, goes under it, at the end, where a note about a section belongs once the
   section has a title of its own. */
.section-head{display:block;margin:32px 0 10px}
.section-head h2{display:block;margin:0;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:var(--t-small);font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:6px 12px;border-radius:var(--r-sm)}
/* One rule for the three slogans. The Throne's had none of its own, so it inherited the band's full
   paper and read brighter than the Board's and the Wall's, the same sentence type, the same box, two
   strengths. */
.section-head h2 .claim,.throne .eyebrow .claim{color:inherit;opacity:.72}
/* The one mark between the name of a thing and what it costs you. It was written into the three titles
   as its own element rather than inside the slogan, because `.claim` carries an `opacity` and opacity
   groups: a child at full strength inside it still comes out at 72 per cent, so a colour written in
   there would have been a muddy one. Outside, it could take the house orange at the strength it is
   published at, and then it read as one decoration too many on a line that already changes register
   twice, so it is off. The element stays, and the three titles stay written the same way in both
   places they are drawn, so bringing it back is one declaration and not three edits.
   `aria-hidden` besides, because it is punctuation between two phrases a reader already hears apart. */
.section-head h2 .dash,.throne .eyebrow .dash{display:none}
.section-head>.claim,.section-head>a.claim{display:block;margin-top:6px;text-align:end;font-size:var(--t-small);color:var(--mute)}
.section-head .claim b{color:var(--ink);font-weight:600}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.chip{font-size:var(--t-small);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;color:var(--mute);background:var(--white)}
.chip[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:600}
/* One grid for the board, not a hundred of them.
   Every row used to be its own grid, and the last track was `auto`, sized to that row's own price
   sticker. A sticker reading $1,996.68 is wider than one reading $861.85, so the `1fr` holding the
   title absorbed a different remainder on every line, and everything after it moved: measured on the
   rendered board, the owner handles started at five different x positions down five rows, and the
   click figures with them. It reads as sloppiness and it was arithmetic.
   The columns belong to the board and the rows borrow them. `subgrid` is what lets a row keep being a
   row, its own background for a liquidation, its own rule underneath, while its cells line up with
   every other row's. The alternative, `display:contents`, would have aligned them by dissolving the
   row, and with it the tint and the border that say what a row is.
   The last track is no longer free: `minmax(150px,auto)` gives the widest price a column of its own
   instead of letting it push the rest around. Horizontal padding comes off the row, because a
   subgrid's own padding insets its tracks from the ones it is borrowing. */
/* The board is measured against itself. Its six columns assume the thousand pixels the home page gives
   it, and the same board is drawn inside a 760-pixel page on *My spots*, on a profile and on a category, where the owner's row carries three buttons instead of one sticker. Measured: 398 pixels of fixed
   tracks and gutters, 286 for three buttons, leaving **76** for the title, which is why a name wrapped
   one word per line. A window breakpoint cannot see that, because the window is wide; the board's own
   width is the thing that changed. */
/* The line at the top of the board moves onto the notes when the notes are there, because they belong
   above it: the two captions annotate the board from outside, the way a hand writes in a margin, and a
   caption drawn under the rule would read as a column header instead. `:has` puts the rule back on the
   board itself whenever the notes are absent, an empty board, and every narrow board below. */
/* The owner's track was 64px, which cut every handle past seven letters (@nomaddesk, @OpenFameApp) to an ellipsis on
   the main page, found by the hostile corpus (pass 0). It now fits the longest handle on the board, at most fifteen
   letters, and the title's flexible track gives up the difference; the six columns and five gaps still come to 480. */
.board{container-type:inline-size;container-name:board;display:grid;grid-template-columns:16px 48px minmax(0,1fr) minmax(64px,max-content) 68px minmax(184px,auto);column-gap:20px}
.board:not(:has(.boardnotes)){border-top:1.5px solid var(--ink)}
.boardnotes{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:end;padding:2px 0 6px;border-bottom:1.5px solid var(--ink)}
@supports not (grid-template-columns: subgrid){
  .boardnotes{grid-template-columns:16px 48px minmax(0,1fr) minmax(64px,max-content) 68px minmax(184px,auto);column-gap:20px}
}
/* The same voice as the two handles at the top of the page: the mono micro, the same tracking, the
   same `--mute`, the word lifted off the arrow's line exactly as `.follow .handle` lifts its own.
   `row-reverse` because the reflection that mirrors the drawing has to carry the word with it: the axis
   runs down the middle of the arrow, so the caption comes out the far side of it at the same distance,
   and the gap that separated them is the same gap. The order in the markup is untouched, the word is
   still what a reader meets first, and the drawing is `aria-hidden`, so only the drawing moves.
   The pair is placed by its point and not by its box. `--aim` is how far into the column the tip has to
   land, and everything else follows from it: the group is packed against the column's far edge, so the
   padding that pulls it back is the column's own width less the aim, less the two pixels between the
   tip and the edge of its box after the swing. The caption then hangs left over whatever is beside it,
   which is what a note in a margin does.
   Anchoring on the tip rather than on the word is the point: a longer word in another language, or the
   fourteen languages falling back to English, changes where the caption starts and never where it
   points. Both columns hold their content at the start rather than centred, so the aim is measured to
   the middle of the object, a handle, the week of bars, and not to the middle of the column, which
   would put both arrows in the empty half. */
.note{--aim:0px;display:flex;flex-direction:row-reverse;align-items:center;gap:4px;padding-inline-end:calc(100% - var(--aim) - 2px);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;color:var(--mute);white-space:nowrap}
/* A caption whose target sits to its left points left, and then everything about it turns over: the
   word goes back to the far side of the arrow, the drawing is mirrored, and the anchor moves from the
   right edge of the group to the left one, the tip is 2 pixels inside whichever edge it now leads
   with. Written as one modifier so the three captions differ by which side they aim at and nothing
   else. */
.note.back{flex-direction:row;padding-inline-end:0;padding-inline-start:calc(var(--aim) - 2px)}
.note.back svg{transform:translateY(3px) scaleX(-1) rotate(46deg)}
.note.owner{grid-column:4;--aim:22px}
.note.clicks{grid-column:5;--aim:32px}
.note.act{grid-column:6;--aim:70px}
.note b{font-weight:600;position:relative;top:-5px}
/* The strip's drawing, mirrored left to right and swung 46 degrees, and the mirror is why there is no
   `scaleX` left in the chain. The drawing used to be reversed and then swung 314; reflecting that
   result about its own vertical negates the angle and cancels the reversal against itself, so what is
   written is what is left, not a fourth gesture stacked on three.
   `transform` rather than the individual `rotate` and `scale` properties, which apply in a fixed order, translate, rotate, scale, and would take the offset along the swung axis instead of straight down.
   The 3 pixels belong to the drawing and not to the caption: the word stays where the two handles at
   the top of the page put theirs, and only the arrow drops to meet the column it points at.
   The box stays 26 × 13 and the drawing overflows it, which is why nothing clips. */
.note svg{width:26px;height:13px;flex:none;transform:translateY(3px) rotate(46deg)}
.board>p{grid-column:1/-1}
.row{--logo:48px;--flagbox:40px;grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
/* Where subgrid is missing the row falls back to being its own grid, which is what it was: the columns
   drift again, and nothing else breaks. */
@supports not (grid-template-columns: subgrid){
  .row{grid-template-columns:16px 48px minmax(0,1fr) minmax(64px,max-content) 68px minmax(184px,auto);column-gap:20px}
}
.row .rank{font-family:var(--digits);font-variant-numeric:tabular-nums;font-weight:800;font-size:var(--t-section);color:var(--mute)}
/* One mark, one rule, five sizes. The board row, the Throne banner, the rail and now the three
   archives all draw the same object, an image when the link has one, two letters when it does not,
   the house's dashed paper when there is no link at all, and it was written three times under three
   names, with three different ratios of type to box (.40, .37, .43). Size is the only thing that
   varies now, carried by `--box`, and the letter is a fixed fraction of it, so a mark cannot be
   correct in one place and off in another. */
.row .logo,.throne .tlogo,.rail .rlogo,.roll .hlogo,.post .plogo{width:var(--box,34px);height:var(--box,34px);border-radius:var(--r-md);background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--text);font-weight:600;font-size:calc(var(--box,34px) * .4);line-height:1;overflow:hidden;flex:none}
/* A tile that holds a picture is not a tile. The ink is there for the fallback, two letters in paper
   on a dark square, which is a mark for a link that has none of its own, and a favicon is usually
   transparent, so the ink came through it and every holder's logo arrived on a black square it had not
   asked for. `:has()` keeps the ink where the letters are and takes it out from behind the pictures.
   `contain` rather than `cover`, for the same reason: a mark cropped to fill a square is a mark
   somebody else's grid decided the shape of. */
.row .logo:has(img),.throne .tlogo:has(img),.rail .rlogo:has(img),.roll .hlogo:has(img),.post .plogo:has(img){background:transparent}
.row .logo img,.throne .tlogo img,.rail .rlogo img,.roll .hlogo img,.post .plogo img{width:100%;height:100%;object-fit:contain}
/* Each context states its own size and nothing else; the fallback in the rule above is the board's,
   which is the size this object was first drawn at. */
/* The mark is the first thing a reader recognises on a row and it was the smallest thing on it · 34
   pixels beside a five-line description. At 56 it reads as the object's face rather than as a bullet,
   and column two is set to the same number so the box and the column are one measurement. */
/* Named on the row rather than on the mark, because the narrow row needs it for a track and a track
   cannot read a value set on the item standing in it. 48 was written here alone while the narrow track
   was written 34, the default of the shared rule, not this one's, and the mark stood 14 pixels wider
   than the column holding it, biting into the gap and then into the name. */
.row .logo{--box:var(--logo)}
/* No link at all: the house's vocabulary, already used by a spot nobody has ever owned. */
.throne .tlogo.house,.rail .rlogo.house,.roll .hlogo.house,.post .plogo.house{background:var(--paper);border:1.5px dashed var(--mute);color:var(--mute)}
.row .title{font-weight:600;font-size:var(--t-body);min-width:0;overflow-wrap:anywhere}
/* The name and the buyer's line share a line. They were siblings in a block, and the name was
   `display:block` so that a long one could be cut with an ellipsis, which put the line beneath it,
   and a row that was meant to read *Quill · Try the beta* read as two.
   A flex row keeps both the sharing and the cutting: each is `0 1 auto` with `min-width:0`, so the
   name gives up room before the line does and whichever runs out is the one that gets the ellipsis.
   The gap replaces the space the template used to carry, because a flex container drops the
   whitespace between its children. */
/* One title line, two places that draw it: a board row and a Wall card. The card used to lead on the
   link's title, which on the Wall is whatever a seller typed into a form, and to give the buyer's
   line a scrolling row of its own; it now says where the click goes, then the mark, then that line, in
   the row's own order. Shared as one rule rather than copied, because two rules meaning *the same line*
   is how the two drift apart. */
.row .titleline{display:flex;align-items:baseline;gap:6px;min-width:0}
/* The card sets its title as a column where the row sets it as a line. They were one rule while
   both put the host and the buyer's line side by side; a card is 230 wide and could not hold both,
   so it stacks them and neither is cut. `baseline` has no meaning down a column and is not written
   here; the 2 is the space between two lines of one block, not the 6 between two things on a line. */
.post>b{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
/* The title line's own link, and only it. Written as `.row .title a` it matched every anchor in the
   block, so the day the category chip became a link the chip inherited `display:block` and stretched to
   the full width of the row, a pill drawn around the line instead of around its words. The Wall's copy
   of this rule was already scoped with a child combinator; this one was not, and nothing noticed
   because until then there was one anchor in there. */
.row .titleline>a,.post>b>a{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* `Empty` is not the name of anything. It sits where a destination goes and there is no destination, so
   it takes the grey the row already uses for the other absence on it, `no clicks yet`, two columns
   along, and the two read as one state rather than as a name and a note.
   Keyed on `empty` and not on `house`: `house` is how a spot is being sold, `empty` is that nobody has
   it, and the two only happen to coincide today. The word is drawn by the absence of a link, so the
   class is too. */
.row.empty .titleline a{color:var(--mute)}
/* The live week's bar, on a spot with no week. It is the one black mark on an otherwise grey row, and
   it was drawing the eye to a figure of zero, at `--mute` it still shows the shape of the chart
   without claiming there is traffic in it. */
.row.empty .spark i.h{background:var(--mute)}
.row .titleline .offer,.post>b .offer{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Both lines are capped at the block, and it has to be said: a flex item that never wraps has a
   min-content width equal to its whole string, so down a column it grows past the card instead of
   being cut. `min-width:0` is the same statement for a row and is already on both. Written once for
   the two children rather than twice, because it is one constraint and not a property of either. */
.post>b>*{max-width:100%}
/* Down the side of the buyer's words rather than between them and the host. A middle dot joins two
   things on one line; these are on two, and what the second one needs is not a join but a mark that
   says whose writing it is. 2 against the 1 the card's own edge is drawn with, so the rule reads as a
   different kind of object rather than as a piece of the frame. */
/* The rule stands between the mark and the writing, so it runs the height of the block and not of one
   of its lines: it separates the mark from the name as much as from the line under it, which is what
   the two of them are, one thing, said twice, beside one mark. Beside a single line it was the height
   of a line box, which is the words plus the leading that separates one line from the next, and it
   hung below the words and read as marking the paragraph underneath. On the block there is no such
   question: the block is exactly the two lines. */
.post>b{border-inline-start:2px solid var(--sticker);padding-inline-start:6px}
/* The name of the thing, and it is a name rather than a footnote: at `--mute` it read as the same kind
   of aside as the host used to be on this line, which is exactly what it no longer is. */
.row .title small{display:block;font-weight:400;color:var(--ink);font-size:var(--t-small);margin-top:1px}
/* The column is 64 wide, which fits `@bob` and not `@quillwriter`. The handle is cut with an ellipsis
   rather than allowed to push the column, because the column's width is what holds the six of them in
   line, and a handle that overflowed would move the two beside it on that row alone. */
.row .owner{font-size:var(--t-small);color:var(--mute);min-width:0}
/* The words either side of the handle, drawn only where the caption is not. The wide board writes
   *slot owner* in the margin in the house hand, pointing at this column; saying it again inside 64
   pixels would leave nothing for the handle, which is the only thing the column is for. */
.row .owner .lbl{display:none}
.row .owner b,.row .owner a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .owner b{color:var(--ink);font-weight:600}
.row .clicks{min-width:0}
.row .spark,.throne .spark,.rail .spark{height:26px;display:flex;align-items:flex-end;gap:2px;padding-bottom:2px}
.row .spark i,.throne .spark i,.rail .spark i{display:block;width:8px;background:var(--line);border-radius:var(--r-hair);min-height:2px}
.row .spark i.h,.throne .spark i.h,.rail .spark i.h{background:var(--ink)}
/* Two readings of the same traffic: what a click costs at the asking price, and how many arrive in a
   day. The first alone answers *is this expensive* and says nothing about *is this alive*; the pair is
   what a buyer weighs. Stacked rather than run together, because they are two units. */
/* The two figures are what a buyer weighs, not a footnote under a chart: at `--mute` and at ordinary
   weight they read as a caption for the bars, which have no need of one, the bars say *alive*, these
   say *how much* and *how many*. In the ink, at the weight the row gives its other numbers, and a tenth
   above `--t-micro`, which is the size the page uses for things it does not expect to be read.
   `.traffic` and not `.perclick`: there are two of them and only one is a price per click. */
.row .traffic{font-size:calc(var(--t-micro) * 1.1);font-weight:600;color:var(--ink);white-space:nowrap;line-height:1.5}
/* No traffic is not a figure. It keeps the weight, so the column reads as one thing down the board, and
   loses the ink, because the two numbers above are what a buyer weighs and an absence is not. */
.row .traffic.none{color:var(--mute)}
.row .act{text-align:center}
/* No tint. The row was washed pink to say *this one is falling*, and the notice on its title line now
   says it in words, in red, at the top of the row, two signals for one fact, and the tint was the one
   that also made the sticker and the struck price sit on a different ground from every other row. */
.row.liq{background:var(--paper)}
/* The price that was, struck through, in the ink. At `--mute` it read as a footnote; it is the number
   the falling one is falling from, and the pair is the whole of what a liquidation says. */
.row.liq .old{text-decoration:line-through;color:var(--ink);font-family:var(--digits);font-variant-numeric:tabular-nums;font-size:16px;margin-inline-end:6px}
.row.house .logo{background:var(--paper);border:1.5px dashed var(--mute);color:var(--mute)}
/* The report control, on every placement. A flag at the weight of the line it sits in, this is not an
   action anybody is being invited to take, it is one that has to be there and has to be findable. It
   takes the muted ink and the sticker's orange on hover, so it reads as a control without competing
   with the price beside it. */
/* Absolute, so every object that carries one has to be the box that holds it. A Wall card was not, and
   the moment the header's wrapper became positioned, for the figure hanging under the strip, every
   card's flag escaped to it and they stacked in one corner of the page. Three objects carry a flag and
   all three are declared here, together, so a fourth cannot be added without its box.
   In a corner, not in the middle of a sentence. Set inline after the host name and the tags it read as
   one more tag, and it moved with whatever was beside it, a category, an owner's mark. A
   report control belongs where a reader looks for it on any site and where nothing else is: the corner
   of the object it reports. The row and the card get their end corner; the Throne's is taken by the
   masking strip, so it gets the other end of the same edge. */
.flag{position:absolute;bottom:2px;inset-inline-end:2px;background:none;border:0;padding:6px 8px;min-width:24px;min-height:24px;color:var(--mute);font-size:var(--t-small);line-height:1;cursor:pointer;border-radius:var(--r-xs)}
.row{position:relative}
.throne .flag{inset-inline-end:auto;inset-inline-start:6px;top:auto;bottom:6px}
.flag:hover,.flag:focus-visible{color:var(--sticker)}

.row .mine{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);padding:1px 6px;border-radius:var(--r-pill);margin-inline-start:6px}
/* The market's last figure, in the tape bar rather than on the brand line: a fixed print over a
   moving tape, which is what a ticker actually looks like.
   At the end of the bar, stated as an inline end rather than a right, so it mirrors on its own for
   Arabic instead of needing a rule of its own. The tape now runs out of sight underneath it rather
   than being interrupted mid-bar, which is what a ticker's last print does. Only the leading edge is
   drawn: the trailing one sits flush with the end of the bar and a border there would be a line beside
   a line. Top and bottom at zero make its height the bar's own, so it reads as a cell of the bar
   and not as a sticker laid on one: no lean, no radius, no cast shadow, there is nothing under it to
   cast onto. What it keeps is the sheen, because it is still an orange face lit from above, and an ink
   edge on each side at the bar's own 1.5, so the block is cut from the bar rather than floated over it.
   The bar's rule runs on underneath: the insets resolve against the padding box, which stops above the
   border. The figure is sized to fit a 33-pixel bar without changing it, the rail's `--chrome` is
   calibrated on that height. Dropped on a phone, where the tape needs every pixel it has. */
/* Under the strip and stuck to it, ending on the page's own inline edge, the same edge the sign-in
   button ends on, because the two are the only things on that side and a figure that stops somewhere
   else reads as a third margin.
   Two grounds rather than one: the amount on the sticker's orange, the words on the strip's white. A
   price and a caption are different kinds of thing, and giving them one ground made the caption look
   like part of the price. The border is the strip's own, minus its top, so the block hangs from it. */
/* The row carries `wrap` in the markup and adds only the alignment here. Restating the wrapper's
   max-width and padding made the figure's edge and the sign-in button's edge two independent centrings
   that had to agree, and three attempts at making them agree all failed for different reasons, the
   last because carrying `wrap` also carried `body>.wrap`, which declares a column and a `flex:1 0 auto`
   neither of which the row wanted.
   It is **inside** the header's own wrapper now, the first thing in it, above the wordmark. It is not
   the same measure as the sign-in button, it is the same box: the wrapper is a column and this is one
   of its rows, so the right edge is the wrapper's content edge, which is the edge the button ends on.
   Nothing here is computed and nothing has to agree with anything. */
/* Absolute, so it reserves no height: in flow it would push the strip's own row open by the height of a
   sticker meant to hang past it. Its containing block is the strip, that is what keeps the two
   together when the strip holds the top of the window, and it used to be the wrapper, which is why the
   wrapper was made a containing block here and no longer needs to be.
   `pointer-events:none`, because the sticker hangs over the page below the rule and nothing about it is
   clickable: a figure that swallowed the clicks under it would be worse than no figure. */
/* The last figure closes the bar. It is a row of it, not a thing laid over it: the last item of the
   flex line, stretched to its height, sitting at the end where the strip runs out.
   That is what puts the fade in the right place. The strip is `flex:1` and its mask fades 28 pixels at
   each end, so the moment the figure takes width of its own the strip's end, and the fade with it, lands exactly where the price begins. Nothing has to be told where to stop; the two share a line and
   the fade is the seam.
   It used to hang below the bar, absolutely positioned and borrowing the page's measure to end on the
   same edge as the sign-in button. That reached past the bar on one axis and over the page on the
   other. Inside, it needs neither the measure nor the gutter, and it cannot come apart from the strip.
   `pointer-events:none`, because nothing about a printed figure is clickable. */
.tickrow{display:flex;align-self:stretch;flex:none;pointer-events:none}
.headtick{display:inline-flex;align-items:stretch;align-self:stretch;font-variant-numeric:tabular-nums;white-space:nowrap;
  border:0;border-inline-start:1.5px solid var(--ink);border-radius:0}
.headtick b{direction:ltr;unicode-bidi:isolate;display:flex;align-items:center;padding:6px 14px;background:var(--sticker-sheen) var(--sticker);color:var(--on-sticker);font-family:var(--digits);font-weight:800;font-size:var(--t-title);line-height:1}
/* The caption speaks in the strip's own voice: the same face, the same size and the same weight the
   rolling events use for what they name, `OUTSOLD`, `THRONE`, `LIQUIDATION`. It is a line of the tape
   that happens to sit under it, not a caption in a register of its own.
   `.tape b` is the whole of that voice: `var(--mono)` and `var(--t-small)` inherited from `.tape`,
   `font-weight:600` and `var(--ink)` its own. The tracking this rule used to add is gone, the strip
   carries none. The uppercase stays, and it is the one place where matching the rule and matching the
   rendering part company: the strip's words are capitals because `OUTSOLD` and `THRONE` arrive
   capitalised in the text, and a caption read from a dictionary does not. What a reader compares is
   the two sitting one above the other, so the rendering is what has to agree. */
.headtick>span{display:flex;align-items:center;padding:6px 14px;background:var(--white);color:var(--ink);font-family:var(--mono);font-size:var(--t-small);font-weight:600;text-transform:uppercase;border-inline-start:1.5px solid var(--ink)}
.headtick .cur{font-size:.82em;color:var(--on-sticker-mark)}
/* The arrow runs from the figure into the words that say what it is. The two cells are touching, so it
   crosses the seam rather than travelling: a negative inline start pulls its tail back onto the orange,
   and it is the caption's own colour, which is the ink, on the orange side the tail reads as a mark
   laid over the sticker, which is what a drawn arrow crossing a printed one looks like.
   No mirror and no rotation: this is the drawing as it was made, left to right. */
.headtick .tickarrow{width:20px;height:10px;flex:none;margin-inline:-23px 5px;position:relative;top:1px}
/* In Arabic the two cells swap and the arrow swaps with them, so it pointed back at the price it comes
   from rather than forward at the caption it introduces. The house arrow is one path in six places and
   is mirrored, never redrawn, the same treatment `a.follow svg` already takes. Its margins are
   logical, so they follow on their own; only the drawing has to turn. */
[dir="rtl"] .headtick .tickarrow{scale:-1 1}
/* Half again the body size. The figure is what the sticker is for, the caption beside it only says
   which figure, and at the body's own size the two read as one line of equal weight rather than as a
   price with a name. The caption is untouched, so the difference between them is the whole effect.
   The padding is not symmetric, and it is measured rather than nudged. Barlow Condensed 800 declares
   an ascent of 1.0em and a descent of 0.2em, so its content area is 1.2em; under `line-height:1` the
   half-leading is −0.1em a side and the baseline lands 0.9em down the line box. A digit is 0.712em
   tall and sits on that baseline, which leaves 0.188em of line box above it and 0.1em below, the
   figure was drawn 0.088em low, a full pixel at this size, and the box read bottom-heavy. Moving
   0.044em from the bottom padding to the top puts the digits' own body in the middle of the box,
   which is what a reader measures. In `em`, so the correction follows the size if the size moves.
   The digits are the reference on purpose: `$` reaches higher than they do and a comma hangs below, so
   centring the ink would move the whole figure every time the amount crossed a thousand. */
.headtick b{font-family:var(--digits);font-weight:800;font-size:calc(var(--t-body) * 1.3);line-height:1;padding:calc(6px - .044em) 14px calc(6px + .044em)}
/* The label, and only the label. Written as `.headtick span` it also caught the currency mark inside
   the figure, which sits in a span of its own, so the mark came out at three quarters opacity over
   the orange, #FCD6C0, a pale peach rather than white, and wearing the label's tracking and its
   uppercase besides. The label is a direct child; the mark is not. */
/* On a phone the ticker keeps the price and drops the words. It used to go entirely, which took the
   last trade off the one bar that is on every page, a figure the board states nowhere else above
   the fold. The caption is a label and the arrow points at the price it labels; the price is the
   thing, and it is the same orange sticker the board prints, so it is not read as anything else. */
@media(max-width:640px){.headtick>span{display:none}}
/* Two different things, two places. The call to action is the buyer's own line, *try the beta*, *weekly
   letter*, and it sits beside the name after a middle dot, because it is what the name is offering and
   is read across with it. It is `offer` and not `cta`, which is already the Throne's action column: one
   name for two things is a rule waiting to reach the wrong one. The description is what the product is, in the product's words, and it goes
   under the name where a description belongs. Neither is drawn when it is absent. */
/* What is on offer reads at full ink. It sat at `--mute`, the grey the row uses for the things that
   are context, the host under the name, the owner's handle, and this is not context: it is the one
   sentence the buyer wrote about what they are selling. */
.row .offer,.post>b .offer{color:var(--ink);font-weight:400}
/* The mark between where the click goes and what is being offered there. Twice the body size and in the
   house orange, so it reads as a piece of punctuation the page drew rather than one the text happened
   to contain, at the body's own size it was a grey speck between two phrases.
   Its own flex item, not a character inside the sentence, so the six-pixel gap falls on both sides of
   it and the ellipsis that trims a long offer cannot trim the mark instead.
   The line height is the part that matters: a 30-pixel glyph in a row of 15-pixel text would set the
   height of the whole line and push the name and the offer apart. Held to a third of its own size, the
   glyph overflows a box too small for it and the line stays the height of the words.
   And then it sat too high, which is what a middle dot does when it is scaled: the line aligns on the
   baseline, and Archivo draws this glyph between 293 and 421 units, so its ink sits 0.357em above that
   baseline, at twice the body size, 0.714 of a body em, against the 0.343 that is the middle of the
   capitals beside it. The difference is 0.371 of a body em, which is 0.186 of this element's own, and
   that is the whole of the shift. On `transform`, so the correction cannot feed back into the line it
   was measured against. */
/* The liquidation notice, on the title line and pushed to its far end by an auto margin, which is the
   whole of its placement. It used to be a boxed stamp tucked into the small line under the description,
   where the loudest fact about a row was the least visible thing on it, and moving it up meant it could
   be put where the eye already is instead of at two hand-measured offsets from where it fell.
   No box, no tilt: a stamp pressed onto a row said *this spot was marked*, and what is true is that the
   price is moving while you read. Red, bold and in capitals is that sentence at the volume it deserves;
   a border around it would only make it a second object competing with the sticker that carries the
   price it is talking about.
   `flex:none` because it is the one item on the line that must not be trimmed, and the name beside it
   already gives up its room first. At 600 and not 700: the page carries three weights and 700 is not
   one of them, in the mono face 600 is what bold means here. */
.row .titleline .stamp{flex:none;margin-inline-start:auto;background:none;border:0;padding:0;transform:none;color:var(--red);font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.row .titleline .sep,.throne h1 .sep{flex:none;font-size:calc(var(--t-body) * 2);line-height:.34em;color:var(--sticker);transform:translateY(.186em)}
/* The description is the quiet line of the row, and it was neither: it sat at full ink and inherited
   the 600 the title sets, so it read as loud as the name above it and wrapped at 58 characters into
   five lines the eye had to climb. Grey, at the weight of ordinary text, and given the width of the
   column it lives in. */
.row .tagline,.post>.tagline,.throne .tagline{font-size:var(--t-small);font-weight:400;line-height:1.35;color:var(--mute);margin:2px 0 2px}
/* The banner's own words are in the ink. On a row and on a card the description is the quiet line under
   a name in a list of a hundred; on the Throne there is one name, the card is what the page is built
   around, and a grey paragraph in the middle of it reads as a caption for something else. */
.throne .tagline{color:var(--ink)}
.drops{font-family:var(--mono);font-size:var(--t-small);color:var(--mute);padding:10px 4px}
/* The one `<hr>` in the app, in three places. It was named and never given a rule, so it drew the
   browser's default, an inset groove, the only element on a page whose colour came from the user
   agent. The house has one hairline, `1px solid var(--line)`, in three other places; this is the
   fourth. `border:0` first because the default sets all four sides. No margin under it and no height:
   every break is followed by an `<h2>`, whose own 26 is the space below, and an `<hr>` has no content
   to be tall. The 26 above is that same heading margin, so the line sits centred in the gap it splits. */
.pagebreak{margin:24px 0 0;border:0;border-top:1px solid var(--line)}


/* These two stand here, after every `.row` rule and not before them, and that is load-bearing rather
   than tidy. A container query adds no specificity: `.row{grid-template-columns:subgrid}` and
   `align-items:center` are written at the same weight further down, so with the blocks above them the
   whole narrow track list was thrown away every time while the `.row .rank`-style rules inside, which
   nothing later competes with, went on applying. A phone kept the wide board's six columns with the
   lines placed as though it had four: the name at a fifth of the row, the description off the side of
   the screen, the price in the owner's column. */
/* Under 820 the board drops to four columns wherever it is, a 760-pixel page, a phone, a future
   sidebar. It used to drop the owner and the traffic with them, which is the one thing a narrow screen
   must not do: who you are buying from and what a click costs are not decoration, and price per click
   is the only figure on the page that says whether a spot is worth its price. They move under the name
   instead, one line each, spanning what is left of the row, the same reflow the Throne's own figures
   take, and the same principle: a narrow screen rearranges, it does not delete.
   Every cell is placed by hand here. Auto-placement puts items with a definite column before items
   with neither, so leaving the rank, the mark and the name to find their own way would have let the
   owner take the first row out from under the name. */
@container boardbox (max-width:820px){
  /* Under 820 the row keeps four columns and stops borrowing them. Above it, a hundred rows take one
     track list through `subgrid` so their ranks, marks, owners and prices line up down the page; below
     it a row is three lines of its own and nothing lines up with the row above, so the board is one
     column and the row is its own four.
     Not one of the four is intrinsic. The last is `minmax(0,auto)` and not `auto` on purpose: a grid
     hands a spanning item's width to the tracks it crosses whose *minimum* is intrinsic, and the name
     spans into this one, with a bare `auto` there, the category chip's 250 unbreakable pixels would be
     handed to the price's column, which is how the name came out one character wide once already. */
  .board{grid-template-columns:minmax(0,1fr);border-top:1.5px solid var(--ink)}
  /* The last track is `fit-content(120px)`: the price sticker (and, on the account page, its two buttons) hug it, and
     nothing spanning into it can grow it past 120, the name spans into it on purpose (below) and used to hand it
     its whole width, which left the name's own column nine pixels wide (audit, pass 0, 430px). */
  .row{grid-template-columns:30px var(--logo) minmax(0,1fr) fit-content(120px);column-gap:14px;row-gap:6px;align-items:start}
  .row .rank{grid-area:1/1}
  .row .logo{grid-area:1/2}
  /* And nothing spans into the price's track, which is why it can be `auto` and hug what stands in it.
     Letting the name run into it bought the description its last eighty pixels and cost the price's
     column its size: a spanning item's max-content raises the growth limit of every intrinsic track it
     crosses, and the track then takes free space up to that limit before the flexible one beside it
     sees any. Eighty pixels of description against a price column that grows with the length of a
     product's name is not a trade worth making. */
  /* The description takes a line of its own, and it needs the block it is in to stop being a block to
     get one: the name, the small line and the description are one element on the wide board, which is
     right there, they share a column and stay together in it. `display:contents` dissolves the box
     without touching the markup, and the three become items of the row's own grid, placed one by one.
     Only the description moves. The name and the line under it keep the column they had. */
  .row .title{display:contents}
  /* The host, the line beside it, the seller's own name for the thing and its rank in a category are
     four pieces of one answer to *what is this*, so they stay one cell and keep the spacing they have
     on the wide board. Given a grid row each they were pushed apart by the row gap, which is meant to
     separate a name from a description and not a name from its own category. */
  /* The name spans into the price's track: with `fit-content(120px)` on that track, spanning cannot grow it
     past a price, so the objection to spanning is gone and a phone's name gets the whole row. The flag's
     corner is reserved at the end. */
  .row .head{grid-area:1/3/auto/-1;padding-inline-end:32px}
  /* What the seller calls the thing and where it sits on the board are one line, and stay one line
     however narrow the column gets: the chip already refuses to break, so the only break available was
     between the two, which put a category on a line of its own under a name, a pill floating with
     nothing beside it. The line crosses the column instead of folding inside it. */
  /* Was nowrap: a long category ran past the edge of every phone (audit, pass 0). The line keeps its right
     half for the owner, who ends the same line from the other side. */
  .row .title small{padding-inline-end:50%}
  .row .title small .cat{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
  /* A whole line, edge to edge, the price's track included. It is the one block in the row that reads
     as a paragraph and the only one that gains from every pixel; the two lines above it are short and
     the three below are figures.
     The cost is stated so nobody rediscovers it: the description's max-content is now handed to the
     price's track as a growth limit, and an intrinsic track takes free space up to that limit before
     the flexible one beside it sees any, so the price's column is wider than the price. That is why
     the control is centred in it rather than pushed to one end. Stopping the span one track short
     (`auto/4`) hugs the price and costs the description the last ninety pixels of every line. */
  .row .tagline{grid-area:2/1/auto/-1}
  /* The owner leaves the 64-pixel column that could only hold a handle and takes a line, so it can say
     what the handle is. Above 820 the hand-drawn caption names that column, *slot owner*, in the
     margin, and here the captions are gone with the columns they point at, so the words the caption
     was move onto the line itself. One string with the handle inside it, as the Throne and the Wall
     both write theirs, so a translator orders it as their language wants. */
  /* The owner joins the head's own line rather than taking one under the description. It is four words
     and it was spending a row of the card on them, with the description between it and the name it
     belongs to. `align-self:end` sets it on the head's last line, the one carrying the seller's name
     and the category, so the three things that say *whose and what* read across, and the description
     that follows belongs to nobody in particular.
     It ends on the row's right edge and does not sit in the price's track, it spans across into it, so
     the track stays the width of the price and not of a handle. A spanning item only grows a track it
     crosses if its own minimum exceeds what is already there, and a handle is shorter than a sticker. */
  .row .owner{grid-area:1/3/auto/-1;align-self:end;justify-self:end;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .row .flag{top:0;bottom:auto}
  .row .owner .lbl{display:inline}
  .row .owner a{display:inline}
  /* The click block turned on its side: the chart beside the two figures instead of above them. Up
     there the column is 68 wide and the only way to fit three things is to stack them; here the line is
     the width of the row and stacking them would spend three lines on what reads in one. It starts at
     the row's own edge, where the rank does, nothing above it on this line needs the gutter, and the
     chart is a picture rather than writing, so it does not owe the text column its alignment. */
  .row .clicks{grid-area:3/1/auto/4;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px}
  .row .clicks .spark{grid-area:1/1/3/2}
  .row .clicks .traffic{grid-column:2}
  /* The price ends on the row's right edge, and that is the whole of why: a track sized by its contents
     moves whenever its contents change, so anything placed against the *start* of this one slides with
     the length of a handle, the length of a price and whatever the description's span leaves in it.
     Against the end, none of that reaches it, the row's right edge is the one line here that cannot
     move, and a hundred prices land on it together.
     It is also where the row's own facts end: the owner above it, the flag below, all three on that
     edge, and the flag is why the price stops short of it. The report control is pinned to the row's
     bottom corner and the price is the one thing tall enough to reach it, so it keeps clear of the
     corner rather than sitting on it. `--flagbox` is that corner, stated once on the row: the button is
     22 wide, sits 6 in, and 12 is the space the card already asks for between the two.
     Twice it, because clearing the corner is not the same as standing off the frame: at exactly the
     corner the sticker still read as pinned to the edge of the row rather than as a control sitting in
     it. The second forty is air, and it is written as the first one doubled so the two cannot drift. */
  .row .act{grid-area:3/4;justify-self:end;align-self:center;margin-inline-end:0}
  /* The captions name columns that are no longer above the things they name, so they go and the board
     takes its own line back, a caption pointing at nothing is worse than no caption. */
  .boardnotes{display:none}
}
/* Below 560 one thing changes and one only: the name and the line beside it stop sharing a line. They
   stack for the reason a Wall card's do, at this width both were being ellipsised, which is two
   half-names and no information, and the middle dot goes with the line it was dividing, replaced by
   the rule down their side.
   The price stays where it is, opposite the figures. It had a line of its own here, on the reasoning
   that a chart, two figures and a sticker do not fit across a phone; they do, because the chart and the
   figures became one compact block when the click block turned on its side, and a row that spends a
   whole line on a single control is a row a reader scrolls past twice. One narrow layout, not two. */
@container boardbox (max-width:560px){
  /* The rule and the dot are the same statement made two ways, so they are never both drawn. On one
     line the dot divides the name from the line beside it; stacked there is nothing to divide, and what
     the pair needs instead is something down its side saying the two are one thing, written by one
     person. The dot goes and the rule arrives, in the same breath and at the same width.
     2px, the Wall card's, and not the 3 of the name's own underline: the underline says *this is the
     link*, the rule says *these two are one thing*, and at the same weight they would read as the same
     object. Only the pair is marked, the description and the small line under it belong to the row and
     not to whoever wrote those two, so they start where the rest of the column starts. */
  .row .titleline{flex-direction:column;align-items:flex-start;gap:0;border-inline-start:2px solid var(--sticker);padding-inline-start:6px}
  .row .titleline>*{max-width:100%}
  .row .titleline .sep{display:none}
  /* A phone keeps the row and moves one thing: the owner, to the top of the price's track, where a whole
     handle fits (fifteen letters, 120 pixels) and where it was measured against the hostile corpus. Sharing
     the small line half-and-half wrapped an ordinary product name into a column six letters wide; the label
     goes too, since a handle alone is what the track can hold. */
  .row .title small{padding-inline-end:0}
  .row .owner{grid-area:3/4;align-self:start;justify-self:end;max-width:100%}
  .row .owner .lbl{display:none}
  .row .act{align-self:end;margin-top:24px}
}
/* wall */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:10px}
/* Two columns for one row. The mark and the name share the first line, a name beside its mark, at the
   short measure a name wants, and everything below spans both columns from the card's own left edge:
   the line its buyer wrote, the host, the category. Those three gain 36 pixels each by starting at the
   edge rather than under the name, which on a card 230 wide is the difference between a category chip
   that fits and one that does not. The mark is the smallest of the six the site draws · 26 against the
   board's 34, because a card cannot spend more. */
.post{position:relative;display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:start;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;font-size:var(--t-small)}
.post .plogo{--box:26px;border-radius:var(--r-sm);margin-top:1px}
/* Everything under the description is pinned to the foot of the card. The Wall is a grid and its rows
   stretch to the tallest card in them, so a short description left the author, the traffic and the
   category floating in the middle of a tall box while the card beside it had them at the bottom, three facts that are on every card, lining up on none.
   The description's row takes the slack. Every cell is placed by hand because the description is
   optional: left to auto-placement the `1fr` row would fall to whatever came next and stretch that
   instead, so a card without a description would look nothing like a card with one. */
.post{grid-template-rows:auto 1fr auto auto auto}
.post .plogo{grid-area:1/1}
.post>b{grid-area:1/2;min-width:0}
.post>.tagline{grid-area:2/1/auto/-1}
.post>.by{grid-area:3/1/auto/-1}
.post>.traffic{grid-area:4/1/auto/-1}
.post>.cat{grid-area:5/1/auto/-1}
/* Who posted it and how long it has left, on one line and at opposite ends. Stacked they spent two
   lines of a card that has few, and neither is a sentence the other continues: one names a person,
   the other counts down. `space-between` rather than a width on either, so the countdown ends on the
   card's edge whatever the handle's length. */
.post>.by{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
/* The countdown on a line of its own. Run on after the host and the author it broke wherever the card
   ran out, *expires in 8h / 59m*, a single value split across two lines, because it is the only part
   of that line whose length changes every minute. On its own line it never collides with anything and
   it never breaks: a duration is a value, and a value reads as one or it does not read. */
.post .until{white-space:nowrap}
/* The line its buyer wrote, on one line and scrollable. It is capped at ninety characters and a card
   is 202 wide, which holds about thirty, so it wrapped to three lines and pushed everything under it
   down, on the one part of a card that is entirely somebody else's words.
   A real scroll container rather than an animation: a finger swipes it, a trackpad slides it, a
   keyboard reaches it, and nothing moves that the reader did not move, an auto-marquee is motion the
   reader cannot stop, which is the rule this site keeps everywhere else.
   The fade hides itself. It is painted over the last 24 pixels of the container, so for a short line, which ends well before the container does, there is nothing under it to fade, and it appears only
   when there is something the reader has not seen. */
/* The category on a line of its own, at the left edge. Inside the metadata it trailed a sentence that
   wraps in a 230-pixel card, *expires in 9h 59m* going to two lines put the chip at the end of the
   second one, with the width of the first left empty beside it. A chip is a label, not the last word
   of a sentence: it starts where every other line of the card starts. */
/* One line, cut with an ellipsis. A chip is a label and a label keeps its shape: wrapped to two lines
   it stops reading as one tag and starts reading as a paragraph in a box. Truncated, it still reads as
   a tag and says plainly that there is more.
   `inline-block` rather than `inline-flex`, because `text-overflow` needs a block container and does
   nothing to a flex box. `max-width: 100%` is what it is cut against: the chip spans the card, so that
   is 202 pixels at the grid's minimum width, and one category of fifteen is wider, *Services,
   agencies & freelancers*, at 231. On any card the grid makes wider than its minimum, even that one
   fits whole. The full name is on the element as a title, since an ellipsis that hides a word with no
   way to see it is a worse trade than the wrap it replaced. */
/* Room for the report control, which is out of the flow and pinned to the corner this label ends in.
   The label spans the card's full width on the last line and the button sits over its far end, so a
   long category ran underneath it, its own width is the only thing that can keep them apart. 36 is the
   button's width and its inset, plus a space between the two. */
/* The chip is the width of its own words. As a grid item it was stretched to the track, so a short
   category wore a pill three times too wide for it; `justify-self:start` hands it back its own measure.
   Its ceiling is what is left of the line once the report control has its corner: the button is 22
   wide, sits 6 in, and 12 is the space asked for between the two. */
.post .cat{display:inline-block;justify-self:start;max-width:calc(100% - 19px);margin-inline-start:0;margin-top:6px;overflow:hidden;text-overflow:ellipsis}
/* The name arrives whole. It used to be one clipped line, because the category chip floated into that
   line and took the width, so a card read *Tenzin · 10 beta s…* on a wall whose whole product is a
   name and a line. Two lines are allowed and the second is the limit, which protects the grid from a
   page title that runs to a paragraph without cutting the ordinary one at all. */
/* One line, not two clamped ones. The clamp existed for a title a seller could write to any length;
   the card leads on its host now, which is short and known, and the buyer's line beside it gives up its
   room first, the same order the board row uses. */
.post b{font-weight:600;overflow:hidden}
.post small{overflow-wrap:anywhere}
.post small{color:var(--mute);display:block;margin-top:4px;font-size:var(--t-small)}
/* The words stay where a card's words start, at the top, on the card's own left edge, and the price
   sits in the middle of everything left under them. `margin:auto` on a flex item hands it the free
   space on all four sides, so one declaration centres it across the card and down the space the words
   did not take, however tall the row's tallest card makes this one. `place-items:center` did neither:
   `.post` sets two columns and the button inherited them, so the words sat in a column the width of
   themselves, at the top of a card stretched by its neighbours. */
.post.new{border:1.5px dashed var(--ink);color:var(--ink);display:flex;flex-direction:column;text-align:start;font-weight:600;min-height:70px}
.post.new .sticker{margin:auto}

/* tape */
.tapebar>*{max-width:none}
/* The events fade in and out instead of being cut at the edges. A ticker clipped flat looks like text
   sliding under a lid; faded, it reads as a line passing through. The mask is 28 pixels at each end,
   which is about two characters at this size, enough to soften an entry, not enough to hide a word. */
.tape{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-family:var(--mono);font-size:var(--t-small);padding:6px 0;background:none;direction:ltr;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.tape span{display:inline-block;padding-inline-end:48px;animation:roll 60s linear infinite}
.tape b{font-weight:600;color:var(--ink)}
@keyframes roll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.tape span{animation:none}.sticker{transition:none}}
/* Prose in the text face, identifiers in the mono one, the rule the board rows and the Hall already
   follow. The whole list was monospaced, so a sentence describing an event was set in the face this
   site keeps for figures and references, and the journal read as a different site from the page before
   it. What is actually machine-written here is the timestamp and the reference; those keep the mono. */
.journal{list-style:none;font-size:var(--t-small)}
.journal time,.journal .mono{font-family:var(--mono)}
.journal li{padding:8px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;flex-wrap:wrap}
.journal time{color:var(--mute);min-width:150px}

/* pages */
/* A static page keeps a readable measure but starts where the wordmark starts. Centring it inside the
   wrapper indented every heading by 140 pixels against the navigation above it, so the page looked
   like a second, narrower document laid on top of the site. Left-aligned, one edge runs from the
   logotype down through the headings to the footer. */
.page{max-width:760px;margin:32px 0 48px}

/* The Throne, as a column beside the page.
   The measure stays 760; the rail takes the space to its right that was empty on every page but the
   home. `align-self:start` is what lets a sticky child work inside a grid, a stretched item has
   nowhere to travel. Below 1000 pixels the wrapper is too narrow to hold both, and the rail is not
   worth a text column: it goes, rather than stacking under the page where nobody scrolls to. */
.withrail{display:grid;grid-template-columns:minmax(0,760px) 216px;gap:24px}
.pagecol{min-width:0}
/* The column is the grid item and it stretches to the row; the panel is sticky *inside* it. A
   stretched item cannot travel, so a sticky rail must not be the item itself. The wrapper's padding is
   where the travel stops: 60 pixels clear of the footer. */
.railcol{padding:32px 0 48px}
/* The house hairline, like every other panel. A 1.5px ink border made the column the heaviest object
   on a page whose weight belongs to the board beside it, and it was the only border on the site at that
   width, an outline where every other card has a line. */
.rail{border:1px solid var(--line);background:var(--white);border-radius:var(--r-sm)}
/* The panel is whole at every moment: never cut at the top, never cut at the bottom, and as tall as
   the space between those two limits allows, which means its height changes as you scroll, and that
   is why `ui.js` sets it. CSS can place a sticky element but cannot size one against its own position
   on screen: `top` and `bottom` together do not stretch a sticky box, and a percentage height resolves
   against a parent, not against what is left of the viewport.
   The stylesheet keeps what it can state on its own, where the panel sticks, and the two terms that
   define it: `--chrome` for what is permanently in the way at the top (the tape bar, 33 pixels of
   sticky rail of its own) and `--air` for the margin kept clear of both edges. Without the script the
   panel is simply its content's height, sticky, which is a reasonable page rather than a broken one. */
.rail.sticky{--chrome:33px;--air:24px;position:sticky;top:calc(var(--chrome) + var(--air));display:flex;flex-direction:column}
/* Pinned by the script: both edges set, no height, the browser derives it, in one frame, from two
   numbers that are constants for most of a page. Sticky above is what a reader gets without it. */
.rail.sticky.pinned{position:fixed;margin:0;left:var(--rail-left);width:var(--rail-width);top:var(--rail-top-from);bottom:var(--rail-bottom-from)}

/* `--air` is the space the panel keeps from what is around it: the tape bar above, the footer's rule
 * below. Twelve read as a panel pushed against both; twenty-four gives it the same margin at each end,
 * and the number is used in both places so they cannot drift apart.
 *
 * The two edges, driven by the scroll itself.
 *
 * A script cannot place an element in step with a scroll: the browser composites the scroll first and
 * runs JavaScript after, so anything written from a `scroll` event or a frame callback describes the
 * frame already on screen. That is the whole of the residual judder, an element a frame behind.
 *
 * A scroll-driven animation is not a better script, it is a different mechanism: the browser samples
 * the timeline as part of producing the frame, so the value belongs to the scroll offset being painted.
 * Two animations, one per edge, each over the stretch where that edge actually moves, the panel
 * rising until it reaches the tape bar, and its foot lifting as the page's text runs out. Between the
 * two ranges both hold, which is most of a page.
 *
 * Everything page-dependent is a custom property written once per layout by `ui.js`, never per frame.
 * Where the feature is missing the properties are still correct and the script places the panel the
 * old way, one frame late, the fallback is the previous implementation, unchanged. */
@keyframes rail-rise{from{top:var(--rail-top-from)}to{top:var(--rail-top-to)}}
@supports (animation-timeline: scroll()){
  .rail.sticky.pinned{
    animation:rail-rise linear both;
    animation-timeline:scroll(root block);
  }
}
/* A reader who asks for less movement is not pinned at all: `ui.js` leaves the panel as the plain
   sticky box above, its own content's height, which sticks under the tape bar and stops at the foot of
   its column. Pinned with the animations switched off it would have hung at a fixed spot on the screen
   and covered the footer at the end of the page, measured, before this line existed. */
/* The panel scrolls and does not say so with a bar. A scrollbar inside a 216-pixel column takes a
   sixth of its width, reflows the text under it and puts a piece of the operating system's furniture
   in the middle of a page that has none. The scroll stays; only the bar goes.
   What replaces it is a fade at the foot, added by the script when the content is actually taller than
   the panel, a hidden scrollbar with no sign of the cut would be worse than the bar it removed. */
.railbody{padding:12px 12px 14px;flex:1;min-height:0;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
.railbody::-webkit-scrollbar{width:0;height:0}
.rail.more .railbody{-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
.rail .eyebrow{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
/* The panel's display note is the orange band above it, not this. In a column this narrow the
   display face sets a slab where a name should sit. */
.rail .rname{font-family:var(--text);font-weight:600;font-size:var(--t-sub);line-height:1.1;letter-spacing:-0.01em;margin:4px 0 6px;overflow-wrap:anywhere}
/* Mark and title on one line, top-aligned so a two-line title grows downward and the mark stays put.
   The smallest of the five, because it is the narrowest column on the site. */
.rail .rhead{display:flex;align-items:flex-start;gap:8px;margin:24px 0 6px}   /* room above the name for its crown (26 high, its foot 4 above the letters) */
.rail .rhead h3{margin:0;min-width:0}
.rail .rlogo{--box:28px;border-radius:var(--r-sm)}
.rail .meta{font-size:var(--t-small);color:var(--mute);line-height:1.35}
.rail .sticker{--s:var(--t-sub);padding:4px 8px 4px;margin:10px 0 2px;transform:rotate(-1.5deg)}
.rail .btn{display:block;width:100%;text-align:center;margin-top:10px;font-size:var(--t-small);padding:8px 10px}
.rail .roffer{font-size:var(--t-small);color:var(--ink);line-height:1.35;margin:0 0 4px}   /* the intention line, as the banner shows it; the *at least* caption it replaces was the sticker's own figure said twice */
/* The same clock as the banner's, in the side panel: the two say the same thing and are set the same
   way, orange and at 600, so neither can be restyled without the other looking wrong beside it. */
.rail .reset{margin-top:10px;font-family:var(--mono);font-size:var(--t-micro);font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-orange)}
.rail .figs{margin:8px 0 0;padding-inline-start:14px;font-size:var(--t-small);color:var(--mute);line-height:1.45;font-variant-numeric:tabular-nums;list-style:disc}
.rail .figs li{margin:0 0 2px}
.rail .clicks{margin-top:10px}
.rail .traffic{font-size:calc(var(--t-micro) * 1.1);font-weight:600;color:var(--ink);line-height:1.5}
.rail .rsec{margin:14px 0 6px;padding-top:10px;border-top:1px solid var(--line);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.rail .rrow{display:flex;justify-content:space-between;gap:8px;font-size:var(--t-small);padding:2px 0;font-variant-numeric:tabular-nums}
.rail .rrow span{color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail .rall{display:inline-block;margin-top:6px;font-size:var(--t-micro);color:var(--mute);border-bottom:1px solid var(--line)}
.rail .rall:hover{color:var(--ink)}
.rail .stamp{display:block;margin-top:12px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.05em;text-transform:uppercase;line-height:1.35;white-space:normal;transform:none;border:0;padding:0}
.rail .stamp.last{margin-top:16px;padding-top:10px;border-top:1px solid var(--line);color:var(--mute)}
@media(max-width:1000px){
  .withrail{display:block}
  /* Both classes named, because `.rail.sticky` sets a display of its own and one class does not beat
     two: written as `.rail` alone this rule lost, and the panel stayed on the page under the text at
     every width below a thousand. */
  .rail.sticky,.rail.static{display:none}
}
/* Two gaps, not six. A page had one distance above a section, another above a subsection, and then a
   different one under each of them depending on what came next: a paragraph sat 8 from its heading, a
   table 14, a grid 20, a list of files 10, four answers to one question, which is what a page with no
   rhythm looks like from a distance even when every part of it is right.
   The rhythm is: a large gap above a heading, a small one under it, and one gap between siblings. The
   gap under a heading is the heading's own margin and nothing else, because the block below it drops
   its top margin, otherwise the two collapse to whichever is larger and the heading loses control of
   the distance it is meant to set. */
.page :is(h1,h2,h3)+*{margin-top:0}
.page h1{font-family:var(--text);font-weight:600;font-size:var(--t-title);letter-spacing:-0.02em;margin:24px 0 12px}
/* Archivo Black is a display face and it was setting every heading on the site, so a page went from
   400 to about 900 at every rank: a section heading was not a step above its paragraphs, it was a
   different typeface arriving. One display note per page, the title, and the ranks under it in the
   text face at 600. The page then reads 900 · 600 · 600 · 400 · 400 down its ranks instead of
   900 · 900 · 900 · 400 · 400, and the steps in size do the work they were always supposed to do. */
.page h2{font-family:var(--text);font-weight:600;font-size:var(--t-section);letter-spacing:-0.01em;margin:32px 0 10px}
.page h3{font-family:var(--text);font-weight:600;font-size:var(--t-sub);margin:24px 0 8px}
.page p,.page li{font-size:var(--t-body);line-height:1.6;margin:12px 0}
/* The reset at the top of this file zeroes every padding, which takes a list's indent with it, and a
   bullet is drawn in that indent, so it lands outside the content box and gets clipped by whatever is
   holding the page. `ol` got its indent back when it was noticed on the rulebook; `ul` never did, and
   every bulleted list on the site has been sitting flush left with its markers half off the page.
   Both, in one rule, so the next reader does not have to find out which one was remembered. */
.page ul,.page ol{padding-inline-start:24px;margin:12px 0}
.page li{margin:4px 0}
/* Lists that draw no marker want no indent: the space is for the marker and there is none. */
.page ul.downloads,.page ul.journal,.page ul.roll{padding-inline-start:0}
/* Files to download, not points in an argument. A bullet is a mark of enumeration and these are not
   enumerated: they are three names and their formats, and the name is the thing to click. The underline
   every prose link carries goes too, on a line that is nothing but a link it underlines the whole line
   and reads as a rule drawn under each item. */
/* A field on a page, which until now only the purchase sheet had. Left to the browser, the email box
   was a grey inset rectangle beside a square button, at two different heights and two different faces.
   The same border, radius and padding the sheet uses, and the two on one row that wraps rather than
   overflows. `--t-field` is 16px because anything smaller makes iOS zoom the page on focus. */
.fieldrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}
.fieldrow input{flex:1 1 240px;min-width:0;border:1.5px solid var(--ink);border-radius:var(--r-sm);padding:8px 12px;font-family:var(--text);font-size:16px;background:var(--white);color:var(--ink)}
.fieldrow input:focus-visible{outline:2px solid var(--sticker);outline-offset:1px}
.fieldrow .btn{flex:0 0 auto}

.downloads{list-style:none;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px}
.downloads a{border-bottom:0;font-family:var(--mono);font-size:var(--t-small)}
.downloads a:hover,.downloads a:focus-visible{color:var(--sticker)}
/* One of the two at a time. Over 820 the drawing shows the shape at a glance, which is what it is for;
   under it the drawing is unreadable and the list says the same thing in the same order. */
.bands{display:none}
@media (max-width:820px){
  .diagram{display:none}
  .bands{display:block;margin:18px 0}
  .band{margin:0 0 18px}
  .bandname{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
  .bandbox{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;margin:0 0 6px}
  .bandbox b{display:block;font-size:var(--t-small)}
  .bandbox span{font-size:var(--t-small);color:var(--mute)}
  /* The record is the one band the whole page is about, so it keeps the weight the drawing gave it. */
  .band:nth-child(3) .bandbox{border-color:var(--ink);border-width:2px}
}

/* `pretty` is the other half of a ragged edge: it looks at the last few lines of a paragraph and
   refuses to leave one word alone on the final one. Headings and leads get `balance`, which spreads a
   two-line heading evenly rather than putting five words on the first line and one on the second.
   Both degrade to ordinary wrapping where the browser does not know them, so there is nothing to
   guard. */
/* `pretty` looks back over the last lines of a block and tries several breaks to avoid a single word
   alone at the end. It costs more than ordinary wrapping, and the guidance for it is explicit: short
   blocks. On `li` it buys almost nothing, most list items here are one line, and on the legal
   documents it is asked to reconsider seventeen hundred words to save four orphans nobody reads to.
   So: paragraphs and the short blocks, which is where an orphan is both visible and irritating. */

/* Ragged right, and no hyphenation. Justified text on a measure this narrow opens rivers of white
   between words and forces breaks inside them; the site is read in fourteen languages, and automatic
   hyphenation is only as good as the dictionary the browser happens to carry for each. A ragged edge
   costs a little tidiness and never mangles a word. */
.page .lead{font-size:var(--t-sub);color:var(--mute)}
/* A screenshot inside a page of text: bounded by the measure, never wider than its own pixels, and
   framed the way every other card here is framed so it reads as part of the page rather than as
   something pasted onto it. */
/* The Hall's three sections. The markup existed and nothing styled it: the buttons rendered as bare
   text with no gap, so the tabs read as one run-on word, `SeasonsThe wall, past`, above the title. */
.tabs{display:flex;flex-wrap:wrap;gap:2px;margin:32px 0 -10px;border-bottom:1px solid var(--line)}
.tabs .tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:8px 12px;font:inherit;font-size:var(--t-small);color:var(--mute);cursor:pointer;border-radius:var(--r-sm) var(--r-sm) 0 0}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab[aria-current]{color:var(--ink);font-weight:600;border-bottom-color:var(--sticker)}
.page .shot{display:block;margin:18px 0 6px;max-width:min(100%,560px)}
.page .shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.page .shotcap{margin:0 0 18px}
/* The allocation bar on the token page: four shares of one line, radius on the corner switch like
   every other radius, colours from the palette and nothing outside it. */
.allocbar{display:flex;height:10px;border-radius:var(--r-sm);overflow:hidden;margin:0 0 14px}
.allocbar span{display:block}
table.plain td.pct{width:4.5em}
/* Three columns, counted rather than fitted. `auto-fill` gave whatever the width allowed, four here,
   five there, so a group of six sat as four and two, and the page had a half-empty row in it at most
   widths. Fixed at three, every group is written in a multiple of three and no row is left short. */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stats{grid-template-columns:1fr}}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px}
/* The closing section of the home page, and it had drifted out of the page in three ways at once.
   It carried a `max-width` reading `--wrap`, a variable this stylesheet never defines, so it fell back
   to 1100 inside a 1040 wrapper, dead code pretending to be a constraint. Its own 16px of padding sat
   inside the wrapper's 20, which pushed every heading in it 16 pixels right of the wordmark and of the
   board headings above: measured against the screenshot, one section of the home page was indented
   from all the others. And it ended flush against the footer's rule, because the 44px the footer asks
   for never applies (see the note there) and `.why p{margin:0}` zeroed the last line as well.
   One edge now runs from the logotype through the board to this section, and the bottom margin is the
   60 a static page already keeps, so both page shapes leave the same air above the footer rule. */
/* The block that carries the three claims and the line under them, on its own ground: white, a hairline
   and fifteen of padding. It is the one place on the page that argues rather than reports, and it was
   the only such block sitting straight on the paper with nothing marking where it began or ended. */
.why{margin:48px 0 48px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px}
/* The display face, like every other section heading on the site. Without it these two fell to the
   body face at the browser's own bold, the one block on the home page set in a different voice. */
/* The home page's section headings were a scale of their own: an `h2` at 19 where every other page sets
   one at 22, and an `h3` at 15 where every other page sets one at 17. Two ranks, two answers, on the
   one page a reader is most likely to arrive on first. The page's steps, like everywhere else. */
.why h2{font-family:var(--text);font-weight:600;font-size:var(--t-section);letter-spacing:-0.01em;margin:0 0 18px}
.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.whygrid{grid-template-columns:1fr}}
.why h3{font-family:var(--text);font-weight:600;font-size:var(--t-sub);margin:0 0 6px}
.why p{margin:0;color:var(--mute);font-size:var(--t-body);line-height:1.6}
.whythrone{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
/* The last line of the home page. `.why p` zeroes margins for the grid, where the gap is the grid's
   job; this one is not in the grid and needs its own air. */
/* Third-party marks are official files, not glyphs we can recolour, so they get a light strip to
   sit on rather than a filter to distort them. In the machine room the strip carries its own pale
   background, which is how a logo row is supposed to survive a dark page. */
/* Sized by class rather than by a fragment of the address: a selector keyed on `src` stops matching
   the moment anything rewrites the URL, which is what inlining an image as a data URI does, and it
   let a 646-pixel logotype through into a footer. A class says what the thing is, wherever it lives. */
/* Fixed to the right edge, the physical right, in both directions: on a right-to-left desktop the scrollbar sits at the
   left, and a remote at the inline end drew over its gutter by three pixels (29 August 2026, evening, seen on the Arabic
   build), clear of the content column so it never covers a price. Ink on paper like
   everything else, and it steps back until pointed at, a control for a long page should not compete
   with what the page is for. */
/* The remote reads as one dark object with pale marks on it, which is what a remote looks like and what
   nothing else on the page is: it floats over whatever is scrolling under it, and a white panel with
   grey glyphs had to be told apart from the page every time it crossed something light.
   The ink and the paper, not black and white: it is a dark object on a light page, and naming the two
   means it stays that object if either value is ever changed. The divider between the buttons is the
   paper at a fraction, because `--line` is a rule meant for light grounds and vanishes on this one, the one place in the sheet where a value is written out rather than named. */
.jump{position:fixed;top:50%;right:12px;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;border:1px solid var(--ink);border-radius:var(--r-lg);background:var(--ink);overflow:hidden}
.jump button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;background:none;color:var(--paper);cursor:pointer;opacity:.7;transition:opacity .15s,color .15s,background .15s}
.jump button+button{border-top:1px solid rgba(255,255,255,.18)}
.jump button:hover,.jump button:focus-visible{opacity:1;color:var(--paper);background:rgba(255,255,255,.14)}
.jump button[aria-current="true"]{opacity:1;color:var(--paper)}
@media(prefers-reduced-motion:reduce){.jump button{transition:none}}
@media print{.jump{display:none}}
/* The notice on one side, the links on the other. `auto` on the inline start margin puts the group at
   the far end in both directions, and the row wraps to two lines rather than squeezing when there is
   no longer width for both, at which point the links lead their own line, left-aligned, which is
   where a wrapped group belongs. */
.bottom .flegal{margin-top:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;width:100%}
.bottom .flinks{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:4px 10px}
/* The contour lives on the row, not on the mark: the `soon` tag is a sibling of a mark, not a child of
   one, and it has to read the same number to scale with it. */
.builton{--mark-scale:.75;--contour-base:calc(var(--lead) * var(--strip-mark));--contour:calc(var(--contour-base) * var(--mark-scale))}
.builton .mark{vertical-align:middle;width:auto;height:calc(var(--contour) / .644)}
/* Two levers, and they multiply.
   `--mark-scale` is the global one: it moves all seven at once and nothing else on the page. The
   optical corrections that even the row out · Stripe and Cloudflare +20%, X +15%, GitHub +10%, are
   baked into the images and are untouched by it, so turning this dial keeps the row balanced and only
   changes how big it is. `--contour-base` is the reference height the breakpoints step down.

/* One number for every mark, and it is the one you would measure with a ruler: `--contour`, the
   height of the visible drawing. Twelve pixels, for all seven, with no per-file scale.

   Equal frames were not enough, and that is the whole story of this rule. A frame holds whatever the
   artwork puts in it, and the extremities are not equal: a five-pointed star ends in a hair that
   renders as a grey nobody sees at this size. Measured in a common frame, TrustMRR drew 10 pixels of
   visible contour where the other six drew 12, the difference that was reported, and it was real.

   So the images carry the correction, not this stylesheet. scripts/rasterize-marks.mjs finds each
   mark's visible contour, the first and last rows where at least 1% of the width is inked, which
   keeps a `t` stem and a `p` tail and drops the tip of a star, scales every mark until those
   contours match, and centres each in a canvas identical for all seven. The contour is 90% of that
   canvas, hence the division here: ask for 12 pixels of drawing and the box is 13.33.

   The transparent margin inside the files is the price, and it is the only place the difference can
   live: either the files carry it, or this stylesheet carries seven heights.

   The per-file rules below hold two things only: the proportion of the image, written by that script
   from the file it produced, and the file itself. */
/* ⚠ One ink for every mark, the class is `oneink`, not `mono`: `.mono` is the typographic class of
   this stylesheet (small, uppercase, letter-spaced), and a mark carrying it inherited a font-size one
   pixel larger than the row's, which scaled every height expressed in `em` by nine per cent. A class
   name that already means something else is not a free choice.
   ⚠ One ink for every mark, a recolouring, flagged in build.mjs and due to be cleared before T0.
   The silhouette comes from the official file through a mask, so the artwork is untouched and only
   its colour is ours. `aspect-ratio` per mark below gives the masked box the width the <img> used to
   take from the file itself. */
.builton .mark.oneink{background:currentColor;-webkit-mask-image:var(--mark);mask-image:var(--mark);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;color:var(--ink)}
/* MARKS=grey: the same mask, painted in the row's own colour instead of the site's ink, so a mark
   carries exactly the weight of the words beside it, and follows if that colour ever moves. */
.builton .mark.oneink.grey{color:inherit}
.mark-internet-computer-stacked{aspect-ratio:4.5687;--mark:url(/brand/internet-computer-stacked.png)}
.mark-solana{aspect-ratio:4.3688;--mark:url(/brand/solana.png)}
.mark-stripe-ink{aspect-ratio:2.1812;--mark:url(/brand/stripe-ink.png)}
.mark-x{aspect-ratio:0.975;--mark:url(/brand/x.png)}
.mark-cloudflare{aspect-ratio:3.0375;--mark:url(/brand/cloudflare.png)}
.mark-github{aspect-ratio:3.6;--mark:url(/brand/github.png)}
.mark-trustmrr-lockup{aspect-ratio:4.95;--mark:url(/brand/trustmrr-lockup.png)}
/* No band, no rule under it. The strip stands between two sentences on the home page and under the
   navigation elsewhere, and in both places it reads as a line of the page rather than as a section of
   its own, a tinted strip with a hairline beneath it was a divider cutting the opening in two. */
/* Sticky is a positioned element, which is what lets the centred tick above resolve its insets
   against this bar rather than against the page. */
/* The strip lets its tape stand out of it. It used to clip, `overflow:hidden`, which was never for
   the strip: the rolling events have their own `overflow:hidden` on `.tape` and clip themselves. What
   the strip's clipping actually cut was the masking sticker, which is rotated and whose ends therefore
   rise past the strip's edges. A sticker is stuck onto a thing and stands proud of it; cropping it flat
   is the one thing that stops it reading as tape.
   The strip does not follow the reader down the page. It carries a fact, every event goes to the tape
   account, automatically, and the last board trade, and neither is something a reader needs held in
   front of them while they read something else. A masthead, not a heads-up display.
   `relative` and not simply nothing: the last board trade is absolutely positioned against this strip, `top:0;bottom:0;inset-inline-end:0`, so its height is the strip's, and `sticky` was what made the
   strip a containing block. Dropping sticky without putting `relative` in its place sent the figure
   looking for the next positioned ancestor and it left the bar entirely. A position that is load-bearing
   for a child is not a position that can be removed for its own sake. */
/* The bar holds the top of the window. It carries the events as they happen and the market's last
   figure, and both are only worth carrying if they are still there once a reader has scrolled into the
   board they describe, a live tape that leaves with the first scroll is a decoration.
   The ticker is inside it rather than beside it. It used to be the first child of the content wrapper,
   absolutely positioned against nothing in particular, so it hung at the top of the document and left
   the moment the document moved. Inside the bar it is positioned against the bar, and the two travel as
   one thing: the sticker stays over the strip whatever the page does under them.
   `overflow:clip` on the inline axis only, the strip's own mask needs the bar not to clip it
   vertically, and the sticker hangs below the rule on purpose. */
.tapebar{position:sticky;top:0;z-index:15;background:var(--white);border-bottom:1.5px solid var(--ink);display:flex;align-items:center}
.tapelabel{flex:none;align-self:center;transform:rotate(-3.3deg);background:var(--tape);border:1px solid var(--tape-edge);color:var(--ink);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;padding:2px 10px;margin-inline-end:12px;box-shadow:var(--shadow-tape);opacity:.96;white-space:nowrap}
/* The account that reposts the tape, standing on the white of the bar rather than on the tape itself:
   the sticker is a label the site puts on its own feed, the handle is a place a reader can go, and
   the two should not look like one object. Set in the row's own face at the sticker's size, kept out
   of the scrolling area, and dropped on a phone where the ticker needs every pixel. */
/* The same arrow the brand line uses, at the same 26 × 13 and the same aim, it leaves the sentence
   and lands on the handle that sentence is about. One drawing, two places; a second arrow drawn to
   look like the first is two drawings to keep in step. */
/* The header's arrow, mirrored on its horizontal axis and then tipped ten degrees anticlockwise: that
   one rises into a handle sitting above its line, this one dives into a handle on the same line. One
   drawing, flipped, rather than a second path to keep in step with the first.
   The rotation is written before the mirror because the chain reads right to left: the drawing is
   flipped first and the whole flipped thing is then tipped, which is a tip of ten degrees on what you
   see. Written the other way round the flip would have reversed the tip's direction. */
.tapearrow{width:26px;height:13px;margin:0 8px 0 -6px;color:var(--mute);flex:none;transform:rotate(-10deg) scaleY(-1)}
.tapehandle{border-inline-end:1.5px solid var(--ink);padding-inline-end:12px;margin-inline-start:-2px;flex:none;align-self:center;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;color:var(--mute);margin-inline-end:14px;white-space:nowrap}
.tapehandle:hover,.tapehandle:focus-visible{color:var(--ink)}
/* Under 520 the bar keeps the rolling events and sheds the three things around them: the masking-tape
   label, the arrow, and the handle it points at. They go together because they only mean anything
   together, an arrow whose handle is hidden points at nothing.
   This block used to read `.tapelabel,` followed by two comments and then the arrow's own rule, which
   made one selector list out of the two: on a phone the label was given the arrow's 26 × 13 box and the
   arrow's vertical flip, so the strip's one piece of masking tape became a clipped upside-down square.
   A flex item is blockified, so the width and height applied, the bug needed a narrow screen and a
   flex context to show itself, which is why it shipped. */
@media(max-width:520px){.tapelabel,.tapearrow,.tapehandle{display:none}}
/* One lever for the whole row. Every mark's height is a multiple of this font-size, so a step down
   here shrinks labels and marks together and the row keeps its proportions, which is what lets it
   hold one line on a laptop instead of dropping its last entry onto a second. */
.builton{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;max-width:var(--measure);margin:0 auto;padding-block:6px;font-family:var(--mono);font-size:calc(var(--lead) * var(--strip-text));letter-spacing:0;color:var(--mute)}
.builton>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
/* A tag on the one line whose artefact does not exist yet: the tape bar's own paper and its own ink,
   at a hair's width rather than the bar's 1.5px, which on a tag this small would read as a box rather
   than as an edge. Tilted clockwise to fifteen degrees, half past three on a clock face, against the
   counter-clockwise lean of every sticker on the site. Every number here is a multiple of `--contour`,
   and the multiples are measured against the mark's *rendered height*, `--contour / .644`, not
   against the contour itself: tying them to the contour shrank the tag by 35% in one edit. The end
   offset has been trimmed by hand, -1.333, then -0.555, now -0.888, always as a fraction, so each
   move survives a change of `--lead` like everything else here.
   Equal padding on the four sides, less the
   phantom space `letter-spacing` leaves after the last letter, taking that off the end is what
   centres the word rather than the string. Measured on the rendered pixels rather than on the boxes:
   4.30 left and 4.35 right across, centred to within half a tenth of a pixel, and 5.40 above, 4.90
   below.
   The vertical does not go further, and the reason is worth the line. A line box reserves the font's
   descent, which no capital uses, so equal padding leaves the ink one and a half pixels low. Moving
   padding from the bottom to the top corrects it, but the position quantises: at 3.25px the ink is
   1.5 low, at 3.5px it is 0.5 high, and 3.75 and 4 change nothing at all. There is no value that
   equalises, so the tag is set half a pixel high rather than a pixel and a half low, the better of
   the two states a renderer will actually produce at this size. And
   tied to `REPO_URL`: the day the repository is public the tag disappears on its own rather than being
   remembered. Nothing else in the row wears one, which is what makes it read as a state rather than as
   decoration. */
.builton .withsoon{position:relative}
.builton .soon{position:absolute;top:calc(var(--contour) * -.444);inset-inline-end:calc(var(--contour) * -.888);transform:rotate(15deg);font-family:var(--mono);font-size:max(8px,calc(var(--contour) * .722));letter-spacing:.08em;text-transform:uppercase;background:var(--white);color:var(--ink);border:calc(var(--contour) * .111) solid var(--ink);border-radius:calc(var(--contour) * .222);line-height:1;padding:calc(var(--contour) * .194) calc(var(--contour) * .167) calc(var(--contour) * .139);padding-inline-end:calc(var(--contour) * .167 - .08em);pointer-events:none}

/* One line while it fits, and a deliberate shape when it does not. Flex wrapping breaks wherever the
   widths happen to fall, four then two, which reads as broken rather than designed. Below the width
   the row needs, a grid takes over and the break is a decision: three and three, then two by three
   on a phone. The separators go with it: a middle dot at the end of a row is punctuation pointing at
   nothing. */
/* The row's own size is gone from here. It used to step down twice on its own, which made it drift
   away from the paragraph it sits under; it is now a fixed fraction of `--lead`, so a change to that
   moves both by the same percentage and nothing else in this file has an opinion about it.
   What remains is a change of arrangement, not of size: below 840 the row packs left instead of
   spreading each wrapped line across the full width. */
@media(max-width:840px){
  .builton{justify-content:flex-start;gap:4px 14px}
}
.builton a{display:inline-flex;align-items:center;gap:4px}
/* A table inside a document, not a row of figures: it needs its own gutters, or the cells collide, `openfame.app` and `api.openfame.app` ran into each other on the cookie page. */
table.plain{width:100%;border-collapse:collapse;margin:12px 0;font-size:var(--t-small)}
table.plain th{text-align:start;padding:0 14px 8px 0;border-bottom:1px solid var(--ink);font-size:var(--t-small);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
table.plain th:last-child,table.plain td:last-child{padding-inline-end:0}
table.plain td{padding:8px 14px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.plain tr:last-child td{border-bottom:0}
/* The short columns keep their words, in a document's table, and only there. Left to itself the
   browser shares width by content, so a column of prose takes what it can and *30 minutes* breaks
   across two lines beside it; a duration is a value, and a value that wraps stops looking like one.
   Scoped to `.doc`, which is what the markdown renderer emits, because the site's other seven tables
   are hand-built and four of them carry prose in the last column, up to 92 characters on the token
   page. Told not to break, those would each be one cell wide enough to push the table off the page.
   The precondition is checked rather than assumed: a test fails if any `.doc` table ever grows a first
   or last column longer than a label. */
table.doc tr>*:first-child,table.doc tr>*:last-child{white-space:nowrap}
.page .help{font-size:var(--t-small);color:var(--mute);line-height:1.45}
/* The slot the $OPENFAME line used to fill: one line of `.help` at its own size, plus the margin that
   paragraph carried. Written in `lh` so it follows the line-height rather than restating it, with a
   pixel fallback for the browsers that do not have the unit yet · 13 × 1.45, rounded. */
p.homelead{margin:6px 0 0;color:var(--mute)}
.fameslot{margin:10px 0 0;min-height:19px;min-height:1lh;font-size:var(--t-small);line-height:1.45}
/* `--t-title` is the size of a page heading and it is right for `$9,942`, which is what these boxes
   were built for. Some of them answer in words, *Minted, nothing in circulation*, and four words at
   30px break over three lines and stretch the whole row, because the grid's rows are as tall as their
   tallest box. A value of more than a few characters steps down to the section size, and `balance`
   splits what is left over its lines evenly instead of leaving one word alone at the bottom. */
.stat b{display:block;font-family:var(--digits);font-variant-numeric:tabular-nums;font-size:var(--t-title);font-weight:800;direction:ltr}
/* The class is on the grid, not on the box: a grid whose longest answer is a phrase is set one step
   down, all of it. Set per box, six values came out at two sizes inside one frame. */
.stats.words .stat b{font-size:var(--t-section)}
.stat span{font-size:var(--t-small);color:var(--mute)}
/* The Hall's three lists are one list drawn three times. A mark, the name, the facts under it, and on
   the right the single figure that list is ordered by, a price as a sticker, a date as a date. Three
   shapes for three tabs of one page is what made it read as three pages: a season was a sentence with
   its price inside it and beside it, a sale was a sentence behind a 150-pixel date column, and an
   archived post was four lines with a raw address among them.
   The figure is the last track and it is the only thing that lines up down the page, which is what a
   hall of fame is read for. Every track is fixed or flexible and nothing spans across them, so the
   column of figures cannot be moved by the length of a name, the lesson the board rows cost. */
.roll{list-style:none;margin-top:24px}
.roll li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:14px;row-gap:1px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
/* The Hall's page has no `.hall` ancestor, its rows live in `.roll` under `.page`, and the mark rules above used to
   name `.hall .hlogo` and `.journal .hlogo`, two ancestors no page has, so the mark had a `--box` and no box, and a logo
   drew at its natural size: a hundred pixels for a favicon, the page for an Open Graph image. The rules name `.roll`
   now and the two phantom ancestors are gone (29 August 2026, evening). */
/* The archives carry a mark like everything else that names a thing on this site. Two of the three can show the real
   one, a season entry keeps the Throne's link, an archived Wall post keeps its own, and the board's past cannot: the
   journal records a purchase as rank, buyer, seller and price, with no link in it, so that column shows the buyer rather
   than inventing a logo from whatever sits at that rank today. A mark that is a person is the handle's first two letters,
   the fallback the board has always used for a link without a logo. */
.roll .hlogo{--box:30px;grid-area:1/1/3/2}
.roll .name{grid-area:1/2;font-size:var(--t-body);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roll .facts{grid-area:2/2;font-family:var(--mono);font-size:var(--t-small);color:var(--mute)}
.roll .amount{grid-area:1/3/3/4;justify-self:end}
/* A date is set like the figures it stands in for, not like a price: the column is one column and the
   two things in it are not the same kind of thing, which the eye should be able to tell. */
time.amount{font-family:var(--mono);font-size:var(--t-small);color:var(--mute);font-variant-numeric:tabular-nums}
.journal li{align-items:center}

/* sheets */
.veil{position:fixed;inset:0;background:rgba(18,18,18,.35);display:grid;place-items:center;padding:16px;z-index:10}
.sheet{background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:18px 24px;font-size:var(--t-small);width:min(520px,100%);max-height:94vh;max-height:94dvh;overflow:auto;position:relative;overscroll-behavior:contain}
.sheet h3{font-family:var(--text);font-weight:600;font-size:var(--t-sub);margin-bottom:12px;letter-spacing:-0.01em;padding-inline-end:32px}
.sheet .close{position:absolute;top:12px;inset-inline-end:12px;font-size:var(--t-section);line-height:1;padding:4px 8px}
.sheet .line{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.sheet .line.total{border-bottom:0;font-weight:600;font-size:16px;padding-top:12px}
.sheet .field{margin:14px 0 4px}
.sheet label{display:block;font-weight:600;font-size:var(--t-small);margin-bottom:6px}
.sheet input[type=text],.sheet input[type=url],.sheet input[type=number],.sheet select{width:100%;border:1.5px solid var(--ink);border-radius:var(--r-sm);padding:8px 12px;font-family:var(--mono);font-size:var(--t-body);background:var(--paper);color:var(--ink)}
.sheet .help{font-size:var(--t-small);color:var(--mute);margin-top:6px;line-height:1.4}
.sheet .help.red{color:var(--red)}
.sheet .consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-small);margin:12px 0;color:var(--ink)}
.sheet .consent input{margin-top:2px;accent-color:var(--ink);width:18px;height:18px;flex:none}   /* 13px native: under a thumb; 18 reads as a checkbox, and the label around it is the target */
.sheet .pay{display:block;width:100%;background:var(--ink);color:var(--paper);border-radius:var(--r-pill);padding:14px;font-weight:600;font-size:var(--t-body);margin-top:14px}
.sheet .pay[disabled]{opacity:.5}
.sheet .pay small{font-family:var(--mono);font-weight:400;opacity:.75;margin-inline-start:8px}
.sheet .jumps{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.sheet .redline{border:2px solid var(--red);color:var(--red);font-family:var(--mono);font-size:var(--t-small);letter-spacing:.12em;padding:8px 12px;text-align:center;margin:14px 0;transform:rotate(-1deg)}
.sheet .preview{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;margin-top:8px;background:var(--paper)}
.sheet .preview img{width:28px;height:28px;border-radius:var(--r-sm)}
.sheet .error{color:var(--red);font-size:var(--t-small);margin-top:8px}
.sheet .result{text-align:center;padding:12px 0}
.sheet .result .sticker{margin:14px 0}
.sheet .timer{font-family:var(--mono);font-size:var(--t-small);color:var(--mute);text-align:center;margin-top:8px}
#payment-element{margin:14px 0}

/* No `margin-top` here, and that is the correction rather than an omission. It carried 44px, which
   never once applied: `.wrap>footer.bottom{margin-top:auto}` above outranks a lone element-and-class
   selector, and `auto` resolves to zero the moment a page is long enough to have no free space to
   absorb. So the number was read as the gap and was not the gap, and the home page's last line ended
   against this rule. `auto` stays, it is what puts the footer at the foot of a short page, and the
   air above it belongs to the content, which states it: 60px on `.page`, 60px on `.why`. */
footer.bottom{border-top:1.5px solid var(--ink);padding:18px 0 32px;font-size:var(--t-small);color:var(--mute);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}


@media (max-width:720px){
  /* The card is read down rather than across. Wide, the mark is a column and everything else stands
     beside it; narrow, a 104-pixel mark beside a name and a call to action leaves the name a third of
     the card and cuts it, and the description below runs the full width anyway, so the two things
     that need the width take it, and only the description keeps the mark company.
     The name first and across the whole card, then the mark with the product's own words beside it,
     then the figures, then the price. `display:contents` is what allows it: the name, the description
     and the figures are one element on the wide card, which is right there and is exactly what has to
     be undone here. The wrapper stops drawing a box and its three children become items of the card's
     own grid, which is the only way an element inside it can be placed above the mark outside it.
     The eyebrow and the season are unaffected, they are absolutely positioned against the card, not
     against the wrapper, and an element that draws no box positions nothing. */
  .throne{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .throne .tcol{display:contents}
  /* The name and the line beside it stack here, and take no rule down their side. A row and a card are
     one line among a hundred and a rule tells you where one of them starts; the banner is the whole of
     what the page is built around, and marking it as somebody's writing says nothing that the crown,
     the sticker and the band across the top have not already said. The dot goes with the stacking all
     the same, a dot divides two things on a line and there is no longer a line with two on it. */
  .throne h1{grid-area:1/1/auto/-1;flex-direction:column;align-items:flex-start;gap:2px}
  .throne h1>*{max-width:100%}
  .throne h1 .sep{display:none}
  .throne .tagline{grid-area:2/2}
  .throne .meta{grid-area:3/1/auto/-1;margin-top:0}
  .throne .cta{grid-area:4/1/auto/-1;align-items:flex-start}
  /* Every one placed by hand: auto-placement runs items with a definite column before items with
     neither, and the mark has neither, so left to itself it would have taken the first row from the
     name it is supposed to stand under. */
  .throne .tlogo{grid-area:2/1}
  /* A flat square here, not the measured one. `--tbox` is the text column's height and the mark is
     given it so a long name or a three-line translation is met rather than overhung, which works while
     the mark's width costs the column little. Under 720 it costs it everything: the column is tall
     because it is narrow, the mark takes that height as its width, the column narrows, and the two run
     away from each other until the card leaves the screen. */
  .throne .tlogo{--box:100px}
  /* The two lines that end the card keep the edge they end on. The price and its caption sit at the
     start of a row of their own; these two are the card's own facts and stay opposite them, which is
     also where they are on the wide card. `stretch` because a flex item shrunk to its text has no edge
     to align against. */
  .throne .cta .foot{align-self:stretch}
  /* The big sticker slides thirty pixels left, which on the wide card pulls it off the right edge of a
     column that has room to spare. Here its column starts at the card's own edge, so the same slide
     carried it out of the card entirely. */
  .throne .cta .sticker{--slide:0px}
  .sticker{--s:22px;padding:10px 12px 8px;min-height:44px}
  .btn{min-height:44px}
  .wrap{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
  .sticker.big{--s:46px}
}

/* The switch. One attribute on the root element; nothing else in the sheet knows about it. */
[data-corners="square"]{--corner:0}

/* the three rules that replaced inline style attributes (the CSP's style-src is 'self': no inline style) */
.badge-inline{vertical-align:middle}
table.plain td.rankcol{width:2.5em}
table.plain td.num{text-align:right}

/* ---- Narrow screens, audit of 29 August 2026, pass 0, measured in a headless Chromium from 320 to 1920px.
   1. `body>.wrap` is a flex item with auto margins, so its width was fit-content: the board's six fixed
      tracks (480px) set the width of the whole page, and on every phone the right third of every page was
      cut off by the body's overflow clip. A definite width; `max-width` still caps it on a desktop.
   2. A container query cannot see its own element: `.board{…}` written inside `@container board` never
      applied, so the board kept six tracks while its rows had switched to four. The board's *parent* is now
      the container the board and its rows both query (`boardbox`: `#content` on the home page, `.pagecol`
      beside a rail), so the two switch together, at the board's own width.
   3. The Throne's masking-tape label is rotated 17px past the band; the band clips its inline axis (clip,
      not hidden: no scroll container is created).
   4. A table in a governing document scrolls inside its box rather than out of it. */
body>.wrap{width:100%}
#content,.pagecol{container-type:inline-size;container-name:boardbox}
.throneband{overflow-x:clip}
@media (max-width:720px){table.plain{display:block;max-width:100%;overflow-x:auto}}
/* The Throne's description stops short of the price sticker, which is rotated a few degrees into the gap. */
.throne .tcol{padding-inline-end:16px}
/* On a phone the masking-tape line stopped covering the band's title: it becomes a strip across the foot
   of the panel, still tape, still crooked, and the Throne's one sentence stays on every screen. */
@container boardbox (max-width:560px){.throne .masking{position:static;transform:rotate(-2deg);grid-column:1/-1;justify-self:center;margin-top:10px;max-width:100%;white-space:normal;text-align:center}}

/* ---- Pass 0, the decisions (29 August 2026).
   1. The jump control floated over the right edge of a phone's content, the very column the price stickers
      end on. It keeps its three buttons and moves to the bottom corner, in a row, where a thumb rests and
      nothing is read; a desktop keeps it at the side.
   2. Targets under 24 px: the category chips (20 px tall on every row) and the footer's links (14 px) grow a
      hit area with nothing visible changing, a chip through a pseudo-element, an inline link through
      vertical padding, which does not move a line box. WCAG 2.5.8.
   (A stacked Throne for phones was tried and dropped: the panel places its children by hand, and a single
   column broke that placement. The Throne's phone form is a pass-2 component item, not a token.) */
@media (max-width:560px){
  .jump{top:auto;bottom:max(16px,env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right));transform:none;flex-direction:row}
}
.cat{position:relative}
.cat::after{content:"";position:absolute;inset:-4px 0}
footer.bottom a{padding-block:6px;margin-block:-6px}
/* Text a stranger wrote is isolated from the bidirectional algorithm around it: an Arabic title beside a Latin chip
   was reordering the chip's own characters ("#1 IN AI" read "1# … IN AI"), found by the hostile corpus. */
.row .titleline a,.row .offer,.row .tagline,.row .title small,.row .owner a,.post>b,.post .tagline,.post small,.throne h1,.throne .offer,.throne .tagline,.cat{unicode-bidi:isolate}
/* ---- Pass 2, first component: the Throne on a phone (29 August 2026). The narrow form under 720 keeps its
   placement, the name over the mark and the description, the facts, the price, and a phone only narrows it:
   the mark drops to 64 pixels so the description beside it has a column of words, not of syllables, and the
   facts stop sharing a line with the chart, which had squeezed them into ten lines two words wide. */
@container boardbox (max-width:560px){
  .throne .tlogo{--box:64px}
  .throne .meta{flex-wrap:wrap;gap:12px}
  .throne .meta>:first-child{flex:1 1 100%}
}
/* ---- Pass 2, the sheets on a phone (29 August 2026). Measured in a browser at 320–430 and at 375×430, a phone with
   its keyboard up: the sheet keeps to 94dvh (the dynamic viewport, so a collapsing address bar or a raised keyboard
   shrinks it instead of hiding its foot), scrolls inside its frame, and the pay button is always reachable. The
   email field grows to the height a thumb needs; the checkboxes to 18px. */
.sheet input[type=email]{min-height:44px}
/* ---- Pass 2, the Wall cards (29 August 2026). Under the hostile corpus a description with nothing to break on
   was cut to one line with an ellipsis while a Chinese one ran to eight: the card's description now wraps anywhere
   and stops at four lines, so a row of cards keeps one height and a page's own description is a précis, not a
   column. The full text is on the page it describes. */
.post .tagline{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* ---- Pass 4, the proofs (29 August 2026).
   Focus not obscured (WCAG 2.4.11): a focused control, or an anchor arrived at, scrolls clear of the sticky tape bar
   above and the jump control below. Forced colours: the chart's bars and the stickers keep an edge when every
   background is stripped. Touch: a sticker's hover lift is a mouse thing, on a touch screen it stuck after a tap. */
a,button,input,select,textarea,[tabindex],[id]{scroll-margin-block:64px 96px}
@media (forced-colors:active){
  .spark i{border:1px solid CanvasText}
  .sticker,.jump{outline:1px solid transparent}
}
/* The Wall card, by eye (29 August 2026): the mark sits at the vertical middle of the two-line name, and the
   description stands ten pixels off the name it follows. */
.post .plogo{align-self:center}
.post>.tagline{margin-top:10px}
/* The two controls of a held spot on the account page, side by side (29 August 2026): on the wide board the price
   track holds them; on a narrow board they take a line of their own under the clicks, right-aligned, rather than
   stacking one under the other in the price's track. */
.row .act{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;justify-content:flex-end}
@container boardbox (max-width:820px){
  .row .act:has(.btn + .btn){grid-area:4/1/auto/-1;justify-self:end;margin-top:0}
}
/* The seller's name for the thing and its category, always on one line, each cut with an ellipsis rather than
   wrapped under the other (29 August 2026). The name is a span so that it can shrink: a bare text node in a flex
   line never shrinks below its own width. */
.row .title small{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap}
.row .title small .pname{flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis}   /* never shrinks: a two-pixel shrink already turned *Quill* into *Q…*; a name longer than the line is cut at the line */
.row .title small .cat{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* the chip gives way, all of it if it must */
/* The panel's price is the control, as on the banner: the sticker itself takes you to the Throne, with the banner's
   caption under it. The black button under it said the same thing a second time. */
.rail .takelink{display:block;text-decoration:none;color:inherit;margin:10px 0 2px}
.rail .takelink .sticker{margin:0}
.rail .rcap{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;color:var(--mute)}
.rail .rcap .takearrow{width:22px;height:11px;flex:none;transform:rotate(-58deg);position:relative;top:-6px}
.rail .rcap>span{transform:translate(-10px, 7px)}
.rail .takelink:hover .rcap,.rail .takelink:focus-visible .rcap{color:var(--ink)}