/* Southwest Archaeology Notebook, design system "sa-".
   Theme: red sandstone, ochre, desert-sky patina and cream paper.
   Typographic hero built like a park interpretive panel, numbered strata
   01-06, asymmetric test-pit mosaic, dated field journal. Serif Iowan
   and Palatino for titles and drop caps, system sans for reading text.
   No external request, no webfont, no gimmick animation, automatic
   dark mode, 150 ms hover and focus, print rules. */

:root {
  --sable: #f6f1e6;
  --sable-creux: #ebe2cd;
  --sable-vif: #faf6ec;
  --gres: #a04526;
  --gres-fonce: #7d3418;
  --ocre: #8f6f28;
  --ciel: #2f6a63;
  --encre: #2c2318;
  --encre-nuit: #211a10;
  --encre-douce: #6d5f4c;
  --filet: #d7c9ab;
  --filet-fort: #b7a683;
  --caps-interlettrage: 0.22em;
  --serif: "Iowan Old Style", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sable: #171310;
    --sable-creux: #201a15;
    --sable-vif: #1d1813;
    --gres: #d0703f;
    --gres-fonce: #e08a58;
    --ocre: #c2a04c;
    --ciel: #6fb3aa;
    --encre: #ece3d0;
    --encre-nuit: #100c09;
    --encre-douce: #a99a82;
    --filet: #3c3325;
    --filet-fort: #57492f;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sable);
  color: var(--encre);
  font-family: var(--sans);
  font-size: clamp(1.01rem, 0.96rem + 0.22vw, 1.13rem);
  line-height: 1.62;
}
::selection { background: var(--gres); color: var(--sable); }
a { color: var(--gres); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
a:hover { color: var(--gres-fonce); }
:focus-visible { outline: 2px solid var(--ciel); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.14; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.15rem, 1.15rem + 3.6vw, 4.1rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.28rem); }
h3 { font-size: clamp(1.13rem, 1.02rem + 0.55vw, 1.42rem); }
p { margin: 0 0 1em; }
strong { color: var(--gres-fonce); }
time { font-variant-numeric: tabular-nums; }

.sa-evite {
  position: absolute; left: -100vw; top: 0;
  background: var(--gres); color: var(--sable); padding: 0.6em 1em; z-index: 20;
}
.sa-evite:focus { left: 0; }

/* Chemin: the trail the whole layout walks on. */
.sa-chemin { max-width: 1360px; margin: 0 auto; padding: 0 clamp(1.1rem, 3.2vw, 3rem); }

/* Seuil: the header threshold, like the lintel of a field house. */
.sa-seuil { border-bottom: 2px solid var(--gres); background: var(--sable); }
.sa-seuil__rang { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 2rem; padding-top: 1.15rem; padding-bottom: 0.95rem; }
.sa-seuil__mot { font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 700; color: var(--encre); text-decoration: none; letter-spacing: 0.01em; }
.sa-seuil__mot:hover { color: var(--gres); }
.sa-seuil__mot span { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: var(--caps-interlettrage); text-transform: uppercase; color: var(--encre-douce); margin-top: 0.28rem; }
.sa-sentiers ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.sa-sentiers a { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--encre); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 0.2rem; }
.sa-sentiers a:hover { color: var(--gres); border-bottom-color: var(--gres); }
.sa-sentiers a[aria-current="page"] { color: var(--gres); border-bottom-color: var(--gres); }

/* Panneau: the home hero, composed like an interpretive panel at a
   park trailhead: framed text on cream, no photograph needed. */
