/* The HoLT directory — page styling.
 *
 * Kept separate from holt.css because this is its only consumer, and tokens all
 * come from holt.css.
 *
 * The look is the ORIGINAL directory design, not the flat form-page treatment:
 * 3px black rules with hard offset shadows, cards that lift on hover, dashed
 * outlines on the "available for" filters. Bertie, 2026-08-17: "the original
 * design we did for this directory was a lot nicer, had some nicer edges and
 * stuff." The page chrome stays the hub's, so it still sits on her domain
 * looking like the rest of the site.
 *
 * IMAGES ARE SQUARE, deliberately. Sampled 20 of them: 19 are square, 640x640
 * or 1024x1024. Cropping to 4:3 chopped heads and sliced badges in half.
 *
 * THE FOUNDING BADGE IS A CHIP IN THE CARD BODY, not an overlay on the photo.
 *
 * It used to sit on the image at 32%, sized to swallow the copy some members
 * had burnt into their own upload. Every listing now carries the member's own
 * clean picture, so nothing needs covering and that size had no other reason to
 * exist. As a chip it reads as information about the member rather than a
 * sticker on their face, and it works for a listing with no photo at all.
 *
 * If a badged photo ever reappears, DO NOT go back to covering it. Fix the
 * photo. The cover-it approach forced the badge to a third of the frame.
 */

/* ── controls ──────────────────────────────────────────── */

.dir-controls { background: var(--yellow); padding: 40px 0 44px; }

.dir-search { position: relative; max-width: 620px; margin: 0 auto 30px; }

.dir-search input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 16px;
  padding: 16px 20px;
  border: 3px solid var(--black);
  box-shadow: 5px 5px 0 var(--black);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  appearance: none;
  transition: box-shadow .12s, transform .12s;
}

.dir-search input:focus {
  outline: 0;
  box-shadow: 7px 7px 0 var(--pink);
  transform: translate(-1px, -1px);
}

.dir-browse-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 16px;
}

.dir-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.dir-chip {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border: 2px solid var(--black);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .1s, box-shadow .1s, background .1s, color .1s;
}

.dir-chip .n { font-family: var(--font-mono); font-size: 12px; opacity: 0.55; }

.dir-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--black); background: var(--pink-soft); }
.dir-chip[aria-pressed="true"] { background: var(--black); color: var(--paper); }
.dir-chip[aria-pressed="true"] .n { opacity: 0.8; }
.dir-chip[aria-pressed="true"]:hover { box-shadow: 3px 3px 0 var(--pink); }

.dir-chips--flags { margin-top: 14px; }
.dir-chips--flags .dir-chip { border-style: dashed; background: transparent; }
.dir-chips--flags .dir-chip[aria-pressed="true"] { background: var(--black); color: var(--paper); border-style: solid; }

/* ── results ───────────────────────────────────────────── */

.dir-results { padding: 46px 0 76px; }

.dir-count {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin: 0 0 26px;
}

.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 30px 26px; }

.dir-card {
  position: relative;
  border: 3px solid var(--black);
  box-shadow: 5px 5px 0 var(--black);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}

.dir-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--pink); }
.dir-card:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }

/* Square, because that is how the photos were made.
   height:auto is load-bearing: the img carries width/height attributes for
   layout stability, and without this the presentational height wins and
   aspect-ratio is ignored, which stretched every card into a tall crop and
   sliced Lea's founding badge in half. */
.dir-card-img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
  border-bottom: 3px solid var(--black);
  display: block;
  background: var(--panel);
}

.dir-card-img--none {
  aspect-ratio: 1 / 1;
  border-bottom: 3px solid var(--black);
  background: var(--pink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 60px;
  color: var(--black);
}

/* A column, so the optional rows cannot shove the rest of the card around.
   Only 16 of 157 listings carry a contact name and only 16 carry marks, so a
   card that has them must not sit differently from the 141 that do not. */
.dir-card-body {
  padding: 16px 17px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dir-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.15;
  margin: 0 0 8px;
  text-transform: uppercase;
  /* Two lines' worth, always. Most business names wrap to two and some to one,
     and without this the badge below starts at a different height on every
     card in the row. Reserving the space is what makes a row line up. */
  min-height: calc(19px * 1.15 * 2);
}

.dir-card .who { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mid); margin: 0 0 8px; }
/* Takes the slack, so the marks below sit on the card's floor rather than
   floating wherever the tagline happens to end. */
