/* 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, cabinet and climbing rankings, so
   the four read as one site. The accent comes from the theme. Ported from the
   climbing stylesheet without its opening animation, which draws a boulder
   problem 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(--accent); }

/* --------------------------------------------------------------- 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(--accent); background-size: 100% 1px; }
.rank h3 a[href^="http"]:hover::after { transform: translate(2px, -2px); color: var(--accent); }

.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(--accent); }
.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(--accent);
    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); }
/* The base sheet greens footer links for a dark footer; this one is paper. */
.site-foot .fine a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.site-foot .fine a:hover { color: var(--ink); border-color: currentColor; }

/* ------------------------------------------------------- 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(--accent); 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(--accent); }
.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(--accent); }
.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(--accent); border-color: currentColor; }

/* ------------------------------------------------- the comparison table */

/* Ten parks side by side. Narrow screens scroll it sideways rather than
   squeezing four 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(--accent); border-color: currentColor; }
.compare tbody tr:first-child td:first-of-type a { color: var(--accent); }