/* ===========================================
   CurtisCamp — Stylesheet (rebuilt Saturday May 9, 2026)
   =========================================== */

:root {
  --cream: #faf5eb;
  --cream-warm: #f0e7d3;
  --aqua: #afd5d5;
  --aqua-deep: #7fb5b5;
  --red-clay: #b94d3a;
  --sepia-dark: #5a4530;
  --sepia-mid: #8a6a4a;
  --text-dark: #2e2418;
  --shadow: rgba(46, 36, 24, 0.18);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Georgia', 'Hoefler Text', 'Garamond', serif;
  background:
    url('assets/mat.png') center/cover no-repeat,
    var(--cream);
  color: var(--text-dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
}

body > * {
  position: relative;
  z-index: 1;
}

/* Talk-to-Todd corner */
.talk-to-todd {
  position: fixed;
  top: 1.4rem;
  right: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.1rem;
  background: var(--cream);
  border: 1.5px solid var(--red-clay);
  border-radius: 999px;
  color: var(--sepia-dark);
  text-decoration: none;
  font-size: 0.95rem;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-weight: 500;
  z-index: 100;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 3px 10px rgba(46, 36, 24, 0.15);
}

.talk-to-todd:hover {
  background: var(--red-clay);
  color: var(--cream);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(46, 36, 24, 0.22);
}

.talk-to-todd:hover .talk-icon { color: var(--cream); }

.talk-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--red-clay);
  transition: color 0.2s;
}

.talk-text { white-space: nowrap; }

/* Title + thesis subtitle */
.site-title {
  text-align: center;
  padding: 1.2rem 1rem 0.8rem;
  margin: 1rem auto 0;
  max-width: 880px;
}

.site-title h1 {
  font-size: clamp(2.2rem, 5vw, 3.3rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--sepia-dark);
  font-variant: small-caps;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  margin: 0;
}

.site-title h1 a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}

.site-title h1 a:hover {
  background: rgba(185, 77, 58, 0.08);
  color: var(--red-clay);
}

.site-pitch {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.pitch-line-1 {
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: #5a9e9e;
  font-weight: 500;
}

.pitch-line-2 {
  font-family: 'Georgia', 'Hoefler Text', serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  color: var(--red-clay);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Ring - bigger */
.hero {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ring-stage {
  position: relative;
  width: min(72vh, 88vw, 700px);
  aspect-ratio: 1 / 1;
  margin: 0.8rem auto;
}

.ring-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px var(--shadow));
  z-index: 2;
}

/* Figures */
.figure {
  position: absolute;
  width: 11%;
  aspect-ratio: 1 / 1.2;
  z-index: 6;
  pointer-events: none;
}

.figure svg { width: 100%; height: 100%; }

.figure-3 {
  left: 96%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.figure-6 {
  left: 50%;
  top: 96%;
  transform: translate(-50%, -50%);
}
.figure-9 {
  left: 4%;
  top: 50%;
  transform: translate(-50%, -50%) scaleX(-1);
}

/* Slideshow */
.slideshow-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cream-warm) 0%, var(--cream) 100%);
  box-shadow: inset 0 0 30px rgba(138, 106, 74, 0.18);
  z-index: 1;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  text-decoration: none;
  color: var(--text-dark);
  padding: 2rem 1.5rem 1rem;
}

.slide.active { opacity: 1; visibility: visible; }

/* Orientation grid - LARGER icons + text */
.orientation-grid {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.orient-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--text-dark);
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  transition: background 0.2s;
  width: 92%;
  max-width: 320px;
}

.orient-item:hover { background: rgba(138, 106, 74, 0.1); }

.orient-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--sepia-mid);
  background: var(--cream);
}

.orient-img img { width: 100%; height: 100%; object-fit: cover; }

.orient-label { display: flex; flex-direction: column; line-height: 1.25; }

