/* The directory.
 *
 * Loaded after blog.css and shares its language deliberately: black page,
 * translucent parchment, one red accent. This is a second reading page on the
 * site, not a second design.
 *
 * The shape of it is the argument. Twelve featured places get cards, because a
 * card is the unit you can sell. Everything under them is a list, because
 * seventy links as seventy cards is a scroll nobody finishes. A directory
 * earns its keep by being scannable, and lists scan.
 */

/* The ground and the panel token both come from blog.css, which loads first
   and is the one place they are defined. Nothing is redeclared here — a second
   copy of a token is a token that will disagree with itself by Thursday. */


/* ---- The hero ----
   A drowned library with one book still lit. It is the only picture on the
   page, so it does the whole job of saying what this is before anyone reads a
   word, and everything under it can then be plain. */
.dir-hero {
    margin: 0 0 1.6em;
    border: 1px solid var(--panel-edge);
    border-radius: var(--panel-radius);
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .55);
}

.dir-hero img {
    display: block;
    width: 100%;
    height: auto;
}

.dir-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 14px 1em;
    box-sizing: border-box;
}

.dir-intro {
    max-width: 62ch;
    margin: 0 auto 2em;
    color: var(--blog-ink-soft);
    font-family: 'Bookinsanity', Georgia, serif;
    font-size: 1.05em;
    line-height: 1.6;
    text-align: center;
}

/* ---- Sections ---- */

/* Surface, border, radius and shadow come from the shared panel rule in
   blog.css. Only the spacing is this page's business. */
.dir-section {
    padding: 1.4em 1.6em 1.5em;
    margin-bottom: 1.5em;
    -webkit-text-fill-color: currentColor;
}

.dir-section h3 {
    font-family: 'Bookinsanity', Georgia, serif;
    font-size: 1.5em;
    line-height: 1.2;
    margin: 0 0 .15em;
    color: var(--blog-ink);
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0;
}

.dir-sub {
    margin: 0 0 1.1em;
    color: var(--blog-ink-faint);
    font-size: .9em;
}

/* ---- Featured: the twelve ----
   Cards, because these are the inventory. Everything else on the page is a
   line of text, which is exactly what makes a card worth paying for. */

.dir-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: .9em;
}

.dir-feature {
    display: flex;
    flex-direction: column;
    /* Swapped 30 Aug 2026: the old hover tint is now the resting colour, the
       old resting colour (the shared glass pane) is now the hover. No border. */
    background: color-mix(in srgb, var(--bg-primary) 24%, transparent);
    gap: .3em;
    padding: .95em 1.05em 1em;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s, transform .15s;
}

.dir-feature:hover {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-tint), transparent);
    transform: translateY(-1px);
    text-decoration: none;
}

/* The shot.
   The top of that company's own home page, cropped to a band. It beats a logo
   for the same reason a photo beats a name on the post cards: you recognise
   the place before you read anything, and a screenshot says "this is a real
   trading business" in a way a floating mark does not.

   Cropped from the top edge rather than the centre, because the brand always
   lives at the top of a home page and centring would cut it off. */
.dir-shot {
    display: block;
    margin: -.95em -1.05em .7em;
    border-bottom: 1px solid var(--blog-hair);
    background: var(--card-well);
    line-height: 0;
    overflow: hidden;
}

.dir-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center top;
    transition: transform .35s ease;
}

.dir-feature:hover .dir-shot img {
    transform: scale(1.03);
}

.dir-feature-name {
    font-family: 'Bookinsanity', Georgia, serif;
    font-size: 1.08em;
    font-weight: 700;
    line-height: 1.2;
    color: var(--blog-ink);
}

.dir-feature:hover .dir-feature-name {
    color: var(--theme-primary-light);
}

.dir-feature-blurb {
    font-size: .875em;
    line-height: 1.45;
    color: var(--blog-ink-soft);
}

/* The domain, so you know where the click goes before you make it. */
.dir-feature-host {
    margin-top: .2em;
    font-size: .74em;
    letter-spacing: .04em;
    text-transform: lowercase;
    color: var(--blog-ink);
}

.dir-note-line {
    margin: 1.3em 0 0;
    padding-top: .9em;
    border-top: 1px solid var(--blog-hair);
    font-size: .84em;
    line-height: 1.55;
    color: var(--blog-ink-faint);
}

.dir-note-line a,
.dir-foot a {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: var(--theme-primary);
    text-decoration-thickness: 2px;
    text-decoration: none;
    font-weight: 600;
}

.dir-note-line a:hover,
.dir-foot a:hover {
    text-decoration: underline;
}

/* ---- Jump nav ---- */

.dir-nav {
    margin: 0 0 1.5em;
    padding: .1em 0 1.2em;
    text-align: center;
    font-size: .88em;
    line-height: 2;
    color: var(--blog-ink-faint);
}

