@charset "UTF-8";
/* ==========================================================================
   BUILT & LAUNCHED — The Dock
   Loaded only by /dock.php, in the manner of vessel-likes.css and
   launch-anniversaries.css.

   IT INTRODUCES NO COLOUR AND NO TYPEFACE. Every value below is a token from
   section 01 of site.css — the same navy, the same brass, the same Cormorant
   and Inter, the same 2px radius and the same two shadows. A notice board that
   looked like a different website would be a different website.

   Mobile-first, like the rest of the sheet: every breakpoint is min-width, and
   the two-column layout only exists from 64em. Below that the feed is the page
   and the standing notices follow it, which is the right reading order — you
   came for the activity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The head of the board
   -------------------------------------------------------------------------- */

.dock-pulse {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-7);
  margin: var(--space-6) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--brass-hairline);
}

.dock-pulse__item { margin: 0; }

.dock-pulse dt {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--navy);
}

.dock-pulse dd {
  margin: 0.15rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-text);
}

/* --------------------------------------------------------------------------
   The two columns
   -------------------------------------------------------------------------- */

.dock-layout {
  display: grid;
  gap: var(--space-7);

  /* minmax(0, 1fr) AND NOT THE DEFAULT, which is the whole reason this line
     exists. A grid column's default size is `auto`, and `auto` refuses to
     shrink below its contents' min-content width — so one long unbroken
     placename in a card's byline made the column 409px wide inside a 390px
     phone, and every card, the filters and the masthead with them scrolled
     sideways. The 0 minimum is what lets the column be narrower than its
     contents and hand the wrapping back to the text. */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64em) {
  .dock-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--space-7) var(--space-8);
    align-items: start;
  }

  /* THE STANDING NOTICES ARE NOT STICKY, and were until it was tried with
     eight modules in them.

     A sticky column has to be told what to do when it is taller than the
     viewport, and both answers are bad: let it overflow and its last two
     modules are unreachable, or give it its own scrollbar and the page has two
     scrollbars that mean different things — one of which the reader did not
     ask for and cannot see the end of. Scrolling with the page is the honest
     behaviour for a column of eight standing notices, and it costs nothing:
     somebody who wants them scrolls, and somebody who does not never meets
     them. */
  .dock-side { align-self: start; }
}

/* --------------------------------------------------------------------------
   The filters

   Links, not buttons — they navigate, they are bookmarkable, and a screen
   reader announces them as the destinations they are. The current one carries
   aria-current in the markup as well as the underline here, so the state is
   never carried by colour alone.

   THE TWO ROWS ARE DRAWN DIFFERENTLY ON PURPOSE. They narrow different things —
   what happened, and which boats it happened to — and when both were set in the
   same uppercase sans on the same baseline, they read as one list of ten
   categories that happened to wrap. WHAT HAPPENED keeps the underlined tabs,
   because it is the primary reading of the board; WHICH BOATS is set in pills,
   because a bounded shape is read as a state something is in rather than as
   another heading. Each row also carries its question in the margin, which is
   the part that actually does the work; the shapes only stop the eye from
   undoing it.
   -------------------------------------------------------------------------- */

.dock-filters {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--brass-hairline);
}

/* The question, in the margin. Deliberately quieter than the answers: it is
   read once, on the first visit, and then never needs to be read again. */
.dock-filters__legend {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--brass-text);
}

.dock-filters__group + .dock-filters__group {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--navy-hairline);
}

/* From two columns' width there is room to set the question beside its row
   rather than above it, which reads as the sentence it is and gives back the
   two lines the legends cost. */
@media (min-width: 48em) {
  .dock-filters__group {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
  }

  .dock-filters__legend { margin-bottom: 0; }
}

.dock-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dock-filters__row--scope { gap: var(--space-2); }

