/* ============================================================================
 *  links.css — the title screen as the whole site, and its one overlay
 *  ---------------------------------------------------------------------------
 *  Patrick, 2026-10-01: lock the site on the title screen; a menu icon opens
 *  an overlay — clearly an overlay, in theme — with the businesses and every
 *  shop and account, over the title's moving background. A slightly
 *  see-through dark sheet (the night sea's palette, not white), no heading,
 *  a small ×. Loaded last.
 *
 *  Top half: six businesses' logos, two columns by three rows, each on a
 *  faint glass tile, every wordmark at one capital height; they rise in, one
 *  after another, as the overlay opens. Pirate Commerce, Forward Settle and
 *  Potential Energies are the logos from scripts/build-logos.ps1.
 *  Bottom half (he likes it as it is): the marketplaces' wordmarks, the
 *  accounts, contact, in three columns. One four-column grid holds both, so
 *  the accounts start exactly under the right-hand column of logos.
 *
 *  What used to scroll below the title is parked in _salvage/scroll-story.html.
 * ========================================================================== */

/* ---- locked to the title screen ------------------------------------------ */

html,
body {
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

html {
  scrollbar-gutter: auto !important;
}

/* ---- the button ------------------------------------------------------------
   The plain three-bar menu mark (fly.css draws it; ascii-logo.css turns it
   light in the storm). Its name for screen readers is "Shops & socials". On
   hover the middle bar draws in, just enough to say it can be pressed. */

.links-btn:hover .menu-btn__mark rect:nth-child(2),
.links-btn:focus-visible .menu-btn__mark rect:nth-child(2) {
  transform: scaleX(0.55);
}

/* While the overlay is open the sheet's own small × is the way out, so the
   button (fly.css would turn it into a big X) steps aside. Opacity only: it
   must stay focusable, because closing the dialog hands focus back to it
   before its "close" event marks it collapsed again. */
html .menu-btn.links-btn[aria-expanded="true"] {
  opacity: 0;
}

/* On a wide screen the icon keeps the title's own frame: its bars end on the
   same line as the stats (the title's --t-pad, clamp(22px, 6vw, 84px)), and
   its top sits as far down from the top as the topics and stats sit up from
   the bottom (3.15rem). The button is 40px with the 20 x 14 mark centred, so
   it stands 10px and 13px out from the mark. */
@media (min-width: 721px) {
  .menu-btn.links-btn,
  .links .links__close {
    top: calc(3.15rem - 13px);
    right: calc(clamp(22px, 6vw, 84px) - 10px);
  }
}

/* ---- the sheet -------------------------------------------------------------
   Dark glass: the storm's own ink, about two-thirds opaque and blurred, so
   the moving title still shows through faintly. */

.links {
  --l-ink: #eef1f3;
  --l-soft: #c3cbd2;
  --l-mute: #8d98a2;
  --l-rule-strong: rgb(238 241 243 / 0.18);
  --l-sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --l-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --l-ease: cubic-bezier(0.16, 1, 0.3, 1);

  width: min(100vw - 40px, 60rem);
  max-width: none;
  max-height: min(100svh - 40px, 56rem);
  margin: auto;
  padding: clamp(52px, 8vh, 76px) clamp(22px, 5vw, 64px) clamp(44px, 7vh, 64px);
  border: 1px solid var(--l-rule-strong);
  background: rgb(12 14 18 / 0.68);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    0 40px 90px -30px rgb(0 0 0 / 0.75);
  color: var(--l-ink);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(238 241 243 / 0.22) transparent;
}

.links::backdrop {
  background: rgb(6 8 10 / 0.5);
}

.links[open] {
  animation: links-in 380ms var(--l-ease);
}

.links[open]::backdrop {
  animation: links-fade 380ms ease;
}

@keyframes links-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
}

@keyframes links-fade {
  from {
    opacity: 0;
  }
}

@keyframes links-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* :where() keeps this reset weaker than the list classes below */
.links :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.links a,
.links button {
  -webkit-tap-highlight-color: transparent;
}

