/* ---------------- HEADER ---------------- */
.frame-top{position:fixed;inset:0 0 auto 0;z-index:800;display:flex;align-items:center;gap:2.5rem;padding:1.1rem var(--gx);background:var(--black);transition:background .4s var(--ease),opacity .6s var(--ease) .5s}
body[data-view="cover"] .frame-top{background:transparent}
body[data-view="cover"].cover-code-on .frame-top{transition-delay:0s}
.frame-top .brand{display:block;line-height:0;flex-shrink:0}
.frame-top .logo-solo{width:5.5rem;height:auto;display:block}
.frame-top .grow{flex:1}
.menu-btn{display:inline-flex;align-items:center;gap:.9rem;height:2.5rem;padding:0 1rem;font-family:var(--rob);font-weight:700;font-size:.75rem;line-height:1;letter-spacing:.3em;text-transform:uppercase;color:var(--white);background:var(--charcoal);transition:background .2s,color .2s}
.menu-btn:hover{background:var(--magenta);color:var(--black)}
.menu-btn .bars{width:1.1rem;height:.75rem;position:relative;display:block}
.menu-btn .bars i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-btn .bars i:nth-child(1){top:0}
.menu-btn .bars i:nth-child(2){top:calc(100% - 2px)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(1){top:calc(50% - 1px);transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(2){top:calc(50% - 1px);transform:rotate(-45deg)}

/* ---------------- SITE INDEX ---------------- */
.idx,body.menu-open .frame-top{--black:#000000;--white:#FFFFFF;--smoke:#E1E1E1;--charcoal:#3E3E3E;--cyan:#00FFFF;--magenta:#FF00FF}
.idx{position:fixed;inset:0;z-index:700;background:#000000;overflow-y:auto;padding:5.5rem var(--gx) 3.25rem;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .55s var(--ease),visibility 0s linear .55s}
.idx.open{clip-path:inset(0);visibility:visible;transition:clip-path .55s var(--ease),visibility 0s}
.idx-inner{max-width:92rem;margin:0 auto;display:grid;grid-template-columns:minmax(17rem,.9fr) minmax(13rem,.85fr) 2.4fr;gap:3rem;position:relative;z-index:1}
.idx-photo,.idx-scrim{position:fixed;inset:0}
.idx-photo[hidden]{display:none}
.idx-photo img{width:100%;height:100%;object-fit:cover;display:block}
.idx-scrim{background:#000000;opacity:.76}
.idx-head{margin-bottom:1.25rem}
.idx-head small{display:block;font-weight:700;font-size:.75rem;letter-spacing:.3em;color:var(--smoke);margin-bottom:.75rem}
.idx-head h2{font-family:var(--bac);font-weight:400;text-transform:uppercase;font-size:2.1rem;line-height:1.05;color:var(--white)}
.idx-foot{z-index:1}
.idx-left{display:flex;flex-direction:column;gap:1.5rem}
.idx-g{opacity:0}
.idx.open .idx-g{animation:rise .7s var(--ease-out) both;animation-delay:calc(.25s + var(--i,0) * .08s)}
.idx h3{font-family:var(--bac);font-weight:400;text-transform:uppercase;font-size:1.1rem;line-height:1.1;color:var(--white);margin-bottom:.5rem;padding-top:.75rem;border-top:6px solid var(--cobalt)}
.idx h3 small{display:block;font-family:var(--rob);font-weight:700;font-size:.75rem;letter-spacing:.3em;color:var(--smoke);margin-bottom:.4rem}
.idx ul{list-style:none}
.idx a{display:grid;grid-template-columns:2.75rem 1fr;align-items:baseline;padding:.28rem .5rem;color:var(--smoke);font-weight:500;font-size:clamp(.8rem,1.95vh,1rem);line-height:1.25;transition:background .2s,color .2s}
.idx a em{font-style:normal;font-weight:700;font-size:.75rem;letter-spacing:.15em}
.idx a{border-bottom:1px solid var(--charcoal)}
.idx a:hover,.idx a:focus-visible{background:var(--charcoal);color:var(--white)}
.idx a.on{color:var(--cyan)}
.idx-plan{columns:3;column-gap:2rem;margin-top:.5rem}
.idx-cat{break-inside:avoid;margin-bottom:1.1rem}
.idx-cat h4{font-weight:700;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--white);padding:0 .5rem .4rem;border-bottom:2px solid var(--charcoal);margin-bottom:.2rem}
.idx-foot{position:absolute;left:var(--gx);bottom:1.1rem;font-weight:700;font-size:.75rem;letter-spacing:.2em;color:var(--smoke)}

/* ---------------- LOOKING BACK · chapter selector (mobile only) ---------------- */
.lb-select{position:fixed;top:3.75rem;left:var(--gx);right:var(--gx);z-index:420;display:none;opacity:0;pointer-events:none;transition:opacity .3s}
#lbSelBtn{width:100%;display:flex;align-items:center;gap:.9rem;min-height:2.75rem;padding:0 1rem;background:var(--charcoal);color:var(--white);font-weight:700;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;text-align:left}
#lbSelBtn .n{color:var(--smoke)}
#lbSelBtn .nm{flex:1}
#lbSelBtn .car{font-size:1rem;transition:transform .3s var(--ease)}
.lb-select.open .car{transform:rotate(180deg)}
.lb-select ul{list-style:none;display:none;background:var(--black);border:2px solid var(--charcoal);margin-top:.25rem;max-height:60dvh;overflow-y:auto}
.lb-select.open ul{display:block}
.lb-select a{display:flex;gap:1rem;align-items:center;min-height:2.75rem;padding:0 1rem;color:var(--smoke);font-weight:500;font-size:1rem}
.lb-select a span{font-weight:700;font-size:.75rem;letter-spacing:.15em}
.lb-select a.on{color:var(--cyan)}

@media (max-width:1200px){.idx-plan{columns:2}}
@media (max-width:900px){
  .idx{padding-top:5rem}
  .idx-inner{grid-template-columns:1fr;gap:2rem}
  .idx-plan{columns:1}
  .idx-foot{position:static;margin-top:2rem}
  .lb-select{display:block;top:3.6rem}
  .lb-select.show{opacity:1;pointer-events:auto}
}

/* The *-Negative.svg files carry no fill (render black as <img>); invert gives the intended white. */
.logo-solo,.cover-logo{filter:invert(1)}

/* header while the menu is open: sits on the photo; logo follows theme */
body.menu-open .frame-top{background:transparent}
html.light .logo-solo{filter:none}
body.menu-open .logo-solo{filter:invert(1)}

/* ---------------------------------------------------------------------
   MENU TYPE TEST: one voice. Roboto Light, 16px, upper and lower case.
   Hierarchy comes from color, spacing and rules, not from size or caps.
   To go back, delete this block.
   --------------------------------------------------------------------- */
.idx h3,.idx h3 small,.idx-head h2,.idx-head small,.idx a,.idx a em,.idx-cat h4,.idx-foot{
  font-family:var(--rob);font-weight:300;font-size:16px;line-height:1.3;letter-spacing:0;text-transform:none}
.idx h3,.idx-head h2,.idx-cat h4{color:var(--white)}
.idx h3 small,.idx-head small,.idx a em,.idx-foot{color:var(--smoke)}
.idx h3 small,.idx-head small{display:block;margin-bottom:2px}
.idx-head small{margin-bottom:2px}
.idx a{grid-template-columns:36px 1fr;padding:5px 8px}
.idx a em{font-style:normal;letter-spacing:.02em}
.idx-cat h4{padding:0 8px 6px;margin-bottom:2px}
.idx a:hover,.idx a:focus-visible{color:var(--white)}

/* ---- menu type test, round 2 ----
   Bacalar caps for the section titles, Roboto Bold for categories, indigo bar for the section entry rows. */
.idx h3,.idx-head h2{font-family:var(--bac);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.1vw,40px);line-height:1.1;letter-spacing:0}
.idx h3 small,.idx-head small{font-family:var(--bac);font-weight:400;text-transform:uppercase;font-size:16px;line-height:1.3;margin-bottom:8px}
.idx h3{padding-top:12px;margin-bottom:12px}
.idx-head h2{margin-top:4px}
.idx-cat h4{font-weight:700}
.idx li.idx-start a{background:var(--indigo);color:var(--white);margin-bottom:6px;border-bottom:0}
.idx li.idx-start a:hover,.idx li.idx-start a:focus-visible{background:var(--cobalt)}
.idx li.idx-start a.on{color:var(--cyan)}