/* ══════════════════════════════════════════════════════════════════════
   THE DIRECTORY and a member's public record.

   ⚠ SCOPED UNDER `.dir`, FOR THE THIRD TIME AND THE SAME REASON.

   This design and the shared stylesheet define TWENTY-SIX of the same class
   names — .row, .card, .rail, .tag, .count, .empty, .bio, .paid, .on, .sw,
   .dot, .t, .h, .m, .b, .hd, .sp, .acts, .none and more.

   Two of those have already cost real time: a `.dot` from the switchboard
   turned a middot in the chat rail into a filled copper badge, and `.turns li`
   styled the bullets INSIDE AWi's answers so `<strong>x</strong> y` rendered
   as "xy". Neither errored. Both took a screenshot to find.

   So this file cannot reach anything outside its own page by construction.
   The prototype's `.btn` rules are dropped entirely — the shared sheet owns
   buttons, and two definitions of a button is the same bug with a new name.
   ══════════════════════════════════════════════════════════════════════ */

/* The prototype was a fixed app shell with its own scroll pane. Here the
   masthead and footer are real page furniture and the document scrolls. */
/* ⚠ NOT `overflow:hidden` WITH ITS OWN SCROLL PANE. The prototype was a fixed
   app shell where .left scrolled inside a locked viewport; here the document
   scrolls and the rail sticks. Keeping the prototype's version would have
   trapped the page inside a box below a masthead that is itself in flow —
   two scrollbars, and the footer unreachable. */
.dir{position:relative;z-index:2;padding:8px 0 60px;
  display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:1000px){
.dir{grid-template-columns:1fr 380px}
}
.dir .left{position:relative;min-width:0}
.dir .head{padding:38px 30px 20px;max-width:900px}
.dir .head h1{font-family:"Fraunces",serif;font-size:clamp(2rem,1rem+3vw,3.2rem);font-weight:420;
font-variation-settings:"SOFT" 0,"WONK" 1;letter-spacing:-.03em;line-height:1}
.dir .head p{font-family:"Archivo",sans-serif;font-size:14px;color:var(--ink-3);margin-top:10px}
.dir .tools{display:flex;gap:10px;align-items:center;padding:0 30px 18px;flex-wrap:wrap}
.dir .search{flex:1;min-width:200px;max-width:340px;position:relative}
.dir .search input{width:100%;font-family:"Archivo",sans-serif;font-size:14px;
background:rgba(16,19,25,.7);border:1px solid var(--edge-lit);color:var(--ink);
padding:11px 13px 11px 34px;border-radius:10px;backdrop-filter:blur(8px);
transition:border-color 180ms var(--ease)}
.dir .search input:focus{outline:none;border-color:var(--cu)}
.dir .search input::placeholder{color:var(--ink-4)}
.dir .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-4)}
.dir .count{font-family:"Martian Mono",monospace;font-size:11px;color:var(--ink-4)}
/* the alphabet spine — scroll-linked, the left edge */
/* Enough room that the letters are a column rather than a seam against the
   edge of the page. */
.dir .spine{position:sticky;top:12px;float:left;width:30px;margin:0 0 0 12px;z-index:5;
display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:1px}
@media(max-width:700px){
.dir .spine{display:none}
}
.dir .spine b{font-family:"Martian Mono",monospace;font-size:9px;color:var(--ink-4);
cursor:pointer;padding:1px 4px;border-radius:3px;transition:all 140ms var(--ease)}
.dir .spine b:hover{color:var(--cu-live)}
.dir .spine b.on{color:var(--cu-live);background:rgba(180,100,42,.14)}
.dir .spine b.off{opacity:.25;cursor:default}
/* THE LEDGER — full-bleed rows, hairlines. Not a card grid. */
.dir .ledger{border-top:1px solid var(--edge);margin:0 30px 60px}
.dir .letter{font-family:"Martian Mono",monospace;font-size:10px;color:var(--cu);
letter-spacing:.2em;padding:22px 8px 8px;border-bottom:1px solid var(--edge)}
.dir .row{display:grid;grid-template-columns:46px 1fr auto;gap:16px;align-items:center;
padding:14px 8px;border-bottom:1px solid var(--edge);cursor:pointer;
transition:background 220ms var(--ease),padding-left 220ms var(--ease)}
.dir .row:hover, .dir .row.sel{background:linear-gradient(90deg,rgba(180,100,42,.075),transparent 55%);padding-left:16px}
.dir .row img{width:46px;height:46px;border-radius:50%;display:block;
border:1px solid var(--edge-lit);background:var(--rise)}
/* ⚠ min-width:0 ON THE GRID CHILD, OR THE ELLIPSIS BELOW NEVER FIRES.
   A grid item's default min-width is `auto`, which means "at least as wide as
   my content" — so a long bio makes the column grow rather than clip, and
   `text-overflow:ellipsis` sits there doing nothing while the text runs under
   the next column. This exact bug shipped once already, in the chat rail, and
   took a screenshot to find because nothing about it errors. */