.links a:focus-visible,
.links button:focus-visible {
  outline: 1px solid var(--l-ink);
  outline-offset: 2px;
}

/* the way out: a small ×, top right */
.links__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--l-mute);
  cursor: pointer;
  transition: color 160ms ease;
}

.links__close::before,
.links__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.links__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.links__close:hover {
  color: var(--l-ink);
}

/* ---- one grid for both halves ------------------------------------------------
   Twelve columns: each logo tile spans six (two across), and under them the
   shop, social and contact tiles span four each (three across), all the same
   glass, so the sheet reads as one composed wall. */

.links__body {
  --gap: clamp(10px, 1.2vw, 14px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

/* ---- the businesses ----------------------------------------------------------
   Every logo is an image, sized so its wordmark's capitals are --cap tall.
   Tiles are all tall enough for the logos with a mark over the name (about
   five capital-heights), so the three rows stay even. */

.links__logos {
  --cap: clamp(14px, min(1.7vw, 2.4vh), 22px); /* every wordmark's capital height; short screens get a little less so nothing scrolls */
  --pad: 18px;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--gap);
}

.links__logos li {
  grid-column: span 6;
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(var(--cap) * 5 + 2 * var(--pad));
  padding: var(--pad) 20px;
  overflow: hidden;
  background: rgb(238 241 243 / 0.03);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.045);
  transition: background-color 260ms ease;
}

.links__logos li:hover {
  background: rgb(238 241 243 / 0.06);
}

/* a soft sheen crosses the tile on hover */
.links__logos li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / 0.07) 50%, transparent 68%);
  transform: translateX(-100%);
  pointer-events: none;
}

.links__logos li:hover::after {
  transform: translateX(100%);
  transition: transform 900ms var(--l-ease);
}

/* The real logo files: black wordmarks turned to the sheet's white, the
   collage turned black and white. */
.links__art {
  position: relative;
  display: block;
  width: min(100%, calc(var(--cap) * var(--r)));
}

.links__art img {
  display: block;
  width: 100%;
  height: auto;
  /* a hard dark edge just under each letter and a soft shadow beneath: the
     logos sit a little proud of the sheet, as if pressed into it */
  filter: invert(1) brightness(0.86) drop-shadow(0 1px 0 rgb(0 0 0 / 0.55)) drop-shadow(0 6px 14px rgb(0 0 0 / 0.5));
  transition: filter 200ms ease;
}

.links__logos li:hover .links__art img {
  filter: invert(1) brightness(0.98) drop-shadow(0 1px 0 rgb(0 0 0 / 0.55)) drop-shadow(0 6px 14px rgb(0 0 0 / 0.5));
}

/* the collage in black and white, pushed bright, so it sits with the white
   wordmarks around it (Patrick, 2026-10-02: "look more like the others")
   and keeps its cut-paper letters */
.links__art--color img {
  filter: grayscale(1) contrast(1.5) brightness(1.35);
}

.links__logos li:hover .links__art--color img {
  filter: grayscale(1) contrast(1.5) brightness(1.45);
}

/* opening: the tiles come up in turn */
.links[open] .links__logos li {
  animation: links-up 600ms var(--l-ease) both;
  animation-delay: calc(60ms + var(--i, 0) * 70ms);
}

/* ---- shops, accounts, contact ------------------------------------------------ */

.links__shops,
.links__social,
.links__contact {
  grid-column: span 4;
  display: grid;
  grid-template-rows: auto; /* the label */
  grid-auto-rows: 34px;
  align-items: center;
  justify-items: start;
  align-content: start;
  margin-top: calc(var(--gap) + clamp(8px, 1.6vh, 16px));
  padding: 16px 22px 14px;
  background: rgb(238 241 243 / 0.03);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.045);
}

/* a small label at the head of each tile; the "/ ''" keeps it out of what
   screen readers hear (the list's aria-label already names it) */