.dock-filters__link {
  display: inline-block;
  padding: 0.35rem 0;
  font-family: var(--font-sans);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.dock-filters__link:hover,
.dock-filters__link:focus-visible {
  color: var(--navy);
  border-bottom-color: var(--brass);
}

.dock-filters__link.is-current {
  color: var(--navy);
  border-bottom-color: var(--brass);
}

/* The current filter is also marked in a way that does not depend on colour or
   on a 2px rule: a small mark before the word. */
.dock-filters__link.is-current::before {
  content: "\2014\00a0";     /* an em dash and a space */
  color: var(--brass-text);
}

/* WHICH BOATS, in pills. Same type, same tokens, a different shape — and the
   shape is the whole point: it says these are not more categories. The border
   replaces the underline, so the current one is still marked by something other
   than colour, and the em dash below keeps working for anybody who sees neither.
   Borrowed, deliberately, from .fleet-quick-types__link — the fleet's filter
   chips already look like this and a reader should not have to learn a second
   vocabulary between two pages of the same registry. */
.dock-filters__link--scope {
  padding: 0.4rem 0.8rem;
  /* The shorthand, deliberately: it takes back the 2px transparent underline
     the tabs carry, which would otherwise sit under one edge of the pill. */
  border: 1px solid var(--navy-hairline);
  border-radius: 99rem;
  transition: color var(--transition), background-color var(--transition),
              border-color var(--transition);
}

.dock-filters__link--scope:hover,
.dock-filters__link--scope:focus-visible {
  color: var(--navy);
  border-color: var(--brass);
  background: var(--brass-soft);
}

.dock-filters__link--scope.is-current {
  color: var(--cream);
  background: var(--navy);
  border-color: var(--navy);
}

/* The mark that does not depend on colour, kept legible on the dark pill. */
.dock-filters__link--scope.is-current::before { color: var(--brass); }

/* --------------------------------------------------------------------------
   The pinned band
   -------------------------------------------------------------------------- */

.dock-pinned {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5) var(--space-2);
  background: var(--cream);
  border: 1px solid var(--brass-hairline);
  border-radius: var(--radius-lg);
}

.dock-pinned__title { display: block; margin-bottom: var(--space-3); }

.dock-pinned .dock-card { border-bottom-color: var(--brass-hairline); }
.dock-pinned .dock-card:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   The card

   A NOTICE PINNED TO A BOARD, and the styling is trying to say exactly that:
   a hairline between one notice and the next rather than a stack of floating
   panels, generous room around the words, and the photograph small and to one
   side so the sentence leads. A column of shadowed cards is what every social
   feed on the internet looks like, and this is not one.
   -------------------------------------------------------------------------- */

.dock-feed { margin: 0; }

.dock-card {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--navy-hairline);
}

.dock-card:first-child { padding-top: 0; }

@media (min-width: 40em) {
  .dock-card { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-5); }
}

@media (min-width: 64em) {
  .dock-card { grid-template-columns: 11rem minmax(0, 1fr); }
}

/* A card with no photograph gives the whole width to its words rather than
   leaving a hole where a picture would have been. */
.dock-card:not(:has(.dock-card__frame)) { grid-template-columns: minmax(0, 1fr); }

.dock-card__frame {
  display: block;
  overflow: hidden;
  background: var(--ivory);
  border: 1px solid var(--brass-hairline);
  border-radius: var(--radius);
  aspect-ratio: 3 / 2;
}

.dock-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-lift);
}

.dock-card__frame:hover img,
.dock-card__frame:focus-visible img { transform: scale(1.03); }

.dock-card__body { min-width: 0; }

.dock-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
}

.dock-card__type { color: var(--gray-text); }
.dock-card__type--brass { color: var(--brass-text); }
.dock-card__type--navy  { color: var(--navy); }
.dock-card__type--wood  { color: var(--wood); }
.dock-card__type--quiet { color: var(--gray-text); }

.dock-card__time {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--gray-text);
}

.dock-card__flag {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-text);
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--navy-hairline);
  border-radius: var(--radius);
}

.dock-card__flag--brass {
  color: var(--brass-text);
  border-color: var(--brass-hairline);
  background: var(--brass-soft);
}

.dock-card__heading {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--navy);
}

@media (min-width: 40em) {
  .dock-card__heading { font-size: 1.5rem; }
}

.dock-card__heading a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.dock-card__heading a:hover,
.dock-card__heading a:focus-visible { border-bottom-color: var(--brass); }

.dock-card__text {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-base);
  line-height: 1.65;
}

/* The registry writing about somebody's boat. Set apart and attributed, so it
   can never be mistaken for something the builder wrote. */
.dock-card__editorial {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--brass);
  background: var(--brass-soft);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
}

.dock-card__editorial .label {
  display: block;
  margin-bottom: 0.2rem;
  font-style: normal;
}

.dock-card__byline {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--gray-text);
}

/* The facts run as ordinary inline text rather than as flex items, so the
   browser wraps them where the words allow. min-width: 0 is what lets this
   shrink inside the flex row beside the avatar. */
.dock-card__facts { min-width: 0; }

/* The separator, attached to the front of each fact. See the note in
   dock_card_render(): as a sibling element it stranded itself at the end of a
   wrapped line. */
.dock-card__fact::before {
  content: "\00b7";
  margin: 0 0.4rem;
  color: var(--brass);
}

.dock-card__byline a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-hairline);
}

