/* Site layer over tokens.css and components.css (decisions/009). Everything here is a var(--token) reference; no colour, font or type-size literals.
   The header, nav, footer, page wrapper and section spacing are app code, not part of the component set (DESIGN.md).
   Themes: Broadside (light) and Night show (dark) come from tokens.css; the theme lives on <html data-theme>. */

.site-wrap { box-sizing: border-box; max-width: var(--layout-max); margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); }
.site-muted { margin: 0; color: var(--ink-muted); }

.site-header { border-bottom: var(--stroke-block) solid var(--border); }
.site-header-row, .site-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.site-wordmark { font: var(--type-display); font-family: var(--font-poster); color: var(--vermilion); text-decoration: none; }
.site-wordmark:hover { color: var(--vermilion-strong); }
.site-nav, .site-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.site-nav a, .site-footer nav a { font: var(--type-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.site-nav a:hover, .site-footer nav a:hover { text-decoration: underline; }

.site-title { padding-top: var(--space-12); }
.site-content { padding-top: var(--space-8); }
.site-content > section, .site-content > nav { margin-top: var(--space-12); }
.site-content > :first-child { margin-top: 0; }
.site-notes { padding-top: var(--space-12); padding-bottom: var(--space-16); }

.site-footer { border-top: var(--stroke-block) solid var(--border); }
.site-footer-row { padding-top: var(--space-8); padding-bottom: var(--space-8); gap: var(--space-6); }

/* Reading text. Headings use the display face; running text stops at the measure. */
main h1 { font: var(--type-display); margin: 0; }
main h2 { font: var(--type-heading); margin: var(--space-8) 0 var(--space-4); }
main h3 { font: var(--type-title); margin: var(--space-6) 0 var(--space-3); }
main p { margin: 0 0 var(--space-4); max-width: var(--layout-measure); }
main ul { padding-left: var(--space-6); }
main li { margin-bottom: var(--space-3); max-width: var(--layout-measure); }
.site-content > section > h2:first-child, .site-content > nav > h2:first-child { margin-top: 0; }
.az-shelf { margin-top: var(--space-6); }
.site-exhibit { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: flex-start; margin-top: var(--space-6); }
.site-exhibit-niche { flex: 1 1 18rem; max-width: 25rem; }
.site-exhibit-text { flex: 1 1 22rem; display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.site-exhibit-text .az-specimen { margin: 0; }
.az-card .az-card-name { margin: 0; }
.az-fieldnotes { margin: 0 auto 0 0; }
.az-fieldnotes-title { margin-top: 0; }

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: calc(-1 * var(--space-16));
  padding: var(--space-2) var(--space-3);
  background: var(--paper-raised);
  font: var(--type-body-s);
}
.skip-link:focus { top: var(--space-2); }

@media (max-width: 40rem) {
  .site-wrap { padding-left: var(--space-4); padding-right: var(--space-4); }
  .site-title { padding-top: var(--space-8); }
}

/* Tool panels (apps with forms): large touch targets, 1rem inputs so phones do not zoom on focus. */
.tool { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-6) 0; max-width: var(--layout-measure); }
.tool-form { display: grid; gap: var(--space-2); font-family: var(--font-sans); }
.tool-form input:not(.az-input), .tool-form select:not(.az-input), .tool-form button:not(.az-btn) {
  font: inherit;
  font: var(--type-body);
  min-height: var(--space-12);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
}
.tool-form button:not(.az-btn) { background: var(--ink); color: var(--paper-raised); font-weight: 600; cursor: pointer; }
.result { font-weight: 600; }
.note { font: var(--type-body-s); color: var(--ink-muted); }

/* Compact frame (AppEntry.compact): tool pages trade header and title height for the first screen. Nothing else changes. */
.site-compact .site-header-row { padding-top: var(--space-2); padding-bottom: var(--space-2); gap: var(--space-2) var(--space-4); }
.site-compact .site-title { padding-top: var(--space-3); }
.site-compact .site-title h1 { font: var(--type-title); }
.site-compact .site-content { padding-top: var(--space-3); }
.site-compact .site-nav { flex-wrap: nowrap; gap: var(--space-3); }
.site-compact .site-nav a { white-space: nowrap; }

/* Phone width: the compact header stays on one line when it fits, and wraps rather than overflowing when it does not. */
@media (max-width: 40rem) {
  .site-compact .site-header-row { flex-wrap: wrap; }
  .site-compact .site-nav { gap: var(--space-2); }
}

/* Exhibit hero: sized by tokens, and the theme's motif sizes (the skill's markup sets these inline). The compact variant is the tool-first form (decisions/016). */
.site-hero-corner { --motif-size: 16rem; }
.site-hero-rule { --motif-size: 1.4rem; }
.az-exhibit-hero-compact .az-exhibit-hero-band { padding: var(--space-3) var(--space-6); }
.az-exhibit-hero-compact .az-exhibit-eyebrow { margin-bottom: var(--space-2); }
.az-exhibit-hero-compact .az-exhibit-title { max-width: none; font: var(--type-title); }
@media (max-width: 40rem) {
  .az-exhibit-hero-band { padding: var(--space-8) var(--space-4); }
  .az-exhibit-hero-compact .az-exhibit-hero-band { padding: var(--space-2) var(--space-4); }
  /* The catalog line gives way on a phone: the specimen label below repeats it, and the tool's control needs the height. */
  .az-exhibit-hero-compact .az-exhibit-eyebrow { display: none; }
}

/* A row that scrolls sideways shows a shadow on each edge that has more beyond it (the cover gradients ride with the
   content, so a shadow disappears at the end of the scroll). It paints behind the content, so it never hides a tab. */
.site-scroll-hint {
  --hint-bg: var(--paper);
  background:
    linear-gradient(to right, var(--hint-bg) 30%, transparent) left center / var(--space-8) 100% no-repeat local,
    linear-gradient(to left, var(--hint-bg) 30%, transparent) right center / var(--space-8) 100% no-repeat local,
    linear-gradient(to right, var(--rule), transparent) left center / var(--space-4) 100% no-repeat scroll,
    linear-gradient(to left, var(--rule), transparent) right center / var(--space-4) 100% no-repeat scroll;
}

/* Rich compact hero (richHero): the tool-first hero keeps its theme's corner motif and foot rule.
   Phone: a small corner motif beside the short title, hero stays slim. Wide: it grows toward the exhibit reference, and the tool's control still starts in the first screen. */
.az-exhibit-hero-rich .site-hero-corner { --motif-size: 3rem; }
.az-exhibit-hero-rich > .az-motif.az-exhibit-corner { display: inline-block; right: var(--space-4); }
.az-exhibit-hero-rich .az-exhibit-hero-band { padding-bottom: var(--space-4); }
.az-exhibit-hero-rich > .site-hero-rule { bottom: 0; }
@media (min-width: 75rem) {
  .az-exhibit-hero-rich .site-hero-corner { --motif-size: 16rem; }
  .az-exhibit-hero-rich > .az-motif.az-exhibit-corner { right: var(--space-6); }
  .az-exhibit-hero-rich .az-exhibit-hero-band { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 18rem; padding: var(--space-6) var(--space-6) var(--space-8); }
  .az-exhibit-hero-rich .az-exhibit-title { font: var(--type-display); }
}

/* Field notes (/field-notes): the curator's notebook. Entries are ruled pages with a margin line; tokens only. */
.site-note-lead { font: var(--type-lead); }
.site-note { padding-left: var(--space-6); border-left: var(--stroke-block) solid var(--marigold); }
.site-note > :last-child { margin-bottom: 0; }
.site-note .site-exhibit { margin-bottom: var(--space-6); }
.site-note-margin { color: var(--ink-muted); font-style: italic; }
@media (max-width: 40rem) {
  .site-note { padding-left: var(--space-4); }
}