/* directory.css: the Work page, /projects.

   The first version of this page (v7.16) borrowed a directory from
   elsewhere: a serif title, a tinted banner with a line drawing, icon
   tiles in rounded cards. Shad's note on it was that it looked like
   somebody else's homepage, and it did. This one is built from the
   platform's own parts and nothing else: the kicker, the display face with
   its muted second half, the mono chips, the thin rules, .btn and
   .btn.primary, the shelf plate every other page draws its sections with,
   and the landing strip's card (a still, a number chip on the file's
   ground, a title, a line, a mono footer). Every colour is a token, so
   both themes and the AA floors on --text-3 and --line carry over. It is
   still the one page on the site built from cards on purpose; boxes.mjs
   does not list it, and the case files keep their unboxed sheets.

   Each card may carry its file's ground and accent as --cg, --con and
   --cacc, set inline from the skin blocks in site.css, so the number chip
   wears the file's own deep colour and the card's hover rule its accent,
   in both themes. The type stays the page's own. */

.dir{max-width:1160px;margin:0 auto;padding:clamp(24px,4vw,44px) clamp(16px,4vw,40px) 72px}
.dir [hidden]{display:none !important}

/* ---- the head: kicker, title, lede, the shelf ------------------------ */
.dir-head .kicker{margin-bottom:10px}
.dir-head h1{margin:0;font:800 clamp(30px,4.2vw,48px)/1.04 var(--display);letter-spacing:-.025em;color:var(--text);max-width:22ch}
.dir-head .lede{margin:12px 0 0;font:400 14.5px/1.6 var(--ui);color:var(--text-2);max-width:70ch}
.dir-head .lede em{font-style:normal;font-weight:500;color:var(--text)}
.dir-shelf{margin:26px 0 0;padding:0}
.dir-shelf .secplate-box{height:clamp(210px,28vh,300px)}
.dir-shelf > figcaption{margin:10px 0 0}

/* ---- the bar: filter chips, the search, the CV ----------------------- */
.dir-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.dir-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex:1 1 auto}
.dir-seg{display:inline-flex;gap:4px;flex-wrap:wrap}   /* four chips with counts are 329px; at 320 they wrap (v7.24) */
.dir-seg button{
  height:28px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg-raised);
  display:inline-flex;align-items:center;gap:6px;
  font:600 max(10.5px,var(--floor))/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);cursor:pointer;
  transition:background-color var(--snap),border-color var(--snap),color var(--snap);
}
.dir-seg button:hover{border-color:var(--text-3);color:var(--text)}
.dir-seg button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.dir-search{
  display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;flex:0 1 280px;min-width:180px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg-raised);color:var(--text-3);
}
.dir-search svg{flex:none}
.dir-search input{flex:1;min-width:0;align-self:stretch;border:0;background:none;outline:0;font:400 13px var(--ui);color:var(--text)}
.dir-search input::placeholder{color:var(--text-3);opacity:1}
.dir-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dir-cta{margin-left:auto}

/* ---- the featured file ---------------------------------------------- */
.dir-feature{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(20px,3vw,40px);
  margin-top:28px;padding:clamp(20px,2.6vw,30px);
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-raised);
}
.dir-feature h2{margin:0;font:800 clamp(24px,2.6vw,34px)/1.08 var(--display);letter-spacing:-.022em;color:var(--text)}
.dir-feature .desc{margin:12px 0 0;font:400 14px/1.6 var(--ui);color:var(--text-2);max-width:56ch;text-wrap:pretty}
.dir-feature .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
/* the running product, in a window: a still of the real thing, beside
   the button that opens it (one link per destination per screen) */
.dir-shot{display:block;border:1px solid var(--line-strong);border-radius:var(--r-m);overflow:hidden;background:var(--bg-raised)}
.dir-shot-bar{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-bottom:1px solid var(--line)}
.dir-shot-bar i{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.dir-shot-bar b{margin-left:8px;font:500 max(9.5px,var(--floor)) var(--mono);letter-spacing:.06em;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dir-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--bg-sunken)}

/* ---- the sections and the cards ------------------------------------- */
.dir-sec{margin-top:44px}
.dir-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.dir-sec h2{margin:0;font:700 clamp(18px,1.8vw,22px)/1.2 var(--display);letter-spacing:-.015em;color:var(--text)}
.dir-sechead p{margin:0;font:500 max(10.5px,var(--floor)) var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);text-align:right}
.dir-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dir-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* the landing strip's card, standing in a grid: no radius beyond the
   house one, no shadow, no lift */
