/* ==========================================================================
   ALPACA vs LLAMA HISTORY  —  /alpacas/alpacas-vs-llamas/history/
   --------------------------------------------------------------------------
   Load AFTER /alpacas/style/style.css and /alpacas/style/alpacas.css.

   This page deliberately avoids the site's normal alternating split layout.
   The visual idea is an illustrated field-history: large "plates", a narrow
   chronological rail, readable central copy, and a real margin note in every
   chapter.
   ========================================================================== */

.history-page{
  --history-ink:#3d342d;
  --history-rust:#9a5b3d;
  --history-ochre:#b98845;
  --history-sage:#6e7e68;
  --history-paper:#f7f2e8;
  --history-paper-deep:#eee5d6;
  --history-line:#cabda9;
  --history-note:#f0e7d8;
}

/* --- Opening ------------------------------------------------------------ */
.history-page .history-head{
  position:relative;
  max-width:56rem;
  margin:0 0 3.75rem;
  padding:1.25rem 0 0 1.5rem;
}

.history-page .history-head::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:.35rem;
  width:4px;
  background:linear-gradient(to bottom,var(--history-rust),var(--history-ochre),var(--history-sage));
}

.history-page .history-head .eyebrow{
  color:var(--history-rust);
}

.history-page .history-head h1{
  max-width:50rem;
  font-size:clamp(2.35rem,6vw,4.6rem);
  line-height:.98;
}

.history-page .history-head .lede{
  max-width:47rem;
  margin-top:1.2rem;
  font-size:clamp(1.05rem,2vw,1.25rem);
  line-height:1.6;
}

/* A tiny visual orientation, not a table of contents. */
.history-route{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .6rem;
  margin:1.5rem 0 0;
  padding:0;
  list-style:none;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fleece-silver);
}

.history-route li{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.history-route li:not(:last-child)::after{
  content:"→";
  color:var(--history-ochre);
}

/* --- Chapters ----------------------------------------------------------- */
.history-chapter{
  --chapter-accent:var(--history-rust);
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) minmax(13rem,18rem);
  grid-template-areas:
    "rail plate plate"
    "rail copy note";
  gap:1.35rem 2.25rem;
  margin-top:4.75rem;
  padding-top:1.25rem;
  border-top:1px solid var(--history-line);
}

.history-chapter:first-of-type{
  margin-top:0;
}

.history-rail{
  grid-area:rail;
  position:relative;
  align-self:stretch;
  padding-top:.25rem;
  text-align:center;
}

.history-rail::after{
  content:"";
  position:absolute;
  left:50%;
  top:4.3rem;
  bottom:0;
  width:1px;
  background:linear-gradient(to bottom,var(--chapter-accent),var(--history-line));
}

.history-number{
  display:grid;
  place-items:center;
  width:3.6rem;
  height:3.6rem;
  margin:0 auto;
  border:1px solid var(--chapter-accent);
  border-radius:50%;
  background:var(--fleece-white);
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:600;
  color:var(--chapter-accent);
}

.history-era{
  display:block;
  width:max-content;
  max-width:5.5rem;
  margin:.8rem auto 0;
  font-size:.625rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fleece-silver);
}

/* --- Reconstruction plate --------------------------------------------- */
.history-plate{
  grid-area:plate;
  position:relative;
  margin:0;
  padding:.55rem .55rem .75rem;
  background:var(--history-paper);
  border:1px solid var(--history-line);
  box-shadow:0 .75rem 2.25rem rgba(62,49,38,.08);
}

.history-plate::before,
.history-plate::after{
  content:"";
  position:absolute;
  width:1.75rem;
  height:1.75rem;
  pointer-events:none;
}

.history-plate::before{
  left:-1px;
  top:-1px;
  border-left:3px solid var(--chapter-accent);
  border-top:3px solid var(--chapter-accent);
}

.history-plate::after{
  right:-1px;
  bottom:-1px;
  border-right:3px solid var(--chapter-accent);
  border-bottom:3px solid var(--chapter-accent);
}

.history-plate img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  border:0;
}

.history-plate figcaption{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin:.7rem .25rem 0;
  font-size:.77rem;
  line-height:1.45;
  color:var(--fleece-brown);
}

.history-plate figcaption strong{
  flex:none;
  color:var(--chapter-accent);
  font-size:.64rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* --- Main copy ---------------------------------------------------------- */
.history-copy{
  grid-area:copy;
  max-width:44rem;
  padding-top:.65rem;
}

.history-copy .eyebrow{
  margin-bottom:.45rem;
  color:var(--chapter-accent);
}

.history-copy h2{
  margin:0 0 1.15rem;
  padding:0;
  border:0;
  font-size:clamp(1.75rem,3vw,2.5rem);
  line-height:1.08;
}

.history-copy p{
  max-width:42rem;
  color:var(--fleece-brown);
}

.history-copy p:first-of-type{
  font-size:1.04rem;
  color:var(--history-ink);
}

/* --- The required aside: a real margin note, not a promo card ---------- */
.history-aside{
  grid-area:note;
  align-self:start;
  position:relative;
  margin-top:.85rem;
  padding:1.15rem 1.2rem 1.25rem;
  background:linear-gradient(145deg,var(--history-note),var(--history-paper));
  border-top:4px solid var(--chapter-accent);
  box-shadow:0 .35rem 1rem rgba(62,49,38,.06);
}

.history-aside::before{
  content:"";
  position:absolute;
  left:-1rem;
  top:1.55rem;
  width:1rem;
  height:1px;
  background:var(--chapter-accent);
}

.history-aside .aside-kicker{
  margin:0 0 .45rem;
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--chapter-accent);
}

.history-aside h3{
  margin:0 0 .55rem;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.15rem;
  line-height:1.2;
}

.history-aside p{
  margin:0;
  font-size:.84rem;
  line-height:1.55;
  color:var(--fleece-brown);
}

/* Optional emphasis styles future chapters can vary without new markup. */
.history-chapter[data-tone="ochre"]{ --chapter-accent:var(--history-ochre); }
.history-chapter[data-tone="sage"]{ --chapter-accent:var(--history-sage); }

/* --- Mobile ------------------------------------------------------------- */
@media (max-width:58rem){
  .history-chapter{
    grid-template-columns:4.25rem minmax(0,1fr);
    grid-template-areas:
      "rail plate"
      "rail copy"
      "rail note";
    gap:1.25rem 1.5rem;
  }

  .history-aside{
    max-width:34rem;
    margin-top:.25rem;
  }
}

@media (max-width:40rem){
  .history-page .history-head{
    margin-bottom:2.75rem;
    padding-left:1rem;
  }

  .history-route{
    gap:.35rem .45rem;
    font-size:.64rem;
  }

  .history-chapter{
    display:block;
    margin-top:3.5rem;
    padding-top:1.5rem;
  }

  .history-rail{
    display:flex;
    align-items:center;
    gap:.75rem;
    margin-bottom:1rem;
    text-align:left;
  }

  .history-rail::after{ display:none; }

  .history-number{
    width:3rem;
    height:3rem;
    margin:0;
    font-size:1.15rem;
  }

  .history-era{
    max-width:none;
    margin:0;
  }

  .history-plate{
    margin-bottom:1.6rem;
    padding:.35rem .35rem .6rem;
  }

  .history-plate figcaption{
    display:block;
    margin:.55rem .2rem 0;
  }

  .history-plate figcaption strong{
    display:block;
    margin-bottom:.2rem;
  }

  .history-copy h2{
    font-size:1.75rem;
  }

  .history-aside{
    margin:1.5rem 0 0;
  }

  .history-aside::before{ display:none; }
}

