@charset "UTF-8";
/* ==========================================================================
   BUILT & LAUNCHED — The Workbench
   Loaded by /workbench.php, and by /index.php for the panel on the landing
   page, in the manner of dock.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 page that looked
   like a different website would be a different website.

   MOBILE FIRST, AND MEANT IT. This is the page most likely to be read standing
   in a workshop with a phone in one hand, so the phone layout is the plain one
   and every breakpoint below is min-width. On a narrow screen a card is a
   photograph with words under it, edge to edge inside the gutter; the wider
   layouts only add restraint — a measure the column will not exceed, and a
   little more air between updates.

   NOTHING HERE SCROLLS SIDEWAYS. Every long string that could push a card wider
   than its column — a place name, a builder's handle, a design nobody
   hyphenates — is given `min-width: 0` and a wrapping rule. See the note on
   .wb-card__facts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The head, and the lanes
   -------------------------------------------------------------------------- */

.wb-head .lede { margin-bottom: 0; }

/* The lane row. Horizontally scrollable ON ITS OWN at narrow widths rather
   than wrapping to three lines — the controls are a single band you swipe, and
   the band is the only thing that moves. The page itself never scrolls
   sideways; `overflow-x` here is contained by the nav's own box. */
.wb-lanes {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.wb-lanes__link {
  flex: 0 0 auto;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--brass-hairline);
  border-radius: var(--radius);
  background: var(--cream);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.2;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
}

.wb-lanes__link:hover,
.wb-lanes__link:focus-visible {
  border-color: var(--brass);
  background: var(--brass-soft);
}

.wb-lanes__link.is-current {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--ivory);
}

.wb-lanes__blurb {
  margin: 0 0 var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--gray-text);
}

/* --------------------------------------------------------------------------
   The column
   -------------------------------------------------------------------------- */

/* THE MEASURE IS THE POINT. A feed card is mostly a photograph and a sentence,
   and a sentence set 76rem wide is unreadable. The column is held to the same
   measure the registry's prose uses and centred in the container, so the page
   reads as one column of work rather than a grid trying to fill a desktop. */
.wb-feed {
  display: grid;
  gap: var(--space-6);
  max-width: 46rem;
  margin-inline: auto;
}

@media (min-width: 48em) {
  .wb-feed { gap: var(--space-7); }
}

/* --------------------------------------------------------------------------
   One update
   -------------------------------------------------------------------------- */

.wb-card {
  /* min-width: 0 on a grid item, for the reason dock.css gives at length: a
     grid track's default `auto` refuses to shrink below its contents'
     min-content width, and one unbroken place name in the byline would make
     the card wider than the phone it is being read on. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--brass-hairline);
}

/* The last update in a run does not need a rule under it — the section's own
   padding is the end of the column. */
.wb-card:last-child { border-bottom: 0; padding-bottom: 0; }

.wb-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The kind of update, and the stage it leaves her at. */
.wb-card__kind {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.wb-card__tag { color: var(--gray-text); }
.wb-card__tag--brass { color: var(--brass-text); }
.wb-card__tag--navy  { color: var(--navy); }
.wb-card__tag--wood  { color: var(--wood); }

.wb-card__stage {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-text);
}

/* Attached to the FRONT of the stage with ::before, not printed between the
   two as a sibling — the reason includes/dock-cards.php gives for its byline:
   a separator that can break to a new line strands a lone middle dot at the
   end of the one above it. */
.wb-card__stage::before {
  content: "· ";
  color: var(--brass);
}

/* THE BOAT LEADS. Her name in the serif at the size of a section heading, and
   the design she was built to beside it in the sans — the shape of the line
   from the brief, KATE — Candu E-Z, with the em dash drawn rather than typed
   so it is never read aloud as part of a name. */
.wb-card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.wb-card__title a { color: inherit; text-decoration: none; }
.wb-card__title a:hover,
.wb-card__title a:focus-visible { color: var(--brass-text); text-decoration: underline; }

.wb-card__design {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--gray-text);
  white-space: nowrap;
}

.wb-card__design::before {
  content: "— ";
  white-space: normal;
}

@media (min-width: 40em) {
  .wb-card__title { font-size: 1.75rem; }
}

/* The builder, and where she lies. */
.wb-card__byline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--gray-text);
}

.wb-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border: 1px solid var(--brass-hairline);
  border-radius: 50%;
  background: var(--ivory);
}

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

.wb-avatar__initials {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
}

/* THE FACTS WRAP AND NEVER PUSH. min-width: 0 lets the flex item shrink below
   its content; overflow-wrap breaks the one word that would still overflow —
   a hyphenless place name on a 320px screen. */