.dir-nav a {
    color: var(--blog-ink-soft);
    text-decoration: none;
    white-space: nowrap;
}

.dir-nav a:hover {
    color: var(--text-footer);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- The tiles ----
   Every entry is a picture now, not a line of text. Sixty-nine rows of name
   and note read as a wall however well written they are; a grid of pictures
   is scannable, and you recognise a place before you read its name.

   Smaller than the featured cards on purpose. Featured is the thing being
   sold, so it stays the biggest object on the page — if a free listing looked
   the same, there would be nothing to buy.

   Every image is loading="lazy". Sixty-nine pictures is most of the page
   weight and none of them are needed until you scroll to them. */
.dir-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: .8em;
}

.dir-tile {
    display: flex;
    flex-direction: column;
    /* Swapped 30 Aug 2026: the old hover tint is now the resting colour, the
       old resting colour (the shared glass pane) is now the hover. No border. */
    background: color-mix(in srgb, var(--bg-primary) 16%, transparent);
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s, transform .15s;
}

.dir-tile:hover {
    background: color-mix(in srgb, var(--bg-primary) var(--glass-tint), transparent);
    transform: translateY(-1px);
    text-decoration: none;
}

.dir-tile-shot {
    display: block;
    line-height: 0;
    background: var(--card-well);
    border-bottom: 1px solid var(--blog-hair);
}

.dir-tile-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center top;
}

.dir-tile-name {
    font-family: 'Bookinsanity', Georgia, serif;
    font-size: .98em;
    font-weight: 700;
    line-height: 1.2;
    color: var(--blog-ink);
    padding: .6em .7em 0;
}

.dir-tile:hover .dir-tile-name {
    color: var(--theme-primary-light);
}

.dir-tile-note {
    font-size: .8em;
    line-height: 1.4;
    color: var(--blog-ink);
    padding: .25em .7em 0;
}

.dir-tile-host {
    margin-top: auto;
    padding: .5em .7em .6em;
    font-size: .7em;
    letter-spacing: .04em;
    color: var(--blog-ink);
}

/* ---- The old lists ----
   Two columns on a wide screen, name and note on one line. A row is one line
   tall wherever it can be, so the eye runs down the names. */

.dir-list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 2em;
}

.dir-list li {
    break-inside: avoid;
    padding: .4em 0;
    border-bottom: 1px solid var(--blog-hair);
    line-height: 1.45;
}

.dir-list li:last-child {
    border-bottom: none;
}

.dir-list a {
    font-weight: 700;
    color: var(--blog-ink);
    text-decoration: none;
}

.dir-list a:hover {
    color: var(--theme-primary-light);
    text-decoration: underline;
}

.dir-note {
    display: block;
    font-size: .85em;
    color: var(--blog-ink-soft);
}

.dir-foot {
    margin: .5em 0 2em;
    text-align: center;
    font-size: .9em;
    color: var(--blog-ink-faint);
}

@media screen and (max-width: 700px) {
    .dir-tiles {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: .6em;
    }
    .dir-list {
        columns: 1;
    }
    .dir-section {
        padding: 1.1em 1.2em 1.2em;
    }
    .dir-features {
        grid-template-columns: 1fr;
    }
}

/* Legibility on bare artwork: a halo behind every piece of text that sits
   directly on the background. The halo colour comes from the theme
   (--text-halo: white on light themes, black on dark ones) so the text is
   never the same colour as its own glow. Static shadows, no blur filters. */
.dir-intro,
.dir-section h3,
.dir-section > p,
.dir-nav,
.dir-feature-name,
.dir-feature-blurb,
.dir-feature-url,
.dir-feature-host,
.dir-tile-name,
.dir-tile-blurb,
.dir-tile-host,
.dir-tile-note,
.dir-tile-name,
.dir-tile-url,
.dir-foot {
    text-shadow:
        -1px -1px 0 var(--text-halo),
         1px -1px 0 var(--text-halo),
        -1px  1px 0 var(--text-halo),
         1px  1px 0 var(--text-halo),
         0 0 6px var(--text-halo),
         0 0 14px color-mix(in srgb, var(--text-halo) 90%, transparent);
}

/* The directory's own tokens, derived from the theme file. */
.dir-wrapper {
    --panel-edge: var(--theme-primary);
    --panel-radius: 8px;
    --blog-hair: var(--border-light);
    --blog-ink: var(--text-primary);
    --blog-ink-soft: var(--text-secondary);
    --blog-ink-faint: var(--text-secondary);
    --panel-tint-hi: transparent;
}
.dir-intro, .dir-section h3, .dir-section > p, .dir-nav, .dir-foot {
    color: var(--text-primary);
}