.sa-panneau { border-bottom: 1px solid var(--filet); background: var(--sable-vif); }
.sa-panneau__cadre {
  border-top: 3px double var(--filet-fort);
  border-bottom: 3px double var(--filet-fort);
  padding: clamp(2.2rem, 4.5vw, 4rem) 0 clamp(1.8rem, 3.6vw, 3rem);
}
.sa-panneau__rang { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1.5rem; font-size: 0.74rem; letter-spacing: var(--caps-interlettrage); text-transform: uppercase; color: var(--encre-douce); border-bottom: 1px solid var(--filet); padding-bottom: 0.75rem; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.sa-panneau__rang strong { color: var(--gres); font-weight: 700; }
.sa-panneau h1 { max-width: 24ch; margin-bottom: 0.4em; }
.sa-panneau__titre-accent { color: var(--gres); }
.sa-panneau__chapo { max-width: 62ch; font-size: clamp(1.05rem, 1rem + 0.45vw, 1.28rem); color: var(--encre); }
.sa-panneau__unites { display: flex; flex-wrap: wrap; gap: 0.3rem 0.65rem; align-items: center; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ocre); margin-top: 1.6rem; }
.sa-panneau__unites em { font-style: normal; color: var(--filet-fort); }
.sa-panneau__signe { display: flex; gap: 1.1rem; align-items: center; margin-top: 1.7rem; padding-top: 1rem; border-top: 1px solid var(--filet); color: var(--gres); }
.sa-glyphe { flex: none; display: inline-block; vertical-align: -0.18em; }

/* Fil: the breadcrumb, always class="breadcrumb sa-fil". */
.sa-fil { padding: 1.05rem 0 0; font-size: 0.8rem; }
.sa-fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; color: var(--encre-douce); }
.sa-fil li + li::before { content: "\203A"; margin-right: 0.35rem; color: var(--filet-fort); }
.sa-fil a { color: var(--encre-douce); }
.sa-fil a:hover { color: var(--gres); }
.sa-fil [aria-current="page"] { color: var(--gres); font-weight: 600; }

/* Strate: numbered section bands, the cultural layers of the site. */
.sa-strate { padding: clamp(2.4rem, 5vw, 4.2rem) 0; }
.sa-strate--creux { background: var(--sable-creux); }
.sa-strate__tete { display: flex; align-items: baseline; gap: 1.1rem; border-top: 1px solid var(--filet-fort); padding-top: 1.05rem; margin-bottom: 0.4rem; }
.sa-strate__numero { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); color: var(--gres); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; flex: none; }
.sa-strate__titre { margin: 0; }
.sa-strate__note { max-width: 66ch; color: var(--encre-douce); margin: 0 0 1.9rem; }

/* Plaque: small-caps overline used across the site. */
.sa-plaque { font-size: 0.74rem; letter-spacing: var(--caps-interlettrage); text-transform: uppercase; color: var(--gres); margin: 0 0 0.55rem; }

/* Sondages: the asymmetric test-pit mosaic. Six-column grid, mixed
   spans and two vertical offsets so no two rows read alike. */
.sa-sondages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1.1rem, 2.4vw, 1.9rem); }
.sa-sondage { grid-column: span 2; }
.sa-sondage--plein { grid-column: 1 / -1; }
.sa-sondage--large { grid-column: span 4; }
.sa-sondage--petit { grid-column: span 2; }
@media (min-width: 900px) {
  .sa-sondage--butte { transform: translateY(1.4rem); }
  .sa-sondage--butte2 { transform: translateY(-1.4rem); }
}
.sa-sondage__cadre { position: relative; overflow: hidden; background: var(--sable-creux); }
.sa-sondage__cadre--pano { aspect-ratio: 21 / 9; }
.sa-sondage__cadre--paysage { aspect-ratio: 4 / 3; }
.sa-sondage__cadre--carre { aspect-ratio: 1 / 1; }
.sa-sondage__cadre--portrait { aspect-ratio: 3 / 4; }
.sa-sondage__cadre--haut { aspect-ratio: 16 / 7; }
.sa-sondage__vue { width: 100%; height: 100%; object-fit: cover; transition: transform 150ms ease; }
.sa-sondage:hover .sa-sondage__vue { transform: scale(1.015); }
.sa-sondage__etiquette { padding: 0.8rem 0 0; position: relative; }
.sa-sondage__titre { margin: 0 0 0.3rem; }
.sa-sondage__titre a.sa-sondage__lien { color: var(--encre); text-decoration: none; }
.sa-sondage__titre a.sa-sondage__lien::after { content: ""; position: absolute; inset: 0; }
.sa-sondage__titre a.sa-sondage__lien:hover { color: var(--gres); }
.sa-sondage__note { font-size: 0.92rem; color: var(--encre-douce); margin: 0; }
.sa-sondage__indication { font-size: 0.74rem; letter-spacing: var(--caps-interlettrage); text-transform: uppercase; color: var(--ocre); margin: 0.6rem 0 0; }