.dock-card__byline a:hover,
.dock-card__byline a:focus-visible { border-bottom-color: var(--brass); }

/* The separator belongs to the line, not to the link, so it must not pick up
   the link's underline. */
.dock-card__fact::before { border-bottom: 0; }

.dock-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: 0;
}

.dock-card__link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--brass-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.dock-card__link:hover,
.dock-card__link:focus-visible { border-bottom-color: var(--brass); }

/* Registry news reads as the registry speaking, so it sits on the cream
   surface the rest of the site uses for the registry's own writing. */
.dock-card--news {
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--cream);
  border: 1px solid var(--brass-hairline);
  border-bottom-color: var(--brass-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.dock-card--featured { background: var(--cream); }

/* One card, opened from a shared link. */
.dock-single {
  padding: var(--space-5);
  background: var(--cream);
  border: 1px solid var(--brass-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.dock-single .dock-card { border-bottom: 0; padding-bottom: 0; }

.dock-single__back {
  margin: var(--space-4) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   The avatar

   A photograph where a member has one, their initials where they have not.
   The initials are drawn from a name that is already on the card, so the
   fallback discloses nothing the card was not showing anyway.
   -------------------------------------------------------------------------- */

.dock-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--navy);
  border: 1px solid var(--brass-hairline);
}

.dock-avatar img { width: 100%; height: 100%; object-fit: cover; }

.dock-avatar__initials {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--ivory);
}

.dock-avatar--mini { width: 2.25rem; height: 2.25rem; }
.dock-avatar--mini .dock-avatar__initials { font-size: var(--text-xs); }

/* --------------------------------------------------------------------------
   Load more
   -------------------------------------------------------------------------- */

.dock-more {
  margin: var(--space-6) 0 0;
  text-align: center;
}

.dock-more[hidden] { display: none; }

.dock-more__status {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--gray-text);
}

/* --------------------------------------------------------------------------
   The standing notices
   -------------------------------------------------------------------------- */

.dock-module + .dock-module {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--brass-hairline);
}

.dock-module__title {
  margin: 0 0 0.25rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--navy);
}

.dock-module__blurb {
  margin: 0 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--gray-text);
}

.dock-module__more,
.dock-module__action { margin: var(--space-4) 0 0; }

.dock-module__more a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--brass-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.dock-module__more a:hover,
.dock-module__more a:focus-visible { border-bottom-color: var(--brass); }

.dock-mini-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dock-mini + .dock-mini { margin-top: var(--space-3); }

.dock-mini__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.dock-mini__frame {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 2.25rem;
  overflow: hidden;
  background: var(--ivory);
  border: 1px solid var(--brass-hairline);
  border-radius: var(--radius);
}

.dock-mini__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

.dock-mini__frame--empty {
  background: linear-gradient(135deg, var(--ivory), var(--cream));
}

.dock-mini__text { min-width: 0; }

.dock-mini__name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--navy);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.dock-mini__link:hover .dock-mini__name,
.dock-mini__link:focus-visible .dock-mini__name { border-bottom-color: var(--brass); }

.dock-mini__note {
  display: block;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--gray-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dock-tally {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.dock-tally dt {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  color: var(--navy);
}

.dock-tally dd {
  margin: 0.1rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--gray-text);
}

/* --------------------------------------------------------------------------
   The administrator's screens
   -------------------------------------------------------------------------- */

.dock-admin-row__key {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--gray-text);
  word-break: break-all;
}

.dock-admin-row__state {
  display: inline-block;
  margin-right: 0.35rem;
  font-family: var(--font-sans);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.dock-admin-row__state--hidden   { color: var(--wood); }
.dock-admin-row__state--pinned   { color: var(--brass-text); }
.dock-admin-row__state--featured { color: var(--brass-text); }
.dock-admin-row__state--gone     { color: var(--wood); }

.dock-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.dock-admin-actions form { display: inline; margin: 0; }

/* The fields that would otherwise make every row three inches tall. See the
   note in /admin/dock.php. */
.dock-admin-more { margin-top: 0.35rem; }

.dock-admin-more > summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--gray-text);
}

.dock-admin-more > summary:hover { color: var(--navy); }

.dock-admin-more__form {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0 0;
  border-top: 1px dashed var(--navy-hairline);
  min-width: 14rem;
}

.dock-admin-more__form .input { margin-bottom: 0.35rem; }
.dock-admin-more__form .field__label { display: block; margin-bottom: 0.2rem; }

.dock-backfill {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
}

