/* Articles: what an article page and the /articles listing add on top of
   resort.css. The page is a resort guide in structure (numbered sections, the
   rail, the reference list), so this file only covers what a guide does not
   have: a byline, long-form lists, raster figures and the listing cards. It
   defines no tokens and no typefaces. */

.art-meta {
    margin: 16px 0 0;
    font-family: var(--sans);
    font-size: 0.8125rem;
    color: var(--ink-soft);
}

.art-draft {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--rule-strong);
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-mid);
}

.art-intro { padding: clamp(30px, 5vw, 48px) 0 clamp(8px, 2vw, 16px); }
.art-intro > p { max-width: var(--measure); margin: 0 0 18px; }
.art-intro > p:first-child { font-size: 1.125rem; line-height: 1.6; }
.art-answer {
    padding: 18px 22px;
    background: var(--paper-sunk);
    border: 1px solid var(--rule);
    border-radius: 4px;
}
.art-answer strong { font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0.01em; }

.art .sec h3, .art-h3 { font-size: 1.125rem; margin: 28px 0 10px; }

.art-list {
    max-width: var(--measure);
    margin: 0 0 20px;
    padding-left: 1.15em;
}
.art-list li { margin: 0 0 8px; padding-left: 4px; }
.art-list li::marker { color: var(--ink-soft); }

.art code {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.86em;
    padding: 0 3px;
    background: var(--paper-sunk);
    border-radius: 3px;
}

/* Figures are rasters, so they are found in image search. They keep the
   light plate in both themes, as the trail maps do; the hairline keeps the
   plate from bleeding into a light page. */
.art-fig { margin: 30px 0 34px; }
.art-fig img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    background: #f7f4ee;
}
.art-fig figcaption { max-width: var(--measure); }
.art-fig-n { font-weight: 600; color: var(--ink-mid); }
.art-fig-zoom { display: block; cursor: zoom-in; }
.art-intro .art-fig { margin-top: 26px; }

.art-table tbody th { min-width: 0; }
.art-table td:last-child { color: var(--ink-mid); }
.art .idx-scroll + .figure-note { margin-top: 12px; }

.art .faq-item p { margin-bottom: 14px; }

/* ---------- listing ---------- */

.art-cards {
    list-style: none;
    margin: clamp(30px, 5vw, 48px) 0 0;
    padding: 0;
    display: grid;
    gap: 34px;
}
@media (min-width: 760px) { .art-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.art-card a { display: block; color: inherit; text-decoration: none; }
.art-card img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    background: #f7f4ee;
    margin-bottom: 16px;
}
.art-card-title {
    display: block;
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.art-card a:hover .art-card-title { text-decoration: underline; text-underline-offset: 3px; }
.art-card-desc { display: block; margin-top: 8px; color: var(--ink-mid); }
.art-card-meta {
    display: block;
    margin-top: 10px;
    font-family: var(--sans);
    font-size: 0.8125rem;
    color: var(--ink-soft);
}