.links__shops::before,
.links__social::before,
.links__contact::before {
  content: attr(aria-label);
  content: attr(aria-label) / "";
  align-self: start;
  margin-bottom: 6px;
  color: var(--l-mute);
  font: 400 9.5px / 1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.links[open] .links__shops,
.links[open] .links__social,
.links[open] .links__contact,
.links[open] .links__about {
  animation: links-up 600ms var(--l-ease) both;
  animation-delay: calc(700ms + var(--i, 0) * 100ms);
}

/* The marketplaces' own wordmarks, as masks in the sheet's ink, sized by eye
   to sit at one weight. */
.links__shop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  color: var(--l-soft);
  transition: color 160ms ease;
}

.links__shop:hover {
  color: #fff;
}

/* An arrow after each marketplace, nudging up and out now and then, the
   three taking turns, so it reads as "these open my shops" (Patrick asked
   for motion that prompts it). It is a 3px nudge, so it runs under reduced
   motion too; on hover it slides out and stays. */
.links__go {
  flex: none;
  width: 8px;
  height: 8px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 13 13 3M5 3h8v8'/%3E%3C/svg%3E");
  opacity: 0.55;
  animation: links-nudge 7.5s ease-in-out infinite;
  transition: transform 200ms var(--l-ease), opacity 200ms ease;
}

.links__shops li:nth-child(2) .links__go {
  animation-delay: 2.5s;
}

.links__shops li:nth-child(3) .links__go {
  animation-delay: 5s;
}

.links__shop:hover .links__go,
.links__shop:focus-visible .links__go {
  animation: none;
  opacity: 1;
  transform: translate(3px, -3px);
}

@keyframes links-nudge {
  0%,
  34%,
  100% {
    opacity: 0.55;
    transform: none;
  }
  17% {
    opacity: 1;
    transform: translate(3px, -3px);
  }
}

.links__brand {
  display: block;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.links__brand--ebay {
  --icon: url("../public/shops/ebay.svg");
  width: 74px;   /* a third bigger (Patrick, 2026-10-02) */
  height: 29.7px;
}

.links__brand--depop {
  --icon: url("../public/shops/depop-word.svg");
  width: 97px;
  height: 25px;
}

/* in their own colours: eBay's four, Depop's red; Grailed's mark is black and white, so it stays light */
.links__brand--ebay {
  background: url("../public/shops/ebay.svg") center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}

.links__brand--depop {
  background: #ff2300;
}

.links__brand--grailed {
  --icon: url("../public/shops/grailed-word.svg");
  width: 98.5px;
  height: 17.5px;
}

/* the accounts: handle, then a button per platform */
.links__social li {
  display: inline-flex;
  align-items: center;
  color: var(--l-ink);
  font: 540 14px / 1 var(--l-sans);
  letter-spacing: -0.005em;
}

.links__social li > a:first-of-type {
  margin-left: 4px;
}

.links__social a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--l-mute);
  transition: color 160ms ease;
}

.links__social a:hover {
  color: var(--l-ink);
}

/* contact */
.links__contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--l-ink);   /* white, and a little larger (Patrick, 2026-10-03) */
  font: 500 15px / 1 var(--l-sans);
  letter-spacing: -0.003em;
  text-decoration: none;
  transition: color 160ms ease;
}

.links__contact a:hover {
  color: var(--l-ink);
}

.links__contact .links__icon {
  width: 16px;
  height: 16px;
}

/* Where the contact column is too narrow for the whole address, it reads
   "Email" like its neighbours; the address is still the link (and still
   read out). */
@media (min-width: 681px) and (max-width: 1000px) {
  .links__addr {
    font-size: 0;
  }

  .links__addr::before {
    content: "Email";
    font-size: 13.5px;
  }
}

/* icons are masks, so they take the text colour */
.links__icon {
  display: inline-block;
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.links__icon--instagram { --icon: url("../public/media/icons/instagram.svg"); }
.links__icon--tiktok { --icon: url("../public/media/icons/tiktok.svg"); }
/* the accounts' platforms in their own colours (Patrick, 2026-10-03):
   Instagram's gradient, TikTok's white note with its cyan and red offsets */
.links__social .links__icon--instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  opacity: 1;
}
.links__social .links__icon--tiktok {
  background: #fff;
  filter: drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55);
  opacity: 1;
}