.dir-card .tag { margin: 0; font-size: 15px; line-height: 1.4; flex: 1; }

/* The photo and anything sitting on top of it. */
.dir-shot { position: relative; display: block; }

/* Founding badge. A chip, not an overlay: same yellow, same starburst, sized
   like the other marks so a card reads as name, person, badge, tagline. */
.dir-founding {
  display: inline-flex;
  align-items: center;
  /* The card body is a flex column, whose default align-items:stretch would
     blow this chip out to the full card width. It hugs its text. */
  align-self: flex-start;
  gap: 6px;
  margin: 0 0 10px;
  padding: 3px 9px 3px 5px;
  background: var(--yellow);
  border: 2px solid var(--black);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--black);
}

.dir-founding svg { width: 14px; height: 14px; display: block; flex: none; }

/* On the detail page it sits under the name, where there is room to breathe. */
.dir-detail-head .dir-founding { margin: 2px 0 12px; font-size: 11px; }

/* One flag, top-left, for genuinely new joiners. */
.dir-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--pink);
  color: var(--paper);
  border: 2px solid var(--black);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
}

/* Availability marks sit in the body as type, not as stickers on a face. */
/* The tagline above takes the slack, so these land on the card's floor. */
.dir-marks { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; }

.dir-mark {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mid);
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 1px;
}

.dir-empty { text-align: center; padding: 70px 20px; font-size: 18px; }

/* ── detail ────────────────────────────────────────────── */

.dir-detail { padding: 44px 0 76px; }

.dir-back {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--pink);
  padding-bottom: 2px;
}

.dir-detail-head { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 40px; align-items: start; margin-top: 30px; }

@media (max-width: 700px) { .dir-detail-head { grid-template-columns: 1fr; gap: 28px; } }

.dir-detail-head img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border: 3px solid var(--black);
  box-shadow: 8px 8px 0 var(--pink);
  display: block;
}

.dir-detail h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.03;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.dir-detail .who { font-family: var(--font-mono); font-size: 14px; color: var(--ink-mid); margin: 0 0 18px; }
.dir-detail .lede { font-size: 19px; line-height: 1.45; margin: 0; }

.dir-section { border: 3px solid var(--black); box-shadow: 6px 6px 0 var(--yellow); background: var(--paper); padding: 20px 22px; margin: 30px 0 0; }
.dir-section--topics { box-shadow: 6px 6px 0 var(--pink-soft); }

.dir-section h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--ink-mid);
}

.dir-section p:last-child { margin-bottom: 0; }
.dir-prose :is(p, ul, ol) { margin: 0 0 12px; }
.dir-prose :last-child { margin-bottom: 0; }

.dir-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.dir-cat { font-family: var(--font-mono); font-size: 12px; border: 2px solid var(--black); padding: 4px 10px; }

.dir-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; }

.dir-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 13px 22px;
  border: 3px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
  background: var(--yellow);
  color: var(--ink);
  transition: transform .1s, box-shadow .1s, background .1s, color .1s;
}

.dir-btn--ghost { background: var(--paper); }
.dir-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pink); }

/* ── paging and states ─────────────────────────────────── */

.dir-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 44px 0 0; }
.dir-pager .dir-count { margin: 0; }

.dir-state { text-align: center; padding: 76px 20px; font-family: var(--font-mono); font-size: 14px; color: var(--ink-mid); }

/* ── edit-link request ─────────────────────────────────── */

.dir-editcard {
  max-width: 560px;
  border: 3px solid var(--black);
  box-shadow: 6px 6px 0 var(--yellow);
  background: var(--paper);
  padding: 26px 26px 28px;
}

.dir-editcard .field { margin: 0 0 6px; }
.dir-editcard .lab { display: block; font-weight: 600; margin: 0 0 8px; }

.dir-editcard input[type="email"] {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 16px;
  padding: 14px 16px;
  border: 3px solid var(--black);
  background: var(--paper);
  border-radius: 0;
  appearance: none;
}

.dir-editcard input[type="email"]:focus { outline: 0; box-shadow: 4px 4px 0 var(--pink); }
.dir-editcard .hint { font-size: 14px; color: var(--ink-mid); margin: 10px 0 0; }
.dir-editcard button { cursor: pointer; font-family: var(--font-display); }
.dir-editcard .status { font-family: var(--font-mono); font-size: 14px; margin: 18px 0 0; }