/* Luke's Stuff as a dial. The ring at the left is the whole catalog, the way
   a clock face is the whole hour: every row in the list is a notch on it, a
   section's name a long notch, a destination a notch, a page beneath one a
   short notch, with a band of the section's colour outside them. The list is
   a plain column to the right: a destination is a small picture and its name
   until it is pressed, when the rest unfolds beneath. Scrolling turns the ring one
   notch at a time so that the row level with the hub is the notch under the
   fixed hand, and each row near the hand is tied to its notch by a line.
   Lines across the dial join a destination to the other sections it is
   filed under. Nothing is written along a spoke.
   departures-chord.js draws the ring and sets --cx, --hy and --R (its centre
   and radius) and --col (where the list's marks sit). On a narrow screen the
   ring becomes the small dial beside the name. */
html[data-chord] {
  color-scheme:light;
  --paper:#f7f6f1; --ink:#151515; --muted:#55544f; --rule:#d9d7cf; --card:#fffefb; --blank:#eceae2;
  --slip-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 3px rgba(0,0,0,.24);
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  /* Section colours are supported by distinct glyphs and written names. */
  --c-design:#d9600a; --c-language:#1e63d0; --c-games:#b3261e; --c-accessibility:#9b59b6;
  --c-developers:#5c4033; --c-writing:#d8345f; --c-about:#0f8f8a;
  --i-design:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Crect x='11' y='11' width='9' height='9'/%3E%3C/svg%3E");
  --i-language:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H11l-4 4v-4H4z'/%3E%3C/svg%3E");
  --i-games:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cg fill='black' stroke='none'%3E%3Ccircle cx='8.5' cy='8.5' r='1.4'/%3E%3Ccircle cx='12' cy='12' r='1.4'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  --i-accessibility:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M5 9.5h14M12 9.5V14M12 14l-4 6M12 14l4 6'/%3E%3C/svg%3E");
  --i-developers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E");
  --i-writing:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 7h14M5 12h14M5 17h8'/%3E%3C/svg%3E");
  --i-about:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-4 3-6 7-6s7 2 7 6'/%3E%3C/svg%3E");
  --cx:320px; --hy:400px; --R:260px; --col:670px; --hub:136px;
  background:var(--paper);
  overflow-x:clip;

  /* --c is the section a thing is drawn in; --h and --g are a destination's own section. */
  [data-line="design"] { --c:var(--c-design); } [data-home="design"] { --h:var(--c-design); --g:var(--i-design); }
  [data-line="language"] { --c:var(--c-language); } [data-home="language"] { --h:var(--c-language); --g:var(--i-language); }
  [data-line="games"] { --c:var(--c-games); } [data-home="games"] { --h:var(--c-games); --g:var(--i-games); }
  [data-line="accessibility"] { --c:var(--c-accessibility); } [data-home="accessibility"] { --h:var(--c-accessibility); --g:var(--i-accessibility); }
  [data-line="developers"] { --c:var(--c-developers); } [data-home="developers"] { --h:var(--c-developers); --g:var(--i-developers); }
  [data-line="writing"] { --c:var(--c-writing); } [data-home="writing"] { --h:var(--c-writing); --g:var(--i-writing); }
  [data-line="about"] { --c:var(--c-about); } [data-home="about"] { --h:var(--c-about); --g:var(--i-about); }

  * { box-sizing:border-box; }
  body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.4 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip; }
  .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
  .skip { position:fixed; top:8px; left:12px; z-index:20; padding:12px; background:var(--ink); color:var(--paper); transform:translateY(-200%); }
  .skip:focus { transform:none; }
  :focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
  .figure { position:fixed; z-index:1; left:0; top:0; width:100%; height:100%; pointer-events:none; }
  .figure path { fill:none; stroke-linecap:round; stroke-linejoin:round; }

  /* The left of the page holds still: the name and search above the dial, the links below it. */
  .bar { position:fixed; z-index:3; left:40px; top:20px; }
  h1 { margin:0; font:700 46px/1 var(--sans); letter-spacing:-.055em; }
  .hub { position:fixed; z-index:4; left:calc(var(--cx) - var(--hub) / 2); top:calc(var(--hy) - var(--hub) / 2); display:block; width:var(--hub); height:var(--hub); border-radius:50%; background:var(--paper); box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink); }
  /* The portrait is a round window onto a wheel pivoted below it, the way a
     clock shows the date. The wheel carries two pictures a sixth of a turn
     apart. Half way round the dial it advances in three ticks, each with a
     small recoil, and the second picture comes up into the window. */
  .hub-window { position:absolute; inset:0; overflow:hidden; border-radius:50%; }
  .hub-wheel { position:absolute; inset:0; transform-origin:50% 160%; transition:rotate .6s steps(3,end); }
  .hub-wheel { transition:rotate .78s linear(0,.39 9%,.31 13%,.333 18%,.333 33%,.725 42%,.645 46%,.667 51%,.667 66%,1.055 75%,.98 79%,1 84%,1); }
  .hub.is-out .hub-wheel { rotate:-60deg; }
  .hub img { position:absolute; inset:0; display:block; width:100%; height:100%; border-radius:50%; }
  .hub img + img { transform-origin:50% 160%; rotate:60deg; }
  @media (prefers-reduced-motion:reduce) { .hub-wheel { transition:none; } }
  .masthead { position:fixed; z-index:3; left:40px; top:72px; display:flex; flex-wrap:wrap; align-items:center; gap:0 20px; max-width:calc(var(--R) * 2 + 36px); }
  .finder input { width:200px; min-height:44px; padding:0 12px; border:1.5px solid var(--ink); border-radius:0; background:var(--card); color:var(--ink); font:16px var(--sans); }
  .finder input::placeholder { color:var(--muted); opacity:1; }
  .quick-links { display:flex; gap:22px; }
  .quick-links a { display:inline-flex; align-items:center; min-height:44px; color:var(--ink); font-size:14px; font-weight:500; text-decoration:none; }
  .quick-links a:hover { text-decoration:underline; text-underline-offset:4px; }

  /* Each section's button rides just inside its long notch. */
  .wheel button { position:fixed; z-index:4; left:0; top:0; width:44px; height:44px; margin:-22px 0 0 -22px; padding:0; border:0; border-radius:50%; background:none; translate:var(--x,-99px) var(--y,-99px); cursor:pointer; }
  .wheel button::before { content:""; position:absolute; inset:8px; border-radius:50%; background:var(--paper); box-shadow:0 0 0 2px var(--ink); }
  .wheel button::after { content:""; position:absolute; inset:14px; background:var(--ink); -webkit-mask:var(--g) center / contain no-repeat; mask:var(--g) center / contain no-repeat; }
  /* The section the hand is in. */
  .wheel button[aria-current]::before { background:var(--ink); }
  .wheel button[aria-current]::after { background:var(--paper); }
  .wheel button:hover::before { box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--c); }

  /* The ring as a control: an element cut to the band's shape (the script
     sets the cut), so only the band takes a press. Under the portrait, the
     name of the notch being pointed at, or of the section the hand is in. */
  .ring { position:fixed; z-index:2; left:calc(var(--cx) - var(--R) - 26px); top:calc(var(--hy) - var(--R) - 26px); width:calc(var(--R) * 2 + 52px); height:calc(var(--R) * 2 + 52px); cursor:pointer; touch-action:none; }
  .ring.is-held { cursor:grabbing; }
  .readout { display:none; }
  &.has-readout .readout:not([hidden]) { position:fixed; z-index:3; left:var(--cx); top:calc(var(--hy) + var(--hub) / 2 + 15px); display:block; max-width:calc(var(--R) * 1.25); margin:0; padding:1px 8px 2px; translate:-50% 0; background:var(--paper); font:600 14px/1.25 var(--sans); letter-spacing:-.01em; text-align:center; pointer-events:none; }
  .readout::before { content:""; display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:50%; background:var(--c,var(--ink)); }
  .readout small { display:block; color:var(--muted); font:500 12px/1.3 var(--sans); letter-spacing:0; }

  .colophon { position:fixed; z-index:3; left:40px; bottom:16px; width:330px; color:var(--muted); font-size:12.5px; }
  .colophon p { margin:0; }
  .profile-links ul { display:flex; flex-wrap:wrap; gap:5px; margin:0 0 6px; padding:0; list-style:none; }
  .profile-links a { display:block; }
  .profile-links img { display:block; width:auto; height:18px; }
  .board-styles { display:flex; flex-wrap:wrap; gap:0 18px; }
  .board-styles a { display:inline-flex; align-items:center; min-height:36px; color:var(--ink); font-size:13px; text-underline-offset:4px; }
  .board-styles [aria-current] { font-weight:700; text-decoration:none; }
  /* What the list's place says when the dial cannot be drawn. */
  .plain { max-width:30em; margin:0 0 0 36px; font-size:17px; }
  .plain a { color:var(--ink); text-underline-offset:3px; }

  /* The list: an ordinary column, top to bottom. Its padding lets the first and last rows reach the hand. */
  .lens { position:relative; z-index:2; margin-left:calc(var(--col) - 12px); width:min(600px,calc(100vw - var(--col) - 12px)); padding-top:calc(var(--hy) - 32px); padding-bottom:calc(100vh - var(--hy) - 40px); outline:0; }
  /* The sections in words, in the space above the first row. Each turns the dial to its section. */
  .index { position:absolute; left:36px; top:22px; display:grid; justify-items:start; }
  .index[hidden] { display:none; }
  .index button { display:flex; align-items:baseline; gap:8px; min-height:30px; margin:0; padding:0 10px 0 0; border:0; background:none; color:var(--ink); font:600 15px/30px var(--sans); letter-spacing:-.015em; cursor:pointer; }
  .index button::before { content:""; align-self:center; width:10px; height:10px; border-radius:50%; background:var(--c); }
  .index button:hover .index-name { text-decoration:underline; text-underline-offset:4px; }
  .index-count { color:var(--muted); font:500 12px/1 var(--mono); }
  .line-title { margin:0; font:inherit; }
  .stops,.branch { margin:0; padding:0; list-style:none; }
  .row { position:relative; display:flex; align-items:stretch; min-width:0; padding-left:36px; translate:var(--bend,0px) 0; opacity:var(--fade,1); --dot:39px; }
  /* The mark where the line from a row's notch arrives, and the tick that ties it to its card. */
  .row::before { content:""; position:absolute; left:3px; top:calc(var(--dot) - 9px); width:18px; height:18px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 4px var(--h,var(--c)); }
  .row::after { content:""; position:absolute; left:21px; top:calc(var(--dot) - 1.5px); width:15px; height:3px; background:var(--c); }

  .line-head { display:grid; grid-template-columns:auto 1fr; align-content:center; column-gap:10px; min-height:64px; padding:6px 0 6px 44px; --dot:32px; }
  .line-head::before,.line-head::after { display:none; }
  .bullet { position:absolute; left:-5px; top:15px; width:34px; height:34px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 4px var(--c); }
  .bullet::after,.stop-art.is-blank::after { content:""; position:absolute; inset:9px; background:var(--ink); -webkit-mask:var(--g) center / contain no-repeat; mask:var(--g) center / contain no-repeat; }
  .line-name { font:700 25px/1.1 var(--sans); letter-spacing:-.035em; }
  .line-count { align-self:center; color:var(--muted); font:500 12px/1 var(--mono); }
  /* The row under the hand. */
  .line-head.is-now .bullet { background:var(--ink); }
  .line-head.is-now .bullet::after { background:var(--paper); }
  .branch .row.is-now .stop-name { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

  /* A destination. Its parts: the button that names it (a small picture and
     the name), and the link (a picture, what it is, and the word Open). Which
     of them show depends on where the destination is listed. */
  .stops > .stop { padding:5px 0; }
  .stop-card { flex:1; display:flex; flex-direction:column; min-width:0; }
  .stop-toggle { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; margin:0; padding:4px 12px 4px 4px; border:0; border-radius:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; scroll-margin:calc(var(--hy) - 24px) 0 30vh; }
  .stop-toggle:hover { background:rgba(21,21,21,.055); }
  .stop-toggle:focus-visible { outline-width:3px; outline-offset:3px; }
  .stop-icon { position:relative; flex:none; width:40px; height:40px; overflow:hidden; }
  .stop-icon.is-blank { background:var(--blank); }
  .stop-icon.is-blank::after { content:""; position:absolute; inset:10px; background:var(--ink); -webkit-mask:var(--g) center / contain no-repeat; mask:var(--g) center / contain no-repeat; }
  /* The link carries the icon too, for where it is listed without its button. */
  .stop-link > .stop-icon { display:none; }
  .stop-title { min-width:0; font-size:17px; line-height:1.2; font-weight:600; letter-spacing:-.02em; overflow-wrap:anywhere; }
  /* After a name, the glyph of each other section it belongs to, in that
     section's colour: told apart by shape as well as hue. */
  .stop-also { white-space:nowrap; }
  .stop-also i { display:inline-block; width:14px; height:14px; margin:0 0 -2px 6px; background:var(--c); -webkit-mask:var(--g) center / contain no-repeat; mask:var(--g) center / contain no-repeat; }
  .stop-also i + i { margin-left:4px; }
  /* Folded, how many pages are beneath it. */
  .stop-count { margin-left:auto; padding-left:10px; color:var(--muted); font:500 12px/1 var(--mono); }
  .is-open > .row > .stop-card > .stop-toggle > .stop-count { visibility:hidden; }
  .stop-link { position:relative; flex:1; display:flex; align-items:stretch; gap:14px; min-width:0; min-height:78px; color:var(--ink); text-decoration:none; scroll-margin:calc(var(--hy) - 39px) 0 30vh; }
  .stop-art { position:relative; flex:none; width:118px; min-height:78px; overflow:hidden; background:var(--blank); }
  .stop-art img,.stop-icon img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
  .stop-art.is-blank::after { inset:calc(50% - 15px); }
  .stop-go { display:none; }
  .stop-text { align-self:center; min-width:0; padding:10px 14px 10px 0; }
  .stop-name { display:block; font-size:17px; line-height:1.2; font-weight:600; letter-spacing:-.02em; overflow-wrap:anywhere; }
  .stop-note { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; margin-top:3px; color:var(--muted); font-size:13px; line-height:1.35; }
  .stop-change { display:none; }
  .stop-change:not(:empty) { display:block; margin-top:5px; font-size:12px; line-height:1.3; font-weight:500; }
  .stop-link:hover .stop-name { text-decoration:underline; text-underline-offset:3px; }
  /* Set off from the card, so it is not mistaken for the row under the hand. */
  .stop-link:focus-visible { outline-width:3px; outline-offset:3px; }
  /* A boxed count opens the pages beneath a destination. */
  .has-branch > .row .stop-text { padding-right:86px; }
  .stop-more { position:absolute; z-index:1; right:6px; top:17px; display:grid; place-items:center; min-width:48px; height:44px; margin:0; padding:0 4px; border:0; background:none; color:var(--ink); cursor:pointer; scroll-margin:calc(var(--hy) - 39px) 0 30vh; }
  .stop-more span { padding:5px 7px 4px; border:1.5px solid var(--ink); background:var(--card); font:600 12px/1 var(--mono); text-align:center; white-space:nowrap; }
  .stop-more:hover span,.stop-more[aria-expanded="true"] span { background:var(--ink); color:var(--paper); }
  .branch { margin:2px 0 4px 46px; }
  .branch[hidden] { display:none; }
  .branch > .stop > .row { --dot:26px; min-height:52px; }
  .branch > .stop > .row::before,.branch > .stop > .row::after { display:none; }
  .branch .stop-link { align-items:center; gap:0; min-height:52px; padding:5px 4px; background:none; box-shadow:none; }
  .branch .stop-art { display:none; }
  .branch .stop-link > .stop-icon { position:absolute; left:-42px; top:8px; display:block; width:36px; height:36px; }
  .branch .stop-link > .stop-icon.is-blank::after { inset:8px; }
  .branch .stop-text { padding:0; }
  .branch .stop-name { font-size:14.5px; }
  .branch .stop-note { margin-top:1px; font-size:12.5px; -webkit-line-clamp:2; }
  .branch .has-branch > .row .stop-text { padding-right:80px; }
  .branch .stop-toggle { display:none; }
  .branch .stop-more { right:0; top:4px; }
  .branch .stop-more span { background:var(--paper); }
  .branch .stop-more:hover span,.branch .stop-more[aria-expanded="true"] span { background:var(--ink); }

  /* In a section a destination is one line. Pressing it lays the rest out
     beneath on a slip of card: what it is, a picture large enough to read,
     and the way in. */
  .line > .stops > .stop {
    padding:1px 0;
    > .row { --dot:24px; }
    > .row.is-now > .stop-card { box-shadow:0 0 0 2px var(--ink); }
    &:not(.is-open) > .row > .stop-card > .stop-link,&:not(.is-open) > .row > .stop-more { display:none; }
    &.is-open { padding:6px 0; }
    &.is-open > .row > .stop-card { background:var(--card); box-shadow:var(--slip-shadow); }
    &.is-open > .row.is-now > .stop-card { box-shadow:var(--slip-shadow),0 0 0 2px var(--ink); }
    &.is-open > .row > .stop-card > .stop-toggle:hover { background:none; }
    > .row > .stop-card > .stop-link { flex-direction:column; align-items:flex-start; gap:10px; min-height:0; padding:0 14px 14px 56px; }
    > .row > .stop-card > .stop-link > .stop-text { order:1; align-self:auto; padding:0; }
    > .row > .stop-card > .stop-link .stop-name { display:none; }
    > .row > .stop-card > .stop-link .stop-note { display:block; margin-top:0; font-size:14px; line-height:1.4; }
    > .row > .stop-card > .stop-link > .stop-art { order:2; width:min(100%,380px); min-height:0; aspect-ratio:1200 / 630; }
    > .row > .stop-card > .stop-link > .stop-art.is-blank { display:none; }
    > .row > .stop-card > .stop-link > .stop-go { order:3; display:block; font-size:14px; line-height:1.7; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
    > .row > .stop-card > .stop-link:hover > .stop-go { text-decoration-thickness:2px; }
    > .row > .stop-more { top:auto; right:8px; bottom:6px; }
  }

  /* Search: every match along the rim, in ink, each already an open card. */
  .results { --c:var(--ink); }
  .results .stop-toggle { display:none; }
  #results-stops > .stop > .row > .stop-card { background:var(--card); box-shadow:var(--slip-shadow); }
  #results-stops > .stop > .row.is-now > .stop-card { box-shadow:var(--slip-shadow),0 0 0 2px var(--ink); }
  /* A match with no picture shows its icon in the picture's place. */
  #results-stops > .stop > .row > .stop-card > .stop-link > .stop-art.is-missing { display:none; }
  #results-stops > .stop > .row > .stop-card > .stop-link > .stop-art.is-missing + .stop-text { padding-left:0; }
  #results-stops > .stop > .row > .stop-card > .stop-link:has(> .stop-art.is-missing) > .stop-icon { display:block; align-self:center; width:56px; height:56px; margin:0 17px 0 31px; }
  .results[hidden] { display:none; }
  .results h2 { margin:0 0 4px 36px; color:var(--muted); font:500 14px/1.4 var(--sans); }
  .results p { margin:8px 0 0 36px; color:var(--muted); font-size:15px; }
  .text-button { min-height:44px; padding:0; border:0; background:none; color:var(--ink); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

  &.is-tight .colophon .profile-links { display:none; }
  /* A small ring: smaller buttons, so neighbours on it do not overlap. */
  &.is-small .wheel button { width:30px; height:30px; margin:-15px 0 0 -15px; }
  &.is-small .wheel button::before { inset:3px; }
  &.is-small .wheel button::after { inset:8px; }
  &.is-small .colophon { width:calc(var(--R) * 2 + 36px); }
  /* Narrow: the ring becomes a small dial beside the name and the list is the page. */
  @media (max-width:699px) {
    .bar { position:sticky; z-index:5; left:auto; top:0; display:flex; align-items:center; gap:14px; padding:10px 16px 8px 23px; background:var(--paper); }
    .hub { position:relative; left:auto; top:auto; flex:none; width:36px; height:36px; box-shadow:none; }
    .hub-window { z-index:1; }
    /* The dial: the seven arcs as a ring that turns as you scroll. */
    .hub::before { content:""; position:absolute; inset:-8px; border-radius:50%; background:conic-gradient(from calc(90deg + var(--turn,0deg)),var(--dial,var(--rule) 0 360deg)); -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 5.5px),#000 calc(100% - 5px)); mask:radial-gradient(closest-side,transparent calc(100% - 5.5px),#000 calc(100% - 5px)); }
    h1 { font-size:30px; }
    .masthead { position:static; flex-wrap:wrap; gap:0 18px; padding:2px 16px 4px; }
    .finder { flex:1 1 170px; }
    .finder input { width:100%; }
    .wheel,.ring { display:none; }
    .index { position:static; display:flex; flex-wrap:wrap; gap:0 4px; margin:0 0 6px 14px; }
    .index button { gap:6px; min-height:44px; padding-right:8px; font-size:14px; }
    .lens { width:auto; margin-right:12px; padding-block:10px 40vh; }
    .line > .stops > .stop > .row.is-now > .stop-card { box-shadow:none; }
    .line > .stops > .stop.is-open > .row.is-now > .stop-card,#results-stops > .stop > .row.is-now > .stop-card { box-shadow:var(--slip-shadow); }
    .line-head.is-now .bullet { background:var(--paper); }
    .line-head.is-now .bullet::after { background:var(--ink); }
    .branch .row.is-now .stop-name { text-decoration:none; }
    .line-name { font-size:21px; }
    .stop-title { font-size:16px; }
    .line > .stops > .stop > .row > .stop-card > .stop-link { padding-left:14px; }
    #results-stops > .stop > .row > .stop-card > .stop-link { gap:10px; min-height:72px; }
    #results-stops > .stop > .row > .stop-card > .stop-link > .stop-art { width:76px; min-height:72px; }
    #results-stops > .stop > .row > .stop-card > .stop-link .stop-name { font-size:16px; }
    #results-stops > .stop > .row > .stop-card > .stop-link > .stop-text { padding:8px 10px 8px 0; }
    #results-stops > .has-branch > .row > .stop-card > .stop-link > .stop-text { padding-right:82px; }
    .stop-more { right:2px; }
    .branch { margin-left:34px; }
    .colophon { position:static; width:auto; padding:0 16px 32px; }
    .profile-links ul { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-16px; }
    .profile-links ul::-webkit-scrollbar { display:none; }
    .profile-links li { flex:none; }
    .profile-links a { display:flex; align-items:center; min-height:44px; }
    .profile-links img { height:20px; }
    .board-styles a { min-height:44px; }
  }
  @media (forced-colors:active) {
    .row::before,.bullet,.stop-art,.wheel button::before { forced-color-adjust:none; }
  }
}