/* Linked section aside --------------------------------------------------- */
.history-aside--link{
  padding:0;
  overflow:hidden;
}
.history-aside--link > a{
  display:block;
  color:inherit;
  text-decoration:none;
}
.history-aside--link img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  border-bottom:1px solid var(--fleece-beige);
  transition:transform .25s var(--ease);
}
.history-aside-body{
  display:block;
  padding:1rem 1.1rem 1.15rem;
}
.history-aside--link .aside-kicker{ display:block; }
.history-aside-title{
  display:block;
  margin:0 0 .45rem;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.15rem;
  font-weight:600;
  line-height:1.2;
  color:var(--history-ink);
}
.history-aside-text{
  display:block;
  font-size:.84rem;
  line-height:1.5;
  color:var(--fleece-brown);
}
.history-aside-link{
  display:block;
  margin-top:.75rem;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--chapter-accent);
}
.history-aside--link > a:hover .history-aside-title,
.history-aside--link > a:hover .history-aside-link{ color:var(--indigo); }
.history-aside--link > a:hover img{ transform:scale(1.015); }
@media (prefers-reduced-motion:reduce){
  .history-aside--link img{ transition:none; }
}


/* ========================================================================
   02 · DOMESTICATION INTERACTION
   ======================================================================== */
.history-chapter#domestication{
  margin-top:6rem;
}

.domestication-switcher{
  margin:2rem 0 .25rem;
  padding:1.2rem 1.25rem 1.3rem;
  background:var(--history-paper);
  border:1px solid var(--history-line);
  border-top:4px solid var(--chapter-accent);
}

.domestication-switcher-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.domestication-switcher-head .eyebrow{
  margin:0;
  flex:none;
}

.domestication-switcher-head h3{
  margin:0;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.15rem;
  line-height:1.2;
}

.domestication-tabs{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:.55rem;
  margin-bottom:1rem;
}

.domestication-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:2.8rem;
  padding:.55rem .65rem;
  background:transparent;
  border:1px solid var(--history-line);
  color:var(--fleece-brown);
  font:inherit;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}

.domestication-tab:hover{
  border-color:var(--chapter-accent);
  color:var(--history-ink);
  transform:translateY(-1px);
}

.domestication-tab.is-active{
  background:var(--chapter-accent);
  border-color:var(--chapter-accent);
  color:#fff;
}

.stage-step{
  display:grid;
  place-items:center;
  width:1.35rem;
  height:1.35rem;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:.66rem;
  line-height:1;
}

.stage-arrow{
  color:var(--chapter-accent);
  font-family:var(--font-display);
  font-size:1.1rem;
}

.domestication-panel{
  min-height:6.5rem;
  padding:1rem 1rem .95rem;
  background:rgba(255,255,255,.42);
  border-left:3px solid var(--chapter-accent);
}

.domestication-panel[hidden]{ display:none; }

.domestication-panel strong{
  display:block;
  margin-bottom:.3rem;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.08rem;
  color:var(--history-ink);
}

.domestication-panel p{
  margin:0;
  font-size:.88rem;
  line-height:1.55;
}

@media (max-width:40rem){
  .history-chapter#domestication{ margin-top:4rem; }

  .domestication-switcher{
    margin-top:1.6rem;
    padding:1rem;
  }

  .domestication-switcher-head{
    display:block;
  }

  .domestication-switcher-head .eyebrow{
    margin-bottom:.3rem;
  }

  .domestication-tabs{
    grid-template-columns:1fr 1fr 1fr;
    gap:.4rem;
  }

  .stage-arrow{ display:none; }

  .domestication-tab{
    flex-direction:column;
    gap:.25rem;
    min-height:3.6rem;
    padding:.45rem .25rem;
    font-size:.72rem;
  }
}

/* ========================================================================
   03 · DIFFERENT JOBS / TRAIT LENS
   ======================================================================== */
.history-chapter#different-jobs{
  margin-top:6rem;
}

.selection-lens{
  margin:2rem 0 .25rem;
  padding:1.2rem 1.25rem 1.3rem;
  background:linear-gradient(135deg,rgba(110,126,104,.08),var(--history-paper) 42%);
  border:1px solid var(--history-line);
  border-top:4px solid var(--chapter-accent);
}

.selection-lens-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.selection-lens-head .eyebrow{
  margin:0;
  flex:none;
}

.selection-lens-head h3{
  margin:0;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.15rem;
  line-height:1.2;
}

.selection-controls{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.45rem;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--history-line);
}

.selection-control{
  min-height:2.65rem;
  padding:.55rem .6rem;
  background:transparent;
  border:0;
  border-bottom:3px solid transparent;
  color:var(--fleece-brown);
  font:inherit;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}

.selection-control:hover{
  background:rgba(110,126,104,.08);
  color:var(--history-ink);
}

.selection-control.is-active{
  border-bottom-color:var(--chapter-accent);
  background:rgba(110,126,104,.12);
  color:var(--history-ink);
}

.selection-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:1rem;
  border:1px solid var(--history-line);
  background:rgba(255,255,255,.4);
}

.selection-panel[hidden]{ display:none; }

.selection-side{
  position:relative;
  min-height:10.75rem;
  padding:1.15rem 1.15rem 1rem;
}

.selection-side + .selection-side{
  border-left:1px solid var(--history-line);
}

.selection-side::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
}

.selection-side--alpaca::before{ background:var(--history-ochre); }
.selection-side--llama::before{ background:var(--history-rust); }

.selection-animal{
  display:block;
  margin-bottom:.4rem;
  font-size:.63rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--fleece-silver);
}

.selection-side strong{
  display:block;
  margin-bottom:.4rem;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.08rem;
  line-height:1.25;
  color:var(--history-ink);
}

.selection-side p{
  margin:0;
  font-size:.84rem;
  line-height:1.55;
  color:var(--fleece-brown);
}

@media (max-width:40rem){
  .selection-lens{
    padding:1rem .9rem 1.05rem;
  }

  .selection-lens-head{
    display:block;
  }

  .selection-lens-head .eyebrow{
    margin-bottom:.25rem;
  }

  .selection-controls{
    grid-template-columns:1fr 1fr;
  }

  .selection-panel{
    grid-template-columns:1fr;
  }

  .selection-side{
    min-height:0;
  }

  .selection-side + .selection-side{
    border-left:0;
    border-top:1px solid var(--history-line);
  }
}



/* ==========================================================================
   04 · BEFORE THE INCA — interactive herd-use map
   ========================================================================== */
.history-chapter[data-tone="clay"]{
  --chapter-accent:#8c654e;
}

.herd-uses{
  margin-top:2rem;
  padding:1.15rem;
  background:var(--history-paper);
  border:1px solid var(--history-line);
}

.herd-uses-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.1rem;
}

.herd-uses-head .eyebrow{ margin:0 0 .15rem; }
.herd-uses-head h3{ margin:0; }

.herd-use-map{
  position:relative;
  display:grid;
  place-items:center;
  min-height:25rem;
  padding:1.5rem;
  background:
    radial-gradient(circle at center, rgba(185,136,69,.09) 0 26%, transparent 26.5%),
    linear-gradient(var(--history-line),var(--history-line)) center/1px 78% no-repeat,
    linear-gradient(90deg,var(--history-line),var(--history-line)) center/78% 1px no-repeat;
}

.herd-use-controls{
  position:absolute;
  inset:0;
}

.herd-use-button{
  position:absolute;
  min-width:7.75rem;
  padding:.72rem .95rem;
  background:var(--fleece-card);
  border:1px solid var(--history-line);
  font:inherit;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fleece-brown);
  cursor:pointer;
  transition:transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

.herd-use-button--fiber{ top:.75rem; left:50%; transform:translateX(-50%); }
.herd-use-button--transport{ right:.75rem; top:50%; transform:translateY(-50%); }
.herd-use-button--food{ bottom:.75rem; left:50%; transform:translateX(-50%); }
.herd-use-button--dung{ left:.75rem; top:50%; transform:translateY(-50%); }

.herd-use-button:hover,
.herd-use-button.is-active{
  border-color:var(--chapter-accent);
  background:var(--history-note);
  color:var(--chapter-accent);
}