.dir .row>span{min-width:0}
.dir .row .h{font-family:"Archivo",sans-serif;font-weight:600;font-size:15px;color:var(--ink);
display:flex;align-items:center;gap:8px}
/* ⚠ display:block, AND EVERY OTHER PROPERTY ON THIS RULE DEPENDS ON IT.
   This was a bare <span>, so it was INLINE — and on a non-replaced inline
   element `overflow`, `max-width` and `text-overflow` are all ignored by
   every browser there is. The three properties that were supposed to clip a
   long bio did nothing, the element took its full intrinsic width (781px was
   the measured figure), and the Directory scrolled sideways on every phone
   in the world: 521px past the edge at 360, 561px at 320.

   It is invisible on a desktop, because at 1440 there is room for an
   accidental 781px column. The comment above about min-width:0 was the right
   instinct pointed at the parent; the child was never a box at all. */
.dir .row .b{display:block;
font-family:"Archivo",sans-serif;font-size:13px;color:var(--ink-3);margin-top:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52ch}
.dir .row .b.none{color:var(--ink-4);font-style:italic}
.dir .row .m{font-family:"Martian Mono",monospace;font-size:10px;color:var(--ink-4);text-align:right;line-height:1.7}
.dir .tag{font-family:"Archivo",sans-serif;font-size:9px;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;padding:2px 6px;border-radius:4px;border:1px solid}
.dir .tag.paid{color:var(--cu-live);border-color:rgba(224,135,60,.4);background:rgba(224,135,60,.08)}
.dir .tag.editor{color:var(--patina);border-color:rgba(74,147,132,.4);background:rgba(74,147,132,.08)}
.dir .dot{width:6px;height:6px;border-radius:50%;background:var(--patina);display:inline-block;margin-right:5px}
.dir .dot.off{background:var(--ink-4)}
/* RIGHT RAIL — the portrait resolves here on focus. No modal. */
.dir .rail{display:none;border-left:1px solid var(--edge);background:rgba(8,10,14,.55);
backdrop-filter:blur(14px);overflow-y:auto;padding:34px 28px}
@media(min-width:1000px){
/* ⚠ `display:block` IS THE LOAD-BEARING WORD HERE. The base rule above hides
   the rail for narrow screens; this block re-shows it — and the first version
   of this rule set position and padding but never turned display back on, so
   the rail was absent at every width and the page looked like a one-column
   design that happened to have a lot of right margin. Nothing errored. */
.dir .rail{display:block;position:sticky;top:24px;align-self:start;max-height:calc(100vh - 90px);
  overflow-y:auto;border-left:1px solid var(--edge);padding:28px 26px;min-width:0;
  scrollbar-width:thin;scrollbar-color:var(--edge-lit) transparent}
}
.dir .rail .empty{font-family:"Archivo",sans-serif;font-size:13px;color:var(--ink-4);
text-align:center;padding-top:40%}
.dir .card{opacity:0;transform:translateY(10px);transition:opacity 420ms var(--ease-in),transform 420ms var(--ease-in)}
.dir .card.in{opacity:1;transform:none}
.dir .card img{width:175px;height:175px;border-radius:50%;display:block;margin:0 auto 20px;
border:1px solid var(--edge-lit);box-shadow:0 20px 48px -18px rgba(0,0,0,.9)}
.dir .card h2{font-family:"Fraunces",serif;font-size:28px;font-weight:440;text-align:center;
font-variation-settings:"SOFT" 0,"WONK" 1;letter-spacing:-.02em}
.dir .card .hd{font-family:"Martian Mono",monospace;font-size:11px;color:var(--cu-live);
text-align:center;margin-top:4px}
.dir .card .bio{font-size:16px;line-height:1.6;color:var(--ink-2);text-align:center;margin-top:18px}
.dir .card .bio.none{color:var(--ink-4);font-style:italic}
.dir .card dl{margin-top:26px;border-top:1px solid var(--edge)}
.dir .card dl div{display:flex;justify-content:space-between;padding:11px 2px;border-bottom:1px solid var(--edge)}
.dir .card dt{font-family:"Archivo",sans-serif;font-size:11px;text-transform:uppercase;
letter-spacing:.12em;color:var(--ink-4)}
.dir .card dd{font-family:"Martian Mono",monospace;font-size:11px;color:var(--ink-2)}
.dir .card .acts{display:flex;gap:8px;margin-top:22px}
.dir .privacy{margin-top:26px;padding:16px;border:1px solid var(--edge);border-radius:11px;
background:rgba(16,19,25,.5)}
.dir .privacy .t{font-family:"Archivo",sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--cu);margin-bottom:12px}
/* ⚠ THE PROTOTYPE'S .tog WAS A SWITCH ROW — a label on the left and a toggle
   on the right, hence space-between and align-items:center. Here it is an
   EXPLANATION of two switches that live on another page, so the shape is a
   term and its definition: the name holds its column, the sentence wraps
   beside it. Reusing the switch layout put a three-line paragraph next to a
   one-word label and centred them against each other, which read as a broken
   table. */