.orient-label strong {
  font-size: 1.25rem;
  color: var(--sepia-dark);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.orient-label span {
  font-style: italic;
  color: var(--sepia-mid);
  font-size: 0.92rem;
  margin-top: 0.1rem;
}

/* Unique · Historical · Cultural anchor */
.orientation-anchor {
  margin-top: 1.2rem;
  font-variant: small-caps;
  letter-spacing: 0.15em;
  font-size: 1rem;
  color: var(--red-clay);
  font-weight: 500;
  text-align: center;
}

/* Persistent category refrain — above the ring, horizontal, centered */
.ring-anchor {
  margin: 0.8rem auto 0.6rem;
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-size: 0.9rem;
  color: var(--sepia-mid);
  font-weight: 400;
  text-align: center;
}

/* Single-frame slides */
.slide-single { cursor: pointer; }

.single-img {
  width: 60%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--sepia-mid);
  background: var(--cream);
  box-shadow: 0 4px 16px var(--shadow);
}

.single-img img { width: 100%; height: 100%; object-fit: cover; }

.single-label { margin-top: 0.9rem; text-align: center; }

.single-label strong {
  display: block;
  font-size: 1.55rem;
  color: var(--sepia-dark);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.single-label span {
  font-style: italic;
  color: var(--sepia-mid);
  font-size: 1.05rem;
}

/* Plain links */
.plain-links {
  margin-top: 1.2rem;
  text-align: center;
  font-size: 1rem;
  color: var(--sepia-dark);
}

.plain-links a {
  color: var(--sepia-dark);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
  font-variant: small-caps;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.plain-links a:hover {
  color: var(--red-clay);
  border-bottom-color: var(--red-clay);
}

.plain-links .sep { color: var(--sepia-mid); margin: 0 0.2rem; }

/* Ditty rotation */
.ditty-area {
  margin: 1.2rem auto 0.5rem;
  min-height: 4.5rem;
  max-width: 720px;
  width: 100%;
  text-align: center;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ditty {
  font-style: italic;
  color: var(--sepia-dark);
  font-size: 1.05rem;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.ditty.visible { opacity: 1; }

.ditty.lead {
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.15em;
  font-size: 1.25rem;
  color: var(--red-clay);
  font-weight: 500;
}

.ditty a {
  color: var(--red-clay);
  text-decoration: none;
  border-bottom: 1px dashed var(--red-clay);
  padding-bottom: 1px;
}

.ditty a:hover { background: rgba(185, 77, 58, 0.08); }

.ditty cite {
  display: block;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--sepia-mid);
  margin-top: 0.4rem;
}

.ditty .image-ditty-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  border-bottom: none;
  background: transparent;
  padding: 0.3rem;
  border-radius: 6px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.ditty .image-ditty-link:hover {
  background: rgba(185, 77, 58, 0.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(46, 36, 24, 0.15);
}

.ditty .image-ditty-link img {
  max-width: 300px;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(46, 36, 24, 0.2);
}

.ditty .image-ditty-link .caption {
  font-size: 0.95rem;
  color: var(--red-clay);
  font-style: italic;
  border-bottom: 1px dashed var(--red-clay);
  padding-bottom: 1px;
}

/* Timing toggle */
.timing-toggle {
  margin: 0.6rem auto;
  padding: 0.5rem 0.8rem;
  background: rgba(250, 245, 235, 0.7);
  border: 1px dashed var(--sepia-mid);
  border-radius: 6px;
  font-size: 0.72rem;
  color: var(--sepia-mid);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  max-width: 480px;
  justify-content: center;
}

.timing-toggle label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Footer */
.site-footer {
  margin-top: auto;
  padding: 1.5rem 1rem 1rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--sepia-mid);
  font-style: italic;
  line-height: 1.6;
}

.site-footer p { margin: 0.2rem 0; }

/* INTERIOR PAGES */
.interior-page {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  flex: 1;
}

.interior-hero { margin: 1rem auto 2rem; text-align: center; }

.interior-hero h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--sepia-dark);
  font-weight: 400;
  margin-bottom: 0.4rem;
}

.interior-hero .subhead {
  font-style: italic;
  color: var(--sepia-mid);
  font-size: 1.05rem;
}

.hero-image {
  width: clamp(180px, 35vw, 280px);
  height: clamp(180px, 35vw, 280px);
  margin: 1.5rem auto 1rem;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--sepia-mid);
  background: var(--cream);
  box-shadow: 0 6px 20px var(--shadow);
}

