/* Yours. appgen writes this file once and never touches it again,
   and every page loads it after styles.css, so anything here wins.

   The same paper and ink as the restaurant and cabinet rankings, so the three
   read as one site. The accent comes from the theme and is the blue of the
   wall on the side of the Broad Street building. Ported from the cabinets
   stylesheet without its opening animation, which draws a cabinet and belongs
   to that site. Nothing here depends on JavaScript. */

/* Fonts are linked from the page head (`fonts:` in site.appgen), not
   @imported here, so they load alongside this file rather than after it. */

body {
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.6 var(--sans);
}

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink);
}

a { color: var(--ink); }

::selection { background: #e6d8c6; }

/* ---------------------------------------------------------------- header */

.site-head {
    background: rgba(247, 245, 240, 0.85);
    border-bottom: 1px solid var(--rule);
}
.site-head .wrap { padding-block: 16px; }
.brand { font: 400 1.35rem/1 var(--serif); color: var(--ink); gap: 0; }
.mark { display: none; }
.site-head nav a {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--muted);
    border: 0;
}
.site-head nav a.here { color: var(--ink); }

/* ------------------------------------------------------------------ hero */

.hero {
    background: var(--paper);
    color: var(--ink);
    padding-block: clamp(72px, 14vw, 150px) clamp(40px, 7vw, 72px);
}
.hero h1 {
    color: var(--ink);
    font-size: clamp(3rem, 8.5vw, 6.2rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    max-width: 13ch;
    margin-bottom: 0.35em;
    text-wrap: balance;
}
.hero .lede {
    color: var(--muted);
    font-size: clamp(1.02rem, 1.8vw, 1.18rem);
    max-width: 44ch;
    margin-bottom: 2em;
}

.btn {
    border-radius: 0;
    padding: 0 0 4px;
    border: 0;
    border-bottom: 1px solid currentColor;
    font-weight: 500;
    font-size: 0.95rem;
}
.btn-primary, .btn-primary:hover { background: none; color: var(--ink); }
.hero .btn { flex: none; }
.btn-primary::after { content: " \2193"; }
.btn-primary[href^="http"]::after { content: " \2192"; }
.btn-primary:hover { color: var(--walnut); }

/* --------------------------------------------------------------- bands */

.band { padding-block: clamp(40px, 7vw, 80px); }
.band + .band { border-top: 1px solid var(--rule); }
.band h2 {
    font-size: 0.78rem;
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.6em;
}
.band .intro { color: var(--muted); font-size: 0.98rem; margin-bottom: 2.4em; }
.band-ranking { padding-top: 0; }

.prose { max-width: 60ch; }
.prose p { color: #4a453f; }

/* --------------------------------------------------------------- ranking */

.rank h3 a[href^="http"]::after { content: "\2197"; font-family: var(--sans); font-size: 0.5em; margin-left: 6px; vertical-align: 0.5em; color: var(--muted); transition: transform 0.2s ease; display: inline-block; }
.rank h3 a:hover { color: var(--walnut); background-size: 100% 1px; }
.rank h3 a[href^="http"]:hover::after { transform: translate(2px, -2px); color: var(--walnut); }

.rank-tags li + li::before { content: "  \00b7  "; white-space: pre; }

/* The top pick: more room, larger type, the one place the accent shows. */
.rank-1 .rank-no { font-size: 5rem; color: var(--walnut); }
.rank-1::before {
    content: "Top pick";
    grid-column: 2;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--walnut);
    margin-bottom: 10px;
}
@media (max-width: 560px) {
    .rank, .rank-1 { grid-template-columns: 1fr; }
    .rank-no { font-size: 1.6rem; margin-bottom: 6px; }
    .rank-1 .rank-no { font-size: 3rem; grid-row: auto; }
    .rank-1::before { grid-column: 1; }
}

/* --------------------------------------------------------------- footer */

.site-foot {
    background: var(--paper);
    color: var(--muted);
    border-top: 1px solid var(--rule);
    font-size: 0.85rem;
}
.site-foot strong { color: var(--ink); font-weight: 500; }
.site-foot p:empty { display: none; }
.site-foot .fine { color: var(--muted); }

/* ------------------------------------------------------- entry pages */

.hero .updated { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.02em; margin: -1.2em 0 2em; }
.rank-links { font-size: 0.85rem; color: var(--muted); margin-top: 0.9em; }
.rank-links a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.rank-links a:hover { color: var(--walnut); border-color: currentColor; }
.rank-links a[href^="http"]::after { content: " \2197"; color: var(--muted); }

.crumbs { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.04em; }
.crumbs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); }
.crumbs a:hover { color: var(--walnut); }
.band-entry .prose p { font-size: 1.05rem; }
.band-entry .contact { max-width: 60ch; border-top: 1px solid var(--rule); padding-top: 24px; }
.band-entry .contact dt { font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; }
.band-entry .contact a { color: var(--ink); }
.band-entry .rank-tags { color: var(--muted); font-size: 0.85rem; }
.entry-steps { border-top: 1px solid var(--rule); padding-top: 24px; max-width: 60ch; }
.entry-steps a { color: var(--ink); text-decoration: none; font: 400 1.3rem/1.2 var(--serif); }
.entry-steps a span { font: 500 0.72rem/1.6 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.entry-steps a:hover { color: var(--walnut); }
.btn-primary[href$="#ranking"]::after { content: " \2192"; }
.btn-ghost, .btn-ghost:hover { color: var(--muted); border-color: var(--rule); background: none; }
.btn-ghost:hover { color: var(--walnut); border-color: currentColor; }
/* ------------------------------------------------- the comparison table */

/* Ten shops side by side. Narrow screens scroll it sideways rather than
   squeezing five columns into 320px; the wrapper, not the table, scrolls. */
.compare { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 40rem; }
.compare a:hover { color: var(--walnut); border-color: currentColor; }
.compare tbody tr:first-child td:first-of-type a { color: var(--walnut); }

/* The opening, the hero settle and the rise of the entries moved to the
   generator: they are the house calling card now, not this site's. See
   `motion:` in site.appgen. */