.herd-use-button--fiber:hover,
.herd-use-button--fiber.is-active{ transform:translateX(-50%) translateY(-2px); }
.herd-use-button--transport:hover,
.herd-use-button--transport.is-active{ transform:translateY(-50%) translateX(2px); }
.herd-use-button--food:hover,
.herd-use-button--food.is-active{ transform:translateX(-50%) translateY(2px); }
.herd-use-button--dung:hover,
.herd-use-button--dung.is-active{ transform:translateY(-50%) translateX(-2px); }

.herd-use-center{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:min(19rem,62%);
  min-height:12rem;
  padding:1.5rem 1.6rem;
  background:var(--fleece-card);
  border:1px solid var(--chapter-accent);
  border-radius:var(--radius);
  text-align:center;
  box-shadow:0 .5rem 1.5rem rgba(62,49,38,.07);
}

.herd-use-panel[hidden]{ display:none; }

.herd-use-label{
  display:block;
  margin-bottom:.35rem;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--chapter-accent);
}

.herd-use-panel strong{
  display:block;
  margin-bottom:.45rem;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.08rem;
  line-height:1.25;
  color:var(--history-ink);
}

.herd-use-panel p{
  margin:0;
  font-size:.82rem;
  line-height:1.5;
  color:var(--fleece-brown);
}

@media (max-width:40rem){
  .herd-uses{ padding:.9rem; }
  .herd-uses-head{ display:block; }
  .herd-use-map{
    display:flex;
    flex-direction:column;
    min-height:0;
    padding:0;
    background:none;
  }
  .herd-use-controls{
    position:static;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem;
    width:100%;
    margin-bottom:.75rem;
  }
  .herd-use-button{
    position:static;
    min-width:0;
    transform:none !important;
  }
  .herd-use-center{
    width:100%;
    min-height:0;
    padding:1.15rem;
    border-radius:0;
  }
}

/* ========================================================================
   05 · THE INCA EMPIRE — caravan route
   ======================================================================== */
.history-chapter[data-tone="imperial"]{ --chapter-accent:#76533f; }
.history-chapter#inca-empire{ margin-top:6rem; }

.inca-route{
  margin:2rem 0 .25rem;
  padding:1.2rem 1.25rem 1.3rem;
  background:linear-gradient(135deg,rgba(118,83,63,.08),transparent 48%),var(--history-paper);
  border:1px solid var(--history-line);
  border-top:4px solid var(--chapter-accent);
}
.inca-route-head{ display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.inca-route-head .eyebrow{ flex:none; margin:0 0 .1rem; }
.inca-route-head h3{
  margin:0;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.15rem;
  line-height:1.2;
}
.inca-route-track{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto 1fr auto;
  align-items:center;
  gap:.45rem;
}
.inca-route-line{ height:1px; background:var(--history-line); }
.inca-route-stop{
  display:grid;
  justify-items:center;
  gap:.35rem;
  min-width:5.3rem;
  padding:.6rem .5rem;
  background:transparent;
  border:0;
  color:var(--fleece-brown);
  font:inherit;
  cursor:pointer;
  transition:color .18s var(--ease),transform .18s var(--ease);
}
.inca-route-stop:hover{ color:var(--chapter-accent); transform:translateY(-2px); }
.inca-route-number{
  display:grid;
  place-items:center;
  width:2rem;
  height:2rem;
  border:1px solid var(--history-line);
  border-radius:50%;
  background:var(--fleece-card);
  font-family:var(--font-display);
  font-size:.82rem;
  font-weight:600;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.inca-route-name{ font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.inca-route-stop.is-active{ color:var(--chapter-accent); }
.inca-route-stop.is-active .inca-route-number{ background:var(--chapter-accent); border-color:var(--chapter-accent); color:#fff; }
.inca-route-panels{ margin-top:1rem; }
.inca-route-panel{
  min-height:7.4rem;
  padding:1rem 1.1rem;
  background:rgba(255,255,255,.46);
  border-left:3px solid var(--chapter-accent);
}
.inca-route-panel[hidden]{ display:none; }
.inca-route-kicker{
  display:block;
  margin-bottom:.3rem;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--chapter-accent);
}
.inca-route-panel strong{
  display:block;
  margin-bottom:.35rem;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 70,"opsz" 30;
  font-size:1.08rem;
  line-height:1.25;
  color:var(--history-ink);
}
.inca-route-panel p{ margin:0; font-size:.84rem; line-height:1.55; color:var(--fleece-brown); }

@media (max-width:40rem){
  .history-chapter#inca-empire{ margin-top:4rem; }
  .inca-route{ padding:1rem .9rem 1.05rem; }
  .inca-route-head{ display:block; }
  .inca-route-head .eyebrow{ margin-bottom:.25rem; }
  .inca-route-track{ grid-template-columns:1fr 1fr; gap:.5rem; }
  .inca-route-line{ display:none; }
  .inca-route-stop{
    min-width:0;
    width:100%;
    min-height:4.25rem;
    padding:.6rem .35rem;
    border:1px solid var(--history-line);
  }
  .inca-route-stop.is-active{ border-color:var(--chapter-accent); background:var(--history-note); }
  .inca-route-panel{ min-height:0; }
}
/* ==========================================================================
   INCA EMPIRE DEEP-DIVE PAGE
   /alpacas/alpacas-vs-llamas/history/inca-empire/

   These rules are deliberately scoped to .inca-page so the new page can use
   the shared history.css without changing the layout of the main history page.
   ========================================================================== */

.inca-page{
  --inca-ink:#332d28;
  --inca-red:#934b38;
  --inca-red-deep:#6f362b;
  --inca-gold:#bf8a45;
  --inca-sand:#eee1cc;
  --inca-sand-light:#faf6ee;
  --inca-stone:#756b60;
  --inca-blue:#496d73;
  --inca-shadow:rgba(63,44,31,.12);
}

/* --- Page opening ------------------------------------------------------- */
.inca-page .inca-head{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(20rem,31rem);
  grid-template-areas:
    "copy image"
    "route route";
  gap:2rem 3.25rem;
  margin:1rem 0 5.5rem;
  padding:2.5rem 2.5rem 0;
  background:
    linear-gradient(135deg,rgba(147,75,56,.08),transparent 42%),
    var(--inca-sand-light);
  border-top:4px solid var(--inca-red);
  border-bottom:1px solid var(--history-line);
}

.inca-page .inca-head::before{
  content:"";
  position:absolute;
  left:1.15rem;
  top:1.15rem;
  width:3rem;
  height:3rem;
  border-left:1px solid var(--inca-gold);
  border-top:1px solid var(--inca-gold);
  opacity:.8;
}

.inca-head-copy{
  grid-area:copy;
  align-self:center;
  padding:1rem 0 1.5rem;
}

.inca-head-copy .eyebrow{
  margin-bottom:.7rem;
  color:var(--inca-red);
}

.inca-head-copy h1{
  max-width:43rem;
  margin:0;
  font-size:clamp(2.45rem,5.6vw,4.8rem);
  line-height:.98;
  color:var(--inca-ink);
}

.inca-head-copy .lede{
  max-width:43rem;
  margin:1.25rem 0 0;
  font-size:clamp(1.02rem,1.8vw,1.2rem);
  line-height:1.65;
  color:var(--fleece-brown);
}

.inca-head-image{
  grid-area:image;
  position:relative;
  align-self:center;
  margin:0;
  padding:.55rem;
  background:#fffaf1;
  border:1px solid #cdbb9f;
  box-shadow:0 1.2rem 2.8rem var(--inca-shadow);
  transform:translateY(1.4rem);
}

.inca-head-image::after{
  content:"";
  position:absolute;
  right:-.75rem;
  bottom:-.75rem;
  width:4.5rem;
  height:4.5rem;
  border-right:3px solid var(--inca-gold);
  border-bottom:3px solid var(--inca-gold);
  pointer-events:none;
}

.inca-head-image img{
  display:block;
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
}

.inca-head-image figcaption{
  display:grid;
  gap:.2rem;
  padding:.75rem .55rem .35rem;
  font-size:.76rem;
  line-height:1.45;
  color:var(--fleece-silver);
}

.inca-head-image figcaption strong{
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--inca-red);
}

.inca-story-route{
  grid-area:route;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin:0 -2.5rem;
  padding:0;
  list-style:none;
  border-top:1px solid var(--history-line);
}

.inca-story-route li{
  display:flex;
  align-items:center;
  min-height:4.5rem;
  padding:.8rem 1rem;
  border-right:1px solid var(--history-line);
  font-size:.68rem;
  font-weight:600;
  line-height:1.25;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--inca-stone);
}

.inca-story-route li:last-child{
  border-right:0;
}

.inca-story-route span{
  margin-right:.65rem;
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--inca-red);
}

/* --- Inca chapters ----------------------------------------------------- */
.inca-page .inca-chapter{
  --inca-section-accent:var(--inca-red);
  position:relative;
  display:grid;
  grid-template-columns:5.25rem minmax(0,1fr) minmax(14rem,18rem);
  grid-template-areas:
    "marker heading heading"
    "marker plate aside"
    "marker copy aside";
  gap:1.5rem 2.25rem;
  margin:0 0 5.5rem;
  padding:1.5rem 0 5rem;
  border-top:1px solid var(--history-line);
  border-bottom:1px solid var(--history-line);
}

.inca-page .inca-chapter::after{
  content:"";
  position:absolute;
  left:7.5rem;
  right:20.25rem;
  bottom:-1px;
  height:4px;
  background:linear-gradient(to right,var(--inca-section-accent),var(--inca-gold),transparent);
}

.inca-chapter-marker{
  grid-area:marker;
  position:relative;
  align-self:stretch;
  text-align:center;
}

.inca-chapter-marker::after{
  content:"";
  position:absolute;
  left:50%;
  top:5rem;
  bottom:0;
  width:1px;
  background:linear-gradient(to bottom,var(--inca-section-accent),var(--history-line),transparent);
}

.inca-chapter-number{
  display:grid;
  place-items:center;
  width:4rem;
  height:4rem;
  margin:0 auto;
  background:var(--inca-section-accent);
  border-radius:50%;
  box-shadow:0 0 0 .4rem var(--inca-sand-light),0 0 0 calc(.4rem + 1px) var(--inca-section-accent);
  font-family:var(--font-display);
  font-size:1.45rem;
  color:#fff;
}

.inca-chapter-era{
  display:block;
  width:max-content;
  max-width:5.25rem;
  margin:1rem auto 0;
  font-size:.61rem;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--inca-stone);
}