.hero-image img { width: 100%; height: 100%; object-fit: cover; }

.content-block {
  background: rgba(250, 245, 235, 0.85);
  border-radius: 8px;
  padding: 2rem;
  margin: 1.5rem auto;
  max-width: 720px;
  box-shadow: 0 4px 16px rgba(46, 36, 24, 0.08);
  line-height: 1.6;
}

.content-block p { margin-bottom: 1rem; color: var(--text-dark); }
.content-block p:last-child { margin-bottom: 0; }

.content-block .placeholder-note {
  font-style: italic;
  color: var(--sepia-mid);
  border-top: 1px dashed var(--sepia-mid);
  padding-top: 1rem;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

/* PLATE PAGES — baked flat JPG backgrounds (the Photoshop principle).
   No ::before, no opacity tricks. The image IS the background. */
.plate-page {
  position: relative;
  min-height: 100vh;
  background: var(--cream) !important;
}

.plate-bg-acoma {
  background: url('assets/acoma_plate_bg.jpg') center repeat !important;
}

.plate-bg-blackfoot {
  background: url('assets/blackfoot_plate_bg.jpg') center/cover no-repeat !important;
}

.plate-page > * { position: relative; z-index: 1; }

.plate-stage {
  width: 100%;
  max-width: 900px;
  margin: 1rem auto 2rem;
  text-align: center;
}

.plate-photo {
  width: clamp(320px, 70vw, 640px);
  margin: 1rem auto;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(46, 36, 24, 0.35);
  background: var(--cream);
}

.plate-photo img { width: 100%; display: block; border-radius: 4px; }

.plate-caption { max-width: 640px; margin: 1.5rem auto 0; text-align: center; }

.plate-caption .curtis-quote {
  font-style: italic;
  font-size: 1.15rem;
  color: var(--sepia-dark);
  line-height: 1.5;
  margin-bottom: 0.6rem;
  padding: 0 1rem;
}

.plate-caption cite {
  display: block;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--sepia-mid);
}

.plate-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2rem;
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.info-band {
  background: rgba(250, 245, 235, 0.9);
  padding: 1rem 1.2rem;
  border-radius: 6px;
  border-left: 3px solid var(--red-clay);
}

.info-band strong {
  display: block;
  font-size: 0.78rem;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--red-clay);
  margin-bottom: 0.4rem;
}

.info-band p {
  font-size: 0.92rem;
  color: var(--text-dark);
  line-height: 1.4;
  margin: 0;
}

.price-block {
  text-align: center;
  margin: 2rem auto;
  padding: 1.5rem;
  background: rgba(250, 245, 235, 0.95);
  border-radius: 8px;
  max-width: 540px;
  box-shadow: 0 4px 16px rgba(46, 36, 24, 0.1);
}

.price-block .price {
  font-size: 2.2rem;
  color: var(--sepia-dark);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.price-block .price-note {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--sepia-mid);
  margin-top: 0.4rem;
  line-height: 1.5;
}

.cta-button {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.8rem 2rem;
  background: var(--red-clay);
  color: var(--cream);
  text-decoration: none;
  border-radius: 4px;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 1rem;
  transition: background 0.2s, transform 0.2s;
}

.cta-button:hover {
  background: #9a3e2e;
  transform: translateY(-1px);
}

/* MINI-RING NAV with center HOME */
.mini-ring-nav {
  position: relative;
  width: min(60vw, 340px);
  aspect-ratio: 1 / 1;
  margin: 2rem auto 1rem;
}

.mini-ring-nav .ring-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.mini-ring-nav .icon-button {
  position: absolute;
  width: 26%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  border: 3px solid var(--sepia-mid);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 3px 10px rgba(46, 36, 24, 0.2);
  z-index: 2;
}