/* Denser variant used inside strate pages. */
.sa-sondages--denses { gap: 1.3rem; }

/* Journal: the dated field notebook feed. */
.sa-journal { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(1.6rem, 3.4vw, 3rem); }
.sa-entree { break-inside: avoid; display: flex; gap: 1rem; padding: 1.05rem 0; border-top: 1px solid var(--filet); margin: 0; }
.sa-entree__vue { width: 118px; height: 89px; object-fit: cover; flex: none; background: var(--sable-creux); }
.sa-entree h3 { margin: 0 0 0.25rem; font-size: 1.08rem; }
.sa-entree h3 a { color: var(--encre); text-decoration: none; }
.sa-entree h3 a:hover { color: var(--gres); }
.sa-entree p { font-size: 0.88rem; color: var(--encre-douce); margin: 0; }
.sa-jour { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ocre); margin: 0 0 0.3rem; font-variant-numeric: tabular-nums; }

/* Ouverture: the head of a guide, panel style. */
.sa-ouverture { padding-top: clamp(1.6rem, 3.4vw, 2.8rem); }
.sa-ouverture h1 { max-width: 26ch; }
.sa-ouverture__chapo { max-width: 58ch; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.24rem); color: var(--encre-douce); }
.sa-indications { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; margin: 1.1rem 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--filet); font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--encre-douce); }
.sa-indications li + li::before { content: "\00B7"; margin-right: 0.5rem; color: var(--filet-fort); }
.sa-indications a { color: var(--encre-douce); }
.sa-indications a:hover { color: var(--gres); }

/* Planche: the full-width lead image of a page. */
.sa-planche { margin: 1.6rem auto 0; }
.sa-planche__vue { width: 100%; border: 1px solid var(--filet); background: var(--sable-creux); }