.dir .tog{display:grid;grid-template-columns:72px 1fr;gap:4px 12px;
  align-items:start;padding:9px 0;border-bottom:1px solid var(--edge)}
.dir .tog:last-of-type{border-bottom:0}
.dir .tog b{font-family:"Archivo",sans-serif;font-size:12px;font-weight:600;
  color:var(--ink);letter-spacing:.01em}
.dir .tog span{font-family:"Archivo",sans-serif;font-size:12.5px;line-height:1.55;
  color:var(--ink-3);text-wrap:pretty}

/* ⚠ AND THE FOOTNOTE HAD NO RULE AT ALL, so it fell back to the page's serif
   reading face at full body size — a four-line paragraph set like a pull
   quote, louder than the two definitions it was a footnote TO. Nothing
   errored; it simply inherited, which is how unstyled text always fails. */
.dir .privacy .quiet{margin-top:14px;padding-top:12px;border-top:1px solid var(--edge);
  font-family:"Archivo",sans-serif;font-size:11.5px;line-height:1.6;
  color:var(--ink-4);text-wrap:pretty}
.dir .privacy .btn{margin-top:14px}
.dir .sw{width:38px;height:21px;border-radius:11px;background:var(--edge-lit);position:relative;
cursor:pointer;flex-shrink:0;transition:background 220ms var(--ease);border:none}
.dir .sw::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
background:var(--ink-3);transition:all 220ms var(--ease)}
.dir .sw[aria-checked="true"]{background:var(--cu)}
.dir .sw[aria-checked="true"]::after{left:19px;background:var(--cu-hot)}
.dir .noresult{padding:60px 30px;text-align:center}
.dir .noresult h3{font-family:"Fraunces",serif;font-size:22px;font-weight:480;margin-bottom:8px}
.dir .noresult p{font-family:"Archivo",sans-serif;font-size:14px;color:var(--ink-3)}
@media(prefers-reduced-motion:reduce){
.dir *, .dir *::before, .dir *::after{
animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* ── one member's record ───────────────────────────────────────────────
   The profile reuses the Directory's card, so it inherits the portrait, the
   tags and the bio treatment rather than defining a second set that would
   drift from the first. What it adds is the page frame around them. */
.dir.prof{grid-template-columns:1fr;max-width:760px;margin:0 auto;padding:24px 30px 80px}
.dir.prof .card{opacity:1;transform:none;text-align:center}
.dir.prof .card h1{font-family:"Fraunces",serif;font-weight:420;font-size:2.1rem;
  margin-top:4px;color:var(--ink)}
.dir.prof .hd{font-family:"Martian Mono",monospace;font-size:12px;color:var(--cu-live);
  margin-top:6px}
.dir.prof .tags{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.dir.prof .tags .tag{border-color:var(--edge-lit);color:var(--ink-4)}
.dir.prof .tags .tag.paid{color:var(--cu-live);border-color:rgba(224,135,60,.4)}
.dir.prof .tags .tag.editor{color:var(--patina);border-color:rgba(74,147,132,.4)}
.dir.prof .bio{margin:20px auto 0;max-width:56ch;font-family:"Archivo",sans-serif;
  font-size:15px;line-height:1.66;color:var(--ink-2);text-wrap:pretty}
.dir.prof .bio.none{color:var(--ink-4);font-style:italic}
.dir.prof .acts{margin-top:22px}

.dir.prof .said{margin-top:46px;border-top:1px solid var(--edge);padding-top:22px}
.dir.prof .said ul{list-style:none;margin-top:12px}
.dir.prof .said li{display:flex;gap:16px;align-items:baseline;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--edge)}
.dir.prof .said li:last-child{border-bottom:0}
.dir.prof .said a{font-family:"Archivo",sans-serif;font-size:14.5px;color:var(--ink);
  text-decoration:none;border-bottom:1px solid transparent;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dir.prof .said a:hover{border-bottom-color:var(--cu-live)}
.dir.prof .said .m{font-family:"Martian Mono",monospace;font-size:10px;color:var(--ink-4);
  flex:0 0 auto}

.dir.prof .note{margin-top:34px;padding:14px 16px;border:1px solid var(--edge);
  border-radius:10px;font-family:"Archivo",sans-serif;font-size:13px;line-height:1.6}
.dir.prof .back{margin-top:36px;font-family:"Archivo",sans-serif;font-size:13px}
.dir.prof .back a{color:var(--ink-3);text-decoration:none}
.dir.prof .back a:hover{color:var(--cu-live)}


/* ── touch ─────────────────────────────────────────────────────────────
   The shared block in awi.css raises these floors for every page; these
   two selectors carry a `.dir` prefix and therefore out-specify it. A
   floor that loses a specificity fight is not a floor, and the only way to
   know which ones lose is to measure — both of these did. */
/* ── the row, on a narrow screen ────────────────────────────────────────
   ⚠ THE MEASUREMENTS PASSED AND THE PAGE WAS STILL WRONG. Three columns —
   portrait, name, meta — fit a laptop and collide on a phone: a member with
   a rank badge pushed the middle column into the right one, so "FOUNDER"
   sat on top of the handle. Nothing overflowed the document, so the
   overflow probe was silent; it takes a screenshot, or an eye, and that is
   worth writing down as a limit of the automated suite rather than
   pretending the numbers cover it.

   Below 700px the meta moves UNDER the name instead of beside it. Two
   columns cannot collide. */
@media(max-width:700px){
  .dir .row{grid-template-columns:46px minmax(0,1fr); gap:14px; align-items:start}
  .dir .row .h{flex-wrap:wrap; row-gap:4px}
  .dir .row .m{grid-column:2; text-align:left; margin-top:6px; line-height:1.5}
  .dir .row .b{white-space:normal; max-width:none;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
}

@media (hover:none) and (pointer:coarse){
  .dir .letter{font-size:12px}
  .dir .row .b{font-size:14px}

  /* The alphabet spine comes back at 1000px, which on an iPad in landscape
     is a touch device. Its links wrap a <b>, so they were inline and
     measured 14px wide inside a 30px column — the letter, and nothing
     around it. Filling the column costs no layout and doubles the target. */
  /* align-self:stretch, because .spine is a COLUMN flex with
     align-items:center — a child there shrinks to its own text, so the
     link measured 14px wide inside a 30px column no matter what
     display it was given. */
  .dir .spine a{display:flex; align-items:center; justify-content:center;
    align-self:stretch; min-height:24px; min-width:24px}
}