.mini-ring-nav .icon-button:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 14px rgba(46, 36, 24, 0.3);
}

.mini-ring-nav .icon-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-ring-nav .icon-button .label {
  position: absolute;
  bottom: -1.5rem;
  font-size: 0.85rem;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--sepia-dark);
  white-space: nowrap;
}

.mini-ring-nav .nav-learn {
  top: -3%;
  left: 50%;
  transform: translate(-50%, 0);
}

.mini-ring-nav .nav-plates {
  bottom: 12%;
  right: -3%;
}

.mini-ring-nav .nav-join {
  bottom: 12%;
  left: -3%;
}

/* HOME link center */
.mini-ring-nav .nav-home {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 1rem;
  font-weight: 500;
  color: var(--sepia-dark);
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  background: var(--cream);
  border: 1.5px solid var(--red-clay);
  border-radius: 999px;
  z-index: 3;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0 2px 8px rgba(46, 36, 24, 0.12);
}

.mini-ring-nav .nav-home:hover {
  background: var(--red-clay);
  color: var(--cream);
}

.mini-ring-nav .icon-button.current { border-color: var(--red-clay); }

.mini-ring-nav .icon-button.current::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--red-clay);
  border-radius: 50%;
  pointer-events: none;
}

.back-to-section { text-align: center; margin: 1rem auto; font-size: 0.95rem; }

.back-to-section a {
  color: var(--sepia-mid);
  text-decoration: none;
  font-style: italic;
  border-bottom: 1px dashed var(--sepia-mid);
}

.back-to-section a:hover { color: var(--red-clay); border-bottom-color: var(--red-clay); }

/* Responsive */
@media (max-width: 600px) {
  .ring-stage { width: 95vw; }
  .talk-to-todd { top: 0.8rem; right: 0.8rem; padding: 0.45rem 0.85rem; font-size: 0.78rem; }
  .talk-icon { width: 22px; height: 22px; }
  .site-title h1 { font-size: 2rem; }
  .pitch-line-1 { font-size: 0.88rem; letter-spacing: 0.1em; }
  .pitch-line-2 { font-size: 1.15rem; }
  .orient-img { width: 56px; height: 56px; }
  .orient-label strong { font-size: 1.05rem; }
  .orient-label span { font-size: 0.82rem; }
  .orientation-anchor { font-size: 0.78rem; letter-spacing: 0.08em; }
  .single-label strong { font-size: 1.2rem; }
  .single-label span { font-size: 0.9rem; }
  .ditty { font-size: 0.95rem; }
  .ditty.lead { font-size: 1.1rem; }
  .figure { width: 11%; }
  .mini-ring-nav { width: 88vw; margin: 1.5rem auto 2rem; }
  .mini-ring-nav .icon-button .label { font-size: 0.75rem; }
  .content-block { padding: 1.5rem; }
  .plate-info { grid-template-columns: 1fr; }
  .plate-photo { width: 90vw; }
}

/* "Ask the Camp Keeper" footnote on plates landing + plate pages */
.what-else-note {
  margin-top: 2rem;
  font-style: italic;
  color: var(--sepia-mid);
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ===========================================
   V12 ADDITIONS — Wednesday May 13, 2026
   =========================================== */

/* Plate page titles */
.plate-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--sepia-dark);
  font-weight: 400;
  margin-bottom: 0.4rem;
}

.plate-id {
  font-style: italic;
  color: var(--sepia-mid);
  font-size: 1rem;
  margin-bottom: 1.2rem;
}

/* Plate sub-links (3-link architecture: Tribal / Conservation / How to Buy) */
.plate-sublinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
  max-width: 720px;
  margin: 2rem auto 1.5rem;
  padding: 0 1rem;
}

.sublink {
  display: block;
  background: rgba(250, 245, 235, 0.92);
  padding: 1rem 1.2rem;
  border-radius: 6px;
  border-left: 3px solid var(--red-clay);
  text-decoration: none;
  color: var(--text-dark);
  transition: background 0.2s, transform 0.2s;
}

