/*
 * The Shortlist — the public link-in-bio page at /links.
 *
 * B0 "Editorial Ink", in the INK colourway, which is now the brand's only
 * colourway. Ported from the locked screens next door —
 * videothing-pipeline/out/screens/end-8.html and opening-6.html, and the
 * `ground: 'ink'` branch of the screens.js they share. The five values below
 * are that file's SL and SL_INV verbatim, under names that say what each one
 * does here rather than which end of the press it came from.
 *
 * What the locked screens decided, and what this file therefore does:
 *
 *   Ground is ink #17181A, never pure black. Type, hairlines and the corner
 *   device all reverse out of it in paper. The two greys are the paper side of
 *   the same two greys — rgba(255,255,255,0.66) for anything said quietly,
 *   0.34 for a hairline — so the system still has exactly two, read from the
 *   other end.
 *
 *   The riso is untouched. End 8: "#FF7044 against #17181A is the only warm
 *   thing on the frame and it has nothing to compete with, where on white it
 *   sits next to black type that outguns it. The handle underline is the most
 *   confident mark on this card." It stays the one accent, used once.
 *
 *   The corner device comes back. On paper the marks made the sheet look like
 *   it swelled past its own corner; reversed they do not, and on ink they are
 *   load-bearing rather than decorative — they are what declares the sheet's
 *   extents when the ground behind it is the same ink.
 *
 *   Cormorant 300 optically thins when reversed, so every 300 on this page is
 *   a 400. The variable binary carries the axis, so this costs nothing. For
 *   the same reason there is no -webkit-font-smoothing: antialiased here —
 *   greyscale AA subtracts weight from reversed type, which is the very thing
 *   the weight bump exists to put back.
 *
 * There is no light mode and no prefers-color-scheme split. The brand has one
 * look now; a bio page is a brand surface, not a reading app.
 *
 * Everything is namespaced (.bio-*, --sl-*) and nothing is declared on :root,
 * because Propshaft's `stylesheet_link_tag :app` bundles every file in this
 * directory into every page of the app — the board's own --ink and --paper
 * must survive this file being loaded next to them.
 *
 * Mobile first, because it is opened by a thumb from a profile page.
 */

@font-face {
  font-family: "Shortlist Cormorant";
  font-style: normal;
  font-weight: 300 700;
  font-display: block; /* A fallback masthead is a wrong masthead, not a slow one. */
  src: url("/fonts/shortlist-cormorant-var.woff2") format("woff2-variations"),
       url("/fonts/shortlist-cormorant-var.woff2") format("woff2");
}

@font-face {
  font-family: "Shortlist Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("/fonts/shortlist-inter-var.woff2") format("woff2-variations"),
       url("/fonts/shortlist-inter-var.woff2") format("woff2");
}

/* ── The colourway, and only these values ── */
.bio-body {
  /* SL.ink — the ground the whole page is printed on. Never #000. */
  --sl-ground: #17181A;
  /* SL.paper — everything said, every hairline, every corner mark. */
  --sl-type: #FFFFFF;
  /* SL_INV.soft — the paper-side of inkSoft. Areas, deks, the find-us row. */
  --sl-soft: rgba(255, 255, 255, 0.66);
  /* SL_INV.rule — the paper-side of rule. One hairline weight, no exceptions. */
  --sl-rule: rgba(255, 255, 255, 0.34);
  /* SL.riso — unchanged by the inversion, and stronger for it. Used once. */
  --sl-riso: #FF7044;

  --sl-serif: "Shortlist Cormorant", "Iowan Old Style", Georgia, serif;
  --sl-sans: "Shortlist Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;

  margin: 0;
  background: var(--sl-ground);
  color: var(--sl-type);
  font-family: var(--sl-sans);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-text-size-adjust: 100%;
}

.bio-body *,
.bio-body *::before,
.bio-body *::after { box-sizing: border-box; }

.bio-body img { display: block; max-width: 100%; }

/* ── The sheet ──
   Ink on ink: the sheet is the same material as the page behind it, exactly as
   the locked end card is the same ink as the plate above it. What separates
   them is the corner device and nothing else, which is the finding rather than
   an oversight — an edge that is sometimes there and sometimes not is worse
   than no edge plus four marks that are always there. */
.bio-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 0;
}

.bio-sheet {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--sl-ground);
  padding: 34px 22px 30px;
  padding-bottom: max(30px, env(safe-area-inset-bottom));
  /* The wordmark is sized off the sheet rather than off the window: it has to
     hold one line at every width, and above 560px the window stops being the
     thing that constrains it. */
  container-type: inline-size;
}

@media (min-width: 600px) {
  .bio-page { padding: 40px 20px; }
  .bio-sheet { padding: 52px 46px 44px; }
}

/* Crop marks: the signature device, drawn in paper because the ground is ink.
   Four corner brackets in the single hairline weight — a second weight
   anywhere would end the system. */
.bio-crop { position: absolute; inset: 0; pointer-events: none; }
.bio-crop::before,
.bio-crop::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 0 solid var(--sl-type);
}
.bio-crop::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.bio-crop::after { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }

/* The other two corners. Split across a second element for the same reason the
   reference page splits them: one element can only carry two pseudos. */