.dir-card{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-raised);overflow:hidden;
  transition:border-color var(--snap);
}
.dir-card:hover{border-color:var(--cacc,var(--line-strong))}
.dir-card:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.dir-card a.hit{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.dir-card a.hit:focus-visible{outline:none}
.dir-card .bthumb{display:block;position:relative;aspect-ratio:16/10;background:var(--bg-sunken);border-bottom:1px solid var(--line);overflow:hidden}
.dir-card .bthumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.dir-card .bn{
  position:absolute;top:0;left:0;z-index:2;padding:5px 9px;
  background:var(--cg,var(--ground));color:var(--con,var(--on-ground));
  font:600 max(10px,var(--floor)) var(--mono);letter-spacing:.12em;
}
.dir-card .meta{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.dir-card h3{margin:0;font:700 clamp(17px,1.4vw,20px)/1.12 var(--display);letter-spacing:-.02em;color:var(--text)}
.dir-card a.hit:hover h3{color:var(--accent-text)}
.dir-card .desc{margin:0;font:400 12.5px/1.5 var(--ui);color:var(--text-2);text-wrap:pretty}
.dir-card .bm{margin-top:auto;padding-top:6px;font:500 max(10px,var(--floor))/1.4 var(--mono);letter-spacing:.07em;color:var(--text-3);text-transform:uppercase}
.dir-card:has(.dir-try) .bm{padding-right:92px}
/* the small action sits above the card's own link, bottom right */
.dir-try{position:absolute;right:12px;bottom:12px;z-index:2;height:26px;padding:0 10px;font-size:12px;gap:6px}
.dir-empty{margin:40px 0 0;font:400 14px var(--ui);color:var(--text-2)}

.dir-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:56px;padding-top:18px;border-top:1px solid var(--line)}
.dir-foot .who{font:700 14px var(--display);color:var(--text)}
.dir-foot .who small{display:block;margin-top:3px;font:500 max(10px,var(--floor)) var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.dir-foot .links{display:flex;flex-wrap:wrap;gap:8px}

@media(max-width:1000px){
  .dir-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .dir-feature{grid-template-columns:minmax(0,1fr)}
  .dir-shot{order:-1}
  .dir-search{flex:1 1 100%}
  .dir-cta{margin-left:0}
}
@media(max-width:640px){
  .dir-grid,.dir-grid.three{grid-template-columns:minmax(0,1fr)}
  .dir-sechead{flex-direction:column;align-items:flex-start;gap:4px}
  .dir-sechead p{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .dir-card,.dir-seg button{transition:none}
}
@media print{
  .dir-bar,.dir-try,.dir-shelf{display:none}
  .dir-feature,.dir-card{background:none;border:1px solid #999}
}

/* the count in a filter chip (v7.24) */
.dir-tools [data-filter] small{font:500 max(10px,var(--floor)) var(--mono);color:var(--text-3);padding:1px 5px;border-radius:999px;background:var(--bg-sunken)}
.dir-tools [data-filter][aria-pressed="true"] small{color:inherit;background:color-mix(in srgb, currentColor 14%, transparent)}


/* ---- v7.48: the cool layer on the directory ------------------------- */
/* the grid focuses on the pointed card: its still swells a little (the
   picture, not the image: stagecraft 7 scrubs the image's transform with
   the scroll) and the others lose some colour; the window's still tilts
   toward the hand (stagecraft 16); the chips' counts take the ink */
@media(hover:hover){
  .dir-card .bthumb picture{display:block;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .dir-card:hover .bthumb picture{transform:scale(1.03)}
  .dir-card .bthumb img{transition:filter .35s ease}
  .dir-grid:has(.dir-card:hover) .dir-card:not(:hover) .bthumb img{filter:saturate(.5)}
  .dir-card .desc,.dir-card .bm{transition:color var(--snap)}
  .dir-grid:has(.dir-card:hover) .dir-card:not(:hover) .desc{color:var(--text-3)}
  .dir-seg button small{transition:color var(--snap),background-color var(--snap)}
  .dir-seg button:hover small{color:var(--text)}
  .dir-shot-bar i{transition:background-color var(--snap)}
  .dir-feature:hover .dir-shot-bar i:nth-child(1){background:#ff5f57}
  .dir-feature:hover .dir-shot-bar i:nth-child(2){background:#febc2e}
  .dir-feature:hover .dir-shot-bar i:nth-child(3){background:#28c840}
}
@media(prefers-reduced-motion:reduce){.dir-card .bthumb picture,.dir-card .bthumb img{transition:none}}

/* ------------------------------------------------------------
   v7.50: the Work page's own pieces (site.css carries the shared ones
   and the law; app.js writes --mx and --my where the hand is, and the
   thumb's place on the segmented filter)
   ------------------------------------------------------------ */
@media(hover:hover) and (pointer:fine){
  /* a sheen follows the hand across the pointed card: the accent at a
     tenth, radial, over the card, opacity only */
  .dir-card::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--snap);
    background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 11%,transparent),transparent 70%)}
  .dir-card:hover::before{opacity:1}
  /* the card lifts a hair; its number takes the accent and steps */
  .dir-card{transition:border-color var(--snap),translate var(--snap)}
  .dir-card:hover{translate:0 -2px}
  .dir-card .bn{transition:background-color var(--snap),color var(--snap),translate var(--snap)}
  .dir-card:hover .bn{background:var(--accent);color:#fff;translate:2px 0}
  [data-theme="dark"] .dir-card:hover .bn{color:#0b1020}
  /* the grid's titles recede with its stills round the pointed card */
  .dir-card h3{transition:color var(--snap)}
  .dir-grid:has(.dir-card:hover) .dir-card:not(:hover) h3{color:var(--text-2)}
  /* the foot's links lift a hair */
  .dir-foot .links a{transition:translate var(--snap)}
  .dir-foot .links a:hover{translate:0 -1px}
}
/* the keyboard twins */
.dir-grid:has(.dir-card:focus-within) .dir-card:not(:focus-within) h3{color:var(--text-2)}
.dir-card:focus-within .bn{background:var(--accent);color:#fff}
[data-theme="dark"] .dir-card:focus-within .bn{color:#0b1020}
/* the segmented filter's thumb slides to the pressed name on the spring
   (app.js writes --sx, --sy, --sw, --sh from aria-pressed); the pressed
   button gives up its own ground so there is one thumb, not two */
.dir-seg{position:relative}
.dir-seg[data-slide]::before{content:'';position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);
  border-radius:var(--r-s);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);pointer-events:none;
  transition:left var(--spring),top var(--spring),width var(--spring)}
.dir-seg[data-slide] button{position:relative;z-index:1}
.dir-seg[data-slide] button[aria-pressed="true"]{background:none;border-color:transparent}
@media(prefers-reduced-motion:reduce){.dir-seg[data-slide]::before{transition:none}}