/* Colonne: the reading column with a sandstone drop cap. */
.sa-colonne { max-width: 64ch; padding-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.sa-colonne > p:first-of-type::first-letter {
  font-family: var(--serif); font-size: 3.15em; line-height: 0.82;
  float: left; padding: 0.06em 0.12em 0 0; color: var(--gres); font-weight: 700;
}
@media (max-width: 760px) { .sa-colonne > p:first-of-type::first-letter { float: none; font-size: inherit; color: inherit; font-weight: inherit; padding: 0; } }
.sa-colonne h2 { margin-top: 2.1rem; padding-top: 0.85rem; border-top: 1px solid var(--filet); }
.sa-colonne ul, .sa-colonne ol { padding-left: 1.25rem; }
.sa-colonne li { margin-bottom: 0.45rem; }

/* Materiel: the field checklist, squares ticked like survey forms. */
.sa-materiel { list-style: none; padding: 0; margin: 1.1rem 0 1.4rem; }
.sa-materiel li { position: relative; padding: 0.55rem 0 0.55rem 2rem; border-top: 1px solid var(--filet); }
.sa-materiel li:last-child { border-bottom: 1px solid var(--filet); }
.sa-materiel li::before { content: ""; position: absolute; left: 0.1rem; top: 0.85rem; width: 0.72rem; height: 0.72rem; border: 2px solid var(--gres); border-radius: 1px; }

/* Tablette: the data table, framed like a clay tablet. */
.sa-tablette { overflow-x: auto; margin: 1.3rem 0 1.6rem; border: 1px solid var(--filet-fort); background: var(--sable-vif); }
.sa-tablette table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.92rem; }
.sa-tablette caption { caption-side: top; text-align: left; padding: 0.8rem 1rem 0.5rem; font-size: 0.74rem; letter-spacing: var(--caps-interlettrage); text-transform: uppercase; color: var(--ocre); }
.sa-tablette th { background: var(--encre-nuit); color: var(--sable); text-align: left; padding: 0.6rem 0.85rem; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sa-tablette td { padding: 0.6rem 0.85rem; border-top: 1px solid var(--filet); vertical-align: top; }
.sa-tablette tbody tr:nth-child(even) td { background: var(--sable-creux); }
.sa-tablette td:first-child { font-variant-numeric: tabular-nums; }

/* Note, fiche: aside boxes. */
.sa-note { background: var(--sable-vif); border: 1px solid var(--filet-fort); border-left: 4px solid var(--ciel); padding: 1rem 1.2rem; margin: 1.5rem 0; }
.sa-note p:last-child { margin-bottom: 0; }
.sa-fiche { background: var(--encre-nuit); color: var(--sable); padding: 1.25rem 1.35rem; margin: 1.6rem 0; }
.sa-fiche h3 { color: var(--gres); margin-top: 0; }
.sa-fiche p:last-child { margin-bottom: 0; }
@media (prefers-color-scheme: dark) { .sa-fiche { background: var(--sable-creux); color: var(--encre); border: 1px solid var(--filet-fort); } }

/* Suite: read-next links inside sentences, double hairline aside. */
.sa-suite { margin: 2.4rem 0 0; border-top: 3px double var(--filet-fort); padding-top: 1.1rem; }
.sa-suite h2 { font-size: 1.15rem; letter-spacing: var(--caps-interlettrage); text-transform: uppercase; font-family: var(--sans); font-weight: 700; color: var(--encre-douce); }
.sa-suite ul { list-style: none; margin: 0; padding: 0; }
.sa-suite li { padding: 0.5rem 0; border-bottom: 1px solid var(--filet); }

/* Spirale: the petroglyph spiral separating the great bands. */
.sa-spirale { display: flex; justify-content: center; padding: clamp(1.4rem, 3vw, 2.2rem) 0; color: var(--gres); background: transparent; }
.sa-spirale svg { display: block; }

/* Tranchee: the footer, cut like a stratigraphic trench. */
.sa-tranchee { background: var(--encre-nuit); color: var(--sable); margin-top: 2rem; }
.sa-tranchee h2 { font-size: 0.78rem; letter-spacing: var(--caps-interlettrage); text-transform: uppercase; font-family: var(--sans); color: var(--ocre); margin: 0 0 0.8rem; }
.sa-tranchee__rang { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.8rem; padding-top: 2.4rem; padding-bottom: 1.6rem; }
.sa-tranchee ul { list-style: none; margin: 0; padding: 0; }
.sa-tranchee li { margin-bottom: 0.5rem; font-size: 0.92rem; }
.sa-tranchee a { color: var(--sable); text-decoration: none; border-bottom: 1px solid var(--filet-fort); }
.sa-tranchee a:hover { color: var(--gres); border-bottom-color: var(--gres); }
.sa-tranchee__bas { border-top: 1px solid var(--filet-fort); padding-top: 1.05rem; padding-bottom: 1.4rem; font-size: 0.8rem; color: var(--encre-douce); }
.sa-tranchee__bas .sa-glyphe { color: var(--gres); }

@media (max-width: 860px) {
  .sa-sondages { grid-template-columns: repeat(2, 1fr); }
  .sa-sondage, .sa-sondage--large, .sa-sondage--petit { grid-column: span 2; }
  .sa-sondage--plein { grid-column: 1 / -1; }
  .sa-sondage--butte, .sa-sondage--butte2 { transform: none; }
  .sa-journal { columns: 1; }
}
@media (min-width: 861px) and (max-width: 1120px) {
  .sa-sondages { grid-template-columns: repeat(4, 1fr); }
  .sa-sondage, .sa-sondage--petit { grid-column: span 2; }
  .sa-sondage--large { grid-column: span 4; }
  .sa-sondage--plein { grid-column: 1 / -1; }
}

@media print {
  .sa-seuil, .sa-tranchee, .sa-spirale, .sa-suite, .sa-fil { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sa-colonne { max-width: none; }
  a { color: #000; text-decoration: underline; }
}