.inca-chapter-heading{
  grid-area:heading;
  max-width:52rem;
  padding:.15rem 0 .65rem;
}

.inca-chapter-heading .eyebrow{
  margin-bottom:.45rem;
  color:var(--inca-section-accent);
}

.inca-chapter-heading h2{
  max-width:48rem;
  margin:0;
  font-size:clamp(2rem,4.2vw,3.55rem);
  line-height:1.04;
  color:var(--inca-ink);
}

.inca-chapter-intro{
  max-width:48rem;
  margin:1rem 0 0;
  font-size:1.08rem;
  line-height:1.65;
  color:var(--fleece-brown);
}

/* --- Reconstruction image --------------------------------------------- */
.inca-reconstruction{
  grid-area:plate;
  position:relative;
  margin:0;
  padding:.55rem;
  background:var(--inca-sand-light);
  border:1px solid #cdbb9f;
  box-shadow:0 .8rem 2rem var(--inca-shadow);
}

.inca-reconstruction::before{
  content:"01";
  position:absolute;
  z-index:2;
  left:-.8rem;
  top:1.2rem;
  display:grid;
  place-items:center;
  width:2.35rem;
  height:2.35rem;
  background:var(--inca-section-accent);
  border:4px solid var(--inca-sand-light);
  font-family:var(--font-display);
  font-size:.8rem;
  color:#fff;
}

.inca-reconstruction img{
  display:block;
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
}

.inca-reconstruction figcaption{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.5rem .8rem;
  align-items:start;
  padding:.8rem .65rem .45rem;
  font-size:.76rem;
  line-height:1.5;
  color:var(--fleece-silver);
}

.inca-reconstruction figcaption strong{
  font-size:.63rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--inca-section-accent);
}

/* --- Main copy --------------------------------------------------------- */
.inca-chapter-copy{
  grid-area:copy;
  min-width:0;
  max-width:48rem;
}

.inca-chapter-copy > p{
  margin:0 0 1.15rem;
  font-size:.97rem;
  line-height:1.78;
  color:var(--fleece-brown);
}

.inca-chapter-copy > p:first-child::first-letter{
  float:left;
  margin:.08em .12em 0 0;
  font-family:var(--font-display);
  font-size:4.2rem;
  line-height:.78;
  color:var(--inca-section-accent);
}

/* --- Section 1 interaction -------------------------------------------- */
.inca-change-view{
  margin:2.25rem 0 0;
  background:var(--inca-sand-light);
  border:1px solid #cab89e;
  box-shadow:0 .65rem 1.6rem rgba(63,44,31,.07);
}

.inca-change-heading{
  padding:1.35rem 1.4rem 1.1rem;
  background:
    linear-gradient(110deg,rgba(147,75,56,.1),transparent 55%),
    #f5ecdf;
  border-bottom:1px solid #cab89e;
}

.inca-change-heading .eyebrow{
  margin:0 0 .3rem;
  color:var(--inca-section-accent);
}

.inca-change-heading h3{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2.4vw,1.75rem);
  line-height:1.2;
  color:var(--inca-ink);
}

.inca-change-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#e7d9c5;
  border-bottom:1px solid #cab89e;
}

.inca-change-button{
  position:relative;
  min-height:4.6rem;
  padding:.85rem 1rem;
  background:transparent;
  border:0;
  border-right:1px solid #cab89e;
  color:var(--inca-stone);
  font:600 .85rem/1.3 var(--font-sans);
  text-align:left;
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}

.inca-change-button:last-child{
  border-right:0;
}

.inca-change-button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  background:transparent;
}

.inca-change-button:hover{
  background:rgba(255,255,255,.35);
  color:var(--inca-red-deep);
}

.inca-change-button:focus-visible{
  outline:3px solid rgba(73,109,115,.35);
  outline-offset:-3px;
}

.inca-change-button.is-active{
  background:var(--inca-sand-light);
  color:var(--inca-red-deep);
}

.inca-change-button.is-active::after{
  background:var(--inca-section-accent);
}

.inca-change-step{
  display:block;
  margin-bottom:.2rem;
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--inca-blue);
}

.inca-change-panels{
  padding:1.35rem 1.4rem 1.5rem;
}

.inca-change-panel[hidden]{
  display:none;
}

.inca-change-label{
  display:block;
  margin-bottom:.35rem;
  font-size:.61rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--inca-section-accent);
}

.inca-change-panel > strong{
  display:block;
  margin-bottom:.55rem;
  font-family:var(--font-display);
  font-size:1.2rem;
  line-height:1.3;
  color:var(--inca-ink);
}

.inca-change-panel p{
  margin:0;
  font-size:.88rem;
  line-height:1.65;
  color:var(--fleece-brown);
}

.inca-change-panel ul{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.55rem 1rem;
  margin:1rem 0 0;
  padding:0;
  list-style:none;
}

.inca-change-panel li{
  position:relative;
  padding:.55rem .65rem .55rem 1.45rem;
  background:#efe3d1;
  border-left:2px solid var(--inca-gold);
  font-size:.76rem;
  line-height:1.4;
  color:var(--inca-stone);
}

.inca-change-panel li::before{
  content:"";
  position:absolute;
  left:.65rem;
  top:.92rem;
  width:.35rem;
  height:.35rem;
  background:var(--inca-section-accent);
  transform:rotate(45deg);
}

/* --- Inca aside -------------------------------------------------------- */
.inca-aside{
  grid-area:aside;
  align-self:start;
  position:sticky;
  top:6rem;
  margin:0;
  background:#f3eadc;
  border-top:4px solid var(--inca-section-accent);
  box-shadow:0 .7rem 1.8rem rgba(63,44,31,.09);
}