.sublink:hover {
  background: var(--cream);
  transform: translateY(-1px);
}

.sublink strong {
  display: block;
  font-size: 0.85rem;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  color: var(--red-clay);
  margin-bottom: 0.3rem;
}

.sublink span {
  display: block;
  font-size: 0.95rem;
  color: var(--sepia-dark);
}

/* Tribal Information inline section */
.tribal-info {
  background: rgba(250, 245, 235, 0.92);
  border-radius: 8px;
  padding: 1.8rem 2rem;
  max-width: 720px;
  margin: 2rem auto;
  line-height: 1.6;
  text-align: left;
}

.tribal-info h3 {
  font-size: 1.2rem;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--red-clay);
  margin-bottom: 0.8rem;
  text-align: center;
}

.tribal-info p {
  margin-bottom: 0.9rem;
}

.tribal-info p:last-child {
  margin-bottom: 0;
}

/* Price block */
.price-block {
  margin: 2.5rem auto 1rem;
  text-align: center;
}

.price {
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--sepia-dark);
  margin-bottom: 0.3rem;
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

.price-note {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--sepia-mid);
  max-width: 480px;
  margin: 0 auto 1.2rem;
}

.cta-button {
  display: inline-block;
  background: var(--red-clay);
  color: var(--cream);
  padding: 0.8rem 1.8rem;
  border: none;
  border-radius: 999px;
  font-size: 1.05rem;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 3px 10px rgba(46, 36, 24, 0.18);
}

.cta-button:hover {
  background: var(--sepia-dark);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(46, 36, 24, 0.25);
}

/* Content sub-heads */
.content-subhead {
  font-size: 1.25rem;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--red-clay);
  margin-top: 1.8rem;
  margin-bottom: 0.8rem;
  font-weight: 400;
}

/* Lists */
.numbered-list,
.bullet-list {
  margin-left: 1.5rem;
  margin-top: 0.8rem;
  margin-bottom: 1rem;
  line-height: 1.7;
}

.numbered-list li,
.bullet-list li {
  margin-bottom: 0.5rem;
}

/* Major quote (Roosevelt, Florence, etc.) */
.major-quote {
  margin: 1.5rem 0;
  padding: 1.2rem 1.5rem;
  border-left: 3px solid var(--red-clay);
  font-style: italic;
  color: var(--sepia-dark);
  background: rgba(250, 245, 235, 0.6);
  line-height: 1.55;
}

.major-quote p {
  margin-bottom: 0.6rem;
}

.major-quote footer {
  margin-top: 0.6rem;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--sepia-mid);
}

/* Authentication documents (Florence + Smithsonian) */
.auth-documents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 1.8rem 0;
}

.auth-doc {
  display: block;
  background: var(--cream);
  border: 1px solid var(--sepia-mid);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-dark);
  transition: transform 0.2s, box-shadow 0.2s;
}

.auth-doc:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(46, 36, 24, 0.2);
}

.auth-doc-image {
  background: var(--cream-warm);
  padding: 0.6rem;
  text-align: center;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-doc-image img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
}

.auth-doc-placeholder-image {
  color: var(--sepia-mid);
  font-style: italic;
  font-size: 0.95rem;
  text-align: center;
}

.auth-doc-caption {
  padding: 0.8rem 1rem;
  text-align: center;
  border-top: 1px solid var(--sepia-mid);
  background: var(--cream);
}

.auth-doc-caption strong {
  display: block;
  font-size: 0.95rem;
  color: var(--red-clay);
  margin-bottom: 0.2rem;
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

.auth-doc-caption span {
  display: block;
  font-size: 0.85rem;
  color: var(--sepia-mid);
  font-style: italic;
}

/* Contact paths (How to Buy) */
.contact-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.contact-path {
  background: rgba(250, 245, 235, 0.92);
  padding: 1rem;
  border-radius: 6px;
  border-left: 3px solid var(--red-clay);
  text-align: left;
}

.contact-path strong {
  display: block;
  font-size: 0.85rem;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--red-clay);
  margin-bottom: 0.4rem;
}

