/* ==========================================================================
   Tech Checklist / hub.css                                    owner: F (hub)
   The hub ("four desks") and the shell pages that load it: search, plus the
   neutral helpers about and 404 may use. The chrome is monochrome ink on a
   light wall; the four rooms carry all of the colour, each scoped with
   data-persona to its writer's theme tokens and fonts.

   1 type helpers   2 intro   3 rooms (3a-3d per writer, 3e small screens)
   4 card stream    5 how the lists work   6 hub search   7 search page
   ========================================================================== */

/* -- 1. Neutral type helpers -------------------------------------------------- */
.hub-h2 {
  font-family: var(--font-shell);
  font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.625rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.04em;
}
.hub-kicker {
  color: var(--fg-muted);
  font-family: var(--font-shell);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* -- 2. Intro: the tagline is itself a three item checklist ------------------- */
.hub-intro { padding: clamp(1.5rem, .9rem + 2vw, 2.25rem) var(--gutter) clamp(1.25rem, .9rem + 1vw, 1.75rem); }
.hub-intro__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2em .9em;
  font-family: var(--font-shell);
  font-size: clamp(1.625rem, .95rem + 1.6vw, 2.125rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.04em;
}
.hub-intro__item { display: inline-flex; align-items: baseline; gap: .32em; white-space: nowrap; }
.hub-intro__item:last-child { white-space: normal; }
.hub-intro__mark { width: .95em; height: .95em; align-self: center; transform: translateY(-.04em); }
.hub-intro__mark .mark__check { animation: hub-tick .55s var(--ease-out) both; }
.hub-intro__item:nth-child(2) .mark__check { animation-delay: .22s; }
.hub-intro__item:nth-child(3) .mark__check { animation-delay: .44s; }
@keyframes hub-tick {
  from { stroke-dasharray: 30; stroke-dashoffset: 30; }
  to { stroke-dasharray: 30; stroke-dashoffset: 0; }
}
.hub-intro__deck {
  margin-top: .65rem;
  color: var(--fg-muted);
  font-size: .9375rem;
  line-height: 1.45;
}

/* -- 3. The four rooms -----------------------------------------------------------
   One band, four rooms, ink walls with square columns where they meet, as on
   a floor plan. On wide screens the band is a grid whose rows (top, ident,
   count, picks, enter) are shared by all four rooms through subgrid, so names,
   counts and lists line up across the seams whatever each room holds. A
   room's content column has a fixed width (--colw), so growing a room on
   hover reveals more of the room instead of reflowing its text, and type is
   sized from that width. A theme's --texture paints the room; without one
   the hub draws a default per room (--room-texture). */
.desks {
  --wall: 2px;
  --wall-color: var(--fg);
  --hall: var(--bg);
  --pad: clamp(1.25rem, .9rem + 1vw, 1.75rem);
  --colw: calc(100vw - 2 * var(--pad));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block: var(--wall) solid var(--wall-color);
}
.desk {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem var(--pad) 1.25rem;
  background: var(--texture, var(--room-texture, none)), var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
}
.desk + .desk { border-top: var(--wall) solid var(--wall-color); }
.desk p, .desk h2, .desk ol { margin: 0; }
.desk__furniture { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.desk__furniture::before,
.desk__furniture::after { content: ""; position: absolute; inset: 0; }

.desk__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; }
.desk__no {
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.desk__mark { width: 2.75rem; height: 2.75rem; color: var(--fg); }
.desk__ident { display: flex; flex-direction: column; align-items: flex-start; }
.desk .desk__name {
  max-width: 100%;
  margin-top: clamp(.9rem, .2rem + 1.6vh, 1.75rem);
  font-family: var(--font-display);
  font-size: clamp(2rem, calc(var(--colw) * .13), 3.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.desk .desk__role {
  margin-top: .6rem;
  color: var(--fg-muted);
  font-size: .8125rem;
  line-height: 1.35;
}
.desk .desk__bio {
  margin-top: .8rem;
  font-size: clamp(.9375rem, calc(var(--colw) * .057), 1.125rem);
  line-height: 1.45;
}
.desk .desk__count {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-block: .25rem 1.25rem;
}
.desk__count-num {
  font-family: var(--font-display);
  font-size: clamp(5rem, min(calc(var(--colw) * .42), 4rem + 9vh), 9.5rem);
  font-weight: 500;
  line-height: .8;
  letter-spacing: -.05em;
  font-variant-numeric: lining-nums tabular-nums;
  transition: transform .7s var(--ease-out);
  transform-origin: left bottom;
}
.desk__unit {
  max-width: 6rem;
  color: var(--fg-muted);
  font-size: .8125rem;
  line-height: 1.2;
}
.desk .desk__picks { display: grid; align-content: start; gap: .55rem; padding: 0; list-style: none; }
.desk__pick { margin: 0; padding: 0; }
.desk__pick::marker { content: none; }
.desk .desk__pick-link {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: .5rem;
  color: inherit;
  font-size: clamp(.875rem, calc(var(--colw) * .052), 1rem);
  line-height: 1.3;
  text-decoration: none;
}
.desk__pick-num {
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.desk__pick-title { min-width: 0; }
.desk .desk__pick-link:hover .desk__pick-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }

.desk .desk__enter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: .85rem;
  border-top: 1px solid var(--rule);
  color: inherit;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
}
.desk__enter::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.desk__enter:focus-visible { outline: none; }
.desk__enter:focus-visible::after { outline: 2px solid var(--focus, var(--fg)); outline-offset: -.6rem; }
.desk__enter svg {
  flex: none;
  width: 1.25rem;
  height: .75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: transform .45s var(--ease-out);
}
.desk:hover .desk__enter svg, .desk:focus-within .desk__enter svg { transform: translateX(.3rem); }
.desk__door { display: none; }

/* Wide screens: the band, shared rows, hover growth, doors. */
@media (min-width: 68.75rem) {
  .desks {
    --colw: min(24rem, calc((100vw - 6px) / 4 - var(--pad) - 2.75rem));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: [top] auto [ident] auto [air] minmax(.75rem, 1fr) [count] auto [picks] auto [slack] minmax(.75rem, 1fr) [enter] auto [end];
    min-height: clamp(34rem, min(100svh - 11.25rem, 54vw), 50rem);
    transition: grid-template-columns .7s var(--ease-out);
  }
  .desk {
    grid-row: top / end;
    display: grid;
    grid-template-rows: subgrid;
    padding: calc(var(--pad) * .9) 0 calc(var(--pad) * .9) var(--pad);
  }
  .desk + .desk { border-top: 0; border-left: var(--wall) solid var(--wall-color); }
  .desk > :not(.desk__furniture, .desk__door) { width: var(--colw); align-self: start; }
  .desk > .desk__count, .desk > .desk__enter { align-self: end; }
  .desk__top { grid-row: top; }
  .desk__ident { grid-row: ident; }
  .desk .desk__count { grid-row: count; margin-top: 0; }
  .desk__picks { grid-row: picks; }
  .desk .desk__enter { grid-row: enter; margin-top: 0; }
  .desks:has(> .desk:nth-child(1):focus-within) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .desks:has(> .desk:nth-child(2):focus-within) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
  .desks:has(> .desk:nth-child(3):focus-within) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); }
  .desks:has(> .desk:nth-child(4):focus-within) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }

  /* square columns where the walls meet */
  .desk + .desk::before {
    content: "";
    position: absolute;
    left: calc(var(--wall) * -.5 - 4px);
    top: calc(var(--wall) * -1 - 3px);
    bottom: calc(var(--wall) * -1 - 3px);
    z-index: 4;
    width: 8px;
    background:
      linear-gradient(var(--wall-color), var(--wall-color)) top / 8px 8px no-repeat,
      linear-gradient(var(--wall-color), var(--wall-color)) bottom / 8px 8px no-repeat;
    pointer-events: none;
  }

  /* doors, drawn like a floor plan, swing open onto the hall below the band */
  .desk__door {
    display: block;
    position: absolute;
    left: calc(var(--pad) - 2px);
    top: calc(100% - 1px);
    z-index: 3;
    width: 4rem;
    height: 4rem;
    overflow: visible;
    pointer-events: none;
  }
  .desk__door-leaf, .desk__door-swing { fill: none; stroke: var(--wall-color); }
  .desk__door-leaf { stroke-width: 2; transform-origin: 0 0; transform: rotate(-90deg); transition: transform .7s var(--ease-out); }
  .desk__door-swing { stroke-width: 1; stroke-dasharray: 95; stroke-dashoffset: 95; transition: stroke-dashoffset .7s var(--ease-out); }
  .desk::after {
    content: "";
    position: absolute;
    left: var(--pad);
    top: 100%;
    width: 60px;
    height: var(--wall);
    background: var(--hall);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease-out);
  }
  .desk:focus-within .desk__door-leaf { transform: rotate(0deg); }
  .desk:focus-within .desk__door-swing { stroke-dashoffset: 0; }
  .desk:focus-within::after { transform: scaleX(1); }
}
@media (min-width: 68.75rem) and (hover: hover) {
  .desks:has(> .desk:nth-child(1):hover) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .desks:has(> .desk:nth-child(2):hover) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
  .desks:has(> .desk:nth-child(3):hover) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); }
  .desks:has(> .desk:nth-child(4):hover) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
  .desk:hover .desk__door-leaf { transform: rotate(0deg); }
  .desk:hover .desk__door-swing { stroke-dashoffset: 0; }
  .desk:hover::after { transform: scaleX(1); }
  .desk:hover .desk__count-num { transform: scale(1.06); }
  .desk > * { transition: opacity .5s ease; }
  .desks:hover .desk:not(:hover) > :not(.desk__furniture) { opacity: .84; }
}
@media (max-height: 45rem) and (min-width: 68.75rem) {
  .desk__pick:nth-child(3) { display: none; }
}