.links__icon--linkedin { --icon: url("../public/media/icons/linkedin.svg"); }
.links__icon--github { --icon: url("../public/media/icons/github.svg"); }
.links__icon--mail {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E");
}

/* ---- the sheet as the night ---------------------------------------------------
   Patrick, 2026-10-02: the overlay should "match the scene". So at every size
   it is the storm's own night over the whole screen (a little see-through,
   blurred), not a card of glass tiles on a grey dim. Nothing is boxed or
   ruled (he asked for no faint lines): the six logos stand large in open
   space, centred, three across; then the shops, the accounts and contact,
   three centred columns. The × is the menu
   icon's own two bars, crossed, exactly where the icon sits. (The phone
   layout below stacks all of it in one column.) */

.links {
  --hair: rgb(238 241 243 / 0.09);
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100svh;
  max-height: 100svh;
  margin: 0;
  padding: clamp(96px, 18vh, 180px) clamp(24px, 4vw, 64px) clamp(40px, 8vh, 80px);   /* top: where the logos start (88px was too high, centred too low) */
  border: 0;
  background: rgb(5 7 10 / 0.93);
  box-shadow: none;
}

.links[open] {
  display: flex;
  flex-direction: column;
  animation: links-fade 420ms ease;
}

.links::backdrop {
  background: transparent;
}

.links:focus {
  outline: none;
}

/* closing: the sheet fades out as the menu icon fades back (site-menu.js) */
.links.is-closing {
  opacity: 0;
  transition: opacity 320ms ease;
}

.links__close {
  top: 12px;
  right: 16px;
  width: 40px;
  height: 40px;
  color: var(--l-ink);
}

.links__close::before,
.links__close::after {
  width: 20px;
  height: 2px;
  border-radius: 0.5px;
}

/* the composition is centred across and hangs from near the top (Patrick:
   "logos higher up"), the sheet's top padding setting how near */
.links__body {
  --gap: clamp(24px, 3vw, 48px);
  width: min(100%, 78rem);
  margin: 0 auto auto;
}

.links__logos {
  --cap: clamp(18px, 2.05vw, 30px); /* about as large as the widest wordmark allows in a third of the width */
  --pad: 0px;
  row-gap: clamp(32px, 7vh, 72px);
  padding-bottom: clamp(40px, 7vh, 72px);
}

.links__logos li {
  grid-column: span 4;
  min-height: calc(var(--cap) * 3.2);
  padding: 0;
  background: none;
  box-shadow: none;
}

.links__logos li:hover {
  background: none;
}

.links__logos li::after {
  display: none;
}

/* each of the three is one block centred under its column of logos, its
   label and rows sharing one left edge, so nothing is ragged */
.links__shops,
.links__social,
.links__contact {
  grid-column: span 4;
  justify-content: center;
  justify-items: start;
  margin-top: clamp(28px, 5vh, 48px);
  padding: 0;
  background: none;
  box-shadow: none;
}

.links__shops::before,
.links__social::before,
.links__contact::before {
  align-self: auto;
  margin-bottom: 12px;
}


/* ---- phones ------------------------------------------------------------------
   On a phone the overlay is the whole screen: the storm's own night, a
   little see-through and blurred, so the title still moves faintly behind
   it. Everything sits in one column ruled by hairlines, not a stack of glass
   boxes, and the × is the menu icon's own two bars, crossed, in exactly the
   place the icon was, so opening and closing read as one control. One column
   of logos: the real wordmarks can't break onto two lines, and at half a
   phone's width the long ones would be too small to read. The marketplaces
   sit on one baseline (each pulled down by its descender: the y of ebay, the
   p of depop). */