.inca-aside > a{
  display:block;
  color:inherit;
  text-decoration:none;
}

.inca-aside img{
  display:block;
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  filter:saturate(.86) contrast(.97);
}

.inca-aside-body{
  display:block;
  padding:1.15rem 1.1rem 1.25rem;
}

.inca-aside-kicker{
  display:block;
  margin-bottom:.45rem;
  font-size:.59rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--inca-section-accent);
}

.inca-aside-title{
  display:block;
  font-family:var(--font-display);
  font-size:1.25rem;
  line-height:1.22;
  color:var(--inca-ink);
}

.inca-aside-text{
  display:block;
  margin-top:.65rem;
  font-size:.79rem;
  line-height:1.55;
  color:var(--fleece-brown);
}

.inca-aside-link{
  display:inline-block;
  margin-top:.85rem;
  padding-bottom:.15rem;
  border-bottom:1px solid currentColor;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--inca-red-deep);
  transition:color .18s var(--ease),transform .18s var(--ease);
}

.inca-aside a:hover .inca-aside-link{
  color:var(--inca-blue);
  transform:translateX(.2rem);
}

.inca-aside a:focus-visible{
  outline:3px solid rgba(73,109,115,.4);
  outline-offset:4px;
}

/* --- Inca page responsive layout -------------------------------------- */
@media (max-width:62rem){
  .inca-page .inca-head{
    grid-template-columns:minmax(0,1fr) minmax(18rem,25rem);
    gap:1.75rem 2rem;
    padding:2rem 1.75rem 0;
  }

  .inca-story-route{
    margin:0 -1.75rem;
  }

  .inca-story-route li{
    padding:.7rem;
    font-size:.61rem;
  }

  .inca-page .inca-chapter{
    grid-template-columns:4.5rem minmax(0,1fr) minmax(13rem,15rem);
    gap:1.35rem 1.5rem;
  }

  .inca-page .inca-chapter::after{
    left:6rem;
    right:16.5rem;
  }

  .inca-chapter-number{
    width:3.5rem;
    height:3.5rem;
  }
}

@media (max-width:48rem){
  .inca-page .inca-head{
    grid-template-columns:1fr;
    grid-template-areas:
      "copy"
      "image"
      "route";
    padding:1.7rem 1.25rem 0;
  }

  .inca-head-image{
    width:100%;
    max-width:38rem;
    transform:none;
  }

  .inca-story-route{
    grid-template-columns:1fr 1fr;
    margin:0 -1.25rem;
  }

  .inca-story-route li{
    min-height:3.8rem;
    border-top:1px solid var(--history-line);
  }

  .inca-story-route li:first-child,
  .inca-story-route li:nth-child(2){
    border-top:0;
  }

  .inca-story-route li:nth-child(even){
    border-right:0;
  }

  .inca-story-route li:last-child{
    grid-column:1/-1;
  }

  .inca-page .inca-chapter{
    grid-template-columns:4rem minmax(0,1fr);
    grid-template-areas:
      "marker heading"
      "plate plate"
      "copy copy"
      "aside aside";
    gap:1.25rem 1rem;
    padding-bottom:4rem;
  }

  .inca-page .inca-chapter::after{
    left:0;
    right:0;
  }

  .inca-chapter-marker::after{
    display:none;
  }

  .inca-chapter-number{
    width:3.1rem;
    height:3.1rem;
    font-size:1.15rem;
  }

  .inca-chapter-era{
    display:none;
  }

  .inca-reconstruction::before{
    display:none;
  }

  .inca-aside{
    position:static;
    max-width:36rem;
    margin-top:.75rem;
  }

  .inca-aside > a{
    display:grid;
    grid-template-columns:minmax(10rem,42%) 1fr;
  }

  .inca-aside img{
    height:100%;
    min-height:13rem;
    aspect-ratio:auto;
  }
}

@media (max-width:34rem){
  .inca-page .inca-head{
    margin-bottom:4rem;
  }

  .inca-head-copy h1{
    font-size:clamp(2.3rem,12vw,3.3rem);
  }

  .inca-story-route{
    grid-template-columns:1fr;
  }

  .inca-story-route li,
  .inca-story-route li:first-child,
  .inca-story-route li:nth-child(2){
    min-height:3.25rem;
    border-top:1px solid var(--history-line);
    border-right:0;
  }

  .inca-page .inca-chapter{
    grid-template-columns:3.25rem minmax(0,1fr);
  }

  .inca-chapter-number{
    width:2.7rem;
    height:2.7rem;
    box-shadow:0 0 0 .25rem var(--inca-sand-light),0 0 0 calc(.25rem + 1px) var(--inca-section-accent);
    font-size:1rem;
  }

  .inca-chapter-heading h2{
    font-size:clamp(1.85rem,9vw,2.6rem);
  }

  .inca-chapter-intro{
    font-size:1rem;
  }

  .inca-reconstruction figcaption{
    grid-template-columns:1fr;
  }

  .inca-change-heading,
  .inca-change-panels{
    padding:1.05rem;
  }

  .inca-change-button{
    min-height:4.85rem;
    padding:.7rem;
    font-size:.76rem;
  }

  .inca-change-panel ul{
    grid-template-columns:1fr;
  }

  .inca-aside > a{
    display:block;
  }

  .inca-aside img{
    min-height:0;
    aspect-ratio:3/2;
  }
}

@media (prefers-reduced-motion:reduce){
  .inca-change-button,
  .inca-aside-link{
    transition:none;
  }
}

/* ==========================================================================
   INCA EMPIRE — SECTION 2: HERD ORGANIZATION
   ========================================================================== */

.inca-chapter--herds{
  --inca-section-accent:#4f716b;
}

.inca-chapter--herds .inca-reconstruction::before{
  content:"02";
}

.inca-chapter--herds .inca-chapter-copy > p:first-child::first-letter{
  color:var(--inca-section-accent);
}

.inca-chapter--herds .inca-aside{
  background:#e9eee8;
}

.inca-chapter--herds .inca-aside-link{
  color:#365b55;
}

/* --- Four-context herd explorer --------------------------------------- */
.inca-herd-system{
  margin:2.4rem 0 0;
  overflow:hidden;
  background:#f7f4ec;
  border:1px solid #b9c2b9;
  box-shadow:0 .8rem 2rem rgba(47,68,62,.09);
}

.inca-herd-system-heading{
  position:relative;
  padding:1.4rem 1.5rem 1.25rem;
  background:
    linear-gradient(115deg,rgba(79,113,107,.15),transparent 58%),
    #edf0e9;
  border-bottom:1px solid #b9c2b9;
}

.inca-herd-system-heading::after{
  content:"";
  position:absolute;
  right:1.4rem;
  top:1.35rem;
  width:2.7rem;
  height:2.7rem;
  border:1px solid rgba(79,113,107,.45);
  transform:rotate(45deg);
}

.inca-herd-system-heading .eyebrow{
  margin:0 0 .3rem;
  color:var(--inca-section-accent);
}

.inca-herd-system-heading h3{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.5vw,1.8rem);
  line-height:1.2;
  color:var(--inca-ink);
}

.inca-herd-system-heading > p:last-child{
  max-width:38rem;
  margin:.45rem 0 0;
  font-size:.79rem;
  line-height:1.5;
  color:var(--fleece-silver);
}

.inca-herd-selector{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:1px solid #b9c2b9;
}

.inca-herd-choice{
  display:grid;
  grid-template-columns:2.2rem minmax(0,1fr);
  gap:.75rem;
  align-items:center;
  min-width:0;
  min-height:5rem;
  padding:.8rem 1rem;
  background:#e3e8e1;
  border:0;
  border-right:1px solid #b9c2b9;
  border-bottom:1px solid #b9c2b9;
  color:var(--inca-stone);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}

.inca-herd-choice:nth-child(even){
  border-right:0;
}

.inca-herd-choice:nth-last-child(-n+2){
  border-bottom:0;
}

.inca-herd-choice:hover{
  background:#edf0e9;
  color:#365b55;
}