.contact-path p {
  font-size: 0.95rem;
  color: var(--sepia-dark);
  margin: 0;
}

/* Inquiry/registration form */
.inquiry-form {
  background: rgba(250, 245, 235, 0.92);
  padding: 1.8rem;
  border-radius: 8px;
  margin: 1.5rem 0;
}

.form-row {
  margin-bottom: 1.1rem;
}

.form-row label {
  display: block;
  font-size: 0.85rem;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--red-clay);
  margin-bottom: 0.3rem;
  font-weight: 500;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--sepia-mid);
  border-radius: 4px;
  background: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-dark);
}

.form-row textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--red-clay);
  box-shadow: 0 0 0 3px rgba(185, 77, 58, 0.15);
}

button.cta-button {
  display: inline-block;
  margin-top: 0.5rem;
}

/* Emphasis note (no refunds, etc.) */
.emphasis-note {
  background: rgba(185, 77, 58, 0.08);
  border-left: 3px solid var(--red-clay);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--sepia-dark);
}

/* Data tables (sales data page) */
.data-table-wrap {
  overflow-x: auto;
  margin: 1.2rem 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(250, 245, 235, 0.92);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.95rem;
}

.data-table th,
.data-table td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(138, 106, 74, 0.18);
}

.data-table th {
  background: var(--cream-warm);
  color: var(--red-clay);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  font-weight: 600;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr.highlight-row {
  background: rgba(185, 77, 58, 0.08);
}

/* Learn hub grid */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.learn-card {
  display: block;
  background: rgba(250, 245, 235, 0.92);
  padding: 1.1rem 1.2rem;
  border-radius: 6px;
  border-left: 3px solid var(--red-clay);
  text-decoration: none;
  color: var(--text-dark);
  transition: transform 0.2s, box-shadow 0.2s;
}

.learn-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(46, 36, 24, 0.15);
}

.learn-card strong {
  display: block;
  font-size: 1rem;
  color: var(--red-clay);
  margin-bottom: 0.4rem;
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

.learn-card span {
  display: block;
  font-size: 0.88rem;
  color: var(--sepia-dark);
  line-height: 1.45;
}

.learn-card.external {
  background: rgba(175, 213, 213, 0.25);
  border-left-color: var(--aqua-deep);
}

.learn-card.external strong {
  color: var(--aqua-deep);
}

/* Plates landing grid */
.plates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 1.8rem 0;
}

.plate-card {
  display: block;
  background: rgba(250, 245, 235, 0.92);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-dark);
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid rgba(138, 106, 74, 0.2);
}

.plate-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(46, 36, 24, 0.2);
}

.plate-card-image {
  background: var(--cream-warm);
  min-height: 280px;
  max-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1rem;
}

.plate-card-image img {
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.plate-card-body {
  padding: 1rem 1.2rem 1.2rem;
  text-align: center;
}

.plate-card-body h3 {
  font-size: 1.2rem;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--sepia-dark);
  margin-bottom: 0.3rem;
  font-weight: 400;
}

.plate-card-id {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--sepia-mid);
  margin-bottom: 0.6rem;
}

.plate-card-price {
  font-size: 1.3rem;
  color: var(--red-clay);
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

/* Back link (within content) */
.back-link {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--sepia-mid);
  text-align: center;
}

.back-link a {
  color: var(--red-clay);
  text-decoration: none;
  font-style: italic;
}

.back-link a:hover {
  border-bottom: 1px solid var(--red-clay);
}

/* Date footnote */
.date-footnote {
  font-size: 0.85rem;
  color: var(--sepia-mid);
  text-align: right;
  margin-top: 1.5rem;
  font-style: italic;
}

/* ===========================================
   LEARN PAGE BOX-CAMERA CHECKERBOARD BACKGROUND
   Same architectural treatment as plate-bg-checker:
   the implement becomes the wallpaper
   =========================================== */