/* --------------------------------------------------------------------------
   Motion, print and forced colours
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .dock-card__frame img,
  .dock-card__heading a,
  .dock-filters__link { transition: none; }
  .dock-card__frame:hover img { transform: none; }
}

@media print {
  .dock-filters,
  .dock-more,
  .dock-side { display: none; }
  .dock-card { break-inside: avoid; border-bottom: 1px solid #999; }
}

@media (forced-colors: active) {
  .dock-card,
  .dock-card__frame,
  .dock-pinned,
  .dock-card--news { border-color: CanvasText; }
  .dock-filters__link.is-current { border-bottom-color: Highlight; }

  /* A forced palette throws the navy fill away, so the current pill would be
     marked by nothing but the em dash. Give it the border back. */
  .dock-filters__link--scope { border-color: CanvasText; }
  .dock-filters__link--scope.is-current { border-color: Highlight; border-width: 2px; }
}

/* --------------------------------------------------------------------------
   2026 Dock navigation refinement
   -------------------------------------------------------------------------- */

.dock-head { padding-bottom: var(--space-5); }
.dock-head + .section { padding-top: var(--space-5); }

.dock-filters {
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid var(--brass-hairline);
  border-top: 3px solid var(--brass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.dock-filters__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}

.dock-filters__title {
  margin: 0 0 0.15rem;
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--navy);
}

.dock-filters__hint {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--gray-text);
}

.dock-filters__clear {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brass-text);
  text-decoration: none;
}

.dock-filters__clear::before {
  content: "\00d7";
  margin-right: 0.35rem;
  font-size: 1.2em;
  line-height: 1;
}

.dock-filters__clear:hover,
.dock-filters__clear:focus-visible { text-decoration: underline; }

.dock-filters__group + .dock-filters__group {
  border-top-style: solid;
}

.dock-filters__row {
  gap: var(--space-2);
}

.dock-filters__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.8rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--navy-hairline);
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition),
              border-color var(--transition), transform var(--transition);
}

.dock-filters__link:hover,
.dock-filters__link:focus-visible {
  color: var(--navy);
  border-color: var(--brass);
  background: var(--brass-soft);
  transform: translateY(-1px);
}

.dock-filters__link.is-current {
  color: var(--cream);
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: inset 3px 0 0 var(--brass);
}

.dock-filters__link.is-current::before {
  content: "\2713";
  margin-right: 0.4rem;
  color: var(--brass);
}

.dock-filters__link--scope {
  padding: 0.45rem 0.85rem;
}

.dock-filters__link--scope:hover,
.dock-filters__link--scope:focus-visible {
  transform: translateY(-1px);
}

.dock-card__link,
.dock-module__more a {
  display: inline-flex;
  align-items: center;
}

.dock-card__actions .dock-card__link::after,
.dock-module__more a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.35rem;
  transition: transform var(--transition);
}

.dock-card__actions .dock-card__link:hover::after,
.dock-card__actions .dock-card__link:focus-visible::after,
.dock-module__more a:hover::after,
.dock-module__more a:focus-visible::after {
  transform: translateX(0.2rem);
}

.dock-mini__link {
  margin-inline: -0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius);
  transition: background-color var(--transition), transform var(--transition);
}

.dock-mini__link:hover,
.dock-mini__link:focus-visible {
  background: var(--brass-soft);
  transform: translateX(0.15rem);
}

@media (min-width: 48em) {
  .dock-filters__group {
    grid-template-columns: 9.75rem minmax(0, 1fr);
  }
}

@media (max-width: 39.99em) {
  .dock-filters { padding: var(--space-4); }

  .dock-filters__hint {
    max-width: 30rem;
    line-height: 1.5;
  }

  .dock-filters__link {
    min-height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dock-filters__link,
  .dock-card__actions .dock-card__link::after,
  .dock-module__more a::after,
  .dock-mini__link {
    transition: none;
  }

  .dock-filters__link:hover,
  .dock-filters__link:focus-visible,
  .dock-mini__link:hover,
  .dock-mini__link:focus-visible {
    transform: none;
  }
}

@media (forced-colors: active) {
  .dock-filters { border-color: CanvasText; }
  .dock-filters__link.is-current {
    border-color: Highlight;
    box-shadow: none;
  }
}

/* The homepage uses the same notices without the Dock's sidebar. Two stable
   columns keep four updates scannable without turning them into nested cards. */
.home-dock__feed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-7);
}

@media (min-width: 64em) {
  .home-dock__feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-dock__feed .dock-card { grid-template-columns: 8rem minmax(0, 1fr); }
  .home-dock__feed .dock-card:nth-child(2) { padding-top: 0; }
}

.home-dock__feed .dock-card:nth-last-child(-n + 2) {
  border-bottom-color: var(--brass-hairline);
}