.inca-herd-choice:focus-visible{
  position:relative;
  z-index:2;
  outline:3px solid rgba(73,109,115,.42);
  outline-offset:-3px;
}

.inca-herd-choice.is-active{
  background:#fffaf1;
  color:#365b55;
  box-shadow:inset 4px 0 0 var(--inca-section-accent);
}

.inca-herd-symbol{
  display:grid;
  place-items:center;
  width:2.1rem;
  height:2.1rem;
  border:1px solid #9eaea3;
  border-radius:50%;
  font-family:var(--font-display);
  font-size:.72rem;
  color:var(--inca-section-accent);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}

.inca-herd-choice.is-active .inca-herd-symbol{
  background:var(--inca-section-accent);
  border-color:var(--inca-section-accent);
  color:#fff;
}

.inca-herd-choice-text{
  display:block;
  min-width:0;
}

.inca-herd-choice-text strong,
.inca-herd-choice-text small{
  display:block;
}

.inca-herd-choice-text strong{
  font-family:var(--font-display);
  font-size:1rem;
  line-height:1.2;
  color:inherit;
}

.inca-herd-choice-text small{
  margin-top:.18rem;
  font-size:.64rem;
  line-height:1.35;
  color:var(--fleece-silver);
}

.inca-herd-display{
  position:relative;
  padding:1.5rem;
  background:
    linear-gradient(135deg,rgba(79,113,107,.07),transparent 50%),
    #fffaf1;
}

.inca-herd-display::before{
  content:"";
  position:absolute;
  right:-2rem;
  bottom:-2rem;
  width:8rem;
  height:8rem;
  border:1px solid rgba(79,113,107,.16);
  border-radius:50%;
  box-shadow:0 0 0 1.5rem rgba(79,113,107,.035),0 0 0 3rem rgba(79,113,107,.025);
  pointer-events:none;
}

.inca-herd-panel{
  position:relative;
  z-index:1;
}

.inca-herd-panel[hidden]{
  display:none;
}

.inca-herd-panel-kicker{
  display:block;
  margin-bottom:.35rem;
  font-size:.61rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--inca-section-accent);
}

.inca-herd-panel h4{
  max-width:36rem;
  margin:0;
  font-family:var(--font-display);
  font-size:1.3rem;
  line-height:1.25;
  color:var(--inca-ink);
}

.inca-herd-panel > p{
  max-width:39rem;
  margin:.6rem 0 0;
  font-size:.86rem;
  line-height:1.65;
  color:var(--fleece-brown);
}

.inca-herd-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
  margin:1.2rem 0 0;
}

.inca-herd-details div{
  padding:.8rem .9rem;
  background:rgba(227,232,225,.7);
  border-top:2px solid var(--inca-section-accent);
}

.inca-herd-details dt{
  margin:0 0 .25rem;
  font-size:.57rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--inca-section-accent);
}

.inca-herd-details dd{
  margin:0;
  font-size:.74rem;
  line-height:1.45;
  color:var(--inca-stone);
}

@media (max-width:34rem){
  .inca-herd-system-heading{
    padding:1.1rem;
  }

  .inca-herd-system-heading::after{
    display:none;
  }

  .inca-herd-selector{
    grid-template-columns:1fr;
  }

  .inca-herd-choice,
  .inca-herd-choice:nth-child(even),
  .inca-herd-choice:nth-last-child(-n+2){
    min-height:4.4rem;
    border-right:0;
    border-bottom:1px solid #b9c2b9;
  }

  .inca-herd-choice:last-child{
    border-bottom:0;
  }

  .inca-herd-display{
    padding:1.1rem;
  }

  .inca-herd-details{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:reduce){
  .inca-herd-choice,
  .inca-herd-symbol{
    transition:none;
  }
}

/* ==========================================================================
   INCA EMPIRE — SECTION 3: DAILY RESOURCES
   ========================================================================== */

.inca-chapter--resources{
  --inca-section-accent:#a76f32;
}

.inca-chapter--resources .inca-reconstruction::before{
  content:"03";
}

.inca-chapter--resources .inca-chapter-copy > p:first-child::first-letter{
  color:var(--inca-section-accent);
}

.inca-chapter--resources .inca-aside{
  background:#f1e6d3;
}

.inca-chapter--resources .inca-aside-link{
  color:#80501f;
}

/* --- Alpaca and llama role selector ----------------------------------- */
.inca-animal-roles{
  margin:2.4rem 0 0;
  overflow:hidden;
  background:#fbf5e9;
  border:1px solid #cfb991;
  box-shadow:0 .8rem 2rem rgba(83,57,27,.09);
}

.inca-animal-roles-heading{
  padding:1.35rem 1.5rem 1.2rem;
  background:
    linear-gradient(120deg,rgba(167,111,50,.16),transparent 58%),
    #f3e7d2;
  border-bottom:1px solid #cfb991;
}

.inca-animal-roles-heading .eyebrow{
  margin:0 0 .3rem;
  color:var(--inca-section-accent);
}

.inca-animal-roles-heading h3{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.5vw,1.8rem);
  line-height:1.2;
  color:var(--inca-ink);
}

.inca-animal-roles-heading > p:last-child{
  max-width:38rem;
  margin:.45rem 0 0;
  font-size:.79rem;
  line-height:1.5;
  color:var(--fleece-silver);
}

.inca-animal-selector{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#dcc8a5;
  border-bottom:1px solid #cfb991;
}

.inca-animal-button{
  position:relative;
  display:grid;
  align-content:center;
  min-height:6rem;
  padding:1rem 1.25rem 1rem 4.5rem;
  background:transparent;
  border:0;
  border-right:1px solid #bfa77e;
  color:#685943;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}

.inca-animal-button:last-child{
  border-right:0;
}

.inca-animal-button::before{
  content:"A";
  position:absolute;
  left:1.2rem;
  top:50%;
  display:grid;
  place-items:center;
  width:2.5rem;
  height:2.5rem;
  background:rgba(255,250,241,.55);
  border:1px solid #b89c6e;
  border-radius:50%;
  font-family:var(--font-display);
  font-size:1rem;
  color:#8b602e;
  transform:translateY(-50%);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}

.inca-animal-button--llama::before{
  content:"L";
}

.inca-animal-button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:4px;
  background:transparent;
}

.inca-animal-button:hover{
  background:rgba(255,250,241,.42);
  color:#71481d;
}

.inca-animal-button:focus-visible{
  z-index:2;
  outline:3px solid rgba(128,80,31,.4);
  outline-offset:-3px;
}

.inca-animal-button.is-active{
  background:#fffaf1;
  color:#71481d;
}

.inca-animal-button.is-active::before{
  background:var(--inca-section-accent);
  border-color:var(--inca-section-accent);
  color:#fff;
}

.inca-animal-button.is-active::after{
  background:var(--inca-section-accent);
}

.inca-animal-name,
.inca-animal-summary{
  display:block;
}

.inca-animal-name{
  font-family:var(--font-display);
  font-size:1.2rem;
  line-height:1.15;
}

.inca-animal-summary{
  margin-top:.2rem;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--fleece-silver);
}

.inca-animal-panels{
  padding:1.5rem;
  background:
    radial-gradient(circle at 94% 10%,rgba(167,111,50,.1),transparent 10rem),
    #fffaf1;
}

.inca-animal-panel{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:1.5rem;
  align-items:start;
}

.inca-animal-panel[hidden]{
  display:none;
}

.inca-animal-primary{
  padding:1.15rem;
  background:#eee0c8;
  border-left:4px solid var(--inca-section-accent);
}

.inca-animal-panel-label{
  display:block;
  margin-bottom:.35rem;
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#80501f;
}

.inca-animal-primary > strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.2rem;
  line-height:1.25;
  color:var(--inca-ink);
}

.inca-animal-primary p{
  margin:.6rem 0 0;
  font-size:.8rem;
  line-height:1.6;
  color:var(--fleece-brown);
}

.inca-animal-secondary{
  min-width:0;
}

.inca-animal-secondary ul{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.65rem;
  margin:.55rem 0 0;
  padding:0;
  list-style:none;
}

