/* ==========================================================================
   DESERT — one page. Loaded on a/desert.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A sky, a low sun and a layered landscape under heat haze (the one motion,
   desert.js; still under reduced motion), then the record as a descent:
   six strata, each darker than the last, each with a jagged top edge. The
   shell (rail, top bar, community drawer) is never restyled: every rule
   here is scoped to .ds-hero or .ds-rec.

   Colour (earthy gradient, SUPPORTED; the values are ours), shallow to deep:
   s1 #F4E8DA · s2 #EED9C4 · s3 #E4C29A · s4 #C98F52 · s5 #A5563F
   s6 #6E4438 · s7 #4A2E22 · rose #F0DCCF
   Ink per stratum, checked against WCAG AA at body size:
   st1 #4A2E22 9.0 · st2 #4A2E22 7.3 · st3 #3A2219 5.3 · st4 #FFF 5.3
   st5 #F4E8DA 6.8 · st6 #F4E8DA 10.2
   ========================================================================== */
@font-face {
  font-family: "Faustina DS";
  src: url("fonts/faustina.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Faustina DS";
  src: url("fonts/faustina-italic.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

.ds-page {
  --ds-s1: #F4E8DA;
  --ds-s2: #EED9C4;
  --ds-s3: #E4C29A;
  --ds-s4: #C98F52;
  --ds-s5: #A5563F;
  --ds-s6: #6E4438;
  --ds-s7: #4A2E22;
  --ds-ink3: #3A2219;
  --ds-face: "Faustina DS", Georgia, serif;
}
.ds-page main { background: var(--ds-s1); color: var(--ds-s7); overflow-x: hidden; }

/* ---- shared register: both roots, nothing outside them ---------------- */
.ds-hero, .ds-rec { font: 400 19px/1.65 var(--ds-face); color: var(--ds-s7); }
.ds-hero a, .ds-rec a { color: inherit; text-decoration-color: currentColor; text-underline-offset: 4px; }
.ds-hero :focus-visible, .ds-rec :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* ---- hero: sky, sun, landscape, haze ----------------------------------- */
.ds-hero {
  position: relative;
  height: min(92vh, 860px);
  min-height: 520px;
  overflow: hidden;
  background: linear-gradient(#F7EEE2 0%, #F0DCCF 45%, #EED9C4 60%);
}
.ds-sun {
  position: absolute; left: 62%; top: 20%;
  width: clamp(110px, 16vw, 200px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #FFF6E6, #F2CFA3 60%, rgba(242, 207, 163, 0) 72%);
}
.ds-land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; }
.ds-haze { filter: url(#ds-heat); }
.ds-t { position: absolute; left: 0; right: 0; top: 12%; text-align: center; padding: 0 16px; }
.ds-h1 { margin: 0; font: 300 clamp(64px, 15vw, 200px)/0.9 var(--ds-face); letter-spacing: 0.06em; color: var(--ds-s6); overflow-wrap: anywhere; }
.ds-lead { margin: 10px auto 0; max-width: 34ch; font-style: italic; color: var(--ds-s6); }

/* ---- strata ------------------------------------------------------------- */
.ds-st {
  position: relative;
  padding: clamp(60px, 9vw, 110px) clamp(16px, 5vw, 60px) clamp(70px, 9vw, 120px);
}
/* The jagged contact: the band's own colour reaching up into the one above. */
.ds-st::before {
  content: ""; position: absolute; left: 0; right: 0; top: -38px; height: 40px;
  background: inherit;
  clip-path: polygon(0 60%, 8% 40%, 15% 55%, 24% 30%, 33% 48%, 41% 35%, 50% 55%, 58% 28%, 67% 46%, 75% 36%, 84% 58%, 92% 38%, 100% 50%, 100% 100%, 0 100%);
  pointer-events: none;
}
.ds-in { max-width: 900px; margin: 0 auto; }
.ds-st1 { background: var(--ds-s2); color: var(--ds-s7); }
.ds-st2 { background: var(--ds-s3); color: var(--ds-s7); }
.ds-st3 { background: var(--ds-s4); color: var(--ds-ink3); }
.ds-st4 { background: var(--ds-s5); color: #FFF; }
.ds-st5 { background: var(--ds-s6); color: var(--ds-s1); }
.ds-st6 { background: var(--ds-s7); color: var(--ds-s1); }

.ds-rec p { margin: 0 0 14px; }
.ds-rec h2 { margin: 0 0 18px; font: 300 clamp(34px, 5.6vw, 68px)/1 var(--ds-face); letter-spacing: 0.02em; }
.ds-depth { display: block; font: 500 13px/1.4 var(--ds-face); letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 10px; }
.ds-sub { margin: 30px 0 10px; font: 600 24px/1.2 var(--ds-face); }
.ds-sub:first-child { margin-top: 0; }

/* Stratum I: the facts */
.ds-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; margin: 0; }
.ds-meta dt { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; }
.ds-meta dd { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.35; }

/* Stratum II: recognition, and the colour bands */
.ds-dx { font-size: clamp(24px, 3vw, 34px); line-height: 1.35; font-weight: 300; font-style: italic; margin: 20px 0 !important; }
.ds-bands { display: flex; height: 120px; margin: 24px 0 0; border-radius: 60px 60px 0 0; overflow: hidden; }
.ds-bands i { flex: 1; }

/* Stratum III: what carries the look */
.ds-tw { overflow-x: auto; }
.ds-ct { width: 100%; border-collapse: collapse; }
.ds-ct th, .ds-ct td { padding: 9px 8px; border-bottom: 1px solid rgba(58, 34, 25, 0.35); text-align: left; vertical-align: top; }
.ds-ct th { width: 12em; font-weight: 600; }
.ds-ct th a { display: inline-flex; align-items: center; min-height: 44px; }
.ds-ct th small { display: block; font-style: italic; font-weight: 400; font-size: 15px; }
.ds-ct td { padding-top: 18px; }
.ds-nl { font-style: italic; }
.ds-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 6px !important; }
.ds-tags a { display: inline-flex; align-items: center; min-height: 44px; }
.ds-swatch { display: flex; flex-wrap: wrap; border-radius: 50px 50px 0 0; overflow: hidden; max-width: 620px; }
.ds-swatch span { flex: 1 1 70px; padding: 36px 4px 4px; font: 11px/1.3 ui-monospace, Menlo, monospace; box-shadow: inset 0 0 0 1px rgba(58, 34, 25, 0.28); }
.ds-asbuilt { margin: 6px 0 0 !important; font-style: italic; }

/* Stratum IV: rules, two columns */
.ds-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.ds-rules article { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.45); }
.ds-rules h3 { margin: 0; font: 600 24px/1.25 var(--ds-face); }
.ds-k { display: block; font-style: italic; font-size: 16px; margin-bottom: 4px; }
.ds-rules p { margin: 0; }
.ds-rules small { display: block; margin-top: 6px; font-size: 15px; font-style: italic; }
.ds-rules .ds-wide { grid-column: 1 / -1; }

/* Stratum V: the ledger and the neighbours */
.ds-firm { font-style: italic; }
.ds-rt { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 17px; margin-top: 14px; }
.ds-rt th, .ds-rt td { padding: 7px 8px; border-bottom: 1px solid rgba(244, 232, 218, 0.3); text-align: left; }
.ds-rt thead th { border-bottom: 1px solid var(--ds-s1); font-weight: 600; }
.ds-rt tbody th { font-weight: 400; }
.ds-conf { margin-top: 36px; }
.ds-conf > a, .ds-conf > div { display: block; padding: 8px 0; min-height: 44px; text-decoration: none; }
.ds-conf b { font-size: 28px; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.ds-conf > div b { text-decoration: none; }

/* Stratum VI: use it, arch-topped */
.ds-use { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 290px)); gap: 16px; }
.ds-use a {
  display: block; padding: 64px 22px 22px; border-radius: 999px 999px 6px 6px / 120px 120px 6px 6px;
  background: var(--ds-s4); color: var(--ds-ink3); text-decoration: none; text-align: center;
}
.ds-use a b { display: block; font-weight: 700; font-size: 22px; line-height: 1.2; margin-bottom: 4px; }
.ds-use a:hover { background: var(--ds-s1); color: var(--ds-s7); }
.ds-mach { margin-top: 22px !important; }
.ds-mach a, .ds-foot a { display: inline-block; padding: 11px 0; }
.ds-foot { text-align: center; margin-top: 50px !important; font-size: 16px; }

@media (max-width: 760px) {
  .ds-meta, .ds-rules, .ds-use { grid-template-columns: 1fr; }
  .ds-use { grid-template-columns: minmax(0, 1fr); }
  .ds-use a { padding-top: 48px; }
  .ds-ct th { width: auto; }
  .ds-ct, .ds-ct tbody, .ds-ct tr, .ds-ct th, .ds-ct td { display: block; }
  .ds-ct th { border-bottom: 0; padding-bottom: 0; }
  .ds-ct td { padding-top: 0; }
  .ds-hero { min-height: 480px; height: min(80vh, 640px); }
  .ds-land { height: 52%; }
}

/* research-dimension table at phone width: no fixed floor, cells wrap (QA 2026-09-29) */
@media (max-width: 480px) {
  .ds-rt { min-width: 0; }
  .ds-rt th, .ds-rt td { padding-inline: 6px; overflow-wrap: break-word; }
}