/* -- 3a. Nicholas: the ops room at 3am. Dot grid, radar rings, brackets. -- */
.desk--nicholas {
  --room-texture: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--fg) 15%, transparent) 1px, transparent 1.6px) 0 0 / 16px 16px;
}
.desk--nicholas .desk__furniture::after {
  --ring: color-mix(in srgb, var(--accent) 22%, transparent);
  background:
    radial-gradient(circle at 100% 52%, transparent 0 5.9rem, var(--ring) 5.9rem 6rem, transparent 6.05rem 11.9rem, var(--ring) 11.9rem 12rem, transparent 12.05rem 17.9rem, var(--ring) 17.9rem 18rem, transparent 18.05rem),
    conic-gradient(from 218deg at 100% 52%, transparent 0deg, color-mix(in srgb, var(--accent) 13%, transparent) 30deg, transparent 31deg);
  -webkit-mask-image: radial-gradient(circle at 100% 52%, #000 0 18.1rem, transparent 18.2rem);
  mask-image: radial-gradient(circle at 100% 52%, #000 0 18.1rem, transparent 18.2rem);
}
.desk--nicholas .desk__no { text-transform: lowercase; }
.desk--nicholas .desk__no-num { color: var(--accent); }
.desk--nicholas .desk__mark { color: var(--fg-muted); }
.desk--nicholas .desk__name { font-family: var(--font-mono); font-size: clamp(1.75rem, calc(var(--colw) * .115), 2.75rem); font-weight: 500; letter-spacing: -.045em; }
.desk--nicholas .desk__role { font-family: var(--font-mono); font-size: .75rem; }
.desk--nicholas .desk__count-num { font-family: var(--font-mono); font-weight: 400; color: var(--accent); letter-spacing: -.08em; }
.desk--nicholas .desk__unit { font-family: var(--font-mono); font-size: .75rem; text-transform: lowercase; }
.desk--nicholas .desk__unit::before { content: "// "; color: var(--accent); }
.desk--nicholas .desk__pick-link { grid-template-columns: 2.4rem minmax(0, 1fr); }
.desk--nicholas .desk__pick-num { color: var(--accent); }
.desk--nicholas .desk__pick-num::before { content: "["; color: var(--fg-muted); }
.desk--nicholas .desk__pick-num::after { content: "]"; color: var(--fg-muted); }
.desk--nicholas .desk__enter { font-family: var(--font-mono); font-weight: 500; font-size: .75rem; text-transform: lowercase; }

/* -- 3b. Ava: 11pm, warm lamp. Paper grain, lamp glow, soft serif. -- */
.desk--ava {
  --room-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
}
.desk--ava .desk__furniture::before {
  background: radial-gradient(circle at 94% 4%, rgb(255 213 158 / .78), rgb(246 190 128 / .3) 30%, transparent 60%);
}
.desk--ava .desk__no { font-family: var(--font-display); font-style: italic; font-size: .9375rem; letter-spacing: 0; text-transform: none; }
.desk--ava .desk__mark { transform: rotate(-4deg); }
.desk--ava .desk__name { font-size: clamp(2.5rem, calc(var(--colw) * .165), 3.75rem); font-weight: 400; letter-spacing: -.035em; line-height: .95; font-variation-settings: "SOFT" 100, "WONK" 1; }
.desk--ava .desk__bio { font-size: clamp(1rem, calc(var(--colw) * .06), 1.1875rem); }
.desk--ava .desk__count-num { font-weight: 300; font-style: italic; color: var(--accent); letter-spacing: -.06em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.desk--ava .desk__unit { font-family: var(--font-display); font-style: italic; font-size: .9375rem; }
.desk--ava .desk__pick-num { font-family: var(--font-display); font-style: italic; font-size: .9375rem; line-height: 1.3; color: var(--accent); }
.desk--ava .desk__pick-title { font-family: var(--font-display); line-height: 1.32; }
.desk--ava .desk__enter { border-top-style: dashed; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: .9375rem; }

/* -- 3c. Ryan: the work order. Graph paper, tape label, stamped count. -- */
.desk--ryan {
  --room-texture:
    linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px) -1px -1px / 22px 22px,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px) -1px -1px / 22px 22px;
}
.desk--ryan .desk__no { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; letter-spacing: .08em; color: var(--accent); }
.desk--ryan .desk__no-num::before { content: "No. "; }
.desk--ryan .desk__name {
  padding: .3rem .6rem .25rem;
  background: #F3DFAE;
  box-shadow: 0 1px 0 rgb(0 0 0 / .06);
  color: #16191D;
  font-size: clamp(1.875rem, calc(var(--colw) * .125), 3rem);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}
.desk--ryan .desk__role { margin-top: .9rem; font-family: var(--font-display); font-size: .875rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.desk--ryan .desk__count-num { font-weight: 700; color: var(--accent); letter-spacing: -.02em; }
.desk--ryan .desk__unit {
  padding: .3rem .45rem;
  border: 2px solid #D9541A;
  color: #C2410C;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
  transform: rotate(-6deg);
}
.desk--ryan .desk__pick-num { color: var(--accent); font-weight: 600; }
.desk--ryan .desk__pick-num::before { content: "#"; opacity: .6; }
.desk--ryan .desk__enter { border-top: 2px solid var(--fg); font-family: var(--font-display); font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

/* -- 3d. Jason: the essay, late. Hairline frame, contents page. -- */
.desk--jason .desk__furniture::before { inset: .75rem; border: 1px solid var(--rule); }
.desk--jason .desk__no { font-family: var(--font-display); font-style: italic; font-size: .9375rem; letter-spacing: 0; text-transform: none; }
.desk--jason .desk__name { font-size: clamp(2.25rem, calc(var(--colw) * .15), 3.5rem); font-weight: 400; letter-spacing: -.02em; }
.desk--jason .desk__role,
.desk--jason .desk__unit,
.desk--jason .desk__enter {
  font-family: var(--font-ui, var(--font-shell));
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.desk--jason .desk__bio { font-size: clamp(1rem, calc(var(--colw) * .06), 1.1875rem); line-height: 1.5; }
.desk--jason .desk__count-num { font-weight: 400; color: var(--accent); letter-spacing: -.03em; font-variant-numeric: oldstyle-nums proportional-nums; }
.desk--jason .desk__picks { gap: .45rem; }
.desk--jason .desk__pick-link { grid-template-columns: 1.6rem minmax(0, 1fr); font-size: clamp(.9375rem, calc(var(--colw) * .055), 1.0625rem); }
.desk--jason .desk__pick-num { font-family: var(--font-display); font-size: .9375rem; line-height: 1.3; color: var(--accent); font-variant-numeric: oldstyle-nums; }
.desk--jason .desk__pick-title { font-style: italic; }
.desk--jason .desk__enter { border-top-color: var(--accent); }

/* -- 3e. Tablet: two by two. Phone: stacked. Walls stay. -- */
@media (min-width: 43.75rem) and (max-width: 68.74rem) {
  .desks { --colw: calc(50vw - 2 * var(--pad) - 1px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .desk { min-height: 36rem; }
  .desk + .desk { border-top: 0; }
  .desk:nth-child(even) { border-left: var(--wall) solid var(--wall-color); }
  .desk:nth-child(n + 3) { border-top: var(--wall) solid var(--wall-color); }
  .desk .desk__enter { margin-top: auto; }
  .desk .desk__picks { margin-bottom: 1.5rem; }
}
@media (max-width: 43.74rem) {
  .desk__count-num { font-size: clamp(5rem, calc(var(--colw) * .3), 6.5rem); }
  .desk .desk__count { margin-top: 1.75rem; padding-bottom: 1.5rem; }
}

/* -- 4. Stream of cards ------------------------------------------------------- */
.stream {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin: clamp(3.5rem, 2rem + 5vw, 6.5rem) auto 0;
}
.stream__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: .75rem var(--space-l);
  margin-bottom: var(--space-l);
}
.stream__deck { max-width: 34ch; color: var(--fg-muted); font-size: .9375rem; }
.stream__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
@media (min-width: 68.75rem) { .stream__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stream .card { background: var(--bg-2); }
.card__by {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .1rem;
  color: var(--fg-muted);
  font-family: var(--font-ui, var(--font-body));
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.card__by .desk-link__dot {
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 25%, transparent);
}

/* -- 5. How the lists work ---------------------------------------------------- */
.howto {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin: clamp(4rem, 2.5rem + 5vw, 7rem) auto 0;
  padding-top: var(--space-l);
  border-top: 2px solid var(--fg);
}
.howto__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-l) var(--space-xl);
}
.howto__deck { margin-top: 1rem; max-width: 28ch; color: var(--fg-muted); }
.howto__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}
.howto__item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .9rem; align-items: start; }
.howto__mark { width: 2rem; height: 2rem; margin-top: -.2rem; }
.howto__title { font-family: var(--font-shell); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.howto__item p { margin-top: .4rem; color: var(--fg-muted); font-size: .9375rem; line-height: 1.5; }
.howto__item a { color: var(--fg); text-decoration-thickness: 1px; }
@media (max-width: 55rem) {
  .howto__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .howto__list { grid-template-columns: minmax(0, 1fr); }
}

/* -- 6. Hub search ------------------------------------------------------------- */
.hub-search {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin: clamp(3.5rem, 2rem + 4vw, 5.5rem) auto var(--space-2xl);
}
.hub-search__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: 1rem var(--space-xl);
  padding: var(--space-l) 0;
  border-block: 1px solid var(--rule);
}
.hub-search__title { font-family: var(--font-shell); font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  border: 1.5px solid var(--fg);
  border-radius: 999px;
  background: var(--bg-2);
  transition: box-shadow .2s ease;
}
.search-field:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 14%, transparent); }
.search-field > svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.search-field input {
  flex: 1;
  min-width: 0;
  height: 3.25rem;
  padding: 0 .9rem;
  border: 0;
  background: transparent;
  font-size: 1.0625rem;
  outline: none;
}
.search-field input::placeholder { color: var(--fg-muted); opacity: 1; }
.search-field button {
  flex: none;
  height: 2.75rem;
  margin-right: .35rem;
  padding: 0 1.3rem;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-shell);
  font-size: .9375rem;
  font-weight: 600;
}
.search-field button:hover { background: color-mix(in srgb, var(--fg) 82%, var(--bg)); }
@media (max-width: 47.99rem) {
  .hub-search__form { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Search page (/search/) ---------------------------------------------------
   Lives on the hub-neutral tokens; results are themed cards (data-persona on each). */
.search-page { padding-block: clamp(3rem, 7vw, 5.5rem) var(--space-2xl); }
.search-head__title {
  max-width: 16ch;
  margin-top: .6rem;
  font-family: var(--font-shell);
  font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4rem);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.04em;
}
.search-form { max-width: 46rem; margin-top: var(--space-l); }
.search-desks { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.search-desks .chip { font-family: var(--font-shell); cursor: pointer; }
.search-desks .chip .desk-link__dot { margin-right: .1rem; }
.search-status { max-width: 60ch; margin-top: 1rem; color: var(--fg-muted); font-size: .9375rem; }
.search-results { margin-top: var(--space-xl); }
.search-results .card { background: var(--bg-2); }
.search-results .card__media { aspect-ratio: 3 / 2; }