.inca-animal-secondary li{
  min-width:0;
  padding:.7rem .75rem;
  background:#f5ead7;
  border-top:2px solid #c59b62;
}

.inca-animal-secondary li strong,
.inca-animal-secondary li span{
  display:block;
}

.inca-animal-secondary li strong{
  font-size:.72rem;
  line-height:1.3;
  color:#71481d;
}

.inca-animal-secondary li span{
  margin-top:.2rem;
  font-size:.65rem;
  line-height:1.4;
  color:var(--fleece-silver);
}

@media (max-width:38rem){
  .inca-animal-roles-heading,
  .inca-animal-panels{
    padding:1.1rem;
  }

  .inca-animal-button{
    min-height:5.3rem;
    padding:.75rem .65rem .75rem 3.4rem;
  }

  .inca-animal-button::before{
    left:.65rem;
    width:2.15rem;
    height:2.15rem;
  }

  .inca-animal-name{
    font-size:1.05rem;
  }

  .inca-animal-summary{
    font-size:.54rem;
  }

  .inca-animal-panel{
    grid-template-columns:1fr;
    gap:1.1rem;
  }
}

@media (max-width:27rem){
  .inca-animal-selector{
    grid-template-columns:1fr;
  }

  .inca-animal-button,
  .inca-animal-button:last-child{
    border-right:0;
    border-bottom:1px solid #bfa77e;
  }

  .inca-animal-button:last-child{
    border-bottom:0;
  }

  .inca-animal-secondary ul{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:reduce){
  .inca-animal-button,
  .inca-animal-button::before{
    transition:none;
  }
}

/* ==========================================================================
   INCA EMPIRE — SECTION 4: TEXTILES AND POWER
   ========================================================================== */

.inca-chapter--textiles{
  --inca-section-accent:#7b4d66;
}

.inca-chapter--textiles .inca-reconstruction::before{
  content:"04";
}

.inca-chapter--textiles .inca-chapter-copy > p:first-child::first-letter{
  color:var(--inca-section-accent);
}

.inca-chapter--textiles .inca-aside{
  background:#eee5e9;
}

.inca-chapter--textiles .inca-aside-link{
  color:#694057;
}

/* --- Fiber-to-power production chain ---------------------------------- */
.inca-textile-chain{
  margin:2.5rem 0 0;
  padding:1.5rem;
  background:
    linear-gradient(rgba(255,251,244,.9),rgba(255,251,244,.9)),
    repeating-linear-gradient(45deg,#7b4d66 0,#7b4d66 1px,transparent 1px,transparent 8px);
  border:1px solid #c3a9b5;
  box-shadow:0 .8rem 2rem rgba(70,39,56,.09);
}

.inca-textile-chain-heading{
  position:relative;
  padding:0 4.5rem 1.2rem 0;
  border-bottom:1px solid #d5c2ca;
}

.inca-textile-chain-heading::after{
  content:"";
  position:absolute;
  right:.25rem;
  top:.15rem;
  width:3.2rem;
  height:3.2rem;
  background:
    linear-gradient(45deg,transparent 42%,rgba(123,77,102,.55) 42%,rgba(123,77,102,.55) 48%,transparent 48%),
    linear-gradient(-45deg,transparent 42%,rgba(183,128,69,.55) 42%,rgba(183,128,69,.55) 48%,transparent 48%);
  border:1px solid #c3a9b5;
}

.inca-textile-chain-heading .eyebrow{
  margin:0 0 .3rem;
  color:var(--inca-section-accent);
}

.inca-textile-chain-heading h3{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.5vw,1.8rem);
  line-height:1.2;
  color:var(--inca-ink);
}

.inca-textile-chain-heading > p:last-child{
  margin:.45rem 0 0;
  font-size:.79rem;
  line-height:1.5;
  color:var(--fleece-silver);
}

.inca-textile-stages{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin:1.5rem 0 0;
  padding:0;
  list-style:none;
}

.inca-textile-stages::before{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  top:1.35rem;
  height:2px;
  background:linear-gradient(to right,#b4844d,var(--inca-section-accent));
}

.inca-textile-stage{
  position:relative;
  z-index:1;
  min-width:0;
  padding:0 .35rem;
  text-align:center;
}

.inca-textile-stage-number{
  display:grid;
  place-items:center;
  width:2.7rem;
  height:2.7rem;
  margin:0 auto .75rem;
  background:#fffaf1;
  border:2px solid #ad8256;
  border-radius:50%;
  font-family:var(--font-display);
  font-size:.68rem;
  color:#855d35;
}

.inca-textile-stage--prepare .inca-textile-stage-number{
  border-color:#a6745b;
  color:#85533e;
}

.inca-textile-stage--weave .inca-textile-stage-number{
  border-color:#97636a;
  color:#774752;
}

.inca-textile-stage--store .inca-textile-stage-number{
  border-color:#88556d;
  color:#6f4059;
}

.inca-textile-stage--power .inca-textile-stage-number{
  background:var(--inca-section-accent);
  border-color:var(--inca-section-accent);
  color:#fff;
}

.inca-textile-stage-body{
  display:block;
}

.inca-textile-stage-body strong,
.inca-textile-stage-body span{
  display:block;
}

.inca-textile-stage-body strong{
  min-height:2.25rem;
  font-family:var(--font-display);
  font-size:.84rem;
  line-height:1.25;
  color:var(--inca-ink);
}

.inca-textile-stage-body span{
  margin-top:.35rem;
  font-size:.61rem;
  line-height:1.45;
  color:var(--fleece-silver);
}

.inca-textile-result{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.85rem;
  align-items:center;
  margin:1.6rem 0 0;
  padding:1rem 1.1rem;
  background:#eee2e7;
  border-left:4px solid var(--inca-section-accent);
}

.inca-textile-result-label{
  display:block;
  padding:.35rem .55rem;
  background:var(--inca-section-accent);
  font-size:.57rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#fff;
}

.inca-textile-result p{
  margin:0;
  font-family:var(--font-display);
  font-size:.95rem;
  line-height:1.4;
  color:var(--inca-ink);
}

@media (max-width:44rem){
  .inca-textile-stages{
    grid-template-columns:1fr;
    gap:0;
    padding-left:0;
  }

  .inca-textile-stages::before{
    left:1.34rem;
    right:auto;
    top:1rem;
    bottom:1rem;
    width:2px;
    height:auto;
    background:linear-gradient(to bottom,#b4844d,var(--inca-section-accent));
  }

  .inca-textile-stage{
    display:grid;
    grid-template-columns:2.7rem minmax(0,1fr);
    gap:.9rem;
    align-items:start;
    padding:0 0 1.15rem;
    text-align:left;
  }

  .inca-textile-stage:last-child{
    padding-bottom:0;
  }

  .inca-textile-stage-number{
    margin:0;
  }

  .inca-textile-stage-body{
    padding-top:.15rem;
  }

  .inca-textile-stage-body strong{
    min-height:0;
    font-size:.95rem;
  }

  .inca-textile-stage-body span{
    max-width:28rem;
    font-size:.68rem;
  }
}

@media (max-width:32rem){
  .inca-textile-chain{
    padding:1.1rem;
  }

  .inca-textile-chain-heading{
    padding-right:0;
  }

  .inca-textile-chain-heading::after{
    display:none;
  }

  .inca-textile-result{
    grid-template-columns:1fr;
  }

  .inca-textile-result-label{
    width:max-content;
  }
}

/* ==========================================================================
   INCA EMPIRE — SECTION 5: ROADS AND THE SACRED WORLD
   ========================================================================== */

.inca-chapter--roads{
  --inca-section-accent:#486779;
}

.inca-chapter--roads .inca-reconstruction::before{
  content:"05";
}

.inca-chapter--roads .inca-chapter-copy > p:first-child::first-letter{
  color:var(--inca-section-accent);
}

.inca-chapter--roads .inca-aside{
  background:#e5eaeb;
}

.inca-chapter--roads .inca-aside-link{
  color:#385768;
}

/* --- Road and sacred-world switch ------------------------------------- */
.inca-road-sacred{
  margin:2.5rem 0 0;
  overflow:hidden;
  background:#f5f3ec;
  border:1px solid #abb9bd;
  box-shadow:0 .8rem 2rem rgba(42,61,71,.1);
}

.inca-road-sacred-heading{
  padding:1.4rem 1.5rem 1.2rem;
  background:
    linear-gradient(115deg,rgba(72,103,121,.17),transparent 58%),
    #e9edeb;
  border-bottom:1px solid #abb9bd;
}

.inca-road-sacred-heading .eyebrow{
  margin:0 0 .3rem;
  color:var(--inca-section-accent);
}

.inca-road-sacred-heading h3{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.5vw,1.8rem);
  line-height:1.2;
  color:var(--inca-ink);
}

.inca-road-sacred-selector{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#d6dfe0;
  border-bottom:1px solid #abb9bd;
}

.inca-road-sacred-button{
  position:relative;
  display:grid;
  grid-template-columns:2.4rem minmax(0,1fr);
  gap:.8rem;
  align-items:center;
  min-width:0;
  min-height:5.7rem;
  padding:.9rem 1.1rem;
  background:transparent;
  border:0;
  border-right:1px solid #abb9bd;
  color:#59666b;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}

.inca-road-sacred-button:last-child{
  border-right:0;
}

.inca-road-sacred-button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:4px;
  background:transparent;
}

.inca-road-sacred-button:hover{
  background:rgba(255,255,255,.38);
  color:#385768;
}

.inca-road-sacred-button:focus-visible{
  z-index:2;
  outline:3px solid rgba(72,103,121,.42);
  outline-offset:-3px;
}

.inca-road-sacred-button.is-active{
  background:#fffaf1;
  color:#385768;
}

.inca-road-sacred-button.is-active::after{
  background:var(--inca-section-accent);
}

.inca-road-sacred-button > span:last-child,
.inca-road-sacred-button strong,
.inca-road-sacred-button small{
  display:block;
}

.inca-road-sacred-button strong{
  font-family:var(--font-display);
  font-size:1.02rem;
  line-height:1.2;
}

.inca-road-sacred-button small{
  margin-top:.2rem;
  font-size:.61rem;
  line-height:1.4;
  color:var(--fleece-silver);
}

.inca-road-sacred-number{
  display:grid;
  place-items:center;
  width:2.35rem;
  height:2.35rem;
  border:1px solid #8da0a6;
  border-radius:50%;
  font-family:var(--font-display);
  font-size:.7rem;
  color:var(--inca-section-accent);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}

.inca-road-sacred-button.is-active .inca-road-sacred-number{
  background:var(--inca-section-accent);
  border-color:var(--inca-section-accent);
  color:#fff;
}

.inca-road-sacred-panels{
  padding:1.5rem;
  background:
    radial-gradient(circle at 95% 8%,rgba(72,103,121,.1),transparent 10rem),
    #fffaf1;
}

.inca-road-sacred-panel[hidden]{
  display:none;
}

.inca-road-sacred-kicker{
  display:block;
  margin-bottom:.35rem;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--inca-section-accent);
}

.inca-road-sacred-panel h4{
  margin:0;
  font-family:var(--font-display);
  font-size:1.25rem;
  line-height:1.25;
  color:var(--inca-ink);
}

.inca-caravan-route{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin:1.35rem 0 0;
  padding:0;
  list-style:none;
}

.inca-caravan-route::before{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  top:.68rem;
  height:2px;
  background:linear-gradient(to right,#8ca09e,var(--inca-section-accent));
}

.inca-caravan-route li{
  position:relative;
  z-index:1;
  min-width:0;
  padding:0 .35rem;
  text-align:center;
}

.inca-caravan-route li::before{
  content:"";
  display:block;
  width:1.35rem;
  height:1.35rem;
  margin:0 auto .55rem;
  background:#fffaf1;
  border:2px solid var(--inca-section-accent);
  border-radius:50%;
}

.inca-caravan-route li:last-child::before{
  background:var(--inca-section-accent);
  box-shadow:inset 0 0 0 3px #fffaf1;
}

.inca-caravan-route span{
  display:block;
  min-height:2rem;
  font-family:var(--font-display);
  font-size:.82rem;
  line-height:1.2;
  color:#385768;
}

.inca-caravan-route p{
  margin:.3rem 0 0;
  font-size:.6rem;
  line-height:1.45;
  color:var(--fleece-silver);
}

.inca-sacred-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  margin:1.25rem 0 0;
}

.inca-sacred-grid div{
  position:relative;
  padding:1rem 1rem 1rem 1.15rem;
  background:#e8ecea;
  border-left:3px solid var(--inca-section-accent);
}

.inca-sacred-grid div::after{
  content:"";
  position:absolute;
  right:.65rem;
  top:.65rem;
  width:.55rem;
  height:.55rem;
  border:1px solid rgba(72,103,121,.5);
  transform:rotate(45deg);
}

.inca-sacred-grid strong{
  display:block;
  padding-right:1rem;
  font-family:var(--font-display);
  font-size:.9rem;
  line-height:1.25;
  color:#385768;
}

.inca-sacred-grid p{
  margin:.4rem 0 0;
  font-size:.68rem;
  line-height:1.5;
  color:var(--fleece-silver);
}

/* --- Final page conclusion -------------------------------------------- */
.inca-closing-note{
  position:relative;
  margin:2.25rem 0 0;
  padding:1.4rem 1.5rem 1.45rem 2rem;
  background:
    linear-gradient(110deg,rgba(147,75,56,.13),transparent 60%),
    #f2e8da;
  border-top:1px solid #c8b69d;
  border-bottom:1px solid #c8b69d;
}

.inca-closing-note::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:linear-gradient(to bottom,var(--inca-red),var(--inca-gold),var(--inca-section-accent));
}