.learn-page-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('assets/curtis_in_field.jpg');
  background-size: 100px auto;
  background-repeat: repeat;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
}

.learn-page-bg > * {
  position: relative;
  z-index: 1;
}


/* Ring click prompt — only visible during orientation grid frame */
.ring-prompt {
  text-align: center;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--sepia-mid);
  margin: 0.6rem 0 0.8rem;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Embers from the campfire — ditty area label */
.embers-label {
  font-style: italic;
  font-size: 1.1rem;
  color: var(--red-clay);
  letter-spacing: 0.08em;
  text-align: center;
  margin-top: 1.8rem;
  margin-bottom: 0.4rem;
  font-weight: 500;
}

/* Homepage Roosevelt quote */
.home-quote {
  max-width: 600px;
  margin: 1.2rem auto;
  padding: 0.8rem 1.2rem;
  text-align: center;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--sepia-dark);
  line-height: 1.5;
  border-left: none;
}

.home-quote footer {
  margin-top: 0.4rem;
  font-style: normal;
  font-size: 0.82rem;
  color: var(--sepia-mid);
}

/* ==========================================
   PLATE SPLASH — CurtisCamp title, Where History Glows, plate,
   four words animate in one at a time, then break-apart reveal
   ========================================== */

.plate-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: background 3.5s ease-out;
}

.splash-header {
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  text-align: center;
}

.splash-title {
  font-family: 'Georgia', 'Hoefler Text', serif;
  font-size: clamp(2.2rem, 5vw, 3.3rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--sepia-dark);
  font-variant: small-caps;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  margin: 0;
  padding: 1.2rem 1rem 0.3rem;
}

.splash-subtitle {
  font-family: 'Georgia', 'Hoefler Text', serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  color: var(--red-clay);
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 1.2s ease-in;
}

.splash-subtitle.visible {
  opacity: 1;
}

