/* Casa San Juan Guide - skin "csj" layout sheet, rev 7
   Palette: basalt, crater-lake teal, marigold, sacuanjoche cream. */
:root {
  --basalt: #1c2321;
  --basalt-2: #2b3431;
  --lake: #0e5a61;
  --lake-deep: #0a4248;
  --marigold: #e5a23a;
  --ember: #c4512f;
  --cream: #f7f0de;
  --paper: #fffaf0;
  --ink: #1f2624;
  --muted: #5d6763;
  --rule: #d9cfb6;
  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --text: "Literata", Georgia, serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.csjBody {
  margin: 0;
  color: var(--ink);
  font: 400 1.03rem/1.65 var(--text);
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(229,162,58,.06) 0 18%, transparent 19%),
    radial-gradient(circle at 92% 30%, rgba(14,90,97,.04) 0 22%, transparent 23%),
    repeating-linear-gradient(0deg, rgba(28,35,33,.025) 0 1px, transparent 1px 5px);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lake); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ember); }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
.skipLink { position: absolute; left: -999px; top: 0; background: var(--marigold); color: var(--basalt); padding: .5rem 1rem; z-index: 50; }
.skipLink:focus { left: 1rem; }
#pageWrap { max-width: 1240px; margin: 0 auto; background: transparent; }

/* ---------- masthead ---------- */
#mastHead { padding: 1.4rem 1.25rem 0; }
.mastRow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mastBrand { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--basalt); }
.mastMark {
  font: 800 1.05rem/1 var(--display); letter-spacing: .08em; color: var(--cream);
  background: var(--basalt); padding: .85rem .7rem; border-radius: 50% 50% 6px 6px;
  box-shadow: inset 0 -6px 0 var(--marigold);
}
.mastWords strong { display: block; font: 800 clamp(1.5rem, 3vw, 2.15rem)/1.05 var(--display); letter-spacing: -.02em; }
.mastWords em { display: block; font: italic 400 .92rem/1.3 var(--text); color: var(--muted); margin-top: .2rem; }
.mastNote { margin: 0; font: 600 .74rem/1.35 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--lake-deep); text-align: right; border-right: 4px solid var(--marigold); padding-right: .7rem; }
.navStrip { margin-top: 1.1rem; border-top: 2px solid var(--basalt); border-bottom: 1px solid var(--basalt); }
.navStrip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.navStrip li { border-right: 1px solid var(--rule); }
.navStrip a { display: block; padding: .62rem .95rem; font: 700 .95rem/1.2 var(--display); color: var(--basalt); text-decoration: none; }
.navStrip a:hover, .navStrip .isOn a { background: var(--basalt); color: var(--cream); }
.navNum { font: 400 .7rem/1 var(--mono); color: var(--ember); margin-right: .4rem; vertical-align: .1em; }
.navStrip .isOn .navNum, .navStrip a:hover .navNum { color: var(--marigold); }
.navStrip .navFind { margin-left: auto; border-right: 0; }
.navStrip .navFind a { font: 600 .82rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; padding-top: .72rem; }

/* ---------- ticker (wire over the stage) ---------- */
.wireBand { display: flex; align-items: stretch; background: var(--basalt); color: var(--cream); margin: 1rem 1.25rem 0; border-radius: 4px 4px 0 0; overflow: hidden; }
.wireLabel { flex: none; background: var(--marigold); color: var(--basalt); font: 700 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: .9rem .85rem; display: flex; align-items: center; }
.wireViewport { flex: 1; overflow: hidden; position: relative; min-width: 0; }
.wireTrack { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: wireRun 70s linear infinite; }
.wireTrack li { white-space: nowrap; padding: .8rem 1.6rem .8rem 0; font: 400 .9rem/1.3 var(--mono); }
.wireTrack li::before { content: "\25C6"; color: var(--marigold); margin-right: .7rem; font-size: .7rem; vertical-align: .1em; }
.wireTrack a { color: var(--cream); text-decoration: none; }
.wireTrack a:hover, .wireTrack a:focus { color: var(--marigold); text-decoration: underline; }
.wireTag { color: var(--marigold); margin-right: .45rem; font-size: .75rem; text-transform: uppercase; }
.wireBand:hover .wireTrack, .wireBand:focus-within .wireTrack, .wireBand.isPaused .wireTrack { animation-play-state: paused; }
.wireToggle { flex: none; border: 0; border-left: 1px solid var(--basalt-2); background: var(--basalt-2); color: var(--cream); font: 600 .75rem/1 var(--mono); text-transform: uppercase; padding: 0 1rem; cursor: pointer; }
.wireToggle:hover { background: var(--lake); }
@keyframes wireRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.no-js .wireTrack [aria-hidden="true"], .wireTrack .wireDup[hidden] { display: none; }