.inca-closing-note .eyebrow{
  margin:0 0 .3rem;
  color:var(--inca-red);
}

.inca-closing-note h3{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.5vw,1.75rem);
  line-height:1.2;
  color:var(--inca-ink);
}

.inca-closing-note > p:last-child{
  margin:.65rem 0 0;
  font-size:.86rem;
  line-height:1.65;
  color:var(--fleece-brown);
}

@media (max-width:44rem){
  .inca-caravan-route{
    grid-template-columns:1fr;
  }

  .inca-caravan-route::before{
    left:.66rem;
    right:auto;
    top:.4rem;
    bottom:.5rem;
    width:2px;
    height:auto;
    background:linear-gradient(to bottom,#8ca09e,var(--inca-section-accent));
  }

  .inca-caravan-route li{
    display:grid;
    grid-template-columns:1.35rem 5.4rem minmax(0,1fr);
    gap:.7rem;
    align-items:start;
    padding:0 0 1rem;
    text-align:left;
  }

  .inca-caravan-route li::before{
    margin:0;
  }

  .inca-caravan-route span{
    min-height:0;
    padding-top:.05rem;
  }

  .inca-caravan-route p{
    margin:0;
    font-size:.65rem;
  }
}

@media (max-width:34rem){
  .inca-road-sacred-heading,
  .inca-road-sacred-panels{
    padding:1.1rem;
  }

  .inca-road-sacred-selector{
    grid-template-columns:1fr;
  }

  .inca-road-sacred-button,
  .inca-road-sacred-button:last-child{
    min-height:4.8rem;
    border-right:0;
    border-bottom:1px solid #abb9bd;
  }

  .inca-road-sacred-button:last-child{
    border-bottom:0;
  }

  .inca-sacred-grid{
    grid-template-columns:1fr;
  }

  .inca-caravan-route li{
    grid-template-columns:1.35rem minmax(0,1fr);
  }

  .inca-caravan-route p{
    grid-column:2;
  }

  .inca-closing-note{
    padding:1.15rem 1.1rem 1.2rem 1.5rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .inca-road-sacred-button,
  .inca-road-sacred-number{
    transition:none;
  }
}