@media (max-width: 680px) {
  .links {
    --hair: rgb(238 241 243 / 0.09);
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100svh;
    max-height: 100svh;
    margin: 0;
    padding:
      calc(max(8px, env(safe-area-inset-top, 0px)) + 52px)
      24px
      calc(env(safe-area-inset-bottom, 0px) + 28px);
    border: 0;
    background: rgb(5 7 10 / 0.93);
    box-shadow: none;
  }

  .links::backdrop {
    background: transparent;
  }

  /* a full screen fades in; it does not slide */
  .links[open] {
    animation: links-fade 420ms ease;
  }

  .links__close {
    top: max(8px, env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    width: 40px;
    height: 40px;
    color: var(--l-ink);
  }

  .links__close::before,
  .links__close::after {
    width: 20px;
    height: 2px;
    border-radius: 0.5px;
  }

  .links__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .links__logos {
    --cap: 20px;
    --pad: 0px;
    row-gap: 24px;   /* more air between the ventures (Patrick, 2026-10-02) */
    padding-bottom: 30px;
  }

  /* one column of even rows with air between, no rules, each logo centred,
     and everything below centred on the same axis */
  .links__logos li {
    grid-column: 1;
    min-height: 72px;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .links__logos li:hover {
    background: none;
  }

  .links__logos li::after {
    display: none;
  }

  .links__shops,
  .links__social,
  .links__contact {
    grid-column: 1 / -1;
    grid-auto-rows: 30px;
    justify-content: center;
    justify-items: start;
    margin-top: 0;
    padding: 22px 0 4px;
    background: none;
    box-shadow: none;
  }

  /* on a phone the labels stand centred over their blocks, as the shops do */
  .links__shops::before,
  .links__social::before,
  .links__contact::before {
    align-self: auto;
    justify-self: center;
    margin-bottom: 8px;
    text-align: center;
  }

  .links__shops {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 6px 12px;   /* tighter, so the bigger logos still sit on one row */
    margin-top: 4px;
    padding-bottom: 14px;
  }

  .links__shop {
    gap: 5px;
  }

  .links__shops::before {
    flex-basis: 100%;
  }

  /* a quarter bigger than they were, so all three still fit one row on a phone */
  .links__brand--ebay {
    width: 69px;
    height: 27.5px;
    margin-bottom: -5.75px; /* baseline at 79% of its height */
  }

  .links__brand--depop {
    width: 90px;
    height: 23px;
    margin-bottom: -5.7px; /* baseline at 75% */
  }

  .links__brand--grailed {
    width: 91px;
    height: 16.3px;
    margin-bottom: 1.9px; /* capitals only: lift it onto the others' baseline */
  }

  /* The shops, one to a row and larger, centred like the ventures above:
     each wordmark at the same visual weight, the arrow small and quiet. */
  .links__shops {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 22px;
    padding-bottom: 24px;
  }

  .links__shops::before {
    align-self: center;
    flex-basis: auto;
  }

  .links__shops li {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .links__shop {
    position: relative;
    justify-content: center;
    min-height: 40px;
  }

  .links__shop .links__go {
    position: absolute;
    left: 100%;
    margin-left: 4px;
    width: 6px;
    height: 6px;
    opacity: 0.4;
  }

  .links__brand--ebay {
    width: 118px;
    height: 47px;
    margin-bottom: 0;
  }

  .links__brand--depop {
    width: 150px;
    height: 38.5px;
    margin-bottom: 0;
  }

  .links__brand--grailed {
    width: 168px;
    height: 30px;
    margin-bottom: 0;
  }

  /* The accounts: each handle large and centred, its two platforms centred
     on a line underneath it. */
  .links__social {
    grid-auto-rows: auto;
    justify-items: center;
    row-gap: 22px;
  }

  .links__social li {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.15;
  }

  .links__social li::after {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 6px;
  }

  .links__social li > a {
    order: 2;
  }

  .links__social li > a:first-of-type {
    margin-left: 0;
  }

  .links__social a {
    width: 36px;
    height: 30px;
    color: var(--l-mute);
  }

  .links__social a:hover,
  .links__social a:focus-visible {
    color: var(--l-ink);
  }

  .links__social .links__icon {
    width: 20px;
    height: 20px;
  }

  /* One rhythm for the three lists below the ventures (Patrick, 2026-10-02:
     "more cohesive"): the same space above each label and between the label
     and its list, everything on the one centre line, and the arrows, icons
     and labels in one quiet grey. */
  .links__shops,
  .links__social,
  .links__contact {
    margin-top: 0;
    padding: 48px 0 6px;
  }

  .links__shops::before,
  .links__social::before,
  .links__contact::before {
    margin-bottom: 18px;
    letter-spacing: 0.24em;
    opacity: 0.75;
  }

  /* each label sits about 16px over the first thing in its own list (the
     lists' own gaps and row boxes differ, so each is set by measure), and
     the larger space is above it: "awkward gap between headers" (Patrick,
     2026-10-03) */
  .links__shops::before { margin-bottom: -12px; }
  .links__social::before { margin-bottom: -2px; }
  .links__contact::before { margin-bottom: 10px; }

  .links__shop .links__go {
    color: var(--l-mute);
  }

  .links__brand--grailed {
    width: 150px;
    height: 26.8px;
  }

  .links__social {
    row-gap: 18px;
  }

  .links__social li {
    font-size: 25px;
  }

  /* contact: centred like everything above, each line an icon and a label */
  .links__contact {
    justify-items: center;
    grid-auto-rows: 36px;
  }

  .links__contact a {
    font-size: 17px;
    color: var(--l-ink);
  }

  .links__contact .links__icon {
    width: 17px;
    height: 17px;
    color: var(--l-ink);
  }

  /* The ventures, balanced by eye: every logo set to carry the same visual
     weight (two-line and symbol logos narrower, the long single-line
     wordmarks wider), on rows of one height, with even air between. */
  .links__logos {
    row-gap: 14px;
    padding-bottom: 26px;
  }

  .links__logos li {
    min-height: 88px;
  }

  .links__logos li:nth-child(1) .links__art { width: 214px; }
  .links__logos li:nth-child(2) .links__art { width: 218px; }
  .links__logos li:nth-child(3) .links__art { width: 272px; }
  .links__logos li:nth-child(4) .links__art { width: 254px; }
  .links__logos li:nth-child(5) .links__art { width: 262px; }
  .links__logos li:nth-child(6) .links__art { width: 242px; }

  /* the shops in their colours (Grailed in the ventures' off-white), at full size */
  .links__shop {
    color: #e6e8ea;
  }
}

/* the marketplace wordmarks get the same raised edge and shadow as the ventures */
.links__shop {
  filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.55)) drop-shadow(0 6px 14px rgb(0 0 0 / 0.5));
}

/* ---- what he works in, and the record --------------------------------------
   At the head of the sheet (Patrick, 2026-10-03: "move to top, a little
   bigger"), across it, in the sheet's own small voice: the
   topics like the section labels, the figures white with their words grey. */
.links__about {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 0 clamp(40px, 7vh, 64px);
  text-align: center;
}

.links__topics {
  margin: 0;
  color: var(--l-mute);
  font: 400 12px / 1.6 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.links__topics span {
  margin: 0 0.6em;
  opacity: 0.5;
}

.links__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--l-mute);
  font: 400 13px / 1 var(--mono);
  letter-spacing: 0.08em;
}