/* ---------- stage ---------- */
.stagePanel { margin: 0 1.25rem; background: var(--lake-deep); color: var(--cream); position: relative; border-radius: 0 0 4px 4px; overflow: hidden; }
.stageSlides { margin: 0; padding: 0; list-style: none; }
.stageSlide { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 460px; }
.js .stageSlide { display: none; }
.js .stageSlide.isLive { display: grid; animation: stageIn .6s ease both; }
@keyframes stageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.stageSlide figure { margin: 0; position: relative; }
.stageSlide img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.stageSlide figcaption { position: absolute; left: 0; bottom: 0; background: rgba(28,35,33,.78); font: 400 .72rem/1.3 var(--mono); padding: .35rem .6rem; }
.stageCopy { padding: 2.4rem 2.4rem 4.2rem; display: flex; flex-direction: column; justify-content: center; }
.stageNo { font: 600 .8rem/1 var(--mono); color: var(--marigold); letter-spacing: .1em; text-transform: uppercase; }
.stageCopy .stageHeading { font: 800 clamp(1.9rem, 4vw, 3.1rem)/1.02 var(--display); letter-spacing: -.025em; margin: .6rem 0 .9rem; }
.stageCopy p { margin: 0 0 1.2rem; max-width: 36ch; color: #e8e2cf; }
.stagePin { font: 400 .8rem/1.3 var(--mono); color: #bfd6d3; }
.stagePin::before { content: "\2316  "; color: var(--marigold); }
.stageGo { align-self: flex-start; display: inline-block; background: var(--marigold); color: var(--basalt); font: 700 .95rem/1 var(--display); padding: .8rem 1.15rem; text-decoration: none; border-radius: 999px 999px 999px 0; }
.stageGo:hover { background: var(--cream); color: var(--basalt); }
.stageControls { position: absolute; right: 1.2rem; bottom: 1.1rem; display: flex; gap: .4rem; align-items: center; }
.no-js .stageControls { display: none; }
.stageControls button { border: 1px solid rgba(247,240,222,.5); background: transparent; color: var(--cream); font: 600 .75rem/1 var(--mono); padding: .5rem .7rem; cursor: pointer; text-transform: uppercase; }
.stageControls button:hover { background: var(--cream); color: var(--basalt); }
.stageCount { font: 400 .75rem/1 var(--mono); margin-right: .4rem; color: #bfd6d3; }

/* ---------- home rails ---------- */
.homeMain { display: block; padding: 0 1.25rem; }
.secHead { font: 800 1.65rem/1.1 var(--display); letter-spacing: -.02em; margin: 0 0 .4rem; color: var(--basalt); }
.secLede { margin: 0 0 1.4rem; color: var(--muted); max-width: 62ch; }
.homeBlock { padding: 3rem 0 1rem; border-bottom: 1px solid var(--rule); }
.purposeGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--basalt); }
.purposeCol { padding: 1rem 1rem 1.2rem; border-right: 1px solid var(--rule); }
.purposeCol:last-child { border-right: 0; }
.purposeCol h3 { font: 700 1.15rem/1.1 var(--display); margin: 0 0 .7rem; }
.purposeCol h3 span { font: 400 .7rem/1 var(--mono); color: var(--ember); display: block; margin-bottom: .35rem; letter-spacing: .08em; }
.purposeCol ul { list-style: none; margin: 0; padding: 0; }
.purposeCol li { padding: .55rem 0; border-top: 1px dashed var(--rule); font-size: .95rem; line-height: 1.35; }
.purposeCol li a { font-weight: 600; }
.purposeCol li small { display: block; color: var(--muted); font-size: .82rem; margin-top: .15rem; }
.purposeLead img { aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: .6rem; filter: saturate(.92); }

.splitBlock { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem; }
.areaNote { background: var(--paper); border: 1px solid var(--rule); border-top: 6px solid var(--lake); padding: 1.4rem 1.5rem; align-self: start; }
.areaNote h2 { font: 800 1.35rem/1.15 var(--display); margin: 0 0 .7rem; }
.areaNote img { margin: 0 0 1rem; }
.statement { margin: 3rem 0; padding: 2rem 0; display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start; }
.statement h2 { font: 800 2rem/1.05 var(--display); margin: 0; color: var(--lake-deep); }
.statement p { margin: 0 0 .8rem; }

/* ---------- timeline (F8) ---------- */
.tlMonths, .tlItems { list-style: none; margin: 0; padding: 0; }
.tlMonth { position: relative; padding-left: 1.6rem; border-left: 3px solid var(--basalt); margin-bottom: 1.4rem; }
.tlMonth::before { content: ""; position: absolute; left: -9px; top: .25rem; width: 15px; height: 15px; background: var(--marigold); border: 3px solid var(--basalt); border-radius: 50%; }
.tlMonthHead { font: 800 1.15rem/1.2 var(--display); margin: 0 0 .7rem; display: flex; gap: .7rem; align-items: baseline; }
.tlMonthHead small { font: 400 .72rem/1 var(--mono); color: var(--muted); text-transform: uppercase; }
.tlItem { display: grid; grid-template-columns: 3.6rem 1fr; gap: .9rem; padding: .7rem 0; border-top: 1px dotted var(--rule); }
.tlItem time { font: 400 .72rem/1.1 var(--mono); text-transform: uppercase; color: var(--muted); text-align: center; border: 1px solid var(--rule); background: var(--paper); padding: .35rem 0; align-self: start; }
.tlItem time b { display: block; font: 600 1.3rem/1 var(--mono); color: var(--basalt); }
.tlBody a { font: 700 1.08rem/1.25 var(--display); text-decoration: none; color: var(--basalt); }
.tlBody a:hover { color: var(--ember); text-decoration: underline; }
.tlBody p { margin: .25rem 0 0; font-size: .93rem; color: var(--muted); }
.tlMore a, .loadOlder { font: 600 .85rem/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.loadOlder { border: 2px solid var(--basalt); background: transparent; padding: .7rem 1rem; cursor: pointer; color: var(--basalt); }
.loadOlder:hover { background: var(--basalt); color: var(--cream); }
.tlWrap--compact { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--basalt); }

/* ---------- inner pages ---------- */
.stageHead { margin: 1rem 1.25rem 0; background: var(--lake-deep); color: var(--cream); padding: 2.2rem 2rem 2rem; border-radius: 4px; border-bottom: 6px solid var(--marigold); }
.stageHeadIn { max-width: 900px; }
.stageKicker { margin: 0 0 .5rem; font: 600 .78rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--marigold); }
.stageTitle { margin: 0; font: 800 clamp(1.9rem, 4.5vw, 3rem)/1.05 var(--display); letter-spacing: -.025em; }
.crumbTrail { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; font: 400 .78rem/1.3 var(--mono); }
.crumbTrail li + li::before { content: "/"; margin: 0 .45rem; color: var(--marigold); }
.crumbTrail a { color: #cfe2df; }
.bodyGrid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 2.2rem; padding: 2rem 1.25rem 3rem; }
.mainCol { min-width: 0; outline: none; }
.mainCol > .lede { font-size: 1.18rem; line-height: 1.55; color: var(--basalt-2); margin-top: 0; }
.mainCol h2 { font: 800 1.5rem/1.15 var(--display); letter-spacing: -.015em; margin: 2.2rem 0 .6rem; color: var(--basalt); }
.mainCol h3 { font: 700 1.15rem/1.2 var(--display); margin: 1.6rem 0 .4rem; }
.mainCol p, .mainCol li { max-width: 68ch; }
.mainCol figure { margin: 1.6rem 0; }
.mainCol figure img { border-radius: 3px; }
.mainCol figcaption { font: 400 .78rem/1.4 var(--mono); color: var(--muted); margin-top: .45rem; }
.leadFig img { width: 100%; max-height: 520px; object-fit: cover; }
.noteBox { background: var(--paper); border-left: 5px solid var(--ember); padding: 1rem 1.2rem; margin: 1.8rem 0; font-size: .95rem; }
.noteBox p { margin: 0; }
.pinLine { font: 400 .85rem/1.4 var(--mono); color: var(--lake-deep); background: rgba(14,90,97,.08); padding: .55rem .8rem; display: inline-block; }
.pinLine::before { content: "\2316  "; color: var(--ember); }
.pagerPair { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 2px solid var(--basalt); }
.pagerPair a { font: 700 1rem/1.25 var(--display); text-decoration: none; max-width: 48%; }
.pagerPair a span { display: block; font: 400 .72rem/1 var(--mono); text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.pagerPair .pgNext { text-align: right; margin-left: auto; }
.hubList { list-style: none; margin: 1.5rem 0; padding: 0; }
.hubList > li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.3rem; padding: 1.2rem 0; border-top: 1px solid var(--rule); }
.hubList img { aspect-ratio: 3 / 2; object-fit: cover; }
.hubList h3 { margin: 0 0 .3rem; font: 700 1.2rem/1.2 var(--display); }
.hubList p { margin: 0 0 .4rem; }
.hubGroupHead { font: 800 1.4rem/1.1 var(--display); margin: 2.4rem 0 0; padding-top: 1rem; border-top: 3px solid var(--basalt); display: flex; gap: .7rem; align-items: baseline; }
.hubGroupHead span { font: 400 .75rem/1 var(--mono); color: var(--ember); }
.searchForm { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.5rem; }
.searchForm input[type="search"] { flex: 1 1 260px; font: 400 1rem var(--text); padding: .7rem .8rem; border: 2px solid var(--basalt); background: var(--paper); }
.searchForm button, .formRow button { font: 700 .95rem/1 var(--display); background: var(--basalt); color: var(--cream); border: 0; padding: .8rem 1.2rem; cursor: pointer; }
.searchForm button:hover, .formRow button:hover { background: var(--lake); }
.resultList { list-style: none; padding: 0; margin: 0; }
.resultList li { padding: .9rem 0; border-top: 1px solid var(--rule); }
.resultList a { font: 700 1.1rem/1.25 var(--display); }
.resultList small { display: block; font: 400 .72rem/1.3 var(--mono); color: var(--ember); text-transform: uppercase; margin-bottom: .2rem; }
.resultList p { margin: .25rem 0 0; color: var(--muted); font-size: .93rem; }
.noResults { background: var(--paper); border: 2px dashed var(--ember); padding: 1rem 1.2rem; font-weight: 600; }
.formRow { margin: 0 0 1rem; max-width: 560px; }
.formRow label { display: block; font: 600 .8rem/1.3 var(--mono); text-transform: uppercase; margin-bottom: .3rem; }
.formRow input, .formRow textarea { width: 100%; font: 400 1rem var(--text); padding: .65rem .75rem; border: 1px solid var(--basalt); background: var(--paper); }
.formNote { font-size: .9rem; color: var(--muted); }
.creditList { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.creditList li { background: var(--paper); border: 1px solid var(--rule); padding: .6rem; font-size: .85rem; line-height: 1.4; }
.creditList img { aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: .5rem; }
.mapList { columns: 2; column-gap: 2rem; }
.mapList li { break-inside: avoid; margin-bottom: .3rem; }
.articleMeta { font: 400 .8rem/1.4 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .purposeGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purposeCol { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 860px) {
  .stageSlide, .js .stageSlide.isLive { grid-template-columns: 1fr; min-height: 0; }
  .stageSlide img { max-height: 300px; }
  .stageCopy { padding: 1.6rem 1.3rem 4.4rem; }
  .splitBlock, .statement { grid-template-columns: 1fr; gap: 1.5rem; }
  .bodyGrid { grid-template-columns: 1fr; }
  #sideCol { order: 2; }
  .mainCol { order: 1; }
  .mastNote { text-align: left; border-right: 0; border-left: 4px solid var(--marigold); padding: 0 0 0 .7rem; }
  .navStrip .navFind { margin-left: 0; }
  .hubList > li { grid-template-columns: 1fr; }
  .mapList { columns: 1; }
}
@media (max-width: 560px) {
  .purposeGrid { grid-template-columns: 1fr; }
  .purposeCol { border-right: 0; }
  .navStrip a { padding: .55rem .7rem; font-size: .88rem; }
  .wireLabel { padding: .9rem .55rem; }
  .stageHead { padding: 1.6rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wireTrack { animation: none; flex-wrap: nowrap; }
  .wireViewport { overflow-x: auto; }
  .wireTrack .wireDup { display: none; }
  .js .stageSlide.isLive { animation: none; }
  html { scroll-behavior: auto; }
}
@media print {
  .wireBand, .navStrip, #sideCol, .stageControls { display: none; }
  body.csjBody { background: #fff; }
}
.visuallyHidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.figCredit { display: block; opacity: .8; font-size: .7rem; }
.dispatchBody { font-size: 1.05rem; }
.mainCol ul li { margin-bottom: .3rem; }