.wb-card__facts {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  overflow-wrap: anywhere;
}

.wb-card__facts a { color: var(--navy); text-decoration: none; }
.wb-card__facts a:hover,
.wb-card__facts a:focus-visible { text-decoration: underline; }

/* The separator on the FRONT of each fact, as above. */
.wb-card__fact::before {
  content: "· ";
  color: var(--brass);
}

/* --------------------------------------------------------------------------
   What they said
   -------------------------------------------------------------------------- */

.wb-card__update {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.wb-card__update a { color: inherit; text-decoration: none; }
.wb-card__update a:hover,
.wb-card__update a:focus-visible { text-decoration: underline; }

.wb-card__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   The photograph
   -------------------------------------------------------------------------- */

/* LARGE ON A PHONE, which is the whole reason this page is laid out in one
   column. The frame keeps a 3:2 window so a column of updates does not jump
   about as portrait and landscape pictures load, and `object-fit: cover`
   fills it without distorting anybody's boat. */
.wb-card__frame {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--brass-hairline);
  border-radius: var(--radius);
  background: var(--ivory);
}

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

.wb-card__frame:hover img { transform: scale(1.02); }

/* NO PHOTOGRAPH IS A PLATE, NOT A GAP. The registry's own navy ground with the
   seal held faintly in the middle of it — the same treatment the head of a
   vessel's page uses when her builder has not uploaded a picture yet. */
.wb-card__frame--plate {
  display: grid;
  place-items: center;
  border-color: var(--navy-hairline);
  background: radial-gradient(ellipse at 50% 30%, var(--navy-secondary) 0%, var(--navy) 66%);
}

.wb-card__seal {
  width: min(9rem, 34%);
  height: auto;
  opacity: 0.16;
  filter: grayscale(1) brightness(1.6);
}

.wb-card__frame--plate:hover img { transform: none; }

/* --------------------------------------------------------------------------
   The foot: when, how many, and the way in
   -------------------------------------------------------------------------- */

.wb-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--gray-text);
}

.wb-card__time { flex: 0 0 auto; }

.wb-card__counts {
  display: flex;
  gap: var(--space-3);
  margin: 0;
}

.wb-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.wb-count__mark {
  font-size: 0.9em;
  line-height: 1;
  color: var(--brass);
}

/* Pushed to the end of the row on a wide enough foot, and simply next in line
   when the row has wrapped. */
.wb-card__link {
  margin-inline-start: auto;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

.wb-card__link:hover,
.wb-card__link:focus-visible { color: var(--brass-text); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Pagination, and the end of the column
   -------------------------------------------------------------------------- */

.wb-more,
.wb-back,
.wb-end {
  max-width: 46rem;
  margin: var(--space-7) auto 0;
  text-align: center;
}

.wb-end {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--gray-text);
}

.wb-back {
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   The panel on the landing page
   -------------------------------------------------------------------------- */

/* Two up on a phone is too tight for a photograph to say anything, so it is one
   column until 40em, two from there, and three on a desktop. Six tiles divide
   evenly into all three. */
.wb-panel {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .wb-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .wb-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wb-tile { min-width: 0; }

.wb-tile__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.wb-tile__frame {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--brass-hairline);
  border-radius: var(--radius);
  background: var(--ivory);
}

.wb-tile__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-lift);
}

.wb-tile__link:hover .wb-tile__frame img,
.wb-tile__link:focus-visible .wb-tile__frame img { transform: scale(1.03); }

.wb-tile__frame--plate {
  display: grid;
  place-items: center;
  border-color: var(--navy-hairline);
  background: radial-gradient(ellipse at 50% 30%, var(--navy-secondary) 0%, var(--navy) 66%);
}

.wb-tile__link:hover .wb-tile__frame--plate img { transform: none; }

.wb-tile__seal {
  width: min(6rem, 32%);
  height: auto;
  opacity: 0.16;
  filter: grayscale(1) brightness(1.6);
}

.wb-tile__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.wb-tile__name {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.wb-tile__link:hover .wb-tile__name,
.wb-tile__link:focus-visible .wb-tile__name { color: var(--brass-text); }

.wb-tile__design,
.wb-tile__time {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gray-text);
}

.wb-tile__line {
  margin-top: 0.15rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.wb-tile__time { margin-top: 0.2rem; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wb-card__frame img,
  .wb-tile__frame img,
  .wb-lanes__link { transition: none; }

  .wb-card__frame:hover img,
  .wb-tile__link:hover .wb-tile__frame img,
  .wb-tile__link:focus-visible .wb-tile__frame img { transform: none; }
}