.plate-splash img {
  max-width: 85vw;
  max-height: 55vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.splash-words {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-weight: 500;
}

.splash-word {
  color: #3d7d7d;
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

.splash-word.visible {
  opacity: 1;
}

.splash-dot {
  color: #3d7d7d;
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

.splash-dot.visible {
  opacity: 1;
}

.plate-splash.curtain-drop {
  background: transparent;
}

.plate-splash.breaking {
  pointer-events: none;
}

.plate-splash.breaking img {
  opacity: 0;
  transition: opacity 0.2s;
}

.plate-splash.breaking .splash-header {
  transition: opacity 1.5s ease-out;
  opacity: 0;
}

.plate-splash.breaking .splash-words {
  transition: opacity 1s ease-out;
  opacity: 0;
}

.plate-splash .shard {
  position: absolute;
  background-image: url('assets/oasis_plate_splash.jpg');
  background-size: var(--full-w) var(--full-h);
  transition: transform 5s cubic-bezier(0.2, 0.6, 0.4, 1),
              opacity 4.5s ease-out;
}

.plate-splash.gone {
  display: none;
}

/* Roosevelt foreword blockquote */
.roosevelt-foreword {
  border-left: none;
  padding: 0;
  margin: 0;
  font-style: normal;
}

.roosevelt-foreword p {
  text-indent: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.7;
  color: var(--text-dark);
}

.roosevelt-foreword p:first-child {
  text-indent: 0;
}

/* Collect a Plate page */
.collect-form fieldset {
  border: 1px solid rgba(139, 90, 43, 0.2);
  border-radius: 6px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.2rem;
}

.collect-form legend {
  font-variant: small-caps;
  font-weight: 500;
  color: var(--sepia-dark);
  letter-spacing: 0.08em;
  padding: 0 0.5rem;
}

.checkbox-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.checkbox-row label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  line-height: 1.4;
}

.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.form-note {
  font-size: 0.85rem;
  color: var(--sepia-mid);
  font-style: italic;
  margin-top: 0.6rem;
}

.conditions-block {
  margin-top: 2rem;
  padding: 1.2rem 1.5rem;
  background: rgba(250, 245, 235, 0.6);
  border-radius: 6px;
  border-left: 3px solid var(--aqua-deep);
}

.conditions-block h3 {
  font-variant: small-caps;
  color: var(--sepia-dark);
  margin-bottom: 0.6rem;
  letter-spacing: 0.08em;
}

.conditions-block p {
  font-size: 0.9rem;
  line-height: 1.6;
}

.collect-contact {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--sepia-dark);
}

/* Decision tree — Collect a Plate multi-page flow */
.decision-tree {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

.tree-choice {
  display: block;
  padding: 1.2rem 1.5rem;
  background: rgba(250, 245, 235, 0.85);
  border: 1px solid rgba(139, 90, 43, 0.2);
  border-left: 4px solid var(--aqua-deep);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-dark);
  transition: border-left-color 0.2s, background 0.2s;
}

.tree-choice:hover {
  border-left-color: var(--red-clay);
  background: rgba(250, 245, 235, 0.95);
}

.tree-choice strong {
  display: block;
  color: var(--sepia-dark);
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.tree-choice span {
  font-size: 0.9rem;
  color: var(--sepia-mid);
  font-style: italic;
}

.tree-choice-buy {
  border-left-color: var(--red-clay);
}

/* Plate choice cards on the choose page */
.plate-choices {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.plate-choice-card {
  display: block;
  width: 280px;
  background: rgba(250, 245, 235, 0.9);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-dark);
  border: 2px solid rgba(139, 90, 43, 0.2);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.plate-choice-card:hover {
  border-color: var(--red-clay);
  box-shadow: 0 4px 16px rgba(46, 36, 24, 0.2);
}

.plate-choice-card img {
  width: 100%;
  display: block;
}

.plate-choice-info {
  padding: 1rem;
  text-align: center;
}

.plate-choice-info strong {
  display: block;
  font-size: 1.1rem;
  color: var(--sepia-dark);
  margin-bottom: 0.3rem;
}

.plate-choice-info span {
  display: block;
  font-size: 0.85rem;
  color: var(--sepia-mid);
}

.plate-choice-price {
  font-size: 1rem !important;
  color: var(--red-clay) !important;
  font-weight: 500;
  margin-top: 0.5rem;
}

/* Cultural Importance page — wide hero for three-faces strip */
.hero-image-wide {
  width: clamp(280px, 60vw, 520px);
  height: auto;
  margin: 1.5rem auto 1rem;
  border-radius: 8px;
  overflow: hidden;
  border: 4px solid var(--sepia-mid);
  background: var(--cream);
  box-shadow: 0 6px 20px var(--shadow);
}

.hero-image-wide img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hide bottom ditty bar on pages that have ember bar at top.
   The .ember-bar being present means this is an interior page. */
.ember-bar ~ main .ditty-area,
.ember-bar ~ .ditty-area {
  display: none;
}

/* Ember bar — top of interior pages, vertical stack, animated fade-in */
.ember-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8rem 1rem 0.5rem;
  margin: 0 auto 0.5rem;
  max-width: 720px;
  opacity: 0;
  animation: emberFadeIn 1.5s ease-in 0.3s forwards;
}

@keyframes emberFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ember-flame {
  display: none;
}

.ember-title {
  display: block;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--sepia-dark);
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
  text-align: center;
  font-weight: 500;
}

#ember-ditty {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--red-clay);
  line-height: 1.4;
  min-height: 1.4em;
  text-align: center;
  max-width: 600px;
  transition: opacity 0.4s ease;
}

#ember-ditty.visible {
  opacity: 1;
}

/* Ring click prompt inside orientation frame */
.ring-prompt-inside {
  text-align: center;
  font-style: italic;
  font-size: 0.8rem;
  color: var(--sepia-mid);
  margin-top: 0.5rem;
  opacity: 0.7;
}

/* Fix Curtis portrait hover in mini-ring nav */
.icon-button img {
  transition: transform 0.2s ease;
}
.icon-button:hover img {
  transform: scale(1.05);
}
.icon-button {
  overflow: hidden;
}