.bio-sheet::before,
.bio-sheet::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 0 solid var(--sl-type);
  pointer-events: none;
}
.bio-sheet::before { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.bio-sheet::after { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.bio-hair {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--sl-rule);
}

/* ── Masthead ── */
.bio-masthead { text-align: center; }

.bio-wordmark {
  font-family: var(--sl-serif);
  /* 400, not the paper colourway's 300. End 8's one complaint: "Cormorant 300
     reversed out of ink optically thins… the brand is quieter on the colourway
     that was supposed to make it more dramatic." */
  font-weight: 400;
  text-transform: uppercase;
  /* Held to one line at every width. The cap is what "THE SHORTLIST" tracked
     at 0.13em fits inside the 560px sheet's measure, not a round number. */
  font-size: clamp(24px, 9.4cqi, 46px);
  letter-spacing: 0.13em;
  line-height: 1.14;
  /* The tracking pushes the last letter off centre; the indent puts it back. */
  text-indent: 0.13em;
  margin: 12px 0 11px;
  padding: 0.06em 0;
  color: var(--sl-type);
}

.bio-dek {
  margin: 16px auto 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sl-soft);
  text-wrap: balance;
}

/* ── The list ── */
.bio-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid var(--sl-rule);
}

.bio-entry { border-bottom: 1px solid var(--sl-rule); }
/* The foot's own rule closes the list, so the last entry does not draw a
   second one two millimetres above it. */
.bio-entry:last-child { border-bottom: 0; }

.bio-entry-link {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 2px;
  text-decoration: none;
  color: inherit;
  /* The whole row is the target: a thumb aiming at the title should not be
     able to miss it by four pixels. */
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .bio-entry-link:hover .bio-entry-title { text-decoration: underline; text-underline-offset: 3px; }
  .bio-entry-link:hover .bio-arrow { transform: translateX(3px); }
}

.bio-entry-link:focus-visible {
  outline: 1px solid var(--sl-type);
  outline-offset: 3px;
}

/* ── Thumbnail plate ──
   A photograph is its own edge, so it gets no mark. A house with no
   photograph gets the hairline instead, in the one rule weight — the plate
   still has to be there or the column loses its rhythm. */
.bio-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bio-thumb img { width: 100%; height: 100%; object-fit: cover; }

.bio-thumb:has(.bio-thumb-blank) { box-shadow: inset 0 0 0 1px var(--sl-rule); }

.bio-thumb-blank {
  font-family: var(--sl-serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  color: var(--sl-soft);
}

@media (min-width: 600px) {
  .bio-thumb { width: 92px; height: 92px; }
}

/* ── Entry text ── */
.bio-entry-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 1px;
}

.bio-entry-title {
  font-family: var(--sl-serif);
  font-weight: 400;
  font-size: clamp(21px, 5.6vw, 26px);
  line-height: 1.16;
  letter-spacing: -0.008em;
  color: var(--sl-type);
}

.bio-entry-area {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--sl-soft);
}

/* Plain inline text rather than a flex row, so that when a long agency name
   wraps the arrow wraps with it and stays beside the last word instead of
   being flung to the far edge of the entry. */
.bio-entry-cta {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--sl-type);
}

.bio-arrow {
  display: inline-block;
  margin-left: 7px;
  letter-spacing: 0;
  transition: transform 120ms ease-out;
}

.is-unlinked { cursor: default; }

/* ── Empty state ── */
.bio-empty {
  /* Opened by the list's rule and closed by the foot's, exactly as a run of
     entries would be — an empty page is the same page with nothing in it. */
  margin: 30px 0 0;
  padding: 56px 0 48px;
  border-top: 1px solid var(--sl-rule);
  text-align: center;
}

.bio-empty-line {
  margin: 0;
  font-family: var(--sl-serif);
  font-weight: 400;
  font-size: clamp(26px, 7vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.bio-empty-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--sl-soft);
}

/* ── Foot ── */
.bio-foot { margin-top: 34px; text-align: center; }

.bio-handle {
  display: inline-block;
  margin: 20px 0 0;
  font-family: var(--sl-serif);
  /* Already above the 400 floor the reversal asks for, and the locked end
     card sets the handle at 500. Left alone. */
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.02em;
  /* The system's one riso mark, and on ink the most confident mark on the
     sheet. Nothing else on this page may use it. */
  border-bottom: 2px solid var(--sl-riso);
  padding-bottom: 5px;
}

/* ── Find us ──
   The same tracked caps an entry's "View at" line is set in, one step quieter
   in colour, sitting under the handle. Separated by a hairline in the system's
   single rule weight, because the middot is retired. */
.bio-channels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}

.bio-channel {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sl-soft);
  text-decoration: none;
  /* Padded out to a thumb-sized target without printing any larger. */
  padding: 8px 2px;
}

.bio-channel-rule {
  width: 1px;
  height: 11px;
  background: var(--sl-rule);
  flex: none;
}

@media (hover: hover) {
  .bio-channel:hover { color: var(--sl-type); }
}

.bio-channel:focus-visible {
  outline: 1px solid var(--sl-type);
  outline-offset: 3px;
}