.links__stats b {
  margin-right: 0.45em;
  color: var(--l-ink);
  font: 600 19px / 1 var(--l-sans);
  letter-spacing: -0.01em;
}

@media (max-width: 680px) {
  /* one line each on a phone */
  .links__about {
    gap: 12px;
    padding: 4px 0 40px;
  }

  .links__topics {
    font-size: 10px;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  .links__topics span {
    margin: 0 0.35em;
  }

  .links__stats {
    flex-wrap: nowrap;
    gap: 16px;
    font-size: 11px;
    letter-spacing: 0.03em;
  }

  .links__stats b {
    font-size: 16px;
    margin-right: 0.35em;
  }
}

.links__stats li {
  white-space: nowrap;
}

/* ---- the head of the sheet ---------------------------------------------------
   Patrick, 2026-10-03: the record at the top "doesn't match anything else.
   maybe it needs my name too". So the sheet opens with his name, his own
   traced letterforms (public/wordmark.svg) set white like the ventures'
   logos below it, and under it the record and what he works in as two quiet
   lines in the same voice as the Shop / Social / Contact labels. */
.links__name {
  display: block;
  width: clamp(150px, 15vw, 200px);
  aspect-ratio: 1924 / 1976;
  background: #e6e8ea;   /* the ventures' off-white */
  -webkit-mask: url("../public/wordmark.svg") center / contain no-repeat;
  mask: url("../public/wordmark.svg") center / contain no-repeat;
  filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.55)) drop-shadow(0 6px 14px rgb(0 0 0 / 0.5));
}

.links__about {
  gap: 12px;
}

.links__name {
  margin-bottom: 14px;
}

.links__stats,
.links__topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 1.6em;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--l-mute);
  font: 400 10px / 1.6 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.links__stats b {
  margin-right: 0.6em;
  color: var(--l-ink);
  font: inherit;
  letter-spacing: 0.06em;
}

.links__topics {
  gap: 0;
  opacity: 0.8;
}

.links__topics span {
  margin: 0 0.7em;
  opacity: 0.5;
}

@media (max-width: 680px) {
  .links__name {
    width: 140px;
  }

  .links__stats,
  .links__topics {
    flex-wrap: nowrap;
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }

  .links__stats {
    gap: 1.2em;
  }

  .links__topics span {
    margin: 0 0.4em;
  }
}

/* ---- professional (Patrick, 2026-10-03: "the scene and vibe gothic, the menu
   professional") ------------------------------------------------------------
   One three-column grid, top to bottom, everything on its column's left edge:
   his name with what he works in, the record as three figures, the six
   businesses, then shop / social / contact. Every section opens with the same
   small label, and one space sits between sections. */
@media (min-width: 681px) {
  .links {
    padding: clamp(56px, 9vh, 112px) clamp(32px, 6vw, 96px) clamp(32px, 5vh, 64px);
  }

  .links__body {
    --sect: clamp(48px, 9vh, 96px);
    width: min(100%, 68rem);
    margin: auto;   /* just the businesses and the links now: centred on the screen */
  }

  .links__about,
  .links__stats,
  .links__logos {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: normal;
    text-align: left;
  }

  .links__about {
    align-items: end;
    row-gap: var(--sect);
    padding: 0 0 var(--sect);
  }

  .links__name {
    grid-column: 1 / span 4;
    justify-self: start;
    width: clamp(84px, 7.5vw, 108px);
    margin: 0;
  }

  .links__topics {
    grid-row: 1;
    grid-column: 5 / -1;
    justify-self: end;
    opacity: 1;
  }

  .links__stats {
    row-gap: 0;
  }

  .links__stats li {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .links__stats b {
    margin: 0;
    color: var(--l-ink);
    font: 600 clamp(28px, 2.8vw, 40px) / 1 var(--l-sans);
    letter-spacing: -0.02em;
  }

  .links__logos {
    row-gap: clamp(28px, 5vh, 48px);
    padding-bottom: var(--sect);
  }

  .links__logos li {
    grid-column: span 4;
    justify-items: start;
    min-height: calc(var(--cap) * 3.2);
  }

  .links__shops,
  .links__social,
  .links__contact {
    justify-content: stretch;
    margin-top: 0;
  }

  /* one label for every section */
  .links__shops::before,
  .links__social::before,
  .links__contact::before {
    content: attr(aria-label);
    content: attr(aria-label) / "";
    grid-column: 1 / -1;
    align-self: start;
    margin: 0 0 18px;
    color: var(--l-mute);
    font: 400 10px / 1 var(--mono);
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }
}

/* ---- it comes up from the bottom (Patrick, 2026-10-03) ----------------------
   The whole screen as before, but the sheet slides up from below to open and
   back down to close. */
.links[open] {
  animation: links-rise 560ms var(--l-ease);
}

@keyframes links-rise {
  from {
    transform: translateY(100%);
  }
}

.links.is-closing {
  opacity: 1;
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.5, 0, 0.75, 0);
}